Whether it is Responsive or adaptive web design, Design plays a leading role in web development
There are two main techniques in web design: Responsive Web Design and Adaptive Web Design. Both are aimed in making sure that site visitors get an enhanced viewing experience on mobile devices. However, the two techniques work differently.
What is responsive web design?
Responsive Web Design (RWD) refers to developing sites able to provide optimal viewing experience – from navigating, to resizing, to scrolling – in any browser.
Responsive Web Design has three technical components:
Responsive Web Design (RWD) utilises specific styling tools to ensure that a site responds accordingly to different browsers.
Instead of using pixels or points, a percentage-based design is used so that the site adapts and fits the screen of the device accordingly.
The size of the images is in relative units to ensure that they display within their containing element.
CSS rules are applied on the page based on the characteristics of the device used to display it. Commonly, the basis is the width of the browser.
One good example of a site with Responsive Web Design is Microsoft (www.microsoft.com)
Microsoft site in maximised browser view
Microsoft site in restored down browser view
What is adaptive web design?
Focused on the client and not on the browser, Adaptive Web Design utilises progressive enhancement elements to establish design methods. Essentially, progressive enhancement has three layers involved in the AWD technique:
- Content layer (HTML)
- Presentation layer (CSS and styling)
The ability of a website to fit into predefined screen sets and devices sizes is made possible through Adaptive Web Design (AWD).
Microsoft also has its mobile website which uses an Adaptive Web Design.