---
title: "Мобильная верстка"
description: "Очень мало информации по данному вопросу в Интернете, и большая часть просвещенна верстке страниц ..."
author: "exentrich"
published: "2008-06-16T15:32:29+00:00"
modified: "2008-06-16T15:32:29+00:00"
locale: "ru"
canonical_url: "https://yvision.kz/post/mobilnaya-verstka-714"
markdown_url: "https://yvision.kz/post/mobilnaya-verstka-714/markdown"
site_name: "Yvision.kz"
---

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

> Очень мало информации по данному вопросу в Интернете, и большая часть просвещенна верстке страниц ...

Очень мало информации по данному вопросу в Интернете, и большая часть просвещенна верстке страниц на WML. И я убедился в том, что сегодняшний WAP – интернет, не дружит с валидной версткой. Да и вы сами можете убедиться в этом, многие популярные и авторитетные мобильные ресурсы, допускают очень много ошибок в верстке. [Я хочу показать](http://www.overme.ru/2008/06/04/mobilnaya-verstka/) те ошибки, которые допускаются в большей мере, и хоть как-то изменить положения дел. Надеюсь те, кто заинтересован в этом, возьмут все те рекомендации, которые я приведу ниже на вооружение. Весь дальнейший текст описывают верстку в формате XHTML.

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

- - - - - - - - overme.ru - - - -

Желательно все свои странички начинать по данному примеру, так как в будущем у вас будет меньше проблем с правильным отображением на экранах мобильных телефонов.

**2. Закрывайте все теги** В том числе такие как:

- , , ,

Это одна из самых распространенных ошибок. Также не забывайте задавать дополнительный параметр для картинок alt=”” и по возможности ширину и длину.

**3. Не используйте фреймы, таблицы, pop up окна, скрипты (java, vb и т.д). ** Хоть и современные модели поддерживают данные теги, все-таки они не предусмотрены в W3C XHTML.

**4. Стиль рекомендуется писать прямо в коде страницы** Так как некоторые модели телефонов не поддерживают стили в отдельном файле.

**5. Используйте кодировку UTF-8.** Многие девайсы кроме как этой более не поддерживают.

Дополнительно несколько немаловажных советов: Сжимайте графику до предела, не используйте графику больших размеров. Также откажись от PNG, так как на мобильном данный формат отображается некорректно. Страница должна быть не более 20-30 кб. От всех этих факторов зависит время загрузки страницы, причем она будет кардинально отличатся в разных сетях. Не ленитесь указывать Access ключи. Они добавят больше юзабилности странице. Кто не в курсе, они задаются как дополнительный параметр для тега ссылок в таком виде:

- [1][Link 1](link1.htm) - [2][Link 2](link2.htm) - [3][Link 3](link3.htm)

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

Обязательно ознакомьтесь с перечнем допустимых тегов, и правил их использования, на данной странице (http://www.w3.org/TR/xhtml1/) .

В конце статьи приведу список ресурсов, на которых вы сможете проверить ваши готовые странички на валидность, и правильное отображение на экранах мобильных телефонов:

[http://validator.w3.org](http://validator.w3.org) Валидатор от W3C.

[http://ready.mobi](http://ready.mobi) Предоставляет информацию в очень удобном и интуитивно понятном виде. Оценивает страницу по очень многим факторам, причем, если найдена какая либо ошибка вы можете прочесть об этом нужную статью и исправить её. Большим плюсом является эмулятор нескольких популярных моделей телефонов. Минус, ресурс на английском.

В последующих статьях [я расскажу о том](http://www.overme.ru/2008/06/04/mobilnaya-verstka/), как не стоит делать страницы, и как делать их правильно ![:)](http://www.overme.ru/wp-includes/images/smilies/icon_smile.gif)

---

Source: [https://yvision.kz/post/mobilnaya-verstka-714](https://yvision.kz/post/mobilnaya-verstka-714)