Responsive Web Design from the Trenches #IL2013

Jeff Wisniewski, U. of Pittsburgh

Crafting a single site that works well across a wide range of devices: desktops, laptops, tablets, phones.

Predicting the future is hard. There’s a range of devices and could be more coming.

Not just resizing: some stuff disappears, navigation changes.

U. Pitt. was running two sites: desktop and mobile.

Idea that mobile users were doing something different doesn’t seem to be true. With one site, less maintanence, too.

All of your content and all of your apps should be available mobilely.

Mobile first. Design for mobile first. Design with touch in mind (larger targets) and ample whitespace. Images should add value.

Content first; inventory, rewriting, prioritization.

Write for mobile: concise, clear, brief, chunk content. Rewrote virtually everything.

Images: axed most of them.

Start with a small screen, expand it till it looks like s***, then add a breakpoint.

Media queries: for max-width x on media y, do something. (CSS)

Responsive images: serve different size images or different images entirely for different devices. Avoid simply hiding them, because they are served anyway (taking up bandwidth). (Smashing magazine 7/8/2013)

Don’t do a linear “waterfall process,” be more agile.

Content inventory, content prioritization, content reference wireframes, rewrite all content (Mobile first).

Design for mobile (phone), then design for various breakpoints, sketch, wireframe, usability testing (on paper, since there will be more changes), functional testing (on multiple devices), HTML design prototype (late in the process).

Tools: frameworks (standardized HTML, CSS, javascript code). Examples: Skeleton, Foundation, Bootstrap, etc.

Content management systems (e.g., Drupal, WordPress) have their own responsive content themes.

Tips and tricks:

Hard to resist urge to start coding right away.

Rewriting content was time well spent.

Still handing off to many services to non-optimized sites (catalog, some databases).

Focus on content, not devices. Which content needs to go together?

Design in text.

Used personas to test platform use cases. Actually had names and pictures attached to chairs during meetings.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s