Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript – Bruce Lawson
Bruce Lawson was a great presenter, and is the author of Introducing HTML5
Much of the world is not using smart browsers, they are using browsers for their feature phones. Opera mini is a popular browser on feature phones around the world.
Radically different places access the same information.
People say mobile users are task focused- this is half true. Everyone is task focused. You don’t need a separate mobile site, just consider your content.
Three ways to handle mobile users:
- Special mobile site
- Almost always not the right way, but sometimes the quickest cheapest way.
- You do not know what the user wants. If you do provide a separate mobile site, provide a way to get out!
- No browser sniffing! – you can’t detect everything, browsers can lie.
- Do nothing, serve up the same site to mobile and desktop
- Use web standards
- You can use new javascript methods, touchstart, touchmove, listen to touch events in addition to click.
- CSS3/ graceful degradation
- HTML5 – useful for webapps
- Canvas/SVG – consider carefully, use SVG when possible. Canvas obscures information, SVG is more accessible. Don’t use canvas for UI elements. SVG can keep a DOM, so you can query/undo if necessary.
- Geolocation – use for progressive enhancement, you won’t always have it available
- HTML5 forms – < input type=”email” > other types, url, tel. These will give a different keyboard for input on the iphone, and they gracefully degrade.
- Offline support – detect state, save the day by using local/session storage. Way easier than storing in cookies.
- Web socket communication – sending information this way saves battery life
- Optimise for Mobile
- CSS Media queries – making sites that respond. “Can you do this?” “What’s your DPI?” “Landscape or portrait?” Responsive web development. See mediaqueri.es.
- If you are using media queries, set the viewport.
- Content should take center stage!
- Give dimensions of images in HTMl. This makes sure the content doesn’t move after the images are downloaded, which can be annoying – especially for mobile users, because the content they were reading may get pushed off the screen.
- Consider < a href=”tel:555.555.5555″ > because this will let phone users dial easily.
- Make accessibility a priority. Follow accessibility guidelines.
- Minimise HTTP requests. Combine CSS and javascript whenever possible. Use SVG or canvas for images if possible.
- ems rather than pixels – pixels can fail on high resolution screens
- fluid layouts
- use CSS background-size property
- turn off fancy backgrounds, shadows, etc. for mobile devices (using media queries) – they require processing power and are battery killers
- Occasional use of data URL’s can be useful
- Put javascript at the bottom of the page, or, if it must be in the head, put it after CSS so you don’t get a page flash
- Use feature detection js like Modernizr
No web apps! laziness is wise
Widgets – zip file containing web standard goodness – uses the browser platform. Gives you a downloadable app, uses the browser widget engine, but has no chrome – installation through the start menu.
Of course, you can only get certain things through a native app. Access to the camera and mic, for instance. Soon, though, you will be able to do things comparable to what you can do with a native app – access things like: contacts, calendar, media, messaging, accelerometer. HTML5 < device > – access to camera and microphone in a specific device.
Lawson demonstrated an experimental app which detects where you are, your direction, and your speed, all in the browser.