Your SlideShare is downloading. ×
0
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Responsive Websites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Websites

34,906

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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/

×