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
- 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
lowsrcattribute of images used to work for this although abandoned when we thought people would all have broadband.
- 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.
- Boilerplate for responsive, mobile-friendly, development
- Good resource for learning about this.
- assumes desktop and works down
- 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.
- 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.
- 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.