‘Responsive Web Design’ (RWD) is a method of customising web interfaces for easy reading and navigation across a range of devices, all of which are served from the same website, negating the need to have a separate desktop and mobile web design.
Most responsive websites rely on CSS media queries that reference screen widths and many use the ‘fluid grid’ concept, where page elements are sized in relative units (e.g. ems or percentages), rather than fixed units (e.g. pixels or points).
A sensible development which the majority of companies are now utilising is a ‘mobile-first’ policy, designing initially for the smallest screen size – often as a one-column mobile website design – and adding in extra content and features as they work upwards to the larger devices.
Do desktop and mobile interfaces belong together or not?
Done well, RWD can create very elegant and innovative web design solutions, and the fact that a range of devices are served from just one domain means that it can also be cost-saving.
Some websites dynamically transform when the window is resized, allowing for an enhanced look and a crisp, clean web design, and using a single url is often advantageous in terms of brand recognition. However, responsive website development can also mean that compromises might have to be made in order to find a structure that fits all contexts.
In contrast, websites created specifically for certain device classes can be easier to control and customise.
Developing separate desktop and mobile websites allows developers and designers to focus on highly optimised website content, but usually comes with a higher price tag and using different urls can create issues with cohesion and branding (although some companies choose to alleviate this by redirecting smartphone browsers from the desktop website to the mobile website).
{module_contentholder,name=”Blog ad”}
Things to consider:
- The smaller the screen, the less content and detail can be included
- Navigation on a desktop computer relies heavily on mouse movement and the ease of searching for information by using the keyboard
- Mobile devices rely more on links than searches due to the relative difficulty of using a touch keyboard on a small device
- Mobile devices and tablets are heavily touch-dependent; whilst they can’t ‘hover’ easily, many can ‘swish’ and ‘pinch’, and thus require a different design approach
- Higher contrast in visual design is necessary for devices intended for outdoor use due to the effect of sunlight
- Depending upon location and website interaction, different website content might be needed for desktop and mobile applications
- Mobile queries take up bandwidth, and any hidden content is still served to the browser
So the choice between developing separate websites and using responsive web design largely comes down to the way in which your users interact with your content
- Which devices are they using?
- Which browsers?
- Do they use different devices for different tasks?
- How long are they spending on the site?
- Which features are they using on each device type?
Some people may only ever access a site on their mobile phone, for instance, or might use certain features more from the office but less when on the move. There is no ‘one size fits all’ approach and knowing your audience and being adaptive to their changing needs is an essential part of making the right choice for your company.