Mobile Web Sites

Basics Of Mobile Friendly Sites

Creating mobile friendly web sites appears to be getting easier. Windows Mobile and the iPhone are the first steps in simplifying the displaying of web sites on small screen mobile devices.

Does this mean you can design mobile web sites like you do standard web sites and just let the mobile browsers decide how the site is displayed? NO! Mobile sites must be designed with small screens in mind. That means reducing the amount of text, the size of the graphics, and most of all navigation must be specifically designed for limited screen space.

Mobile web browsing is just taking off. The standard being promoted by DOTMOBI and other mobile specific sites is XHTML This makes sense because XHTML is becoming the standard for web design; however, this does not mean HTML is dead. Some have been trying to bury HTML for years now and it seems to still be going strong.

Right now Windows Mobile 6.0 is sort of the standard that other mobile devices will have to live up to. While it doesn’t yet have the numbers of some other browsers, it appears to be gaining simply because people who are familiar with any of the Windows operating systems will tend to go with what they know. This will continue until someone comes up with a better system for mobile devices that does to Microsoft what it did to Apple in the PC market.

With Windows Mobile 6.0 supporting JavaScript, Jscript, and AJAX, how long before other browsers do the same. (Not sure if this comes standard or is a third-party add on.) Maybe their next release?

So what are the best practices for designing mobile friendly sites? Most "experts" will tell you to only use XHTML, avoid tables, and use styling very sparingly. But is this really necessary?

Using DIVs is probably the best method but a single column table with one to three rows will also work. However, the design must be liquid. It has been used by some in web design for years but because mobile device screens vary so much, it is absolutely the only way to design a mobile friendly site.

Of course, widths should be 100 percent so the DIV or table can resize itself to fit the user’s screen. The height of DIV or a table row should be determined by the content. Because different mobile devices display text based on it own rules, it is best to simply use h1 through h6 tags, as one example. H1 is the largest but in some mobile devices, h2 - h6 may well display as the same font size.

Use small and large instead of px or pt. If you specify a font-family, include a couple of generic type fonts. Some mobile devices may not have the font you defined or even be able to display the font size you want. Include any style information on the page but not as inline styling because download speeds are generally slower for mobile devices. (It is reported that most mobile browsers download an external css file last so formatting can look bad until the styling is loaded.)

Some mobile browsers will accept cookies, some wont; some will recognize JavaScript, some wont, and much like the browser wars for the desktop, browser quirks depend on the device’s operating system.

Standard PC based navigation will not work for a smartphone or pocket PC screen. Forms should be shortened and phone numbers linked so they can be dialed by simply touching that number.

Your best bet is to treat mobile devices, at least for now, much like the very early days of Internet browsers. Minimize formatting and let the browser do its best to display the content. Also, use only small graphics and include an ALT attribute because some mobile browsers will not download graphics, only text.

A competition is brewing over which browser and which mobile operating system will emerge as the winner and standard. Will browsers like Firefox, Mozilla, and Safari adapt to mobile devices or leave the field to Palm, Blackberry, and Windows Mobile? (Safari is running on the iPhone under a mobile friendly Mac. OS.)

These are only a few suggestions for mobile friendly design. For more detailed information, try dotmobi.mobi as one example. Also, search for "Designing Mobile Friendly Web Sites" on you favorite search engine.