Responsive websites in 2015

Challenge yourself with flexible containers, different media queries and naturally expanding assets.


Intro

I remember back in 2012 when Apple first released the Macbook Pro with a Retina Display. Excitement was in the air when the pixel-density era had officially started. I remember thinking that I needed to add multiple rule-sets for different densities, resolution and devices. I remember thinking that coding was ruined… Thank god that was not the case, everything just became easier instead.

Recently a developer friend of mine asked me to help him with making his site responsive and I thought I might as well share some small tricks with you guys as well.

Disclaimer: First I’d also like to mention that this guide is written for people who are already familiar with coding. I’m only showing a tiny portion of the css in this guide and none of the html, because I expect you to know how to write the html on your own. Let’s do this.

Nerd-talk:

If you are a web developer in 2015 you probably know everything about em, rem, font-size and the reality that a css-pixel is not the same as a device pixel.

Because browsers on screens with higher pixel-density adjust the font-size and pixel size accordingly for readability. Making a 1000 pixel wide website functional on a 2880 pixel wide screen because it boosts up the size of each pixel.

A lot of people know this and still writes hard-coded pixel widths in the css. This might change after you read this. Open up your favorite text editor and let’s get started.

Step 1

Navigate to your stylesheet.

I make sure to always put font-size: 100%; in my body tag as the first thing I do in a new project. Making sure the font size work accordingly with the browsers default font size. Normally also writing width: 100% and height: 100%, to make sure that I can use them as a guidance div for my other containers(more in part 2). Typically like this:

html, body {
font-size: 100%;
width: 100%;
height: 100%;
}

Read more here: http://stackoverflow.com/questions/6803016/css-100-font-size-100-of-what

Step 2

Containers

I like to make sure that my websites use as few rules(media queries) as possible and this means having more flexible containers in your structure.

We know that our doc is 100% wide and normally we don’t want our content to take up the full width.

Previously the standard width of a website was 1024px, ain’t no need for that anymore.

So what I usually do is:

A full width header with 10% padding on each side(the padding makes it full width):

header {
height: 60px;
width: 80%;
padding: 0 10% 0 10%;
}

and a container that is 80% wide and centered:

.cont {
width: 80%;
margin: 0 auto;
}

And a footer with the same structure as our header:

footer {
width: 80%;
padding: 0 10% 0 10%;
}

Width 80% works because it grabs the value of it’s parent, in this case resulting in 80% of our 100% wide body.

We now have a basic top to bottom website structure that is flexible. The width will always be 80% of the device width and the content grows vertically not horizontally. So far you haven’t locked yourself up to any pixels!

Step 3

Here comes the trick

We don’t always want to have our content being 80% wide, that would be enormous on gigant screens. So now let’s create some super simple rules using a little trick. Add the following to your css.

Small screens:

@media screen and (max-width: 40em) {
   .cont {
width: 100%;
}
}

Max-width 40em, making the rule work for everything less than that.

Big screens:

@media screen and (min-width: 80em) {
.cont {
width: 60%;
}
}

Min-width 80em instead of max-width 40em

This one is a little bit more complicated to explain. But basically it works because one em unit results to the default font size of the browser you are viewing the page in.

For example 1em equals 16px in a Firefox desktop browser. So 80em results in 1280px in that browser and 80em on iOS Safari is of a different size, making the rules flexible according to the device where it is viewed and once again we haven’t locked ourselves up to any pixels. Isn’t that amazing?

So now we have a website structure where:

Viewed on big screen: content is 60% of the device width, no matter the resolution.

Viewed on a normal screen: content is 80% of the device width, no matter the resolution.

Viewed on a small screen: content is 100% of the device width, no matter the resolution.

You can use these rules for a bunch of things, the content can be aligned left or right. Be as big as you want it, the header can rather be a sidebar or whatever you want. The basic principle is to use percentages as often as possible for your containers.

Challenge yourself with not setting widths in pixels for other things as well, for example buttons. Try to use natural paddings and margins for your advantage instead.

A simple flexible way of a sidebar oriented design could be the following:

.sidebar {
width: 35%;
height: 100%;
float: left;
}
.cont {
width: 75%;
float: right;
}

Thank you for reading, hopefully I contributed to some learnings. ☺