Upload
jamshaid-jam-hashmi
View
12.756
Download
2
Embed Size (px)
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.
Citation preview
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