Scott Hanselman: Mobile Web

Orde Saunders' avatarUpdated: Published: by Orde Saunders

Notes from Mobile web talk by Scott Hanselman given in Edinburgh.

Mobile is huge

1 billion active mobile subscriptions

  • One per 7 people in the world

Mobile only web users:

  • US/UK 25%
  • China 30
  • India 59
  • Egypt 70

Strategy for mobile web

Number 1 plan is: do nothing

Options are:

  • change the client (opera mini)
  • change the server - target mobile

If you do absolutely nothing else - add a viewport tag (width=device-width)

Fix on client:

  • Custom CSS
  • Media CSS (media queries)
  • Adaptive rendering (JS UI)
  • Leverage native controls, they keep the UI consistent with user expectations.
  • On a small screen flow things vertically - users, especially mobile users, DO scroll!
  • Think about screen sizes: large monitor, normal monitor, iPad, iPhone

Images are still a problem.

  • Ideally would like to find out from the client what it wants.
  • Discussions are ongoing at W3C
  • lowsrc attribute of images used to work for this although abandoned when we thought people would all have broadband.
    • JavaScript polyfills require double download of images which fights with browser which is trying to improve perception of speed.
    • Not going to solve this fully on the client side.
    • Serverside solutions tend to use UA sniffing.
    • 51degrees.mobi - they are the new home for WURFL now it's gone closed source.
    • Imageresizer cloud service
    • Resources are available at asp.net/mobile.
    • Watch out for networks that do transparent proxying of images and JS injection - can be avoided by SSL.

Look at your traffic and optimise for that.

We feel excited when we go to a URL on our mobile and it actually works. We need to make people think about the issues with mobile redirect patterns.

getskelton.com

  • Boilerplate for responsive, mobile-friendly, development
  • Good resource for learning about this.
  • assumes desktop and works down

320 and up

  • Boilerplate for responsive
  • Mobile first

Don't think you are the customer - just becuase you have a big monitor, don't assume everyone else has one.

Cons of client side solutions

  • Doesn't consider the difference between mobile and desktop
  • Not fully supported

Fix it on the server

  • Custom mobile views using display modes
  • This is a solved problem: jQuery mobile / Sencha / Dojo / Twitter Bootstrap / Kendo et al (some frameworks are more opinionated, they are more intrusive into your code.)
    • Don't fake a mobile native app UI for a content driven site.
    • If it has heavy interaction then the app UI route is good.
    • Use the available themes that mimic the phone native UI when you know which phone you are running in.
    • Don't re-invent the wheel if it's been solved by someone else.
    • The frameworks take advantage of the client side power.

Resources

Personal Notes

  • There was, understandably, a heavy focus on Visual Studio and .NET.
  • Several things I've been doing for some time were presented as new.
  • Some things I avoid doing were included in the approaches shown.
  • It was very conservative, nothing pushed the boundaries of my knowledge.
  • Scott is an accomplished public speaker and kept the talk interesting for two hours without a break.