Мобильная версия сайта

Здравствуйте. Хотел задать такой вопрос. У меня есть сайт который прекрасно работает на всех 4-х браузерах (включая IEv6 :)). Теперь хочу сделать мобильную версию сайта. Скажите, что нужно знать для верстки сайта для мобильных телефонов, какие могут быть "подводные камни". К примеру, я заметил что OperaMini не отображает таблицы правильно, а показывает все одной строкой. Хотел бы услышать такие особенности, как Cookies, JavaScript, минимальное разрешение экрана, CSS3 и остальные важные отличия от их стандартных версий. В общем все, что нужно учесть при переходе на мини-версию сайта.

Ответ

Почитать можно тут и тут. О, чуть не забыл, еще тут почитайте.

Постараюсь привести некоторые данные, которые отсутствуют в вышеуказанных статьях или высветлены не полностью. Первым делом создаем отдельную каскадную таблицу стилей, которая будет использоваться только для мобильных устройств. Подключать ее нужно подобным образом:

или(предпочтительнее использовать первый вариант)

"/css/handheld.css" - путь к таблице стилей для моб. устройств; media="handheld" - указание браузеру, что данный ресурс следует использовать только в случае просмотра веб-страницы с помощью устройств у которых маленькое расширение экрана. Рекомендую еще создать CSS файлик для принтеров(значение "print" атрибута "media"). Можно почитать подробно на htmlbook
Как правильно подключать данный стиль. Если на странице есть стили для всех устройств (со значением "all" атрибута "media", прошу заметить что оно устанавливается по-умолчанию), то:
Создаем файл "reset.css". Он должен обнулять свойства всех нужных нам селекторов. После подключение/объявление всех стилей в шапке странице(тег head) подключаем файл "reset.css". При подключении не забываем указать тип устройств, для которых данная каскадная таблица стилей будет отображаться, - "handheld". Подключаем стили для мобильных устройств.
Если же все стили на станице четко распределены по типам носителей(устройств, что отображают страницу), то файл "reset.css" подключать не нужно. Нежданно-негадано проблема может возникнуть из-за так называемых внутренних стилей. Подогнать их под разные девайсы относительно затруднительно(но возможно, к примеру с помощью JS), поэтому рекомендую вынести их в соответствующие файлы стилей.

Рекомендации при верстке под handheld:
Не верстайте с помощью WML. Он безнадежно устарел и вместо него используется XHTML/CSS, по крайней мере на момент написания этого ответа. Из-за того, что свойства float, clip, overflow, both не пашут на большинстве мобильных телефонов, придется ограничиться использованием элементов с абсолютным позиционированием(position: absolute;). Так же избегайте блоков fixed. Насчет relative ничего написать не могу. Сокращенные свойства типа: "margin: 10px 20px 30px 40px;" придется разбить на более простые: "margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;". Табличная верстка крайне нежелательна. Она плохо обрабатывается устройствами подобного вида. Запрещены вложенные таблицы и даже не работают атрибуты "cellpadding" и "cellspacing". Cookie чаще всего адекватно устанавливаются и считываются, причем в даже в старых телефонах. Импортировать внешние шрифты запрещено. CSS3 юзать рано, его поддержка почти отсутствует. Flash контент или заменять на аналогичный не флеш или прятать. Причиной тому является его проблемное отображение на моб. устройствах и сомнения в дальнейшей поддержке. Использовать JS для формирования дизайна страницы по-минимуму. Речь идет не про динамическую составляющую страницы. Постараюсь продемонстрировать на примере: Некоторый верстальщик создал страничку, после тестов увидел, что один из блоков не на своем месте. Нескольких минут борьбы с CSS и верстальщик понимает, что где-то стиль проблемного блока перекрывается из-за чего все его старания решить проблему безрезультатны. Вместо того, что бы искать проблемное определение ему приходит в голову "гениальная" идея пофиксить положение блока javascript-ом, выполнив его после загрузки страницы. На таких костылях страничка была добавлена на сайт и опубликована. Минутой позже страничку просматривает некоторый пользователь с использованием ПК. Элементы сайта отображаются нормально, пользователь счастлив. Еще через минуту с мобильного телефона заходит на только что опубликованную страницу другой пользователь, телефон не самый новый и JS у него не пашет, именно поэтому проблемный блок коварно меняет свою позицию превращая великолепнейший дизайн в кашу. Пример не очень удачный, но суть отображает.