Presenter
Bruce Lawson, Web Evangelist Opera Software
Opera makes one browser for many devices, so there is some experience in this area.
More people are using mobile to access the web. Many people are abandoning desktops and using only mobile to access the web. Mobile is growing, and is here to stay.
USA top mobile sites:
- youtube
- wikipedia
- yahoo
- my.opera.com
- accuweather
- espn.go.com
UK top mobile sites:
- bbc.co.uk
- youtube
- wikipedia
- live.com
- my.opera.com
- bing.com
- mobile2day.com
Burma top mobile sites:
- bbc.co.uk
- my.opera.com
- nytimes
- espn.go.com
- cnnmobile.com
- getjar.com
- topshareware.com
- zedge.net
Most people want the same information, no matter where they are in the world.
Philosophy
There is no mobile web. There is only the web which we view in different ways. There is also no desktop web. or tablet web.
A separate mobile site is not necessary.
Three Methodologies (pick and mix between them)
1. special mobile site
This is almost always not the right way. Sometimes this is the cheapest quickest way (CMS does it?). There are branding difficulties with this – your audience may not even know they are on the same site.
- Refactor for small screen, but do NOT dumb it down for mobile.
- Offer the users a choice – desktop or mobile. If you send to a special mobile site, give them a link to send them to the full desktop site (and remember it… cookie). They know what they want… you don’t.
- Do NOT do browser sniffing! This is not future proof. 37 million new devices come to the market every week. You will never be able to detect those and keep up.
2. do nothing at all
- Just send the regular site to mobile browsers.
- Mobile browsers know how to deal with the web (you can now listen for touch evens with js).
- CSS3 can give you a lot of power (that also degrades well). Make sure you make these things cross-browser and future-proof it (putting it there for when it does support it). Also put it without the prefix for when it is supported everywhere. It is only eye candy by the way.
- HTML 5 – don’t use canvas for UI.
- -SVG – supported in 4 modern desktop browsers and IE9. It is not supported in native Android browser, fine in Opera Mobile on Android.
- -Geolocation
- -Offline support to in-browser storage
- -Application cache so it’s available next time.
3. optimize for mobile
- Make a site that can respond to the differences between browsers and platforms.
- Make the same information available to users irrespective of the device they are using.
- "responsive design with CSS cedia queries. Query device capabilities (width, height, orientation, color, resolution, aspect ratio) NOT browser sniffing.
@media screen max-width: 480px;
Examples: mediaqueri.es - Viewport metatag – maps physical and virtual pixels.
Tips and Tricks
- Don’t use <table) for layout (duh!) – they take 2 passes to render and it’s very heavy on CPU (this matters on mobile).
- Give dimensions of images in HTML. If you don’t leave dimensions the browser doesn’t know to leave spaces for them and has to re-render.
- Consider <a href="tel:xxx"> for phone numbers (makes the number clickable and calls the phone).
- Code accessibly – lots of similarities with accessibility techniques: relationship between mobile web best practices and web content accessibility guidelines.
- Minimize HTTP requests. Combine JS into one file (same with CSS). Use CSS sprites to combine decorative images. Consider SVG or <canvas> for images.
- Use ems instead of px for fonts
- Fluid layouts: remember motion sensors
- Background-size / SVG background images
- Turn off fancy shadows transitions with media queries (it’s only eye candy).
- Data URL’s
- JS tips: put <script> elements as far down the source as possible. <script defer> <script async>
If it must be in the head, put it after CSS
Feature detect – e.g. Modernizr
Apps
HTML5 and JS is turning this into apps.
Widgets – applications filled with web standards goodness (it’s just zipped up).
In the future you’ll be able to just build apps on CSS HTML5 standards and have them work everywhere.s