• 308757
  • 713
  • 55
Нравится блог?
Подписывайтесь!

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

Очень мало информации по данному вопросу в Интернете, и большая часть просвещенна верстке страниц на WML. И я убедился в том, что сегодняшний WAP – интернет, не дружит с валидной версткой. Да и вы сами можете убедиться в этом, многие популярные и авторитетные мобильные ресурсы, допускают очень много ошибок в верстке.
Я хочу показать те ошибки, которые допускаются в большей мере, и хоть как-то изменить положения дел. Надеюсь те, кто заинтересован в этом, возьмут все те рекомендации, которые я приведу ниже на вооружение. Весь дальнейший текст описывают верстку в формате XHTML.

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

  1. <?xml version="1.0"?>
  2. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Cache-Control" content="must-revalidate" />
  6. <meta http-equiv="Cache-Control" content="no-cache" />
  7. <meta http-equiv="Cache-control" content="max-age=2" />
  8. <title>overme.ru</title>
  9. </head>
  10. <body>
  11. </body>
  12. </html>

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

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

  1. <br>, <img>, <b>, <i>

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

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

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

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

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

  1. [1]<a accesskey="1" href="link1.htm">Link 1</a>
  2. [2]<a accesskey="2" href="link2.htm">Link 2</a>
  3. [3]<a accesskey="3" href="link3.htm">Link 3</a>

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

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

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

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

В последующих статьях я расскажу о том, как не стоит делать страницы, и как делать их правильно :)

17 июня 2008, 3:32
1054

Loading...

Комментарии

spawn
0
0
интересно, спасибо.
smerch
0
0
все думал, с чего начать делать wap версию, наверное теперь с Вашего блога!
eduha
0
0
Вот вы пишете, что у вас верстка валидная, а на самом деле в 9-й строке тег </style> прописан, хотя открывающего тега в коде нет :)
Ой, жесткая опечатка! Спасиб что заметил!

Оставьте свой комментарий

Спасибо за открытие блога в Yvision.kz! Чтобы убедиться в отсутствии спама, все комментарии новых пользователей проходят премодерацию. Соблюдение правил нашей блог-платформы ускорит ваш переход в категорию надежных пользователей, не нуждающихся в премодерации. Обязательно прочтите наши правила по указанной ссылке: Правила

Также можно нажать Ctrl+Enter

Популярные посты

«До какой же еще степени унижения должен дойти народ?!»

«До какой же еще степени унижения должен дойти народ?!»

Министерство труда и соцзащиты провело через парламент очередной крайне неоднозначный закон, который может вызвать всплеск недовольства в стране.
openqazaqstan
15 нояб. 2017 / 11:17
  • 25154
  • 19
«Почему я не хочу встречаться с мужчинами-казахами»

«Почему я не хочу встречаться с мужчинами-казахами»

Заранее отпишусь, данный пост не является попыткой оскорбить собственную нацию) Как говорится о вкусах не спорят, каждому свое.
Bonittta
16 нояб. 2017 / 14:28
  • 13096
  • 349
Почему катастрофический отток интеллектуальной элиты не тревожит Астану?

Почему катастрофический отток интеллектуальной элиты не тревожит Астану?

Как сообщает телеканал КТК, только за последние девять месяцев Казахстан покинули 28200 человек, из них почти пять тысяч инженеров, около 2700 экономистов и 1700 учителей.
openqazaqstan
17 нояб. 2017 / 11:00
  • 8694
  • 48
Задержан казахстанец, продававший детей в сексуальное рабство в ОАЭ и Бахрейн

Задержан казахстанец, продававший детей в сексуальное рабство в ОАЭ и Бахрейн

Подтверждаются худшие предположения, циркулирующие в соцсетях. Периодические исчезновения детей в разных регионах Казахстана объясняются не только семейными проблемами и «синими китами».
openqazaqstan
16 нояб. 2017 / 15:46
  • 6533
  • 54
«Думай как британец»: 8 вещей, которым я научилась в Великобритании

«Думай как британец»: 8 вещей, которым я научилась в Великобритании

Как два года в Великобритании изменили мою жизнь. Несколько простых вещей, которые могли бы сделать нашу жизнь лучше.
goribaldi
13 нояб. 2017 / 16:51
  • 4168
  • 28
Самый большой мошенник в стране: об эффективной схеме развода «Казахтелеком»

Самый большой мошенник в стране: об эффективной схеме развода «Казахтелеком»

История о том, как Народный провайдер наваривается на своих клиентах, намерено не отключая услуги, и беря лишние деньги за ненужные и не оказываемые услуги.
ligaspravedlivosti
17 нояб. 2017 / 19:12
  • 6433
  • 21
Мой личный рейтинг женщин: от пуританки до содержанки

Мой личный рейтинг женщин: от пуританки до содержанки

Сегодня предлагаю вашему вниманию мой личный рейтинг женщин. А вот я хочу быть домохозяйкой, правда, не пахать дома, а хозяйничать.
Mysli_v_Sluh
13 нояб. 2017 / 15:00
Российским женщинам нужны казахстанские мужчины?

Российским женщинам нужны казахстанские мужчины?

Отдельные инициативы некоторых российских чиновников вызывают в Казнете приступы просто-таки гомерического ржача. Женщин в регионе – пруд пруди, а вот мужчин, с которыми они могли бы создать семьи, не хватает.
openqazaqstan
14 нояб. 2017 / 15:55
  • 2687
  • 18
О «топ-30», «топ-50» и прочих понтах можно пока забыть

О «топ-30», «топ-50» и прочих понтах можно пока забыть

В объективности выводов швейцарского банка Credit Suisse усомниться трудно – его экономические рейтинги относятся к самым авторитетным и их явно трудно упрекнуть в предвзятости
openqazaqstan
вчера / 17:21
  • 2936
  • 62