Responsive web design vs adaptive web design
Design plays a leading role in web development. It contributes to the overall appeal and effectiveness of sites. And as new browsers and gadgets emerge, sophisticated techniques in design have become integral to any browser based system 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.
Fluid grids.
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.
Flexible images.
The size of the images is in relative units to ensure that they display within their containing element.
Media queries.
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)
- Client-side scripting layer (jQuery or JavaScript behaviour)
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.
m.microsoft.com
Ph 1300 739 117 | Email [email protected]