Designing for mobile devices seems to be the wild west of the web. It’s crazy, not all devices will display the same, and there aren’t standards for how the devices work— so the manufacturer decides the format. Of course, the good old W3C is working on mobile device standards (http://www.w3.org/Mobile/), and they give some good tips on how to make your site more mobile friendly. For example, style sheets are better than tables, validate your site, make sure you have text alternatives for images (like alt tags) since many mobile users turn off image capabilities, and keep things small (like page titles, urls, and such). Although, this is just good advice in general.
An article on the Cameron Moll website (http://www.cameronmoll.com/archives/000415.html) talked about some different options that are being developed, the article is a few years old, but hopefully is still relevant. One thing they talk about is the use of handheld style sheets. You could simply add another style sheet to your site that would set the display for handheld devices. This seems like a good idea to me, unfortunately, support on devices is hit and miss. Another option is the .mobi top level domain. Like .gov is for government pages, .mobi would be for mobile devices. The W3C cautions against this (http://www.w3.org/2004/07/dotmobi_diwg.html) because .mobi would only be for use on mobile devices and not really accessible on other formats, defeating the purpose of a global internet—available for everyone.
This is a really big, and complicated subject, but the Cameron Moll article gives a good list of what works on mobile devices and what doesn’t, that I found kind of helpful:
Typography
- Heading tags are decently supported. However, many devices display some at the same size and weight (e.g. h1 and h2 = identical).
- p is reliable
- strong and bold are well supported
- However, em and i are not as well supported
- font-size is almost useless (currently). Consider using headings instead to control font sizing.
- font-family - don’t even bother with it. Nearly all devices currently default to a proprietary sans-serif.
Lists
- ul and ol are well supported
- dl is decently supported
- Consider using ol instead of ul for navigation lists. This allows the use of accesskey, which is fairly well supported on a variety of devices. Users can then quickly access menu items via keypad numbers. For example, try accessing menu items on Yahoo Mobile using only the keypad of your mobile device. Word of caution: There are concerns surrounding accesskey (e.g. keystroke conflicts), and it will likely be deprecated in the future. See “The Future of Accesskeys”.
Images
- Nearly all current devices display images
- However, users may browse with images turned off. Always use alt text (which, of course, is recommended practice anyway).
- Use images as little as possible, only where contextually relevant. Keep in mind some users may be paying through the nose per KB of mobile web data.
- If you must use text in an image, consider bitmap fonts for optimal clarity. Example: “mobile edition” type rendered using Silkscreen, shown in the image at right.
- Be aware that some device browsers may downsize the image to fit within the screen width. Wide images may therefore become illegible.
- background-image support is decent at best. However, background-color is somewhat well supported.
Miscellany
- Surprisingly, floats are supported rather well. However, how practical is floating elements on a 200px-wide screen?
- border-style support overall is sketchy, but border-style: solid is probably the most reliable of the bunch
- margin and padding support is decent. However, use cautiously with screen real estate, and use em or % instead of px.
- JavaScript support is hit or miss, more ‘miss’ than ‘hit’ currently
4 comments:
You have done a fine job researching this subject. Bravo!
Yes that site, cameronmall, does seem a touch old but the information was interesting. Of course the W3C schools are also perplexed about how to handle this mobile market. The wide variety of devices, and new devices out almost daily, is too complex to really have any hard and fast rules that Web designers can adhere to—other than to keep things simple. With each phone having basically their own operating system that is used to access the Web you have to wonder if one day there will be a standardized operating system that will make this understandable.
When I was doing research, I found the cameronmall article too. It was a pdf file with 78 pages! Seemed dated as well, but still had more than enough information.
Wow! You found a lot of useful information. I do wonder if we will ever actually see a "one web" where everything is available across all platforms. That seems like a very big task when there are so many different devices to consider.
Your information is great. It will be very interesting to see where web design goes now. Makes me wonder if the phone screens are going to get a little bigger so that websites can be displayed better.
Post a Comment