Responsive Websites

Responsive Websites Joe Seifi, Sept 2012

Survey

- http://www.bostonglobe.comhttp://worldwildlife.org/- http://nd.edu/- http://www.w3.org/- More at http://mediaqueri.es Demos

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

- 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

- 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

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

@media (min-width: 600px) and (max-width: 700px) { body{ background-color:red;}}@media (max-width:500px){ body{background-color:blue;} } Quick Code

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 Affects Customer Retention Luke Wroblewski 2011 “Mobile First”

- Micro-Tasks- Downplay Navigation & Options- Align with user Context and Behavior- Don’t Assume user’s location, speed, mindset, and expectation Mobilize your Website

- 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

- 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”

- 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

- 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

Sample Project

- Mostly Fluid- Column Drop- Layout Shifter- Tiny Tweaks- Off Canvas Luke Wroblewski & Jason Weaver Responsive Patterns

- Mondrain- Basic Gallery- Featured Items- Column Flip- Feature Shuffle Joshua Johnson Responsive Patterns

- 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 Formula

Media Queries

Mobile Site styles+ @media queries added______________________= Full Desktop SiteMobile First Approach

1600x1200 1680x1050 1280x1024 1440x900 1280x800 1366x7881024x768 800x600 480x320 320x480 240x320 Breakpoints

[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

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

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){ … }

- 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

Code: Media Queries

@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

Code: Responsive Images

<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

http://src.sencha.io/320/http://victorianigro.files.wordpress.com/2012/01/football- field-31.jpg Adaptive Server Side

<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

#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

<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

Beyond the Basics

- @embeded vs. <external- cascade vs. min-max:isolated- default mobile vs. desktop- <!--[conditional vs. <javascript Zoe Mickley GillenwaterLoading your @media...

- Augment Media Queries with Feature Detection- Media Query - Main Layout and Graphics- Feature Detection - Improve Design and Functionality Feature Detection

- Screen Size != Browser/Device Capability- May not be using Native Device Browser- Connection & Hardware Speeds vary- Don’t rely on emulatorsMore than Screen Size

- Progressive Laoding- Concatenation File Loading

- Less Framework 4- Skeleton Framework- Foundation 3- Starbucks Style Guide- 320 and Up- Mobile BoilerplateResponsive Frameworks

- 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 { 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

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

SEO Implications

Testing and Tools

- 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

- Shaodw - Mac or Windows + Chrome + iOS/Android- weinre - sudo npm -g install weinre - weinre --boundHost localhost --verboseAdobe Shadow / Weinre

Performance Tests

- 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

Thank You

References

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/

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

Responsive Websites

by Joe Seifi on Sep 05, 2012

Accessibility

Categories

Upload Details

Usage Rights

22 Embeds 3,593

Statistics

Responsive Websites Presentation Transcript