Mobile Web Design – Working Code, Tips, Best Practices

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.

Demo: http://www.lib.montana.edu/~jason/files/m/
Download: http://www.lib.montana.edu/~jason/files/m.zip
Read Me: http://www.lib.montana.edu/~jason/files/m/_readme.txt

The above template is using HTML, CSS, Javascript, and PHP, but you could substitute any server side language for the programming logic. I also have it in my head that I can build an even simpler template with just HTML and CSS. I’ll keep people updated…

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 ).
  • Minify and optimize your javascript (see JSLint).
  • Plan for low bandwidth – Keep images close to 1KB or under.
  • Test on multiple mobile browsers and emulators.
  • Don’t plan on javascript being available – the above template still works when it’s turned off.
  • 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.

About these ads

One Comment on “Mobile Web Design – Working Code, Tips, Best Practices”

  1. [...] First, while there’s many other available frameworks than just the two I talk about, I do want to specifically point out the MIT Mobile Web project. The folks over at NCSU have done a great job implementing it with their library’s mobile site. They’re talking about it in a session right after mine, so I won’t be covering it in too much detail. MIT’s code is fairly robust, but also much more complex to get set up and running than iUI or Jason Clark’s work. [...]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.