You may have noticed some changes on the Waracle site lately? The design is probably wider than you’re used to and when you shrink your browser, the content magically sizes to refit. This is not about technical black magic, it’s simply in response to the viewing and consumption patterns of our audience. In 2012, nearly 40% of you visited the Waracle website via tablets and smartphone devices. Welcome to the world of responsive web design.
Designing a website that renders well on all platforms and browsers would be next to impossible considering the vast number of computers, tablets and phones on the market all with varying screen dimensions. Responsive Web Design is an approach that takes into account this unlimited array of devices and adapts the website depending on the users screen size, platform and orientation.
We won’t go into the technical side too much but it is only in the last few years that Responsive Web Design has been able to come to the fore with the advent of HTML5 and CSS3 which use stylesheets and media queries to adapt the website code on the fly as pages are loaded, allowing for changes to made at any point to affect all variations.
From various devices the website should automatically adapt to accommodate the shifting size through resizing images, moving section placements and even removing sections of the site that wouldn’t be pertinent depending on device.
The Waracle site for example was designed with mobile in mind so a Responsive approach was a necessity. When viewed on a standard sized web browser, the site is shown in a 2 column arrangement taking full advantage of the screen real estate to get our message across. When viewed on an iPhone however, the site is displayed in a single column with only mobile related content displayed, reduced quality images to improve load times over cellular networks, and increased text size to increase readability.
Rather than developing a separate mobile optimized version of the Waracle site we have reduced the duplication of content across multiple sites which isn’t favourable to the search engines as you’re competing with your own site. It also allows for faster modifications to the design across all platforms as well as accommodating for every conceivable device.
With the proliferation of smart phones and the increasing web traffic from these devices, it is no secret that mobile browsing is increasingly becoming more and more important. Thus creating a design for all sizes and platforms becomes paramount. Waracle develop and design responsive web layouts for brands and businesses. If you’re looking to develop a responsive website in 2013, look no further – contact us today for more details.