Source order and mobile users

One of the most important and least noticed facts about CSS layouts for sites meant for mobile users relates to source order. The elements of a web page—header, main content, sidebar, footer, and other such divisions—can be written in the the HTML in any order and laid out anywhere on the page using CSS. This means the main content div can be first in the HTML source in many layouts.

For mobile users who may be viewing a page without the help of CSS, seeing the main content first can save considerable time and many clicks to get to the relevant part of a page. If you look at this page with CSS turned off, you will note that the links at the top of the page are first in the source order. One of my goals in adapting this page for mobile users would be to either 1) use CSS to put the links last in the source order while still displaying them on the page under the title graphic, or 2) put a skip navigation link at the beginning of the list of links that would let a mobile user jump right to the first blog entry.

Is Adobe’s Device Central the answer to coding for mobiles?

Several products in the new Adobe CS3 release, including Dreamweaver, come with the new Device Central service. It gives you a chance to see your content using a number of mobile device skins that work almost like the real thing. The available skins are constantly updated.

The results you see are supposed to be what you would actually see using the device. I don’t have any way to test how well that actually works and how accurate the claim is. Anybody out there know? I noticed some of the skins I looked over were rendering the content using Opera’s small screen browser.

I was a bit disappointed not to see devices like Blackberries and Palms with larger screens. I hope they will add these skins as time goes by.

To answer my own question from the title, I think Device Central will help people who use Dreamweaver as a strictly WYSIWYG tool. It will help such users realize the results of their “design view” decisions when they haven’t taken the underlying structure or semantics into account. So, yes, it’s a good thing and an improvement for a lot of people. On the other hand, people that already know about testing with Opera’s small screen view or mobile emulator, or people already using handheld CSS for mobiles, may not have much use for it.

Technorati Tags: