Responsive websites.Toolbox

WARSAW, 29.03.2012

@appsp i r i na

Agenda

• Feature detection

• Media Queries 101

• Viewport Tricks

• Performance

• CSS frameworks

• Responsive images

• Micro libraries

• jQuery plugins

• Mobile Wordpress

• Browser testing

PROGRESSIVEenhancement

PIXELperfection

vs

Source: Justin Avery (CC BY-SA 3.0)

Interfaces don’t have to look the same everywhere.

TV already solved this problem.

“Android WebKit is the closest thing to being

the IE6 of mobile development for me.”

Dion Almaer, A day in the life of Android WebKit dealings

http://www.flickr.com/photos/thebetancourts/899849126/

We knowfeatures:

✦ screen size

✦ local storage

✦ touch

✦ canvas

✦ SVG

✦ screen size

✦ no touch

✦ poor JavaScript

✦ no canvas

✦ isMSIE

Hat tip: Yiibu

There areconstraints:

Feature detect

Media Queries 101

http://www.flickr.com/photos/seeminglee/3967329241/

<link rel="stylesheet" media="screen, projection" href="normal.css"> <link rel="stylesheet" media="print" href="print.css">

Party like it’s 1998!

CSS2 media types

CSS3 Media Queries

<link rel="stylesheet" type="text/css" href="example.css" media="screen and (color)">

Media type Expression

Better CSS3 Media Queries

@media screen and (color) { body { background: #f00; }}

@import url("example.css") screen and (color);

Increase maintainability with @import:

Save HTTP requests:

✦ former updates on orientation change, latter doesn’t

✦ only max/min-width will be visible in desktop browser

!"#/!$%-width or-device-width?

Detect high DPI screens

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="highdpi.css" />

Just retina display:

“Remove iPhone from ass.”PPK, The iPhone obsession

http://www.flickr.com/photos/redux/5065152716/

Detect high DPI screens

@mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min--moz-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) { /* Styles */}

Saves HTTP request, non-iOS-specific:

Detect iPad orientation

<link rel="stylesheet" media="all and (orientation: portrait)" href="portrait.css">

<link rel="stylesheet" media="all and (orientation: landscape)" href="landscape.css">

• Screenfly

• Responsive DesignTesting

• Responsive DesignTest Bookmarklet

Test it!

Browser support

— caniuse.com

Need supportfor IE6-8?

respond.jshttps://github.com/scottjehl/Respond

Viewport Tricks

http://www.flickr.com/photos/neilkrug/3934372897/

Viewport demystified

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=500 Custom width setting

minimum-scale=1.0 Prevents from zooming out

maximum-scale=1.0 Prevents from zooming in. Useful with forms

user-scalable=no Use cautiously. Mostly for mobile-specific designs

Hey girl,

when I see you,

my iPhone

gets 2x initial zoom

Home screen icon

<link rel="apple-touch-icon" href="apple-touch-icon.png">

supported by Android 2.1+, too!

Home screen icon

iOS adds by default:

• Rounded corners

• Drop shadow

• Reflective shine

<link rel="apple-touch-icon-precomposed"

href="apple-touch-icon-precomposed.png">

prevents addition of iOS effects

Home screen icon

Complete snippet:

http://mathiasbynens.be/notes/touch-icons

144 × 144

114 × 114

72 × 72

iPad ‘Retina’ display

iPhone ‘Retina’ display

iPad, iPad 2

57 × 57 non-Retina iOS and others

Hiding address bar

<meta name="apple-mobile-web-app-capable" content="yes">

After adding as a bookmark:

Cross-browser solution:

https://github.com/scottjehl/Hide-Address-Bar

iOS viewport scaling bug

Portrait Landscape

iOS viewport scaling bug

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { var viewportmeta = document.querySelector('meta[name="viewport"]'); if (viewportmeta) { viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0'; document.body.addEventListener('gesturestart', function() { viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6'; }, false); }}

— http://adactio.com/journal/4470/

fix

Performance

http://www.flickr.com/photos/frinky/2548934532/

Mobile first, stupid!

Decrease dependencies

The Boston Globe used the following methodology:

Load resources conditionally

ASSETSdepend on

screendimensions

DESIGNdepends on

windowdimensions

✦ Mobile perf bookmarklet

✦ YSlow for mobile bookmarklet

Optimize performance

Use CSS Data URL generators

or… built-in editor tools (e.g. implemented in Sublime)

Mobile-friendly frameworkshttp://www.flickr.com/photos/dunechaser/3385957841/

Develop your own!

Starbucks style guide: http://www.starbucks.com/static/reference/styleguide/

6 takes to responsive images

http://www.flickr.com/photos/mightyboybrian/3457507731/

max-width: 100%;

Doesn’t provide resources optimization

Defined as obsolete in HTML5

Needs 2 http requests

lowsrc

Uses up the most resources

Standard JavaScriptreplacement

Relies on JS for displaying content. Poor idea.

1pxgif

da t a - h i ghs rc

developed by Filament Group

used on Boston Globe

✦ PHP solution

✦ quick to set up

✦ doesn’t work with CDNs

Adaptive-images.com by Matt Wilcox

Micro libraries

http://www.flickr.com/photos/lrargerich/4999906554/

jQuery Plugins

http://www.flickr.com/photos/vidyo/6109749573/

Wordpress goes mobile

http://www.flickr.com/photos/andivszf/5306544164/

✦ WPTouch

✦ Wordpress Mobile Pack

✦ MobilePress

WPTouch plugin used on Stephen Fry’s website

1. Complete plugins

✦ Twenty ten fully responsiveequivalent available

✦ List of responsive themesat Free Themes Directory grows constantly

✦ Lots of responsive premium themes on Forest, WooThemes and Themify

2. Responsive themes

http://responsivetwentyten.com/

✦ Wordpress Mobile Pack

✦ Mobile Smart

✦ Device Theme Switcher

3. Theme switchers

Theme switchers usually base on user agent sniffing to serve users separate WordPress theme.

✦ Mobble

✦ Dropdown Menus

✦ WP Fluid Images

4. Responsive design helpers

if (is_mobile()) { echo "Dude, you rock."}

Browser Testing

http://www.flickr.com/photos/blakespot/6860486028/

There are EMULATORS

to solve your

PROBLEMS38*

99

* http://www.mobilexweb.com/emulators

Testing onREALDEVICESis crucial.

✦ Analyze your website’s traffic

✦ Review the local platform landscape

✦ Check against device-specific factors (form, screen size, performance, DPI)

✦ Compare with project-specific factors (location-based?)

Building your pool of devices

— Stephanie Rieger,http://stephanierieger.com/strategies-for-choosing-test-devices/

Q & A

Wojtek Zając (@theanxy)http://www.slideshare.net/wojciechzajac This work is licensed

under a Creative Commons Attribution 3.0 Unported License

Thanks!

Based on the brilliant research and works by:

• Scott Jehl

• Patrick H. Lauke

• Russ Weakley

& others.

First slide photo: http://www.flickr.com/photos/johnmcnab/5758738799/

Stephanie Rieger: http://www.flickr.com/photos/29022619@N03/6116794697/

Credit where it’s due

• Matt Wilcox

• Brad Frost

• Rachel McCollin

• Yiibu.com