Website Design Types
Website Design Types – Responsive Vs Adaptive
Ensuring that a website is accessible from any device that could access it has meant that SEO’s need to understand the difference between RWD (Responsive Website Design) and AWD (Adaptive Website Design). Because these methodologies for design will heavily impact their functionality and accessibility on mobile and tablet devices it is crucial that the right recommendations are made.
Mobile specific sites have been omitted from this analysis because of the effectiveness of RWD and AWD, we would not recommend having a mobile specific site in 2014.
This article looks at the different methodologies that can be used to create a website, for mobile specific sites please refer the article on Mobile Website SEO / UX.
It is not recommended anymore for a site to have a mobile site, technology has moved on in a number of ways and the separate site for a generic mobile device no longer meets the growing demands of the public.
There are now two main types of website design that FirstClick would recommend; Responsive & Adaptive. These topics could be an article unto themselves (and at some point they may very well be) but for the sake of making a simple and clear statement about design types, we will cover the differences briefly here.
The range of mobile and tablet devices is more diverse than ever, which means that there are now many different screen sizes and functionality disparity between devices.
What this means for websites is that they need to be able to cater to each of the various devices and screen sizes available. Moreover people use devices at different times and with different intent driving that usage. Being able to serve content to as many devices as possible and in a dynamic way that more accurately meets the user intent will improve the user experience.
In short RWD is a flexible design that uses percentages to scale content to the screen size, essentially responding to the user agent requesting access to the URL. This uses CSS3 and media queries to rescale EM’s, images, video and so forth in order to fit the screen while retaining functionality.
Rather than scaling an existing set of objects, AWD has a pre-defined set of layout sizes based on known screen sizes. This type of website design serves unique layouts using server side or client side code to detect devices.
Both methods will enable a site to be accessed from mobile and tablet devices of varying sizes, which will ensure that visitors have a much better experience. However often RWD will use more code and can be more difficult to create, whereas AWD is structured such that when a new device is brought to market or new screen sizes are available, additional work may need to be done in order to ensure the site is visible on those devices.
RWD does not present different content to different devices and as such all of the content is downloaded on all devices, which can impact performance. AWD can optimise for each device where RWD cannot, but RWD is more comprehensive and will usually support a greater range of devices.
If a site exists and there is a requirement to make it mobile / tablet friendly, using AWD can be easier to implement as new CSS can be added while RWD will require a new website altogether. Ultimately whatever option is chosen by a business should be the result of research and clearly defined goals.
If the website uses responsive design, ensure that the website utilises a viewpoint tag to correctly scale the website to mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />