beyond responsive web design
DESCRIPTION
Responsive Web Design, as laid out by Ethan Marcotte, is about a whole lot more than just media queries. I look at the three elements of responsive web design, statistics about mobile web browsing, and offer tips on how to best design sites for responsiveness. N.B.: Several slides are lifted wholesale from Bryan Rieger's excellent "Rethinking the Mobile Web" presentation, be sure to check it out!TRANSCRIPT
Beyond Responsive Web Design“...let a hundred devices bloom...”
Responsive web design?
Responsive Web Design
One HTML file
+ multiple devices and displays______________________________
a range of custom experiences
Responsive Web Design
In keeping with the fundamental ideas of the Web:
Access by anyone, on any device
Separation of content and presentation
Progressive enhancement / Graceful degradation
“A responsive design is composed of three distinct parts:”
ETHAN MARCOTTE (@BEEP), “ON BEING RESPONSIVE”
1. A flexible grid.
Flexible / fluid grids
Break up the site’s layout into modules that can be moved and resized as needed
Size modules proportionately using ems or percentages (or both)
target ÷ context = result
1. A flexible grid.
2. Flexible images. Or more specifically, images that work in a flexible context.
Flexible / fluid images
overflow: hidden
max-width: 100%
JS solutions to load an appropriately-sized image
1. A flexible grid.
2. Flexible images. Or more specifically, images that work in a flexible context.
3. Media queries.
Media queries
Ever make a print stylesheet before?
<link rel=”stylesheet” href=”#” media=”screen” />
<link rel=”stylesheet” href=”#” media=”print” />
Media queriesMore in-depth rules for when styles apply
<link rel=”stylesheet” href=”#”
media=”screen and (min-device-width: 640px)” />
Can be used within a stylesheet too
@media screen and (orientation:landscape) {
#content { ... }
}
Media queries
height
width
device-height
device-width
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
“Responsive” redesigns
COLLY.COMDESKTOP > NARROW > MOBILE
INFORMATIONARCHITECTS.JPWIDE DESKTOP > DESKTOP > MOBILE
“Switchy” designs
“Switchy” designsNot responsive designs
COLLY.COMDESKTOP > NARROW > MOBILE
FLUID GRIDFLUID IMAGESMEDIA QUERIES
INFORMATIONARCHITECTS.JPWIDE DESKTOP > DESKTOP > MOBILE
FLUID GRIDFLUID IMAGES?MEDIA QUERIES
Media queries are not enough
Why not?
“Pinch-to-zoom makes any site usable on iPhone/Android”
“Viewport browsing still works on Blackberry”
“Only people with smartphones use the mobile web anyways”
Really?
A bit of perspective...
IPHONE SOLVES ALL PROBLEMS?IPHONE IS JUST A DROP IN THE MOBILE OCEAN
WEBKIT != FULL SUPPORT FOR MEDIA QUERIESWEBKIT SOLVES ALL PROBLEMS?
PROXY BROWSERS CAN ACT LIKE DESKTOP BROWSERSPHONE-NATIVE BROWSERS SOLVE ALL PROBLEMS?
INSANELY TINY TEXT WHEN MEDIA QUERIES FAILTABLETS SOLVE ALL PROBLEMS?
Cold, hard facts
World population, 2010: 6.9 billion
1.96 billion global Internet connections (28.7% of the world: 42% Asia, 24% Europe, 13% NA)
5.1 billion mobile subscriptions (over 4 billion use 2G GSM)
SOURCES: INTERNETWORLDSTATS.COM, BUDDE.COM.AU
1.3 billion mobile Internet users
Almost 1/3 of Internet users access only via mobile (including almost 25% of U.S. users)
Only 21% of mobile users have 3G access
1.96 billion Internet connections...
minus 1.3 billion mobile users...
equals about 500 million broadband Internet connections worldwide
WORLDWIDE MOBILE DEVICE SALESAPPLE? 3%. RIM? 3%. MOTOROLA? 3%. HTC? 2%.
The Jakarta effect
The Jakarta effect
Capital of Indonesia, ~9.6 million people
$100/month ADSL vs. ~$17/month unlimited mobile data
Proximity to China = cheap Shanzhai (“bandit”) phones
The Jakarta effect
~2 million BlackBerry users
Largest Twitter user base worldwide
#2 Opera Mini user base worldwide
#3 Facebook user base worldwide
So what do we do?
- BRYAN RIEGER, “RETHINKING THE MOBILE WEB”
Desktop before mobile is backward!
Mobile devices are less powerful than desktops
Mobile bandwidth is more expensive
So why are we sending more (and more complicated) code for mobile than desktop?
Mobile First
Mobile site + media queries = desktop site
Progressive enhancement
No support for media queriesis the first media queryMedia queries don’t work on most mobile devices
Most desktop browsers support media queries (and are powerful enough to use them without slowing down)
Old desktop browser = less complicated site!
Avoid unnecessary data transfer
NYTimes.com mobile: ~970KB
Avoid unnecessary data transfer
Guardian.co.uk mobile: ~80KB
Avoid unnecessary data transfer
display: none still uses bandwidth
Load images as progressive enhancement instead through media-queried stylesheets
Use JS for progressive enhancement only
Mobile devices are less powerful
Animation takes a lot of processing
Frameworks are big downloads
Use JS for progressive enhancement only
So, avoid JavaScript for mobile whenever possible
Use CSS3 animation instead
Amazon, FB, and Google all launched with no JS in their original designs
Testing!
OPERA MINI
UC WEB
Device-specific emulatorsNokia Symbian
RIM Blackberry
Palm webOS
Windows Mobile
iPhone SDK
Android SDK
Who gets it right?
HICKSDESIGN.CO.UKSUPER-WIDE > WIDE > TABLET > MOBILE (ALL FLUID)
STPAULSSCHOOL.ORG.UKTHREE COLUMN > TWO COLUMN > ONE COLUMN (ALL FLUID, WITH ANIMATION)
YIIBU.COMWIDE > NARROW (FLUID GRIDS + IMAGES GO A LONG WAY)
HUFFDUFFER.COMTWO LAYOUTS (THREE VARIATIONS)
Limitations
Conditional HTML
Image size overhead
Conditional JS behavior
Capabilities detection
“The choice is not between using media queries and creating a dedicated mobile site; the choice is between using media queries and doing nothing at all.”
- Jeremy Keith, “A responsive mind”
Resources
Volkside Wirify
filamentgroup’s “responsive-images” plugin
Sencha Animator
iAd Producer
Websites
Yiibu (and SlideShare page)
A List Apart
Unstoppable Robot Ninja
Mobiforge
Thanks!Kevin Zurawel
@kzurawelarborwebsolutions.com