Half a million members creating, sharing and exploring great visual content. Join us!

Header

Transcript

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

Adaptive Web Design vs. Responsive Web Design

shared by Skyrkt on Oct 23, 2013 in Technology

8K views

12 faves

1 comment

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 on...
Source: skyrkt.com
Rank: 79 of 6413 in Technology

Designed By

Skyrkt

Embed Code

Switch to Wordpress Code
Click below to copy
Customize size

Tell your story visually before December 31st and get a free iPad Air!*

The holidays are a great time to tell your brand story. From Black Friday trends and Mobile Shopping guides to the Best and Worst Times to Book Travel and Thanksgiving etiquette, the Visually team will help you craft your brand's unique stories and raise your social profile during the noisy holiday season.


*Requires $10k minimum purchase
Infographic
Video
Interactive
Presentation

60 characters minimum (0)

X
Credits
Publisher
Designer
Developer
Animator
Journalist
+ Add More Credits
Make Private

This is the final step