What you can do with web technologies on mobile devices
What the differences are between desktop web browsing and browsing on mobile devices
The history of mobile devices and platforms
1996 Nokia Communicator
2000 J2ME JSR68 Specification - Java on mobiles
2002 Blackberry by Research In Motion (RIM)
2007 iPhone by Apple
2008 Android by Google
2010 iPad by Apple
What is a mobile device?
For the purposes of this content
Device with one or more relevant limitations that may need to be considered when building a web site or web application
Input methods (no keyboard / touch)
Processing power (battery drain a side effect)
The history of The Mobile Web
1998 WML (version 1.1), 2001 (version 2.0)
2004 XHTML Mobile Profile 1.1
2004 WhatWG begins work after W3C failed their attempt at XHTML4
2007 Safari on iPhone uses WebKit
2007 W3C continues WhatWG's work and HTML5 begins
Android from Google
Version 4.1 (Jelly Bean) is the latest
Devices from many manufacturers like Samsung, HTC, Sony
Both phones and tablets
iOS from Apple
Version 6.0 is the latest
Devices are iPhone, iPad and iPod Touch
Windows Phone from Microsoft
Version 7.5 is the latest, 8 upcoming
Only phones (not tablets) from primarily Nokia but also Samsung, HTC
Blackberry from RIM
Symbian (mostly Nokia)
Information published on the web primarily for reading. Passive, not much interacting.
Information often protected by a login and with the ability to interact via buttons, commands, forms etc. Probably also possible to add/modify your own data.
An application that is built with technologies core to the platform. Could be either passive or interactive. Says more about the technique used, than what it is for.
Options for Native Applications
Java is the language. Eclipse is the development environment. Free to download the Android SDK and Eclipse which are both open source project. Works on Windows, Mac OS X and Linux. Will need to pay $29 one time fee to publish applications in Google Play Store.
Objective-C is the language. Xcode is the development environment. Free to download and use Xcode from the App Store, but only works on Mac OS X. Will need to pay $99/year to publish applications in iTunes App Store.
.NET is the programming platform with options to use C# or Visual Basic as language. Visual Studio is the development environment. Express version of Visual Studio is free to download and can be used for Windows Phone development.
Cross Platform Applications
Best of both worlds
Write one application using the same tools, language etc and create native applications for multiple platforms with almost no extra work.
MonoTouch / MonoDroid
Use .NET classes and C# to develop mobile applications for both Android and iOS. Does not hide their differences in building UI and internal calls.
Titanium from Appcelerator
Built-in (stock) browser based on WebKit
Alternatives available are Chrome, Firefox and Opera
Built-in browser is Safari for iOS, also based on WebKit
Alternative available is Opera Mini
Modified Internet Explorer 8 for version 7.5
Modified Internet Explorer 10 for version 8
Other platforms have mostly custom browsers (not WebKit-based)
What is different between computer and mobile web?
At least the browsers on Android and iOS devices are just as capable feature wise. Of course still not as fast (or battery sustainable) as a computer. May still need optimizations even though the features are there.
And quite a lot
The experience of using a computer and using a phone is quite different. Mobile is a mindset, not just a device.
Smaller screens. Scaling might occur. Viewport to consider.
Different types of interactions with the screen. No hover effect available.
Limitied performance. Battery life and network latency to consider.
User experience differences
How is a mobile used?
In daylight (hard to see screen?). With just a finger (thumb)?
When is a mobile used?
When you're in a hurry. When you're bored.
Tapworthy - Designing Great iPhone Apps by Josh Clark
Powers of the Mobile Web
Noteworthy features available on the Mobile Web
Data storage locally in the browser. Network commmunication (but limited between sites). Geolocation.
Things you will not be able to do (yet)
Taking pictures with the camera. Running code in the background. Being notified of system events.
PhoneGap is the bridge between the Mobile Web, running inside a so called WebView, and the native mobile platform. Will give access to camera, accelerometer and more (and can be extended to do more or less anything that a native application can do).
Our testing tools
Google Chrome (or Safari) on computer
Close enough for visual design (css3 etc)
Start with --user-agent for a mobile device to fool servers
Supports local files (no need for http server)
Opera Mobile Emulator
Good for testing viewport meta tag
Good for testing touch events
Supports local files (no need for http server)
Best for testing everything, but slooooow
Equally good for testing everything but Mac OS X only
Detecting a mobile device
A string describing the browser, platform, version etc. Is sent with every http request to a web server as a header. Need to extract relevant information from the string.
Server side detection
Let a server side script (php, asp.net etc) react to the provided user agent.
Client side detection, user agent
Client side feature detection
Strategies for supporting both desktop and mobile
Different sites using different domains
Usually "m." replaces "www." in the address
Bad for sharing links (can be fixed with combining it with server side detection / redirect)
Different sites/pages using server side detection
Server side script will deliver different html pages/files
Must have server side scripting in place (static html files not enough)
Same site, but change parts/content using server/client side detection
Similar to previous, just different mindset of having a single file and then adding/removing to it
Less maintenance since you probably don't have to update common things in two places
Same site, same content
Server side detection using php
How do you know if the user agent is from a mobile device?
Show links/buttons for user to manually switch to the other site (desktop/mobile). Use a cookie to remember the choice between requests (and perhaps also visits).
Create cookie on manual choice
Check cookie and let it override the user agent detection
Choice of remembering the choice between visits/sessions
Only for client side detection. You actually create a specific version of the library depending on which feature you'd like to detect. The result is a single js-file that is included in your html page.
Tests everything (unnecessary if only a few features are used). Only use during development for simplicity reasons.
Production versions (customized)
Lets you select which features to test and the downloaded script is smaller and more efficient.
Can be used using css only since it sets specific class names on the body element according to what features were checked and detected.
Mobile browser will "pretend" to have a particular window size
This is (probably) not the same as the physical screen size. When loading a web page it will be scaled/zoomed to fit the width of the physical screen size.
Define your own Viewport
By defining the size of your own viewport, you can change this behavior and set your own "pretended" window size.
Set physical screen size as the viewport
Often the best choice if the visual design has been optimized for mobile devices (with smaller screens)