Responsive Design

Responsive 2012 WordCamp Kansas City Justin Kopepasah

ResponsiveAn approach to web design that coordinatesdesign and development around a user’sbehavior and environment based on screensize, platform and orientation.Responding to your user’s needs.

ResponsiveFlexible Grids (Smith)

ResponsiveFlexible Images & Media

ResponsiveFlexible Images & Media (Tabone, 2012)

ResponsiveMedia Queries“A media query consists of a media type and zero or more expressionsthat check for the conditions of particular media features. Among themedia features that can be used in media queries are ‘width’, ‘height’,and ‘color’. By using media queries, presentations can be tailored to aspeciﬁc range of output devices without changing the content itself.”(W3C, 2012) Can be used with CSS or stylesheets within the head. Are more commonly used as CSS.

Why do we needresponsive design?

Mobile Usage Grows Desktop Mobile 100% 75% 50% 25% 0%April, ‘11 (5.21%) July, ‘11 October, ‘11 (6.55%) January, ‘12 April, ‘12 (9.58%) (StatCounter, 2012)

Mobile Usage Grows Usage20%15% 16.1%10% 8.5%5% 4.3% 1.6%0%0.7% 2009 2010 2011 2012 2013 (StatCounter, 2012)

Current Usage Loads of these visitors are trying to view the schedule.(StatCounter, 2012)

Current Usage Worldwide Mobile 10.14% Desktop 89.86% Loads of these visitors are trying to view the schedule.(StatCounter, 2012)

Current Usage Worldwide Dance Studio Mobile 10.14% Mobile 22.09% Desktop Desktop 77.91% 89.86% Loads of these visitors are trying to view the schedule.(StatCounter, 2012)

Current Usage Worldwide Dance Studio Personal Mobile Mobile 10.14% Mobile 7.59% 22.09% Desktop Desktop 77.91% Desktop 89.86% 92.41% Loads of these visitors are trying to view the schedule.(StatCounter, 2012)

But Justin, 10% issuch a low numberto worry about.

You’re right.Why worry. (Britt, 2005)

You’re right.Why worry. 00.09% - Fire (Britt, 2005)

You’re right.Why worry. 00.09% - Fire 00.005% - Airplane (Britt, 2005)

You’re right.Why worry. 00.09% - Fire 00.0017% - Tornado 00.005% - Airplane (Britt, 2005)

You’re right.Why worry. 00.09% - Fire 00.0017% - Tornado 0.0012% - Lightning Strike 00.005% - Airplane (Britt, 2005)

You’re right.Why worry. 00.09% - Fire 00.0017% - Tornado 0.0012% - Lightning Strike 00.001% - Bee Sting 00.005% - Airplane (Britt, 2005)

Visitors Don’t Come Back(Equation Research, 2011)

Visitors Don’t Come Back 22% 78%(Equation Research, 2011)

10% Loss in Visitors

10% Loss in$$$$$$$$$$ $

10% Loss in$ $$$$$$$$ $

... and so on. Yes. I just used ﬁre in my Keynote.

Obviously we needa mobile friendly

SeparateMobileWebsite (Bloomberg Business Week, 2012)“Good mobile user experience requires adifferent design than whats needed tosatisfy desktop users. Two designs, twosites, and cross-linking to make it allwork.” (Nielsen, 2012)

Creates MoreProblems...

Creates MoreProblems...-Who decides what contentstays?

Creates MoreProblems...-Who decides what content stays?-Links are difficult to manage.

Creates MoreProblems...-Who decides what content stays?-Links do we considered ‘mobile’ are difficult to manage.-What devices?

Creates MoreProblems...-Who decides what content stays?-Links do we considered ‘mobile’ are difficult to manage.-What devices?-More code/content to manage.

Creates MoreProblems...-Who decides what content stays?-Links do we considered ‘mobile’ are difficult to manage.-What devices?-Too many user agents to test.-More code/content to manage.

Too manyproblems...

ResponsiveDesign.

ResponsiveDesign.A design that responds to the needs of theusers.

ResponsiveDesign.A design that responds to the needs of theusers.-Flexible Grid-Flexible Images & Media-Media Queries

Flexible FluidGrids...

960px 120px

960px20px 120px

For a fixed width design thesepixels would work perfectly.However, we need to usepercentages.

960px For a fixed width design these pixels would work perfectly. However, we need to use percentages.

960px540px For a fixed width design these pixels would work perfectly. However, we need to use percentages.

960px 400px540px For a fixed width design these pixels would work perfectly. However, we need to use percentages.

960px 400px540px For a fixed width design these pixels would work perfectly. However, we need to use percentages. 470px

target = resultcontext (Marcotte, 2011)

700 =.960 7291666666 (Marcotte, 2011)

72.916666666666% (Marcotte, 2011)

960px 400px540px 470px

960/960 = 1 400/960 = .416666667540/960 = .5625 470/960 = .489583333

100% 41.666666666666%56.25% 48.958333333333%

20px20px

20/960 = .02083333320/960 = .020833333

2.0833333333333%2.0833333333333%

100% 41.666666666666%56.25% 2.0833333333333% 2.0833333333333% 48.958333333333%

Flexible Images & Other Media...

max-width: 100%; Compatible all the way back to IE7. Not going to cover IE6.

Morbi leo risus, porta ac consecteturac, vestibulum at eros. Duis mollis,est non commodo luctus, nisi eratporttitor ligula, eget lacinia odio semnec elit. Curabitur blandit tempusporttitor. Fusce dapibus, tellus accursus commodo, tortor mauriscondimentum nibh, ut fermentummassa justo sit amet risus. Vivamussagittis lacus vel augue laoreetrutrum faucibus dolor auctor.Cras mattis consectetur purus sit ametfermentum.Donec sed odio dui. Praesentcommodo cursus magna, vel scelerisquenisl consectetur et. Integer posuere erat aante venenatis dapibus posuere velitaliquet. Integer posuere erat a antevenenatis dapibus posuere velit aliquet.Maecenas sed diam eget risus variusblandit sit amet non magna. Maecenasfaucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.Aenean lacinia bibendum nulla sed consectetur.Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consecteturpurus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscingelit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociisnatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elitnon mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aeneaneu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Crasmattis consectetur purus sit amet fermentum. Sed posuere consectetur est atlobortis.

Morbi leo risus, porta ac consecteturac, vestibulum at eros. Duis mollis,est non commodo luctus, nisi eratporttitor ligula, eget lacinia odio semnec elit. Curabitur blandit tempusporttitor. Fusce dapibus, tellus accursus commodo, tortor mauriscondimentum nibh, ut fermentummassa justo sit amet risus. Vivamussagittis lacus vel augue laoreetrutrum faucibus dolor auctor.Cras mattis consectetur purus sit ametfermentum.Donec sed odio dui. Praesent commodo cursus magna, velscelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibusposuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuerevelit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna.Maecenasfaucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.Aenean lacinia bibendum nulla sed consectetur.Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consecteturpurus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscingelit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociisnatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elitnon mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Aeneaneu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Crasmattis consectetur purus sit amet fermentum. Sed posuere consectetur est atlobortis.

Let browsers resizeimages accordingly. Modern browsers have the ability to size and resize images. There is no need to declare an image width or height.

That little, easy to use insert button when editing content is the devil.Problem withWordPress...

That little, easy to use insert button when editing content is the devil. Problem with WordPress...<img src="http://example.com/wp-content/uploads/2012/05/hearts.jpg" alt="Hearts"title="Hearts" width="1280" height="720"class="alignnone size-full wp-image-3520" />

max-width: 100%;works with othermedia, too! img embed object video

Media Queries...Those fun lines of codethat give you control overthe layout of your content.

Media Queries...Introduced in CSS 2.1.Used only for ‘screen’ or‘print’ queries.<link rel="stylesheet" type="text/css" href="screen.css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />

Media Queries...Revamped in CSS3.<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="style.css" /> The query contains two components: 1. a media type (screen), and 2. the actual query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (480px).

Media Queries...Most commonly used inthe stylesheet.@media screen and (max-device-width:480px) { /* css code goes here */} Some people used them everywhere, but I keep mine at the end.

Media Queries...Most commonly used inthe stylesheet.@media screen and (max-device-width:780px) and (min-device-width: 480px) { /* css code goes here */} Some people used them everywhere, but I keep mine at the end.

RecapMobile usage is on the rise.Separate mobile websites are a bust.Responsive design is the future.

QuizWhat is the formula used tocalculate the exact neededmeasurement for creating flexiblefluid grids?

target = resultcontext (Marcotte, 2011)

Q & A...

Acknowledgements.Credits.Cites. Et Cetera. EtCetera. Week. http://images.businessweek.com/ss/ - Jakob Neilsen. Retrieved 05Bloomberg Business2012, from BusinessWeek: (2012). Worlds Most Inﬂuentual Designers10/02/0201_worlds_most_inﬂuential_designers/21.htmBritt, R. R. (2005, 01 06). The Odds of Dying. Retrieved 05 2012, from LiveScience: http://www.livescience.com/3780-odds-dying.htmlEquation Research. (2011). What users want from mobile. Compuware.Marcotte, E. (2011). Responsive Web Design. (M. Brown, Ed.) New York, NY: Jeffery Zeldman.Nielsen, J. (2012, 04 10). Mobile Site vs. Full Site. Retrieved 05 20, 2012, from Jakob NielsonsAlertbox: http://www.useit.com/alertbox/mobile-vs-full-sites.htmlSmith, N. (n.d.). 960 Grid System. Retrieved 05 2012, from 960 Grid System: http://960.gs/StatCounter. (2012, 02). Mobile internet usage is doubling year on year . Retrieved 05 2012, fromStatCounter Global Stats: http://gs.statcounter.com/press/mobile-internet-usage-is-doubling-year-on-yearStatCounter. (2012, 04). Mobile vs. Desktop. Retrieved 05 2012, from StatCounter Global Stats:http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201104-201204Tabone, C. (2012). 365 PSD. Retrieved 05 2012, from New Youtube Interface: http://365psd.com/day/2-182/W3C. (2012, 04 26). Media Queries. Retrieved 05 20, 2012, from W3C: http://www.w3.org/TR/css3-mediaqueries/

Random Notes•Do not presume you know what your users want when visiting your mobile site.•Do not presume you know your users broadband speeds.•Test. Test. Test. Purchase devices and also use some online testing sites.•The only thing we know about mobile users is that they are on a smaller screen. We cannot presume to know what user intent is from that.•Never strip out content from a device simply because it is mobile. If you are telling yourself “This can be stripped out for mobile users.”, then you should assess if you needed it in the ﬁrst place.•Slow load time is a hugh problem.

Read These...Responsive Web Design - EthanMarcotte19 Articles, Info-Graphics & ResearchPublicationshttp://goo.gl/dXA3s

Responsive Design

by Kopepasah on Jun 02, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Responsive Design Presentation Transcript