Thursday, May 27, 2010

Developing Mobile Websites

Here are a few tips I've put together that I've found have helped me out with my mobile web design and development. I hope they'll help you too!

1) Use CakePhp's isMobile()
I usually use the CakePHP framework for doing programming and I check in the App Controller beforeFilter() function using $this->isMobile() is that's true I'll set a variable $this->mobile to true which I can check all over the place when trying to figure out which version of a page to return. Not to mention it's easy to forward them on to the correct domain name. It's lovely. Once they're in the correct domain name I will tell CakePHP to look in the m/ folder for files. This makes them easy to organize and find just what I need and makes for some wonderful MVC goodness. Something like this works well:


if (preg_match('/^m\./i',$_SERVER['HTTP_HOST'])) {

            $this->layoutPath .= "/m";
            $this->viewPath .= "/m";                  
            $this->mobile = true;
           
} elseif ($this->RequestHandler->isMobile()) {

            $this->redirect("http://m.mysite.com");


2) Don't re-use your huge CSS/JS files.
I always write a separate javascript and css file for mobile. Mobile will need it's own version of these files, usually I'll just call them mobile.css and mobile.js or something like that. They will be optimized for the mobile user experience and will likely be much smaller than the normal web javascript files.

3) Test! Test! Test!
Check using emulators and on real devices. You know, this has been difficult. webOS has an easy to use emulator. If you're on a mac you can quickly access the iPhone emulator by creating a new XCode project and running it in the simulator, then just click the home button and you can access and test in mobile safari. The Android emulator can be downloaded for free as well. Opera Mini can be downloaded easily on the Mac. That's 4 platforms right there. I'm still trying to figure out how to test on Blackberry devices. This site will also let you test your phone in some sweet old mobile web browsers:
http://mobiready.com/launch.jsp?locale=en_EN

4) Degrade graecfully.
If your site is built with simple tags like <img /> and <i> you shouldn't have much of a problem with older phones that can't handle images or css. Make sure to use the alt tag on the images and to be thoughtful about how content might appear in a texts based interface. Try to make sure your site will work fairly well without javascript as well. Though this can be a hard one if you want to do anything cool! 
5) Keep it simple.
You know just because the iPhone and webOS can support "flashy" CSS3 animations doesn't mean that your site should. Those animations will likely be a little choppy and will ultimately make your site more difficult to use. Not to mention that they won't be supported by every phone. Just leave them out or keep them for your desktop/iPad-ready website.

6) Avoid Phone Specific Code
Avoid phone specific code. This is so hard to maintain. I caught myself throwing in a little if (ua.match(/webos/)) { the other day and quickly stopped myself. There are usually ways around doing phone specific code and whenever possible avoid doing it!

7) Pick your platforms.
It's impossible to support every platform perfectly. Decide right now which phones you want to support fully and then do all you can to ensure that those do work perfectly. You need to choose where to spend your time. If you know that all of your customers use the iPhone, then just optimize for that, it's not worth the resources it takes to optimize for everything else.

8) Don't use WAP.
WAP is difficult to use. It requires special headers. It's barely supported by anything anymore. It doesn't really support normal images and it's pretty much completely useless. Instead stick to basic HTML5 tags that will be supported in most phones. No, I do not have a complete list, but the simpler the better.

9) Avoid tables.
Tables are a clunky way to design sites and really won't help you very much when targeting smaller phones. You should avoid them anyway for normal web development. You are best to stick with lists, which are much more flexible.

10) Avoid Javascript
At least make sure your site works without javascript. Javascript is such a helpful tool, but it will not be supported on a lot of older phones. If you want to create a universal mobile experience see what you can without javascript first. If you can get the core functionality in there without it then you can add additional features for those phones that do support it later.

Those are my tips and tricks. Hope they have been helpful. Here are some other great resources I have found for mobile web development and design:

Tutorials

http://articles.sitepoint.com/article/designing-for-mobile-web - Decent article on building a mobile website for sort of the previous generation of mobile phones (2008)

http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/ - Discusses the trends coming along in early 2009 about designing for the mobile web. Again, this mostly is about support previous generation phones.

http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices - Excellent tutorial for creating a beautiful website that displays on some of the newer phones.

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes - In depth research about mobile design and development from mobiforge!


No comments:

Post a Comment