Верстка мобильных веб-приложений

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

Общие требования

Принципы верстки Документ должен быть сверстан с использованием резиновой верстки и быть валидным.

Doctype

<?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">

<title> Заголовок должен быть говорящий, но короткий.

Стили Стили должны быть записаны в сокращенной форме и оптимизированы. Например, свойства и цвета должны быть записаны в короткой форме, лишние пробелы и «;» вырезаны. Вставлять стили рекомендуется тегом <style> в <head>. Подгружайте только используемые на странице стили и css-reset, ничего лишнего.

Изображения Оптимизируйте графику для мобильных клиентов. Указывайте размеры через аттрибуты width и height тега <img>, обязательно оуказывайте alt.

Телефоны старых моделей

Эти рекомендации применимы к приложениям в версии мобильного Моего Мира для обычных телефонов (не смартфонов).

Стили Не применяйте: дочерние селекторы, float, overflow, position. Font-size указывайте в em или %. Используйте только полную запись CSS-свойств background 
(-color, -image, -repeat, -position). Используйте тэги h1, h2, h3, h4, h5, h6, ul, dl, p, div; не используйте тэги em, strong, span, b, i.

Код Если нужно жирное начертание, то задавайте font-weight:bold. Для курсива: font-style:italic. Не используйте вложенные <table>, старайтесь использовать альтернативные способы вместо табличной верстки. Якоря не поддерживаются Nokia, Openwave.

Изображения На мобильных телефонах Fly некорректно отображается png-8.

Ссылки Задавайте цвета активным и посещенным ссылкам (там, где это необходимо), но помните, что не все браузеры это поддерживают. Не следует использовать фон для ссылок. Используйте для навигации accesskey и информируйте об этом на странице.

Сброс стилей

*{margin:0}
body{font-family:Arial,sans-serif;margin:0;padding:0;color:#000;background:#fff}
p{padding:0 0 5px}
img{border:0;vertical-align:middle}

Дополнительно

Смотрите также рекомендации W3C.