Responsive Websites
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Websites

on

  • 33,591 views

Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6

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

Statistics

Views

Total Views
33,591
Views on SlideShare
29,285
Embed Views
4,306

Actions

Likes
25
Downloads
168
Comments
2

25 Embeds 4,306

http://www.seifi.org 3143
http://seifi.org 706
http://www.doyoubuzz.com 147
http://wp2.treesaver.dev 140
http://blog.websourcing.fr 61
http://feeds.feedburner.com 22
http://kehitys.mobie.fi 22
http://dev.seifi.org 19
http://localhost 7
https://twitter.com 5
http://test1.peoplebrowsr.com 5
http://e3alliance.wpengine.com 4
http://www.google.com 4
http://webcache.googleusercontent.com 3
http://abtasty.com 3
http://twitter.com 2
http://www.iphone-entreprise.com 2
http://live.soba-project.com 2
http://kred.com 2
http://www.netvibes.com 2
http://translate.googleusercontent.com 1
http://pinterest.com 1
http://prlog.ru 1
http://reader.googleusercontent.com 1
http://nodoindustriascreativas.cl 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Websites Presentation Transcript

  • 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
  • 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. apple.com apple.com Desktop iPhone 1. Do Nothing
  • 24. yelp.com m.yelp.com yelp appsDesktop iPhone Web Native Apps2. Separate Website
  • 25. starbucks.com starbucks.com starbucks.com 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="http://dummyimage.com/400x300" alt="Responsive Image" data-fullsrc="http://dummyimage.com/800x600"><script>responsiveEnhance(document.getElementById(demo), 400);</script> JavaScript Image Swapping
  • 54. http://src.sencha.io/320/http://victorianigro.files.wordpress.com/2012/01/football- 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:// www.developer.nokia.com- UC Browser http://www.ucweb.com/- BlackBerry https:// developer.blackberry.com- Android http:// developer.android.com/tools/help/ 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- ResponsivePX.com- mobilephoneemulator.com pxtoem.com- 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 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/