Responsive Websites
29 likes19,447 views
The document discusses the importance and techniques of responsive web design, emphasizing that websites must adapt to various mobile devices due to the increasing number of mobile internet users. It highlights best practices such as mobile-first design, flexible layouts, media queries, and the need for optimized loading times to enhance user experience. Resources for testing, coding patterns, and future-friendly approaches are also provided to help designers create effective responsive websites.
![[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](https://image.slidesharecdn.com/responsivewebsites-120905145742-phpapp02/85/Responsive-Websites-53-320.jpg)
![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](https://image.slidesharecdn.com/responsivewebsites-120905145742-phpapp02/85/Responsive-Websites-55-320.jpg)
![<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](https://image.slidesharecdn.com/responsivewebsites-120905145742-phpapp02/85/Responsive-Websites-76-320.jpg)
Responsive Websites
- 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?
- 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
- 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
- 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
- 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
- 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
- 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
- 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/