Building Mobile Websites: Media Queries, User-Agents & User Opt-In
•
11 gefällt mir•1,450 views
This document discusses different ways to build mobile websites, including using media queries, user agents, and user opt-in. It describes detecting the user agent string to redirect mobile users, using responsive design with media queries, and allowing users to opt-in to the mobile or desktop site. Responsive design allows a unified experience across devices but doesn't allow custom mobile features, while user agents allow tailored mobile content but separate sites. The document recommends using responsive design with media queries when possible and redirecting by user agent when different functionality is needed, while making it easy for users on any device.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (16)
Ähnlich wie Building Mobile Websites: Media Queries, User-Agents & User Opt-In
Ähnlich wie Building Mobile Websites: Media Queries, User-Agents & User Opt-In (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Building Mobile Websites: Media Queries, User-Agents & User Opt-In
- 1. MEDIA QUERIES, USER-AGENTS, AND USER OPT-IN, OH MY! BUILDING MOBILE WEBSITES Shoshi Roberts @shoshizilla
- 2. WAYS TO BUILD YOUR MOBILE SITE 1) Detect the User-Agent String and redirect to a mobile site 2) Media Queries (aka. Responsive Design) 3) User Opt-in Link
- 3. MOBILE WEBSITES VS. APPS: WHY HAVE A MOBILE SITE? • Mobile sites get 10% of all web traffic (stats from 2009, it’s higher now) • 25% of internet users in the US only browse on mobile devices (this is low on a global scale, it’s 70% in Egypt) • 40% of tweets are sent from mobile devices (both site and app) • Some user flows will send you to the mobile site anyhow...
- 4. EXAMPLE FROM TWITTER User gets an email: User clicks on the link and goes to: You have a new follower! mobile.twitter.com/
- 5. MOBILE WEBSITES VS. APPS Moral of the story: Some people will need websites and some will need apps. You usually want both. Use your best judgement. We want happy users. You’re a good candidate for an app if you need: location data, games, offline functionality
- 6. USING USER-AGENT STRING BENEFITS • Entirely optimize your site for mobile • Provide tailored Content just for mobile users • Allows you to build features for specific mobile needs DRAWBACKS • Separate from your desktop site, possible lack of continuity
- 7. USING USER-AGENT STRING APACHE CONFIG (.htaccess) RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent| AnotherMobileUserAgent|YouSeeWhereThisGoes...) RewriteRule ^$ http://mobile.example.com/ [R,L] FOR RAILS, PYTHON, PERL, ASP, PHP, JS,NGINX... http://detectmobilebrowsers.com/
- 8. USING MEDIA QUERIES BENEFITS • Makes your site look great at all screen sizes (desktop/ tablet/mobile) • Unified content across all platforms DRAWBACKS • More complicated to have custom content or special features on mobile site
- 9. USING MEDIA QUERIES SINGLE CSS FILE @media screen and (min-device-width: 769px) { div.example { width: 30%; /* 3 columns for desktop */ } } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { div.example { width: 50%; /* 2 columns for tablets and netbooks */ } } @media screen and (max-device-width: 480px) { div.example { width: 100%; /* 1 column for mobile */ } }
- 10. USING MEDIA QUERIES MULTIPLE CSS FILES (put this HTML in <head>) <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <!-- for global styles --> <link rel="stylesheet" media="screen and (min-device-width: 769px)" href="desktop.css"> <link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width: 768px)" href="tablet.css"> <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="mobile.css">
- 11. USING MEDIA QUERIES DESKTOP
- 12. USING MEDIA QUERIES TABLET MOBILE
- 13. USING USER OPT-IN BENEFITS • User sees the desktop site they know and love • User gets to choose which version to see DRAWBACKS • User may leave because of a poor experience before the click on the “mobile version” or even “download app” link
- 14. USING USER OPT-IN MAKE A LINK! <a href=”http://mobile.example.com/”>Mobile Site</a> <a href=”http://example.com/mobile/”>Mobile Site</a> MAKE IT FANCY • UseJS or another framework to detect the user-agent and provide a banner at the top of the page • NOTE:This can be effective if used the opposite way: “Want to see the desktop version? Click here.”
- 15. WRAPPING IT UP • Responsive Design is easy to incorporate now • Usemobile site redirects (with the User-Agent string) when you want to use different functionality and design • Make it easy for the user no matter how they visit your site • Consider your user’s desires, and use your best judgement
- 16. THANKS AND HAPPY HACKING! @shoshizilla for @ladieswhocode Special Thanks to @mintdigital for hosting