• Partagez
  • E-mail
  • Intégrer
  • J'aime
  • Télécharger
  • Contenu privé
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
 

Responsive design: techniques and tricks to prepare your websites for the multi-screen future

on

  • 111,261 vues

Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and ...

Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques.

I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.

Statistiques

Vues

Total des vues
111,261
Vues sur SlideShare
25,288
Vues externes
85,973

Actions

J'aime
128
Téléchargements
988
Commentaires
1

146 Ajouts 85,973

http://speckyboy.com 79655
http://codevisually.com 1333
http://businesswebworld.blogspot.com 689
http://www.scoop.it 577
http://www.twylah.com 506
http://gerris.it 411
http://www.iphone-entreprise.com 293
http://nordev.ru 245
http://businesswebworld.blogspot.in 186
http://www.goke.me 103
http://businesswebworld.blogspot.de 100
http://businesswebworld.blogspot.co.uk 81
http://feeds.feedburner.com 79
http://webdesigsrilankan.blogspot.com 76
http://vine.wholefoods.com 71
http://businesswebworld.blogspot.ca 65
http://businesswebworld.blogspot.it 64
http://businesswebworld.blogspot.fr 64
http://www.webcatal.com 61
http://translate.googleusercontent.com 59
http://businesswebworld.blogspot.com.br 54
http://internetwebsitedesign.biz 51
http://lanyrd.com 46
http://businesswebworld.blogspot.com.es 44
http://businesswebworld.blogspot.nl 44
http://businesswebworld.blogspot.com.au 40
https://ybanking.jira.com 37
http://browserfame.tumblr.com 33
http://helpstring.wordpress.com 32
http://webdesigner.collected.info 28
http://usabilityandwebdes.collected.info 28
http://businesswebworld.blogspot.ru 27
http://businesswebworld.blogspot.kr 27
http://webdesignerblogs.collected.info 26
http://businesswebworld.blogspot.no 22
http://www.cs.ubbcluj.ro 22
http://businesswebworld.blogspot.mx 21
https://si0.twimg.com 20
http://businesswebworld.blogspot.pt 20
https://twitter.com 19
http://businesswebworld.blogspot.ch 19
http://minitoy.tistory.com 19
http://socialink.tumblr.com 18
http://blog.gaborit-d.com 18
http://localhost 18
http://businesswebworld.blogspot.se 17
http://webdesigsrilankan.blogspot.in 17
http://businesswebworld.blogspot.hk 17
http://blog.pheromonic.com 15
http://sprk.collected.info 15
Plus...

Accessibilité

Catégories

Détails de l'import

Uploaded via as Adobe PDF

Droits d'utilisation

CC Attribution License

Report content

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler

11 sur 1 précédent suivant

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Responsive design: techniques and tricks to prepare your websites for the multi-screen future Responsive design: techniques and tricks to prepare your websites for the multi-screen future Presentation Transcript

  • Responsive design: techniques andtricks to prepare your websites forthe multi-screen future Andreas Bovens - Opera Softwarehttp://www.flickr.com/photos/redux/7145995789/
  • Responsive design: techniques andtricks to prepare your websites forthe multi-screen future Andreas Bovens - Opera Softwarehttp://www.flickr.com/photos/redux/7145995789/
  • @andreasbovens
  • “Patterns forMultiscreenStrategies” Coherence Syncronization Screen sharingBy Precioushttp:/ /slidesha.re/kiip5y Device shifting Complementarity Simultaneity These patterns should help understand and define strategies for the multiscreen world.
  • Coherence Syncronization Screen sharing Device shifting Complementarity SimultaneityThese patterns should help understand and define strategies for the multiscreen world. http:/ /slidesha.re/kiip5y
  • “A digital product orservice looks andworks coherentlyacross devices.Features areoptimized forspecific devicecharacteristics andusage scenarios.” Coherence http:/ /slidesha.re/kiip5y
  • Coherence http://slidesha.re/kiip5y
  • ?
  • small screen rendering aka single column view
  • zoom and pan
  • “Nice, but how can we controlthis zooming behavior?”
  • Let’s talk about theviewport mechanism
  • This is the viewport.
  • <meta ...> Using a "viewport" meta tag in the <head> of the page...
  • ...we can control pagewidth & height, zoomlevel, etc.
  • This works in:with some exceptions ;-)
  • http:/ /www.opera.com/developer/tools/mobile/
  • HVGA portrait
  • HVGA portrait
  • HVGA portrait
  • HVGA portrait
  • HVGA portrait
  • HVGA portrait
  • HVGA portrait
  • HVGA portrait
  • HVGA portrait
  • HVGA portrait
  • HVGA portrait no viewport defined in <head>, so fallback to default of 980px, which is squeezed inside 320px.
  • HVGA portrait <meta name="viewport" content="width=320">
  • HVGA portrait <meta name="viewport" content="width=320">
  • HVGA portrait HVGA landscape <meta name="viewport" content="width=320">
  • HVGA portrait <meta name="viewport" content="width=device-width">
  • HVGA portrait <meta name="viewport" content="width=device-width">
  • HVGA portrait HVGA landscape <meta name="viewport" content="width=device-width">
  • HVGA landscape HVGA landscape 480px 320px × 1.5 zoom
  • HVGA portrait <meta name="viewport" content="initial-scale=1">
  • HVGA portrait <meta name="viewport" content="initial-scale=1">
  • HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=1">
  • HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=1"> (same result as width=device-width)
  • HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=0.5">
  • HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=2">
  • <meta name="viewport"content="width=device-width">+<div style="width: 600px">
  • HVGA portrait <meta name="viewport" content="width=device-width"> + <div style="width: 600px">
  • HVGA portrait <meta name="viewport" content="width=device-width, initial-scale=1"> + <div style="width: 600px">
  • other settingsmaximum-scale=... , minimum-scale=...<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">user-scalable=yes|no<meta name="viewport" content="width=320, user-scalable=no">height=...<meta name="viewport" content="height=device-height">
  • other settingsmaximum-scale=... , minimum-scale=...<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">user-scalable=yes|no<meta name="viewport" content="width=320, user-scalable=no">height=...<meta name="viewport" content="height=device-height">
  • other settingsmaximum-scale=... , minimum-scale=...<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">user-scalable=yes|no<meta name="viewport" content="width=320, user-scalable=no">height=...<meta name="viewport" content="height=device-height">
  • other settingsmaximum-scale=... , minimum-scale=...<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">user-scalable=yes|no<meta name="viewport" content="width=320, user-scalable=no">height=...<meta name="viewport" content="height=device-height">
  • Important!Make sure to use commas, not semi-colonsas delimiters between viewport values! <meta name="viewport" content="initial-scale=1; user-scalable=no"> <meta name="viewport" content="initial-scale=1, user-scalable=no">
  • caveatsAndroid Browser doesn’t support user-scalable=no.IE interprets width=device-width as 320px.Safari on iPad always interprets width=device-widthas 768px, although it’s 1024px wide in landscapemode. This can be overridden with initial-scale=1,which... triggers a zooming bug* on orientationchange. * Patch: https:/ /github.com/scottjehl/iOS-Orientationchange-Fix
  • http://www.flickr.com/photos/33284937@N04/4771132618/
  • So, how to use this?Sniff for mobilebrowsers maybe?
  • So, how to use this?Sniff for mobilebrowsers maybe?Better don’t sniff.
  • Opera/9.80 (Macintosh; Intel Mac OS X 10.5.8; U; en) Presto/2.9.220 Version/12.00
  • So, avoid sniffing,but if you really have to,provide a way for usersto make corrections,and remember theirpreference.
  • So, avoid sniffing,but if you really have to*,provide a way for usersto make corrections,and remember theirpreference.* always ask yourself why the mobile site should bedifferent from the desktop site
  • * always ask yourself why the mobile site should be different from the desktop sitecustomer requir ements tim e restrictions budget limitationscapabilities are different different layout needed
  • * always ask yourself why the mobile site should be different from the desktop sitecustomer requir ements tim e restrictions budget limitationscapabilities are different different layout needed
  • * always ask yourself why the mobile site should be different from the desktop sitecustomer requir ements tim e restrictions budget limitationscapabilities are different different layout needed capability detection
  • * always ask yourself why the mobile site should be different from the desktop sitecustomer requir ements tim e restrictions budget limitationscapabilities are different different layout needed capability detection viewport + media queries
  • Let’s talk about media queries
  • Media queries are conditionalhooks for applying differentCSS rules, depending on e.g.browser width or height,orientation, aspect ratio, etc.
  • Differently said, media queriesallow you to optimize your sitelayout for all kinds of form factors. Via http://mediaqueri.es/
  • @media screen and (min-width: 400px) and (max-width: 800px) { article { /* css for browsers with width ≥ 400px and ≤ 800px */ } }
  • @media screen and (aspect-ratio: 16/9) and (orientation: landscape) { article { /* css for browsers with an aspect ratio of 16/9 and orientation is landscape */ } }
  • @media screen and (max-width: 800px) { article { /* css for browsers with width ≤ 800px */ } }@media screen and (max-width: 400px) { article { /* css for browsers with width ≤ 400px */ } }
  • @media screen and (max-width: 400px) { article { /* css for browsers with width ≤ 400px */ } }Remember that mobile browsers havea default viewport width (e.g. 980px).For your mobile specific media queriesto work, you need to set the viewport!
  • default viewport. width=device-width.mobile specific media mobile specific media queries not applied. queries applied.
  • The viewport and media queriescombo allows you to createjust one responsive sitethat works everywhere.
  • Q: What do I start with, desktop or mobile?A: Do mobile first, and build up your desktopstyles from there.
  • Q: Which devices, screen sizes should I design for?A: All of them! Use content breakpoints, instead ofdevice breakpoints and you’ll get a long way.
  • http:/ /www.flickr.com/photos/33284937@N04/5445675024/
  • Dealing withhigh-PPI “Retina” screens
  • A pixel is not what it seems.Thus far, we’ve talked aboutpixels in terms of “CSS pixels”.One CSS pixel can be multipledevice pixels.
  • HVGA portraitalmost WVGA portrait
  • HVGA portraitalmost WVGA portrait
  • almost WVGA portraitBrowser pretendsthat 480px is 320px.
  • In most scenarios, you won’thave to worry about this.It just works.
  • However, if you want tocontrol PPI related stuff,these are the things you can do:
  • almost WVGA portrait(1)Set the metaviewport’starget-densitydpito device-dpi.
  • almost WVGA portrait(1)Everything isshown at 100%.One CSS pixel isequal to one devicepixel.
  • almost WVGA portrait(2)Use special device-pixel-ratio mediaquery to servePPI-specific CSS.
  • almost WVGA portraitI’ve set the1500×1500pxbackground-imageto repeat every1000px, making itcrispy again. Therest of the contentis still scaled 150%.
  • caveats-o-max/min-device-pixel-ratio uses fractionsinstead of numbers. So 3/2, not 1.5.Watch out for max/min--moz-device-pixel-ratio.
  • max/min-device-pixel-ratio might be dropped,and we get a resolution media query instead.@media screen and (min-device-pixel-ratio: 3/2) { body {background-size: 250px;}}would become:@media screen and (min-resolution: 1.5dppx) { body {background-size: 250px;}}
  • almost WVGA portrait(3)Use high-resimages to preservecrispiness.
  • http:/ /www.w3.org/community/respimg/
  • You will be able to specify multiple image sources: <picture> <source media="(orientation: landscape)" srcset="long.jpg 1x, long2.jpg 2x"> <source media="(orientation: portrait)" srcset="tall.jpg 1x, tall2.jpg 2x"> <img src="fallback.jpg" /> </picture>
  • You already can specify multiple video sources: <video> <source type="video/webm" src="small.webm" media="all and (max-width: 480px)"> <source type="video/webm" src="large.webm" media="all and (min-width: 481px)" > </video>
  • Sidenote about another responsive image technique:object-fit and object-position allow you to crop images
  • simple resize
  • resize withobject-fit andobject-positionadjustments
  • http:/ /dev.opera.com/articles/view/css3-object-fit-object-position/
  • http://www.flickr.com/photos/33284937@N04/5588693890/
  • Why do all this viewportstuff with <meta> tags?Isn’t this something for CSS?
  • http:/ /dev.w3.org/csswg/css-device-adapt/
  • <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">becomes@viewport { width: device-width; zoom: 1; user-zoom: fixed;}
  • <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">becomes@-o-/-ms-viewport { width: device-width; zoom: 1; user-zoom: fixed;}
  • http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
  • Responsive design: techniques andtricks to prepare your websites forthe multi-screen future Andreas Bovens - Opera Softwarehttp://www.flickr.com/photos/redux/7145995789/
  • Responsive design: techniques andtricks to prepare your websites forthe multi-screen future nt prese Andreas Bovens - Opera Softwarehttp://www.flickr.com/photos/redux/7145995789/
  • Thank you! @andreasbovensDosis font: http:/ /www.impallari.com/dosisGlyphicons: http:/ /glyphicons.com/glyphicons-licenses/Corkboard background: http:/ /psd.tutsplus.com/freebies/texture/corkboard-texture-pack/