Layout for PDA, part 2
I already wrote about the layout for a PocketPC device, this week I modified everything that was so embarrassing and summed up small results.
1. Eraser.
Layout for PDA should be rubber. Without additional software, it is impossible to emulate different resolutions on PDA devices. Yes, and no one really needs it =) Most often this is 320x240 or 640x480, although there are non-standard resolutions. In any case, the site should look the same in all permissions, because their spread is not that large, which means that the layout should be rubber.
2. One column.
There are exceptions, but most often the site’s skeleton must be single-column. Those. The source of the site can be 2, 3 column, but the PDA version often turns into one column, because places and so little. Most often, the left column (navigation) turns into <select>, and the right one slides under the main content.
')
3. Auto detection of PDA device + pda.site.ru domain.
Determining PocketPC is not that difficult. HTTP_USER_AGENT contains “windows ce” + browser (mobile ie) adds a number of its headers, for example HTTP_UA_OS. Accordingly, when viewing site.ru from a mobile device, an optimized layout should be displayed. However, in addition to this, an unconditional way of obtaining a PDA layout is needed, the simplest is the subdomain “pda”. It is just convenient + important for all search bots, and in advance reports that there is a pda version of the site ...
4. Functionality should be preserved.
PDA version of the site is simply obliged to retain all the functionality of the original. A visitor with a mobile device should not feel defective! This concerns not only the functionality of the site, but also the design. It must preserve the original elements and technology. Nothing but white background, black text and blue links in the PDA version of the site ( examples are not few ) is the highest degree of disrespect and contempt for the owners of modern mobile devices .
5. CSS.
Mobile IE boasts CSS2 support, of course, this is all conditional =) At the moment I can’t make a clear document about this, but I have problems with absolute positioning, float positioning and background properties of some elements. Although there is still basic support for CSS2, you can create nice, beautiful sites.
6. JavaScript.
And here the trouble begins ... JS with hints of victory (support for xmlhttprequest object, simply - AJAX, other ActiveX, etc.), but sometimes it is not able to elementary. The id we are used to exist only for reading, the className does not exist at all (mobile IE with which I worked - standard for WM 5.0. The last mobile ie has already learned how to work with id and with className). Many DOM methods are different (for example, there is element.children, but there is no element.childNodes) and so on, there are a lot of surprises. But the most annoying thing is that the AJAX object returns the responseText method, but does not return responseXML. I use XML on my projects for a more understandable API. It was necessary to add the ability to output data in JSON format so that JS on the handhelds could “read” it. Those. in other words, XML fans will have to add / rewrite AJAX interfaces, while JSON and plaint / text fans will dance and rejoice.
7. PopUp.
Any necessary pop-ups, accordingly, should open as a new page. Nothing wrong with that, users of PDA devices are quite used to this. But the "back" or "cancel" button in such windows is important as air.
That's all for the first time. For tests, I advise you to use the device directly. Or you can download the emulator from microsoft.com.
For more convenient testing on the device, I used the free utility My Mobiler . It allows you to control Pocket from the computer. This is convenient, stuck a poke into the cradle at the other end of the table, and you can freely control it with the mouse ...
And most importantly, remember, more and more mobile devices! Each self-respecting developer should have a mobile version of the site =)
Examples of my layouts for pda can be found here pda.basher.ru and there pda.catalog.mobilz.net
1. Eraser.
Layout for PDA should be rubber. Without additional software, it is impossible to emulate different resolutions on PDA devices. Yes, and no one really needs it =) Most often this is 320x240 or 640x480, although there are non-standard resolutions. In any case, the site should look the same in all permissions, because their spread is not that large, which means that the layout should be rubber.
2. One column.
There are exceptions, but most often the site’s skeleton must be single-column. Those. The source of the site can be 2, 3 column, but the PDA version often turns into one column, because places and so little. Most often, the left column (navigation) turns into <select>, and the right one slides under the main content.
')
3. Auto detection of PDA device + pda.site.ru domain.
Determining PocketPC is not that difficult. HTTP_USER_AGENT contains “windows ce” + browser (mobile ie) adds a number of its headers, for example HTTP_UA_OS. Accordingly, when viewing site.ru from a mobile device, an optimized layout should be displayed. However, in addition to this, an unconditional way of obtaining a PDA layout is needed, the simplest is the subdomain “pda”. It is just convenient + important for all search bots, and in advance reports that there is a pda version of the site ...
4. Functionality should be preserved.
PDA version of the site is simply obliged to retain all the functionality of the original. A visitor with a mobile device should not feel defective! This concerns not only the functionality of the site, but also the design. It must preserve the original elements and technology. Nothing but white background, black text and blue links in the PDA version of the site ( examples are not few ) is the highest degree of disrespect and contempt for the owners of modern mobile devices .
5. CSS.
Mobile IE boasts CSS2 support, of course, this is all conditional =) At the moment I can’t make a clear document about this, but I have problems with absolute positioning, float positioning and background properties of some elements. Although there is still basic support for CSS2, you can create nice, beautiful sites.
6. JavaScript.
And here the trouble begins ... JS with hints of victory (support for xmlhttprequest object, simply - AJAX, other ActiveX, etc.), but sometimes it is not able to elementary. The id we are used to exist only for reading, the className does not exist at all (mobile IE with which I worked - standard for WM 5.0. The last mobile ie has already learned how to work with id and with className). Many DOM methods are different (for example, there is element.children, but there is no element.childNodes) and so on, there are a lot of surprises. But the most annoying thing is that the AJAX object returns the responseText method, but does not return responseXML. I use XML on my projects for a more understandable API. It was necessary to add the ability to output data in JSON format so that JS on the handhelds could “read” it. Those. in other words, XML fans will have to add / rewrite AJAX interfaces, while JSON and plaint / text fans will dance and rejoice.
7. PopUp.
Any necessary pop-ups, accordingly, should open as a new page. Nothing wrong with that, users of PDA devices are quite used to this. But the "back" or "cancel" button in such windows is important as air.
That's all for the first time. For tests, I advise you to use the device directly. Or you can download the emulator from microsoft.com.
For more convenient testing on the device, I used the free utility My Mobiler . It allows you to control Pocket from the computer. This is convenient, stuck a poke into the cradle at the other end of the table, and you can freely control it with the mouse ...
And most importantly, remember, more and more mobile devices! Each self-respecting developer should have a mobile version of the site =)
Examples of my layouts for pda can be found here pda.basher.ru and there pda.catalog.mobilz.net
Source: https://habr.com/ru/post/19381/
All Articles