SlideShare ist ein Scribd-Unternehmen logo
1 von 131
Downloaden Sie, um offline zu lesen
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/

Weitere ähnliche Inhalte

Was ist angesagt?

C++ OOPS Concept
C++ OOPS ConceptC++ OOPS Concept
C++ OOPS ConceptBoopathi K
 
Support vector machines (svm)
Support vector machines (svm)Support vector machines (svm)
Support vector machines (svm)Sharayu Patil
 
Output primitives in Computer Graphics
Output primitives in Computer GraphicsOutput primitives in Computer Graphics
Output primitives in Computer GraphicsKamal Acharya
 
Image Classification Done Simply using Keras and TensorFlow
Image Classification Done Simply using Keras and TensorFlow Image Classification Done Simply using Keras and TensorFlow
Image Classification Done Simply using Keras and TensorFlow Rajiv Shah
 
Monitors & workstation,Donald ch-2
Monitors & workstation,Donald ch-2Monitors & workstation,Donald ch-2
Monitors & workstation,Donald ch-2Iftikhar Ahmad
 
COMPUTER GRAPHICS-"Projection"
COMPUTER GRAPHICS-"Projection"COMPUTER GRAPHICS-"Projection"
COMPUTER GRAPHICS-"Projection"Ankit Surti
 
Raster scan system
Raster scan systemRaster scan system
Raster scan systemMohd Arif
 
Object detection with deep learning
Object detection with deep learningObject detection with deep learning
Object detection with deep learningSushant Shrivastava
 
screen output and keyboard input in js
screen output and keyboard input in jsscreen output and keyboard input in js
screen output and keyboard input in jschauhankapil
 
Cat and dog classification
Cat and dog classificationCat and dog classification
Cat and dog classificationomaraldabash
 
Machine Learning - Dataset Preparation
Machine Learning - Dataset PreparationMachine Learning - Dataset Preparation
Machine Learning - Dataset PreparationAndrew Ferlitsch
 
Convolutional Neural Network Models - Deep Learning
Convolutional Neural Network Models - Deep LearningConvolutional Neural Network Models - Deep Learning
Convolutional Neural Network Models - Deep LearningMohamed Loey
 
Problem Formulation in Artificial Inteligence Projects
Problem Formulation in Artificial Inteligence ProjectsProblem Formulation in Artificial Inteligence Projects
Problem Formulation in Artificial Inteligence ProjectsDr. C.V. Suresh Babu
 
Object Oriented Programming : A Brief History and its significance
Object Oriented Programming : A Brief History and its significanceObject Oriented Programming : A Brief History and its significance
Object Oriented Programming : A Brief History and its significanceGajesh Bhat
 
B. SC CSIT Computer Graphics Unit 3 By Tekendra Nath Yogi
B. SC CSIT Computer Graphics Unit 3 By Tekendra Nath YogiB. SC CSIT Computer Graphics Unit 3 By Tekendra Nath Yogi
B. SC CSIT Computer Graphics Unit 3 By Tekendra Nath YogiTekendra Nath Yogi
 
Perceptron (neural network)
Perceptron (neural network)Perceptron (neural network)
Perceptron (neural network)EdutechLearners
 
Lecture 17 Iterative Deepening a star algorithm
Lecture 17 Iterative Deepening a star algorithmLecture 17 Iterative Deepening a star algorithm
Lecture 17 Iterative Deepening a star algorithmHema Kashyap
 

Was ist angesagt? (20)

C++ OOPS Concept
C++ OOPS ConceptC++ OOPS Concept
C++ OOPS Concept
 
Support vector machines (svm)
Support vector machines (svm)Support vector machines (svm)
Support vector machines (svm)
 
Output primitives in Computer Graphics
Output primitives in Computer GraphicsOutput primitives in Computer Graphics
Output primitives in Computer Graphics
 
3 d viewing
3 d viewing3 d viewing
3 d viewing
 
Image Classification Done Simply using Keras and TensorFlow
Image Classification Done Simply using Keras and TensorFlow Image Classification Done Simply using Keras and TensorFlow
Image Classification Done Simply using Keras and TensorFlow
 
Monitors & workstation,Donald ch-2
Monitors & workstation,Donald ch-2Monitors & workstation,Donald ch-2
Monitors & workstation,Donald ch-2
 
COMPUTER GRAPHICS-"Projection"
COMPUTER GRAPHICS-"Projection"COMPUTER GRAPHICS-"Projection"
COMPUTER GRAPHICS-"Projection"
 
Bresenham circle
Bresenham circleBresenham circle
Bresenham circle
 
Raster scan system
Raster scan systemRaster scan system
Raster scan system
 
Object detection with deep learning
Object detection with deep learningObject detection with deep learning
Object detection with deep learning
 
Illumination Models & Shading
Illumination Models & ShadingIllumination Models & Shading
Illumination Models & Shading
 
screen output and keyboard input in js
screen output and keyboard input in jsscreen output and keyboard input in js
screen output and keyboard input in js
 
Cat and dog classification
Cat and dog classificationCat and dog classification
Cat and dog classification
 
Machine Learning - Dataset Preparation
Machine Learning - Dataset PreparationMachine Learning - Dataset Preparation
Machine Learning - Dataset Preparation
 
Convolutional Neural Network Models - Deep Learning
Convolutional Neural Network Models - Deep LearningConvolutional Neural Network Models - Deep Learning
Convolutional Neural Network Models - Deep Learning
 
Problem Formulation in Artificial Inteligence Projects
Problem Formulation in Artificial Inteligence ProjectsProblem Formulation in Artificial Inteligence Projects
Problem Formulation in Artificial Inteligence Projects
 
Object Oriented Programming : A Brief History and its significance
Object Oriented Programming : A Brief History and its significanceObject Oriented Programming : A Brief History and its significance
Object Oriented Programming : A Brief History and its significance
 
B. SC CSIT Computer Graphics Unit 3 By Tekendra Nath Yogi
B. SC CSIT Computer Graphics Unit 3 By Tekendra Nath YogiB. SC CSIT Computer Graphics Unit 3 By Tekendra Nath Yogi
B. SC CSIT Computer Graphics Unit 3 By Tekendra Nath Yogi
 
Perceptron (neural network)
Perceptron (neural network)Perceptron (neural network)
Perceptron (neural network)
 
Lecture 17 Iterative Deepening a star algorithm
Lecture 17 Iterative Deepening a star algorithmLecture 17 Iterative Deepening a star algorithm
Lecture 17 Iterative Deepening a star algorithm
 

Andere mochten auch

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
 

Andere mochten auch (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Mehr von 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
 

Mehr von 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
 

Kürzlich hochgeladen

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Juan Carlos Gonzalez
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...Daniel Zivkovic
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 

Kürzlich hochgeladen (20)

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 

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/

Hinweis der Redaktion

  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