Viewports: Designing for the Mobile Modern Web

Joe Bowser
jbowser@adobe.com
@infil00p

The Modern Web

The Problem

What the problem used to be

Lots of testing

What the problem is today

This is not a mobile web problem

How do we go about fixing this?

LIVE CODING AHEAD

Multiple Assets

What about pixels?

Pixel Density: Tablet vs Phone

This is what it really looks like in CSS pixels

The Viewport: Screen Width and Height

        <meta name="viewport"
            content="
            height = [pixel_value | device-height] ,
            width = [pixel_value | device-width ] ,
            initial-scale = float_value ,
            minimum-scale = float_value ,
            maximum-scale = float_value ,
            user-scalable = [yes | no] ,
            target-densitydpi = [dpi_value | device-dpi |
                               high-dpi | medium-dpi | low-dpi]
          " />
        

CSS media queries

Webkit based:
            <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
            <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
            <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
        
Mozilla based:
            <link rel="stylesheet" media="screen and (-moz-device-pixel-ratio: 1.5)" href="hdpi.css" />
            <link rel="stylesheet" media="screen and (-moz-device-pixel-ratio: 1.0)" href="mdpi.css" />
            <link rel="stylesheet" media="screen and (-moz-device-pixel-ratio: 0.75)" href="ldpi.css" />
        

Or you can design for the web

            <link rel="stylesheet" href="landscape.css" type="text/css" media="screen and (min-width: 1024px)" />
            <link rel="stylesheet" href="portrait.css" type="text/css" media="screen and (min-width: 1023px)" />
        

Javascript Detection

Conclusion

Resources

Source

Legal

Portions of this presentation are modifications based on work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.

Iconography courtesy of the Noun Project and covered under Creative Commons 3.0 Attribution Licence

Scale icon by __Lo