Building Your First Mobile Web Site

Designing for the web was difficult enough, but now your client wants a mobile app. Creating it may be easier than you think. Or it may be harder. I learned some lessons creating a music festival website. Here's three things to consider:

Is this an "app"? Or will a mobile web site work just as well?

Everyone says "app" when discussing smart phones or tablets. But that's only necessary if you're trying to integrate with applications like the calendar or address book, use special hardware like a compass, or need power, like for a game. If your client simply needs to broadcast news, a web app could be a satisfactory and economical solution. Mobile web sites, or web apps, are nothing more than websites optimized for smart phones.

True apps require a top-notch (expensive) programmer with the ability to upload the app to the appropriate store - which can take one to three weeks for approval. If budget or time are limited, your client's only choice might be a mobile website. In my case, the festival was opening in one month. Barely enough time to create the application, and not enough time to get it approved. They were happy with a mobile web site.

Can you leverage your HTML, CSS and Javascript skills?

Absolutely! However, notice that Flash isn't included in that list. Adobe is working to fix that - but the future is HTML 5. Fortunately, there are tools to help you. I've included links to some of the free and beta products available. Many of these will help you deal with different sizes of cell phones and tablets, as well as handling zoom events and native UI's.

You could write this on your own, assuming you have a solid grasp of javascript and css, but it's easier to let something like jQuery Mobile handle it for you.

Smart Phones aren't just small web browsers

Smart phones are used while people are walking, in a restaurant, or outside. It's likely that a phone call will interrupt the session - and these all require your web app to behave differently than a desktop website.

Keep the interface simple, direct and big. Using your web app shouldn't require complete concentration, and remember the person browsing your site is using the tip of their finger while they are bouncing around. Icons have to be big enough to hit, and the spacing between them needs to allow a miss.

I made it work - so can you!

I needed to learn a few new tricks, but in the end, it was easier than I thought. I'm confident that with a basic understanding of web basics, you can do it as well!