Clear As Mud Part 1: Mobile, Responsive and Adaptive Websites Explained
Download as PPTX, PDF0 likes1,089 views
The document explains different types of websites, focusing on traditional, mobile, responsive, and adaptive designs. It outlines their characteristics, advantages, and disadvantages, including user experience, cost, and maintenance. The author advises that Google recommends responsive designs for better optimization and penalizes non-mobile-friendly sites.
Clear As Mud Part 1: Mobile, Responsive and Adaptive Websites Explained
- 1. Clear As Mud: Design “Types”, Web Apps, Mobile Apps and Cloud Computing Explained Shannon Lewis Principal – Operations Panoptic Development, Inc. www.panopticdev.com
- 2. Responsive Website Mobile Application Saas (Software as a Service) Mobile Website Web Application What Does This Mean? Cloud Computing Adaptive Website “Traditional” Website
- 3. “Types” of Websites • Websites that have the same user experience regardless of the device used (desktop, tablet, mobile) – “Traditional” website – Mobile website* • Websites that detect the device accessing the page and provides an optimal experience for that device – Responsive website – Adaptive website
- 4. Traditional Website • Single website to build and maintain • Does not adjust for the type of device accessing it. • Least expensive to build and maintain • Same user experience regardless device (desktop, tablet, mobile)
- 6. Mobile Site • Main site detects the mobile device and redirects to a mobile friendly site • Separate URL m.website.com or mobile.website.com • Must maintain two websites (two code bases) • ecommere sites commonly use mobile sites • Mobile site usually has the option to enter the full site • Fun Hack: You might not know you have been redirected to a mobile site. Touch the browser’s address bar to see.
- 7. Mobile Website www.llbean.com (desktop) m.llbean.com (mobile) www.llbean.com (tablet) m.llbean.com (desktop)
- 8. Responsive/Adaptive Site • Detects the screen size/resolution and provides the optimal experience • Single code base, single site • Main difference between the two: – Adaptive: Multiple static layouts for each for a different screen resolution (server side) – Responsive: Dynamically adjusts to screen resolution (client side, slower) • Fun Hack: Adjust your browser size, if the screen changes then it’s a responsive site.
- 10. “Traditional” Mobile Site Responsive Adaptive # of websites 1 (single URL) 2 (two URLs) 1 (single URL) 1 (single URL) User Experience Optimized for desktop 2 sites each optimized Optimize for screen resolution Optimize for screen resolution Analytics (data gathering)/SEO Excellent, single URL for tracking Not Optimal – Two URLs Excellent, single URL for tracking (Google’s preference) Single URL for tracking; possible different content same URL Keywords Can not differentiate between “user types” Can have keywords specific to mobile users Can not differentiate between “user types” Can have keywords specific to mobile users Cost (build &maintain) Least expensive More Expensive than Responsive? More Expensive than Mobile? Most Expensive? Compare and Contrast
- 11. When to Use? • Google recommends Responsive. Penalizing non-mobile friendly sites. • Know your audience, what percentage of visitors are desktop, tablet or mobile? • What is your budget? Can you afford to maintain two sites? Can you afford the extra expense of building a responsive or adaptive design? • Responsive sites have longer load time, is your site image heavy? This is why a lot of ecommerce sites are not responsive.
- 12. • Contact us at: – contact@panopticdev.com • Follow us at: – www.panopticdev.com – panopticdev – https://www.facebook.com/Panopticdev