IAT-235: 05 Teh Webz

IAT-235: 05 Teh Webz — A slide deck

Quiz Rules

  1. You will have only thirty minutes to complete the quiz. Keep an eye on the time due, as late submissions receive a zero.
  2. This quiz is open book, meaning you can draw on online resources as much as you would like. Please remember that if you cannot access a reading because everyone else did so before you, there is nothing we can do. Please refer to your notes.
  3. Any words that are not your own must be cited using a proper format — for example (Author, 2000). Any plagiarism will result in a grade of zero. No exceptions.
  4. Any talking, texting, messaging, paging, or secret-tiny bluetooth resulting in communications with friends or classmates will result in a grade of zero. No exceptions. Facebook can wait.
  5. Please answer any questions in full sentences.

Quiz time

The secret password is . You have 30 minutes.

IAT-235 — P02: Wires
A bare bones sitemap

Sitemap Requirements

Stage #2

Include:

  • Further details on pages
  • Grouping of similar pages
  • Showing further connections/relationships
A mid-way sitemap

Sitemap Requirements

Stage #3

Include:

  • Annotate pages
  • Prioritize groupings
  • Identify user needs
A full fleshed out sitemap

Teh Webz

Moving you to the digital

From the The Dao of Web Design

  1. Why do we need to think 'flexibly' when it comes to the web?

Context

"It looks like you're on a train. Would you like me to show you the insultingly simplified mobile site?"
@Cennydd

Device and Context

Let's take a look at a webpage listing various mobile device sizes which accessed the website.

Connections and Humans

We're lazy, er, or efficient

"...users have time to read [on average] 20% of words on a page."
Nielson-Norman Group

Patterns and Chunking

Giving us consistent and reasonable chunks of information makes it easier for us to use.

Defining Context

Where it gets difficult

  • What kind of device might the user access the site on?
  • What kind of environment might they use it in?
  • What time are they likely to use it at?
  • Will they use it individually or in social settings?

We cannot really control context when it comes to the web, so our challenge is to support flexibility.

From the The Dao of Web Design

  1. Why do we need to think 'flexibly' when it comes to the web?
  2. How does the web's flexibility support accessibility?

Readable Type

Readable type on the web should also be flexible type. Type that we can scale as we need to accommodate our needs.

Skeumorphic or Flat

How do these 'trends' influence our perception of colour, depth and form?

A interface demonstrating a more skeumorphic design approach
A interface demonstrating a flat design approach

Code

<p>This is a paragraph of text.</p>
A finger touching a user interface filled with text-based nodes
What does Lupton mean when she refers to 'type as navigation'?

The Tension

Fixed vs fluid

As a web designer, this is your biggest challenge. Transitioning from thinking in fixed designs and moving to fluid designs.

How Fluid Works

Websites that are fluid and respond to different device sizes accordingly are considered responsive websites. Let's take a look at some examples at Media Queri.es

Responsive Design & Grids

Let's sketch.

Changing Formats

Our lecture will be adjusting

For the next couple weeks we'll be changing formats for our lecture.

  • First half: Regular lecture
  • Second half: Coding tutorial

Web Toolkits

Prepped and ready to go

Available on Canvas in next week's module will be links to programs for your first 'web toolkits'. They contain:

Google Chrome

Why?

Google Chrome happens to be a relatively standards-compliant browser, and hence we have focused our interests on using it.

Coding Applications

Atom, Sublime Text, TextWrangler, Notepad++, etc

We are working with code-only applications in this class, as you need to understand the code to be an effective web designer.

Dreamweaver/Muse/Visual code editors are banned

You are not permitted to use any of these for anything in this course.

Frameworks are banned

You are not permitted to use any frameworks (i.e. Bootstraps, Foundation) in designing your websites for this course.

Questions?

This week's labs

The low-down

  • P02 Crit-heavy time

Next week's lecture

Interwebs Annotation

  • The web as information
  • Semantic markup & HTML
  • HTML Fundamentals

Next week's reading

Selections from HTML5 for Web Designers (Keith, 2011)

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 9-10am and Thursdays from 9-10am at the Surrey campus mezzanine.
  • ac.ufs@h.werdna
1/1