responsive web design (rwd) vs adaptive web design (awd)
DESCRIPTION
30% to 50% of your website’s traffic now comes from mobile devices. Taking a One Web approach ensures that not only does your site work on the smartphones and tablets of today, but it can be future-proofed for the unimagined screens of tomorrow. Three popular approaches to developing a One Web site: using a responsive design; client-side adaptive designs; and server-side adaptive designs. One is not better or worse than the other; each has its own strengths and weaknesses and the wise web developer will consider the benefits and drawbacks of each before picking the one that works for their next project.TRANSCRIPT
![Page 1: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/1.jpg)
Adap%ve Web Design vs. Responsive Web Design
Designing for the Mobile Consumer
Jam Hashmi CEO & President
ClickTecs @jamshaidhashmi [email protected]
![Page 2: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/2.jpg)
Agenda
§ Understanding the Nomenclature § Adap%ve Website Design (AWD) § Responsive Website Design (RWD) § Advantages and Disadvantages of AWD and RWD
§ Deciding between Responsive and Adap%ve § Examples from Search Results PorLolio § How to uncover lost Opportuni%es in Analy%cs § Q/A
![Page 3: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/3.jpg)
Nomenclature
Responsive Web Desig
n Adap5ve Web Design
![Page 4: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/4.jpg)
Nomenclature
©2013 WSI. All rights reserved.
Responsive Web Desig
n Adap5ve Web Design
![Page 5: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/5.jpg)
Simplify
The two main categories: – Adap%ve Web Design (AWD) – Responsive Web Design (RWD)
![Page 6: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/6.jpg)
Similari%es AWD & RWD
Both allow websites to be viewed in mobile devices and various screen sizes, ul%mately providing visitors with a be[er mobile user
experience
![Page 7: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/7.jpg)
Adap%ve Web Design (AWD)
• Uses the server to detect the device the website is being viewed on (desktop, tablet, smartphone)
• Sends specific files for that device • Dis%nct templates for each device • Pages load faster – usually housed on its own domain m.domain.com or domain.com/m
The condensed defini5on of an adap5ve design is that it will change to fit a predetermined set of screen and device sizes.
![Page 8: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/8.jpg)
Responsive Web Design (RWD)
• Uses specific CSS code to modify the presenta%on of a website based on the size of the device it is being displayed on
• Informa%on for every device is downloaded regardless of whether it is used
• Pages load slower – Same Domain name
The condensed defini5on of a responsive web design therefore is that it will fluidly change and respond to fit any screen or device size.
![Page 9: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/9.jpg)
Examples of Adap5ve Website Design
![Page 10: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/10.jpg)
Different URL -‐ AWD
![Page 11: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/11.jpg)
Different URL -‐ AWD
IPhone Portrait
![Page 12: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/12.jpg)
Examples of Responsive Website Design
![Page 13: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/13.jpg)
Same URL -‐ RWD
IPad Portrait IPad Landscape
![Page 14: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/14.jpg)
Same URL-‐ RWD
©2013 WSI. All rights reserved.
Iphone Portrait
IPad Portrait
![Page 15: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/15.jpg)
The Power of RWD
![Page 16: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/16.jpg)
Average 39% decrease in Bounce Rate
![Page 17: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/17.jpg)
Finding Opportunity
• Get the Analy%cs Access
![Page 18: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/18.jpg)
Find Lost Opportuni%es
• Mobile Traffic Bounce Rate
![Page 19: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/19.jpg)
Deciding b/w AWD & RWD
• Adap%ve requires you to develop and maintain separate websites either by URL or by separate HTML/CSS code
• With a separate website/HTML, you can fine tune and op%mize how your site displays on a par%cular device
• With adap%ve web design you can op%mize image sizes i.e. low resolu%on for low-‐bandwidths
• SEO, Links, Content all need to be redone
![Page 20: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/20.jpg)
Deciding b/w AWD & RWD
• Responsive web design relies on HTML5, CSS3 and Javascript, and therefore works best in rela%vely modern web browsers
• Responsive web design is suitable for delivery across an increasingly fragmented mobile device market (we noted over 500 devices used in the last client example shared)
• SEO, Links, Content all get carried over … Google Loves Responsive
![Page 21: Responsive Web Design (RWD) vs Adaptive Web Design (AWD)](https://reader034.vdocuments.site/reader034/viewer/2022052321/554bd5e7b4c905ac708b4f0f/html5/thumbnails/21.jpg)
About ClickTecs
• Founded in 2001 • Head Office in Mississauga, Canada • Our Services: – Website Design & Development (e-‐commerce) – SEO & Social Media Marke%ng – PPC and Landing Page A/B Split Tes%ng – Custom Applica%on Development