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

A Beginner’s Guide to Responsive Website Design

web calligram

 

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.

geoff roy
Latest posts by Geoff Roy (see all)

Related posts:

  1. XML Sitemap. Am I Bovvered?
  2. Directory Listings for Citations
  3. Google Plus is Dead – Long Live Google My Business
  4. Why You Shouldn’t Worry About Domain Authority Score Changing

  • "We've been with them for almost 4 months now and they've delivered lead after lead - high quality ones too! "

    Chris Shaw, Atom Studio

  • "I've had the pleasure of working with the Leapfrog team for several months now and if I had to use one word to sum up the effect on our business I'd go with transformative."

    Chris Shaw, Atom Studio

  • "Leapfrog Internet Marketing were brilliant to deal with. Great value for money that delivers incredible ROI."

    Matthew Letley, Impact For Good

  • "The Leapfrog team are a highly professional, expert company who work really hard for you behind the scenes. They kept us informed of progress and recommendations, providing a first-class response to any questions and quite simply,

    transformed our pesence and our results."

    Julia Pearson, just4one

  • "One area in which Leapfrog has excelled is communication. Any queries are always promptly dealt with and we also receive excellent monthly reporting, with videos that clearly explain our progress. This is great as it gives us a clear picture of what’s going on."

     Leigh Emmerson, Voice Fairy

  • “Leapfrog provides fantastic 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, Rebecca Couture Millinery

  • "When it comes to organic SEO, Leapfrog's your company. Thanks for everything you've done for my business."

    Paul Deach, Deachy Social Media

  • "Over a 6-month period, we’ve improved from a position of no ranking at all, to achieving page 1 rankings for our key search term. In a highly competitive market, this is really impressive and has already increased our organic traffic by more than 400% over a 6-month period. We can definitely recommend Leapfrog to other businesses struggling to get seen by Google."

    Leigh Emmerson, Voice Fairy

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

    Oliver Schlieben, Digital Marketing Strategist

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

    Rebecca Couture, Rebecca Couture Millinery

  • "Leapfrog Internet Marketing has been a key resource in providing insights and strategies within the SEO arena. Their work is always of a very high standard and always delivered on time. I would have no hesitation in recommending Leapfrog to any business."

    Drew Griffiths, Mosaic

  • "I've been benefitting from Leapfrog’s expertise and experience for several months now and really value the way in which they make knowledge so accessible. We've worked on improving website authority and content, list building and social media optimisation. A great company to work with and very good value."

    Chris Farrance, Frontier Digital Business Consultants

  • "Month-on-month we’ve seen fantastic improvements. Over the first 6-month period, search traffic has increased by over 550%. We've achieved page 1 rankings for at least 85 keywords relating to our key products, the site is now found on Google nearly 5000 times per month and an additional 800+ users visit the site monthly."

    Rebecca Couture, Rebecca Couture Millinery

  • "The team at Leapfrog has been able to keep an eye on our site, using their specialised knowledge to not only spot any invisible problems that will affect SEO and site speed, but also identify any coding errors. This kind of value-added benefit is a great asset and makes a real difference for our company."

    Leigh Emmerson, Voice Fairy

  • "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 the team at Leapfrog Internet Marketing."

    Mark Dalton, The Tech Lounge

  • “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, Rebecca Couture Millinery
Call Us
© Barceloneta Limited 2024
© Barceloneta Limited 2024
  • Leapfrog Internet Marketing.
  • Gateway House,
  • 8 Kings Parade,
  • Kings Road,
  • Fleet,
  • Hampshire.
  • GU51 3AB.
  • 01252 217141
  • Leapfrog Internet Marketing.
  • Belvedere House,
  • Basing View,
  • Basingstoke,
  • Hampshire.
  • RG21 4HG.
  • 01256 910619
Menu