ah teaches web design & development (Being the Unicorn lecture)

Being the Unicorn

Lecture outline

Portfolios... just portfolios. Lecture slides will be made available on the day of the lecture (November 4).

Setup

For today's critique session please:

  1. Make sure your website is available at pages.github.sfu.ca/..
  2. Open up Firefox or Chrome with your website
    • Within the browser also open a tab with the validator (ah.link/v)
    • Within the browser also open a tab with the responsive viewer (ah.link/rv)
    • Within the browser also open a tab with the colour viewer (ah.link/cbv)
  3. Open up Safari or Edge with your website

Once finished setting up, please work on completing a teamwork reflection.

Process

Please make sure to include your names as part of your comments and be clear what you were commenting on (in case people need to follow-up).

After each prompt you will rotate one computer to the right (clockwise) around the room

Valid HTML and CSS

Open the validator at ah.link/v

Run the website through the validator. Comment on any frequent concerns.

Validator password is:

You have...

Semantic Elements

Are the following elements used appropriately?

Are the <br> elements defining a line break?

<p class="address">
SFU Surrey<br>
12747 102 Avenue<br>
Surrey, BC
</p>

Are they using non-semantic elements? <i> <b> <u>

Are ID's — <p id="name_of_this"> — for elements unique?

<!-- ID attributes must not be the same -->
<h2 id="introduction">Introduction</h2>
<h2 id="kittens">Kittens</h2> <!-- If IDs are used as below, it is likely a good case for using a class -->
<section id="banner_style"></section>
<section id="banner_style"></section>

You have...

Ordering Headings

Are headings properly used?

  • h1 Shoes-r-us
    • h2 In-store
      • h3 Kid's
      • h3 Men's
      • h3 Women's
    • h2 On Sale Now!

Or are they improperly used?

  • h1 Not used
    • h2 Shoes-r-us
      • h3 Not used
        • h4 Kid's
        • h4 Men's
        • h4 Women's
      • h3 On Sale Now!

You have...

Appropriate Alt Text

Do your images have appropriate alt-text?

If the image is inside a link, does the alt text describe where the link goes?

<a href="home.html">
<img src="banner-image.jpg" alt="Home page">
</a>
<!-- Because it is in a link, the alt attribute describes where the link goes -->

If it is an image on its own, does the alt text describe the image as if we did not see it?

<img src="sheep.jpg" alt="A white wool sheep grazing in a grassy field">
<!-- The alt attribute describes the content of the image -->

You have...

Labels Tied to Inputs

Are labels associated with inputs?

<label for="email">Email address:</label>
<input type="text" id="email" placeholder="name@email.com">

You have...

Responsive units

Do they use units responsive to the user's preferences?

Does any styling related to text content use pixels?

/* This is NOT okay */
p {
margin: 20px;
padding: 36px;
font-size: 20px;
}

Do any media queries use pixels?

/* This is NOT okay */
@media (width > 640px) {
.grid {
grid-template-columns: 1fr 1fr;
}
}

You have...

Responsive units

Part 2

Is there use of responsive units that may cause issues?

Does any styling related to text content use viewport (vw/vh) or percentage units (%)?

/* This is MAYBE okay */
p {
margin: 2vw; /* maybe okay */
padding: 5%; /* maybe okay */
font-size: 10%; /* NOT okay */
}

Does anything have fixed widths that we may need to be careful about?

/* This is MAYBE okay */
p {
min-width: 20rem; /* maybe okay */
}

@media (width < 30rem) {
.grid {
min-width: 35rem; /* NOT okay */
}
}

You have...

Responsiveness

When looking at the page in the responsive viewer — ah.link/rv — does the page effectively reorganize at different sizes?

Things to look out for:

You have...

Clear Interaction Cues

Can we tell what is a link and when we use the mouse to navigate to it, does it visually cue us?

You have...

Clear Interaction Cues

Part 2

When we use the keyboard to navigate to links do they visually cue us?

When using the keyboard:

You have...

Clear content

Are there concerns with any of the following, and if so why or why not?:

You have...

Consistency

Do the elements used — buttons, images, headings, text, inputs, etc — feel like a cohesive set? Why so or why not?

You have...

Colour Testing

Let's see how things are working without colour. Please head to ah.link/cbv.

You have...

Device Testing

Let's see what things look like on your own smartphone. Go to ah.link/339s for faster access.

You have...

This QR code will take you to the sites on your phone:

A QR-code linking to ah.link/339s

Critique complete

In a moment you will be permitted to return to your projects.

Please take some time to review the feedback you have received.

In preparation for lecture...

Please close up any laptops, cellphones, iPads, Palm Pilots and other 'beep-boop' devices.

Unicorn

Becoming a Unicorn

Step 1: Apply waffle cone to forehead

What makes you different?

  1. Who do you want to work for?
  2. What 'makes you unique' (but employable)?
  3. How do you reconcile all these years of us telling you to be programmers, but designers, but artists, but content strategists, but makers, but animators, but sound designers, but cognitive scientists, but architects, but creators of virtual worlds, but game designers, but storytellers, but video editors, but photographers, but creative entities, but researchers, but ...?

Creating an Ethos

This week's labs

A(n) ethos is the understanding, characteristics and definition of oneself as a ____________.

Visuals

Who are you visually?

Let's look at a couple of examples:

Showcasing Your Work

Help us understand why it is good

Ensure your projects cover:

Step 1: Situation

  1. What are necessary details to explaining P2?

Step 2: Task

  1. What are necessary details to explaining P2?
  2. What was a challenge you encountered in P2?

Step 3: Action

  1. What are necessary details to explaining P2?
  2. What was a challenge you encountered in P2?
  3. What was an action you took to address that challenge P2?

Step 4: Result

  1. What are necessary details to explaining P2?
  2. What was a challenge you encountered in P2?
  3. What was an action you took to address that challenge P2?
  4. What was the result?

Let's consider

How would you explain them to our audiences?

The professional, lay, and disciplinary audiences we need to consider

Potential audiences of our portfolio

Why Should I Care?

Industry and learning

Portfolios are all about reflective practice, and learning well always involves self-reflection.

P3: What Do They Want?

How employers approach applications

How employers approach your application:

  1. Skimming the cover letter (5s): Well written and custom?
  2. Look at the resume (10s): Well designed, clear branding, good typsetting?
  3. Read the resume (20s): Have skills and experience relating to job?
  4. Look at web portfolio (30-60s): Want custom URL, non-templatey website

Care of "Burn Your Portfolio"

An Extreme Do-not-do Example

Let's head over to The Worst Portfolio Ever.

More coming soon!

This slide will be up shortly.

Sameyness

Make that framework less framework-y

"I'm sick of seeing the same damn buttons. I'm sick of seeing that same damn toolbar up top. It's driving me crazy."
"Customize Twitter Bootstrap to Not Look Bootstrap-y" by Antonin Januska

Personality

Identifying how you want others to see you

How might you communicate that you are 'efficient' without using text?

Code Plagiarism

Be wary

You are allowed to use frameworks (ie. Bootstraps or Foundation web UI frameworks), JavaScript libraries to make working on the site easier, but the final design must be your own work. All materials must be cited.

When in doubt, ask the instructor.

Self-Plagiarism

Be wary

If you have a pre-existing portfolio that you are revising or redesigning for this project you are required to provide a URL to the original by November 18. This just helps us ensure that there is no self-plagiarism occurring in the project.

Self-plagiarism will result in grade of zero. No exceptions.

Identifying employers

Remember every website has an audience, in this case your potential employer is your audience. Hence we'll be having you identify who you might want to work for in the future, to help you focus your site.

Employment exercise

Keep it real

For the employers you look at and the job descriptions you find, please be realistic.

P3: Portfolio

The next couple weeks

Just a reminder of what is coming up in IAT-339:

If there are other code items you would like covered please do not hesitate to reach out and let me know.

1/1