Lecture Presentation

Content

  • 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
  • Limitations
    • Screen
    • Input methods (no keyboard / touch)
    • Processing power (battery drain a side effect)
    • HTML5, CSS3, JavaScript or other technology features

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

Mobile platforms

  • 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)

Definitions

  • Web Sites
    • Information published on the web primarily for reading. Passive, not much interacting.
  • Web Application
    • 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.
  • Native Application
    • 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

  • Android
    • 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.
  • iOS
    • 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.
  • Windows Phone
    • .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
    • Based on JavaScript with both open source and commercial licenses.
  • PhoneGap
    • Open source project for building mobile applications using html, css and JavaScript. Later bought by Adobe and renamed Cordoba but still under open source license (at Apache).

Mobile browsers

  • Android
    • Built-in (stock) browser based on WebKit
    • Alternatives available are Chrome, Firefox and Opera
  • iOS
    • Built-in browser is Safari for iOS, also based on WebKit
    • Alternative available is Opera Mini
  • Windows Phone
    • Modified Internet Explorer 8 for version 7.5
    • Modified Internet Explorer 10 for version 8
  • Other platforms have mostly custom browsers (not WebKit-based)

Statistics

  • http://gs.statcounter.com
    • Try out different regions and countries. Can differ quite a bit. Also remember that this is not an exact science (not measuring all sites on the net, of course).
  • Smartphone subscribers in the USA (August 2012)

What is different between computer and mobile web?

  • Very little
    • 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.

Technical differences

  • Very similar
    • HTML, CSS and JavaScript is more or less the same
  • Screen
    • Smaller screens. Scaling might occur. Viewport to consider.
  • Touch
    • Different types of interactions with the screen. No hover effect available.
  • Performance
    • 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.
  • Book recommendation
    • 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
    • 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)
  • Android Emulator
    • Best for testing everything, but slooooow
  • iOS Simulator
    • Equally good for testing everything but Mac OS X only

Detecting a mobile device

  • User Agent
    • 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
    • The user agent string can also be read on the client side using javascript in the browser. However, at this time, all content has already been delivered to the client (html of the first page at least).
  • Client side feature detection
    • It is also possible to detect a single feature, like the size of the screen or if the browser supports touch events, using javascript in the browser.

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
    • Using css3 media queries and/or client side detection and javascript to tweak the page

Server side detection using php

  • How do you know if the user agent is from a mobile device?
  • Example in php
    $matching = 'mobile';
    if (preg_match($matching, $_SERVER['HTTP_USER_AGENT']))
      echo 'Great, you have a mobile!';
    

Server side detection with manual choice in php

  • Strategy for offering the user a choice
    • 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

Modernizr

  • Javascript library to detect a multitude of features in the browser
    • 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.
  • Download options
    • Development version
      • 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.

Using Modernizr

  • Using css
    • Can be used using css only since it sets specific class names on the body element according to what features were checked and detected.
  • Using javascript
    • If you'd rather, the availablity of the checked features can also be investigated by your own javascript code/calls.

Viewport

  • 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)

Viewport defaults

Viewport properties

  • Specify a meta tag inside the "head" tag
    • <head>
      <meta name="viewport" content="width=1024" />
      </head>
  • width, height
    • The width and height of the viewport in pixels, or "device-width" and/or "device-height" to set it to the physical size of the device.
  • user-scalable
    • Specify with a "yes" or a "no" if the user should be able to change the scale (by pinch-zooming or similar). I recommend never setting this to "no". Can be overridden in browser settings.
  • initial-scale
    • Specify with a floating point number, like "1.0" (normal) or "0.5" (half), what the initial scale should be after the page has loaded.

Finding inspiration