Previously, we talked about the concept of Mobile First. The idea of fully optimising a website for mobile allows for all the content to be displayed on smaller devices, but how is this strategy approached with modern development techniques? One of these ways is Responsive Web Design (RWD).
RWD is a development method that allows websites to adapt and change layout based off of the size of the screen the user is viewing from, whether that be a mobile, tablet, laptop or desktop. Treating the content of the page as percentages of the overall screen, RWD results in a website that looks - to the customer - well structured, coherent and clear, regardless of the screen size.
A popular saying among RWD developers is that ‘content is like water’, and this makes RWD much easier to visualise. No matter what container water is held in, it will change shape to fit - this is exactly the same principle of Responsive Web Design.
The first website to implement this intuitive method of development was Audi.com in 2001. With RWD used in the design, it resulted in the ability for the website to dynamically change structure to accommodate the screen size, without the need for page reloading (only available on Internet Explorer at the time of launch). This paved the way for more and more companies opting for RWD, and 2013 was named ‘the year of RWD’ by popular magazine ‘Mashable’ as it grew in popularity.
Implementation of RWD
So how is RWD actually implemented into a website? Without getting too into the technical side of web development, it uses a combination of fluid grids, fluid images and CSS media queries to resize and rearrange everything on that page to fit a screen effectively. Fluid grids and images are relatively standard practice for many developers now, and as such the technical aspects of RWD are relatively simple. The issue lies in the implementation. Applying these concepts to actual websites can be difficult, as some logos, images and bodies of text cannot be scaled well without suffering in quality and/or clarity. As such, some RWD developers will now crop, or slightly alter some features of the page to accommodate it into the screen. This usually will not impact the content in any way, and means the website will appear as if it is totally optimised for that device.
We now know the extent at which RWD can improve a website, but how does it apply to your site in particular? There are two main reasons to use RWD. Firstly, the user experience of websites are more important than ever before, and if a website cannot be easily viewed or navigated, users will simply go elsewhere. Desktop layouts are designed to work with a mouse - which have pixel-perfect precision - to navigate, whereas a mobile website is navigated with the use of the user's finger. The surface area of a figure on a touch screen is much bigger than a mouse, so trying to navigate around a website that is designed for desktop on a mobile device is frustrating and annoying. Other factors that need to be taken into consideration are the use of rollovers; where on a desktop you hover the mouse over a link and the hover state changes, touch devices do not offer a ‘hover’ facility - you either click on a link or not.
The second reason is Google. We have written previously regarding the impact of mobile friendly websites and how Google ranks them. If a website is not mobile friendly when a user is searching for a website on a mobile device, Google will prioritise mobile websites first. This will negatively impact sales and clicks greatly, especially considering the fact that 60% of Google searches originate from a mobile device now.