Scott Hanselman: Mobile Web

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

• electric plum mobile simulator
• Ripple emulator - has a chrome plugin, covers a number of devices.
• realworldvalidator.com - most complete browser support matrix as used in Visual Studio 12.

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.