Transcription
CSS3, Media Queries,Responsive Design&May 23, 2012STC SummitZoe Mickley Gillenwater @zomigi
What I doBooksWebStunning CSS3:A Project-based Guide tothe Latest in CSSAccessibilityspecialist at AT&Twww.stunningcss3.comVisual designerCSS developerand consultantFlexible Web Design:Creating Liquid and ElasticLayouts with CSSwww.flexiblewebbook.com2
My home's web-enabled devices32213
more mobile devices&more diversity within devicesEVERY DAY4
every day1.45 MILLION DEVICES&317,124 BABIESenter the worldSource: http://www.lukew.com/ff/entry.asp?15065
Growing screen resolutiondiversity on desktopMay 2009 widthsMay 2012 widths10241280144016808001152otherSource: 6801360other6
25%of U.S. smartphone users doMOST OR ALLof their web browsing on mobileSource: http://www.lukew.com/ff/entry.asp?14057
how can our sitesaccommodate all thisDIVERSITY?8
Introducing media queries Awesome new part of CSS3 Simple way to feed different CSS based oncharacteristics of user's device Used to build responsive/adaptive designs Not: for feeding styles based on browser just for feeding styles based on viewport size9
Media query syntax: internalbody {background: gray;}@media screen and (max-width:500px) {body {background: blue;}}English translation:Make the background gray. But up to a maximum width of 500pixels, make the background blue.10
Flip flop itbody {background: blue;}@media screen and (min-width:501px) {body {background: gray;}}English translation:Make the background blue. But at and past the minimum widthof 501 pixels, make the background gray.11
How it looks12
Media query syntax: externalExtend the existing media part of the linkelement or @import rule: link href "narrow.css" rel "stylesheet"media "only screen and (max-width:500px)" @import url(narrow.css) only screen and(max-width:500px);13
Recommendation: internal Main advantages: No extra HTTP request(s) Not out of sight and forgotten Learn full pros/cons: ing-qualitymedia-queries14
you now know media query syntaxYAY!15
but media queries don't actuallyDOanything16
it's the CSSINSIDEthat changes the appearance17
Width-dependent layout changes Responsive web design: Media queries fluid layouts fluid media See www.alistapart.com/articles/responsiveweb-design/ Adaptive layouts: Media queries fixed-width layouts See ia-queries18
Retrofitting responsiveness Typical to add on media queries for bothsmaller and wider styles CSS before media queries is default Can take different approach when startingfrom scratch Start with "mobile," layer on wider styles? Start with "desktop," layer on narrower styles? Start with something in between for majority?19
Starting with desktop stylesPros:Cons: No extra work tomake majority widthappear correctly onIE 6-8 Easiest way to retrofitexisting site Mobile devices mayhave to downloadunneeded desktopassets Need separate stylesheets or JavaScriptto make mobiledesign appear in IEMobile 7 and otherolder mobilebrowsers20
Starting with mobile stylesPros:Cons: Mobile devices won'tdownload unneededdesktop assets Older, non-mediaquery-supportingmobile browsers stillget the mobile styleswithout any extrawork Desktop devices mayhave to downloadunneeded mobileassets Need separate stylesheets or JavaScriptto make majoritydesktop designappear in IE 6-821
Ourstartingpoint22
Very wide: awkward23
Verynarrow:awkward24
Wide-screen media query/*all the other styles up here*/@media screen and (min-width: 1200px) {/*styles for larger screens in here*/}25
Add third column@media screen and (min-width: 1200px) {#nav-main {position: fixed;top: 136px;width: 13%;margin: 0;}#content-main {width: 58%;margin-left: 18%;}#content-secondary { width: 20%; }}26
Style nav as vertical menu@media screen and (min-width: 1200px) {.#nav-main li {float: none;margin: 0;}#nav-main a {-moz-border-radius: 0;-webkit-border-radius: 0;border-radius: 0;}}27
Wide-screen design28
Small-screen media query/*all the other styles up here*/@media screen and (max-width: 760px) {/*styles for smaller screens in here*/}29
Remove columns from text@media screen and (max-width: 760px) {h1 p {-moz-column-count: 1;-o-column-count: 1;-webkit-column-count: 1;column-count: 1;}}30
Stack feature boxes@media screen and (max-width: 760px) {.feature {float: none;width: auto;margin: 0 0 1.6em 0;padding: 0 0 0 140px;background-position: top left;}}31
Narrowscreendesign32
pause forCAVEATS&CLARIFICATIONS33
Some sites would be betterserved with a separate site formobile devices instead of usingmedia queries.34
Even if a separate mobile sitewould be best, using mediaqueries is a good first step if aseparate site isn't currentlyfeasible.35
“The choice is not between using media queriesand creating a dedicated mobile site; the choiceis between using media queries and doingnothing at all.”―Jeremy Keithhttp://adactio.com/journal/1696/36
You can add media queries to adedicated mobile site in order tocater to the wide range ofmobile viewport sizes.37
If you do use media queries ona single site, they're not the onlytool you can use—you can addscripting as well to furthercustomize the content, markup,functionality, etc.38
Media queries are only meant tosolve the problem of mobile'ssmall viewports, not all the otherthings that can make mobilebrowsing different (such ascontext, bandwidth, etc.).39
“It's making sure your layout doesn't look crapon diff. sized screens.”―Mark 23748036821401640
back toCSS41
Mobile media query/*all the other styles up here*/@media screen and (max-width: 550px) {/*styles for tiny screens in here*/}42
Non-overlapping version@media screen and (min-width: 551px) and(max-width: 760px) {/*styles for small screens in here*/}@media screen and (max-width: 550px) {/*styles for tiny screens in here*/}43
Media features for el-ratio-o-min-device-pixel-ratio44
Useful media features for el-ratio-o-min-device-pixel-ratio45
Changing to single column@media screen and (max-width: 550px) {#content-main, #content-secondary,#about, #credits {float: none;width: 100%;}}46
Changing feature images@media screen and (max-width: 550px) {.feature { padding-left: 70px; }#feature-candy {background-image: url(icon candy 64.png);}#feature-pastry {background-image: url(icon pastry 64.png);}#feature-dessert {background-image: url(icon dessert 64.png);}}47
Mobiledesign48
Viewport meta tagForces mobile devices to scale viewport toactual device width meta name "viewport"content "width device-width" 49
Zoom problem in iOS Remember: device-width on iOS devicesalways matches portrait width This means design doesn't reflow when youswitch to landscape, but instead just zooms50
Fixing (and adding) zoom issues Option 1: add maximum-scale 1 But disables user scaling meta name "viewport"content "width device-width, maximum-scale 1" Option 2: add initial-scale 1 Allows user scaling But triggers over-zoom/crop bug whenchanging from portrait to landscape meta name "viewport"content "width device-width, initial-scale 1" 51
The best way to fix zoom issues Option 3: add initial-scale 1 plusscript to fix over-zoom bug See http://filamentgroup.com/lab/a fix forthe ios orientationchange zoom bug/ head . meta name "viewport"content "width device-width, initial-scale 1" script src "ios-orientationchange-fix.js" . /head 52
View it livehttp://stunningcss3.com/code/bakery/53
More responsive examples Design patterns: "Multi-Device Layout Patterns" by LukeWroblewski: www.lukew.com/ff/entry.asp?1514 "Responsive Navigation Patterns" by BradFrost: tterns/ Inspiration: Gallery: http://mediaqueri.es/ My own bookmarks: 54
Dealing with IE 8 and earlier Conditional comments JavaScript55
Conditional comments Split styles into separate sheets and feedapplicable sheet to IE based on whetherit's IE on desktop or mobile Approach varies based on which set ofstyles are your default56
Conditional comment whendesktop styles are defaultFeed IE Mobile 7 media query sheet: link rel "stylesheet" href "global.css" media "all" link rel "stylesheet" href "mobile.css" media "alland (max-width: 700px)" !--[if IEMobile 7] link rel "stylesheet" href "mobile.css" media "all" ![endif]-- Source: .aspx57
Conditional comment whenmobile styles are defaultFeed older IE media query sheet, hide fromIE Mobile 7: link rel "stylesheet" href "global.css" media "all" link rel "stylesheet" href "desktop.css" media "alland (min-width: 700px)" !--[if (lt IE 9)&(!IEMobile 7)] link rel "stylesheet" href "desktop.css" media "all" ![endif]-- Source: http://adactio.com/journal/4494/58
Pre-fab JavaScript for nonsupporting browsers Simply add one of these scripts: Respond: https://github.com/scottjehl/Respond -mediaqueries-js/ Avoid extra HTTP request for non-old-IEbrowsers using conditional comments: !--[if (lt IE 9)&(!IEMobile 7)] script src "respond.min.js" /script ![endif]-- 59
WHAT ELSEcan media queries do?60
Swapping images on ndandand(moz--min-device-pixel-ratio : 1.5),(-o-min-device-pixel-ratio : 3/2),(-webkit-min-device-pixel-ratio : 1.5),(min-device-pixel-ratio : 1.5) {}61
Swapping images on high-resdisplays@media . screen and (min-device-pixel-ratio : 1.5) {.feature {-moz-background-size: 64px 64px;-webkit-background-size: 64px 64px;background-size: 64px 64px;}#feature-candy {background-image: url(icon candy 128.png); }#feature-pastry {background-image: url(icon pastry 128.png); }#feature-dessert {background-image: url(icon dessert 128.png); }}62
Learn moreDownload slides and get links entationZoe Mickley Gillenwater@zomigidesign@zomigi.comzomigi.com stunningcss3.com flexiblewebbook.com63
Books Stunning CSS3: A Project-based Guide to the Latest in CSS . www.stunningcss3.com . Flexible Web Design: Creating Liquid and Elastic Layouts with CSS . www.flexiblewebbook.com . Web . Accessibility specialist at
