From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
84
From "mobile last" to "mobile first” a Pragmatic Approach to Responsive Design Tatjana Salcedo Megan Hack University of Vermont @uvmwebteam #mobilefirstrwd
-
Upload
tatjana-salcedo -
Category
Technology
-
view
4 -
download
0
description
Responsive web design is taking higher ed web development by storm. This session will cover how the University of Vermont recently converted their existing fixed-width web design into a responsive one using a mobile-first strategy. We'll discuss both the advantages (and disadvantages) of the mobile first approach as well as tips and techniques used to create a nimble foundation for rapidly converting fixed width sites to responsive ones throughout the institution. In addition, we'll reveal a post launch assessment of the effectiveness and performance of the responsive design.
Transcript of From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design
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
