MEDIA QUERIES, USER-AGENTS, AND USER OPT-IN, OH MY!BUILDING MOBILE WEBSITES                   Shoshi Roberts              ...
WAYS TO BUILD YOUR MOBILE SITE1) Detect the User-Agent String and redirect to a mobile site2) Media Queries (aka. Responsi...
MOBILE WEBSITES VS. APPS:                      WHY HAVE A MOBILE SITE?• Mobile   sites get 10% of all web traffic (stats fr...
EXAMPLE FROM TWITTERUser gets an email:        User clicks on the link and goes to:You have a new follower!   mobile.twitt...
MOBILE WEBSITES VS. APPS                   Moral of the story:Some people will need websites and some will need apps.     ...
USING USER-AGENT STRINGBENEFITS• Entirely   optimize your site for mobile• Provide    tailored Content just for mobile use...
USING USER-AGENT STRINGAPACHE CONFIG (.htaccess)RewriteEngine OnRewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|  Anoth...
USING MEDIA QUERIESBENEFITS• Makes your site look great at all screen sizes (desktop/ tablet/mobile)• Unified   content acr...
USING MEDIA QUERIESSINGLE CSS FILE@media screen and (min-device-width: 769px) {   div.example {     width: 30%;  /* 3 colu...
USING MEDIA QUERIESMULTIPLE CSS FILES (put this HTML in <head>)<meta name="viewport" content="width=device-width,      ini...
USING MEDIA QUERIES       DESKTOP
USING MEDIA QUERIES  TABLET      MOBILE
USING USER OPT-INBENEFITS• User   sees the desktop site they know and love• User   gets to choose which version to seeDRAW...
USING USER OPT-INMAKE A LINK!<a href=”http://mobile.example.com/”>Mobile Site</a><a href=”http://example.com/mobile/”>Mobi...
WRAPPING IT UP• Responsive   Design is easy to incorporate now• Usemobile site redirects (with the User-Agent string) when...
THANKS        AND HAPPY HACKING!  @shoshizilla for @ladieswhocodeSpecial Thanks to @mintdigital for hosting
Upcoming SlideShare
Loading in...5
×

Building Mobile Websites

5,517

Published on

Media Queries, User-Agents, and User-Opt in, oh my!

We discuss 3 major ways to build a mobile website along with the benefits and drawbacks of each.

1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,517
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

Building Mobile Websites

  1. 1. MEDIA QUERIES, USER-AGENTS, AND USER OPT-IN, OH MY!BUILDING MOBILE WEBSITES Shoshi Roberts @shoshizilla
  2. 2. WAYS TO BUILD YOUR MOBILE SITE1) Detect the User-Agent String and redirect to a mobile site2) Media Queries (aka. Responsive Design)3) User Opt-in Link
  3. 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. 4. EXAMPLE FROM TWITTERUser gets an email: User clicks on the link and goes to:You have a new follower! mobile.twitter.com/
  5. 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. 6. USING USER-AGENT STRINGBENEFITS• Entirely optimize your site for mobile• Provide tailored Content just for mobile users• Allows you to build features for specific mobile needsDRAWBACKS• Separate from your desktop site, possible lack of continuity
  7. 7. USING USER-AGENT STRINGAPACHE CONFIG (.htaccess)RewriteEngine OnRewriteCond %{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. 8. USING MEDIA QUERIESBENEFITS• Makes your site look great at all screen sizes (desktop/ tablet/mobile)• Unified content across all platformsDRAWBACKS• More complicated to have custom content or special features on mobile site
  9. 9. USING MEDIA QUERIESSINGLE 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. 10. USING MEDIA QUERIESMULTIPLE 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. 11. USING MEDIA QUERIES DESKTOP
  12. 12. USING MEDIA QUERIES TABLET MOBILE
  13. 13. USING USER OPT-INBENEFITS• User sees the desktop site they know and love• User gets to choose which version to seeDRAWBACKS• User may leave because of a poor experience before the click on the “mobile version” or even “download app” link
  14. 14. USING USER OPT-INMAKE 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. 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. 16. THANKS AND HAPPY HACKING! @shoshizilla for @ladieswhocodeSpecial Thanks to @mintdigital for hosting

×