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.

Pay It Forward Thanks!

Comments

Trackbacks

  1. [...] Over the past month, it is likely that you have noticed many changes on IMGrind with regards to our design. Whilst before we were image heavy in our posts, we are now trying our best to lighten the load on our server and also provide a fast loading mobile web experience for our visitors that elect to access IMGrind.com from a mobile device or phone. Times are a changing and with those changes we must adapt as a company. Adapting and overcoming obstacles is what we do at IMG. We moved to a responsive theme which simply means that our site is “liquid”. Our site has the ability to adapt to different screen sizes and resolutions without compromising the experience or content. Learn how to test your website for responsive design [...]

Leave a Reply

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