From "mobile last" to "mobile first”a Pragmatic Approach to Responsive Design

Tatjana SalcedoMegan Hack

University of Vermont@uvmwebteam #mobilefirstrwd

[source: http://www.flickr.com/photos/carbonnyc/3135103537]

Who already has a

responsive site? And who is

planning on launching one

this year?

2013the year of Responsive Web Design

- Pete Cashmore, Mashable

And… The University of Vermont

But are we doing enough to optimize the mobile experience?

About three in four (74%) teens ages 12-17 say they access the internet on cell phones, tablets, and other mobile devices at least occasionally.

[source: 2013 Pew Teens and Technology Report]

One in four teens are “cell-mostly” internet users — far more than the 15% of adults who are cell-mostly. Among teen smartphone owners, half are cell-mostly.

[source: 2013 Pew Teens and Technology Report]

pragmatic /pragˈmatik/

adjectivedealing with things sensibly and realistically in a way that is based on practical rather than theoretical considerations

[Source: Oxford Dictionary of American English]

2014the year of Mobile First RWD

[Source: Kris Krug on Flickr]

Designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t.

- Luke Wroblewski, 2011

Mobile first means that you start your entire design process off by designing for the smallest screen.

Mobile First Awesomeness

A mobile first approach promotes better content and navigation design.

[Source: http://xkcd.com/773/]

[Source: Webdagene on Flickr]

Mobile First Awesomeness

A mobile first approach promotes high performance websites.

RWD Page Sizes are Increasing

[Source: Guy Podjarny, Real World RWD Performance Take 2]

Mobile RWD in Comparison

[Source: Guy Podjarny, Real World RWD Performance Take 2]

Putting Mobile First RWD into Practice

UVM’s mobile first rwd objectives

Make it direct

Make it easy to use

Make it beautiful

Make it quick

Make it flexible

Make it happen!

our revised objectives

Make it direct

Make it easy to use

Make it beautiful

Make it quick

Make it flexible

Make it happen!

Preserve existing layouts for desktop size screens

So, how is that mobile first?

Mobile first design doesn’t mean starting from scratch.

It’s a useful process even if you have an existing desktop site.

Start by asking what would the mobile version of this site or app look like? You’ll determine what priorities matter on key screens and flows.

By the time you’re done, you’ll be likely to able to make the desktop version better based on what you learned designing for mobile.

~ Luke Wroblewski

FIXED WIDTH RESPONSIVE

Is it a struggle to wrangle content?

Or is it more of a dance?

navigation

Mind Your Buttons

images and top banners

Determine Content Hierarchy

Employ sliders and accordion text

Utilize background images whenever possible

Use html for text and css for buttons whenever possible

700px wide

1200px wide

sidebars and micro-layouts

complex layouts

≈

FACT AND FIGURESMobile First Results:

UVM Homepage Load Times

[Source: pingdom]

Home Page Average Weight: Mobile vs. Widescreen

iPhone

Widescreen

0 100 200 300 400 500 600 700

Kb

Homepage Performance StatsDesktop

Mobile (iPhone)

[Source: WebPagetest]

Template File Sizes:Non-Responsive vs. Mobile 1st RWD

HTML TemplateCSS

JavaScript

0

5

10

15

20

25

30

Non-RWDMF RWDKb

Mobile Visits Increasing

1-Jan11-Ja

n21-Ja

n31-Ja

n

10-Feb

20-Feb2-M

ar

12-Mar

22-Mar

1-Apr

11-Apr

21-Apr

1-May

11-May

21-May

31-May

10-Jun

20-Jun

30-Jun10-Ju

l

20-Jul

0

1000

2000

3000

4000

5000

6000

7000

8000

2013 2012

Mobile Visitor Data

[Source: Google Analytics]

Mobile Visitor Data

[Source: Google Analytics]

The Road Ahead

CONTENT REFINEMENTRoad Ahead:

[Source: Flickr]

NAVIGATION DESIGNRoad Ahead:

Slide and Push Menus

EXTENDING TOUCH GESTURES

Road Ahead:

PERFORMANCE OPTIMIZATION

Road Ahead:

Performance:Limiting HTTP Requests

Performance:Compression and caching

Image Compression

Server caching

GZIP compression

Browser caching

Performance: Minify

CSS

JavaScriptHTML

Performance:Responsive Image Solutions

Lessons Learned from MF RWD

• Plan for content optimization on steroids• Don’t let navigation and UI controls take

over your screen• Turning the visual design process on its

head is not always easy• The development process goes more

smoothly … usually• Performance optimization easier to

achieve than with non-MF aproaches