Layout experience for a Pocket PC with an example

Not so long ago, I launched a small project designed to help “mobile” people to unite, chat on the forum, change thoughts on habra-like blogs and so on. However, as it was correctly noted in the comments, the project is supposedly “mobile”, and from mobile devices it looks crap, despite the valid xhtml layout and so on. “Damn it,” I thought, turned on my FS loox n560 and began to slowly override the templates for the pda version.
At first, I thought about getting by with “handheld.css” and writing PDA-oriented styles, as I usually do for “printed” versions. But I quickly realized that not all problems can be solved using CSS. Moreover, the principle of constructing the same "printed" pages is usually reduced to: "It is hidden, it is hidden, it is transferred here, it is there, and it is also hidden." Nevertheless, we are dealing with mobile devices and loading extra traffic in order not to display it in a stupid way ... As a result, I came to the conclusion that not only CSS styles should be rewritten, but templates should be restructured. I started with a smaller and simpler project to practice ...
Just in the ToDo sheet of one of my other projects, the “PDA version” line has been gathering dust for a long time; the project is not very popular, but less well-known. It was just simple and relatively small, and I began with it. For those who do not know, basher.ru is an aggregator of quotes from all sorts of different quote books + has its own database of quotes. Recently, he also collects funny qip statuses. A certain text-humorous portal.
In my hands I had a Fujitsu-Siemens LOOX N560, with 640x480 resolution, WM 5.0 on board with standard IE Mobile included. Wrote a condition:

"(Isset ($ _ SERVER ['HTTP_UA_OS']) && preg_match ('/ windows ce / i', $ _SERVER ['HTTP_UA_OS']) && preg_match ('/ windows ce / i', $ _SERVER ['HTTP_USER_AGENT']) ) || preg_match ('/ iphone / i', $ _SERVER ['HTTP_USER_AGENT']) »

for Pocket templates and went to the dance ... In the end, it turned out something like this:

So, let's get started ... The main advantage of portable devices is also a big pitfall for developers =) a small screen breaks many of the usual techniques and styles of layout. For example, the diig-like menu, which took several days to create, in the pda-version only looks like 2 selections = (even a shame. But almost all navigation of any site will eventually converge to select.) But on the other hand, on mobile devices it's really comfortable =)))
And you can almost immediately forget about the "columnar" design. Here it is only single-carved, it is difficult to imagine a 2 or 3 column and this is normal. Although in reality everything is a bit simpler than it might seem. For example, in my case, it all came down to replacing:
#content{
width:80%;
}
#right{
width:20%;
}
on:
#content{
width:100%;
}
#right{
width:100%;
margin-top:10px;
}
Or something like that. Although, of course, I cut down most of the menus for the pocket template. More often, they just occupy the void in the browser, but they interfere with the packet. As I said above, we remove them not using display: none; but physically cutting them from the template.
It was a pleasant surprise to see a sheetie, almost without touching either the layout or the styles:

Poke - even works. The next step was JS ...
JS turned out to be the main underwater rock. For example, on my system that I described above, I can get the parents of an element, children, have access to styles, besides the attribute “id”, but not to className = (And the whole JS on basher `s is built on reading / assigning It is this attribute. In mobile IE, there is even an XmlHttp object, but there is no className. In the mobile donkey development blog, I found “proud” mentions in some posts, such as: “new methods were added to JS”, ​​among which was className. But apparently, my system is too old, that is, along the way, it is enough just to update the axis on the PDA, but on the other I don’t know how to do it and why and people like me are not enough, all of them are forced to update OSes when they visit the site?
Unfortunately, I haven’t yet implemented voting on AJAX, just for the above reasons - there was not enough time. Perhaps in the week there will be time after work and I will finish it, however, at the moment, the “mobility” of the service is seriously questioned. He gained a mobile layout, he retained all his functionality, but I do not think there are many people who are ready to “vote” for quotes and each time wait for the page reload = (

Ideally, of course, to make not just the AJAX poll, but also to provide for possible interruption of the connection. A man rides on a bus or a minibus, he votes for a quote, goes down the subway, continues to check the page and vote, and the connection is gone ... Until it only comes to mind to check the status of the AJAX request and when it timed out go to any other village to read these same cookies. However, this is not the task today.
In general, it was quite interesting to impose a mobile device, although it is unusually difficult. It’s difficult because, for the time being, I don’t imagine how to properly position the navigation, other service elements on a small screen, how to separate them from standard elements — content and so on. If you have any thoughts, ideas or living examples - throw in the comments. It will also be very interesting to see how the mobile version of the tower looks on smaller devices (I have 640x480, I don’t even know, unfortunately or fortunately), on the iPhone and others. If anyone has a similar opportunity - lay out screenshots in the comments, or throw them to me at email: webmaster@basher.ru . In general - I will be glad to any help in this matter. After a couple of weeks I promise to report and write in more detail about the features of the layout for mobile devices.
Enjoy your turnings!