Sites on the go – adaptive and responsive web design
It wasn’t so long ago that the vast majority of web design was solely for standard pc and laptop use, but in recent years web browsing has undergone a revolution. Today, many website users are accessing online services and information via smartphones and tablets, whether on the go or at home. This alteration in user habits has necessitated a change in how site are designed and coded, meaning that maintaining functionality across a range of interfaces is essential. It is important for developers to be aware of the options available to them, and an understanding of adaptive web design and reactive web design has become fundamental to those in the industry.
Adaptive Web Design
Adaptive web design (AWD) is a method of website creation which focusses on progressive enhancement. This means that user experience and functionality is at the core of AWD – and layers make this possible. The three layers used are content, presentation and scripting, which when combined, allow a site to work to the best of its capability on the device on which it is accessed (as detected by the server). The layers enable pre-made layouts to be presented for use, layouts which are designed to fit a range of screen sizes and to accommodate either high or standard definition displays. AWD provides an excellent user experience but is costly in terms of initial creation and maintenance.
Responsive Web Design
Responsive web design (RWD) is different to AWD in that is relies upon the device browser to modify site layout and size on access. In order to achieve this, developers use fluid grids, CSS3 module queries and flexible images. Combined, these features enable website layout to vary according to device screen size and resolution. To enable re-sizing of objects (and pages) the grid allows percentage increases or decreases rather than using markers such as pixels. This method works well for the majority of sites but also has its limitations – some sites usually accessed on a larger screen require additional scrolling when accessed on mobiles, and this can influence user experience adversely.
Which method developers choose to use when designing websites will vary according to site purpose, target customer base and budget. Both methods are often used as a part of progressive enhancement and it seems as though the goal of having sites which are readily adaptable to different platforms and interfaces without the need for recoding will be a reality in the not-so-distant future.