In the next couple of chapters, we'll explore other solutions to achieve the perfect responsive design for your project, mixing and matching them with the previous tips and tricks.
We'll start with a way to dynamically resize your content—and especially your type of course—based on the visible area of your screen.
As we'll see, this one is quite different for the rest of the solutions out there—in both good and bad aspects.
We'll start with explaining what the viewport actually is, and then we will move on to how to operate in it with CSS3 using custom tailored measures.
Are you ready? Let's start!
First, we need to understand one simple thing: the visible area of the screen, which is called viewport. Of course, it varies from device to device, and obviously, working with measures directly related and strictly linked to it seems like a good idea.
Its first widespread notion and implementation came with the introduction of HTML5 standard, which added a <meta> tag specifically for it.
Metadata is information about the data on the page. It is usually related to language, SEO aspects, and description of the content among other things. While not clearly visible on the page, this data is read and used by machines—they always are inside the head element.
The metadata viewport is expressed by the name (="viewport"), the width property, and the initial-scale of one.
Of course, those properties can be set to whatever amount you want them to be; you can set the width to be a fixed one and the page to be zoomed in or out (initial-scale), but the well known, worldwide approach so far has been the following one:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And for good reason—since the trend of responsive or adaptive design, and the widespread acquisition of browser capable smartphones, people have started to browse the internet on their phones too, which are clearly different from the standard desktop and laptop screens.
The mobile browser's implementation initially attempted to show the whole page on the mobile screen (despite the different rules and settings involved in its creation), zooming it out automatically to horizontally fill the screen without scrolling bars.
Of course, on pages designed on the standard, fixed width of 960px, constraining them to a range that was one fourth of the original gave some irresponsible, unreadable, and non-navigable results.
Even though this was years ago, it's hard to believe that this was the best design from mobile phone and browsers makers. I mean, even letting the page be zoomed at the actual size and letting users move around would have been a better, default solution.
Anyway, this situation caused a lot of rumors, crises in the World Wide Web; it also caused the adoption of and movement to the responsive and adaptive strategies.
One of the very first steps toward it was the preceding Meta declaration, which commanded mobile browsers to actually load the website on the entire width of the screen (at the initially designed dimensions) without zooming it out.
It's a declaration that every responsive website has and must have—without it, the mobile browser will take over and the visualization will be as shown in the previous screenshot and not like the one you thought of, even if it is coded responsively.
With the Meta addition the website start to behave correctly on mobile viewports.
Is that all? Is that everything we have to write about viewport, and how to scale things accordingly to it?
Certainly not! But, this introduction was verily needed—both, to explain what the actual viewport is and why some implementations tied to it were born.