Internet users are now accessing the web on a vast range of devices such as desktop PC, laptops, Tablet PC’s, smart phones, iPad, iPhone and other mobile devices – all with different screen sizes and resolutions.
Viewing a website that was designed for a desktop computer on the screen of a smartphone can be very problematic. It requires a lot of zooming in and out and scrolling in all directions, which, in short, results in a bad user experience.
Producing websites that are visually appealing and usable on all devices is a real challenge. Thankfully, there is a solution; Responsive Web Design. This is designed on CSS3 and HTML5
In the past, the primary solution to this problem has been to build bespoke websites for different devices. Whilst building a separate mobile site can be a great option, it can also require large amounts of resource and development time and may result in inconsistent sites which are difficult to maintain.
CSS3 media queries have enabled a new alternative; Responsive Web Design. It allows designers to create websites with fluid layouts and flexible images that automatically adapt, according to the size and orientation of the user's browser, to deliver the optimal layout. This ensures that the site looks great, is consistent and is usable, regardless of device.
Designing for the web as a whole, rather than for a specific device, ensures that all users get access to the same information and receive a consistent user experience. It not only maximizes the site's compatibility with the plethora of devices available now, but also new devices that have yet to be launched – future proofing your site. There is also the huge benefit of ease of maintenance; keeping one website up-to-date is much easier than managing multiple device specific sites.
To understand the concept of Responsive Web Design, we'll show you a simple example. See below three versions of a single webpage design, each at different browser widths.
1. In the top image, the browser is wide, as this website is being viewed on a desktop computer. The elements of the page are spaced out horizontally with multiple columns.
2. In the second image, the browser window is slightly narrower, as this website is being viewed on a digital tablet. In response to the browser width, the design has shifted, as defined in the page's markup, to display the page elements in the most appropriate manner.
3. The final image shows how the design might look on a mobile device with a narrow browser width. The images are smaller, the content column is narrower, the navigation has moved into a 'stacked' design (Vertically in button tabs) and the some image has been removed. The hierarchy of the page content is maintained, and the content is clear and easy to navigate, despite the small browser size.
For a great example of responsive design, check out the following:
Vertex redesign their site using a responsive layout which shifts according to browser size. Try it yourself by making your browser window narrower. You will see the elements of the page automatically move to create a new layout as you make the window smaller.
If you want to find out more about Responsive Web Design, or if you want information on our Responsive Web Design Packages, feel free to contact us.