Join James Williamson for an in-depth discussion in this video Examining the mobile viewport, part of Responsive Design Fundamentals.
In this chapter, I'm going to focus on some of the common concepts and techniques of responsive design. Many of this will focus on how we target and design for mobile devices, and will deal specifically with making sure that you can control how your content displays on mobile screens. Perhaps the most confusing aspect of mobile displays is the concept of the mobile viewport. Take this iPhone, for example--and I'm going a little old school here and using the iPhone 3GS. The screen resolution for this phone is 320 X 480 pixels, meaning that the screen is 320 pixels wide when in portrait mode.
However, notice that when I browse to a site that hasn't been optimized for mobile screens, like apple.com for example, the entire site is scaled to fit itself into the 320 pixels' worth of space, even though it was design for a much wider screen resolution--in this case 980 pixels. To read a site like this, the user needs to zoom up and then pan to the areas of the page that they want to read. So what's going on here, and why is this the default approach for most mobile devices? To understand that, we first have to understand what the mobile viewport is and how it relates to the mobile screen.
When we're browsing on a desktop device, the concept of the viewport becomes a little more obvious, as any open browser window is defined as the viewport. Because the viewport is independent of the screen, we can resize it to whatever size we want. On mobile devices, the viewport functions in much the same way. It gives you a defined area to display web pages that is independent of the device's screen. It's simply not as obvious as the desktop viewport, and users don't actually resize the viewport as much as they scale it up or down when they zoom in and out of web pages.
Since viewports have a minimum scaling factor, users rarely ever see their edges as they do when they resize floating browser windows. Because of the small size of mobile screens, mobile viewports are designed to be larger than the screen's resolution. Mobile Safari has a viewport of 980 pixels, while Opera's is around 850. When you compare that to an iPhone with a screen width of 320 pixels, you can see that the viewport is much larger than the actual screen itself.
In large part, this is due to mobile viewports having to display content that's designed for much wider screens. Typically, mobile browsers will display a web page within the viewport and then shrink that viewport down until the content fits within the width of the screen itself. While this usually results in tiny pages, it does allow the user to see the page in its entirety and decide which areas of the page they'd like to zoom up to, and read. If mobile browsers didn't behave this way, you'd only be able to see a small portion of most web pages.
This would be much more confusing as you'd have to pan around the page to explore its content without really knowing where anything was. This has been described as keyhole browsing, as it's similar to viewing an entire room through a small keyhole. So, while the default viewport scaling is helpful for users browsing sites designed for larger screens, it can make it extremely frustrating when browsing pages that are designed specifically for mobile screen sizes. Let's say that you've created a responsive design that has a mobile phone layout designed for 320 pixels.
On an iPhone, the default mobile viewport is 980 pixels, so your 320-pixel layout is only going to occupy about a third of that. The viewport will then be scaled down to fit the 320-pixel screen, making your layout really tiny and defeating your carefully crafted 320-pixel layout. So, in order to build responsive sites that fit neatly within mobile screen sizes, you'll need to know how to control both the viewport size and its initial scale factor.
We'll learn how to do that in our next movie.
- What is responsive design?
- Controlling viewports
- Designing for multiple screen densities
- Working with media queries
- Using fluid grids
- Building responsive forms
- Optimizing site performance
- Building responsive mockups
- Developing a content strategy
- Designing for mobile capabilities
- Creating flexible HTML
- Testing responsive designs