How to Create a Responsive Website in about 15 Minutes

The buzz around responsive websites has been going on for several months now, and a lot of websites are already responsive, or underway. You know what that means? Today I will teach you how to create a responsive website.

If you follow 1WD on Facebook or Twitter, then you already know that we’re already preparing for an explosive design, which includes being responsive. Watch out for it!

  • Tutorial Level: Beginner
  • Skills Required: Basic knowledge in HTML and CSS
  • Completion Time: Approximately 15 minutes
  • Warning: This tutorial is targeted towards beginners, but it can also be for designers and developers who want to have fun!

By the end of this quick tutorial about responsive design, you will already be on your way to web stardom, and by that, I mean, you’ll be ready to convert and create responsive websites!

Are you ready? Show me your war faces! Roaaar!


Build Flat Responsive Website from Scratch – Complete Course


Update 2013: Responsive Website Video Tutorial

Preparing for the Responsive Website Tutorial

I promised that it will only take about 15 minutes to create a responsive website, and I will hold true to my word. Only, we shall start slow and small. We will start by creating a simple single-page website. Cool? Okay!

Frameworks you can use:

What is Responsive Design?

If you are fairly new to the term, then we have the perfect reading materials for you!

Our Goal

By the end of this tutorial you will end up with something similar to the page above. It is a very plain design, but it will do the trick for now. It is fairly easy to clone the image as seen above, but the main goal here is to make it responsive. To make the website respond based on the size of your device’s screen size.

Try opening the demo on your smartphone and you will see this:

This is what Foundation can do along with several other frameworks that focus on making websites responsive for mobile devices.

You will find all the files, including the images, in the download link below.



Before moving on, download Foundation and unzip it to a folder where all of your files for this tutorial will be located. It should look like this:

Open index.html and see several elements blasted in one page as a demo. We won’t use everything you will see in it, but you can learn a lot from it. Now, delete it or move it somewhere else so that we can start from scratch.

Our Goal:

Our goal is to create a webpage which has the basic areas of a website: header, body, sidebar, and footer. Of course, everything will be responsive, from images down to text and elements placement.

Step 1: Understanding the Foundation

Okay, it is already given that we will use the structure above, but how will we translate that to HTML? Easy!

First, you need to understand a few things about Foundation and how layouting works. It uses 12 columns to define the width of each “section”, which is derived from foundation.css’ width of 1000px. So, if we write:

<div class="row">
<div class="twelve columns"></div>
</div>

The above code would mean that in this certain row, you will occupy twelve columns with the width of 1000px. While on the code below:

<div class="row">
<div class="twelve columns">
<div class="six columns"></div>
<div class="six columns"></div>
</div>
</div>

We placed two “six columns” inside of “twelve columns”, this would mean that “six columns” will occupy 50% of the width of “twelve columns”.  The same is true for other number of columns:

<div class="row">
<div class="twelve columns">
<div class="row">
<div class="seven columns">
<div class="row">
<div class="twelve columns"></div>
</div>
</div>
<div class="five columns"></div>
</div>
</div>

For “seven columns” we placed another row inside which occupies “twelve columns”. This means that the “twelve columns” will take the maximum width of “seven columns” and divide it into “twelve columns”. It’s a nest of rows and columns, which is important for our goal layout. Now that rows and columns, and nested columns, have been explained, let’s move on to the main show.

Step 2: Laying Out the Foundation

Using your favorite text editor, create a file named index.html then add the following at the very beginning of the file:


<!-- Rean's note: if you're wondering what are these items below, you should follow the link below -->

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->

<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->

<!--[if gt IE 8]><!--> <!--<![endif]-->

  <!-- Set the viewport width to device width for mobile -->

  Welcome to Foundation

  <!-- Included CSS Files -->

 <!--[if lt IE 9]>

    				<link rel="stylesheet" href="stylesheets/ie.css">

  <![endif]--><script type="text/javascript" src="javascripts/modernizr.foundation.js"></script>

  <!-- IE Fix for HTML5 Tags -->

 <!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

  <![endif]-->

The above code is where we deal with the evil of Internet Explorer. It is also where we call on to different stylesheets which are necessary to make the whole thing responsive and run on mobile devices. It comes with Foundation. Then type the following code:

<div class="row">
<div class="twelve columns">
<h2>Header Twelve Columns</h2>
</div>
</div>
<div class="row">
<div class="twelve columns">
<div class="row">
<div class="seven columns">
<h3>Body Seven Columns</h3>
</div>
<div class="five columns">
<h3>Sidebar Five Columns</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h2>Footer Twelve Columns</h2>
</div>
</div>

I have already explained what these “rows” and “twelve columns” are above.

Tip: if it’s not clear to you why we should wrap the sidebar and body with “twelve columns” you can try removing it and see what happens!

By now it should look like this:

We haven’t added stylings yet, but you can already see how it jives with our goal. I’m not much of a designer but I will do my best to make this look amazing.

Wait, wait, wait! What’s that navigation bar, you ask? As I have mentioned earlier, this is one of the beauties of Foundation. It has extensive documentation that will teach you how to properly use forms, navigation, buttons, grids, CSS, and other elements covered by Foundation.

Everything is basically done now, all we need to do is add some images and paragraphs and design the whole thing. If you followed this tutorial, then by now you have already created your first responsive web page!

Step 3: Adding Content

This step is needed to actually see how the webpage will look like in its full glory. Copy some Lorem Ipsum and paste it on your “body” div, then insert images using <img> tag and then you’re on your way to becoming a superstar with this!

If you’ll go back and check the demo, you might notice that the background isn’t exactly white, but with a subtle pattern. Choose one on SubtlePatterns and see for yourself which works best.

Step 4: There is no Step 4

Well, actually there is a step 4. The next thing you need to do is study the files you downloaded and start creating your own responsive web page from scratch. There are a lot of other tools you can use aside from Foundation, but the idea is basically the same. Don’t forget to check the documentation!

What do you think about this tutorial? This is my first time writing one, and it may appear messy to experts, but comments and suggestions are always welcome so that we can all improve, right? Start typing now!

Looking for a Great Web Host?

We highly recommend Bluehost!

Rean John Uehara

Rean concurrently served as the Head of Operations and Editor-in-Chief of 1stwebdesigner from 2011 up until Aug 2014. He regularly writes about freelancing, technology, web design, and web development with a little touch of internet marketing here and there.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Vipul Shukla says

    this was great, i didn’t knew much about html5 and css but as a beginner i found it very helpful and enjoyed learning throughout. thanks man..
    u made my interest stronger ..

  2. Ivan says

    The files are wrong , the net is full of bad tutorials like this if u wanna see people learning fix the files.

  3. Paul Mountney says

    The links in this ‘tutorial’ are not the ones that are in the source code of the test page.

  4. says

    Wow, amazing tutorials! It will take me more than 15-minutes though! Just came across your site today and I will be bookmarking it!

    • Website break scanner says

      Can someone PLEASE give me the link to the actual demo? The download the guy gives looks horrid and its hard to follow compared to the demo. I had to save as the demo but i feel like its still missing some things. Please help

        • Website break scanner says

          Yes that is the link that I used, however it isn’t laid out properly for the tutorials sake. Its hard to explain I guess, but basically all the files are in one folder and not organized, which is my main issue. If anyone still has the old version of the demo that LOOKS like the test.html file that would be great lol. The tut is excellent. I just need the correct files so I can follow.

          • says

            You can post a screenshot, you know. Are you using an old version of IE? I’ve checked it on Safari, Firefox, and Chrome on Mac and they’re all fine. Same goes for Windows browsers.

          • Website break scanner says

            So this is what I was talking about. To better explain what I mean, This is the file structure of your demo, I clicked on “Download File” which should get me the Responsive.zip file.

            Opening the folders gives me the following file structure. css, img, and js folders which are organized properly:

            However I click on index.html, and it looks like this:

            As for the test.htrml that you posted recently. That site looks great! Everything looks like it should:

            However the files are just dumped in one folder:

            I know I sound nit-picky in all of this and I could just organize the files myself, but I just wanted to let you know that for those who won’t know how to organize these files, the css, js, and img, it would really help them :-)

  5. Bernard says

    Thank you very much for this inspiring tutorial. I’d been meaning to find out about Responsive web design and your article gave me the kick in the butt that I needed. Downloaded Foundation and was shocked at how easy the whole concept is to understand and work with. Without intending to, I rebuilt one of my large sites in a week and will probably redesign other sites using this technique. Also get to put another skill under my belt. Thanks again!

  6. Luiz Santos says

    Nice piece of collaborative instructions and overview but you may have messed up a little on the image and what would it look like after that. But all in all, really informative. Thanks :)

  7. Francis says

    This article confused me when i went through it step by step.
    If you take a look at the example of how it should look like at step 2, the image is incorrect.
    During the tutorial, you never wrote anything to make the nav bar appear, therefore causing confusion.
    For your next tutorial ( or maybe a better version of this one) try to think of these things and show more steps
    in between with if possible, more screenshots. Still i’d like to thank you for introducing us to the Foundation framework.

    • says

      “you never wrote anything to make the nav bar appear”

      Hi Francis, I actually answered that question because I knew that people will ask me where the Nav Bar came from. Care to take a guess where the answer is? :) Hint: if you read it without skipping, you’ll definitely find it. ;)

    • Francis says

      Ooo i saw it, my bad.
      I understand it alot more right now, i looked at the omage, assuming that i couldn’t continue the rest of the tutorial. I’ll try again. Thank you for your quick reply and cool tutorial.

  8. John says

    Such a substantial article. It does not only help the PRO’s, but the beginners as well. Jargons are not easily understood by any beginner but you explained it well! Thanks for the generous information!

  9. says

    Hi Dainis,
    thanks for your post … what people very often forget about though is, that “responsive design” in the long run has to with useful content, “fulfilling needs” and therefore psychology and marketing. Wasn’t the purpose of your thread, so never mind ;-).
    Best regards from Germany
    Udo

  10. says

    I just finished reading this article and the comments posted here are really useful in resolving my queries related to responsive design. I like the way you explained this article and especially replies to comments are awesome. I appreciate your work Dainis and John, looking forward for more informative articles.

    • says

      Oh thank you John, for kind comments! All praise goes to Rean, he’s been crazy with responsive lately :) Digging deep! Glad you enjoyed tutorial!

  11. Valt says

    amazing tutorial, it make me more fun to play with strategy for creating my first responsive website….thanks

  12. Tanveer says

    Mr. Dainis Graveris and Mr. Rean John.. can you show a tutorial for the fluid html design.. i think so this is the word… anyways i know you’ll be understand

  13. peter says

    The demo is different to the download..it doesn’t have the nice menu bar; is that why it only took 15 mins?

  14. says

    Great tutorial. First of all I want to thank you for mentioning so many great resources on Responsive Design. Secondly, you explained everything clearly. I got a query, after a little bit of research, I came to know that some are considering only 2-3 screen resolutions, while some others are creating responsive design by considering some 5-6 media screens. Can you explain which of these two is more preferable ?

    • says

      Bharat, most websites are interested to get responsive to look good on mobile, tablets and big screens on computers. You can design different transitions, like even 5-6, but i feel 3 is more than enough. Check this article for inspiration – http://www.1stwebdesigner.com/inspiration/responsive-webdesign-tools-inspiration/

      I am pointing especially on inspiration section, where you can use Firefox Nightly or any other tool to change screen size, or just expand your browser screen from full to small and you’ll see how many transitions other sites have..and have a good understanding how many transitions make sense for your designs. Hope it helped, let me know, Bharat!

      • says

        Things becomes more complicated when you dive deeply into developing with rwd. Some devices need type size adjustments because of high ppi, so we need to use device-pixel-ratio media query or device-width as an alternative.

        And this is just a bit of all things which should be considered when developing for both desktop and mobile expirience.

        • says

          Roman, of course – as it is with everything. If you want to go real deep, it will become a bit scary at first, because there are so many devices, so many solutions you need to find in order to create fully functional and responsive website, but I think this is nice place to get started if you are becoming familiar with responsive sites!

  15. Luis says

    Hey thanks for the neat tutorial. Personally what Framework would you recommend using?

  16. Ricardo Nunes says

    That’s a good tutorial for responsive site but i have to agree with Rod, in 15 min it’s difficult…
    Well done!

  17. Kim Fox says

    Great tutorial! I am getting ready to make my first responsive website (it being all the rage right now) and this article is very helpful!
    By the way, your writing is great :) very fun to read.

  18. Tanveer says

    got it ice but once thing i want to know what if we had to make a big site into mobile version like carshop.com shall we use this type of approach or we should make a separate site for mobiles.
    Thanks,
    Tanveer Singh

    • says

      Hi Tanveer! It actually depends on you. But seeing that carshop.com has quite the functionality, they might as well develop a separate site for its mobile version.

      • Tanveer says

        Thanks sir so i will start doing a separate site for this.. Thank you very much :)