Верстка под PDA, часть 2

    Уже писал о верстке под 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
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 52
    • 0
      По первому пункту - ширину запросто можно задать с помощью файрбага - и не нужен никакой эмулятор. Я всегда так делаю. К тому же все-таки лучше тестировать верстку на реальных устройствах, а не эмуляторах. Не знаю, как наладонники(с ними дел не имел), а вот телефоны могут по-разному отображать одну и ту же страницу(даже два телефона одного производителя)
      • 0
        С PocketPC другие приколы. Любой Pocket отобразит оптимизированную верстку одинаково (разве что в разных разрешениях), т.к. браузер везде одинаковый — mobile IE. Но и тот имеет свои дефолтовые значения CSS, часть не понимает итп, верстать с фаербагом — извращение. Попробуй открой pda.basher.ru в фаере и на наладоннике, разница очевидна.
        А эмулятор, кстати, идентичный устройству, т.к. от тех же мелкософтовцев, а значит с ним проблем никаких не будет.
        • +1
          еще по первой части, отправлял вам по почте скрины с коммуникатора 320х240, ни ответа ни привета
          • 0
            не получил =((( очень обидно. повторите, пожелуйста, попытку. На webmaster@mobilz.net или webmaster@basher.ru или trin4ik@gmail.com, очень жду, спасибо!
            • 0
              отправил на гмайл и на мобилиз, может архив.рар спамфильтр или анитиврь какой режет?
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              про домены согласен, но все остальное больше касается сотовых, а не PDA. Речь в статье о PDA.
              • 0
                За что вы так не любите автоопределение и PNG?
                Автоопределние - просто неотъемлимая часть крупного сайта. Пользователь не будет рад, если ему, например, загрузится весь полумегабайтный интерфейс gmail только потому, что он не знал, что нужно обязательно ввести спец адрес для мобильной версии.
                Если опять же взять для примера gmail, то изначально для PDA выдается мобилная версия, ожидаемая и необходимая в 90% случаев, но Вы можете выбрать полную HTML версию, а затем и основную.

                Формат PNG поддерживается всеми мобильными броузерами совместимыми с WAP2.0 и уж тем более броузерами современных смартфонов и PDA.
                • 0
                  Автоопределить PDA и выдать мобильную версию, со ссылкой на обычную для тех, кому нужно. По-моему, так.
              • 0
                браузеров под покет наверное уже не меньше чем под десктоп. делать сайты (и советовать другим делать сайты) ориентируясь на покет ИЕ.. хм.. трудно выразить эмоции, но в общем ничего хорошего в этом нет
            • +1
              "призрения" исправьте, пожалуйста, на "прЕзрения". А то пользователям ПДА совсем обидно будет :)
            • 0
              Не могу найти часть 1. Помогите линком, пожалуйста.
            • 0
              Класс! как раз то что нужно!
              • 0
                > Определить PocketPC не так и сложно. HTTP_USER_AGENT содержит «windows ce» + браузер (mobile ie) добавляет ряд своих заголовков, например HTTP_UA_OS.

                Это сработает и на опере, и на айфоне, и на симбиановских мобилах?
                • 0
                  нед. От части и по этому должен присутствовать поддомен pda.
                  • 0
                    > 3. Авто определение PDA устройства + pda.site.ru домен.

                    каждый раз, когда вы читаете третий пункт, Тим Бернерс-Ли вздрагивает

                    о <style media="" никто уже не помнит? : )
                    • 0
                      откройте сурс и посмотрите =) в первой статье я указал, по каким причинам нужна другая верстка и почему именно не хватит просто добавить оптимизированный css.
                      • 0
                        media="handheld" в сурсе я нигде не увидел ; )

                        в первой статье основной причиной другой верстки названо «тупо грузить лишний трафик», и всё. Я понимаю, конечно, что оперирую ценами дефолт-сити, но все равно метр трафика мне стоит столько же, сколько минута разговора с городским телефоном, а тратить этот метр я буду минут 10 — минимум!

                        давайте еще делать отдельные субдомены для разных браузеров, для слабовидящих/слепых юзеров, для поисковых ботов, для тех, кто любит управлять с клавиатуры, и т.п. ; )
                        • 0
                          вы большой знаток верстки под мобильные устройства, я смотрю. Не покажите свои примеры хорошего сайта + оптимизированного под handheld стили?
                          • –2
                            если в ваших словах действительно присутствует скрытая ирония, то вот вам вариант ответа:

                            непохоже, что эта статья ориентирована именно на таких знатоков ; )
                            аргументы, приводящиеся в ней, доступны для понимания и обычным веб-разработчикам


                            а если скрытая ирония мне только почудилась, то серьезный ответ такой:

                            нет, мне не приходилось верстать под мобильные устройства. Однако когда передо мной возникает сложный для моей квалификации выбор, я стараюсь полагаться на решения авторитетных в веб-разработке людей, обычно именно тех, кто создает веб-стандарты. В этом конкретном случае они считают, что сайту не нужны отдельные версии для разных агентов.

                            а вот неплохой, имхо, пример handheld-стилей: http://my.opera.com/WebApplications/blog…
                            • 0
                              в том и разница между нами, видимо. Вы без задней мысли доверяете мнению людям вокруг, а я проверяю на своей шкуре места, в которых я не уверен. Если я ошибаюсь, это мои ошибки и я за них несу ответ.
                              • 0
                                не просто людям вокруг, а тем, кто определяет будущее интернета

                                а вы рискуете, что интернет и его стандарты уйдут в одну сторону, а вы — в другую

                                удачи вам в таком нелегком пути : )
                • 0
                  «Ничего кроме белого фона, черного текста и синих ссылок в PDA версии сайта (примеров не мало) это высшая степень неуважения и презрения к владельцам современных мобильных устройств.»
                  Не согласен, это высшая степень уважения к пользователям GPRS. :)
                  • 0
                    про wml верстку будет отдельная статья, а с GPRS, конечно, беда =( В европе подобных проблем нет, там wifi почти везде, где тусуются люди.
                    • 0
                      Не приплетайте Европу, там с интернетом напряги тоже еще те, испытал на собственной шкуре. WiFi в кафе имеется, но далеко не всегда это доступно/недорого. Возможно местные жители и не испытывают проблем, но приезжему просто так хороший канал не найти, тот же GPRS дороже нашего раз в 5. Что порадовало, так только скорость и качество связи...
                    • 0
                      Согласен. Зачастую при GPRS-подключении захожу с ноутбука на pda-версии сайтов, поскольку там нет тяжелых рюшечек, рекламы...
                    • 0
                      По 4 пункту (по части дизайна) думаю стоит задуматься о трафике. На мобильных устройствах он как правило значительно дороже да и каналы тоже намного тоньше, поэтому использование жирной графики весьма сомнительно. Думаю именно поэтому и в приведенном примере (и в других аналогичных) не используется полноценная графика.
                      • 0
                        графика, оптимизированная под PDA, весит копейки. Соответственно не стоит вставлять баннеры-небоскребы по 400 кило каждый, но и полностью отказываться от графики, это перебор.
                      • 0
                        По поводу отдельного домена - это плохо тем, что принуждает вас использовать WildCard SSL-сертификат (разумеется в случае необходимости SSL), что менее удобно и более дорого.
                        • 0
                          По этой же теме есть старая статья на webmascon: http://webmascon.com/topics/coding/46a.asp
                          • 0
                            Господа, а поделитесь ссылками на эмули?
                            • +1
                              http://www.microsoft.com/downloads/detai…
                              внизу есть ссылка на русскую msi.
                              • 0
                                Благодарю. Под симбиан, в основном, ведь идет opera-mini? Или я ошибаюсь?

                                Много-ли подводных камней с ней?
                                • 0
                                  не забывайте писать media="handheld, all", тогда проблем не будет =)
                            • 0
                              Скоро думаю писать проект с поддержкой PDA. Вообще ничего не знаю по этому поводу. Спасибо, в целом статья оказалась вполне полезной. Желаю продолжения, если есть и если можно. :)
                              • 0
                                http://pda.basher.ru/reg?type=favorit

                                однако хронилище под избранное


                                исправьте
                              • 0
                                А нельзя окно оперы ресайзить под 320*240? по моему можно. Можно даже в заголовке показать размеры видимого окна :)
                                • 0
                                  в опере можно тупо нажать shift+f11 - и получить вид, как на мобильной опере
                                  • 0
                                    вот только мобильной оперой пользуется не так много народу
                                    • 0
                                      да? вообще-то больше, чем даже немобильным сафари, то есть, опера мини заметна даже на немобильном рынке

                                      и вообще, я говорил, что лучше смотреть "как на мобильной опере", чем "как на десктопной опере с окном шириной в 320 пикселей" : )
                                      • 0
                                        Какие-то странные у вас данные.
                                        http://www.liveinternet.ru/stat/ru/brows…
                                        опера мини хоть и занимает какую-то нишу, но к сожалению li.ru не различает mobile ie, пока. Уверен, его гораздо больше, чем опера-мини.
                                        Ответил я не вам лично, а вашей ветке.
                                        • 0
                                          я думаю, то, что li.ru не различает mobile ie — само по себе говорящий факт : )
                                          • 0
                                            ну у arty странные (по Вашему), у Вас - никаких
                                  • +1
                                    По пункту 4 — чушь несусветная. Переносить весь функционал "большой" версии сайта в мобильную — вредно. Мобильная версия — это именно мобильная версия, а не просто версточка под маленький экранчик. Соответственно, функционал нужен только тот, который нужен мобильным пользователям.
                                    • 0
                                      какой, например? возьмем к примеру хабр, что нужно мобильным пользователям и что нужно убрать?
                                      • 0
                                        Сайты бывают разные, зачем же сразу хабр. Возьмем, к примеру, сайт некоего сферического кинотеатра.
                                        Можно предположить (и притом весьма уверенно), что мобильному пользователю в основном будет интересно расписание сеансов с ценами и (возможно) как добраться, а вовсе не условия аренды залов под презентации...
                                        • 0
                                          Ну и размещать информацию с сеансами выше, нежели информацию о аренде.
                                          Да и потом зачем обрезать подобную информацию?? Я зашел в сеть, увидел приятные цены на аренду залов, встретился с партнером, в кафе с наладонника зашел на этот сайт и? Я помню что там была эта информация, почему сейчас она будет скрыта?
                                        • 0
                                          например гугл в мобильных версиях для регистрации предлагает посетить адресс со своего ПК.
                                      • 0
                                        после определения мобильного клиента нужно не выдавать другие шаблоны, а делать редирект на pda-версию, чтобы была возможность посмотреть полную версию сайта с гаджета.
                                        если вы так и делаете, то простите, не понял сразу...

                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.