Telerik blogs

DevReach 2017: Why Responsive Design Works: A Viewports Deep Dive

Sara Faatz by Sara Faatz
April 27, 2018 Design 0 Comments
devreach-presentation-recordings


Why does responsive design work? To understand it - and increase your expertise as a Web developer, you first have to understand viewports.

 

At DevReach 2017, Peter-Paul Koch explained the fundamentals behind viewports, and where they might trip you up unexpectedly. It’s well worth your while to watch the entire presentation, but we wanted to share with you some of our favorite highlights.

 

First, we were surprised to learn that “a pixel is not a pixel.” There are two kinds of pixels: CSS pixels and device pixels. We use CSS pixels as an abstract construct for declarations - padding, and so forth. They can become larger or smaller as the viewer zooms. In contrast, device pixels are a fixed size … and aren’t that important to the Web developer. The CSS pixel does not necessarily correspond to a device pixel 1:1.

 

Generally speaking, we use CSS pixels, except with screen.width, which is an issue Koch dives into in more depth in the presentation.

 

Yet we also approach our Web design with percentages; representing our screens as viewports. Implicitly, every block-level element in HTML, including <html> and <body>, is 100% of the screen width. Thus, if we declare another element, as, say, 34%, that implies it’s 34% of the 100% of the block-level elements.

 

The HTML element, in turn, is defined relative to the initial viewport’s specifications.  On a browser, the viewport is the browser window width. But on mobile, it’s much more complicated. (Of course it is!)

 

Note that when you zoom in a desktop browser, the CSS pixels get larger. Yet when mobile phones were first able to browse the Web, specifically the iPhone, the viewports had to behave differently to consume desktop sites. The mobile phone manufacturers changed the viewport definition to 768-2014 pixels wide, with 980 pixels as the most common size.

 

That mobile viewport is called the layout viewport. Responsive, design, then, is the art of overriding the layout viewport.

 

That layout viewport is still bigger than what the user can see on the screen. What they see on the screen is called the visual viewport.

 

The visual viewport - on a non-responsive site - is like viewing the layout viewport, or the site, through a keyhole. But we can do better. That default layout viewport - that 980-pixel-wide viewport - isn’t the best. Enter, as Koch continues, the ideal layout viewport, which is a set of pixel dimensions stored in the CSS.

 

We tell the browser to use that ideal layout viewport when we detect its mobile browser type, and when we’re prepared for it. Every phone has its own ideal layout viewport size. (We do that, he later explains, using a meta tag: <meta name=”viewport” content=”width=device-width”>.)

 

Coming back to the desktop viewport: it, in turn, is then broken into the layout viewport and visual viewport. To get a sense of these, check out Koch’s helpful visualization site (and how those compare to the desktop construct): http://quirksmode.org/mobile/viewports.

 

Koch then dives into how various W3C standard terms relate to these viewports - now that we understand them - and where they’re confusing.

 

Then, he talks about how the meta viewport tag is best used, and where it gets tricky. Plus he talks about media and JavaScript queries. It’s worth your time to watch the whole presentation from DevReach 2017 here:
https://www.youtube.com/watch?v=CKVFKyHl_Ag - and become a viewport expert!

 

 

About the Presenter

Thanks to Peter-Paul Koch, renowned Web developer, trainer and speaker, for this Web-focused presentation. Find him at:

http://quirksmode.org

@ppk

Sara Faatz
About the Author

Sara Faatz

Sara Faatz leads the Digital Experience Technology Community Relations team at Progress. She has spent the majority of her career building community, producing events, creating marketing programs and more. When she's not working, she likes diving with sharks, running and watching hockey.

Comments

Comments are disabled in preview mode.