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.
Responsive design: techniques and tricks to prepare your websites for the multi-screen futurePresentation 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
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
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.
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
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/
José Stiller
1–1 of 1 previous next