Responsive Web Design – The Bible

Posted on November 6, 2015 10:48 am in
Share on Facebook0Tweet about this on TwitterShare on Google+22Share on LinkedIn4

Responsive web design is a must with any website, online store or application. Not so many years ago we were talking about ‘The rise of mobile and tablet use’ but that time is here and it’s not a hypothetical anymore. Everyone uses mobiles for everything, I know this isn’t news to you but this is the reality and the importance of the article.

Building responsive web design makes or breaks your website and without it, bounce rates would be through the roof along with conversions would be none existent.

In this guide I’ll be sharing everything I know, and if there’s anything I’ve missed, please feel free to comment. I do love a good discussion.

Responsive Web Design Statistics

This might sounds like the boring part, but without learning the trends and statistics of mobile use, we will never now how effective responsive web design can really be.

Just look at this info-graph from globalwebindex.net

responsive web design statistics

The main message here is that 80% of internet users use a smartphone. Think about the impact it would have on your website to literally lose that percentage or users.

Building responsive web design

Ok so I think we all now understand the importance of responsive web design, now lets find out how to actually make websites responsive.

There are many different ways, one simple way is to use responsive frameworks but it’s simple enough to use your own framework through simple media queries (Which we’ll get to later in the post).

There are even websites that can make your websites responsive for you, which personally I would avoid. Quick fixes aren’t what we need. Well thought out and clean coding is the key here to convert users in to clients.

Responsive web design frameworks

A framework is basically a pre-built package for web designers to use as a tool to build on. The packages will come with all the JS, CSS, HTML documents you need to make responsive elements by adding simple classes to elements.

These are used as a time-saving device, and they’re absolutely essential for time-saving responsive web design.

I’ll make a list of the most popular, but first I’ll start with my favourite:

Bootstrap – http://getbootstrap.com/

bootstrap responsive web design

 

Bootstrap is fantastic for building with. Managed through Github by some really talented developers, it’s one of the most widely used complete frameworks out there.

Skeleton – http://getskeleton.com/

 

skeleton responsive web design

Painfully lightweight and simple to use, Skeleton is perfect for using only the necessary files to build responsively.

Foundation – http://foundation.zurb.com/

foundation responsive web design

Foundation is a more comprehensive responsive web design framework that can be used for web design, emails and even applications.

DIY Responsive Web Design

Ok so lets look in to building your own responsive web design framework. With help from w3schools.com, we can see the basics of coding responsive web design.

Viewport

HTML5 lets web designers control the viewport by using the <meta> tag.

You should include the following <meta> viewport element in all your web pages:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Responsive Web Design Grid

First ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements.

Add the following code in your CSS:

* {
box-sizing: border-box;
}

The following example shows a simple responsive web page, with two columns:

Example
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}

The example above is fine if the web page only contains two columns.

However, we want to use a responsive grid-view with 12 columns, to have more control over the web page.

First we must calculate the percentage for one column: 100% / 12 columns = 8.33%.

Then we make one class for each of the 12 columns, class=”col-” and a number defining how many columns the section should span:

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

All these columns should be floating to the left, and have a padding of 15px:

CSS:

[class*=”col-“] {
float: left;
padding: 15px;
border: 1px solid red;
}

Each row should be wrapped in a <div>. The number of columns inside a row should allways add up to 12:

HTML:

<div class=”row”>
<div class=”col-3″>…</div>
<div class=”col-9″>…</div>
</div>

The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns does not exist. To prevent this, we will add a style that clears the flow:

CSS:

.row:after {
content: “”;
clear: both;
display: block;
}

We also want to add some styles and colours to make it look better:

Example

html {
font-family: “Lucida Sans”, sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}

Media Queries

Media queries are where the magic happens. You can see an example below, where the CSS in the media query will ‘kick in’ if you like when the screen size goes below 768px.

@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*=”col-“] {
width: 100%;
}
}

You can also replace ‘max-width’ with ‘min-width’ to apply stylesheets to screen sizes over the desired pixel size.

You can even use portrait and landscape queries:

@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}

Responsive web design testing

Here’s a quick list of ways you can test your new expert knowledge of responsive web design.

Google inspect element – FREE

Screen Shot 2015-11-06 at 11.45.37

Google’s developer tools are a fantastic (and free) way of testing for various devices. And best of all, you can test the code live as you go.

Browserstack – https://www.browserstack.com/responsive – Starting at $29 per month

Browserstack responsive web design testing

Browserstack is one of the most popular web applications for testing across platforms and different browsers.

Browserling – https://www.browserling.com/ – Free!

 

Screen Shot 2015-11-06 at 11.54.01

Browserling is a browser testing platform but also works with responsive testing. It’s free but is limited unless you sign up for a paid account.

Conclusion

Responsive web design really is an art, and it really is fun when you get in to the groove of things!

It isn’t rocket science but done correctly, can make or break your website.

If you liked this article, please share this below or recommend this to other developers and if you have any suggestions or questions, please comment below.

 

Share on Facebook0Tweet about this on TwitterShare on Google+22Share on LinkedIn4
< Previous Post

Leave a Reply

Your email address will not be published. Required fields are marked *

I’ve been a freelance web designer since the age of 10 and I’ve learnt a few things along the way. I’ve been brought up with the internet and how to create with it. From this, I’ve got over 12 years experience in the web design industry which is unique.

Now I specialise in WordPress and responsive web design. I chose WordPress as it is the most user friendly and diverse CMS system out there and everything I make is responsive as standard. As a freelance web designer, I’m always looking at staying ahead of the game.

I specialise in responsive Wordpress websites and pixel perfect designs.
"The product has turned out to be truly unique and exactly what I wanted, both aesthetically and functionally. I cannot begin recommending him enough for any developing project, he's just the best!"
Katy Kann
View Project
Let's make your vision come to life
I've put together an easy form to get us started
Let's go
Freelance Web Designers in the UK
Tommy Leyland
×