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!
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 words. Only, we shall start slow and small. We will start by creating a simple single-page website. Cool? Okay!
Frameworks you can use:
Foundation - we will be using Foundation for this tutorial because it’s one of the simplest to use and has a very good documentation.
1140 Grid - quite similar to Foundation and other frameworks, definitely worth the look.
Twitter Bootstrap - one of our contributors, Ranjith Kumar, has written a couple of Twitter Bootstrap Tutorials which you will definitely find helpful.
Less Framework
Adapt.js
What is Responsive Design?
If you are fairly new to the term, then we have the perfect reading materials for you!
Introduction to Responsive Web Design
A Brief Overview of Responsive Design
Ultimate Guide to Responsive Web Design: 55 Stunning Tools, Tutorials, and Examples
1WD’s Responsive Website Design eBook - 30% discount if you share it!
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 focuses on making websites responsive for mobile devices.
You will find all the files, including the images, in the download link below.
Download File View Demo
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 a 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:
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:
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:
For “seven columns” we placed another row inside which occupies “twelve columns”. This means that “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:
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:
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 an extensive documentation that will teach you how to properly use forms, navigations, 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 superstart 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!