Responsive website design

Responsive design is the latest approach to ensuring your website displays well on mobile devices, and an answer to the rapidly growing variety of small screen shapes.

In the past few years a wide range of devices with different size screens and orientations has become available – iPad, iPad mini, iPhone, Android phones, Blackberries, Google Nexus 7 tablet, Amazon Kindle and Kobo eReader Touch – to name just a few.

This excellent graphic from Sitepoint shows a few of the possible screen sizes and shapes

This excellent graphic from Sitepoint shows a few of the possible screen sizes and shapes

Developers used to either build separate versions of websites to fit smaller cell phone displays, or add scripts to identify the visitor’s browser and deliver a mobile version. Neither solution is ideal today. A responsive design is currently the best choice for websites because it’s an all-in-one solution. Based on a series of percentages rather than static measurements, the responsive design re-sizes and re-fits any connecting device.

Since last summer we have been building all of our WordPress sites using responsive design, and are now one of the most experienced responsive website design companies in Western Canada.

How it works
A responsive layout will adjust to fit your screen size – no matter what mobile device you have. The content also reorganizes itself when you turn the device horizontally or vertically.

For example, if an iPad or iPhone is held sideways then turned vertically, the content of a responsive site design will adapt its layout to fit the new format. The effect is often like a collapsing house of cards as one section neatly moves down and relocates under the previous one.

As a result, a website is no longer a series of pages designed to be read at a certain size in a certain position, but something fluid and dynamic that changes with the connecting device.

Example of a responsive layout
The example to the right shows how a responsive site design would display on a cell phone display.

The original heading and logo have sized down and centered themselves. The menu, which goes across the top of the site on a desktop monitor display, has become a drop-down menu.

The sub-menu – located on the right side of a desktop monitor display – has changed location and moved under the content.

The sub-menu is followed by two graphic widgets for “Prices” and “Quote”. These originally appeared in the right sidebar of the desktop display.

Finally the four footer sections appear, one below the other, taken from left to right from the original desktop display.

Converting to a responsive design
We have extensive experience developing responsive websites. Let us show you how different layouts and designs will adjust themselves to fit any screen size or shape.

If having your website display properly on mobile devices is important to you, ask us about converting your HTML site to a responsive WordPress design today.

We may be able to rebuild your current WordPress site in a responsive design while maintaining your existing pages and posts.

Call 604-731-7020 for more information and a helpful discussion.

RESOURCES

Responsive web design www.gossamer-threads.com/blog/responsive-web-design/

Samples of responsive designs www.awwwards.com