Responsive Design As A Standard

Responsive Design As Standard With over 50% of internet users now searching the web on their mobile phone, the time has come to make responsive design a standard practice when creating a website. If your company is commissioning a website, the following information will give you an introduction to responsive design and what to request from your chosen agency.

Over the past decade screen resolutions and monitor sizes have steadily grown higher and higher. However, in most cases the general populus grew together moving from 800x600, to 1024x768 and then 1280x1024 and above. More recently we have seen the advent of smartphones and tablets meaning users are seeing the web in various shapes and sizes from a mere 96px wide to 2560px and beyond. Website design can no longer stick to the old ideas that you build for the ‘popular’ size and degrade or grow gracefully for smaller or larger resolutions. When your website takes up a small corner of a screen or sits like an island in the middle of a mass of background color it is time for a change.

Responsive design is all about thinking beyond the desktop. With new smartphones, tablets, monitors and televisions being released all the time it is impossible to create a site for each platform. The practice of responsive design consists of a combination of flexible grids and layouts, images and an intelligent use of various CSS media queries. As this practice is still in its infancy, you will need to request this feature at the quote stage of the project.

Coming Up With A Budget

When commissioning a creative agency to design and build your website you will need to assign sufficient budget for responsive design. The additional design time required to create a set of visuals, assets and then the changes on these visuals, as you will be essentially creating about 3 different styles of website. This additional spend will ensure your site is better prepared for future changes in the use of the internet. An average cost for these additional features are around 25% of total website cost. However, this is dependant on the agency, website size and complexity of the design.

Design Process With the project underway and your chosen route decided you should now receive visuals from the designer from 3 or more different perspectives; the original landscape desktop view, a smaller tablet version, and a portait phone version so you can see how the same content will be resized, re-ordered and in some cases hidden. When designing for various formats everything needs to be flexible so it is good practice to use a clean design with solid shapes as complicated images can become distorted or unreadable at the smallest size.

Once approved, the design of the internal pages will be completed and the development will begin. During this development stage it is the CSS where the magic happens.

Content

It can be a waste of bandwidth to try and crowbar all the content from the desktop site into the smaller versions of the website as the site can look crowded and overwhelming. Many elements can be shrunk proportionally and will might work well but also try and consider rows of information instead of columns and above all try and focus your content. Speak to your designer about hiding elements when the screen real estate is smaller and work with the text to ensure the user has the best experience. In most cases the client is responsible for the text content of the website and whether you use a copywriter or write the content yourself, a responsive website is a fantastic opportunity to tailor your messages for the different platforms. A desktop allows you to use large imagery and retain all of the text content (keyword rich copy, background information and marketing messages) whereas a tablet is mainly for reading content so this can be a little shorter (removing any fluff or SEO enhanced content) in order to target those who want to consume the content on your website. The smartphone audience however, generally like their content short, snappy and to the point as many searches on phone are for a specific piece of information and not for general browsing. By delivering the essential content to the reader they will have a better experience and ultimately return to your website or have a positive opinion of your brand.

Touch

Touch screens are now becoming the norm when it comes to smaller devices such as tablets and smartphones but few laptops and desktops employ touchscreen technology so it is therefore good to be aware that certain features will need to be re-considered. Hover and mouse-over effects can not be employed on a touchscreen easily so it is better to keep this functionality limited to cursor based browsing. Similarly, hover based navigation can be cumbersome and is best avoided. Instead a clear side navigation or even a drop down list that uses the native phone functions to create a roller for the user to make their choice. As smartphone browsing becomes more common users are expecting to see the mobilisation of the desktop and we are seeing bigger buttons and other user interface features being transferred back to desktop design.

Responsive design will eventually be standard with every website project but as the concept is relatively new many creative agencies do not propose it as part of their initial quote and see it as a ‘nice to have’ rather than an essential requirement. Having responsive design as standard will save your company time and money as internet browsing habits are changing and by not catering for the growing mobile audience you are losing potential visitors, shoppers and readers. Making your existing website mobile compatible is an option but can be time consuming and expensive when working with existing code. Responsive design has not just changed the way people view websites but the way agencies think about website design as a whole.

Guest Post: Ian Garstang works at Kingsland Linassi, an award winning, Top 100 UK creative agency in London. When not being creative Ian enjoys social networking, Indie video games and good design. Like our Facebook page, follow our Twitter feed and circle us at Google+