Create a Responsive Web Design

posted: category: web-design


Create a Responsive Web Design

A growing percentage of people browsing the web are doing so on mobile devices and tablets. These devices have a much smaller screen size than the average desktop computer. When a user visits a website that is not formatted for viewing on a smaller screen, the content can become difficult to read. Sometimes the website can end up looking like complete gibberish. If you do not want your visitors to think they are visiting some random foreign website, then it is a good idea to make sure you are using a responsive web design.

What is Responsive Web Design?

A responsive web design is the designing of a website that can easily adapt to various screen sizes and devices. This means that you can create a website that looks great across all devices, without having to create a mobile website. Best of all, it is fairly easy to take your existing website that is formatted for viewing on a desktop screen and add some CSS to make it work across all screen sizes. Follow these steps to create a responsive web design.

Edit Your Stylesheet

You can turn your existing website into a site that works across all devices without creating any additional files. Hopefully, you are already placing the majority of your CSS in a stylesheet. This will make things easier. If you tend to add CSS in your HTML tags, go through your website and attempt to remove on page styling and add it to your stylesheet. Before you start making a responsive web design, you want your individual pages to be as clean as possible.

We are going to use a single CSS statement to start creating a responsive web design. This CSS statement is @media. There are different types of media than can be used with this statement, we are going to be focusing on ‘screen’. Here is how this will look in CSS.

@media screen and (max-width: 940px) {

}

In that example, we are creating a sub-section of CSS rules that will only take effect if the screen size is 940 pixels or less in width. Anything CSS that goes inside those curly brackets will then be applied. The standard width for most websites is 940 – 960 pixels. When you are making your desktop site, most likely it is at least 940 pixels wide. When the screen drops below a width of 940 pixels, you may want to change some of your styling. A great example of this is with sidebars. Sidebars can be difficult to read when you are viewing a website on a smaller screen. At less than 940 pixels, it may be a good idea to drop the sidebar to below the main content.

Here is an example of a website that uses a sidebar:

#page_wrapper {width: 940px; margin-left: auto; margin-right: auto;}

#content {width: 75%; float: left;}

#sidebar {width: 25%; float: left;}

To drop the sidebar below the content when the screen size changes, you might use the following CSS in your stylesheet.

@media screen and (max-width: 940px) {

#content {width: 100%;}

#sidebar {width: 100%;}

}

Percentages Work Better Than Pixels

Whenever possible, try to use percentages for the width of your divisions and HTML tags , instead of pixels. This will make things easier when it comes time to make it responsive. For example, if you have items in your sidebar set to 200px, they will still be 200px when the sidebar drops below the content. Since the width of the sidebar is set at 25% for screens larger than 940 pixels and 100% for others, setting your sidebar items at 100% will work better. The same is true throughout your site, it is a lot easier to deal with percentages than it is to work with pixels, if you are adjusting CSS based on screen size.

Create More Media Statements

You don’t need to stop at 940 pixels with your media statement. Create several statements for different screen sizes. In fact, it is a good idea to make two more statements. One with a max-width of around 700 pixels and one with a max-width of around 420 pixels. Then, with your website open in a browser, adjust the width of your browser and notice the changes that take place. Go through your existing CSS and see what needs to be changed for smaller screens and insert the changes in the proper media statement.

In this example, I decided that I want the sidebar to disappear completely on screens that are 700 pixels or less in width:

@media screen and (max-width: 700px) {

#sidebar {display: none;}

}

Continue going through your stylesheet and testing yor website in a browser, adjusting the width of the browser to see the changes. Eventually, your entire website will be using a responsive web design. 

comments powered by Disqus

About the Author

Jeff K.

Jeff K.

Jeff is a web designer and graphic artist. In addition to web design, Jeff enjoys other forms of art, including pencil sketching and illustration.

If you are looking for affordable web design services for your business, Cloudy Mouse provides timely personalized service. Our focus is creating great looking responsive website designs for small businesses without breaking their bank.

Take a look at our Web Design Services and discover how we can get your business into the cloud.