Responsive Design Tutorial – How To Test Your Website For Responsive Design

With over 2.1 billion people expected to be accessing the web from a mobile device by the year 2015, now is the time to ensure that your website not only loads fast, but also fits across a multitude of mobile devices with respect to how the content is rendered. Responsive design is a fresh, new approach to web design that utilizes a grid system of content organization that looks great across multiple browsers, screen resolutions and sizes.

With one design (colors, fonts, assets, images), your responsive design website will use a complex system of CSS that recognizes browser types, device resolution and screen size to appropriately display the content without compromising the aesthetics of the design.

Recently, I came across Matt Kersley’s website that has a dashboard for testing your design across several different screen sizes. The most emphasis of course being on Apple products – the iPhone and iPad. This is the first testing dashboard that I have discovered on the web, and with some more searching on Google, there is probably a good number of these tools out there that have even more options. But, for this post, we will start with Matt’s site.

How To Test Your Website For Responsive Design:

1. Go to http://mattkersley.com/responsive/
2. Type in your website address or another known web address into the testing address bar
3. Select device size radio button to get a true sense of what your site will look like
4. Hit enter
5. Review your testing website within the device size frames
6. Scroll to the right to view all of your results

As stated before, this is a great starting place to review your site. If you know of a better responsive site tester/dashboard, please let us know in the comments below. Now is the time to start preparing for more mobile traffic! Be proactive.

An advocate for a free and open web and a serial entrepreneur, Preston has an in depth working history online with ecommerce, content creation and affiliate marketing. Most recently, Preston has had both the opportunity and pleasure to serve the Internet Marketing Grind Forums as a moderator.

Facebook Twitter Skype 

 IMGrind Email Newsletter

Comments
  1. Anduy

    Sound tutorial! I wanna give my website a responsive looks and this is why at first I've need to test its responsive mode and here shared way will be effective for me. Thanks http://www.top5hostingcompany.com/

  2. top hosting

    Sound tutorial! I wanna give my website a responsive looks and this is why at first I've need to test its responsive mode and here shared way will be effective for me. Thanks

    My recent post Reliable And Powerful Cloud Hosting Services

  3. @spyderman4g63

    Alternatively you can just drag your browser window to that size. Won't be exact but that is how I usually work when designing something.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>