Mobile Web

Mobile devices are an increasingly large part of web traffic.
- StatCounter Desktop vs Mobile
- Approximately 15% globally, 7% in China, 11% in Canada according to StatCounter.
- Likely much more on sites that have (1) a good mobile site, and (2) a reason for mobile use.
  - e.g. Facebook, Twitter, restaurant reviews
- Should always ask yourself: what do/should mobile users see on your site?
Main strategies to get your stuff on mobile devices:
- mobile app (i.e. program to install and run on the phone)
- mobile web site (separate site, with design and content for mobile devices)
- mobile CSS (same markup, different stylesheet)
- hybrid solutions

Mobile CSS

The idea: use the same HTML, but separate stylesheet for mobile devices.
- Easiest solution, especially for static sites.
- But can't have big content differences.
- Should have good markup to start with: semantically meaningful, valid, etc.
Can indicate media="handheld" for a stylesheet.

But modern mobile browsers use the “screen” CSS, so you have to be more clever with the media selector:

<link rel="stylesheet" media="handheld, only screen and (max-device-width: 768px)"
type="text/css" href="mobile.css" />
<meta name="viewport" content="initial-scale=1.0" />

Also gave a hint about scaling the display.

Then…
- Desktop browsers read your “main” CSS.
- Older mobile: only your mobile CSS
- Newer mobile: both stylesheets.
So, your mobile CSS will likely be a copy of your main CSS.
- or @import it.
- explicitly turn off anything you don't want in mobile.
- e.g. float: none;

Separate Mobile Site

With just CSS differences, can have different appearance, but not content.
- Different content requires different HTML.
- Sometimes necessary: what users want when mobile could be very different than on a desktop.
Can create a separate mobile site.
- Often at m.yoursite.com or yoursite.com/m/.
- Requires more resources: two separate sites to maintain.
- But easier with dynamic content: different frontend code with the same content.
- i.e. have separate mobile versions of controllers/views, but same underlying code and database.
- If using a CMS for non-dynamic content, it may take care of mobile views of your content.
Probably want to switch to the mobile site automatically with browser detection.
- … so mobile browsers go automatically to the mobile site.
But some cautions:
- Never redirect to useless/unrelated content. e.g. from http://server/articles/some-news to http://m.server/.
- Give the user the option to switch to the “full” site and remember that choice.
- You are not committed to keeping browser detection code up to date with every new phone/browser version: use a frequently-updated library or be vary careful.
Detection/redirect logic can live in Javascript, application code, or server config.
- Best choice depends on your situation.
- … but probably in your application code if you're the one doing the development.

Mobile Apps

One more option: ignore the web and put an app in the device's app store(s).
- But I'm biased against.
Pros:
- $$$ and publicity from app store.
- Access to phone features blocked from Javascript (contacts, filesystem, camera, GPS, …)
- Faster (for games, etc).
- Can function with no data connection.
Cons:
- Separate app (and language/framework) for iOS, Android, Blackberry, Windows Phone, …
- Users must install: barrier to entry.
- Outside web sites can't deep link to content.
Most apps probably could have been decent mobile sites.

Hybrid Mobile Solutions

PhoneGap: you create your stuff in HTML+CSS+JS; PhoneGap wraps that up and makes it look like an app.
- cross-platform
- Allows access to more phone features through JavaScript.
Mobify: use content from your “real” web site; reformat on-request for mobile.
- You select pieces of content to be used on mobile versions of pages.
- Mobify builds the mobile versions of pages when requests come in, no never out of date.