Не так давно я запустил небольшой проект, призванный помочь «мобильным» людям объеденяться, общаться на форуме, меняться мыслями на хабраподобных блогах итп. Однако, как правильно было замечено в комментариях, проект якобы «мобильный», а с мобильных устройств он смотрится хреновенько, не смотря на валидную xhtml верстку итп. «Черт подери», — подумал я, включил свой FS loox n560 и начал потихоньку переверстывать темплейты для pda версии.
Сначала я думал обойтись подключением «handheld.css» и написанием КПК-ориентированных стилей, как я это делаю обычно для «печатных» версий. Но достаточно быстро понял, что не все проблемы можно решить с помощью CSS. Тем более принцип построения тех же «печатных» страниц сводится обычно к: «Это скрываем, это скрываем, это переносим сюда, это туда, а это тоже скрываем». Все же мы имеем дело с мобильными устройствами и грузить лишний траффик, чтобы в итоге не отображать его это глупо… В итоге пришел к тому, что следует не только CSS стили переписать, но и шаблоны переверстать. Начал с более маленького и простого проекта, чтобы попрактиковаться…
Как раз в ToDo листе одного из других моих проектов давно пылится строчка «PDA версия», проект не очень-то популярный, но более менее известный. Как раз он был простым и относительно маленьким, с него я и начал. Для тех кто не в курсе, basher.ru является агрегатором цитат со всяких разных цитатников + имеет свою базу цитат. С недавних пор он еще и веселые qip статусы собирает. Некий text-юмористичские портал.
В руках у меня был Fujitsu-Siemens LOOX N560, с 640х480 разрешением, WM 5.0 на борту со стандартным IE Mobile в комплекте. Написал условие:
«(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'])»
для Pocket шаблонов и отправился в пляс… В итоге получилось примерно такая картинка:
Итак, приступим… Основным достоинством портативных устройств, является и большим подводным камнем для разработчиков =) маленький экран ломает многие привычные техники и стили верстки. Например diig-like меню, на творение которой ушло несколько дней, в pda-версии выглядит лишь как 2 селекта =( даже обидно. А ведь практически вся навигация любого сайта в итоге сойдется к select`у. Но с другой стороны, на мобильных устройствах это действительно удобно =)))
А так же можно практически сразу забыть о «колоночном» дизайне. Тут он лишь одноголоночный, трудно себе представить 2-х или 3-х колоночным и это нормально. Хотя на самом деле тут все немного проще, чем может показаться. Например в моем случае все свелось к замене:
на:
Или что-то вроде того. Хотя, конечно, большую часть всех менюх я вырубил для pocket шаблона. Чаще они просто занимают пустоту в браузере, но мешаются на покете. Как я уже говорил выше, убираем их не с помощью display:none;, а физически вырезаем из темплейта.
Приятным удивлением было увидеть листалку, практически не прикоснувшись ни к верстке, ни к стилям:
Потыкал — даже работает. Следующим шагом стал JS…
JS оказался основным подводным камнем. Например на моей системе, что я описывал выше, я могу получить родителей элемента, детей, иметь доступ к стилям, к тому же атрибуту «id», но не к className =( А пактичски весь JS на basher`е построен на чтении\назначении именно этого атрибута. В мобильном IE даже XmlHttp объект есть, но className — нет. В блоге разработчиков мобильного осла я нашел «гордые» упоминания в некоторых постах, типа: «были добавлены новые методы в JS», среди которых был и className. Но судя по всему моя система слишком старая. Т.е. по ходу достаточно просто обновить ось на наладоннике, но с другой стороны я не знаю как это делать и зачем и таких как я не мало, всех их заставлять обновлять операционку, когда они заходят на сайт?
К сожалению голосовалку на AJAX на данный момент я так и не реализовал, как раз по вышеуказанным причинам — времени не хватило. Возможно на неделе появится время после работы и я её добью, однако на данный момент «мобильность» сервиса дейсвтительно ставится под сомнение. Он обрел мобильную верстку, он сохранил весь свой функционал, но я не думаю, что найдется много людей, готовых «голосовать» за цитаты и каждый раз ждать перезагрузки страницы =(
В идеале, конечно, сделать не просто AJAX голосовалку, но и предусмотреть возможные перебои коннекта. Едет человек в автобусе или маршрутке, голосует себе спойоно за цитаты, спускается в метро, продолжая матать страницу и голосовать, а связь бац и пропала… Пока на ум приходит лишь проверять состояние AJAX запроса и при его таймауте писать голос человека в куку, а при переходе на любую другую станицу читать эти самые куки. Однако это уже задача не на сегодня.
В целом было достаточно интересно верстать под мобильное устройство, хоть и необычно тяжело. Тяжело потому, что пока я себе плохо представляю как правильно разместить навигацию, прочие служебные элементы на маленьком экране, как отделить от стандартных элементов — контент итп. Если у вас есть какие-то мысли, идеи или живые примеры — кидайте в комментах. Так же будет очень интересно посмотреть, как мобильная версия башера смотрится на более мелких устройствах (у меня 640х480, даже не знаю к сожалению или к счастью), на iPhone и прочих. Если у кого есть подобная возможность — выкладывайте скрины в комментах, или кидайте их мне на email: webmaster@basher.ru. В общем — буду рад любой помощи в этом вопросе. Через пару неделек обещаю отчитаться и написать более подробно о оссобенностях верстки под мобильные устройства.
Приятных вам верстаний!
Сначала я думал обойтись подключением «handheld.css» и написанием КПК-ориентированных стилей, как я это делаю обычно для «печатных» версий. Но достаточно быстро понял, что не все проблемы можно решить с помощью CSS. Тем более принцип построения тех же «печатных» страниц сводится обычно к: «Это скрываем, это скрываем, это переносим сюда, это туда, а это тоже скрываем». Все же мы имеем дело с мобильными устройствами и грузить лишний траффик, чтобы в итоге не отображать его это глупо… В итоге пришел к тому, что следует не только CSS стили переписать, но и шаблоны переверстать. Начал с более маленького и простого проекта, чтобы попрактиковаться…
Как раз в ToDo листе одного из других моих проектов давно пылится строчка «PDA версия», проект не очень-то популярный, но более менее известный. Как раз он был простым и относительно маленьким, с него я и начал. Для тех кто не в курсе, basher.ru является агрегатором цитат со всяких разных цитатников + имеет свою базу цитат. С недавних пор он еще и веселые qip статусы собирает. Некий text-юмористичские портал.
В руках у меня был Fujitsu-Siemens LOOX N560, с 640х480 разрешением, WM 5.0 на борту со стандартным IE Mobile в комплекте. Написал условие:
«(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'])»
для Pocket шаблонов и отправился в пляс… В итоге получилось примерно такая картинка:
Итак, приступим… Основным достоинством портативных устройств, является и большим подводным камнем для разработчиков =) маленький экран ломает многие привычные техники и стили верстки. Например diig-like меню, на творение которой ушло несколько дней, в pda-версии выглядит лишь как 2 селекта =( даже обидно. А ведь практически вся навигация любого сайта в итоге сойдется к select`у. Но с другой стороны, на мобильных устройствах это действительно удобно =)))
А так же можно практически сразу забыть о «колоночном» дизайне. Тут он лишь одноголоночный, трудно себе представить 2-х или 3-х колоночным и это нормально. Хотя на самом деле тут все немного проще, чем может показаться. Например в моем случае все свелось к замене:
#content{
width:80%;
}
#right{
width:20%;
}на:
#content{
width:100%;
}
#right{
width:100%;
margin-top:10px;
}Или что-то вроде того. Хотя, конечно, большую часть всех менюх я вырубил для pocket шаблона. Чаще они просто занимают пустоту в браузере, но мешаются на покете. Как я уже говорил выше, убираем их не с помощью display:none;, а физически вырезаем из темплейта.
Приятным удивлением было увидеть листалку, практически не прикоснувшись ни к верстке, ни к стилям:
Потыкал — даже работает. Следующим шагом стал JS…
JS оказался основным подводным камнем. Например на моей системе, что я описывал выше, я могу получить родителей элемента, детей, иметь доступ к стилям, к тому же атрибуту «id», но не к className =( А пактичски весь JS на basher`е построен на чтении\назначении именно этого атрибута. В мобильном IE даже XmlHttp объект есть, но className — нет. В блоге разработчиков мобильного осла я нашел «гордые» упоминания в некоторых постах, типа: «были добавлены новые методы в JS», среди которых был и className. Но судя по всему моя система слишком старая. Т.е. по ходу достаточно просто обновить ось на наладоннике, но с другой стороны я не знаю как это делать и зачем и таких как я не мало, всех их заставлять обновлять операционку, когда они заходят на сайт?
К сожалению голосовалку на AJAX на данный момент я так и не реализовал, как раз по вышеуказанным причинам — времени не хватило. Возможно на неделе появится время после работы и я её добью, однако на данный момент «мобильность» сервиса дейсвтительно ставится под сомнение. Он обрел мобильную верстку, он сохранил весь свой функционал, но я не думаю, что найдется много людей, готовых «голосовать» за цитаты и каждый раз ждать перезагрузки страницы =(
В идеале, конечно, сделать не просто AJAX голосовалку, но и предусмотреть возможные перебои коннекта. Едет человек в автобусе или маршрутке, голосует себе спойоно за цитаты, спускается в метро, продолжая матать страницу и голосовать, а связь бац и пропала… Пока на ум приходит лишь проверять состояние AJAX запроса и при его таймауте писать голос человека в куку, а при переходе на любую другую станицу читать эти самые куки. Однако это уже задача не на сегодня.
В целом было достаточно интересно верстать под мобильное устройство, хоть и необычно тяжело. Тяжело потому, что пока я себе плохо представляю как правильно разместить навигацию, прочие служебные элементы на маленьком экране, как отделить от стандартных элементов — контент итп. Если у вас есть какие-то мысли, идеи или живые примеры — кидайте в комментах. Так же будет очень интересно посмотреть, как мобильная версия башера смотрится на более мелких устройствах (у меня 640х480, даже не знаю к сожалению или к счастью), на iPhone и прочих. Если у кого есть подобная возможность — выкладывайте скрины в комментах, или кидайте их мне на email: webmaster@basher.ru. В общем — буду рад любой помощи в этом вопросе. Через пару неделек обещаю отчитаться и написать более подробно о оссобенностях верстки под мобильные устройства.
Приятных вам верстаний!
