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.