• Save
Building Mobile Websites
Upcoming SlideShare
Loading in...5
×
 

Building Mobile Websites

on

  • 5,840 views

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

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.

Statistics

Views

Total Views
5,840
Views on SlideShare
5,171
Embed Views
669

Actions

Likes
11
Downloads
0
Comments
1

14 Embeds 669

http://shoshi.me 595
http://www.dobizon9.com 24
http://on-social-web.posterous.com 14
http://localhost 13
http://www.linkedin.com 6
http://us-w1.rockmelt.com 4
https://posterous.com 3
http://flavors.me 3
http://www.shoshi.me 2
http://posterous.com 1
http://posterous.com 1
http://twitter.com 1
https://twitter.com 1
http://shoshi.herokuapp.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building Mobile Websites Building Mobile Websites Presentation Transcript

    • MEDIA QUERIES, USER-AGENTS, AND USER OPT-IN, OH MY!BUILDING MOBILE WEBSITES Shoshi Roberts @shoshizilla
    • 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
    • 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...
    • EXAMPLE FROM TWITTERUser gets an email: User clicks on the link and goes to:You have a new follower! mobile.twitter.com/
    • 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
    • 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
    • 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/
    • 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
    • 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 */ }}
    • 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">
    • 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 seeDRAWBACKS• User may leave because of a poor experience before the click on the “mobile version” or even “download app” link
    • 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.”
    • 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
    • THANKS AND HAPPY HACKING! @shoshizilla for @ladieswhocodeSpecial Thanks to @mintdigital for hosting