Общая информация
Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности HTML/CSS, а другая наоборот — либо не поддерживать, либо поддерживать неправильно.
Но большинство устройств среднего и уж тем более hi-end класса поддерживают HTML/CSS в той или иной степени. Таким образом, язык WML для разработки сайтов под мобильные устройства устарел и практически не используется. На смену ему постепенно приходит общепризнанный стандарт в разработке сайтов — XHTML/CSS. Кодировка — строго UTF-8 (No BOM).
DOCTYPE, используемый для мобильных устройств
Практически везде на известных мобильных сайтах, таких как Google, Яndex, используется DOCTYPE XHTML Mobile 1.0:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
Также, иногда встречаются сайты с DOCTYPE XHTML Basic 1.1:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
На мой взгляд, предпочтительнее использовать первый вариант.
Особенности верстки
Подключение CSS
Некоторые устройства не поддерживают стили, подключаемые из внешних файлов, поэтому есть рекомендация описывать все стили внутри самого документа:
<style type="text/css"> body { background-color: #E9E9CC; font-family: sans-serif; font-size: small; } </style>
Я не уверен насчет этого, но вполне возможно, что таким образом можно достичь совместимости с некоторыми устаревшими мобильными устройствами. В то же время, например, браузер Opera Mini вполне справляется с этим. Верстка должна быть организована таким образом, чтобы в случае необходимости контент оставался читабельным даже при невозможности подключения устройством стилей.
Сокращенная запись свойств
Есть мнение, что стили вроде
padding
и margin
нужно прописывать отдельно, используя padding-left
, padding-top
, margin-right
и т.д. Точно так же следует поступать со всеми свойствами, которые имеют короткую запись. Например красный цвет фона стоит лучше записать как background-color: #ff0000;
, а не background-color: #f00;
и тем более не background: #f00;
.Фон элементов
Нежелательно использовать изображения в качестве фонов, т.к. многие устройства их могут просто не поддерживать. Если они все-таки используются, то необходимо задавать подходящий под фон цвет и проверять, как будет смотреться сайт без изображения.
Изображения
Все изображения на сайте желательно заключать в тег
<img>
и не забывать добавлять атрибут alt
, потому что загрузка изображений на устройстве может быть отключена, и вместо него нужно вывести замену текстом, ну и в конце концов, — мы ведь XHTML используем. ;-) При подготовке изображений желательно ужимать их до минимального размера. При добавлении изображения в документ необходимо указывать его размеры атрибутами width
и height
.В итоге, каждое изображение, вставленное в документ должно иметь вид:
<img src="image.gif" width="40" height="20" alt="Текстовая замена" />
Таблицы
Старайтесь избегать сложных, в том числе вложенных таблиц, т.к. некоторые браузеры могут не справиться с их рендерингом и вывести кашу вместо таблицы. Также нельзя использовать атрибуты
cellpadding
и cellspacing
, они не включены в DOCTYPE. И ни в коем случае не следует применять таблицы для верстки страниц. Таблицы не удобны в применении на маленьких экранах: чтобы прочитать объёмную таблицу, приходится применять горизонтальную прокрутку, чего тоже следует избегать учитывая, что разрешение экранов мобильных устройств несравнимо меньше, чем у настольного монитора.Списки
На просторах интернета я наткнулся на упоминание о том, что некоторые браузеры, в частности встроенный браузер в телефонах Nokia некорректно отображает нумерованные и маркированные списки. Возможно это и так, но я считаю, что использовать списки можно и нужно, потому что при отключении стилей, информация остается строго структурированной и хорошо воспринимается пользователем.
Шрифты
Мобильные устройства в большинстве своем имеют очень плохую поддержку шрифтов, поэтому полагаться на то, что текст будет отображен именно тем шрифтом, который был задан в стилях не стоит. Но указывать хотя бы гарнитуру (
serif
или sans-serif
) все равно нужно. Размер шрифтов желательно задавать в относительных единицах или, что еще лучше указывать аргументы свойства font-size
в значениях small
, medium
, или large
.Плавающие элементы
Нельзя использовать плавающие элементы. Большинство браузеров просто не умеют их обрабатывать. Т.е. при создании верстки старайтесь не использовать такие свойства, как
float
, clear
, overflow
, clip
.Тестирование
Тестирование необходимо производить в нескольких режимах:
- с загрузкой изображений и стилей
- без загрузки изображений
- без загрузки стилей
- с полностью отключенными стилями и изображениями
Для тестирования сайтов удобно пользоваться эмулятором Opera Mini, а также встроенной функцией в Opera (для десктопа) в меню «Вид» -> «Небольшой экран».
Мобильные браузеры
- Opera Mini (Java)
- Opera Mobile (Symbian S60 2.x, Windows Mobile 5/6 Pocket PC)
- UCWEB (Java)
- Internet Explorer Mobile (Windows Mobile 5/6 Pocket PC)
- Safari (iPhone, iPod Touch)
- Nokia S40 Browser (Nokia S40 OS)
- Web Browser for S60 (Symbian S60)