Уже писал о верстке под PocketPC устройства, на неделе доработал все то, что так смущало и подвел небольшие итоги.
1. Резинка.
Верстка под PDA должна быть резиновой. Без дополнительного ПО эмулировать разное разрешение на PDA устройствах нельзя. Да и никому это особо не нужно =) Чаще всего это 320х240 или 640х480, хотя бывают и нестандартные разрешения. В любом случае сайт должен смотреться во всех разрешениях одинаково, т.к. их разброс не такой и большой, а значит верстка должна быть резиновой.
2. Одна колонка.
Есть исключения, но чаще всего скелет сайта должен быть одноколоночным. Т.е. исходник сайта может быть 2-х, 3-х колоночным, но PDA версия чаще всего превращается в одну колонку, т.к. места и так мало. Чаще всего левая колонка (навигация) превращается в <select>, а правая сползает под основной контент.
3. Авто определение PDA устройства + pda.site.ru домен.
Определить PocketPC не так и сложно. HTTP_USER_AGENT содержит «windows ce» + браузер (mobile ie) добавляет ряд своих заголовков, например HTTP_UA_OS. Соответственно при просмотре site.ru с мобильного устройства должна отображаться оптимизированная верстка. Однако помимо этого необходим и безусловный способ получения PDA верстки, самое простое — поддомен «pda». Это просто удобно + важно для всяких поисковых ботов, да и заранее сообщает, что есть и pda версия сайта…
4. Функционал должен сохраняться.
PDA версия сайта просто обязана сохранять весь функционал исходного. Посетитель с мобильным устройство не должен чувствовать себя ущербным! Это касается не только функционала сайта, но и дизайна. Он должен сохранять исходные элементы и техники. Ничего кроме белого фона, черного текста и синих ссылок в PDA версии сайта (примеров не мало) это высшая степень неуважения и презрения к владельцам современных мобильных устройств.
5. CSS.
Mobile IE хвалится поддержкой CSS2, конечно же это все условно =) Чёткого документа по этому поводу на данный момент составить не могу, но у меня возникли проблемы с абсолютным позиционированием, float позиционированием и background свойствах некоторых элементов. Хотя все же базовая поддержка CSS2 существует, можно верстать приятные, красивые сайты.
6. JavaScript.
А вот тут начинается беда… JS с намеками на победу (поддержка xmlhttprequest объекта, попросту — AJAX, других ActiveX и прочее), но порой не умеющий элементарного. Привычные нам id существуют только для чтения, className не существует вовсе (mobile IE с которым я работал — стандартный для WM 5.0. Последний mobile ie уже научился работать и с id и с className). Многие DOM методы отличны (например есть element.children, но нет element.childNodes) и так далее, сюрпризов очень много. Но что самое обидное — AJAX объект возвращает метод responseText, но не возвращает responseXML. У меня на моих проектах используется именно XML, для более понятного API. Пришлось добавлять возможность вывода данных и в JSON формате, чтобы JS на наладонниках смог его «прочитать». Т.е. проще говоря фанатам XML прийдется дописывать\переписывать AJAX интерфейсы, а фанаты JSON и plaint/text пляшут и радуются.
7. PopUp.
Любые необходимые попапы, соответственно, должны открываться как новая страница. Ничего страшного в этом нет, пользователи PDA устройств к этому вполне привыкли. Но кнопка «назад» или «отмена» в таких окнах важна как воздух.
Вот вроде и все, на первое время. Для тестов я советую использовать непосредственно устройство. Либо можно скачать эмулятор с microsoft.com.
Для более удобного тестирования на устройстве я использовался бесплатной утилитой My Mobiler. Она позволяет управлять Pocket`ом из компьютера. Это удобно, воткнул покет в кредл на другом конце стола, а сам свободно им управляешь мышкой…
И главное помните, мобильных устройств все больше! Мобильная версия сайта должна быть у каждого уважающего себя разработчика =)
Примеры моих версток под pda можно найти тут pda.basher.ru и там pda.catalog.mobilz.net
1. Резинка.
Верстка под PDA должна быть резиновой. Без дополнительного ПО эмулировать разное разрешение на PDA устройствах нельзя. Да и никому это особо не нужно =) Чаще всего это 320х240 или 640х480, хотя бывают и нестандартные разрешения. В любом случае сайт должен смотреться во всех разрешениях одинаково, т.к. их разброс не такой и большой, а значит верстка должна быть резиновой.
2. Одна колонка.
Есть исключения, но чаще всего скелет сайта должен быть одноколоночным. Т.е. исходник сайта может быть 2-х, 3-х колоночным, но PDA версия чаще всего превращается в одну колонку, т.к. места и так мало. Чаще всего левая колонка (навигация) превращается в <select>, а правая сползает под основной контент.
3. Авто определение PDA устройства + pda.site.ru домен.
Определить PocketPC не так и сложно. HTTP_USER_AGENT содержит «windows ce» + браузер (mobile ie) добавляет ряд своих заголовков, например HTTP_UA_OS. Соответственно при просмотре site.ru с мобильного устройства должна отображаться оптимизированная верстка. Однако помимо этого необходим и безусловный способ получения PDA верстки, самое простое — поддомен «pda». Это просто удобно + важно для всяких поисковых ботов, да и заранее сообщает, что есть и pda версия сайта…
4. Функционал должен сохраняться.
PDA версия сайта просто обязана сохранять весь функционал исходного. Посетитель с мобильным устройство не должен чувствовать себя ущербным! Это касается не только функционала сайта, но и дизайна. Он должен сохранять исходные элементы и техники. Ничего кроме белого фона, черного текста и синих ссылок в PDA версии сайта (примеров не мало) это высшая степень неуважения и презрения к владельцам современных мобильных устройств.
5. CSS.
Mobile IE хвалится поддержкой CSS2, конечно же это все условно =) Чёткого документа по этому поводу на данный момент составить не могу, но у меня возникли проблемы с абсолютным позиционированием, float позиционированием и background свойствах некоторых элементов. Хотя все же базовая поддержка CSS2 существует, можно верстать приятные, красивые сайты.
6. JavaScript.
А вот тут начинается беда… JS с намеками на победу (поддержка xmlhttprequest объекта, попросту — AJAX, других ActiveX и прочее), но порой не умеющий элементарного. Привычные нам id существуют только для чтения, className не существует вовсе (mobile IE с которым я работал — стандартный для WM 5.0. Последний mobile ie уже научился работать и с id и с className). Многие DOM методы отличны (например есть element.children, но нет element.childNodes) и так далее, сюрпризов очень много. Но что самое обидное — AJAX объект возвращает метод responseText, но не возвращает responseXML. У меня на моих проектах используется именно XML, для более понятного API. Пришлось добавлять возможность вывода данных и в JSON формате, чтобы JS на наладонниках смог его «прочитать». Т.е. проще говоря фанатам XML прийдется дописывать\переписывать AJAX интерфейсы, а фанаты JSON и plaint/text пляшут и радуются.
7. PopUp.
Любые необходимые попапы, соответственно, должны открываться как новая страница. Ничего страшного в этом нет, пользователи PDA устройств к этому вполне привыкли. Но кнопка «назад» или «отмена» в таких окнах важна как воздух.
Вот вроде и все, на первое время. Для тестов я советую использовать непосредственно устройство. Либо можно скачать эмулятор с microsoft.com.
Для более удобного тестирования на устройстве я использовался бесплатной утилитой My Mobiler. Она позволяет управлять Pocket`ом из компьютера. Это удобно, воткнул покет в кредл на другом конце стола, а сам свободно им управляешь мышкой…
И главное помните, мобильных устройств все больше! Мобильная версия сайта должна быть у каждого уважающего себя разработчика =)
Примеры моих версток под pda можно найти тут pda.basher.ru и там pda.catalog.mobilz.net
