A Beginner’s Guide to Responsive Website Design

view of leapfrog website on mobile device

Check how the responsive design looks on a smart phone

No matter how naturally talented you are at coding and programming, chances are, you’ll have some difficulty when creating your first few responsive website designs. The reason for this is because it requires an extreme change in the way you think. Here are a few steps every beginner at responsive website design should follow.

First Step: Pick only a few different screen sizes to focus on at first. If you try to cater to every single screen size out there, you’ll have a hard time getting the website design done. Therefore, you should focus on the four following general screen sizes: the widescreen monitor of a desktop, the monitor of smaller desktops and laptops, tablets, and mobile phones.

Second Step: Don’t just use zoom out or zoom in and call it a responsive website design. You should take the time to optimize the layout of the content, as well.

For example, someone using a smart phone doesn’t have much screen space to work with. Your first thought might be to just zoom out, so the entire website can be seen on the small screen. While this can be a good thing, it can also give the reader a hard time finding information located in a tiny part of the screen.

Therefore, instead of just zooming out your website, you should try limiting the amount of columns, making certain things bigger, and simply moving things around in order to make life a little easier for your mobile users.

Third Step: Change the content instead of just moving it. People using different platforms are probably going to have different needs.

For example, if someone is using their mobile device to check out the website of a restaurant, chances are, they’re looking for the address and the hours. Accordingly, you should make this information very easy to find.

On the other hand, someone using a desktop to check out a restaurant’s website is probably deciding whether they want to go to your restaurant. Therefore, you should focus your content on convincing them to go eat at your restaurant.

Fourth Step: Use fluid grids to make a “liquid layout” rather than a fixed width layout. Most web designers find fixed width layouts, which are traditional, much easier and simpler to make. However, the use of fluid grids will be more convenient in the long run when it comes to responsive website design, since they’re carefully designed to consider proportion.

Fifth Step: Learn how to code media queries and use them for your responsive website design. Due to the large amount of different smartphones, desktops, and laptops out there, it is nearly impossible to create a website design for every single one.

Media queries allow web designers to make conditional stylesheets for a website design. Based on information from the user, a different stylesheet will show. For example, you may have two media queries, and one may be used when the device’s width is bigger than the width of the website, while the other may be used when the device’s width is smaller.

Despite being such a simple concept, responsive website design tends to be extremely confusing at first when put into practice, as it requires you to contemplate many different scenarios. However, if you follow the steps listed above, you’ll be creating responsive website designs in no time.

Sources:
http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

Brendan Porter is a web developer who loves sharing his tips & experience with others. He recommends learning as much as you can about responsive design and its many benefits for your website.

  • Posted in: SEO

During the day, Geoff lives and breathes search engine optimisation (SEO), with a focus on driving more enquiries and phone calls from his clients’ websites. The rest of the time, he enjoys a hectic family life with his wife and 2 young kids in Fleet, Hampshire

Share on TwitterShare on FacebookShare on GooglePlusShare on Pinterest