• 307030
  • 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
1040

Загрузка...
Loading...

Комментарии

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

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

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

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

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

Нет ничего более вдохновляющего, чем видеть стада сайгаков. Не зря их называют «киелі»

Нет ничего более вдохновляющего, чем видеть стада сайгаков. Не зря их называют «киелі»

В начале 2000-х годов в уральской популяции оставалось только 2500 сайгаков. Сейчас благодаря охране от браконьеров их численность выросла до 100 тысяч.
theYakov
17 июля 2017 / 17:55
  • 8996
  • 3
Ресторанный консенсус в Казахстане: мужчина платит всегда

Ресторанный консенсус в Казахстане: мужчина платит всегда

Ресторанный консенсус в этой стране таков, что если речь идет именно о свидании, то оплачивает его на 100% из 100 именно мужчина. Пытаться его расшатать - это достаточно дорогое удовольствие.
convoluted
17 июля 2017 / 15:32
Решили рискнуть и обратиться к риэлторам. И этим людям мы доверяем свой ночлег?

Решили рискнуть и обратиться к риэлторам. И этим людям мы доверяем свой ночлег?

Звоним риэлтору, говорим, верните наши 15 000 тг, так как ваша клиентка нас кинула. По его словам, он вернуть деньги больше не может. Не имеет право.
decorus
17 июля 2017 / 14:48
  • 3250
  • 15
«Алматы – город, летящий под откос», или Кто заказал утку у российского блогера

«Алматы – город, летящий под откос», или Кто заказал утку у российского блогера

Некий блогер Сергей Никитский неустанно пишет о Казахстане, Астане, Экспо и посвящает два материала Алматы, причём подчёркнуто называет город Алма-Ата.
Langdon
19 июля 2017 / 15:44
  • 3462
  • 56
Польша – страна простых решений. Почему они смогли, а мы еще нет?

Польша – страна простых решений. Почему они смогли, а мы еще нет?

В Польше вообще очень много понятного и простого – инфраструктура, коммуникации и дороги прежде всего, льготы в образовании, поляки вообще получают его бесплатно. А урожай побольше нашего.
Shimanskaya
17 июля 2017 / 16:08
  • 3376
  • 37
«Язык мой – враг мой», или 7 причин никогда не разговаривать с полицией

«Язык мой – враг мой», или 7 причин никогда не разговаривать с полицией

На этот раз пост очень важный и необходим к прочтению каждым! Не поленитесь и уделите время прочтению. Ни в коем случае, не разговаривайте с полицейскими до прихода вашего адвоката!
asselsabekova
18 июля 2017 / 14:19
  • 3225
  • 32
Один из способов выиграть суд против коллекторов

Один из способов выиграть суд против коллекторов

Сегодня в своем посте я постараюсь рассказать, как выиграть суд против некоторых коллекторских компании в нашей стране. Чем отличается коллекторское агенство от обычного банка?
Advokot
18 июля 2017 / 15:31
  • 2988
  • 10
Книга, которая сэкономит вам 150 тысяч долларов и два года жизни

Книга, которая сэкономит вам 150 тысяч долларов и два года жизни

Автор утверждает, что программы МБА не дают никакого позитивного выхлопа, если ты уже не являешься владельцем или наследником прибыльного бизнеса. Знания МБА можно получить бесплатно, уверяет он.
Aks_Ras
19 июля 2017 / 16:28
  • 2596
  • 2
Госорганы, ответственные за жизни детей, хранят молчание. У них в отчетах все хорошо

Госорганы, ответственные за жизни детей, хранят молчание. У них в отчетах все хорошо

Вчера все информационные агентства страны передали сообщение, которое заставило забиться в ужасе сердца всех матерей страны. В мусорном контейнере города Сатпаев было обнаружено тело новорожденной девочки.
AliyaSadyrbaeva
19 июля 2017 / 11:06
  • 2278
  • 18