Overview of This Lesson

In this lesson we'll discuss an overview of Responsive Design and the different techniques that have been developed over the years: how did responsive design get to the stage it's at now? What does "responsive design" even mean? We'll also talk about that viewport <meta> tag you're always adding to your HTML documents - you'll find out exactly what it does and what all the parts of it mean!

What is Responsive Design?

Responsive Design is a design technique for applications and web content that focuses on how user interfaces automatically adapt to changes in the user's screen or device size, orientation, resolution, font sizes, and several other factors. Examples of responsive design could include:

• A web page's images shrink to fit when you view the page on your phone.
• An application's form layout shows as a single column on a narrow device screen like a phone, and shows as several rows and columns on a wider device screen like a desktop monitor. The page also makes a similar adjustment if you view it on a phone in portrait mode vs landscape mode.
• The repetitive menus at the end of each article on these tutorial pages don't appear when you try to print a hard-copy of a page because they're not needed.
• The topic menu on each of these pages appears as a clickable button on the top-left of the screen that you can show/hide, unless you're on a much wider screen, in which case it appears along the left side of the page.

It's important to ensure that your web pages and applications are responsive. A responsive page/app visually adapts to a user's device and device settings. For example, if a user is using a small screen (such as a smart phone), or a user has their font DPI set to a higher value than is typical (e.g. 200%), or a user has resized their browser to fit half their monitor so they can use another application on the other half of the screen (a.k.a split screen). A responsive page/application should adapt to such changes and still be usable to users on all devices or with any device settings.

When we look at responsive (or lack of) design, we can think of four different categories or levels:

Fixed

Fixed design uses absolute widths (e.g. using px, pt, cm, or other absolute measurements).

Resizing the screen, enlarging the fonts, or viewing on a different device doesn't change the way the interface appears.

Fluid

Fluid design uses percentages and ems for widths.

Items are sized relative to one another and the viewport, so items are scaled when the screen is resized, or a different device is used.

Adaptive

Adaptive designs uses media queries to change the page's layout when a certain screen size is detected.

For example, a media query can dictate that a mobile.css file is used for mobile devices and a main.css file is used for desktops and laptops.

Responsive

Responsive design uses both media queries and fluid grids to dictate how items resize/position themselves as the screen/font size or devices change.

Content of pages is adapted to fit device screens; content should not be omitted.

I've created some examples of fixed, fluid, and adaptive design so you can compare. Each page contains a link to its CSS file so you can view the code. Test each one by resizing the browser window to simulate different devices (phone, tablet, small monitor, large monitor, orientation, etc). Notice how the layout behaves as you resize, notice what happens to the different parts of the content. What works well and what doesn't? Quick and easy access to each part of the examples (I've left some comments and other information inside the code and in the contents of each page, so make sure you read them all):

The Viewport

You've already done a little bit of coding towards responsive design by using the viewport META tag:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

The viewport is actually a complicated part of the browser. There is what developers refer to as the layout viewport and the visible viewport. The layout viewport is the actual page that you're viewing, and the visible viewport is the visible part of that page through your device's screen. Try to imagine that the visible viewport is a window or frame that you're looking through when you look at the layout viewport (the page). This web page provides an excellent visualization of the layout viewport and visible viewport:

Viewports Visualization App

The larger, yellow box is the layout viewport. Usually, a web page will adjust its width to fit the layout viewport, and the user can scroll vertically to view the rest of the document. If the page contains an object (such as an image) that is wider than the layout viewport, the layout viewport will not fit and the user will have to scroll horizontally. But other than that, horizontal scrolling is not available because a document is always resized to fit the width of the layout viewport.

The smaller, purple/blue box that moves (use the arrow keys - there's instructions in the left column) is the visual viewport. As a user scrolls, the visual viewport moves around. When browsing a site on a small device, the visible viewport is the same size as your device screen (in fact, you can think of the visible viewport as the actual device screen).

By default, the layout viewport is resized to fit the visible viewport. In other words, a web page is zoomed out so that it's entire width fits on your device screen. This is why you don't really notice a visible viewport on your laptop or desktop: the visible and layout viewports are the same size as your screen and/or browser window, and those windows are large on a large screen. This becomes a problem on mobile devices, where the viewport has a much smaller area to work with:

Note that this effect can vary on different devices. For example, Android devices will always make the layout viewport as wide as the widest element.

On a small device, the layout viewport width is larger than the device screen width. How large depends on the device, usually they're between 800px and 980px. This means that a user always has to scroll horizontally to view most web pages.

Additionally, if you're using percentage widths on your page elements, things get unreadable. A sidebar that takes up 15% of the page on a large screen looks fine, but on a small device that's only 480 pixels wide, that sidebar takes up only 72 pixels, which is very narrow (that's about half the width of a slim finger). Note that percentage widths are always relative to the layout viewport.

In the old days, we would make 2 versions of the more important pages on a site: one for desktops/laptops and one for mobile devices. You could imagine how cumbersome this was: updates to a page required twice the work.

To fix this, the viewport META tag was introduced for small devices. The viewport META tag is not technically official HTML but it is supported by several mobile browsers. It allows a developer to configure:

• The default width of the page. width=device-width indicates that the page's (or layout viewport's) width should default to the width of the device. The height will adjust automatically.
• The zoom level of the page. initial-scale=1.0 indicates that the page should load with a normal zoom level. The value indicates the ratio of device pixels to CSS pixels.

<meta name="viewport" content="width=device-width,initial-scale=1.0">

The viewport META tag has no effect at all in browsers on desktops and laptops. It only works for small devices.

Without the viewport META tag, a browser will show a page with it's layout viewport and visible viewport as the same size, causing a web page to fit its width and then zoom out so that its all visible. On some pages, this makes the text very difficult, if not impossible, to read. It forces the user to zoom in, and then they are required to scroll horizontally in order to read the content.

Remember that some mobile browsers, particularly those on Android devices, will resize any content containers so that the content fits perfectly on the device screen, but this isn't true of all mobile browsers.

Using the viewport META tag allows you to change the size of the layout viewport to the same size as the device screen. You can also adjust the default zoom factor to ensure that the device doesn't zoom out to fit everything.

I created a simple web site that you can test (https://tinyurl.com/wsjTestVP) on your own small devices (note that there is really nothing interesting to see if you test this on a laptop or desktop screen). If you need to, just enter the tiny URL in the brackets into your mobile browser.

The main page shows you your device's screen width and visible viewport width. The viewing area and viewport size are measured in CSS pixels. When you measure anything in CSS using the "px" measurement, you're measuring in CSS pixels. A device screen's width and height are also measured in pixels, but those are "device pixels".

To understand the difference, say you have an image that is styled to have a width and height of 100 pixels (that's CSS pixels). On a screen with a zoom factor of 1.0 (normal zoom), then the image is also 100 device pixels. When the user zooms in (say, zoom factor 2.0) the image takes up more of the screen than before: it appears larger. The image is still 100 pixels in size, but now it's taking up 200 device pixels in size. Similarly, if you zoom out on the image - for example, zoom factor 0.5 - the image appears smaller, and it takes up only 50 device pixels on the screen, even though it's still technically 100 CSS pixels in size.

So in summary, when the zoom factor is normal (1.0), 1 CSS pixel = 1 device pixel. When the user zooms in, a CSS pixel takes up more than one device pixel (e.g. with a zoom factor of 2.0, 1 CSS pixel = 2 device pixels). When the user zooms out, you can fit more CSS pixels into 1 device pixel (e.g with a zoom factor of 0.5, 2 CSS pixels = 1 device pixel).

Once you've examined the main page, try the various links to see the effect of different viewport options.

Here are some screen shots of the example pages on my own Android phone (note that Android browsers tend to be a bit more flexible when it comes to the layout and visible viewport, so mine are probably a bit different than some other phones might show).

You should be able to understand at this point why the viewport meta tag is so important for responsive web design. You should use it in each of your HTML documents.