Over the Air 2011 slides - Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript

I spoke at Over The Air last year and - gasp! - was invited back.

The beautiful grounds, gloriously sunny day and fabulously geeky setting of Bletchley Park, the site of secret British codebreaking activities during WWII and birthplace of the modern computer, augured well for what was a superb event. My hearty congratulations and thanks to the organisers.

Here are my slides:

The slides might not make that much sense by themselves (sorry) but here are some resources I mentioned or which might just help you. The country-specific lists of top 10 websites visited and handsets used are from our monthly State of the Mobile Web reports.

Mobile-specific resources

• Mobile-friendly: The mobile web optimization guide (by Yours Truly)
• Testing your mobile sites on desktop (Win/ Mac/ Linux) with Opera Mobile Emulator (see instructions)
• Opera Mini: web content authoring guidelines
• Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG) (If you design so people with disabilities can use your content, it has good side-effects for mobile users)
• Making an iPad HTML5 App & making it really fast - obviously, iPhone-centric, but useful information about performance implications of some CSS shadows, gradients etc

CSS Media Queries and Viewport for adaptive content

• Nice project-based approach to the subject: Love your devices: adaptive web design with media queries, viewport and more
• Demo: Media Queries: CSS that responds to the screen width
• Demo: CSS background-size
• Screencast: "Mobile web development techniques" (18 mins)
• Flexible Web Layouts with CSS3 Media Queries tutorial
• An introduction to meta viewport and @viewport
• CSS Device Adaptation - the draft "CSS Viewport" specification (implemented in Opera with -o- prefixes)
• Combining media queries and JavaScript
• Mediaqueri.es showcase site

HTML5's friends: JavaScript APIs

• How to use the W3C Geolocation API
• Taking your web apps offline: A tale of Web Storage, Application Cache and WebSQL
• Introducing Web Sockets
• WebSockets and Server-sent Events
• Web Workers rise up!

Browser as a platform

• Opera and HTML5 <device> element to give web sites access to a device's camera, and Orientation Events (now renamed getUserMedia())
• Video tutorial: Access your phone's camera with WAC widgets
• Creating web content for TV
• Introduction to W3C Widgets by Peter-Paul Koch
• Widgets repository - try some out.
• W3C Widget spec

And here's a photo of me and some fellow W3C alumni from the W3C Mobile Web specifications: glamourtastic!