Responsive Web Design: The Silver Bullet for Mobile-friendly Websites?
Responsive Web Design: The Silver Bullet for Mobile-friendly Websites? avatar


Handheld Mobile DeviceThere has been a lot of buzz lately about Responsive Website Design.  I’ve recently read several articles suggesting responsive design is the future of the Web and without it, sites are not truly mobile-friendly.  What is responsive design, and does it live up to the hype?

Let’s start with some historical context.  In the early days of the Web, computer monitors were massive, but the screens were quite small.  To accommodate small screen size, website layouts were narrow.  As screen technologies improved, affordable super-sized monitors became available, and website layouts became increasingly wider.

More powerful processors, an increasingly robust Web infrastructure and better screen technologies allowed Web Developers to use very large, high resolution images, and high definition media in their work – resulting in big, beautifully rendered websites.

At the same time, huge advances were being made with small handheld devices. As we enter 2014, there is a massive range of available screen resolutions; everything from tiny wrist-watch sized screens to 30″ flat screen behemoths.

Everyone wants a nice looking site, and most people care about reaching visitors using large and small screens.  What to do?

Some Web Developers have gone so far as to design separate layouts for desktop and mobile screens.  Given the vast range of available mobile screen sizes, this has turned out to be a slippery (and costly) slope.

Fortunately, Web browser technology has also come a long way in being able to render big, beautiful sites on both large and small screens.  It’s true that a few years ago, some handheld devices did a very poor job of rendering websites – but thankfully that is no longer the case.

So where does responsive design fit into this?

Responsive Design works by adjusting the layout of a website depending on the resolution of the visitor’s screen.  The website is coded to fetch information about the visitor’s device and screen resolution, and it customizes the display of the site accordingly.  It’s worth noting that the WordPress Content Management System does a particularly good job of enabling responsive design.

Responsive DesignWhat does responsive design look like? Let’s take a look.  These 2 screenshots of the recently launched site for Sciens Industries Inc are the same site at 2 different screen resolutions; 1024 pixels wide and 320 pixels wide. 

The  top (1024 pixel) image is what responsive design looks like on a large desktop or laptop screen.  The bottom (320 pixel) image is what the same site looks like on a small handheld screen.

Notice the modified layout.  As the width decreases, certain elements are able to stack vertically to accommodate the narrower screen resolution.  This has effectively converted this 2 column design into a 1 column layout for display on small screens.

Responsive design can modify things like fonts and images on-the-fly too, to accommodate smaller screens. In the example here, media including the logo, images and YouTube video have been dynamically resized to fit the smaller screen. 

The navigation menu which spans the top of the site on large screens is converted to a vertical menu which can be toggled on and off using the menu button located in the top right corner.

Some people love responsive design, others find it disorienting.  I think it depends in part on whether you browse the Web primarily using a hand-held device or a desktop computer.

It also depends on the design itself; some layouts are more responsive-friendly than others. The Sciens Industries website is an example of a responsive-design-friendly layout.

Most of the feedback I’ve had from clients has been in favour of fixed-with design; websites that have the same layout regardless of screen resolution.  But we are increasingly getting requests for site design that is mobile responsive.

As far as I’m concerned, responsive design is a valuable tool, but it’s not a silver bullet.  It’s a good fit for some, but not everyone.  It is an effective approach if your visitor demographic leans heavily toward mobile visitors, and you’re not terribly concerned about consistent display across multiple devices. 

Just because your site isn’t responsive doesn’t mean it’s not going to render well on mobile devices.  Remember, modern hand-held devices and browsing software are capable of rendering Web Standards-Compliant websites just fine – regardless of whether the site is responsive or not.

If you’d like more information about responsive design, please contact us at or call 705.927.2308.