Mobile Web 2.0
Mobilise your
ASP.NET Website
matt lacey
@mrlacey - blog.mrlacey.co.uk - mrlacey.mobi

Mobile Web
Vs
The web on mobile

What is “Mobile”?
•Person not device
•About context
•About the “Point of Inspiration”
•30 second not 30 minutes
•Not about minaturisation

Web 2.0
1. The Web as a Platform
2. Harnessing Collective Intelligence
3. Data as the Next “Intel Inside”
4. End of the Software Release Cycle
5. Lightweight Programming Models
6. Above the level of a single device
7. Rich User Experiences

\"we expect that
eventually the
majority of the usage
of the internet will be
on mobile phones\"

\"Mobile devices
are the most
important
technology of
them all.\"

“Google’s future
depends on the
next
internet, on
cellphones.”

http://www.codeproject.com/

What’s changed?

Who’s using the mobile web?
17,400,000 users in the UK
Mobile Social Networks
(350% increase in last 6 months - Orange)

http://www.stoplivinginthepast.com/

http://mdbf.codeplex.com/
Mobile Browser Definition File

Alternatives
•UAProfile
•WURFL (http://wurfl.sourceforge.net/)
•Device Atlas (http://www.deviceatlas.com)
•DetectRight (http://www.detectright.com/)
•Volantis (http://www.volantis.com/)
•MobileAware (http://www.mobileaware.com/)

Testing
•Emulators
•Web Emulators
•Firefox (with Add-ons)
•User Agent Switcher
•XHTML Mobile Profile
•Wmlbrowser
•Devices

Demos 1 - 3

CSS Solutions
Handheld style sheets
<link media=\"handheld“ ... />
CSS Properties
max-device-width:480px

CSS Tips
•Some browsers don’t
support CSS in other files
•Avoid trying to set position
or anything other than
simple styling.

Demo 4

Demos 5 - 7

http://ready.mobi/ - vbug.co.uk

Demo 8

http://ready.mobi/ - demo8

Demo Summary
•Detecting Mobile Browsers
•CSS
•Domains
•Images
•Colours
•Screen Size
•Page Structure

Nokia 6288
HTTP_USER_AGENT => Nokia6288/2.0 (05.92) Profile/MIDP-
2.0 Configuration/CLDC-1.1
HTTP_X_WAP_PROFILE =>
\"http://nds1.nds.nokia.com/uaprof/N6288r100.xml\"
HTTP_ACCEPT => application/vnd.wap.wmlscriptc,
text/vnd.wap.wml, application/vnd.wap.xhtml+xml,
application/xhtml+xml, text/html,
multipart/mixed, */*
HTTP_ACCEPT_CHARSET => ISO-8859-1, US-ASCII, UTF-8; Q=0.8,
ISO-10646-UCS-2; Q=0.6
HTTP_ACCEPT_LANGUAGE => en
HTTP_ACCEPT_ENCODING => gzip, deflate
HTTP_CONNECTION => Keep-Alive

Nokia 6288 – on Vodafone
HTTP_USER_AGENT => = Mozilla/5.0 (X11; U; Linux i686; en-US;
rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7 MG (Novarra-
Vision/6.1)
HTTP_ACCEPT => text/html;q=1.0, text/css; q=1.0,
application/x-javascript; q=1.0, text/plain;q=0.8,
application/xhtml+xml;q=0.6, application/x-httpd-
php;q=0.1, */*;q=0, image/gif; q=1.0, image/jpeg;
q=1.0, image/png; q=1.0
HTTP_ACCEPT_CHARSET => ISO-8859-1,utf-8;q=0.7,*;q=0.7
HTTP_ACCEPT_LANGUAGE => en
HTTP_ACCEPT_ENCODING => identity;q=1.0, gzip;q=0.1, *;q=0
HTTP_X_NOVARRA_DEVICE_TYPE => 0
HTTP_X_DEVICE_USER_AGENT => Nokia6288/2.0 (05.94)
Profile/MIDP-2.0 Configuration/CLDC-1.1
...

For more information:
•http://mobiforge.com/
•http://www.w3.org/TR/mobile-bp/
•Ask me (matt@mrlacey.co.uk)

Let’s talk