Digital tool to help illustrate the importance of responsive web design

Posted by on Mar 23, 2012 in 21st Century, Design, Experience Design, Technology | No Comments

I found a great set of tools to use with your clients to help them understand the importance of designing for mobile interfaces. Each of the links at the end of the post allow you to enter any URL and see how it would display as a responsive site across a myriad of the most popular mobile devices.

To clarify, a responsive site is designed to read the width of the device it is being displayed on and render the experience so the content formats correctly allowing the visitor to easily consume the content. Here is a screen grab of what a good responsive design looks like:

As you can see, the content is reconfigured for each width so that it creates a seamless and clean experience across different screen resolutions.

What’s so great about the links below is the visualization of the content when not properly optimized and designed for a mobile experience. It’s a great way to show clients how much a digital experience can suffer when mobile devices are not considered in the design and development process.

To put some context around the importance of designing for mobile, in 2010 40% of adults accessed the internet via a phone compared to 32% in 2009. So, it’s a pretty large demographic that is unfortunately seeing something like this when they pull up a site that is not responsive, at full size, on a mobile device: (normally any site will auto reduce to fit on a mobile screen but that’s not optimal either when you need to read or click on buttons that are displaying at around 50% smaller than they should.)

Hopefully these tools can help us teach our clients the importance of considering the mobile space when developing digital experiences.

Here are the links. They all do the same thing, they just have different interfaces. Don’t forget, you can input any URL you want.

http://mattkersley.com/responsive/

http://responsive.is/ (space to add url is in the top right)

http://www.responsinator.com/ (space to add url is in the top left)

Please let me know if you have any questions.

Leave a Reply