What is Responsive Web Design?
Most people now have multiple devices that have the ability to access the internet. These include computers, mobile phones, tablets, televisions, games consoles and soon wearable gadgets such as watches. Each platform creates new challenges for website designers to create optimised experiences that consider screen size, internet speed and input control (keyboard, mouse or touch).
Responsive web design is the only single solution that has the ability to provide an optimised experiences for all these eventualities.
The mobile generation
Jeremy Keith coined the phrase consensual hallucination to describe how website designers previously made assumptions about how people consume content. Using generalisation, statistical information and assumptions about what browsers, screen resolutions and devices people were using we could build a website that best catered for them.
A one-fit solution is no longer viable
Before smart phones and tablet devices you could make reasonable assumptions that people would visit a website on a desktop computer with a certain screen resolution. With advancements in technology these assumptions can no longer be made. We now have to consider much more:
- The huge variety of screen sizes
- A range of screen aspects (portrait/landscape)
- The type of input controls used (touch, mouse, keyboard, even voice control and screen readers)
- Internet speeds vary massively (3G connections, 4G connections and fibre internet)
Traffic to websites is more diverse than ever. Designing to assumptions would mean many of these users would receive a poor browsing experience, ultimately harming the conversion goals of a website.
The only constant in web design is content. Content must be put at the heart of all decision making.
History of responsive web design
The term responsive web design was first mentioned in an A List Apart article in May 2010 by Ethan Marcotte. In this post Ethan references a quote from John Allsopp.
The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.
The web doesn’t have the same boundaries as the print medium and instead of forcing a fixed design onto a user we should embrace it’s flexibility and design with this in mind.
Mashable called 2013 the Year of Responsive Web Design. Each year the number of websites adopting responsive web design has increased. Some believe that in the future, responsive web design could be more prevalent than native apps, simply because of the technological advancements in browsers and the associated development costs.
How does it impact design?
Responsive web design requires a different approach. Designs must adapt to fit content, screens and input controls.
Content is the hero and must be the most important aspect of the design process. Meetings with designers, content writers and project managers need to be organised early in the development process to discuss content priorities, goals of the website and how the content should be structured. Once your content has been collated the design process can begin.
Responsive wireframes are used to create layouts that adapt to different screen sizes and devices. Modular website design then allows us to create style guides and pattern libraries that can be applied to these layouts to style and personalise them to make your website stand out. Multiple layouts should be formed using Photoshop to demonstrate how the key pages adapt to different screens.
Modular web design is the process of auditing and designing small sections of a website such as forms, news items, galleries, sidebar elements, filters, search panels etc. This creates a document of responsive and reusable elements that can be used across the entire website. This ensures there is a consistent feel as you browse the website as well as offering guidelines for future pages that are added as the website evolves and grows.
The most important thing is there is no big reveal of designs, building a website is a team effort between designers, frontend developers, developers and the client. All must play an active roll throughout the process to create a successful responsive website.
Is responsive web design right for you?
The simple answer is yes.
Responsive web design is the only single solution for supporting nearly every device that has a browser. The ever growing number of devices means it is more important than ever to consider responsive web design.
Responsive web design is time consuming and this is normally reflected in the cost. If budgets allow you should always opt for a responsive website. It will ensure that all your visitors get an optimised browsing experience which is fast and enjoyable to use which will ultimately help you achieve your conversion goals.
If you have questions or would like to discuss responsive web design further feel free to contact us.
Thanks to Unsplash for the image.
Want to discuss a project?
Talk to our Magento experts on 01785 279920