Why not having a responsive website is killing your online success

What is responsive web design, and why does it matter more than ever

Recent History

Responsive design has come a long way, in a very short period. From a concept to an agreed upon standard in just a few years, Responsive Web Design is no longer a nice to have. Responsive design is a necessity for any business or organisation that wants to deliver a modern web experience to its users, customer and potential customers.

The principle behind Responsive Web Design hasn't changed. Its purpose is still to create websites that provide an optimal viewing experience for users, regardless of the device they are using. Essentially it's the theory that users shouldn't have to scroll, pinch and expand to consume content, the website should take the responsibility to present a usable and user-friendly experience without any compromise.

To accomplish this the web server, upon receiving a request, recognises, the browser and device combination, and serves up the most appropriate version of the site. As mobile smartphone use has increased, the standard approach is to take a 'mobile first' approach. This simply means, as the name suggests, that it is the mobile version of the site that is built first. 

At Inspire, we believe that to create mobile sites that are fit for purpose, encourage engagement and ultimately conversions; that mobile specific site design is the way to go. Simply relaying out the same website content into a long vertical format, which requires excess user scrolling, is not the answer.

Types of Web Design

Fixed Width

In the early days of the web, developing sites involved creating a series of static pages that were of a fixed width. It allowed designers the ultimate control over their designs and how they used layout, typography and graphical elements. The canvas they had to work to was fixed and didn't alter, this allowed designers to create some truly stunning websites that were mini works of art. These same sites, many of which still exist, simply don't translate to a tablet or smartphone, because with multiple devices, comes multiple screen sizes to accommodate. Not only do these sites force excess vertical scrolling, but as a result, horizontal scrolling is also required to view effectively the sites content.

Fluid Design

Fluid design existed long before the term 'Responsive Design' had even been coined. The concept existed before the advent of Smartphones and Tablets and was really about accommodating different monitor and screen sizes. Instead of using a set number of Pixels to define the width and height - a fluid design is based on percentages. That way everything is relative and the site, if presented on a smaller screen or device, will scale accordingly and retain the correct dimensions.

Adaptive

Adaptive design and responsive design are sometimes mistaken for the same thing, but while they attempt to solve the same problem - they do so in an entirely different way. The adaptive design will deliver alternative versions of the site based on set screen sizes and resolutions. In doing so, adaptive web design is, in essence, an extension of the principles of fixed web design.

As such it is considered less future proof because screen size and resolution of common devices, such as the iPhone and the iPad are constantly changing. This would require a reworking of the code that drives your website. But Adaptive designs have, well, adapted since the early days. The goal of future proofing can be achieved to an extent if the adaptive site delivered to the browser takes the additional step of reacting to the width of the screen. The best adaptive sites will become less fixed in nature if a percentage width, relative to screen size calculation is applied.

So what is Responsive Design?

If adaptive design is the evolution of fixed design theory, then responsive design is very much the evolved and improved version of fluid design.

Responsive design puts content at its heart. The layout, text and images will change size based on the needs of the content. This wasn't possible until web browsers such as Safari, Firefox and Internet Explorer supported Media Queries. A media query is a communication between the website and the web browser.

In simple terms it asks "which browser on which device are you?” Once it has the answer it knows exactly; through the website code, how the layout, navigation, text and images should be presented. It allows content to be rendered in the most appropriate way for the device in question - all based on the principles of fluid design.

Why you need to know this?

Regardless of how you accomplish it, it is clear that any site you have should be based on the principles of responsive web design. By doing so, you future-proof your website and protect the investment you've made in your site. Being aware, particularly of the difference between Adaptive and Responsive web design will ensure your don't make a costly mistake.

At Inspire, we have designed, developed and deployed hundreds of responsive sites over the last few years and have the experience to understand how best to put the theory of responsive design into practice for your business. Our approach is to focus on user needs, their intents, the device they’re on and their physical location (2G (aka Edge), 3G, 4G or Wifi). At the same time, ensuring the objectives of the website owner are achieved. It’s a difficult balancing act, but it’s our formula for successful mobile sites.

Whether you are building a new site or are looking to redevelop your existing site, get in touch. An initial chat costs nothing except for your time.

To arrange an appointment, please contact 01738 700 006 or fill in our enquiry form. 

David Dwyer is Managing Director of Inspire Web Development. He has years of experience in a range of web and IT roles plus seven years in sales and marketing in a blue-chip FMCG company. David’s academic and professional qualifications include a BA (Hons) in Business Economics (Personnel & Ergonomics) from the University of Paisley, an MSc in Information Technology (Systems) from Heriot-Watt University and PRINCE2 Practitioner-level certification. He is also an active member of the British Computer Society, Entrepreneurial Exchange and Business for Scotland.

Follow Inspire on Twitter @inspireltd and @developersos