Tuesday, February 16, 2016

The old website challenge - 04 - Setting the viewport

It's renown that Google penalizes in its ranking the websites which are not mobile-friendly. As such, one of the priorities with modernizing my old website is to make it mobile friendly. The first step to do this is to implement the viewport property in the HTML code of the pages.

What's the viewport?

I'm not going to invent anything and I rely on W3schools' definition saying that
The viewport is the user's visible area of a web page.
Thus configuring the viewport means being in control of how our website adapts to the screen of any device instead of letting the user's device deciding how to adapt the website to the screen.

The default behavior of most mobile devices, without a properly configured viewport, is to set an arbitrary width (the most common is 980px), render the website as it would appear on a screen of that width, and zoom out until the view matches the device's screen width. Clever, but the results are not always predictable, and especially often not easy to navigate through.

As our objective is to have a responsive website, we want our viewport to always match the device width with no zooming in or out involved. The code to use in order to do that, adding it to the head section of the html document, is the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
By doing so we are telling the browser to always size the content of the website to the width of the screen. One downside of this technique is that we need to be very careful when using fixed-size elements, as they might not fit the viewport.

The first way to try to obviate this issue is to use for potentially wide elements (e.g. pictures) the attribute max-width instead of width; this tells the browser to use the given width only when the item fits the containing block; if not, the item will be proportionally scaled until it fits.

They say that With great power come great responsibilities... well, sure, now you are in control of how the website shows and it means that you need to be the one to adapt it to the different devices! As we will see in a next post, a very convenient way to do so is by using the CSS media queries.

No comments: