
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/
Adaptive Web Design vs. Responsive Web Design
Source
http://skyro...eb-design/Category
TechnologyGet a Quote