Formatting websites for mobile browsers continues to be an important part of web development, and it only gets trickier as technology advances. With the advent and rising popularity of touch screen devices, mobile web development isn’t just about formatting a website so it’s easy to read on a small screen, it’s also about how that website behaves.

Touch screen devices such as Apple’s iPhone, iPod touch and iPad, Sprint’s HTC Evo and those that support Android have become large and functional enough that users sometimes prefer the full web experience instead of seeing a paired down mobile version of a site. In such cases, it’s important to be sure your site is compatible with the touch screen operating systems. Often times there are functions of a website that, while operating fine on a normal web browser, do not perform correctly on a mobile browser.

One example of incompatibility we’ve come across a lot lately is with fly-out (also known as drop-down or pop-up) navigation menus. On the web, they’re designed so that rolling your mouse over a button will trigger a sub menu. But with touch screen devices, we found we’d have to hit the fly-out link three times before it registered.

The fix for this? New software! There are many ways to create fly-out menus, and our previous program created code that wasn’t touch screen friendly. After some research and testing, we decided to go with the Pop Menu Magic 2 Dreamweaver module from Project Seven Development:

http://www.projectseven.com/products/menusystems/pmm2/index.htm

Easy to install and easy to use, this module creates code that works properly on both computers and touch screen mobile devices, and it has some pretty nice effects, too. You can see some samples here:

http://www.projectseven.com/products/menusystems/pmm2/carbon.htm

There are other solutions out there, of course. When you decide on one, just be sure to test the results with as many devices and possible…and be ready for OS updates to create even more odd behavior.