Adaptive Web Design vs. Responsive Web Design

AWD vs. RWD



ADAPTIVE WEB DESIGN VS. RESPONSIVE WEB DESIGN



Why does it matter? Why one and not the other, when they both essentially make my website look "pretty" on a smaller (or larger) screen? Well, let's discover the reasons why you might choose one over the other by discussing their fundamental differences.



DEVICE IDENTIFICATION

AWD

Can use server or client-side code to detect the devices

Serves separate HTML, using CSS to modify the presentation of a website based on screen size



RWD

Uses "media queries" to detect the device

Flexible images and fluid grids are sized correctly to fit the screen



CONTENT OPTIMIZATION

AWD

Information is pre-selected and only mobile-optimized assets are downloaded



RWD

Information for every device is included. All assets are downloaded regardless of whether they are used or not.



DEVICE OPTIMIZATION

AWD

Distinct templates optimized for wach device



RWD

Single template for all devices



FEATURES

AWD

Streamlines, layered approach

Utilizes scripting to assist with adapting to various devices and screen sizes



RWD

Comprehensive approach

Includes all of the features that a mobile or tablet web browser can support (iw. Flash or no Flash, drop-down menus, touch, javascript, image resolution, video, resolution, etc.)



PERFORMANCE

AWD

Page loads faster

Images are optimized for specific device screen resolutions, reducing file size and load times



RWD

Page loads slower

Full size images are downloaded then resized to fit the device



DEVELOPMENT

AWD

Adaptive templates are implemented on a pre-existing site



RWD

Have to undertake site rebuild



DEPLOYMENT

AWD

Higher barrier to entry

Developers need to have a solid grasp of JavaScript to use this technique



RWD

Designing and testing phase can be difficult

User experience must be customized for every possible device



CONCLUSION

AWD

DOES NOT REQUIRE REBUILD

REQUIRED ADVANCED KNOWLEDGE OF JAVASCRIPT AND CSS

IDEAL PERFORMANCE ACROSS MULTITUDE OF DEVICES



RWD

EASIER TO IMPLEMENT FOR BRAND NEW WEB BUILDS

REQUIRES REBUILD FOR EXISTING SITES

POOR PERFORMANCE ACROSS MULTITUDE OF DEVICES



SKYROCKET AWD RWD Vs. · ADAPTIVE WEB DESIGN VS. RESPONSIVE WEB DESIGN • Why does it matter? Why one and not the other, when they both essentially make my website look 'pretty' on a smaller (or larger) screen? Well, let's discover the reasons why you might choose one over the other by discussing their fundamental differences. DEVICE IDENTIFICATION Uses "media queries" to detect the device Can use server or client-side code to detect the devices Serves separate HTML, using CSS to modify the presentation of a website based on Flexible images and fluid grids are sized correctly to fit the screen .html .html screen size CONTENT OPTIMIZATION Information is Information for every pre-selected and only mobile- optimized assets are downloaded device is included. All assets are downloaded regardless of whether they are used or not DEVICE OPTIMIZATION Distinct templates optimized for each device Single template for all devices FEATURES Streamlined, layered approach Comprehensive approach Utilizes scripting to assist with adapting to various devices and screen sizes. Includes all of the features that a mobile or tablet web browser Will detect the type of device and it's functionalities, then change the site's behaviour accordingly js can support (ie. Flash or no Flash, drop-down menus, touch, javascript, image resolution, video resolution, etc.) js O PERFORMANCE Page loads faster Page loads slower Only loads the required resources for the user's device. User is only using one device, but they have to wait for all of the page elements and resources for all devices to load Images are optimized for specific device screen resolutions, reducing file size and load times Full size images are downloaded then resized to fit the device DEVELOPMENT Adaptive templates are implemented on a pre-existing site Have to undertake site rebuild DEPLOYMENT Higher barrier to entry Designing and testing phase can be difficult Developers need to have a solid grasp of JavaScript to use this technique User experience must be customized for every possible device CONCLUSION • DOES NOT REQUIRE · EASIER TO IMPLEMENT FOR REBUILD BRAND NEW WEB BUILDS • REQUIRES ADVANCED • REQUIRES REBUILD FOR KNOWLEDGE OF EXISTING SITES JAVASCRIPT AND CSS • IDEAL PERFORMANCE • POOR PERFORMANCE ACROSS MULTITUDE ACROSS MULTITUDE OF OF DEVICES DEVICES SKYROCKET mashable.com/2012/12/11/responsive-web-design - socialmediatoday.com/syed-noman-ali/1653631/why-responsive-web-design-indispensable-your-business - resources.monetate.com/ios/images/profile/real_images/17034553icon17034553.paf - milehighmarketing.com/what-is-responsive-design-adaptive-webstes/ mobile.smashingmagazine.com/2013/06/18/adapting-to-a-responsive-design-case-study/ www.webmonkey.com/2013/05/the-two-flavors-of-a-one-web-approach-responsive-vs-adaptive/ - www.comscoredatamine.com/2012/10/fast-money-when-wallets-go-digital/ - www.dotcominfoway.com/bloga/responsive-web-design-infographic - www.rasmussen.edu/degrees/design/blog/web-design-101-adaptive-vs-responsive-design - www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/ - designinstruct.com/roundups/infographics-leam-responsive-web-design/