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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (16)

Semelhante a Building Mobile Websites

Semelhante a Building Mobile Websites (20)

Último

Último (20)

Building Mobile Websites