Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Websites


Published on

Introduction to Responsive Web Design
Includes a sample project built from scratch in Node.js using LESS available on Github

Published in: Technology, Design

Responsive Websites

  1. Responsive Websites Joe Seifi, Sept 2012
  2. Survey
  3. - More at Demos
  4. Why?
  5. Why?What?
  6. Why?What?How?
  7. Why? What? How?Sample Project
  8. Why? What? How?Sample ProjectBest Practices
  9. Why? What? How? Sample Project Best PracticesTesting and Tools
  10. Why?
  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. - 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. Here and Now
  14. Here and Now
  15. 2 years early - in 2010 Here and Now
  16. - Websites are not like print. Why do we design them that way? Traditional Print
  17. Lots of Web Devices
  18. - Performance- Resolutions and Screen Sizes- Browser Features- Network Connection Speeds Differences in Mobile
  19. What?
  20. @media (min-width: 600px) and (max-width: 700px) {    body{ background-color:red;}}@media (max-width:500px){    body{background-color:blue;}   } Quick Code
  21. How?
  22. 3 Main Options
  23. Desktop iPhone 1. Do Nothing
  24. yelp appsDesktop iPhone Web Native Apps2. Separate Website
  25. Desktop iPhone iPad3. Responsive Website
  26. Responsive Design’s main components1. Flexible Layout2. Media Queries3. Flexible Images Building Blocks
  27. - Simplify- Only provide the features your users want Content First
  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. - 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. - 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. - 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. - 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. - 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. Sample Project
  35. - Mostly Fluid- Column Drop- Layout Shifter- Tiny Tweaks- Off Canvas Luke Wroblewski & Jason Weaver Responsive Patterns
  36. - Mondrain- Basic Gallery- Featured Items- Column Flip- Feature Shuffle Joshua Johnson Responsive Patterns
  37. - Write LESS: Do more!- CSS Pre-compiler- Variables- Functions (aka Mixins)- Operations LESS can Help
  38. Code: Flexible Layout
  39. Target _________ = Result Context 24____ = 1.5em 900 ____ = 93.75% 16 960 Fluid Design Formula
  40. Media Queries
  41. Mobile Site styles+ @media queries added______________________= Full Desktop SiteMobile First Approach
  42. 1600x1200 1680x1050 1280x1024 1440x900 1280x800 1366x7881024x768 800x600 480x320 320x480 240x320 Breakpoints
  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. <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. [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. <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. 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. 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. - 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. Code: Media Queries
  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. Code: Responsive Images
  53. <img id="demo" src="" alt="Responsive Image" data-fullsrc=""><script>responsiveEnhance(document.getElementById(demo), 400);</script> JavaScript Image Swapping
  54. field-31.jpg Adaptive Server Side
  55. RESS
  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. #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. <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. Beyond the Basics
  60. - @embeded vs. <external- cascade vs. min-max:isolated- default mobile vs. desktop- <!--[conditional vs. <javascript Zoe Mickley GillenwaterLoading your @media...
  61. - Augment Media Queries with Feature Detection- Media Query - Main Layout and Graphics- Feature Detection - Improve Design and Functionality Feature Detection
  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. - Progressive Laoding- Concatenation File Loading
  64. - Less Framework 4- Skeleton Framework- Foundation 3- Starbucks Style Guide- 320 and Up- Mobile BoilerplateResponsive Frameworks
  65. - Top Navigation- Footer Anchor- Select Menu- Toggle- Off Canvas Nav- Footer Only- Hide Navigation Patterns
  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. 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. <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. SEO Implications
  70. Testing and Tools
  71. - Xcode > Open Developer Tool > iOS Simulator- Opera Mini & UC Browser In the iTunes App Store- Nokia http:// UC Browser BlackBerry https:// Android http:// Emulators
  72. - Shaodw - Mac or Windows + Chrome + iOS/Android- weinre - sudo npm -g install weinre - weinre --boundHost localhost --verboseAdobe Shadow / Weinre
  73. Performance Tests
  74. - Chrome - Web developer toolbar- Safari - User Agent switching- Aptus on Mac- Hardware IO Tools for Xcode or the Slowy app Testing Tools
  75. Books
  76. Thank You
  77. References
  78. Joe Seifi Responsive Images Responsive Frameworks http://foundation.zurb.comOriginal Article - Ethan http://www.getskeleton.com First - Luke designs/ worked-and-what-we-need/ Friendly support-retina-images/W3C Specs Stats personal-computer-market-share/4/ Sites key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0 smartphones-pass-pc-sales-for-the-first-time-in-history/ FNL3-72dpi.jpg RESSStyle Tiles Tools get Started - Move Your Feet components-10084972 serverside-components http://slowyapp.comDao of Web Design & Revisited http://jsfiddle.net evolution-of-responsive-web-design/? utm_source=feedburner&utm_medium=twitter&utm_campaign=Feed%3Adao-of-web-design-revisited/ +MobileInHigherEd+%28Mobile+in+Higher+Ed%29 LESS http://winless.orgArguments Against Responsive Design http://lesscss.org Navigation Patterns http://winless.orgone/ TutorialsiOS Human Interface Guidelines responsive-design/ techniques-tools-and-design-strategies/Conceptual/MobileHIG/MobileHIG.pdf solution/ designing-responsively-part-1Device testing lab at BBC Layout Patterns designing-responsively-part-1 Queries Mobile Compatibility Tables patterns/ Responsive Emails Performance MobileDataCapacityCrunch.pdf Responsive Ads performance-myths/