In this chapter, you will explore a technique for turning styles on and off based on the size of the browser window and other characteristics. You will provide an alternate layout for larger screens using a minimal amount of code. The browser will be able to switch between the different layouts in real time, as the browser window changes size – without reloading the page. Figure 5.1 shows the original layout and the alternate layout.
The industry term for this behavior is responsive website. Unfortunately, this term is often a point of confusion. Some think that it means “fast website” or “website with visual animations.” We prefer to call it an adaptive layout.
There are several ways of including alternate styles to be used based on the current browser conditions. The recommended approach is to write your styles for the smallest screen and then provide override styles in media queries that are triggered when the viewport – the browser’s viewable area – is larger than a set threshold.
On a traditional browser (like the one you are using while developing Ottergram), the viewport is the area shown by the browser window. This is pretty intuitive. On a mobile browser, it gets more complicated. Mobile browsers have multiple viewports, and each one plays a role in how a page is rendered.
Front-end developers need to focus on the layout viewport (sometimes called the actual viewport). The layout viewport tells the browser, “Pretend that I’m actually 980 pixels wide and then draw the page.”
Users are more concerned with a mobile browser’s visual viewport. This is the thing that they can pinch to zoom in and out on a page (Figure 5.2).
If you viewed Ottergram on your smartphone right now, you would see something like Figure 5.2, with the browser zoomed in on the upper-left corner of the page. Needless to say, even though a mobile user can zoom out manually, you do not want Ottergram to behave like this by default.
Earlier we mentioned that you are taking a mobile-first approach to developing Ottergram. That was mostly true. Your markup and styles were written in a mobile-friendly way – using a minimal amount of markup and styling the smallest elements first. Now, you just need to give the browser information about the layout viewport it should use.
In Chapter 3 you added normalize.css to Ottergram. This ensured that any browser viewing Ottergram would have the same set of default styles. On top of these defaults, you could confidently add your own CSS, knowing it would work consistently from browser to browser.
You will do something similar for the layout viewport. Just as
every browser may have a different user agent stylesheet, every browser
may have a different default layout viewport.
However, unlike using normalize.css, you are not going to reset
the viewport for all browsers to the same value. Instead, you will
use a <meta> tag to tell all browsers to
display Ottergram at the best size for the device’s physical screen.
In index.html, add a <meta> tag
that tells the browser that the width of the layout
viewport is the same as the device’s screen width. Make sure
to set the zoom to 100% by setting the initial-scale to 1.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="stylesheets/styles.css">
<title>Ottergram</title>
</head>
...
Save your changes. This technique sets the layout viewport to the ideal viewport. The ideal viewport is best viewport size for a specific device, as recommended by the browser maker. This varies significantly, since there are many, many different devices and quite a number of different browsers.
Table 5.1 summarizes the different types of viewports.
Table 5.1 Summary of the different viewports
Start browser-sync and make sure the DevTools are open in Chrome.
Look to the left of the Elements menu item and find the Toggle Device Mode
button, which looks like this: 
.
It is shown in context in Figure 5.3.
Click this button to activate device mode. You will see that the web page view now shows Ottergram on a simulated smartphone screen. There is a menu for choosing between different screen sizes based on popular devices. You can also click the gray bar below the presets to toggle between small, medium, and large screen sizes. And there is a menu for quickly choosing a screen orientation of landscape or portrait. Figure 5.4 shows a screenshot of the device mode at the time of this writing. Yours may look quite different, as the DevTools undergo regular updates.
You can see that, thanks to your new <meta> element, Ottergram displays well on
a small screen, such as a smartphone. For devices with larger
screens, such as tablets or laptops, a slightly
different layout may be more appropriate.
Next, you will apply different layout styles using a combination
of flexbox and media queries.
Click the
button again to deactivate device mode before you continue.