Assignment 2 – Responsive Design

Redesign your current Zen Garden site. Use basic Responsive design techniques as per Ethan Marcotte’s article in a list apart:
Therefore it must contain the following:
– Flexible Grid – to consist of fluid columns and elastic type
– Responsive Media
– Media Queries
If you plan the site well before you begin, the process will go much more smoothly.
Before you write any code, plan. Remember: fail to plan = plan to fail.
The site must appear reasonably consistent between current versions of: Internet Explorer, Firefox, Safari, and Opera.
And should Validate in the W3C Validator

Marking Criteria – Total Points:   /200
Process Book: 50 pts.
Each of the following specific items are worth 10 pts each.
Technical sophistication

Multi-browser and platform.

CSS positioning for page layout and W3C validates

FTP – site is uploaded and follows common directory structure

Successful / Proper use of Responsive technical elements

Visual Design
Content – Purpose and goals are clear. Graphics support content. Information is logically organized.
Aesthetics – Visual unity with consistent color, format, and navigation. Pages visually balanced.
Background – Adds to theme/purpose and not distracting.
Fonts – Consistent and easy to read with various sizes and styles appropriate for headings and text.
Site Structure
Navigation – Clearly labeled and consistently placed
Layout – Easy to locate all important elements. Good use of white space and graphics.
Layout – Appropriate use of header, footer, and content above the fold.
Visual Hierarchy
Images – All images, especially links, use Alt Tag.
Images – No broken links.
Graphics – Relate to theme/purpose, thoughtfully cropped, appropriate size and quality.
Design – Balanced design and repetition give rhythm while variety of elements provide interest.
Color Choices – background, fonts,  & links are consistent and add to branding and target audience.


I. TypeRacer Group Runs

III. Intro / Outline of class

IV. WireFrame Crits

V. Responsive Work Session

A. Planning

B. Execution

VI. Media Queries & Breakpoints,


B.this one’s a little more advanced, but relevant, with some cool CSS techniques,

C. This one has some excellent code examples, and some good ways to compensate for IE,

VII. HomeWork

A. Keep working on responsive Zen Sites, implement at least most of one set of media queries, preferably the mobile handheld version

1. Next Week – Finals, study study study, remember, everything you will need to know is either in the book you bought for this class or contained in the links on the class blog

2. Assignment #2 is DUE

a. please review the requirements on the corresponding blog post: Assignment #2

b. make sure it has the three basic requirements of  ‘Marcotte-ian’ Responsive Design

1) Fluid Interior (%)

2) Elastic Type ( you may use REM’s instead of EM’s, if you wish, they’re the coming thing, you know, and you still have to do some math. lol. )

3) Media Queries ( for this assignment you’re only required to have one, to target the handheld device, tableture is optional )

3.  Only responsive to phone / small handheld required. ( Tablet portrait orientation is optional, extra credit, dont kill yrselves. )

a. i’m more concerned that you understand the principles of this style of responsive design and their implementation,

b. what creates the responsive experience?

c. many roads lead to the same destination. the users experience. how very… ZEN.

PLEASE, if you’re having any problems, post queries as comments to this post pls & tytyty.

thanks again for your efforts this quarter, it’s been a good one.


Time to think responsively!


design Experience FIrst,

then, the rest will follow,

for our project, we’ve already determined that we’re taking a desktop-first approach,

the desktop version is already done (hopefully)

For Next Week – Wireframe out two versions of the site,

one for tablet, one for handheld / mobile (tiny)

pick some break points, ( i.e. pixels, where do the major changes occur? 600px? 320px? )


easy right? make sure you account for all the elements in the desktop design.

please post your wireframes, or links to them as comments to this post.

I. Type Racer / Z-Type

II. Intro / Outline of Class

III. Typography recap,

A. Everyone got it?

B. Typographic Measures and Terms

C. Translation into Web

IV. Intro to Responsive Design

A. in the beginning, which was not so long ago…

1. Ethan Marcotte: on responsive design



B. Responsive – a definition

1. And really, that’s what responsive web de- sign is: a possible solution, a way to more fully design for the web’s inherent flexibility. In the first chapter, I said that the ingredients for a responsive design were a fluid grid, flexible images, and media queries. But really, they’re just the vocabu- lary we’ll use to articulate answers to the problems our users face, a framework for ordering content in an ever-increasing number of devices and browsers.

2. like everything on the web, creates more confusion than answers…

C. Responsive vs. Adaptive vs. Pragmatic




1. differences

2. reasoning

3. designer vs developer semantics (as usual)

4. approach

D. How to design,

– Experience FIrst, that’ll dictate the rest of the workflow,

1. Visual Design

2. Programmatic Design

3. Adaptive / Responsive Workflow, Agile Development Techniques

V. Criteria of Raw Responsive Design ( for our purposes )

A. Flexible Grid, Elastic gutters,

1. fluid , conversion formula

B. Elastic Type

1. ems, conversion formula

C. Media Queries (where the in-browser magic happens that ppl liek to see)

D. Fluid Images ( max-width: 100%; )

VI. Responsive Wire Framing.

VII. HomeWork – Assignment #2

another light week,

This week is Typography and Color Theory for the Web,

Some good reading awaits,

Web Typography:

Dry and Technical, but nevertheless excellent:

This one has some good portions, even for 2009, ignore the sections on sIFR, cufon, and FLIR, those are already on their way out.

and lastly,

the coming thing(s):

you rly gotta check this last one out, good times, good times.

Color Theory for the Web

the basics:

keeping in mind,

now the fun stuff:

don’t get too lost in this one, it can also sample palates and set up schemes from photos. and has adobe extensions to add to PhotoShop and FireWorks

first off,

don’t neglect your mid-quarter portfolio review!


if you haven’t already, convert the typography on your zen garden sites to either ems or rems.

here’s the formula for converting px to ems,

target / context = ems

12px / 16px = 0.75em where 16px is the font of either the parent element, or the browser default, depending how high up the DOM you are.  if you’re using rems the context will always be the browser default font size.

here’s some tools for doing just that:

you can test the typography using these two excellent chrome extensions:

urgh. why do they do their URL’s that way? weak google.

if you have any questions or require assistance, leave comments at the bottom of this post,

next week we’ll be tackling responsive design, and working on responsive wireframes and mockups.

have a good one!

For Next Week –

pick one of these tuts and DO IT, DO IT NOW ( or @ yr leasure )

make sure your Zen Garden sites are where they need to be (a.k.a. done), because next week is Typography and Intro to Responsive Web Design,

If you have and needs / helps with any CSS, please ammend them to this post as a comment.


– get together the sites / projects / materials you want to use,

– next week we’ll has chats about them, get y’all used to talking about your work.

I. typeracer

II. Intro / Outline of Class

B. Use the time wisely to get caught up on Zen Garden, OR Work on your Mid-Curriculum Review, remember if you fail that, you fail imd215 and have to take it over again while paying for it again, mwa ha haaaaaaa…. [crickets] [tumbleweeds]

III. Targeting older versions of IE

A. Conditional Comments –

B. Hacks –

C. Cross-Browser Compatability –

IV. Texture – more on this later, but if a thing looks more tangible, more like something from the real world, users are more apt to want to interact with it.

A. Out-FoxTrot-Standing source for textures:

V. Navigation with List Systems

A. crazy resource –

B. Mess w/ Class Tutorial

C. more crazy resources –

D. auto centered nav system, ah so nice.

a. Pick one from the list of 100 and see if you can do it.


For Next Week –

make sure your Zen Garden sites are where they need to be (a.k.a. done), because next week is Typography and Intro to Responsive Web Design,

Technically there is no HomeWork


I have to calculate your midterm grades by Monday,

so i need everything for the class thusfar by EOD Sunday (circa 1700h (5pm)) so i can finish up and enter grades that evening

the final CSS Zen Garden fixes are due by then as well.

anything i do not receive by 1700h Sunday.

I. typeracer

II. Intro / Outline of Class

III. Review / Crit ZenGarden Comps

IV. – Field Trip to PCville

a. where there will be weeping and gnashing of teeth

V. – Review x-browser compat and validation


VII. – MIDTERM – take it now or later? over the weekend? DUE MON

VIII. – Menu Systems with Lists

IX. HomeWork

This class we focused on practical application of the principles we’d learned in preceding weeks.

We worked on everyone’s CSS Zen Garden SItes and got them where they need to be.

We did not make it to Menu Systems with Lists, no worries, we’ll roll that over into next week.