Building Mobile Websites

MEDIA QUERIES, USER-AGENTS, AND USER OPT-IN, OH MY!

BUILDING MOBILE WEBSITES

Shoshi Roberts
@shoshizilla

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

MOBILE WEBSITES VS. APPS:
WHY HAVE A MOBILE SITE?

• Mobile sites get 10% of all web trafﬁc (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 ﬂows will send you to the mobile site anyhow...

EXAMPLE FROM TWITTER
User 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, ofﬂine functionality

USING USER-AGENT STRING
BENEFITS
• Entirely optimize your site for mobile

• Provide tailored Content just for mobile users

• Allows you to build features for speciﬁc mobile needs

DRAWBACKS
• Separate from your desktop site, possible lack of continuity

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/

USING MEDIA QUERIES
BENEFITS
• Makes your site look great at all screen sizes (desktop/
tablet/mobile)

• Uniﬁed content across all platforms

DRAWBACKS
• More complicated to have custom content or special
features on mobile site

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 */
}
}

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"> 
media="screen and (min-device-width: 769px)"
href="desktop.css">
media="screen and (min-device-width: 481px) and
(max-device-width: 768px)"
href="tablet.css">
media="screen and (max-device-width: 480px)"
href="mobile.css">

USING MEDIA QUERIES

DESKTOP

USING MEDIA QUERIES

TABLET MOBILE

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

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.”

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 @ladieswhocode
Special Thanks to @mintdigital for hosting

Building Mobile Websites

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Similar to Building Mobile Websites

Similar to Building Mobile Websites (20)

Recently uploaded

Recently uploaded (20)

Building Mobile Websites