Responsive Web Design – the 101

You’ve probably heard it somewhere in conversation with other web developers and designers. It’s one of those buzz words that make you almost instantly search for your phone or computer and Google it for an easy, descriptive term that will familiarize you with it.

The term I am referring to is Responsiveness or more prominently known as Responsive Web Design.

For the record, it has nothing to with people when they don’t respond to your calls or texts and it certainly doesn’t refer to you un-attentive kids tweeting away on their phones (just kidding..).

Responsive Web Design refers to how your website looks on various screens and changes accordingly. Basically, how it ‘responds’ to each individual screen and adjusts the layout and content on whatever screen it is being viewed.

You wouldn’t have the same layout on a Desktop computer as you would on a Mobile phone and vice versa. If you tried to fit all your content and layout for a Desktop computer into a Mobile phone your content would be way to minimized for any practical reading and your users would be forced to zoom in and constantly move the screen from the left to right to view content. Not good.

It’s in your, your client’s and your client’s clients best interest to have a website where, first off, you don’t need to to scroll right to left to read content and secondly need to zoom in to do so. Additionally Google actually ranks your website lower in it’s search ranks if you don’t have a mobile friendly website.

responsive

What you shouldn’t do vs. What you should do

When the internet was made widely available, we didn’t have smart phones that allowed us to view content on them. Remember the good ol’ days of the brick Nokia phones and flip-phone Krazers? Good Times. Anyhow, once iPhones, Androids and etc. came more into everyday use for everyone, people started viewing websites on mobile and inevitably they had trouble viewing them because they were not designed for smaller screens. Surprise, surprise.

Hence Responsive Web Design came into play and we’ve been using it ever since. In fact, it’s now considered an essential part of web design and not a separate entity on it’s own. As a Web designer and in some cases a Graphic Designer or any role that involves Designing for Web you’re going to need to know this stuff for sure, in fact you won’t survive without it.

——————————————————————–

So now that we know what it is, how exactly does this work?

To simply put it, you add additional rules in CSS called Media Queries.

Basically when you hit a breaking point in your viewport and your content starts to move around, effectively breaking your layout, you would add your first Media Query.

SIDE NOTE:

IT IS ALSO BEST PRACTICE TO BUILD FROM MOBILE FIRST.

A basic Media Query looks something like the following:

@media only screen and (min-width: 768px) {

body {
background-color: #F00;
}
}

What this is reading is that when the screen width is more than 768 pixels, the body background will change to #F00 a.k.a Red. Any width less than that will revert to it’s default color state as defined in your initial CSS rule for the Body tag.

To break down the rules:

1) You start with @media which is basically saying ‘Hey screen, I’m about to start a Media Query’.

2) Only Screen refers to the actual screen you are viewing. When Media Queries were first being used there was an option for Print, Handheld and other avenues like that but eventually there were so many screen sizes that Only Screen now covers everything under the sun.

3) and (min-width: 768px) is the condition that must be met in order for the Media Query to work. You can have additional conditions by using the same format as this. If you have two conditions with the word ‘and’ between them then both conditions must be met in order for the Query to take effect. You can also instead of adding an ‘and’ between conditions and adding a comma instead. This will make sure that if either of the conditions are met, then the Media Query will take effect.

After your Media Query, you add curly braces (like a function!) and add in your CSS rules inside of it, almost like a separate Stylesheet. For semantic reasons you should add Media Queries in either the same stylesheet as your content’s, only after or in a separate stylesheet so you can find them easily if you need to adjust any rules later on.

Media Queries also don’t have to refer only to width in pixels but height as well, landscape or portrait layouts and even Screen resolution. You can also add for certain width and/or heights like this:

@media only screen and (min-width: 768px and max-width: 1024px){}

This effectively will only apply any styling within the curly braces when the width is between 768px and 1024px.

You can add multiple Media Queries inside of a Stylesheet if you’d like as well. In this case I had made a Media Query for a Laptop. If I wanted to make one for a Desktop of Wide Screen layout, I would add another condition that would have a min-width: 1400px and add my rules inside of that.

Since I’m on topic for the standard layouts for Mobile, Tablet, Laptop and Desktop, the following minimum width dimensions are the general layouts for screens:

Mobile: 0 – 480 px
Tablet: 480 – 768 px
Laptop: 768 – 1500 px
Desktop and Wide Screen: 1500 and up

responsive

Mind you, apparently there are over 17 000 screen sizes available in the world as different phones and devices are built and released every year. I can’t cite my sources on this one but I’ve heard this from people (legitimate, I swear!).

With that in mind, you’re obviously not going to make 17 000 Media Queries for a website or app hence why you should follow the general dimensions above for your website. In order to minimize how much Queries and additional rules you’d need to make it’s always best practice to create a good layout beforehand with as little extra content if possible. If you design a good prototype and follow a good layout you should have an easy time making your website responsive and easy to navigate and read.

There’s much more to cover still (Fluid vs. Fixed layouts, Rem and Em font sizes, Bootstrap, 960 Grid) but for now, I hope you can take something from this and try some basic stuff for yourself and go from there.

Have a good long weekend!

– Mike

Advertisements