Responsive Web Design:

How the mobile web has

changed the way we think and work

Vidal Quevedo (@vq20) and Nick Weaver (@nickweaver)

[ April 19, 2012 ]

Madison Web design Meetup

Ethan marcotte(@beep / @rwd)

Responsive Web Design Books

Nick Weaver

Director of Web Services

University Communications, UW–Madison@nickweaver | jnweaver@wisc.edu

Vidal QuevedoWeb Communications Strategist

University Communications, UW–Madison@vq20 | quevedo@wisc.edu

Who we are

•HTML, CSS, JavaScript

•PHP, Ruby

•MySQL, PostgreSQL

•WordPress

•Rails, Kohana

•Git (and some lingering Subversion)

•Textmate, Sublime Text, Vim, Coda, BBEdit

Our toolkit

•A brief history of mobile at UW-Madison

•Challenges of native apps and mobile sites

•The One-Web Ideal: Universality as a philosophy

•Responsive Web Design

•What is it?

•The benefits of RWD

•The challenges of RWD

•Pragmatic RWD: Content, Context, Audiences

•What’s next in RWD?

Overview

A brief history of mobile at UW-Madison

UW–Madison Native apps

•Launched in Dec 2010 and Aug 2011 for iOS and Android, respectively

•“Big Shiny Object Syndrome”

•More code to manage

•Skills are harder to find

• Infrequent updates

•Limited features

•Not everyone has an iPhone or Android

Challenges of native apps

BrYan Rieger: Rethinking the Mobile Web

•Not everyone has a smart phone to use your app

•Web-based apps can be better suited to bridge the gap

•Deliver a consistent experience across multiple platforms

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

• Launched December 2011

• Platform agnostic

• Relies on User-Agent detection and delivers tailored experience based upon device classes

m.wisc.edu

•More code to manage (native + web)

•m.wisc.edu is a completely different experience than www.wisc.edu

Challenges of m.wisc.edu

≠

The One-Web Ideal: Universality as a philosophy

A website should provide a useful user experience no matter what device you’re using to access it.

~ Nick Weaver and Vidal Quevedo

An ideal world: one web

So, what is the “web”?

This is not the web

http://bradfrostweb.com/blog/notes/this-is-the-web/

This is the web

http://bradfrostweb.com/blog/notes/this-is-the-web/

This will be the Web

http://bradfrostweb.com/blog/notes/this-is-the-web/

Responsive Web Design

“The basic idea of Responsive Web Design is that a website should ‘respond’ to the device it's being viewed on.”

~ Matt Doyle

What is RWD?

http://www.elated.com/articles/responsive-web-design-demystified/ - Image: http://instagr.am/p/H41MqlHI4Q/

Some examples

http://designmodo.com/responsive-design-examples/

The Boston Globe

Some examples

http://designmodo.com/responsive-design-examples/

Stephen Caver (personal website)

Some examples

http://designmodo.com/responsive-design-examples/

Think Vitamin (design blog)

•Fluid-based layouts

•Responsive images and media

•Media queries

Basic rwd elements

•px vs. %

•Benefit: Page layout and content that scales proportionally the screen real estate available.

Fluid-based layouts

http://speakerdeck.com/u/lucasalvini/p/responsive-design-and-progressive-enhancements-for-the-web-workshop#fans

• img {max-width: 100%;}

•Benefit: Images (or embedded video e.g.) that can scale up or down to fill the width of their container elements.

Responsive images and media

•Benefit: Define CSS rules that only apply to devices that meet the conditional tests of the device properties (“Break Points”)

Media queries

@media screen and (max-width: 480px) {.sidebar {

float: none; width: 98%; }}

•One code base!

•Device-agnostic

•Relatively easy (CSS)

RWD: Benefits

• The main challenges of mobile-optimized sites are still ones of user-centered content and design

• Browser support (and workarounds)

• No perfect solution for delivering responsive images and assets

• Managing CSS and media queries can get complex

• Source code order can limit content/design choices

• Testing requires more time (and money, i.e. devices)

RWD: Challenges

•RWD isn’t only about CSS/HTML/JavaScript techniques: it is a different web development approach that requires a more focused mindset

To be or not to be responsive?

http://speakerdeck.com/u/lucasalvini/p/responsive-design-and-progressive-enhancements-for-the-web-workshop#fans

Screen size Diversity

Interface Diversity

Specs Diversity

Connectivity Diversity

CONTEXT

CONTENT

• Mobile First

• Design from a mobile perspective first and then up (and not the other way)

• Content First

• Be lean and mean: On mobile, real state is precious. What is the most important content you need to showcase? Use this as an evaluation of the overall content strategy of your site.

• Content Strategy

• What to deliver, and when: focus on audiences and activities (“Content like water”)

To be or not to be responsive?

•Excellent article by Rudy Regot: “Responsive web design: a project-management perspective*”

• Important questions to ask BEFORE starting the project:

• Does this project need to be responsive?

• Will all views have the same features?

• Will you need to split views? (i.e. touch.facebook.com)

To be or not to be responsive?

http://dev.opera.com/articles/view/responsive-web-design-a-project-management-perspective/

•Where will the “break points be”? Will they be content-driven or device-driven?

•Will it be fluid all the way?

•To be or not to be mobile first?

To be or not to be responsive?

http://dev.opera.com/articles/view/responsive-web-design-a-project-management-perspective/

Case study: uw emergency

http://emergency.wisc.edu

Case study: #uwrightnow

http://uwrightnow.wisc.edu

•For RWD, Twitter is the best way to get the latest as it happens. Follow these people:

• Brad Frost - @brad_frost

• Jason Grigsby - @grigs

• Stephanie Rieger - @stephanierieger

• Jeremy Kieth - @adactio

• Luke Wrobelewski - @lukew

RWD: Who to follow

•Here’s a still tiny but growing list on RWD we put together on Twitter:

• https://twitter.com/#!/vq20/responsive-web-design

RWD: Who to follow (cont)

• Books: RWD (Ethan Marcotte), Mobile First (Luke Wroblesky), Content Strategy (Kristina Halvorson)

• Articles: We will share a list via email

RWD: Books and articles

Thanks!

Nick Weaver

Director of Web Services

University Communications, UW–Madison@nickweaver | jnweaver@wisc.edu

Vidal QuevedoWeb Communications Strategist

University Communications, UW–Madison@vq20 | quevedo@wisc.edu