ah teaches information design (Build Responsively lecture)

Build Responsively

Lecture outline

Focusing on the building of responsive web layouts and an introduction to your final project. Lecture slides will be made available on the day of the lecture (Nov. 4).

CSS exercise problems

I will send out 'common problems' that came up with the CSS exercises in an announcement next week.

Progressive Enhancement

Build up from the basics

The layering of progressive enhancement

  • Content: Ensuring that the basic content works (clean, semantic, HTML)
  • Styling: Applying styling and testing across devices (caniuse? + CSS)
  • Enhancing: Enhancing the experience as much as possible through use of advanced CSS or JavaScript.

Readability

If I cannot read it, I will not stay on the website.

Playful text is fun, but please remember that we need to be able to read the words that we are looking at. That means high-contrast and clear type is essential.

Readability of Navigation

Let's take a look at the readability of novel navigation.

Readability of a 'Web-page'

Let's take a look at the readability below the fold of the web-page.

Ad Blindness

If it looks like an ad, I will not see it.

Eye-tracking data demonstrating banner blindnessFrom Banner Blindess Findings (NNGroup)

Genericism

If it doesn't explain what it does, I fear the result.

Animation illustrating the differences between responsive and adaptive web design

9 Basic Principles of Responsive Web Design

Elements of Responsive Design

The pieces you need:

  • Relative units
  • Fluid grids
  • Media queries

Relative Units

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/934c46233e45d31277ac08e351ed892f

Parent & Child Elements

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/9fadf35fe1d4ec950e5e8bc7730bddd2

Fluid Grids

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/d5b93b07354d645e7c49a8049b411e6f

Animation demonstrating how breakpoints work in web design

9 Basic Principles of Responsive Web Design

Media Queries

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/19fb18931c47e8c5064c9222d6929d02

Points on Breakpoints

Where and when should our web layout collapse?

  • Let your content decide
  • Use relative units (always)
  • Grids are your bestest friends
  • Avoid an absolute process
Can I Use...

Project shift

The project brief and approach has shifted somewhat. I realize this may cause some frustration.

Let's talk about it.

P4: Design and Develop
Exercise #8

Next lecture

Next lecture is support week. For the lecture you will be given an opportunity to voice what you would like covered or re-covered. Please ask any and all pending questions to the online quiz.

Exercise #9

Next lecture

Technical Questions

A lecture for answering any lingering questions you have about the final project, HTML, or CSS.

1/1