How to Make a Website Responsive

  • 11 Read Time(minutes)
  • 3/5 Difficulty
  • <> Application

All right, so we have a ready website coded in HTML & CSS. In this tutorial, we’ll convert our previously designed and coded retro-style webpage responsive, thus learning how to make a website responsive. First, we’ll take a quick look at the theories of responsive and mobile-friendly web design; just a quick comparison to better understand what they mean. Then, we’ll jump right in, and start re-coding.

[alert type=”alert-success”]This tutorial was revised on 5th March 2013[/alert]

This tutorial is Part 4 of 4 of a Tutorial Series.

What you’ll need…

This .zip file – that contains the HTML and CSS files (plus the images folder) created in the last tutorial.

So, what is Responsive Web Design?

The world is talking about Responsive Web Design all day. The idea first came out of Ethan Marcotte‘s mighty mind. When we talk about Responsive Web Design, we think of designing and developing websites that are able to react, “respond” to the users’ interactions and detect what medium the site is being viewed on, to provide the best possible user experience. In order for a website to be responsive, it needs to meet 3 core front-end related criterias:

  1. Flexible, grid-based layout
  2. Fluid images and media
  3. Media queries provided by CSS3

In our case…

We don’t have any huge-sized images that would need to be fluid. We will create a fluid grid and we will use meda queries – that’s okay, but we’ll skip the part of including responsive images… since we don’t have any. Simple, isn’t it? :)

Before we touch anything…

In this tutorial, we’ll make use of CSS3 Media Queries. If you don’t know what they are or how to use them, or just want to brush up on your skills, please visit my Quick-Tip that will teach you how CSS3 Media Queries work.

If you’d like to know more about CSS3 Media Queries, please check this article.

Some preparations with the HTML

We need to edit our HTML code just a little, so it can recognize and link the new CSS files to itself. We won’t touch the body, it’s already working properly. Instead, we need to look at the head tag. Currently this is the content of the head:

<head>
	<meta charset="utf-8">
	<title>Responsive Website Project | by SzabokaDesigns</title>
	<link rel="Stylesheet" href="style.css">
</head>

As you can see, there is only one single stylesheet reference. We need to change this to become “responsive”. As being said earlier, to target different resolutions, we need to use CSS3 Media Queries. (Again, if you’re not familiar with what they are, I strongly encourage you to read my Article on CSS3 Media Queries, before continuing on!)

So for everything to work nicely, we’ll need to combine media queries together to create three separate versions of our website. Let’s modify the code like this.

<link rel="stylesheet" href="style.css" media="only screen and (max-width: 9999px) and (min-width: 481px)" />
<link rel="stylesheet" href="small.css" media="only screen and (max-width: 480px) and (min-width: 321px)" />
<link rel="stylesheet" href="smallest.css" media="only screen and (max-width: 320px) and (min-width: 5px)" />

What does it mean? Simple… If the browser window is between 5 and 320 pixels, it will grab the file called “smallest.css”. If it’s somewhere between 321 and 480 pixels, it must take “small.css”; and lastly, if the browser resolution is above 480 pixels, then it will load the default CSS file.

Oh yeah, and…

One more thing. If you’d like to test the site not only in your desktop’s web browser, but also on your mobile device, you have to add this one line in between the <head> tags.

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

This line resets your mobile device’s viewport to 1.0 scale. If you’ve added this line, you can now test your responsive websites.

How to Make a Website Responsive – The Beginning

We’ve been talking about theory so far. Now for some real action! This is how we want our site to look like in the end.

How to Make a Website ResponsiveThis is a snapshot of the 480px version. To create this, we’ll need to edit our “small.css” file, so open it up in Dreamveawer or your favorite text editor. We’re going to scan through the code and modify it according to our needs.

You would first think that we’ll have to rewrite the whole code, but you’ll be surprised in the end how few elements needed to be changed!

The first thing we need to rethink is the .wrapper class. In the original code, we set a fixed 960px width with some side margins. Let’s adjust these values to auto.

.wrapper {
    width: auto;
    margin: auto;
}

This way, the content wrappers will occupy the full width of the site.

Okay. Next deliquent… the header. In the original code, it has been set to have a fixed height of 200px. We don’t need it here, so let’s adjust it according to this. Let’s also add az overflow:hidden; line, and align its text-content to the center.

header {
    overflow: hidden;
    width: auto;
    height: auto;
    text-align: center;
}

Next, the logo. The logo is an img inserted to the code directly, and we want to center it. Ooh, is it already centered by its container, the header element? Then we have nothing extra to do here, maybe some top padding.

#logo {
    padding-top: 10px;
}

All right. Next in the line is the welcome text. We’ll have to reduce the top padding here, the rest is covered by the header element again.

#welcome {
    width: auto;
    padding-top: 25px;
    text-shadow: 1px 1px 1px #FFEECC;
}

Next one is the H1 tag. Let’s reduce its font size, it doesn’t need to be that big on mobile devices. Anyway, we could also set some other font face to better be compatible with mobile browsers. Maybe later, for now.

h1 {
    font-family: 'Adelle Basic', sans-serif;
    font-weight: bold;
    font-size: 30px;
    color: #4C4949;
    margin-bottom: 5px;
}

And the final thing in the header element is the tagline, which we refer to as “.welcome p“. Let’s reduce this one’s font size as well, and also make it fluid by setting a max-width value (so that the text will wrap inside its element), plus a margin: 0 auto; to make it centered.

#welcome p {
    font-family: 'Century Gothic', sans-serif;
    font-size: 16px;
    line-height: 1.4em;
    color: #665F5C;
    max-width: 400px;
    margin: 0 auto;
}

All right, the header is done. Looking really good in 480p. Let’s see how we can improve the look of the three article elements.

The parent of all articles is the #content div. Let’s reduce the size of its margins a little. We can also get rid of the clear selector, as we won’t be floating anything here.

#content {
    margin-top: 20px;
    margin-bottom: 30px;
}

Okay. The big deal… the article element. It’s already a pretty long one, so let’s examine this one carefully. Being floated doesn’t make sense here; let’s delete that. Let’s set its dimensions to auto. We have to reduce the margins here a little as well… Plus, we can add some border-radius to make it look even cooler. Or not. Your choice! :)

article {
    background: URL("images/content-bg.jpg") top left repeat;
    padding: 25px;
    width: auto;
    height: auto;
    color: #FFEECC;
    margin: 0px 20px 20px 20px;
    line-height: 1.6em;
    text-shadow: 1px 1px 1px #332C29;
    box-shadow: 0px 0px 8px #444444;
    border: 1px solid #5C4E41;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Note that we had an “article:last-child { margin-right: 0px; }” line in the default CSS file. Of course here, it doesn’t have any meaning, hence it’s not needed.

The H2 is the next one in the line. We can amp up the font-size just a tiny bit, because it has a lot of space to live in now. Also, let’s make it centered.

h2 {
    font-family: 'Adelle Basic', sans-serif;
    font-weight: bold;
    font-style: italic;
    font-size: 34px;
    color: #FFFBF2;
    padding-top: 20px;
    margin-bottom: 15px;
    text-shadow: 1px 1px 1px #331B0F;
    text-align: center;
}

Ah, here comes a .separator! Easy job. We’ll use the same image, but with auto width, and some centering margins.

.separator {
    background: URL("images/separator.png") center center repeat-x;
    width: auto;
    height: 2px;
    margin: 0 auto;
}

The images of the articles should remain the same, but they need to be centered, plus while we’re here, let’s add them some bottom space as well.

.articleImg {
    width: 250px;
    height: 150px;
    margin: 0 auto 20px;
}

Almost finished! One key attribute to set is the height of the .articleText classes to auto. They had been set to a fixed value to make all thing equal, now because we’re playing with a fluid grid, we don’t need to be constrained vertically.

.articleText {
    height: auto;
}

The .pSecond elements have a ton of bottom margin, let’s reduce that quickly.

.pSecond {
    text-indent: 20px;
    margin-bottom: 20px;
}

The all-mighty buttons! Nothing to change here, except for the margins. Set them to be centered.

.button {
    text-shadow: none;
    width: 258px;
    height: 60px;
    margin: 0 auto;
    background: URL("images/button.png") top left no-repeat;
}

And… that’s it for the 480p version! All cool!
Have a cup of coffee or tea, take a little break, and we’ll continue on by creating the 320p version.

Going smaller

To create the 320 pixels version of the site, let’s copy the entire content of the 480px file, paste it into a new CSS document, and save it as “smallest.css”. Of course you may use more descriptive file names, just make sure you overwrite the links in the HTML file. I’ll stick with these file names for now.

All right, so the 320p version looks kind of the same as the 480p one, just a little smaller. According to this, let’s edit our freshly created “smallest.css” file.

The first thing we can touch is the navigation. Set the nav ul element’s width to 290px, and reduce the list items’ side margins to 10px.

nav ul {
    padding-top: 16px;
    margin: auto;
    width: 290px;
}
nav ul li {
    display: inline;
    margin: 0px 10px;
}

Also, let’s make the navigation links a bit smaller. Reduce their font-size to 16px.

nav ul li a {
    font-family: 'Century Gothic', sans-serif;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    text-shadow: 1px 1px 1px #332C29;
}

The header is working properly thanks to our previous efforts in the 480px version, so there’s no need to touch anything there. We could set a smaller font size for the welcome text and tagline, but I believe it works there at their current size.

What we need to edit, though, is the H2 size. The word ‘Graphic Design’ splits into two lines in the current state, so let’s reduce the H2 font size to 30 pixels.

h2 {
    font-family: 'Adelle Basic', sans-serif;
    font-weight: bold;
    font-style: italic;
    font-size: 30px;
    color: #FFFBF2;
    padding-top: 20px;
    margin-bottom: 15px;
    text-shadow: 1px 1px 1px #331B0F;
    text-align: center;
}

Also, we need to look back a little, and set the .article classes’ inner padding to a little less, like 15 pixels.

article {
    float: left;
    background: URL("images/content-bg.jpg") top left repeat;
    padding: 15px;
    width: auto;
    height: auto;
    color: #FFEECC;
    margin: 0px 20px 20px 20px;
    line-height: 1.6em;
    text-shadow: 1px 1px 1px #332C29;
    box-shadow: 0px 0px 8px #444444;
    border: 1px solid #5C4E41;
    border-radius: 10px;
}

We’ve set everything else before, so that”s all we need now to make all of the articles working.

One last thing to set is the footer p’s font size to 10 pixels so it won’t wrap in two lines under 320px.

footer p {
    text-align: center;
    font-size: 10px;
    color: #FFEECC;
    padding-top: 29px;
    text-shadow: 1px 1px 1px #332C29;
}

Conclusion

Aaaand, this is it! We are done! We have successfully converted our previous HTML/CSS website to a responsive web page. Great work!

You can view the end result here.

Congratulations! This tutorial series has ended with this part. I hope you liked it and learnt some cool new stuff! See you in 2012!

Share it?

There should be an ad here...

Aaaw, too bad you're using AdBlock. Care to add my Blog to your whitelist, please? Much appreciated!

Written by

Web designer, web developer, UI/UX designer 9-5. Energy drink consumer, video game addict, avid blogger 5-9. Owner of Szaboka.com.

Related Articles

14 Responses

Comments

  • web2feeds said on 2012.01.03. at 16:49 Reply

    Great tut, I decided to share your post. Thanks a lot!

    • Szaboka said on 2012.01.03. at 22:08 Reply

      Thank you for sharing! I'm glad you liked it. Be sure to subscribe and check back often to stay updated! Also, feel free to browse our other tutorials.

  • Billy Corcal said on 2012.09.01. at 7:31 Reply

    It if possible get a code of your fabulous contribution, I try it but something wrong, im only copy the code but have some errors. tnks a lot,

    • Szaboka said on 2012.09.01. at 9:07 Reply

      Hey! There is a link on the bottom of the post to view the end results, but here it is again: http://blog.szaboka.hu/wp-content/html/retro2/ Right-click on this page and click View Source. There you have the HTML code. Click on the 3 CSS links on the top of the source code to get the CSS. Have fun!

  • çay bardağı said on 2012.09.19. at 9:04 Reply

    thanks man great Responsive design.

  • Fahim Reza said on 2013.02.07. at 6:55 Reply

    I find something like that now get it. It's great tutorial for beginner and also i am beginner in responsive technology. Please share with us more tutorial about responsive technology. carry on....... Thanks, Fahim Reza

  • jam tangan murah said on 2013.11.15. at 22:09 Reply

    Interesting read. I don't think anyone can afford to not be responsive in these times.

  • Rajesh said on 2014.04.11. at 15:40 Reply

    Wow once again i found this site nice work. and completely useful tutorials what i rely finding for learning, "Big Thanks" for taking time. pl do not mind my English is not good . i from india ....

Join the Conversation

Captcha: 8 × = sixty four