Responsive Web Design — Part 2

This is a followup to my previous blogpost, found here.

So we need to design a website that not only looks good on multiple screen sizes, but dynamically responds to the screen size of the device accessing it.

…that sounds hard. Just look think about all the screen sizes/types we need to account for! Not to worry, Google has laid out a great tutorial for setting up responsive webpages, and I’m going to walkthrough their steps explaining things in depth along the way.

Setting The Viewport

Before anything, we need to set our sites viewport. By default, no matter the device, a browser will display your website as if it were being viewed on a desktop. It then adjusts some font sizes/zooms in, but the result can look quite messy, as shown below:

Ew

To fix this, we need to tell the browser that we want to set the viewport ourselves. We do this by adding this meta-tag within our <head>:

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

The code is somewhat self-explanatory. It first sets the viewport’s width value to be equal to the device’s screen’s width. It then sets the initial-scale to “1,” which establishes a 1 to 1 ratio between our devices screen pixels and our css pixels.

Scales? Pixels? Ratios? Wtf?

Once we get into CSS this will make more sense, but as we design our page we will be assigning elements widths and heights. This pixel ratio ensures that no matter the device, our designs width and heights will be relatively the same.

Designing Content to the Viewport

So now that our viewport is set we need to follow some guidelines as we design our page. Even though our viewport is set, we are not out of the woods yet. There is still much work to be done.

Responsive web design is for the user. Not the developer. If the web was made for developers every website would just be a white background and text!

So, these next few tips are written with the user in mind. For starters, users are used to only scrolling up and down. Your page should only have them scroll to the left or right in VERY special cases. To avoid horizontal scrolling, look at this page:

A page that does not avoid horizontal scrolling

What do you mean that doesn’t avoid horizontal scrolling? Looks fine to me!

If you are viewing this on a computer you may be thinking that. Time to use our Development Tools. On a mac press CMD+Option+I (or View -> Developer ->Developer Tools). There is an option to emulate your browser as many different devices, including one with your own custom screen size! The button to access this feature is located here:

Which opens up a view below and a drop box. To set a custom viewport you can select the “responsive” option (sound familiar?) or select one of the many templates they have for popular devices. If you look at the page as a Galaxy S5, you will see that the fixed-width is in fact causing a horizontal scroll and cutting off part of the element! Even with the viewport changes!

CSS:
 article {
width: 344px;
}

Fortunately this is easily rectified. In order to avoid large fixed-width elements you can use relative values (75%, 42%, 100%) rather than absolute values (344px). Using relative values sets the width of the element relative to the containing viewport (or parent element).

CSS:

article {
width: 85%
}
Ok I get it, all that just to avoid horizontal scrolling. Can we do something cool please?

Fine. Check this out and play with the page using the Developer Tools I mentioned above. Notice how the page changes as we resize the screen? I’ll get into that in my next blogpost.