• 303922
  • 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
1010

Загрузка...

Комментарии

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

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

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

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

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

Мысли вслух. Почему казахи перестали общаться с родственниками и ходить в гости?

Мысли вслух. Почему казахи перестали общаться с родственниками и ходить в гости?

Дастархан в те времена был скромен. Не было понятия «сынау» - осуждения кто как живет, какой в доме ремонт и т.д. Пока взрослые обсуждали задержку заработной платы, мы играли в армию, жмурки, строили городки...
socium_kzo
5 дек. 2016 / 15:19
  • 28844
  • 30
Верховный Суд презентовал комментарий к Гражданскому процессуальному кодексу

Верховный Суд презентовал комментарий к Гражданскому процессуальному кодексу

ГПК содержит 505 статей, многие из которых написаны несколько сложным юридическим языком. Однако теперь понять их можно проще и без обращения к юристу.
RuSnake
6 дек. 2016 / 10:31
  • 10967
  • 0
Японец о Казахстане: «Ваши девушки уж сильно себе набивают цену...»

Японец о Казахстане: «Ваши девушки уж сильно себе набивают цену...»

"Мужчины должны у вас тут права качать, ибо их процент в вашей численности населения уступает проценту женщин". Я машинально начала уверять, что у нас в стране таковых не имеется...
Sapientia
5 дек. 2016 / 10:52
  • 10713
  • 71
Известный европейский фотограф показал истинную красоту казашек

Известный европейский фотограф показал истинную красоту казашек

С 26 по 30 ноября в Алматы гостил известный европейский фотограф Ян Маклайн в рамках реализации совместного проекта с Казахстаном. Подробности не уточняются, однако ходят слухи о том, что этот...
Muchacho55
7 дек. 2016 / 18:29
  • 9247
  • 8
Распил 1 млрд долларов или спасение для Алматы? В 2017-м начнётся строительство БАКАД

Распил 1 млрд долларов или спасение для Алматы? В 2017-м начнётся строительство БАКАД

Конечно, Алматы заслужил эту дорогу. Невзирая на все издержки, которые могут возникнуть. Заслужил и как крупнейший город Казахстана, и как субъект, формирующий своими налогами около четверти всех...
merurg
7 дек. 2016 / 12:35
  • 7372
  • 20
«Лицо дьявола»? Страшный силуэт на стекле – не оправдание водительской безответственности

«Лицо дьявола»? Страшный силуэт на стекле – не оправдание водительской безответственности

Казнет уже которые сутки подряд обсуждает страшную аварию на трассе Астана – Боровое, где сошлись страшные мистические знаки и где из-за банальной человеческой безответственности гибли люди..
openqazaqstan
8 дек. 2016 / 13:14
  • 6304
  • 6
10 причин, по которым я не смогла работать учителем. Не только в зарплате дело, ребята

10 причин, по которым я не смогла работать учителем. Не только в зарплате дело, ребята

Я почти год проработала в школе, и когда уходила оттуда, была самым счастливым человеком в мире. Тот год, честно говоря, я и сейчас вспоминаю с ужасом.
demonica
6 дек. 2016 / 17:21
  • 6213
  • 78
На самом деле дела плохи: казахстанские школьники на 49-м, а не на 12-м месте по математике

На самом деле дела плохи: казахстанские школьники на 49-м, а не на 12-м месте по математике

О том, как масс-медиа раздула миф о казахстанских вундеркидов в розовый воздушный шар, пока его не проколола правда-иголка. Получается, что казахстанские дети не могут применить теорию в практике...
ardakzhurynov
7 дек. 2016 / 0:17
  • 5814
  • 36
Невозвращенцы-болашаковцы должны государству почти 2 млрд тенге. Кто их теперь вернет?

Невозвращенцы-болашаковцы должны государству почти 2 млрд тенге. Кто их теперь вернет?

Как сообщают новостные порталы, в Нью-Йорке нашёлся бывший болашаковец Ержан Еликов, исчезнувший пять лет назад и всё это время не выходивший на связь с родителями. Да-да, это именно он, «тот самый».
openqazaqstan
вчера / 14:31
  • 5101
  • 16