How to Make a Completely Responsive Website Quickly

In today’s blog post, I’m going to show you one way you can make a completely responsive web site with six pages while only coding one HTML file and one CSS file! I will also demonstrate how to make a horizontal responsive navigation menu for your site. If you want a vertical responsive menu, you can adapt the code accordingly yourself. This tutorial also demonstrates an alternative to using image maps as I believe the method I use here for navigation menus with images works better than image maps. The advantage to using an image or several images for your navigation menu is that they respond better at different screen sizes than text does.

Here’s a link to the final product. Note that I used a very plan image for the navigation text, but you can use any type of image you want for yours. I also used a single image where you could use one for each navigation link with a little modification of the code. I am trying to say that this demonstrates the code only and the look and feel you will need to make your own because mine is ugly as it is for demonstrating code only:

http://jafty.com/ResponsiveSite.html

Using Divs Instead of Image Maps

While this tutorial is technically about doing a responsive website with a image for a navigation menu, this exact same method can be used in place of image maps because, if you’ve tried to make a responsive page that has an image map in it, you know it doesn’t work well.

Building a Responsive Navigation Menu

Starting at the top of our page, the first thing we will do is build our .html file with a top navigation menu. Okay, lets’ start our HTML:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="page">
<div id="header-menu-overlay">
<img src="topnav0map.png" style="width:100%;"  border="0" alt="top navigation menu"/>
<div>
    <div>
        <div><a href=""></a></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</div>
</div>
</body>
</html>

To follow along with the tutorial, copy and paste the above code into a new notepad document and save it as test.html. The first div includes an img tag in it as you can see above. Here is the actual image to give you a better idea of what I have done here. So “topnav0map.png” refers to the following image:

topnav0map.png:
topnav0map

Again, if you’re following along, right click on the above image and save it to the same directory as your test.html file. I put the image in a blue background here so you can see it because it is mostly white over a transparent layer done in Photoshop. The reason I use an image here is because it is responsive when you set the width to 100% and height to auto. This is about when I got the idea for an image map to link the items in the nav as you see them in the above image, but quickly found out that image maps do not resize well when changing either the page size or the zoom level when looking at the page live. therefore I used divs as they are more responsive when used properly with percentages as you’ll see below when I get to the CSS part.

Responsive CSS Layout

The most important part is probably the responsive CSS code. Here is what I used:

#page{
position:relative;
width:100%;
max-width:900px;
background-color:#222288;
margin:0 auto;
min-height:1200px;
margin-top:25px;
}

.header_menu_overlay{
position: absolute;
top: 100px;
left:0px;
width: 100%;
min-height: 30px;
text-align: center;
z-index: 99999;
}
.navwrap{
top:-20px;
min-height:27px;
position: relative;
}

.nav_item_wrap{
position:relative;
width:100%;
max-width:1125px;
height:27px;
border: 1px solid brown;
margin:0 auto;
}

.nav_item{
position: relative;
border: 1px solid red;
height: 33px;
display: block;
float: left;
z-index: 999;
}

.nav_item a{
width: 100%;
height: 100%;
position: relative;
display: block;
}

.nav1{
width: 7%;
margin-left: 9%;
}

.nav2{
width: 10%;
margin-left: 1%;
}

.nav3{
width: 10%;
margin-left: 1%;
}

.nav4{
width: 20%;
margin-left: 1%;
}

.nav5{
width: 19%;
margin-left: 1%;
}

.nav6{
width: 10%;
margin-left: 1%;
}

.pg{
position:relative;
width:100%;
max-width:900px;
min-width: 225px;
background-color:#8a1734;
margin:0 auto;
min-height:600px;
margin-top:125px;
}

First, I used the “page” div as a page wrapper by setting a standard 900px width which you may adjust to your needs. I also set width to 100% which is very important for responsive designs, but also notice the max-width is set to 900px this is so your page won’t go crazy-wide when you open a large browser window on a PC. If you want to always cover the width of the screen regardless, then you could remove this, but I recommend using a maximum width myself for most scenarios. Next I’ll include a short description for each CSS declaration after “page” which I just explained:

  • header_menu_overlay – is used to position the overall navigation menu where you want. You’ll see I decided to put it a hundred pixels from the top of the page, but you can put yours wherever you need it even at the bottom of the page for a footer menu if that’s what you need. the header-menu-overlay div is the one that holds the image as well as the rest of navigation divs. Be sure to set the width only of the image in this div and set that width to 100% so it is responsive.
  • navwrap – is the div that wraps the other divs we will use for our links. we set it’s position to relative and top to a negative number to force it on top of the image above it.
  • nav_item_wrap – wraps around the individual menu items and has a margin of “0 auto” so it centers the group of menu items to the rest of the page nicely.
  • nav_item – this class is set to all of the navigation item divs and is used to set their height, display and to float them left which is important for responsiveness.
  • nav_item a – is a style definition for the anchor/link tags inside of the nav_item div. Without this the links will not work. It sets the width and height to 100% of the containing element. You have to set “position: relative”, width and height for this to work.
  • nav1 – nav6 – the next six CSS declarations are used to set each individual menu item’s width and margin-left properties since they can all be different.

Add CSS Classes & Content to HTML:

Okay now we just need to add the classes above in the proper spots in our original HTML code and add some content for each page so that your new HTML page looks like this:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body>
<div id=”page”>
<div id=”header_menu_overlay”>
<img src=”topnav0map.png” style=”width:100%;” border=”0″ alt=”top navigation menu”/>
<div class=”navwrap”>
<div class=”nav_item_wrap”>
<div class=”nav_item nav1″><a href=”#pg1″></a></div>
<div class=”nav_item nav2″><a href=”#pg2″></a></div>
<div class=”nav_item nav3″><a href=”#pg3″></a></div>
<div class=”nav_item nav4″><a href=”#pg4″></a></div>
<div class=”nav_item nav5″><a href=”#pg5″></a></div>
<div class=”nav_item nav6″><a href=”#pg6″></a></div>
</div>
</div>
</div>

<div class=”pg”><a name=”pg1″>page 1</a>
<h1>Place all of your page 1 content here…</h1>
</div>

<div class=”pg”><a name=”pg2″>page 2</a>
<h1>Place all of your page 2 content here…</h1>
</div>

<div class=”pg”><a name=”pg3″>page 3</a>
<h1>Place all of your page 3 content here…</h1>
</div>

<div class=”pg”><a name=”pg4″>page 4</a>
<h1>Place all of your page 4 content here…</h1>
</div>

<div class=”pg”><a name=”pg5″>page 5</a>
<h1>Place all of your page 5 content here…</h1>
</div>

<div class=”pg”><a name=”pg6″>page 6</a>
<h1>Place all of your page 6 content here…</h1>
</div>
</div>
</body>
</html>

Now you should be done and you have a completely responsive website in no time at all! All you need to do is go back and add page code to each page’s section. Simply replace the existing code inside of the H1 tags to make your page headers and add more content below each to build out your content. If you followed the tutorial to the tee, your page should look like my finished example page here:

http://jafty.com/ResponsiveSite.html

Summary

So if you followed this tutorial, you should have learned quite a bit about responsive design. Not only should you be able to grasp how to develop a navigation menu from this article, but you should now be able to understand how to replace an inline image map with responsive divs and even how to make an entire responsive website using the techniques demonstrated here. Remember to use percentages instead of pixels for widths and even heights wherever you can and your design will be responsive and evenly laid out for all devices. Congratulations, you are now a responsive developer if you understood all of this. Good Luck!

 

The Basic Strategy of Responsive Web Development

Okay, as the title indicates, this is an instructional article about responsive development, not design. We assume at this point, you have a PSD Photoshop design already made and your goal is to DEVELOP that design responsively and responsibly. No pun. So the keywords here are DEVELOP and RESPONSIVE. I like to say that adding the responsive factor into a webpage is the developer’s job and not always the designer’s job so much. In some cases, where the developer is also the designer, it is definitely both. First let’s talk about how the designer can assist in developing a responsive webpage.

How the Designer can Help with RESPONSIVE Designs:

At the very least, the person doing the Photoshop design of the webpage should be aware of the need for a responsive page. That way he or she can assist the developer by not including elements that are difficult to make responsive such as many layers stacked on top of each other or text in inconvenient places. Let te designer know that the PSD image should look as good as possible at every possible zoom level from 10% to 150% and that will give them some figures used in Photoshop to play with.

How Web Developers Go About Making a Responsive Webpage:

Certainly most of the extra work lies on the shoulders of the developer when it comes to responsive web pages. He or she is the one who has to make the page function at every possible screen-size and every possible device type including desktop PCs, laptops, net-books and mobile phones at least. Testing and Debugging is key here, but first you should learn to think in percentages instead of Pixels, which is what most of us developers used in the old days before responsive development was so important. I often get away with checking on a PC, laptop and phone myself, but the more different types of devices you check your responsive design in, the better it will be in the end. I like to start by making the page using percentages instead of pixels for divs and images mostly and always for width of images for sure. Images should usually be inside a containing div with the image width set to 100% so that the image scales down nicely when the screen size changes. Let’s say for example you want an image to be 500px wide at 100% zoom and when the screen is wider than 500px. You would crop the image to 500px place that image in the div you want then set it’s width to 100%. Then to move the image around in order to get it exactly where it should be in the page layout, instead of playing with pixels, use percentages for margin-top, margin-left, etc. An important part to remember is that you’ll often need to set elements position CSS attribute to “relative” in order for margins to work as you want them to. In some more rare cases, you’ll use the absolute position, but only for more advanced layouts. To sum it up and give you a better visual representation of what I am saying here, these are the steps to creating a responsive web page:

Steps to Responsive Development:

  1. Have a designer create a PSD who is informed of the need for a responsive design.
  2. Slice the PSD and create your first-draft of the web page using images and divs with percentages instead of pixels and be sure to user relative positioning when declaring margins in CSS.
  3. Once you have a first draft with some or all elements of the design in place, start manipulating the browser window to decrease and increase the window size from around 2000 pixels wide down to as small as 300 pixels wide making sure it looks proper at each size in between.
  4. Zoom in and out using your browsers zoom hot keys which are cntrl/- and cntrl/+ on Windows machines. make sure all your elements and images look good at all possible zoom levels.
  5. Once you have the site looking good and responsive on your development machine, it’s time to look at it and tweak it some more using other devices such as net-books, iPad, iPhone, Android phones, Laptops and Desktop computers. A truly responsive design looks great on any device at any screen-size and zoom level.
  6. After each round of changes on one device, go back and make sure you didn’t break your layout on the other important devices. I know it’s a tedious process, but that’s why you have to charge more money for mobile and responsive design techniques. I generally charge twice as much for a fully responsive design as opposed to one that is only partially responsive such as a default WordPress install might be.

Summary:

There you have it, my views on responsive web development as I have learned from nearly 20 years working as a full time freelance web developer. Good luck with your next responsive design and I hope this article helps you!