Adap%ve Web Design vs. Responsive Web Design
Designing for the Mobile Consumer
Jam Hashmi CEO & President
ClickTecs @jamshaidhashmi [email protected]
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
Nomenclature
Responsive Web Desig
n Adap5ve Web Design
Nomenclature
©2013 WSI. All rights reserved.
Responsive Web Desig
n Adap5ve Web Design
Simplify
The two main categories: – Adap%ve Web Design (AWD) – Responsive Web Design (RWD)
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
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.
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.
Examples of Adap5ve Website Design
Different URL -‐ AWD
Different URL -‐ AWD
IPhone Portrait
Examples of Responsive Website Design
Same URL -‐ RWD
IPad Portrait IPad Landscape
Same URL-‐ RWD
©2013 WSI. All rights reserved.
Iphone Portrait
IPad Portrait
The Power of RWD
Average 39% decrease in Bounce Rate
Finding Opportunity
• Get the Analy%cs Access
Find Lost Opportuni%es
• Mobile Traffic Bounce Rate
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
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
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
