SlideShare une entreprise Scribd logo
1  sur  131
Télécharger pour lire hors ligne
Responsive design: techniques and
tricks to prepare your websites for
the multi-screen future                         Andreas Bovens - Opera Software
http://www.flickr.com/photos/redux/7145995789/
Responsive design: techniques and
tricks to prepare your websites for
the multi-screen future                         Andreas Bovens - Opera Software
http://www.flickr.com/photos/redux/7145995789/
@andreasbovens
“Patterns for
Multiscreen
Strategies”
                                  Coherence                      Syncronization                   Screen sharing


By Precious
http:/
     /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                     Simultaneity

These patterns should help understand and define strategies for the multiscreen world.

                                                                                  http:/
                                                                                       /slidesha.re/kiip5y
“A digital product or
service looks and
works coherently
across devices.
Features are
optimized for
specific device
characteristics and
usage scenarios.”
                        Coherence
                                    http:/
                                         /slidesha.re/kiip5y
Coherence
        http://slidesha.re/kiip5y
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
?
small screen rendering
         aka single column view
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
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
zoom and pan
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
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
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
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
“Nice, but how can we control
this zooming behavior?”
Let’s talk about the
viewport mechanism
This is the viewport.
<meta ...>
             Using a "viewport"
             meta tag in the
             <head> of the page...
...we can control page
width & height, zoom
level, etc.
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
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 settings
maximum-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 settings
maximum-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 settings
maximum-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 settings
maximum-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-colons
as delimiters between viewport values!
 <meta name="viewport" content="initial-scale=1; user-scalable=no">
 <meta name="viewport" content="initial-scale=1, user-scalable=no">
caveats
Android Browser doesn’t support user-scalable=no.
IE interprets width=device-width as 320px.
Safari on iPad always interprets width=device-width
as 768px, although it’s 1024px wide in landscape
mode. This can be overridden with initial-scale=1,
which... triggers a zooming bug* on orientation
change.
                * Patch: https:/
                               /github.com/scottjehl/iOS-Orientationchange-Fix
http://www.flickr.com/photos/33284937@N04/4771132618/
So, how to use this?
Sniff for mobile
browsers maybe?
So, how to use this?
Sniff for mobile
browsers maybe?
Better don’t sniff.
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
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
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
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Opera/9.80 (Macintosh; Intel Mac OS X 10.5.8; U; en) Presto/2.9.220 Version/12.00
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
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
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
So, avoid sniffing,
but if you really have to,
provide a way for users
to make corrections,
and remember their
preference.
So, avoid sniffing,
but if you really have to*,
provide a way for users
to make corrections,
and remember their
preference.
* always ask yourself why the mobile site should be
different from the desktop site
* always ask yourself why the mobile site should be
     different from the desktop site



customer requir
                  ements
                                         tim e restrictions

                  budget limitations

capabilities are different
                                 different layout needed
* always ask yourself why the mobile site should be
     different from the desktop site



customer requir
                  ements
                                         tim e restrictions

                  budget limitations

capabilities are different
                                 different layout needed
* always ask yourself why the mobile site should be
     different from the desktop site



customer requir
                   ements
                                         tim e restrictions

                   budget limitations

capabilities are different
                                 different layout needed
     capability detection
* always ask yourself why the mobile site should be
     different from the desktop site



customer requir
                   ements
                                         tim e restrictions

                   budget limitations

capabilities are different
                                 different layout needed
     capability detection
                                    viewport + media queries
Let’s talk about media queries
Media queries are conditional
hooks for applying different
CSS rules, depending on e.g.
browser width or height,
orientation, aspect ratio, etc.
Differently said, media queries
allow you to optimize your site
layout 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 have
a default viewport width (e.g. 980px).
For your mobile specific media queries
to work, you need to set the viewport!
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
default viewport.      width=device-width.
mobile specific media    mobile specific media
 queries not applied.      queries applied.
The viewport and media queries
combo allows you to create
just one responsive site
that works everywhere.
Q: What do I start with, desktop or mobile?

A: Do mobile first, and build up your desktop
styles from there.
Q: Which devices, screen sizes should I design for?

A: All of them! Use content breakpoints, instead of
device breakpoints and you’ll get a long way.
http:/
     /www.flickr.com/photos/33284937@N04/5445675024/
Dealing with
high-PPI “Retina” screens
A pixel is not what it seems.
Thus far, we’ve talked about
pixels in terms of “CSS pixels”.
One CSS pixel can be multiple
device pixels.
HVGA portrait




almost WVGA portrait
HVGA portrait




almost WVGA portrait
almost WVGA portrait
Browser pretends
that 480px is 320px.
In most scenarios, you won’t
have to worry about this.
It just works.
However, if you want to
control PPI related stuff,
these are the things you can do:
almost WVGA portrait
(1)
Set the meta
viewport’s
target-densitydpi
to device-dpi.
almost WVGA portrait
(1)
Everything is
shown at 100%.
One CSS pixel is
equal to one device
pixel.
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
almost WVGA portrait
(2)
Use special device-
pixel-ratio media
query to serve
PPI-specific CSS.
almost WVGA portrait
I’ve set the
1500×1500px
background-image
to repeat every
1000px, making it
crispy again. The
rest of the content
is still scaled 150%.
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
caveats

-o-max/min-device-pixel-ratio uses fractions
instead 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-res
images to preserve
crispiness.
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
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 with
object-fit and
object-position
adjustments
http:/
     /dev.opera.com/articles/view/css3-object-fit-object-position/
http://www.flickr.com/photos/33284937@N04/5588693890/
Why do all this viewport
stuff 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 and
tricks to prepare your websites for
the multi-screen future                         Andreas Bovens - Opera Software
http://www.flickr.com/photos/redux/7145995789/
Responsive design: techniques and
tricks to prepare your websites for
the multi-screen future nt
                   prese                        Andreas Bovens - Opera Software
http://www.flickr.com/photos/redux/7145995789/
Thank you!
                                              @andreasbovens


Dosis font: http:/
                 /www.impallari.com/dosis
Glyphicons: http:/
                 /glyphicons.com/glyphicons-licenses/
Corkboard background: http:/
                           /psd.tutsplus.com/freebies/texture/corkboard-texture-pack/

Contenu connexe

Tendances (20)

Introduction to python programming, Why Python?, Applications of Python
Introduction to python programming, Why Python?, Applications of PythonIntroduction to python programming, Why Python?, Applications of Python
Introduction to python programming, Why Python?, Applications of Python
 
Python ppt
Python pptPython ppt
Python ppt
 
Java abstract class & abstract methods
Java abstract class & abstract methodsJava abstract class & abstract methods
Java abstract class & abstract methods
 
Python
PythonPython
Python
 
Operator Overloading
Operator OverloadingOperator Overloading
Operator Overloading
 
Python
PythonPython
Python
 
Parsing in Compiler Design
Parsing in Compiler DesignParsing in Compiler Design
Parsing in Compiler Design
 
String handling(string class)
String handling(string class)String handling(string class)
String handling(string class)
 
Python Basics.pdf
Python Basics.pdfPython Basics.pdf
Python Basics.pdf
 
Python introduction
Python introductionPython introduction
Python introduction
 
Java Queue.pptx
Java Queue.pptxJava Queue.pptx
Java Queue.pptx
 
Types of Parser
Types of ParserTypes of Parser
Types of Parser
 
Set methods in python
Set methods in pythonSet methods in python
Set methods in python
 
Python
PythonPython
Python
 
Java
JavaJava
Java
 
Python - An Introduction
Python - An IntroductionPython - An Introduction
Python - An Introduction
 
Python programming : Classes objects
Python programming : Classes objectsPython programming : Classes objects
Python programming : Classes objects
 
Python-02| Input, Output & Import
Python-02| Input, Output & ImportPython-02| Input, Output & Import
Python-02| Input, Output & Import
 
Python Decision Making
Python Decision MakingPython Decision Making
Python Decision Making
 
NUMPY
NUMPY NUMPY
NUMPY
 

En vedette

Road Safety Project PowerPoint Presentation, Road safety ppt pps pdf photos i...
Road Safety Project PowerPoint Presentation, Road safety ppt pps pdf photos i...Road Safety Project PowerPoint Presentation, Road safety ppt pps pdf photos i...
Road Safety Project PowerPoint Presentation, Road safety ppt pps pdf photos i...Road Safety
 
SEISMIC_DESIGN
SEISMIC_DESIGNSEISMIC_DESIGN
SEISMIC_DESIGNMio Class
 
Deep Learning - Convolutional Neural Networks
Deep Learning - Convolutional Neural NetworksDeep Learning - Convolutional Neural Networks
Deep Learning - Convolutional Neural NetworksChristian Perone
 
Mathematics high school level quiz - Part I
Mathematics high school level quiz - Part IMathematics high school level quiz - Part I
Mathematics high school level quiz - Part IITfC-Edu-Team
 
Farming Unicorns: Building Startup & Investor Ecosystems
Farming Unicorns: Building Startup & Investor EcosystemsFarming Unicorns: Building Startup & Investor Ecosystems
Farming Unicorns: Building Startup & Investor EcosystemsDave McClure
 
70+ Inspirational Quotes from Cannes Lions 2012
70+ Inspirational Quotes from Cannes Lions 2012 70+ Inspirational Quotes from Cannes Lions 2012
70+ Inspirational Quotes from Cannes Lions 2012 Alemsah Ozturk
 
Pharmaceuticals Solutions dosage form
Pharmaceuticals Solutions dosage formPharmaceuticals Solutions dosage form
Pharmaceuticals Solutions dosage formUmair hanif
 
Prepared Speech Presentation
Prepared Speech PresentationPrepared Speech Presentation
Prepared Speech PresentationYi-Hung Peng
 
DepEd Order No. 47 s. 2014: CONSTITUTION AND BY - LAWS OF THE SUPREME PUPIL G...
DepEd Order No. 47 s. 2014: CONSTITUTION AND BY - LAWS OF THE SUPREME PUPIL G...DepEd Order No. 47 s. 2014: CONSTITUTION AND BY - LAWS OF THE SUPREME PUPIL G...
DepEd Order No. 47 s. 2014: CONSTITUTION AND BY - LAWS OF THE SUPREME PUPIL G...Jared Ram Juezan
 
Education at a Glance 2015 - Global Launch
Education at a Glance 2015 - Global LaunchEducation at a Glance 2015 - Global Launch
Education at a Glance 2015 - Global LaunchEduSkills OECD
 
Stanford E245 Lean LaunchPad winter 10 session 01 course overview rev 4
Stanford E245 Lean LaunchPad winter 10 session 01 course overview rev 4Stanford E245 Lean LaunchPad winter 10 session 01 course overview rev 4
Stanford E245 Lean LaunchPad winter 10 session 01 course overview rev 4Stanford University
 
What Do Real Women Look Like? 100 Stock Photos of Real Women
What Do Real Women Look Like? 100 Stock Photos of Real WomenWhat Do Real Women Look Like? 100 Stock Photos of Real Women
What Do Real Women Look Like? 100 Stock Photos of Real WomenTwenty20 Inc.
 
The Science of Website Redesign
The Science of Website RedesignThe Science of Website Redesign
The Science of Website RedesignHubSpot
 
Mac OS(Operating System)
Mac OS(Operating System)Mac OS(Operating System)
Mac OS(Operating System)Faizan Shaikh
 
4. heredity and evolution
4. heredity and evolution4. heredity and evolution
4. heredity and evolutionAbhay Goyal
 
Engaging Learners with Technology
Engaging Learners with TechnologyEngaging Learners with Technology
Engaging Learners with TechnologyDean Shareski
 
Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...
Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...
Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...Probir Bidhan
 
Basics of c++ Programming Language
Basics of c++ Programming LanguageBasics of c++ Programming Language
Basics of c++ Programming LanguageAhmad Idrees
 
Fintech and Transformation of the Financial Services Industry
Fintech and Transformation of the Financial Services IndustryFintech and Transformation of the Financial Services Industry
Fintech and Transformation of the Financial Services IndustryRobin Teigland
 

En vedette (20)

Road Safety Project PowerPoint Presentation, Road safety ppt pps pdf photos i...
Road Safety Project PowerPoint Presentation, Road safety ppt pps pdf photos i...Road Safety Project PowerPoint Presentation, Road safety ppt pps pdf photos i...
Road Safety Project PowerPoint Presentation, Road safety ppt pps pdf photos i...
 
SEISMIC_DESIGN
SEISMIC_DESIGNSEISMIC_DESIGN
SEISMIC_DESIGN
 
Deep Learning - Convolutional Neural Networks
Deep Learning - Convolutional Neural NetworksDeep Learning - Convolutional Neural Networks
Deep Learning - Convolutional Neural Networks
 
Mathematics high school level quiz - Part I
Mathematics high school level quiz - Part IMathematics high school level quiz - Part I
Mathematics high school level quiz - Part I
 
Farming Unicorns: Building Startup & Investor Ecosystems
Farming Unicorns: Building Startup & Investor EcosystemsFarming Unicorns: Building Startup & Investor Ecosystems
Farming Unicorns: Building Startup & Investor Ecosystems
 
70+ Inspirational Quotes from Cannes Lions 2012
70+ Inspirational Quotes from Cannes Lions 2012 70+ Inspirational Quotes from Cannes Lions 2012
70+ Inspirational Quotes from Cannes Lions 2012
 
Pharmaceuticals Solutions dosage form
Pharmaceuticals Solutions dosage formPharmaceuticals Solutions dosage form
Pharmaceuticals Solutions dosage form
 
Prepared Speech Presentation
Prepared Speech PresentationPrepared Speech Presentation
Prepared Speech Presentation
 
DepEd Order No. 47 s. 2014: CONSTITUTION AND BY - LAWS OF THE SUPREME PUPIL G...
DepEd Order No. 47 s. 2014: CONSTITUTION AND BY - LAWS OF THE SUPREME PUPIL G...DepEd Order No. 47 s. 2014: CONSTITUTION AND BY - LAWS OF THE SUPREME PUPIL G...
DepEd Order No. 47 s. 2014: CONSTITUTION AND BY - LAWS OF THE SUPREME PUPIL G...
 
Education at a Glance 2015 - Global Launch
Education at a Glance 2015 - Global LaunchEducation at a Glance 2015 - Global Launch
Education at a Glance 2015 - Global Launch
 
Stanford E245 Lean LaunchPad winter 10 session 01 course overview rev 4
Stanford E245 Lean LaunchPad winter 10 session 01 course overview rev 4Stanford E245 Lean LaunchPad winter 10 session 01 course overview rev 4
Stanford E245 Lean LaunchPad winter 10 session 01 course overview rev 4
 
What Do Real Women Look Like? 100 Stock Photos of Real Women
What Do Real Women Look Like? 100 Stock Photos of Real WomenWhat Do Real Women Look Like? 100 Stock Photos of Real Women
What Do Real Women Look Like? 100 Stock Photos of Real Women
 
The Science of Website Redesign
The Science of Website RedesignThe Science of Website Redesign
The Science of Website Redesign
 
5000 Sat Words With Definitions
5000 Sat Words With Definitions5000 Sat Words With Definitions
5000 Sat Words With Definitions
 
Mac OS(Operating System)
Mac OS(Operating System)Mac OS(Operating System)
Mac OS(Operating System)
 
4. heredity and evolution
4. heredity and evolution4. heredity and evolution
4. heredity and evolution
 
Engaging Learners with Technology
Engaging Learners with TechnologyEngaging Learners with Technology
Engaging Learners with Technology
 
Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...
Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...
Environmental Impact Assessment (EIA) report on Rampal 1320MW coal-based powe...
 
Basics of c++ Programming Language
Basics of c++ Programming LanguageBasics of c++ Programming Language
Basics of c++ Programming Language
 
Fintech and Transformation of the Financial Services Industry
Fintech and Transformation of the Financial Services IndustryFintech and Transformation of the Financial Services Industry
Fintech and Transformation of the Financial Services Industry
 

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

Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopbetabeers
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty grittyMario Noble
 
Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Andreas Bovens
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresAndreas Bovens
 
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsSEGIC
 
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Patrick Lauke
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Webmikeleeme
 
Responsive Web in Brief
Responsive Web in BriefResponsive Web in Brief
Responsive Web in BriefEPAM
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5Ron Reiter
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Christian Rokitta
 
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksResponsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksGautam Krishnan
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. ToolboxWojtek Zając
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Suzanne Dergacheva
 

Similaire à Responsive design: techniques and tricks to prepare your websites for the multi-screen future (20)

Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
 
Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
 
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
 
Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011Adaptive layouts - standards>next Manchester 23.03.2011
Adaptive layouts - standards>next Manchester 23.03.2011
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Responsive Web in Brief
Responsive Web in BriefResponsive Web in Brief
Responsive Web in Brief
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
 
Responsive design
Responsive designResponsive design
Responsive design
 
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksResponsive Web Design: Tips and Tricks
Responsive Web Design: Tips and Tricks
 
Lab#13 responsive web
Lab#13 responsive webLab#13 responsive web
Lab#13 responsive web
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
 

Plus de Andreas Bovens

Progressive Web Apps: Opera's perspective
Progressive Web Apps: Opera's perspectiveProgressive Web Apps: Opera's perspective
Progressive Web Apps: Opera's perspectiveAndreas Bovens
 
Fast & Furious: Speed in the Opera browser
Fast & Furious: Speed in the Opera browserFast & Furious: Speed in the Opera browser
Fast & Furious: Speed in the Opera browserAndreas Bovens
 
SVG in Opera’s desktop, mobile & TV browsers — edition 2011
SVG in Opera’s desktop, mobile & TV browsers  — edition 2011SVG in Opera’s desktop, mobile & TV browsers  — edition 2011
SVG in Opera’s desktop, mobile & TV browsers — edition 2011Andreas Bovens
 
Building rich apps with HTML5 and friends
Building rich apps with HTML5 and friendsBuilding rich apps with HTML5 and friends
Building rich apps with HTML5 and friendsAndreas Bovens
 
SVG in the Opera browser
SVG in the Opera browserSVG in the Opera browser
SVG in the Opera browserAndreas Bovens
 
Opera and the Open Web platform
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platformAndreas Bovens
 
Opera Widgets for Desktop and Opera Dragonfly
Opera Widgets for Desktop and Opera DragonflyOpera Widgets for Desktop and Opera Dragonfly
Opera Widgets for Desktop and Opera DragonflyAndreas Bovens
 

Plus de Andreas Bovens (7)

Progressive Web Apps: Opera's perspective
Progressive Web Apps: Opera's perspectiveProgressive Web Apps: Opera's perspective
Progressive Web Apps: Opera's perspective
 
Fast & Furious: Speed in the Opera browser
Fast & Furious: Speed in the Opera browserFast & Furious: Speed in the Opera browser
Fast & Furious: Speed in the Opera browser
 
SVG in Opera’s desktop, mobile & TV browsers — edition 2011
SVG in Opera’s desktop, mobile & TV browsers  — edition 2011SVG in Opera’s desktop, mobile & TV browsers  — edition 2011
SVG in Opera’s desktop, mobile & TV browsers — edition 2011
 
Building rich apps with HTML5 and friends
Building rich apps with HTML5 and friendsBuilding rich apps with HTML5 and friends
Building rich apps with HTML5 and friends
 
SVG in the Opera browser
SVG in the Opera browserSVG in the Opera browser
SVG in the Opera browser
 
Opera and the Open Web platform
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platform
 
Opera Widgets for Desktop and Opera Dragonfly
Opera Widgets for Desktop and Opera DragonflyOpera Widgets for Desktop and Opera Dragonfly
Opera Widgets for Desktop and Opera Dragonfly
 

Dernier

Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 

Dernier (20)

Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 

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

  • 1. Responsive design: techniques and tricks to prepare your websites for the multi-screen future Andreas Bovens - Opera Software http://www.flickr.com/photos/redux/7145995789/
  • 2. Responsive design: techniques and tricks to prepare your websites for the multi-screen future Andreas Bovens - Opera Software http://www.flickr.com/photos/redux/7145995789/
  • 4. “Patterns for Multiscreen Strategies” Coherence Syncronization Screen sharing By Precious http:/ /slidesha.re/kiip5y Device shifting Complementarity Simultaneity These patterns should help understand and define strategies for the multiscreen world.
  • 5. Coherence Syncronization Screen sharing Device shifting Complementarity Simultaneity These patterns should help understand and define strategies for the multiscreen world. http:/ /slidesha.re/kiip5y
  • 6. “A digital product or service looks and works coherently across devices. Features are optimized for specific device characteristics and usage scenarios.” Coherence http:/ /slidesha.re/kiip5y
  • 7. Coherence http://slidesha.re/kiip5y
  • 9. ?
  • 10. small screen rendering aka single column view
  • 22. “Nice, but how can we control this zooming behavior?”
  • 23. Let’s talk about the viewport mechanism
  • 24. This is the viewport.
  • 25. <meta ...> Using a "viewport" meta tag in the <head> of the page...
  • 26. ...we can control page width & height, zoom level, etc.
  • 29. This works in: with some exceptions ;-)
  • 30. http:/ /www.opera.com/developer/tools/mobile/
  • 41. HVGA portrait no viewport defined in <head>, so fallback to default of 980px, which is squeezed inside 320px.
  • 42. HVGA portrait <meta name="viewport" content="width=320">
  • 43. HVGA portrait <meta name="viewport" content="width=320">
  • 44. HVGA portrait HVGA landscape <meta name="viewport" content="width=320">
  • 45. HVGA portrait <meta name="viewport" content="width=device-width">
  • 46. HVGA portrait <meta name="viewport" content="width=device-width">
  • 47. HVGA portrait HVGA landscape <meta name="viewport" content="width=device-width">
  • 48. HVGA landscape HVGA landscape 480px 320px × 1.5 zoom
  • 49. HVGA portrait <meta name="viewport" content="initial-scale=1">
  • 50. HVGA portrait <meta name="viewport" content="initial-scale=1">
  • 51. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=1">
  • 52. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=1"> (same result as width=device-width)
  • 53. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=0.5">
  • 54. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=2">
  • 56. HVGA portrait <meta name="viewport" content="width=device-width"> + <div style="width: 600px">
  • 57. HVGA portrait <meta name="viewport" content="width=device-width, initial-scale=1"> + <div style="width: 600px">
  • 58. other settings maximum-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">
  • 59. other settings maximum-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">
  • 60. other settings maximum-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">
  • 61. other settings maximum-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">
  • 62. Important! Make sure to use commas, not semi-colons as delimiters between viewport values! <meta name="viewport" content="initial-scale=1; user-scalable=no"> <meta name="viewport" content="initial-scale=1, user-scalable=no">
  • 63. caveats Android Browser doesn’t support user-scalable=no. IE interprets width=device-width as 320px. Safari on iPad always interprets width=device-width as 768px, although it’s 1024px wide in landscape mode. This can be overridden with initial-scale=1, which... triggers a zooming bug* on orientation change. * Patch: https:/ /github.com/scottjehl/iOS-Orientationchange-Fix
  • 65. So, how to use this? Sniff for mobile browsers maybe?
  • 66. So, how to use this? Sniff for mobile browsers maybe? Better don’t sniff.
  • 74. Opera/9.80 (Macintosh; Intel Mac OS X 10.5.8; U; en) Presto/2.9.220 Version/12.00
  • 80. So, avoid sniffing, but if you really have to, provide a way for users to make corrections, and remember their preference.
  • 81. So, avoid sniffing, but if you really have to*, provide a way for users to make corrections, and remember their preference. * always ask yourself why the mobile site should be different from the desktop site
  • 82. * always ask yourself why the mobile site should be different from the desktop site customer requir ements tim e restrictions budget limitations capabilities are different different layout needed
  • 83. * always ask yourself why the mobile site should be different from the desktop site customer requir ements tim e restrictions budget limitations capabilities are different different layout needed
  • 84. * always ask yourself why the mobile site should be different from the desktop site customer requir ements tim e restrictions budget limitations capabilities are different different layout needed capability detection
  • 85. * always ask yourself why the mobile site should be different from the desktop site customer requir ements tim e restrictions budget limitations capabilities are different different layout needed capability detection viewport + media queries
  • 86. Let’s talk about media queries
  • 87. Media queries are conditional hooks for applying different CSS rules, depending on e.g. browser width or height, orientation, aspect ratio, etc.
  • 88. Differently said, media queries allow you to optimize your site layout for all kinds of form factors. Via http://mediaqueri.es/
  • 89. @media screen and (min-width: 400px) and (max-width: 800px) { article { /* css for browsers with width ≥ 400px and ≤ 800px */ } }
  • 90. @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 */ } }
  • 91. @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 */ } }
  • 92. @media screen and (max-width: 400px) { article { /* css for browsers with width ≤ 400px */ } } Remember that mobile browsers have a default viewport width (e.g. 980px). For your mobile specific media queries to work, you need to set the viewport!
  • 94. default viewport. width=device-width. mobile specific media mobile specific media queries not applied. queries applied.
  • 95. The viewport and media queries combo allows you to create just one responsive site that works everywhere.
  • 96. Q: What do I start with, desktop or mobile? A: Do mobile first, and build up your desktop styles from there.
  • 97. Q: Which devices, screen sizes should I design for? A: All of them! Use content breakpoints, instead of device breakpoints and you’ll get a long way.
  • 98. http:/ /www.flickr.com/photos/33284937@N04/5445675024/
  • 100. A pixel is not what it seems. Thus far, we’ve talked about pixels in terms of “CSS pixels”. One CSS pixel can be multiple device pixels.
  • 103. almost WVGA portrait Browser pretends that 480px is 320px.
  • 104. In most scenarios, you won’t have to worry about this. It just works.
  • 105. However, if you want to control PPI related stuff, these are the things you can do:
  • 106. almost WVGA portrait (1) Set the meta viewport’s target-densitydpi to device-dpi.
  • 107. almost WVGA portrait (1) Everything is shown at 100%. One CSS pixel is equal to one device pixel.
  • 109. almost WVGA portrait (2) Use special device- pixel-ratio media query to serve PPI-specific CSS.
  • 110. almost WVGA portrait I’ve set the 1500×1500px background-image to repeat every 1000px, making it crispy again. The rest of the content is still scaled 150%.
  • 112. caveats -o-max/min-device-pixel-ratio uses fractions instead of numbers. So 3/2, not 1.5. Watch out for max/min--moz-device-pixel-ratio.
  • 113. 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;} }
  • 114. almost WVGA portrait (3) Use high-res images to preserve crispiness.
  • 116. http:/ /www.w3.org/community/respimg/
  • 117. 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>
  • 118. 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>
  • 119. Sidenote about another responsive image technique: object-fit and object-position allow you to crop images
  • 122. http:/ /dev.opera.com/articles/view/css3-object-fit-object-position/
  • 124. Why do all this viewport stuff with <meta> tags? Isn’t this something for CSS?
  • 125. http:/ /dev.w3.org/csswg/css-device-adapt/
  • 126. <meta name="viewport" content="width=device- width, initial-scale=1, user-scalable=no"> becomes @viewport { width: device-width; zoom: 1; user-zoom: fixed; }
  • 127. <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; }
  • 128. http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
  • 129. Responsive design: techniques and tricks to prepare your websites for the multi-screen future Andreas Bovens - Opera Software http://www.flickr.com/photos/redux/7145995789/
  • 130. Responsive design: techniques and tricks to prepare your websites for the multi-screen future nt prese Andreas Bovens - Opera Software http://www.flickr.com/photos/redux/7145995789/
  • 131. Thank you! @andreasbovens Dosis font: http:/ /www.impallari.com/dosis Glyphicons: http:/ /glyphicons.com/glyphicons-licenses/ Corkboard background: http:/ /psd.tutsplus.com/freebies/texture/corkboard-texture-pack/

Notes de l'éditeur

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. \n
  103. \n
  104. \n
  105. \n
  106. \n
  107. \n
  108. \n
  109. \n
  110. \n
  111. \n
  112. \n
  113. \n
  114. \n
  115. \n
  116. \n
  117. \n
  118. \n
  119. \n
  120. \n
  121. \n
  122. \n
  123. \n
  124. \n
  125. \n
  126. \n
  127. \n
  128. \n
  129. \n
  130. \n
  131. \n