Mobile Web at Stanford - a resource for developing mobile web sites developed by several groups in campus. The site itself is mobile-aware. Re-size the page and you'll see how the content re-flows to make it easier to see on smaller screens.
3% of visitors to the Stanford Home Page are mobile users. It was just 2% a short while ago and 1% shortly before that. The numbers might be small, but they are growing very fast.
Some applications can't be used on mobile phones. Often those are vendor applications. An example is Remedy. That couldn't be used while at this conference while using a mobile phone.
What can you do as a web developer? At a minimum, test your web using a mobile device.
The IT Services home page is also mobile aware, but it's not just a simple reflow of content, but an optimization of the content. Some blocks are moved around, some to the bottom that are not as important.
When you design a site for mobile use, flow of content is important. You'll want the most important information first and secondary information after that. It may appear side by side on a desktop site, but in mobile, you'll want them ordered vertically.
Responsive Design (itservices.stanford.edu) vs. Redirection to a different site (www.stanford.edu or m.stanford.edu).
Another example is the Org Chart on the itservices.stanford.edu web site. A simple unordered list, using CSS is turned into two versions of the chart, one for desktop and one for mobile, using the same data, but different CSS.
Media Queries are the key to responsive design. If the browser screen is smaller than a certain size, load one file, if not, load the default.
Image resizing. How is that done? You can image resize using CSS which will look OK, but your mobile users will still need to download the whole image. Another option is to use a tool like Sencha.io ( http://www.sencha.com/ ) which will resize images for you on the fly.
DNS lookups are extra connections which should be avoided, so use one domain instead of different domains for content and or images.
http://itunconference.stanford.edu is also a mobile site. The theme is built on work done by Dave Ream, based on work by Yibu.
Safari has the ability to change the User Agent from the Develop menu so you can test some of the web sites by pretending to be an iPhone or iPad (if the website does browser detection).
CourseWork also has a mobile version that's been simplified and done with just a little bit of code.
When you decide to put up content on your mobile site, pick what's most important. It's not necessary to put everything you have on your regular desktop site on there.
More and more people have internet access, but a substantial number (including lower income households) only have access to it using a mobile device.
Another example of a mobile site is Explore Courses.
Boston Globe is a particularly good example of a news site that is responsive.
http://bostonglobe.com/
A mobile interest group is on campus. The discussion happens on mobile_aware@lists.stanford.edu.
Another good group is the user experience group. Their blog is at http://ux.stanford.edu
Mobile Web
Proposed by Brian Young
Where will the conversation continue?
mobile_aware@lists.stanford.edu
Notes

