Responsive Design

DESIGNING FOR DESKTOP WEB + MOBILEResponsiveDesignMINNEBAR 2011

Something is happening…

(we’re screwed.)

We need to movefrom prescribed design to responsive design.

g r o w t h o f MOBILE WEBH A S O U T P A C E D 8 X gro wth o f d eskto p web Source: Luke Wroblewski, Mobile First presentation, An Event Apart Minneapolis, 2010Source: ITU, Mark Lipacis, Morgan Stanley Research

15 in U S E mobile internet everyday Source: http://www.antennasoftware.com/new-research-shows-mobile-internet-usage-a-daily-habit

in the next 4 years MOBILE internet USAGE W I L L I N C R E A S E B Y A F A C T O R O F 26Source: http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.pdf

BUT…Responsive design is not mobile design!

It is design for _______.

It is flexible, device-independent design for the web.

Rethink.

> 1024 768 480

According to Ethan Marcotte, Responsive Web Design is: A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout.Source: Ethan Marcotte, A Dao of Flexibility presentation, An Event Apart Minneapolis, 2010

Flexible Grids

But those are fixed width.

FLEXIBLE GRIDS part oneFlex your font.

FLEXIBLE GRIDSFontsh2 p

FLEXIBLE GRIDSFonts body { font-size: 100%; line-height: 1.6; color: #333; }

FLEXIBLE GRIDSFonts body { font-size: 100%; /* ~ 16px */ line-height: 1.6; color: #333; }

FLEXIBLE GRIDSFontsh2 p

FLEXIBLE GRIDSFonts28px 14px

FLEXIBLE GRIDSFonts28px / 16px 14px / 16px

FLEXIBLE GRIDSFonts1.75 .875

FLEXIBLE GRIDSFonts h2 { font-size: 1.75em; /* 28px / 16px */ } p{ font-size: .875em; /* 14px / 16px */ }

FLEXIBLE GRIDS part twoFlex your layout.

FLEXIBLE GRIDSLayout•  Template Layout (CSS3)•  Floats (CSS2)

Do you remember your HTML5?

FLEXIBLE GRIDSHTML5 <header> <h1>…</h1> <nav> <ul> … </ul> </nav> </header> <section> … </section> <footer> … </footer>

FLEXIBLE GRIDSHTML5 <section> <h2>…</h2> <p>…</p> <figure> … </figure> <figure> … </figure> … </section>

FLEXIBLE GRIDSHTML5 <figure> <a href=“#”> <img /> <figcaption>…</figcaption> </a> </figure>

20px 300px 960px

FLEXIBLE GRIDSLayout section { width: 960px; }

FLEXIBLE GRIDSLayout section { max-width: 960px; }

FLEXIBLE GRIDSLayout figure { float: left; width: 300px; margin: 0 10px; }

FLEXIBLE GRIDSLayout 300px / 960px = 0.3125 10px / 960px = 0.010416667

FLEXIBLE GRIDSLayout 300px / 960px = 31.25% 10px / 960px = 1.0416667%

FLEXIBLE GRIDSLayout figure { float: left; width: 300px; margin: 0 10px; }

FLEXIBLE GRIDSLayout figure { float: left; width: 31.25%; /* 300px / 960px */ margin: 0 1.0416667%; }

Flexible Media

FLEXIBLE MEDIAFlexible Images img { max-width: 100% }

FLEXIBLE MEDIAFlexible Videos video, object { max-width: 100% }

ISSUE #1max-width in IE6

FLEXIBLE MEDIAmax-width in IE6 img, video, object { width: 100% }

ISSUE #2 windowsimage resizing

FLEXIBLE MEDIAWindows Image Rendering vs.

FLEXIBLE MEDIAWindows Image Rendering IE 7 and lower Firefox 2 and lower

FLEXIBLE MEDIAWindows Image Rendering IE Proprietary CSS Filter: AlphaImageLoader()

FLEXIBLE MEDIAWindows Image Rendering Ethan Marcotte did all the work for you….

FLEXIBLE MEDIAWindows Image Rendering …just include some JavaScript. Instructions here: http://unstoppablerobotninja.com/entry/fluid-images

ISSUE #3bandwidth

FLEXIBLE MEDIADownloaded vs. Displayed

FLEXIBLE MEDIADownloaded vs. Displayed highRes.png

FLEXIBLE MEDIADownloaded vs. Displayed highRes.png lowRes.png

FLEXIBLE MEDIADownloaded vs. Displayed Filament Group did all the work for you….

FLEXIBLE MEDIADownloaded vs. Displayed …just include some JavaScript. Download here: https://github.com/filamentgroup/responsive-images

FLEXIBLE MEDIADownloaded vs. Displayed <img src=“highRes.png” />

FLEXIBLE MEDIADownloaded vs. Displayed <img src=“lowRes.r.png” data-fullsrc=“highRes.png” /> HTML5 custom attribute

Media Queries

MEDIA QUERIESMedia Types <link rel=“stylesheet” media=“screen” href=“screen.css” />

MEDIA QUERIESMedia Types <link rel=“stylesheet” media=“print” href=“print.css” />

MEDIA QUERIESMedia Types <link rel=“stylesheet” media=“handheld” href=“handheld.css” />

MEDIA QUERIESMedia Queries <link rel=“stylesheet” media=“screen and (max-width: 320px)” href=“screen.css” /> @media screen and (max-width: 320px) { … }

MEDIA QUERIESMedia Queries <link rel=“stylesheet” media=“screen and (min-width: 800px)” href=“screen.css” /> @media screen and (min-width: 800px) { … }

MEDIA QUERIESMedia Featureswidth heightdevice-width device-heightorientation aspect-ratiodevice-aspect-ratio colorcolor-index monochromeresolution scangrid

We can adapt our designto specific range of devices

We can adapt our designto specific range of devices without changing the content

MEDIA QUERIESLaptop

MEDIA QUERIESiPad – Portrait @media screen and (device-max-width: 768px)

MEDIA QUERIESiPhone – Landscape @media screen and (max-device-width: 480px)

ISSUE #1 browsercompatibility

MEDIA QUERIESBrowser Compatibility " IE 9  IE 8, 7, 6 " Opera 9.5+ " Opera Mobile " Safari 3+  Safari 2 " Firefox 3.5+  Firefox 1, 2 " Chrome

MEDIA QUERIESBrowser Compatibility Wouter van der Graaf did all the work for you….

MEDIA QUERIESBrowser Compatibility …just include some JavaScript. Download here: http://code.google.com/p/css3-mediaqueries-js

MEDIA QUERIESBrowser Compatibility " IE 9  IE 8, 7, 6 " Opera 9.5+ " Opera Mobile " Safari 3+  Safari 2 " Firefox 3.5+  Firefox 1, 2 " Chrome

ISSUE #2mobile resizing

FLEXIBLE MEDIAMobile Resizing vs.

FLEXIBLE MEDIAMobile Resizing <meta name="viewport" content="width=device-width; initial-scale=1.0">

Create great experiences.

DESIGNING FOR DESKTOP WEB + MOBILEThanks.mike@livefront.com@mikebollinger

THE EXAMPLE USED IN THIS PRESENTATION:http://livefront.com/responsive-designA LIST APART ARTICLE (Ethan Marcotte):http://alistapart.com/articles/responsive-web-design/BOOK (Ethan Marcotte):http://abookapart.com/products/responsive-web-designMEDIA QUERIES TEMPLATE (Andy Clarke):https://gist.github.com/798569

http://www.splashnology.com	2203
http://www.creedinteractive.com	269
http://madebymany.com	249
http://pedagog.localdomain	213
http://www.un-a-un.com	198
http://www.vleerkatcreations.com	183
http://paper.li	166
http://fred.tl	152
http://jimmypad.com	124
http://joefrancisninal.info	102
http://designblog	92
http://www.conseilsmarketing.fr	85
http://webwatching.eustema.it	84
http://neuestijl.com	83
http://www.gatec.com.br	65
http://startthinking.posterous.com	62
http://www.carbongraffiti.com	56
http://glueinnovation.posterous.com	46
http://multbit.kinghost.net	40
http://localhost	38
http://www.conseilsmarketing.com	20
http://log.vikingkarwur.com	16
url_unknown	16
http://www.techgig.com	15
http://d.hatena.ne.jp	14
http://blog.websourcing.fr	12
http://voyelle.tumblr.com	12
http://twitter.com	11
http://share	8
http://www.slideshare.net	8
http://www.twylah.com	8
http://us-w1.rockmelt.com	8
http://nloc.tumblr.com	7
http://projects.techpolitica.com	7
http://www.onlydoo.com	7
http://www.paperblog.fr	6
http://a0.twimg.com	6
http://amberjack115.tumblr.com	5
http://share.24hourfit.com	5
https://twimg0-a.akamaihd.net	4
http://feeds.feedburner.com	4
http://bitly.com	4
http://zootool.com	3
http://translate.googleusercontent.com	3
http://areteproducts.com	2
http://www.stonepower.fr	2
http://thrivenetmarketing.com	2
http://creativeisg.tumblr.com	2
http://aiesecernest.wordpress.com	2
http://www.schoox.com	2
http://betastudent.collected.info	1

Responsive Design

by Livefront on May 07, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

62 Embeds 4,743

Statistics

Responsive Design — Presentation Transcript