Responsive Websites             Joe Seifi, Sept 2012
Survey
- http://www.bostonglobe.com- http://worldwildlife.org/- http://nd.edu/- http://www.w3.org/- More at http://mediaqueri.es ...
Why?
Why?What?
Why?What?How?
Why?    What?    How?Sample Project
Why?    What?    How?Sample ProjectBest Practices
Why?     What?     How? Sample Project Best PracticesTesting and Tools
Why?
- 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 i...
- 71% expect websites to load quickly on their phone- 74% leave a website after waiting 5 seconds- 77% of top websites tak...
Here and Now
Here and Now
2 years early - in 2010      Here and Now
- Websites are not like print. Why do we  design them that way?      Traditional Print
Lots of Web Devices
- Performance- Resolutions and Screen Sizes- Browser Features- Network Connection Speeds Differences in Mobile
What?
@media (min-width: 600px) and (max-width: 700px) {    body{ background-color:red;}}@media (max-width:500px){    body{backg...
How?
3 Main Options
apple.com              apple.com Desktop                 iPhone       1. Do Nothing
yelp.com   m.yelp.com   yelp appsDesktop    iPhone Web   Native Apps2. Separate Website
starbucks.com   starbucks.com   starbucks.com Desktop           iPhone          iPad3. Responsive Website
Responsive Design’s main components1. Flexible Layout2. Media Queries3. Flexible Images     Building Blocks
- Simplify- Only provide the features your users want         Content First
- Design for Mobile First- Optimize for Speed and Performance- Add Functionality for Larger  Resolutions- Load Time Affect...
- Micro-Tasks- Downplay Navigation & Options- Align with user Context and Behavior- Don’t Assume user’s location, speed,  ...
- Pixel Perfect Wireframes & Mockups don’t  make sense anymore- Style Tiles- Page Description Diagrams- Work with “Content...
- Principles of being future friendly  - Acknowledge and embrace    unpredictability.  - Think and behave in a future-frie...
-   BBC Testing Lab Sample    -   iOS - iPhone    -   Symbian S60 - N95    -   Android 2.1 - HTC desire    -   Blackberry ...
- Wanna know the secret to improving your  running? Move your feet. - Paralysis by Analysis - Intimidation of Complexities...
Sample Project
- Mostly Fluid- Column Drop- Layout Shifter- Tiny Tweaks- Off Canvas                   Luke Wroblewski &                  ...
- Mondrain- Basic Gallery- Featured Items- Column Flip- Feature Shuffle                    Joshua Johnson  Responsive Patt...
- Write LESS: Do more!- CSS Pre-compiler- Variables- Functions (aka Mixins)- Operations        LESS can Help
Code: Flexible Layout
Target    _________ = Result     Context 24____ = 1.5em    900               ____ = 93.75% 16             960 Fluid Design...
Media Queries
Mobile Site styles+   @media queries added______________________=   Full Desktop SiteMobile First Approach
1600x1200 1680x1050   1280x1024 1440x900    1280x800 1366x7881024x768 800x600 480x320     320x480 240x320    Breakpoints
<link rel="stylesheet" type="text/css"  media="print, handheld" href="foo.css">           Recognized media types      all ...
<link media="screen and (device-width: 600px)"rel="stylesheet" url=”600.css” />@import url(“600.css”) screen and (device-w...
[min-|max-]width or height[min-|max-]device-width or device-height          [min-|max-]aspect-ratio     [min-|max-]device-...
<meta name="viewport"content="width=device-width, initial-scale=1.0, user-scalable=0" />         Recognized viewport value...
Combine it all together...<meta name="viewport" content="initial-scale=1.0,width=device-width"><link media="all" href=”bas...
import only 1 file<meta name="viewport" content="initial-scale=1.0,width=device-width"><link rel="stylesheet" media="all" ...
- Start with Base css... then cascade upwards- “Enhance” the site only for those browsers  that “Respond” to media query v...
Code: Media Queries
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio :1.5) {}/* sniff iP...
Code: Responsive Images
<img id="demo" src="http://dummyimage.com/400x300" alt="Responsive Image" data-fullsrc="http://dummyimage.com/800x600"><sc...
http://src.sencha.io/320/http://victorianigro.files.wordpress.com/2012/01/football-                     field-31.jpg      ...
RESS
<picture alt="description"> <source src="small.jpg"> <source src="medium.jpg" media="(min-width:400px)"> <source src="larg...
#test {    background-image: url(assets/no-image-set.png);    background-image: -webkit-image-set(url(assets/test.png) 1x,...
<div id="test">  <div></div></div><style type="text/css">#test div {background-image:url(test.png);width:200px;height:75px...
Beyond the Basics
- @embeded vs. <external- cascade vs. min-max:isolated- default mobile vs. desktop- <!--[conditional vs. <javascript  Zoe ...
- Augment Media Queries with Feature  Detection- Media Query - Main Layout and Graphics- Feature Detection - Improve Desig...
- Screen Size != Browser/Device Capability- May not be using Native Device Browser- Connection & Hardware Speeds vary- Don...
- Progressive Laoding- Concatenation         File Loading
- Less Framework 4- Skeleton Framework- Foundation 3- Starbucks Style Guide- 320 and Up- Mobile BoilerplateResponsive Fram...
-   Top Navigation-   Footer Anchor-   Select Menu-   Toggle-   Off Canvas Nav-   Footer Only-   Hide    Navigation Patterns
video {    max-width: 100%;    height: auto;}.video-container iframe,   .video-container object, .video-container embed { ...
AppendAround<div class="foo" data-set="foobar"></div><div class="bar" data-set="foobar"></div>.bar {display: block;}.foo {...
<style type="text/css">   @media only screen and (max-device-width: 480px) {     table[class=contenttable] {       width:3...
SEO Implications
Testing and Tools
- Xcode > Open Developer Tool > iOS Simulator-   Opera Mini & UC Browser In the    iTunes App Store-   Nokia http://    ww...
- Shaodw - Mac or Windows + Chrome + iOS/Android- weinre - sudo npm -g install weinre - weinre --boundHost localhost --ver...
Performance Tests
- Chrome - Web developer toolbar- Safari - User Agent switching- ResponsivePX.com- mobilephoneemulator.com pxtoem.com- Apt...
Books
Thank You
References
Joe Seifi                                                                      Responsive Images                           ...
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Upcoming SlideShare
Loading in...5
×

Responsive Websites

35,274

Published on

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

Published in: Technology, Design
2 Comments
26 Likes
Statistics
Notes
No Downloads
Views
Total Views
35,274
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
174
Comments
2
Likes
26
Embeds 0
No embeds

No notes for slide

Responsive Websites

  1. 1. Responsive Websites Joe Seifi, Sept 2012
  2. 2. Survey
  3. 3. - http://www.bostonglobe.com- http://worldwildlife.org/- http://nd.edu/- http://www.w3.org/- More at http://mediaqueri.es Demos
  4. 4. Why?
  5. 5. Why?What?
  6. 6. Why?What?How?
  7. 7. Why? What? How?Sample Project
  8. 8. Why? What? How?Sample ProjectBest Practices
  9. 9. Why? What? How? Sample Project Best PracticesTesting and Tools
  10. 10. Why?
  11. 11. - 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
  12. 12. - 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
  13. 13. Here and Now
  14. 14. Here and Now
  15. 15. 2 years early - in 2010 Here and Now
  16. 16. - Websites are not like print. Why do we design them that way? Traditional Print
  17. 17. Lots of Web Devices
  18. 18. - Performance- Resolutions and Screen Sizes- Browser Features- Network Connection Speeds Differences in Mobile
  19. 19. What?
  20. 20. @media (min-width: 600px) and (max-width: 700px) {    body{ background-color:red;}}@media (max-width:500px){    body{background-color:blue;}   } Quick Code
  21. 21. How?
  22. 22. 3 Main Options
  23. 23. apple.com apple.com Desktop iPhone 1. Do Nothing
  24. 24. yelp.com m.yelp.com yelp appsDesktop iPhone Web Native Apps2. Separate Website
  25. 25. starbucks.com starbucks.com starbucks.com Desktop iPhone iPad3. Responsive Website
  26. 26. Responsive Design’s main components1. Flexible Layout2. Media Queries3. Flexible Images Building Blocks
  27. 27. - Simplify- Only provide the features your users want Content First
  28. 28. - Design for Mobile First- Optimize for Speed and Performance- Add Functionality for Larger Resolutions- Load Time Affects Customer Retention Luke Wroblewski 2011 “Mobile First”
  29. 29. - Micro-Tasks- Downplay Navigation & Options- Align with user Context and Behavior- Don’t Assume user’s location, speed, mindset, and expectation Mobilize your Website
  30. 30. - 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
  31. 31. - 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”
  32. 32. - 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
  33. 33. - 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
  34. 34. Sample Project
  35. 35. - Mostly Fluid- Column Drop- Layout Shifter- Tiny Tweaks- Off Canvas Luke Wroblewski & Jason Weaver Responsive Patterns
  36. 36. - Mondrain- Basic Gallery- Featured Items- Column Flip- Feature Shuffle Joshua Johnson Responsive Patterns
  37. 37. - Write LESS: Do more!- CSS Pre-compiler- Variables- Functions (aka Mixins)- Operations LESS can Help
  38. 38. Code: Flexible Layout
  39. 39. Target _________ = Result Context 24____ = 1.5em 900 ____ = 93.75% 16 960 Fluid Design Formula
  40. 40. Media Queries
  41. 41. Mobile Site styles+ @media queries added______________________= Full Desktop SiteMobile First Approach
  42. 42. 1600x1200 1680x1050 1280x1024 1440x900 1280x800 1366x7881024x768 800x600 480x320 320x480 240x320 Breakpoints
  43. 43. <link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css"> Recognized media types all braille embossed handheldprint projection screen speech tty tv Media Types - CSS2
  44. 44. <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
  45. 45. [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
  46. 46. <meta name="viewport"content="width=device-width, initial-scale=1.0, user-scalable=0" /> Recognized viewport valueswidth height initial-scale minimum-scale maximum-scale user-scalable Meta Viewport
  47. 47. 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
  48. 48. 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){ … }
  49. 49. - 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, ObigoProgressive Enhancement
  50. 50. Code: Media Queries
  51. 51. @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
  52. 52. Code: Responsive Images
  53. 53. <img id="demo" src="http://dummyimage.com/400x300" alt="Responsive Image" data-fullsrc="http://dummyimage.com/800x600"><script>responsiveEnhance(document.getElementById(demo), 400);</script> JavaScript Image Swapping
  54. 54. http://src.sencha.io/320/http://victorianigro.files.wordpress.com/2012/01/football- field-31.jpg Adaptive Server Side
  55. 55. RESS
  56. 56. <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
  57. 57. #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
  58. 58. <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
  59. 59. Beyond the Basics
  60. 60. - @embeded vs. <external- cascade vs. min-max:isolated- default mobile vs. desktop- <!--[conditional vs. <javascript Zoe Mickley GillenwaterLoading your @media...
  61. 61. - Augment Media Queries with Feature Detection- Media Query - Main Layout and Graphics- Feature Detection - Improve Design and Functionality Feature Detection
  62. 62. - Screen Size != Browser/Device Capability- May not be using Native Device Browser- Connection & Hardware Speeds vary- Don’t rely on emulatorsMore than Screen Size
  63. 63. - Progressive Laoding- Concatenation File Loading
  64. 64. - Less Framework 4- Skeleton Framework- Foundation 3- Starbucks Style Guide- 320 and Up- Mobile BoilerplateResponsive Frameworks
  65. 65. - Top Navigation- Footer Anchor- Select Menu- Toggle- Off Canvas Nav- Footer Only- Hide Navigation Patterns
  66. 66. 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
  67. 67. 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
  68. 68. <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
  69. 69. SEO Implications
  70. 70. Testing and Tools
  71. 71. - 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
  72. 72. - Shaodw - Mac or Windows + Chrome + iOS/Android- weinre - sudo npm -g install weinre - weinre --boundHost localhost --verboseAdobe Shadow / Weinre
  73. 73. Performance Tests
  74. 74. - 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
  75. 75. Books
  76. 76. Thank You
  77. 77. References
  78. 78. Joe Seifi Responsive Images Responsive Frameworkshttp://seifi.org http://www.sencha.io/ http://lessframework.com http://adaptive-images.com/ http://foundation.zurb.comOriginal Article - Ethan http://5by5.tv/webahead/25 http://www.getskeleton.comhttp://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/mobileMobile 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.ukhttp://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/ Statshttp://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.jpghttp://www.w3.org/ http://fitvidsjs.com http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/bhttp://mediaqueri.es http://www.browserscope.org/ RESSStyle Tiles http://www.lukew.com/ff/entry.asp?1392 Toolshttp://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.comDao of Web Design & Revisited http://www.dmolsen.com/mobile-in-higher-ed/2012/02/21/ress-and-the- http://jsfiddle.nethttp://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%3Adao-of-web-design-revisited/ +MobileInHigherEd+%28Mobile+in+Higher+Ed%29 LESS http://www.lukew.com/ff/entry.asp?1392 http://winless.orgArguments Against Responsive Design https://github.com/tobie/ua-parser http://lesscss.orghttp://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.orgone/ http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://bradfrostweb.com/blog/web/complex-navigation-patterns-for- TutorialsiOS 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-1Device 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 Tableshttp://zomigi.com/blog/essential-considerations-for-crafting-quality-media- patterns/ http://www.quirksmode.org/m/table.htmlqueries/ http://www.thismanslife.co.uk/projects/lab/responsivewireframes/https://github.com/scottjehl/Respond Responsive Emailshttp://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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×