Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
1st January 2013

Make pixel-based sites responsive

Responsive sites are a must-have in the current multiscreen environment. Here we show you how to take an existing site and convert it over with just a sprinkling of CSS

Sometimes design jobs can seem like they are too difficult, mainly because you’ve just never encountered those problems before and you think they’re going to be a chore. Responsive design is something you might have read about but never taken the plunge into – or maybe you’ve built a site in a tutorial, but you don’t want to tackle it on your own site because you think it involves a redesign. The truth is that if you have an existing site, most of the work is actually done.
It’s incredibly simple to move a site over to a responsive layout, mainly because you’re just changing widths into percentages. Doing that alone will make it scale up and down to fit any screen size – but then there’s the difficulty of what happens when the columns get too small and images break out of the design. All of this is relatively easy to fix – images can be scaled easily enough, and when a design gets too small we can use media queries to fix them into a single-column design.
So the good news is that it’s not impossible, and in this tutorial we are going to take a prebuilt page and show just how easy it is to convert it across to a responsive design.

Getting started

Make pixel-based sites responsive
Copy the Start folder to your computer and open the index.html page in your browser. It’s a simple two-column, static layout for a 1280px desktop screen. Open the style.css file in Dreamweaver to prepare us to covert this to a percentage-based design. In the body CSS change the line height from pixel-based to em-based and add the font-size property.

001 line-height: 1.2em;
002  
003 font-size:100%;

Fix the header

Make pixel-based sites responsive
An em is a relative unit, not fixed, so it can scale up and down easier. Some conversion techniques to responsive sites change padding to percentages, but it’s not really necessary to do this. Find the header rule and change the width from a fixed 1280px to 100% so that it stretches across the screen.

001 width: 100%;

Change the footer

If you test in the browser now, we can see that we’ve made the header stretch full-width across the design. As the logo and header is small it will fit in small screen mobile designs as well as the desktop. Let’s make that same change within the footer, find the footer rule, and change its width.

001 width: 100%;

Centring the design

The header and the footer stretch across the screen – let’s focus on the menu. This is actually much easier to do as it’s an inline-block. Find the menu ul rule and remove the width property so that the rule resembles the code shown below. If you save this and test it in the browser you will see that it displays across the full width of the screen.

001 #menu ul {
002  
003 margin: 0;
004  
005 padding: 10px;
006   
007 list-style: none;
008   
009 color: #333;
010  
011 background:#555 url(img/noise.png);
012  
013 overflow: hidden; 
014 
015 } 

Centre the text

The text area in the screen is aligned to the left while everything else fills the width of the browser. Now change the content rule as follows. This subtle difference to the width means it will hold at 1280px but collapse if necessary, which is important later. We add the auto property to the margin so that it centres left and right.
001 max-width:1280px;
002 
003 margin: 20px auto;

Not scaling

If you test the design so far you will see that the design is centred but does not scale if you try to resize. That’s because the sidebar and main divs have pixel-based values. To convert it we use the equation devised by Ethan Marcotte, who first proposed responsive design. This is shown below and applied to 768 pixels of the main section. Don’t add this yet.

001 target divided by context = result 
002 768 divided by 1280 = 0.6

Change to percent

0.6 isn’t very clear as a percentage, but if we move the decimal place two places to the right we get 60%. That’s better, so let’s add this to the main div content. If you test it, the design should look the same, because it’s the same width displayed as a percentage. It won’t scale properly until we change the sidebar.

001  width: 60%; 

Convert the sidebar

Find the sidebar CSS rule and change the width and margin as shown below. As you can see the width of the main area plus the sidebar plus the margin adds up to 100%. We didn’t really need the equation here because we had to make it add up to 100%, but if you try it, you’ll see it works.

001 .sidebar{
002     
003 background:#399 url(img/noise.png);
004     
005 float: left;
006     
007 margin: 0 0 20px 1%;
008     
009 padding: 0;
010    
011 width:39%; 
012
013 } 

Scaling the image

Save and test in the browser. You can now scale the design down, but as you can see when the browser is small, the sidebar overlaps the image. Let’s make the image responsive as well; find the img CSS rule and change it as shown. This makes the image never bigger than 540px, and it will scale up and down.

001 .img {
002    
003 width:100%;
004    
005 max-width:540px; 
006     
007 height: auto;
008     
009 float:left;
010     
011 margin: 0 10px 10px 0;
012 
013 } 

Create a tablet layout

Save and test the design – you will see how the text automatically runs around the image until the width of the column gets too small. It’s when that happens that the image scales properly. Obviously as the design gets too small the columns do not really work, so let’s create a media query in the CSS. Add this to the bottom of the CSS:

001  @media screen and (max-width: 768px) { 
002 
003 }

Moving the sidebar

This media query is going to detect when the width is 768 pixels wide or less, and we will adjust the design for a portrait tablet. Inside the query lets update the sidebar so that it jumps below the main content area and has a wider value than it currently does. Add the code as shown below, which overrides the width on the first sidebar rule.

001 .sidebar{
002
003     margin: 0 0 20px 1%;
004     
005 clear:both;
006     
007 width:98%; 
008    
009 }.

Fix the main section

If you test the design now you will see that the sidebar works fine; it jumps down and fills the width of the browser. The text in the single column however, is only 60% of the browser – but this is easy to fix. Again inside the media query add this code, which ensures the design uses the full width of the browser.
001 #main {
002    
003 clear:both;
004     
005 width:100%;    
006    
007 } 

Reset the margins

A small clean up is required here before continuing. The margins are set for the design at desktop level, so let’s remove them in the smaller tablet size. Again inside the media query add the following code, which will just reset the margins for the text area. Save this and give it a test in the browser.

001  #main .textArea {
002    
003 margin:0;
004     
005 }

Detecting mobile phones

The design scales really well, but as you get down to phone size notice how the menu is the area that struggles; it’s quite small for fingers on a mobile, as is the text size to read. Add another media query below the first that will detect when the screen starts to get smaller again.

001 @media screen and (max-width: 
480px) { 
002 
003 }

Larger text

When using a mobile phone, the text for desktop browsing tends to be quite small on the handset. We are going to increase our body size up to 120%. The good news is that everything will be proportionally bumped-up because we have used flexible em sizes instead of pixels. Add the code shown below into the media query from the previous step.

001 body{
002         
003 font-size: 120%;
004     
005 }

Extend the sidebar

If you check the design in the browser, you will see that there is some margin space around the sidebar. We don’t need this on mobile as we can take advantage of the full width of the browser in the smaller screen estate. Add the following code into the media query to change the size of the sidebar box.

001  .sidebar{
002         
003 margin: 0;
004    
005        
006 width:100%;   
007     
008 } 

Change the menu layout

To make the menu easier to click for a mobile device, it’s usually a good idea to add the menu as a regular list down the page. To switch it back we just need to override the inline-block setting for the display, so instead we’ll change it to block. Add the code shown below to the media query.

001 #menu li {
002       
003 display:block;
004     
005 }

Needs to be a button

The buttons are now in a regular list giving more space to them, but they do not look like buttons. Adding the code shown to the menu li CSS rule will add a border line to the bottom of each button and therefore add some definition of the area that’s clickable for each of the buttons.

001 border-bottom-color:#FFF;
002      
003 border-bottom-style:solid;
004       
005 border-bottom-width:1px;

Still needs work

The buttons definitely look much better now as the dividing lines have defined each area making it a button. The text still looks a little odd on the buttons and that is because the text is aligned to the left. Let’s centre the text on the buttons, giving the ‘menu li’ more impact on the screen.

001 text-align:center;

Finishing touches

The last refinement we need to make for the buttons list items is to give them a little more space for each of the buttons which can be achieved simply by adding a little padding to the menu li CSS rule. Adding the padding will help fingers to press each button easier on the smaller screen.

001 padding:5px;

Full width

In order to make the buttons take full advantage of the width of the display, as with the other areas of the site’s design, we need to remove any padding and margins from the outer container. In this case it happens to be the unordered list, so add the code shown below  to the media query.

001 #menu ul {
002         
003 padding: 0;
004             
005 margin: 0 0 20px 0;
006     
007 }

Save and test

Now that we’ve added all of the code to the CSS, save the file and open the HTML page in the browser again. We now have a fully responsive design that scales to differing widths, but has break points (the media queries) that allow the design to reflow as the width of the device it is viewed on shrinks.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://kk.mercubuana.ac.id/ ululf01

      thanks for step by step this tutorial
      awesome