Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Responsive design: techniques andtricks to prepare your websites forthe multi-screen future                         Andrea...
Responsive design: techniques andtricks to prepare your websites forthe multi-screen future                         Andrea...
@andreasbovens
“Patterns forMultiscreenStrategies”                                  Coherence                      Syncronization        ...
Coherence                      Syncronization                   Screen sharing     Device shifting                 Complem...
“A digital product orservice looks andworks coherentlyacross devices.Features areoptimized forspecific devicecharacteristic...
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,                ...
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">             ...
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">                +          ...
HVGA portrait                <meta name="viewport"                content="width=device-width,                initial-scal...
other settingsmaximum-scale=... , minimum-scale=...<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">user...
other settingsmaximum-scale=... , minimum-scale=...<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">user...
other settingsmaximum-scale=... , minimum-scale=...<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">user...
other settingsmaximum-scale=... , minimum-scale=...<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">user...
Important!Make sure to use commas, not semi-colonsas delimiters between viewport values! <meta name="viewport" content="in...
caveatsAndroid Browser doesn’t support user-scalable=no.IE interprets width=device-width as 320px.Safari on iPad always in...
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.* alw...
* always ask yourself why the mobile site should be     different from the desktop sitecustomer requir                  em...
* always ask yourself why the mobile site should be     different from the desktop sitecustomer requir                  em...
* always ask yourself why the mobile site should be     different from the desktop sitecustomer requir                   e...
* always ask yourself why the mobile site should be     different from the desktop sitecustomer requir                   e...
Let’s talk about media queries
Media queries are conditionalhooks for applying differentCSS rules, depending on e.g.browser width or height,orientation, ...
Differently said, media queriesallow you to optimize your sitelayout for all kinds of form factors.                       ...
@media screen         and (min-width: 400px)         and (max-width: 800px) {   article {      /* css for browsers with wi...
@media screen         and (aspect-ratio: 16/9)         and (orientation: landscape) {   article {      /* css for browsers...
@media screen         and (max-width: 800px) {   article {      /* css for browsers with width ≤ 800px */      } }@media s...
@media screen and (max-width: 400px) {     article {        /* css for browsers with width ≤ 400px */        }   }Remember...
default viewport.      width=device-width.mobile specific media    mobile specific media queries not applied.      queries a...
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 a...
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 multipledevi...
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 co...
caveats-o-max/min-device-pixel-ratio uses fractionsinstead of numbers. So 3/2, not 1.5.Watch out for max/min--moz-device-p...
max/min-device-pixel-ratio might be dropped,and we get a resolution media query instead.@media screen and (min-device-pixe...
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...
You already can specify multiple video sources:  <video>  <source type="video/webm" src="small.webm"  media="all and (max-...
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-wi...
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">becomes@-o-/-ms-viewport {  width: d...
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                         Andrea...
Responsive design: techniques andtricks to prepare your websites forthe multi-screen future nt                   prese    ...
Thank you!                                              @andreasbovensDosis font: http:/                 /www.impallari.co...
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
Nächste SlideShare
Wird geladen in …5
×

http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ Responsive design: techniques and tricks to prepare your websites for the multi-screen future

148.970 Aufrufe

Veröffentlicht am

http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Veröffentlicht in: Technologie, Business
  • How long does it take for VigRX Plus to start working? ◆◆◆ http://t.cn/Ai88iYkP
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • STOP GETTING RIPPED OFF! LEARN THE SHOCKING TRUTH ABOUT ACNE, DRUGS, CREAMS AND THE ONLY PATH TO LASTING ACNE FREEDOM... To get the FACTS on exactly how to eliminate your Acne from the root 100% naturally and Permanently and achieve LASTING clear skin without spending your hard-earned money on drugs and over the counters... ★★★ http://scamcb.com/buk028959/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Women usually act out of emotion, not logic. Take advantage of this and get your Ex back today! See how to ♥♥♥ http://t.cn/R50e2MX
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

×