Call Us: 01252 217141
  • August 12th 2013
  • SEO

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.

  • Leapfrog Internet Marketing have been working on our website for 6+ months now and we have certainly seen the benefits of professional SEO. Organic leads have significantly increased in line with our Google position and ranking. I’d highly recommend Geoff and Leapfrog Internet Marketing.

    Mark Dalton, The Tech Lounge
  • Geoff did a SEO review on one of my websites and has presented his findings in video format. I’ve never seen anything like this before and I could see the results of the tests and Geoff’s recommendations for action. I can thoroughly recommend this part of Geoff’s service – and this bit is FREE!!

    Peter Clarke, PPG Proofreading
  • Geoff has been key in supporting my clients providing SEO services to allow them to achieve increased and more qualified traffic to their sites. I have worked with him on several different sized projects and am very pleased with the results achieved. I highly recommend Leapfrog Internet Marketing for your businesses online SEO needs.

    Oliver Schlieben, frm the group up
  • I have been benefiting from Geoff’s expertise and experience for several months now and really value the way in which he makes his knowledge so accessible. We have worked on improving website authority and content, list building and social media optimisation. A great guy to work with and very good value.

    Chris Farrance, Frontier Digital Business Consultants
  • I’m very happy to recommend Geoff and Leapfrog Internet Marketing. Geoff took the time to really understand our organisation’s marketing strategy and provided an SEO solution that significantly improved our Google listing. In summary: professional, honest, fun, results orientated.

    Charles Wallace, BAE Systems
  • When it comes to organic SEO Geoff is your man. Thank for everything you have done for my company.

    Paul Deach, Deachy Social Media
  • Geoff has been a key resource in providing insights and strategies within the SEO arena. His work is always of a very high standard and always delivered on time. I would have no hesitation in recommending Geoff to any business.

    Drew Griffiths, Mosaic
  • “We’re really happy with Leapfrog Internet Marketing. We feel every step has been clearly explained, the communication is excellent and we’ve seen month-on-month improvements that have converted to enquiries and those all-important sales. We’ve definitely received the return on investment we were looking for.”

    Rebecca Couture Millinery
  • “Geoff also provides video reports, to help explain the topline results. As SEO is a hidden science, this has made the whole process a lot clearer.”

    Rebecca Couture Millinery
  • “The company is really helpful and approachable and you’re never made to feel embarrassed when asking questions.”

    Rebecca Couture Millinery
  • “Leapfrog Internet Marketing was recommended to us by a colleague who had also used their services. We receive a lot of spam marketing offers from SEO agencies, but wanted to go with a company that could be vouched for and we could therefore trust.”

    Rebecca Couture Millinery
  • I’m very happy to recommend Geoff and Leapfrog Internet Marketing. Geoff took the time to really understand our organisation’s marketing strategy and provided an SEO solution that significantly improved our Google listing. In summary: professional, honest, fun, results-orinentated.

    Charles Wallace, Strategy Manager, BAE Systems, Frimley, Surrey
  • I’m very happy to recommend Geoff and Leapfrog Internet Marketing. Geoff took the time to really understand our organisation’s marketing strategy and provided an SEO solution that significantly improved our Google listing. In summary: professional, honest, fun, results-orinentated.

    Charles Wallace, Strategy Manager, BAE Systems, Frimley, Surrey
Menu