Responsive websites. Toolbox
-
Upload
wojtek-zajac -
Category
Technology
-
view
3.434 -
download
0
description
Transcript of Responsive websites. Toolbox
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