Создание сайтов для мобильных устройств — руководство по быстрому старту
Многие заказчики на фриланс-биржах сейчас стараются увеличить популярность своего сайта, за счет привлечения дополнительной аудитории — тех, кто использует возможности Всемирной Паутины при помощи мобильного телефона и других девайсов. О создании сайтов для мобильных телефонов и пойдет речь ниже.
WAP (англ. Wireless Application Protocol) — протокол беспроводной передачи данных. По сути, WAP — это некий аналог протокола HTTP, адаптированный для использования на беспроводных устройствах. Как правило, это мобильные телефона, смартфоны, коммуникаторы и КПК.
В чём же его основное отличие от HTTP? в первую очередь, WAP адаптирован для узкоформатных мониторов. Примерный диапазон ширины экранов карманных устройств — от 100px до 400px. Это накладывает серъёзные ограничения для разработки сайтов. Кроме того, протокол WAP не поддерживает некоторые WEB-технологии. В частности, JavaScript и Flash. От этого придётся отказаться совсем.
В кратце: Несмотря на то, что многие прогрессивные технологии, которыми пользуются разработчики, к сожалению, нельзя использовать в мобильном интернете, WAP — очень неплохой плацдарм для накопления опыта и заработка. Во-первых, на данный момент в России и странах СНГ очень мало специалистов, способных с нуля создать хороший WAP-сайт. Во-вторых, поскольку отрасль очень специфичная, расценки, соотвественно, выше, чем обычно. Ну и, наконец, при разработке WAP-сайтов разработчик неукоснительно должен следовать существующим стандартам вёрстки и меньше задумываться о дизайне при программировании, а это, несомненно, огромный плюс, поскольку при программировании разработчик не отвлекается на внедрение кода в дизайн.
Начнём с WAP-ориентированного дизайна.
С 2002 года, когда был запущен в работу стандарт WAP 2.0 и WAP-сайты «окрасились» во все цвета радуги, дизайнерам буквально открылось окно в новую для них отрасль — мобильный дизайн. В принципе, при разработке макета дизайнер должен следовать лишь нескольким основным правилам.
Не стоит забывать, что мобильные телефоны имеют существенное ограничение в ресурсах. И, соответственно, страницы весом более 15-20Кб «старый» телефон попросту не загрузит и сайт лишится значительной части аудитории. Помимо того, поскольку для доступа используется GPRS — многие платят за трафик, а значит, чем меньше весит страница — тем лучше.
Когда дизайн сделан, наступает очередь верстальщика. Да-да, именно верстальщика. Несмотря на то, что дизайнер (надеюсь) не сделал ничего сверхсложного верстальщик всё равно нужен.
Во-первых, стоит начать с оптимизации графики, по причинам, которые я описал выше. Во-вторых, верстальщик обязательно должен проверить свёрстанный макет на нескольких телефонах, с различным разрешением экрана. Кроме того, для начала сайт надо проверить с компьютера. Тут верстальщику помогут Opera, Google Chrome и т.д, если сайт верстается по стандарту XHTML Mobile. Стоит поговорить еще об одном формате, который по прежнему используется на сайтах-старожилах мобильного интернета. А точнее — WML.
Страницы, сверстанные при помощи языка WML (существенно не отличающегося от HTML, помимо некоторых фишек, доступных только ему и адаптированных для моб. телефонов.) использует только 3 цвета — белый фон, черный текст, синие ссылки. К сожалению, страницу, написанную на WML удастся открыть только в Opera (это именно та причина, по которой я использую Opera). Ну, поскольку этот формат уже практически не используется, не будем о нем подробнее.
Стоит отметить, что верстаться сайт должен по стандарту XHTML Mobile Profile в кодировке UTF-8.
По WAP-вёртске в интернете очень мало материала, но стоит отметить лекцию сотрудников портала Яndex, в которой они рассказывают о вёрстке и элементах, которые они используют. Для примера, приведу несколько «наставлений» для верстальщиков.
Следуя этим правилам Вы сможете сверстать дизайн кроссбраузерно.
Ну и разумеется, существуют множество сервисов, которые помогут нам в разработке. О них я расскажу в конце.
И, наконец, наступает очередь программиста.
В принципе, существует множество CMS ориентированных под WAP. Например, WAP-Motor. Кроме того, многие популярные CMS (Joomla 1.0.*, WordPress) имеют WAP-ориентированные шаблоны, которые позволяют представить наш контент в виде, адаптированном для мобильных устройств. Однако, у каждой из этих систем есть недостатки, поэтому я не рекомендую их использовать и советую писать сайт с нуля, или с использованием фреймоворка.
WAP поддерживают большинство современных хостингов. А это значит, что мы можем в полном объёме использовать ресурсы, на этих хостингах расположенные. А значит при разработке WAP-сайтов мы можем использовать PHP, Perl, Python, MySQL. Но, к сожалению, не можем использовать JavaScript и Flash, о чём я уже говорил. Все же остальные технологии можно и нужно использовать в полном обьёме.
Стоит немного осветить и тему раскрутки WAP-ресурсов. Тем более, что информации об этой отрасли в рунете нет вовсе.
Для начала, не стоит забывать о тегах meta, title, следует помнить о том, что ключевые слова должны выделяться тегами em, strong, обязательно должен присутствовать атрибут alt у изображений.
Это основные правила. Пройдёмся дальше.
Обязательно сгенерируйте sitemap вашего сайта, добавьте Ваш WAP-сайт в индекс Google и используйте meta.txt.
Уверен, что многие про это не слышали. Вкратце: При помощи meta.txt Вы можете сообщить поисковикам, что этот сайт — WAP-версия какого-то web-сайта. Обязательно пользуйтесь этой возможностью.
Зарегистрируйтесь в каталогах (это позволит нарастить ваш ИЦ) и т.д. Не мне рассказывать о SEO, думаю, что специалисты найдутся.
Большой вклад в развитие Вашего ресурса станут ЧПУ. Почему? Очень просто: Согласитесь, что набирая адрес страницы в телефоне намного удобнее набирать ЧПУ, а не длинную, непонятную, незапоминающуюся строку.
Не стоит забывать, что создать мобильную версию сайта — это ещё не всё. Обязательно следует анализировать посещаемость. В частности, узнайте с каких устройств к Вам заходят чаще всего и проверьте как выглядит сайт конкретно с этих устройств. Кроме того, узнайте тарифы на GPRS-трафик Ваших посетителей, постарайтесь в случае необходимости уменьшить его количество хотя бы на Вашем WAP-ресурсе.
Кроме того, при разработке позаботьтесь о создании удобной панели администрирования. В принципе, лучше даже будет, если у неё будет и WEB- и WAP-интерфейс. Это позволит добавлять новости и сообщения в любой момент.
Также, не стоит забывать о том, что технологии не стоят на месте, появляются новые модели телефонов. Ообязательно проверьте как выглядит Ваш сайт на новом телефоне. (тот же iPhone зачастую отображает сайты иначе, чем стандартные браузеры других телефонов)
Самой главной возможностью WAP-сайтов, на мой взгляд, является программное взаимодействие с ресурсами самого устройства.
Например, при помощи элементарного HTML-кода мы можем отправить с телефона пользователя SMS/MMS-Сообщение.
Текст ссылки
Текст ссылки
Кроме того, Вы можете программно набрать номер:
Текст ссылки
Пример использования CSS-трюков для WAP:
Ваш возраст:
/>
Что сделает этот CSS? При фокусировании указателя на текстовом поле он включит цифровой набор. Это сэкономит время пользователя.
Это лишь малая толика всех возможных эффектов для WAP-интернета. Пользуйтесь Google'ом — он обязательно Вам поможет в Ваших поисках.
ru.wikipedia.org/wiki/WAP — Статья о WAP на Wikipedia
mobiforge.com/ — Проект MobiForge. Кроме того, что здесь Вы найдёте кучу статей на тему WAP-программирования, Вам обязательно помогут советом на местном форуме.
ready.mobi/- Этот ресурс поможет Вам оценить качество Вашего WAP-ресурса по 5-тибальной шкале. Кроме того, он предложит Вам пути решения возможных проблем.
metatxt.org/ — более подробно о формате файла meta.txt
Начинающим WAP-мастерам также могу посоветовать скачать видеоверсию урока сотрудников Яндекса о мобильной вёрстке.
1. WAP — что это?
WAP (англ. Wireless Application Protocol) — протокол беспроводной передачи данных. По сути, WAP — это некий аналог протокола HTTP, адаптированный для использования на беспроводных устройствах. Как правило, это мобильные телефона, смартфоны, коммуникаторы и КПК.
В чём же его основное отличие от HTTP? в первую очередь, WAP адаптирован для узкоформатных мониторов. Примерный диапазон ширины экранов карманных устройств — от 100px до 400px. Это накладывает серъёзные ограничения для разработки сайтов. Кроме того, протокол WAP не поддерживает некоторые WEB-технологии. В частности, JavaScript и Flash. От этого придётся отказаться совсем.
2. Разработка WAP-сайтов
В кратце: Несмотря на то, что многие прогрессивные технологии, которыми пользуются разработчики, к сожалению, нельзя использовать в мобильном интернете, WAP — очень неплохой плацдарм для накопления опыта и заработка. Во-первых, на данный момент в России и странах СНГ очень мало специалистов, способных с нуля создать хороший WAP-сайт. Во-вторых, поскольку отрасль очень специфичная, расценки, соотвественно, выше, чем обычно. Ну и, наконец, при разработке WAP-сайтов разработчик неукоснительно должен следовать существующим стандартам вёрстки и меньше задумываться о дизайне при программировании, а это, несомненно, огромный плюс, поскольку при программировании разработчик не отвлекается на внедрение кода в дизайн.
Начнём с WAP-ориентированного дизайна.
С 2002 года, когда был запущен в работу стандарт WAP 2.0 и WAP-сайты «окрасились» во все цвета радуги, дизайнерам буквально открылось окно в новую для них отрасль — мобильный дизайн. В принципе, при разработке макета дизайнер должен следовать лишь нескольким основным правилам.
- Только стандартные шрифты (Arial, Verdana, Times, Courier).
- Несглаженные шрифты
- 2-3 основных цвета. При этом желательно не использовать весь спектр оттенков: цвета должны быть близки к основным 7-ми цветам, т.к старые телефоны попросту не поддеживают всё многообразие цветовой гаммы
- Отказ от теней и полупрозрачных элементов.
- Только резиновый дизайн.
- Минимум картинок. Желательно их не использовать вовсе.
Не стоит забывать, что мобильные телефоны имеют существенное ограничение в ресурсах. И, соответственно, страницы весом более 15-20Кб «старый» телефон попросту не загрузит и сайт лишится значительной части аудитории. Помимо того, поскольку для доступа используется GPRS — многие платят за трафик, а значит, чем меньше весит страница — тем лучше.
Когда дизайн сделан, наступает очередь верстальщика. Да-да, именно верстальщика. Несмотря на то, что дизайнер (надеюсь) не сделал ничего сверхсложного верстальщик всё равно нужен.
Во-первых, стоит начать с оптимизации графики, по причинам, которые я описал выше. Во-вторых, верстальщик обязательно должен проверить свёрстанный макет на нескольких телефонах, с различным разрешением экрана. Кроме того, для начала сайт надо проверить с компьютера. Тут верстальщику помогут Opera, Google Chrome и т.д, если сайт верстается по стандарту XHTML Mobile. Стоит поговорить еще об одном формате, который по прежнему используется на сайтах-старожилах мобильного интернета. А точнее — WML.
Страницы, сверстанные при помощи языка WML (существенно не отличающегося от HTML, помимо некоторых фишек, доступных только ему и адаптированных для моб. телефонов.) использует только 3 цвета — белый фон, черный текст, синие ссылки. К сожалению, страницу, написанную на WML удастся открыть только в Opera (это именно та причина, по которой я использую Opera). Ну, поскольку этот формат уже практически не используется, не будем о нем подробнее.
Стоит отметить, что верстаться сайт должен по стандарту XHTML Mobile Profile в кодировке UTF-8.
По WAP-вёртске в интернете очень мало материала, но стоит отметить лекцию сотрудников портала Яndex, в которой они рассказывают о вёрстке и элементах, которые они используют. Для примера, приведу несколько «наставлений» для верстальщиков.
- Вёрстка строго по стандартам W3C
- Никаких плавающих элементов (float, clear);
- Никаких таблиц. Только div'ы
- Не забываем о семантике кода
Следуя этим правилам Вы сможете сверстать дизайн кроссбраузерно.
Ну и разумеется, существуют множество сервисов, которые помогут нам в разработке. О них я расскажу в конце.
И, наконец, наступает очередь программиста.
В принципе, существует множество CMS ориентированных под WAP. Например, WAP-Motor. Кроме того, многие популярные CMS (Joomla 1.0.*, WordPress) имеют WAP-ориентированные шаблоны, которые позволяют представить наш контент в виде, адаптированном для мобильных устройств. Однако, у каждой из этих систем есть недостатки, поэтому я не рекомендую их использовать и советую писать сайт с нуля, или с использованием фреймоворка.
WAP поддерживают большинство современных хостингов. А это значит, что мы можем в полном объёме использовать ресурсы, на этих хостингах расположенные. А значит при разработке WAP-сайтов мы можем использовать PHP, Perl, Python, MySQL. Но, к сожалению, не можем использовать JavaScript и Flash, о чём я уже говорил. Все же остальные технологии можно и нужно использовать в полном обьёме.
Стоит немного осветить и тему раскрутки WAP-ресурсов. Тем более, что информации об этой отрасли в рунете нет вовсе.
Для начала, не стоит забывать о тегах meta, title, следует помнить о том, что ключевые слова должны выделяться тегами em, strong, обязательно должен присутствовать атрибут alt у изображений.
Это основные правила. Пройдёмся дальше.
Обязательно сгенерируйте sitemap вашего сайта, добавьте Ваш WAP-сайт в индекс Google и используйте meta.txt.
Уверен, что многие про это не слышали. Вкратце: При помощи meta.txt Вы можете сообщить поисковикам, что этот сайт — WAP-версия какого-то web-сайта. Обязательно пользуйтесь этой возможностью.
Зарегистрируйтесь в каталогах (это позволит нарастить ваш ИЦ) и т.д. Не мне рассказывать о SEO, думаю, что специалисты найдутся.
Большой вклад в развитие Вашего ресурса станут ЧПУ. Почему? Очень просто: Согласитесь, что набирая адрес страницы в телефоне намного удобнее набирать ЧПУ, а не длинную, непонятную, незапоминающуюся строку.
3. Поддержка WAP-сайта.
Не стоит забывать, что создать мобильную версию сайта — это ещё не всё. Обязательно следует анализировать посещаемость. В частности, узнайте с каких устройств к Вам заходят чаще всего и проверьте как выглядит сайт конкретно с этих устройств. Кроме того, узнайте тарифы на GPRS-трафик Ваших посетителей, постарайтесь в случае необходимости уменьшить его количество хотя бы на Вашем WAP-ресурсе.
Кроме того, при разработке позаботьтесь о создании удобной панели администрирования. В принципе, лучше даже будет, если у неё будет и WEB- и WAP-интерфейс. Это позволит добавлять новости и сообщения в любой момент.
Также, не стоит забывать о том, что технологии не стоят на месте, появляются новые модели телефонов. Ообязательно проверьте как выглядит Ваш сайт на новом телефоне. (тот же iPhone зачастую отображает сайты иначе, чем стандартные браузеры других телефонов)
4. WAP-решения / Программные трюки.
Самой главной возможностью WAP-сайтов, на мой взгляд, является программное взаимодействие с ресурсами самого устройства.
Например, при помощи элементарного HTML-кода мы можем отправить с телефона пользователя SMS/MMS-Сообщение.
Текст ссылки
Текст ссылки
Кроме того, Вы можете программно набрать номер:
Текст ссылки
Пример использования CSS-трюков для WAP:
Ваш возраст:
/>
Что сделает этот CSS? При фокусировании указателя на текстовом поле он включит цифровой набор. Это сэкономит время пользователя.
Это лишь малая толика всех возможных эффектов для WAP-интернета. Пользуйтесь Google'ом — он обязательно Вам поможет в Ваших поисках.
5. Полезные ссылки и материалы по теме
ru.wikipedia.org/wiki/WAP — Статья о WAP на Wikipedia
mobiforge.com/ — Проект MobiForge. Кроме того, что здесь Вы найдёте кучу статей на тему WAP-программирования, Вам обязательно помогут советом на местном форуме.
ready.mobi/- Этот ресурс поможет Вам оценить качество Вашего WAP-ресурса по 5-тибальной шкале. Кроме того, он предложит Вам пути решения возможных проблем.
metatxt.org/ — более подробно о формате файла meta.txt
Начинающим WAP-мастерам также могу посоветовать скачать видеоверсию урока сотрудников Яндекса о мобильной вёрстке.
0 комментариев