Responsive Layouts Beyond the Sidebar

Jen Simmons

Responsive Layouts
Beyond the Sidebar

Jen Simmons

jensimmons.com

@jensimmons


responsivelayouts.jensimmons.com
github.com/jensimmons/responsivelayouts

(Click on many of the images to get to stuff. They are links.)

a screenshot of The Web Ahead in iTunes link
a screenshot of WTFmobileweb.com link
a screenshot of cern.ch link
a screenshot of the Apress book prototype on various devices link

Layout

Big Questions:
1 sidebar or 2?
Fat Footer?
Mega Menu?

Let’s Make That
Responsive!

Jen's Design Process for
Coming Up with Responsive Layouts

  1. Design Content Structure

A Rant About Process

Not Gonna
Work Anymore

(as if it ever did)

So, what do we
do instead?

</rant>

Jen's Design Process for
Coming Up with Responsive Layouts

  1. Design Content Structure
  2. Design Source Order
  3. Design Narrowest Layout (somewhat)
  4. Design Wider & Wider Layouts (& narrow)

1. Design
Content Structure

[Insert everything
smart on
Content Strategy here]

Well-defined Chunks
vs.
Amorphous Blobs

link

Film Festival Website
Types of Content

Film Festival Website
Film Content Type

1. Design
Content Structure

2. Design
Source Order

HTML

View Source
or
Turn off CSS

link

Semantics

Film Festival Website
Film Content Type

Film Festival Website
Film Content Type

Learn HTML

2. Design
Source Order

3. Design
Narrowest Layout

CSS

			body {
			  width: 90%;
			  margin: 2em auto;
			}
			img {
			  width: 100%;
			}
		

Typography
Visual Style

Handy Tools

Learn CSS

3. Design
Narrowest Layout

4. Design
Wider & Wider
Layouts

			@media (min-width: 40em) {
			    .main-content {
			        width: 70%;
			        float: left;
			    }
			    dl {
			        float: right;
			        width: 20%;
			        padding: 1em;
			    }
			    // Plus some CSS to undo things
			}
		

4. Design
Wider & Wider
Layouts

Jen's Design Process for
Coming Up with Responsive Layouts

  1. Design Content Structure

How to decide
what goes where
when?

What is the
purpose
of layout?

Sequential Order
Visual Hierarchy
Associative Connections
Usage Patterns

Sequential Order

Guide the user’s
understanding of what to
read/watch/use/do
first…
Then next…

Visual Hierarchy

Small, light off to the “side”
vs.
Big, bold, front & “center”

What is Important?
What can be ignored until
a deeper dive is desired?

Associative Connections

What goes with what?

Usage Patterns

Leverage user’s
pre-existing knowledge

Communicate
with layout

Sequential Order
Visual Hierarchy
Associative Connections
Usage Patterns

Writing Layout CSS

link
			* {box-sizing: border-box}
		
(Paul Irish made a case for using it in Feb 2012)

Let a Grid Framework
Do the Heavy Lifting
Handling Layout CSS

link

What breakpoints
should I use?

Common Widths

link

My Well-Worn “Breakpoints”

link

Viewport Units

Flexbox

Regions and Exclusions

For More

a screenshot of The Web Ahead in iTunes link

The Web Ahead

jensimmons.com
twitter: jensimmons
responsivelayouts.jensimmons.com