Responsive vs. adaptive vs. device-specific: which one is best?
Download as PPTX, PDF3 likes1,465 views
This document discusses responsive, adaptive, and device-specific design strategies for mobile websites. Responsive design uses CSS to resize layout and content based on screen size, requiring only one code base. Adaptive design detects the device and loads optimized content, requiring more technical skills. Device-specific sites redirect to separate mobile pages, best as launching points not full sites. The best solution uses all three together based on content needs. Designing for small screens first optimizes the mobile experience.
Responsive vs. adaptive vs. device-specific: which one is best?
- 1. © 2014 Catalyst May 22, 2014 Responsive vs. adaptive vs. device-specific: The best mobile strategy for your website Justin Morelli, UX Designer jmorelli@catalystinc.com www.catalystinc.com
- 2. 30%-60% of Web traffic is mobile 2 It’s a given that you need a mobile version of your site. But how do you deliver the best mobile experience to drive conversions and meet business goals?
- 3. Responsive design 3 Uses CSS (cascading style sheets) to resize your site layout and content, based on the window size of the Web browser.
- 4. Responsive design 4 Pros: No advanced scripting required Restructures your content to any size window or device Requires only one set of code A single page URL is good for SEO (vs. one for desktop, another for tablet, a third for mobile) Mobile and tablet browsers support it Over 85% of all browsers support it regardless of device IE 8.0 doesn’t … but you can use a static width without affecting mobile at all
- 5. 86.93% of browsers support CSS3 Media Queries 5
- 6. Responsive design 6 Cons: If you didn’t design for it, your current page templates will probably need to be redone Doesn’t always play nice with a CMS (Content Management System) because the code in many CMSs is not easily modified (this is changing though) Large images are only scaled for mobile, which can have an impact on load times over the air All content is loaded regardless of device: Can slow down load times
- 7. Adaptive design 7 Like responsive, adaptive resizes and restructures content, but in a different way. It detects which device you’re using and loads only the content specific to your device. It’s done on the client side with JavaScript or on the server side when a page is requested.
- 8. Adaptive design 8 Pros: Loads quicker and more efficiently because it loads only the content or images for your device, browser width, or pixel density (e.g., iPhone® retina display) Can load to completely separate templates, based on device. Good if your existing templates are incompatible with responsive Single URL for each page is good for SEO Most browsers support it
- 9. Adaptive design 9 Cons: Requires a more technical approach. May require application developers for server-side requests Requires JavaScript for client-side use (usually not a major concern) May require significantly more time to maintain and update multiple templates and code bases
- 10. Device-specific sites 10 Redirects you to a separate mobile page or mobile site. Typically associated with mobile phones vs. tablets, but can be used with either. Often direct you to the most important information you may need on the go, such as store hours, phone numbers or top links. Usually followed by an option to view full site content.
- 11. Device-specific sites 11 Pros: A very focused experience to speed a user to his/her end goal The experience is directly created for the specific device and not concerned with supporting other devices Can be quickly set up to support top content
- 12. Device-specific sites 12 Cons: Not good for a full site experience, because a user will not be able to find the same content easily on different devices Bad for SEO for the same reason Not a flexible approach
- 14. Which is best? 14 Responsive design is the most flexible solution. It offers a single point of maintenance and allows for support of new devices that may be released … effectively working on any size screen. SUMMARY – Responsive design
- 15. Which is best? 15 Adaptive design may allow for the most optimized experience. It loads only the elements needed for your device. If done properly it can speed download times for mobile devices. SUMMARY – Adaptive design
- 16. Which is best? 16 A device-specific site is best used as a launching point for specific site experiences. You may need a separate version of the site for a landing page interstitial or mobile banking, but it’s not great for most full sites. SUMMARY – Device-specific site
- 17. Best solution: Use all three together 17 Example – mobile banking: You may want a device-specific landing page to get the user to the branch locator or other frequently used pages For users who move on to the full site content, you may want a responsive layout for the bulk of the site content to make sure it is accessible (and easy to maintain) You may have some pages that would be best served using adaptive design, such as a loan calculator
- 18. Design for the small screen first 18 In all cases, rethink your Web strategy to design for the small screen first: Think about the content your customers want Think about the context in which they are experiencing your content Don’t assume your customers want less on a phone or tablet Do assume they want it to be quick and easy – on any device
- 19. About the author: Justin is a multichannel marketing strategist, UX designer and business analyst who specializes in aligning user experiences with business goals. 19
- 20. About Catalyst: Catalyst is a direct and digital marketing agency that helps clients acquire, retain and develop long-term relationships with their customers.
- 21. For more information, contact Justin Morelli, UX Designer, at jmorelli@catalystinc.com www.catalystinc.com Twitter: @scienceplussoul Facebook: facebook.com/scienceplussoul