Очень мало информации по данному вопросу в Интернете, и большая часть просвещенна верстке страниц на WML. И я убедился в том, что сегодняшний WAP – интернет, не дружит с валидной версткой. Да и вы сами можете убедиться в этом, многие популярные и авторитетные мобильные ресурсы, допускают очень много ошибок в верстке.
Я хочу показать те ошибки, которые допускаются в большей мере, и хоть как-то изменить положения дел. Надеюсь те, кто заинтересован в этом, возьмут все те рекомендации, которые я приведу ниже на вооружение. Весь дальнейший текст описывают верстку в формате XHTML.
1. Тип документа, мета теги.
Первой ошибкой является неправильное задание типа документа, и опускание важных мета тегов. Ниже приведу нулевую страничку с валидной версткой:
-
<?xml version="1.0"?>
-
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Cache-Control" content="must-revalidate" />
-
<meta http-equiv="Cache-Control" content="no-cache" />
-
<meta http-equiv="Cache-control" content="max-age=2" />
-
<title>overme.ru</title>
-
</head>
-
<body>
-
</body>
-
</html>
Желательно все свои странички начинать по данному примеру, так как в будущем у вас будет меньше проблем с правильным отображением на экранах мобильных телефонов.
2. Закрывайте все теги
В том числе такие как:
-
<br>, <img>, <b>, <i>
Это одна из самых распространенных ошибок. Также не забывайте задавать дополнительный параметр для картинок alt=”” и по возможности ширину и длину.
3. Не используйте фреймы, таблицы, pop up окна, скрипты (java, vb и т.д).
Хоть и современные модели поддерживают данные теги, все-таки они не предусмотрены в W3C XHTML.
4. Стиль рекомендуется писать прямо в коде страницы
Так как некоторые модели телефонов не поддерживают стили в отдельном файле.
5. Используйте кодировку UTF-8.
Многие девайсы кроме как этой более не поддерживают.
Дополнительно несколько немаловажных советов:
Сжимайте графику до предела, не используйте графику больших размеров. Также откажись от PNG, так как на мобильном данный формат отображается некорректно. Страница должна быть не более 20-30 кб. От всех этих факторов зависит время загрузки страницы, причем она будет кардинально отличатся в разных сетях.
Не ленитесь указывать Access ключи. Они добавят больше юзабилности странице. Кто не в курсе, они задаются как дополнительный параметр для тега ссылок в таком виде:
-
[1]<a accesskey="1" href="link1.htm">Link 1</a>
-
[2]<a accesskey="2" href="link2.htm">Link 2</a>
-
[3]<a accesskey="3" href="link3.htm">Link 3</a>
И при нажатие определенной клавиши на мобильном браузер автоматически переходит на заданную страницу.
Обязательно ознакомьтесь с перечнем допустимых тегов, и правил их использования, на данной странице (http://www.w3.org/TR/xhtml1/) .
В конце статьи приведу список ресурсов, на которых вы сможете проверить ваши готовые странички на валидность, и правильное отображение на экранах мобильных телефонов:
Валидатор от W3C.
Предоставляет информацию в очень удобном и интуитивно понятном виде. Оценивает страницу по очень многим факторам, причем, если найдена какая либо ошибка вы можете прочесть об этом нужную статью и исправить её.
Большим плюсом является эмулятор нескольких популярных моделей телефонов.
Минус, ресурс на английском.
В последующих статьях я расскажу о том, как не стоит делать страницы, и как делать их правильно 