Taking a web site to the small screen comes with a host of considerations: device width, available bandwidth, touch versus click interfaces, browsers with limited functionality, etc. At the same time, the simplicity of these mobile browsing environments lowers the barrier to entry for developers. Some basic HTML and CSS is all that is required to get started. In my research, I have learned a few things and decided to put the learning into action by creating a mobile web template available for anyone to download, remix, and reuse.
Here are some tips, best practices, and design conventions I learned along the way.
- One column is a design convention worth following (See m.facebook.com, or m.youtube.com, or m.twitter.com).
- Pick the essence or core pieces of your site to deliver to your mobile users. Think abridged version.
- Follow the “m” URL conventions (m.delicious.com OR amazon.mobi OR lifeonterra.com/m/).
- Minify and optimize your CSS (See Clean CSS ).
- Plan for low bandwidth – Keep images close to 1KB or under.
- Test on multiple mobile browsers and emulators.
- Build your app so that it loads only necessary data when requested (Use Ajax or Server-Side includes).
I’m interested in any feedback or questions so please share in the comments. I’ve also created a more robust mobile application example for TERRA: The Nature of Our World available at lifeonterra.com/m/. If anyone is interested, I’m happy to share some of that code as well.
My chapter “Blip.tv and Digital Video Collections in the Library” for the recently released Library Mashups edited by Nicole Engard was in need of some code samples. I wanted to show how to use the APIs I kept mentioning in the writing which focused on the digital library mashup of TERRApod. So… here they are in their basic, rudimentary glory.
- blip.tv API demo – http://www.lib.montana.edu/~jason/files/api/bliptv/
- blip.tv API code – http://www.lib.montana.edu/~jason/files/api/bliptv/index.phps
- YouTube API demo – http://www.lib.montana.edu/~jason/files/api/youtube/
- YouTube API code – http://www.lib.montana.edu/~jason/files/api/youtube/index.phps
The complete code is available for download from my code archive. Think of these examples as the raw materials for building mashups with the blip.tv API and YouTube API. The blip.tv example relies on PHP 5, but I made the YouTube PHP4 compatible and you could adapt the code from there for the blip.tv API. I also included some CURL code in the comments of the files just in case your host requires it. If you have questions or improvements, drop a comment.
A quick word about the book: If you are at all interested in mashups and web services, take a closer look. The book covers one profession’s (the librarian) application of web services to library data problems. Contributions from industry leader’s like John Blyberg, Ross Singer and Karen Coombs make this an interesting read for anyone interested in how web services and open data are changing the nature of web development for libraries.
<end bookplug />