Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6 Includes a sample project built from scratch in Node.js using LESS available on Github

1. Responsive Websites
Joe Seifi, Sept 2012

2. Survey

3. - http://www.bostonglobe.com
- http://worldwildlife.org/
- http://nd.edu/
- http://www.w3.org/
- More at http://mediaqueri.es
Demos

5. Why?

6. Why?
What?

7. Why?
What?
How?

8. Why?
What?
How?
Sample Project

9. Why?
What?
How?
Sample Project
Best Practices

10. Why?
What?
How?
Sample Project
Best Practices
Testing and Tools

11. Why?

12. - 7.0 Billion people in the world
- 3.5 Billion own a mobile devices (1/2)
- 1.3 Billion mobile internet users
- 21% had 3G in 2010
Population: 7+ Billion

13. - 71% expect websites to load quickly on their phone
- 74% leave a website after waiting 5 seconds
- 77% of top websites take at least 5 seconds to load
- 43% unlikely to return to a slow website
- 72.8% of stats are made up on the spot
- 95% of people have already heard that one
More Stats

14. Here and Now

15. Here and Now

16. 2 years early - in 2010
Here and Now

17. - Websites are not like print. Why do we
design them that way?
Traditional Print

18. Lots of Web Devices

19. - Performance
- Resolutions and Screen Sizes
- Browser Features
- Network Connection Speeds
Differences in Mobile

20. What?

21. @media (min-width: 600px) and (max-width: 700px) {
body{ background-color:red;}
}
@media (max-width:500px){
body{background-color:blue;}
}
Quick Code

22. How?

23. 3 Main Options

24. apple.com apple.com
Desktop iPhone
1. Do Nothing

25. yelp.com m.yelp.com yelp apps
Desktop iPhone Web Native Apps
2. Separate Website

26. starbucks.com starbucks.com starbucks.com
Desktop iPhone iPad
3. Responsive Website

27. Responsive Design’s main components
1. Flexible Layout
2. Media Queries
3. Flexible Images
Building Blocks

28. - Simplify
- Only provide the features your users want
Content First

29. - Design for Mobile First
- Optimize for Speed and Performance
- Add Functionality for Larger
Resolutions
- Load Time Affects Customer
Retention
Luke Wroblewski 2011
“Mobile First”

30. - Micro-Tasks
- Downplay Navigation & Options
- Align with user Context and Behavior
- Don’t Assume user’s location, speed,
mindset, and expectation
Mobilize your Website

31. - Pixel Perfect Wireframes & Mockups don’t
make sense anymore
- Style Tiles
- Page Description Diagrams
- Work with “Content” Pages first
- Prioritize Design Elements
Mobilize your Process

32. - Principles of being future friendly
- Acknowledge and embrace
unpredictability.
- Think and behave in a future-friendly way.
- Help others do the same.
Be “Future-Friendly”

33. - BBC Testing Lab Sample
- iOS - iPhone
- Symbian S60 - N95
- Android 2.1 - HTC desire
- Blackberry OS 5 - Bold 9700
- Blackberry OS 6 - Bold 9700
- Windows Phone 7.5 - Omnia 7
- Symbian S60
- Kindle Fire - Android 2.2 Fork
- iPad
- Kindle Fire
Grow a Device Lab

34. - Wanna know the secret to improving your
running? Move your feet.
- Paralysis by Analysis
- Intimidation of Complexities
- Just Start somewhere
- Hone your skills along the way
Move your Feet

35. Sample Project

42. - Mostly Fluid
- Column Drop
- Layout Shifter
- Tiny Tweaks
- Off Canvas
Luke Wroblewski &
Jason Weaver
Responsive Patterns

43. - Mondrain
- Basic Gallery
- Featured Items
- Column Flip
- Feature Shuffle
Joshua Johnson
Responsive Patterns

44. - Write LESS: Do more!
- CSS Pre-compiler
- Variables
- Functions (aka Mixins)
- Operations
LESS can Help

45. Code: Flexible Layout

46. Target
_________ = Result
Context
24
____ = 1.5em 900
____ = 93.75%
16 960
Fluid Design Formula

48. Media Queries

49. Mobile Site styles
+ @media queries added
______________________
= Full Desktop Site
Mobile First Approach

50. 1600x1200 1680x1050
1280x1024 1440x900
1280x800 1366x788
1024x768 800x600 480x320
320x480 240x320
Breakpoints

51. <link rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">
Recognized media types
all braille embossed handheld
print projection screen speech tty tv
Media Types - CSS2

52. <link media="screen and (device-width: 600px)"
rel="stylesheet" url=”600.css” />
@import url(“600.css”) screen and (device-width:
600px);
@media screen and (device-width : 600px) { … }
Media Queries - CSS3

53. [min-|max-]width or height
[min-|max-]device-width or device-height
[min-|max-]aspect-ratio
[min-|max-]device-aspect-ratio
orientation resolution monochrome
color color-index scan grid
Media Features

54. <meta name="viewport"
content="width=device-width, initial-
scale=1.0, user-scalable=0" />
Recognized viewport values
width height initial-scale minimum-scale
maximum-scale user-scalable
Meta Viewport

55. Combine it all together...
<meta name="viewport" content="initial-scale=1.0,
width=device-width">
<link media="all" href=”base.css” rel="stylesheet" />
<link media="only screen and (min-device-width:
320px)" href=”320.css” rel="stylesheet" />
<script> or <!--[if lt IE 9]> ... add shim for IE 8 or below

56. import only 1 file
<meta name="viewport" content="initial-scale=1.0,
width=device-width">
<link rel="stylesheet" media="all" href=”base.css”/>
/* inside base.css ---------- */
// base styles first... then breakpoints inline
@media only screen and (min-device-width : 320px){ … }
@media only screen and (min-device-width : 480px){ … }
@media only screen and (min-device-width :768px){ … }
@media only screen and (min-device-width : 1020px){ … }

57. - Start with Base css... then cascade upwards
- “Enhance” the site only for those browsers
that “Respond” to media query viewports
and have “Features” you can detect
- Add Polyfill Solution for IE8 and below
- IE8,7,6,5,4, IE Mobile, Blackberry old, Net Front, UCWeb, Obigo
Progressive Enhancement

58. Code: Media Queries

59. @media only screen and (-webkit-min-device-pixel-
ratio : 1.5), only screen and (min-device-pixel-ratio :
1.5) {}
/* sniff iPhone 4 and high pixel ratio devices */
Vendor Specific Queries

60. Code: Responsive Images

61. <img id="demo" src="http://dummyimage.com/
400x300" alt="Responsive Image" data-
fullsrc="http://dummyimage.com/800x600">
<script>responsiveEnhance(document.getEleme
ntById('demo'), 400);</script>
JavaScript Image Swapping

62. http://src.sencha.io/320/http://
victorianigro.files.wordpress.com/2012/01/football-
field-31.jpg
Adaptive Server Side

63. RESS

64. <picture alt="description">
<source src="small.jpg">
<source src="medium.jpg" media="(min-width:
400px)">
<source src="large.jpg" media="(min-width:
800px)">
</picture>
Picture Tag

65. #test {
background-image: url(assets/no-image-set.png);
background-image: -webkit-image-set(url(assets/test.png) 1x,
url(assets/test-hires.png) 2x);
background-image: -moz-image-set(url(assets/test.png) 1x,
url(assets/test-hires.png) 2x);
background-image: -o-image-set(url(assets/test.png) 1x,
url(assets/test-hires.png) 2x);
background-image: -ms-image-set(url(assets/test.png) 1x,
url(assets/test-hires.png) 2x);
width:200px;
height:75px;
}
Image-Set Support

66. <div id="test">
<div></div>
</div>
<style type="text/css">
#test div {background-image:url('test.png');width:
200px;height:75px;}
@media all and (max-width: 500px) {
#test {display:none;}
</style>
Background Images

67. Beyond the Basics

68. - @embeded vs. <external
- cascade vs. min-max:isolated
- default mobile vs. desktop
- <!--[conditional vs. <javascript
Zoe Mickley Gillenwater
Loading your @media...

69. - Augment Media Queries with Feature
Detection
- Media Query
- Main Layout and Graphics
- Feature Detection
- Improve Design and Functionality
Feature Detection

70. - Screen Size != Browser/Device Capability
- May not be using Native Device Browser
- Connection & Hardware Speeds vary
- Don’t rely on emulators
More than Screen Size

71. - Progressive Laoding
- Concatenation
File Loading

72. - Less Framework 4
- Skeleton Framework
- Foundation 3
- Starbucks Style Guide
- 320 and Up
- Mobile Boilerplate
Responsive Frameworks

73. - Top Navigation
- Footer Anchor
- Select Menu
- Toggle
- Off Canvas Nav
- Footer Only
- Hide
Navigation Patterns

74. video {
max-width: 100%;
height: auto;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container"><iframe src=""></iframe></div>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
Responsive Videos

75. AppendAround
<div class="foo" data-set="foobar"></div>
<div class="bar" data-set="foobar"></div>
.bar {display: block;}
.foo {display: none; }
@media (min-width: 30em){
.foo {display: block;}
.bar {display: none;}
}
$( ".sample" ).appendAround();
Responsive Ads

76. <style type="text/css">
@media only screen and (max-device-width: 480px) {
table[class=contenttable] {
width:320px !important;
}
}
</style>
<table width="640" border="0" cellpadding="0"
cellspacing="0" class="contenttable">
Responsive Emails

77. SEO Implications

78. Testing and Tools

79. - Xcode > Open Developer Tool > iOS Simulator
- Opera Mini & UC Browser In the
iTunes App Store
- Nokia http://
www.developer.nokia.com
- UC Browser http://www.ucweb.com/
- BlackBerry https://
developer.blackberry.com
- Android http://
developer.android.com/tools/help/
Emulators

80. - Shaodw
- Mac or Windows + Chrome + iOS/Android
- weinre
- sudo npm -g install weinre
- weinre --boundHost localhost --verbose
Adobe Shadow / Weinre

81. Performance Tests

82. - Chrome - Web developer toolbar
- Safari - User Agent switching
- ResponsivePX.com
- mobilephoneemulator.com pxtoem.com
- Aptus on Mac
- Hardware IO Tools for Xcode or the Slowy app
Testing Tools

83. Books

84. Thank You

85. References

86. Joe Seifi Responsive Images Responsive Frameworks
http://seifi.org http://www.sencha.io/ http://lessframework.com
http://adaptive-images.com/ http://foundation.zurb.com
Original Article - Ethan http://5by5.tv/webahead/25 http://www.getskeleton.com
http://www.alistapart.com/articles/responsive-web-design/ https://github.com/filamentgroup/Responsive-Images http://stuffandnonsense.co.uk/projects/320andup/
https://github.com/joshje/Responsive-Enhance http://html5boilerplate.com/mobile
Mobile First - Luke https://github.com/carsonmcdonald/ServerSideResponsiveImageExample http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-
http://www.lukew.com/ff/entry.asp?933 http://www.alistapart.com/articles/responsive-images-how-they-almost- designs/
worked-and-what-we-need/ http://www.starbucks.com/static/reference/styleguide/
Future Friendly http://24ways.org/2011/adaptive-images-for-responsive-designs http://www.amazium.co.uk
http://futurefriend.ly/thinking.html http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to- http://www.starbucks.com/static/reference/styleguide/
support-retina-images/
W3C Specs http://cloudfour.com/examples/mediaqueries/image-test/ Stats
http://www.w3.org/TR/CSS2/media.html http://css-tricks.com/which-responsive-images-solution-should-you-use/ http://arstechnica.com/business/2012/08/from-altair-to-ipad-35-years-of-
http://www.w3.org/TR/css3-mediaqueries/ http://dev.opera.com/articles/view/responsive-images-problem/ personal-computer-market-share/4/
http://filamentgroup.com/examples/responsive-images/ http://www.akamai.com/stateoftheinternet/
Sample Sites https://docs.google.com/spreadsheet/ccc? http://www.smartonline.com/smarton-products/smarton-mobile/
http://www.bostonglobe.com key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0 smartphones-pass-pc-sales-for-the-first-time-in-history/
http://worldwildlife.org/ http://www.w3.org/community/respimg/wiki/Picture_Element_Proposal http://www.gomez.com/wp-content/uploads/CPWR-MWD-Infographic-
http://nd.edu/ https://github.com/scottjehl/picturefill FNL3-72dpi.jpg
http://www.w3.org/ http://fitvidsjs.com http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/b
http://mediaqueri.es http://www.browserscope.org/
RESS
Style Tiles http://www.lukew.com/ff/entry.asp?1392 Tools
http://styletil.es http://detector.dmolsen.com/ http://pxtoem.com
http://wurfl.sourceforge.net http://labs.adobe.com/technologies/shadow/
Just get Started - Move Your Feet http://www.slideshare.net/4nd3rsen/ress-responsive-design-server-side- http://people.apache.org/~pmuellr/weinre/docs/latest/
http://swanson.github.com/blog/2012/08/27/move-your- components-10084972 http://mobitest.akamai.com/
feet.html http://www.slideshare.net/4nd3rsen/ress-responsive-web-design- http://www.browserstack.com/
serverside-components http://slowyapp.com
Dao of Web Design & Revisited http://www.dmolsen.com/mobile-in-higher-ed/2012/02/21/ress-and-the- http://jsfiddle.net
http://www.alistapart.com/articles/dao/ evolution-of-responsive-web-design/? http://iosfonts.com/
http://www.webdirections.org/resources/john-allsopp-the- utm_source=feedburner&utm_medium=twitter&utm_campaign=Feed%3A
dao-of-web-design-revisited/ +MobileInHigherEd+%28Mobile+in+Higher+Ed%29 LESS
http://www.lukew.com/ff/entry.asp?1392 http://winless.org
Arguments Against Responsive Design https://github.com/tobie/ua-parser http://lesscss.org
http://www.webdesignshock.com/responsive-design-problems/ http://incident57.com/codekit/
http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide- Navigation Patterns http://winless.org
one/ http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for- Tutorials
iOS Human Interface Guidelines responsive-design/ http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design-
http://developer.apple.com/library/ios/documentation/UserExperience/ http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive- techniques-tools-and-design-strategies/
Conceptual/MobileHIG/MobileHIG.pdf solution/ http://www.netmagazine.com/tutorials/build-responsive-site-week-
designing-responsively-part-1
Device testing lab at BBC Layout Patterns http://www.netmagazine.com/tutorials/build-responsive-site-week-
http://mobiletestingfordummies.tumblr.com/post/20056227958/testing http://www.lukew.com/ff/entry.asp?1514 designing-responsively-part-1
http://jasonweaver.name/lab/offcanvas/technical/
Media Queries http://designshack.net/articles/css/5-really-useful-responsive-web-design- Mobile Compatibility Tables
http://zomigi.com/blog/essential-considerations-for-crafting-quality-media- patterns/ http://www.quirksmode.org/m/table.html
queries/ http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
https://github.com/scottjehl/Respond Responsive Emails
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ Performance http://www.campaignmonitor.com/guides/mobile/design/
http://filamentgroup.com/lab/ https://github.com/filamentgroup/quickconcat http://www.campaignmonitor.com/guides/mobile/coding/
a_fix_for_the_ios_orientationchange_zoom_bug/ http://www.amdocs.com/Whitepapers/OSS/WhitePaper-
https://github.com/scottjehl/Respond MobileDataCapacityCrunch.pdf Responsive Ads
http://www.igvita.com/2012/06/14/debunking-responsive-css- https://github.com/filamentgroup/AppendAround
performance-myths/