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 Platform2. Harnessing Collective

Intelligence3. Data as the Next “Intel Inside”4. End of the Software Release

Cycle5. Lightweight Programming

Models6. Above the level of a single

device7. 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 Propertiesmax-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

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

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 ...

Nokia 6288 – on Vodafone

For more information:

•http://mobiforge.com/

•http://www.w3.org/TR/mobile-bp/

•Ask me (matt@mrlacey.co.uk)

Let’s talk