SlideShare a Scribd company logo
1 of 100
Download to read offline
@media mobilism and (year: 2011)




              MEDIA QUERIES
A CLOSER LOOK AT
        BY
           STEPHEN HAY
Meta layout: a closer look at media queries
B. Rowser
Hi handsome.
@media mood and (min-level: fine)




      Fine.
@media screen and (min-width: 600px)




        Yes.
@media all and (orientation: landscape)



What are you,
 an idiot?
Meta layout: a closer look at media queries
As you wish.
Meta layout: a closer look at media queries
Meta layout: a closer look at media queries
Meta layout: a closer look at media queries
MEDIA QUERIES

@media [not|only] type [and] (expr) {
  rules;
}


== Feature detection
MEDIA TYPES
 @media screen { ... }
  @media print { ... }
@media handheld { ... }
MEDIA TYPES
  @media screen { ... }
   @media print { ... }
 @media handheld { ... }
Let’s add some logic...
@media screen and { ... }
MEDIA TYPES
    @media screen { ... }
     @media print { ... }
   @media handheld { ... }
  Let’s add some logic...
  @media screen and { ... }
and a feature to query
@media screen and (color) { ... }
MEDIA TYPES
      @media screen { ... }
       @media print { ... }
Hey—@media handheld { ... }
     tell them some
 more about logic,
  Let’s add
   you bastard. some logic...
  @media screen and { ... }
and a feature to query
@media screen and (color) { ... }
logical AND

@media screen and (min-width: 600px)
and (max-width: 1200px)



 constrains a query
logical OR

@media screen and (min-resolution:
300dpi), screen and (-webkit-min-
device-pixel-ratio: 2)


 the comma is an OR
logical NOT

@media not screen and (color)
logical NOT

@media not screen and (color)



    be careful...
logical NOT
@media not screen and (min-width: 600px)
logical NOT
 @media not screen and (min-width: 600px)


  does not evaluate as:
@media (not screen) and (min-width: 600px)
logical NOT
 @media not screen and (min-width: 600px)


  does not evaluate as:
@media (not screen) and (min-width: 600px)


      does evaluate as:
@media (not (screen and (min-width: 600px)))
ONLY
      @media only all and
 (device-aspect-ratio: 16/9)



hides the CSS from
 older browsers
ONLY
          @media only all and
Enough. Enough.
    (device-aspect-ratio: 16/9)
What about the
Media Features?
  hides the CSS from
   older browsers
Media Features

width                 color
height                color-index
device-width          monochrome
device-height         resolution
orientation           scan
aspect-ratio          grid
device-aspect-ratio
Media Features

width                 color
height                color-index
device-width          monochrome
device-height         resolution
orientation           scan
aspect-ratio          grid
device-aspect-ratio
Media Features

width                 color
height                color-index
device-width          monochrome
device-height         resolution
orientation           scan
aspect-ratio          grid
device-aspect-ratio
Media Features

width                 color
height                color-index
device-width          monochrome
device-height         resolution
orientation           scan
aspect-ratio          grid
device-aspect-ratio
Media Features

width                 color
height                color-index
device-width          monochrome
device-height         resolution
orientation           scan
aspect-ratio          grid
device-aspect-ratio
Media Features

width                 color
height                color-index
device-width          monochrome
device-height         resolution
orientation           scan
aspect-ratio          grid
device-aspect-ratio
Media Features

width                 color
height                color-index
device-width          monochrome
device-height         resolution
orientation           scan
aspect-ratio          grid
device-aspect-ratio
Media Features

width                 color
height                color-index
device-width          monochrome
device-height         resolution
orientation           scan
aspect-ratio          grid
device-aspect-ratio
Media Features

width                 color
height                color-index
device-width          monochrome
device-height         resolution
orientation           scan
aspect-ratio          grid
device-aspect-ratio
Media Features
likely you’ll use these most:

width                 color
height                color-index
device-width          monochrome
device-height         resolution
orientation           scan
aspect-ratio          grid
device-aspect-ratio
Testing
Testing


Yes, you are.
Prefixed Features
Prefixed Features
How many device pixels per CSS pixel?
Prefixed Features
How many device pixels per CSS pixel?
   -webkit-[min|max]-device-pixel-ratio
     [min|max]--moz-device-pixel-ratio
      -o-[min|max]-device-pixel-ratio
Prefixed Features
How many device pixels per CSS pixel?
   -webkit-[min|max]-device-pixel-ratio
     [min|max]--moz-device-pixel-ratio
      -o-[min|max]-device-pixel-ratio


   -webkit-min-device-pixel-ratio: 1.5
      -o-min-device-pixel-ratio: 3/2
Prefixed Features

A pixel is not a
     pixel.
Prefixed Features
 Is this a touch device?

    -moz-touch-enabled
Prefixed Features
       Is this a touch device?

           -moz-touch-enabled



@media screen and (-moz-touch-enabled) {
  /* touchy styles */
}
Viewport
@media screen and (max-device-width: 320px)
Viewport
@media screen and (max-device-width: 320px)




                 device-width
                                layout viewport
Viewport
@media screen and (max-device-width: 320px)

   Meta viewport.
Meta viewport
    <meta name="viewport"
content="width=device-width">
Meta viewport
         <meta name="viewport"
     content="width=device-width">


use that in combination with WIDTH
 @media screen and (max-width: 320px) {
   div {
     width: 80%;
   }
 }
Meta viewport
          <meta name="viewport"
      content="width=device-width,
            initial-scale=1">

use that in combination with WIDTH
 @media screen and (max-width: 320px) {
   div {
     width: 80%;
   }
 }
viewport in CSS?

@viewport {
  width: device-width;
  zoom: 1; /* No, not THAT zoom */
}
viewport in CSS?

 Enough already.
   @viewport {
How zoom: 1; /* No, not THAT
     can we apply
     width: device-width;
                               zoom */
  these things?
   }
Applying media queries
Applying media queries
      as blocks in css
Applying media queries
       as blocks in css




media attribute of link element
Applying media queries
       as blocks in css




media attribute of link element



           @import
Applying media queries
You don’t always need them
omg
Layout is not design.
Design is the art of
 putting form and
content together.


      Paul Rand said that
The media query is a
   screwdriver.

Layout is only one of
 the components of
       design.
Hey dude, remember
 when we designed
    web PAGES?
Pages
   to
Components
   to
 Systems
Layout strategy
    wireframes




         drupal.org/node/413910
Layout strategy
    wireframes




      graffletopia.com/stencils/358
Layout strategy
Reference wireframing

 A         B           C




 D     g       E   H




           F
Layout strategy
         Breakpoint graphs




0 px     600 px     900 px   We have no idea
Layout strategy
         Breakpoint graphs




0 px     600 px     900 px   We have no idea




Structured content first
Layout strategy
         Breakpoint graphs




0 px     600 px     900 px   We have no idea




Structured content first
Layout strategy
         Breakpoint graphs




0 px     600 px     900 px   We have no idea




Structured content first
Layout strategy
         Breakpoint graphs




0 px     600 px     900 px   We have no idea




Structured content first
Layout strategy
         Breakpoint graphs




0 px     600 px           900 px   We have no idea



                  Fluid layout

Structured content first
Order-independent
layout mechanisms
Meta layout: a closer look at media queries
N


S


E
Flexible Box
Layout module




S     N    E
Flexible Box
Layout module

                tb




    S


    N


    E
Meta layout: a closer look at media queries
H



C



A

F
Grid layout
  module
H



Grid layout   C       A
  module

                  F
H


Grid layout
  module      C       A
(templates)

                  F
Grid layout
  module
(templates)
F



              C
Grid layout
  module
(templates)   H

              A
Not as cool as two
 bears fighting a    F
  hockey player.
                     C



                     H

                     A
Meta layout: a closer look at media queries
Media queries / (meta) viewport
Media queries / (meta) viewport

        fluid layouts
Media queries / (meta) viewport

         fluid layouts

device/browser support profiles
Media queries / (meta) viewport

         fluid layouts

device/browser support profiles

content reference wireframing
Media queries / (meta) viewport

         fluid layouts

device/browser support profiles

content reference wireframing

  layout breakpoint graphs
Media queries / (meta) viewport

         fluid layouts

device/browser support profiles

content reference wireframing

  layout breakpoint graphs

    new layout mechanisms
Think in terms of
design principles & systems
The art of letting go
We need to think up new ways
 to design layout, and new ways
to communicate these new designs
        to our colleagues
         and our clients.
Thank you!




Starring magician Howard Thurston
as B. Rowser
http://www.delicious.com/stephenhay/mobilismconf2011
http://www.slideshare.net/stephenhay/mobilism2011




Thank you!




Starring magician Howard Thurston
as B. Rowser
http://www.delicious.com/stephenhay/mobilismconf2011
http://www.slideshare.net/stephenhay/mobilism2011




Thank you!

        @stephenhay




Starring magician Howard Thurston
as B. Rowser

More Related Content

What's hot

Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Todd Zaki Warfel
 
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016Cristina Chumillas
 
Wcphx 2012-workshop
Wcphx 2012-workshopWcphx 2012-workshop
Wcphx 2012-workshopPtah Dunbar
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapJosh Jeffryes
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standardsgleddy
 
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryTodd Zaki Warfel
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)Thinkful
 
WordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkWordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkPtah Dunbar
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSSRuss Weakley
 
Deepak Soni BCA First Year
Deepak Soni BCA First YearDeepak Soni BCA First Year
Deepak Soni BCA First Yeardezyneecole
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSTJ Stalcup
 
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressDesign Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressJesse James Arnold
 
The Future Of CSS
The Future Of CSSThe Future Of CSS
The Future Of CSSAndy Budd
 

What's hot (20)

Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
 
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016
 
Wcphx 2012-workshop
Wcphx 2012-workshopWcphx 2012-workshop
Wcphx 2012-workshop
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
CSS Fundamentals
CSS FundamentalsCSS Fundamentals
CSS Fundamentals
 
Bhanu pratap
Bhanu pratapBhanu pratap
Bhanu pratap
 
Html5 ux london
Html5 ux londonHtml5 ux london
Html5 ux london
 
HTML News Packages Lesson
HTML News Packages LessonHTML News Packages Lesson
HTML News Packages Lesson
 
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
 
WordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkWordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP Framework
 
CSS Systems
CSS SystemsCSS Systems
CSS Systems
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
 
Deepak Soni BCA First Year
Deepak Soni BCA First YearDeepak Soni BCA First Year
Deepak Soni BCA First Year
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
Design Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPressDesign Systems, Pattern Libraries & WordPress
Design Systems, Pattern Libraries & WordPress
 
The Future Of CSS
The Future Of CSSThe Future Of CSS
The Future Of CSS
 

Viewers also liked

Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Stephen Hay
 
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
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJustin Avery
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Designarborwebsolutions
 
Developing a Progressive Mobile Strategy
Developing a Progressive Mobile StrategyDeveloping a Progressive Mobile Strategy
Developing a Progressive Mobile StrategyDave Olsen
 

Viewers also liked (7)

Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011Real-world Responsive Design @ Breaking Development 2011
Real-world Responsive Design @ Breaking Development 2011
 
CSS3 and Selectors
CSS3 and SelectorsCSS3 and Selectors
CSS3 and Selectors
 
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
 
CSS Selectors
CSS SelectorsCSS Selectors
CSS Selectors
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
 
Developing a Progressive Mobile Strategy
Developing a Progressive Mobile StrategyDeveloping a Progressive Mobile Strategy
Developing a Progressive Mobile Strategy
 

Similar to Meta layout: a closer look at media queries

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 Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJason Harwig
 
CSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsCSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsSvitlana Ivanytska
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.GaziAhsan
 
Designing for Inclusion with Media Queries
Designing for Inclusion with Media QueriesDesigning for Inclusion with Media Queries
Designing for Inclusion with Media QueriesEric Bailey
 
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your designSCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your designFrédéric Harper
 
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
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinRazorfish
 
Designing for Inclusion with Media Queries: Boston CSS
Designing for Inclusion with Media Queries: Boston CSSDesigning for Inclusion with Media Queries: Boston CSS
Designing for Inclusion with Media Queries: Boston CSSEric Bailey
 
Media queries A to Z
Media queries A to ZMedia queries A to Z
Media queries A to ZShameem Reza
 
Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobileDee Sadler
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 
Android training day 3
Android training day 3Android training day 3
Android training day 3Vivek Bhusal
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply ResponsiveDenise Jacobs
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
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
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Frédéric Harper
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Christian Rokitta
 

Similar to Meta layout: a closer look at media queries (20)

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 Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
CSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsCSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive Layouts
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
 
Designing for Inclusion with Media Queries
Designing for Inclusion with Media QueriesDesigning for Inclusion with Media Queries
Designing for Inclusion with Media Queries
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your designSCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
 
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)
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic Welterlin
 
Designing for Inclusion with Media Queries: Boston CSS
Designing for Inclusion with Media Queries: Boston CSSDesigning for Inclusion with Media Queries: Boston CSS
Designing for Inclusion with Media Queries: Boston CSS
 
Media queries A to Z
Media queries A to ZMedia queries A to Z
Media queries A to Z
 
Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobile
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Android training day 3
Android training day 3Android training day 3
Android training day 3
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
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
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25
 

More from Stephen Hay

From Deception to Clarity
From Deception to ClarityFrom Deception to Clarity
From Deception to ClarityStephen Hay
 
The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)Stephen Hay
 
The Art of Deception
The Art of DeceptionThe Art of Deception
The Art of DeceptionStephen Hay
 
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserStephen Hay
 
Power Tools For Browser-Based Design
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based DesignStephen Hay
 
UIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowStephen Hay
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Stephen Hay
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Stephen Hay
 
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)Stephen Hay
 
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Stephen Hay
 
The New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the WebThe New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the WebStephen Hay
 
Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Stephen Hay
 
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Stephen Hay
 
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Stephen Hay
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Stephen Hay
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Stephen Hay
 
Go With The Flow
Go With The FlowGo With The Flow
Go With The FlowStephen Hay
 
Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingStephen Hay
 
HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2Stephen Hay
 
Real-world Responsive Design
Real-world Responsive DesignReal-world Responsive Design
Real-world Responsive DesignStephen Hay
 

More from Stephen Hay (20)

From Deception to Clarity
From Deception to ClarityFrom Deception to Clarity
From Deception to Clarity
 
The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)The Backside of the Class (CSS Day 2015)
The Backside of the Class (CSS Day 2015)
 
The Art of Deception
The Art of DeceptionThe Art of Deception
The Art of Deception
 
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
 
Power Tools For Browser-Based Design
Power Tools For Browser-Based DesignPower Tools For Browser-Based Design
Power Tools For Browser-Based Design
 
UIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design WorkflowUIE Virtual Seminar: Responsive Web Design Workflow
UIE Virtual Seminar: Responsive Web Design Workflow
 
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
Flexbox: One Giant Leap for Web Layout (Breaking Development 2013)
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
 
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)The New Photoshop, Part 2: The Revenge of the Web (FEC13)
The New Photoshop, Part 2: The Revenge of the Web (FEC13)
 
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
Flexbox: One Giant Leap for Web Layout (CSS Day 2013)
 
The New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the WebThe New Photoshop, Part 2: The Revenge of the Web
The New Photoshop, Part 2: The Revenge of the Web
 
Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)
 
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
 
Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012Responsive Design Workflow: Webshaped 2012
Responsive Design Workflow: Webshaped 2012
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 
Go With The Flow
Go With The FlowGo With The Flow
Go With The Flow
 
Fronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid PrototypingFronteers Workshop: Rabid Prototyping
Fronteers Workshop: Rabid Prototyping
 
HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2HTML5 & Webrichtlijnen 2
HTML5 & Webrichtlijnen 2
 
Real-world Responsive Design
Real-world Responsive DesignReal-world Responsive Design
Real-world Responsive Design
 

Recently uploaded

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
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
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
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
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
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
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
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
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 

Recently uploaded (20)

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
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
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
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...
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
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
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 

Meta layout: a closer look at media queries