From Desktop computers and laptops, to tablets, smartphones and gaming consoles - as the number increases, managing and delivering this content has become more and more complex. Historically, a website is designed to look at its best when viewed on a desktop PC, and for smaller devices such as smartphones and tablets, the site is scaled down to fit. This can cause problems because text can be difficult to read, forms may be tricky to use and navigation may not function properly. In the past, one approach has been to produce a separate site for mobile visitors, but the cost of building this and keeping it updated can be prohibitive. When you factor in the ability devices have to switch from portrait to landscape, it becomes apparent that building a different version of a website to target each device is not a practical way forward.
With the introduction of new technology happening all the time, if you want your website to perform and look as good as possible on devices that haven’t even been imagined yet, Responsive Web Design is the way forward. It enables your site to keep up with the rapid pace of technology, websites just work - across all devices.
RWD is the approach that suggests design and development should respond to the user’s behaviour and environment based on screen size, computer platform and device orientation. The practice uses:
Flexible grids for layout Intelligent use of CSS media queries to switch between the layouts depending on browser width The ability to serve alternate images depending on viewport width, which keeps download times low on mobile devices
As the user switches from their laptop to tablet or mobile, the website automatically switches to accommodate for resolution, image size and scripting abilities. In other words, the website has the technology to automatically respond to the user’s preferences. This eliminates the need for a different design for each new gadget on the market.
Examples of Responsive Websites
Recently there has been a huge increase in sites that use Responsive Web Design methods, and more and more sites are appearing all the time. Below are some examples, if you adjust the width of your browser you can get an idea of how the design changes depending on the width of your browser:
1. Low Maintenance As there is no need to develop a mobile optimised version of a website, you only need to maintain one website. The layout changes depending on device, but codebase remains the same.
2. Consistency of Brand Because the site is built on one codebase, it is much easier to maintain brand identity and separate style guides for mobile sites are not required.
3. No redirects Having one website for all devices means that you have the same page URLs to deliver content to all your users. You don’t need to worry about redirects or incompatibilities between different devices. When promoting a link, you can be certain that people can access it directly, no matter where they are, or how they visit your site. This also has SEO benefits.
4. Usability If a user is familiar to a desktop optimised site then it makes sense that the experience across all devices should be consistent.
5. Loading Data Server side scripting is used to compress files before they reach the browser. So mobile devices will be served with smaller images optimised for the device width.
In a nutshell, a responsive site looks different to users on different devices, but uses the same page URLs and codebase to deliver content to all users. It provides website visitors the best possible experience when viewing a site, and ensures your website performs to its full potential.