Создание сайтов для мобильных устройств — руководство по быстрому старту

Многие заказчики на фриланс-биржах сейчас стараются увеличить популярность своего сайта, за счет привлечения дополнительной аудитории — тех, кто использует возможности Всемирной Паутины при помощи мобильного телефона и других девайсов. О создании сайтов для мобильных телефонов и пойдет речь ниже.



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-Сообщение.
 <a href="sms:[номер]?body=[текст сообщения]">Текст ссылки</a>
 <a href="mms:[номер]?subject=[тема]&body=[текст сообщения]">Текст ссылки</a>


Кроме того, Вы можете программно набрать номер:
 <a href="tel:[номер]">Текст ссылки</a>


Пример использования CSS-трюков для WAP:
 <label for="age">Ваш возраст:</label><br />
 <input type="text" name="age" maxlength="2" style="-wap-input-format:*N" />


Что сделает этот CSS? При фокусировании указателя на текстовом поле он включит цифровой набор. Это сэкономит время пользователя.

Это лишь малая толика всех возможных эффектов для WAP-интернета. Пользуйтесь Google'ом — он обязательно Вам поможет в Ваших поисках.

5. Полезные ссылки и материалы по теме



ru.wikipedia.org/wiki/WAP — Статья о WAP на Wikipedia
mobiforge.com — Проект MobiForge. Кроме того, что здесь Вы найдёте кучу статей на тему WAP-программирования, Вам обязательно помогут советом на местном форуме.
ready.mobi/- Этот ресурс поможет Вам оценить качество Вашего WAP-ресурса по 5-тибальной шкале. Кроме того, он предложит Вам пути решения возможных проблем.
metatxt.org — более подробно о формате файла meta.txt

Начинающим WAP-мастерам также могу посоветовать скачать видеоверсию урока сотрудников Яндекса о мобильной вёрстке.
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 38
  • +4
    Возможно, термин «WAP-интернет» немного устарел, но поскольку происходит от «Wireless» я продолжаю его использовать для обозначения сегмента сети, ориентированного для просмотра на любом мобильном устройстве (телефон/PDA/коммуникатор и т.д)
    • +1
      Да, эта путаница происходит постоянно. Часто можно видеть высказывания «а разве wap еще живой?». Но wap еще не умер ни как протокол (что можно увидеть в структуре доходов мобильных операторов), ни как сегмент сети (тысячи довольно посещаемых сайтов).

      Хотел бы добавить следующие полезные инструменты при разработке мобильных сайтов.

      wurfl.sourceforge.net —  бд характеристик девайсов, построенная на извлеченных данных с xml документов спецификаций. Кстати, ссылку на этот документ можно посмотреть в передаваемых браузером устройства заголовках. Перечень полезных заголовков, которые можно встретить в запросах мобильных девайсов.

      deviceatlas.com — коммерческая бд характеристик (есть и бесплатная лицензия, не предусматривающая обновлений базы). Построенная на данных wurfl c ручными правками и дополнениями.

      Мобильных устройств много. При разработке сервисов полезно знать характеристики девайса и оптимизировать под него вывод контента.
      • +1
        Да, забыл про них упомянуть. Хотя использовал.

        По поводу wurfl, из плюсов можно выделить то, что она определяет размер экрана устройства, что позволяет использовать полученные данные для оптимизации вывода изображений и вообще дизайна
    • +1
      По поводу Яндекса. Это был доклад Наталии Макишвили о том, как делается верстка под мобильные телефоны в Яндексе.
      скачать pdf
      • +1
        Да, это она. Только я смотрел её в видео-формате, немного нагляднее, чем в PDF
      • +2
        WAP — это то, за что ОпСоС дерет непомерные деньги?
        WAP-доступ (пакетная передача данных) за 10 Кб, единица тарификации — 10 Кб с округлением в большую сторону 2,50р.

        МегафонСпб, тариф Сказка
        • 0
          если да, то я считаю что надо этот протокол нафиг зарубать и забыть о нем, как о страшном сне.

          А для мобильников пользоваться HTML5 и/или CSS @media и определением мобильного клиента на сервере
          • 0
            Дело не в протоколе, а в тарифной политике операторов.
            Основная масса современных телефонов не нуждается в дополнительной обработке контента на стороне оператора. Но операторы навязывают эти услуги в настройках по умолчанию и пускают трафик через wap-гейт. Тем самым предоставляя дополнительные услуги, чем и пытаются объяснить высокую стоимость трафика.

            В последние несколько лет wap-протокол активно использовался в разделении доходов с контент-провайдерами. Когда абонент оплачивают контент не поштучно (отправка sms), а по загруженому объему с высокой стоимостью каждого кб.
            Опять же, в большинстве случаев, нет технической необходимости пропускать этот трафик через wap-гейт. Так просто было проще считать.

            В МТС и Билайне сейчас существуют премиум домены с повышенной тарификацией (в том числе обычного gprs) трафика. Где стоимость регулируется с точностью до конкретного url (site.ru/x1/ — одна цена, site.ru/x2 — другой тариф).
            Очень удобный инструмент для настройки гибкого биллинга или же для мошенничества, в зависимости от политики оператора и владельца домена.
          • –2
            Нет, WAP — это сегмент сети, адаптированный для просмотра на моб. устройствах.

            А то, о чем вы говорите, это доступ в инет с платой не за трафик, а за время (по крайней мере раньше так было). Сейчас используется в основном GPRS
            • +1
              А то, о чем вы говорите, это доступ в инет с платой не за трафик, а за время (по крайней мере раньше так было).

              Нет, это как раз не про время а про трафик — там написано про 10кб. Про время там тоже есть отдельная цена.

              Wap — это протокол, и за него оператор и тарифицирует подругому. а через что он там идет — через GRPS или через dial-up (или как он там в мобильнике) — это уже просто на цену (непомерную) влияет
              • +1
                Кстати, у разных ОпСоСов о разному. У Мегафона одна из самых высоких цен.

                У моего местного оператора (БайкалВестКом) цены были — 1.5р за Мб, за 100р. можно купить 100Mb пакет, за 50 — безлимит на ночь.
          • +7
            Неужели кто– то ходит в инет через wap? Есть ли актуальная статистика? Лично я думал, что wap умер с первым релизом оперы мини.
            • +1
              wap 2.0 просто появился
              • 0
                Действительно интересно. А работают ли плюшки такие как звонок про ссылке в обычном html?
                • 0
                  Если написать ссылка запустится skype

                  css-плюшки срабатывают в Opera
                  • 0
                    Вернее так: <a href=«callto: [login]»>ссылка</a>
                    • 0
                      «callto:» для скайпа, «tel:» для мобильников.
                      • 0
                        это работает только для относительно новых мобильных телефонов.
                        ДДля телефонов с поддержкой только WAP 1.x, WAP 2.x используются другие теги (искать нужно в спецификации WTAI)
                        • +1
                          Только WAP 1.x поддерживают только оочень старые телефоны по моему. Даже мой Siemens A65 поддерживал WAP 2.0
                          • 0
                            в WAP 2.0 теги callto: и tel: работать скорее всего не будут.
                            Сименс А65 один из первых телефонов в которых начал появляться WAP 2.0.
                            Кстати, телефонов с поддержкой только WAP 1.0 у абонентов хватает и достаточно много.
                            • +1
                              Просто это зачастую не та аудитория, на которую ориентируются создатели сайтов. Просто если в Web имеет смысл поддерживать например IE6, то в мобильном пространстве поддерживать WAP 1.0 зачастую не имеет смысла. Тем более, что xHTML разметку даже WAP 1.0 поддерживает практически в полном объёме.

                              Угнетает лишь ограничение на размер страницы+размер css+размер картинок. У многих старых телефонов страница загрузится, при условии, что сумма будет >15-20kb
                  • 0
                    не умер, но умирает понемногу, но операторы еще получают с него достаточно прибыли.
                    Очень много людей в массовом сегменте рынка, которые активно пользуются WAPом, поскольку:
                    — телефон не поддерживает что-либо иное
                    — не знают, что есть Интернет и их телефон энто умеет

                    Актуальную статистику, к сожалению, Вам никто предоставить не сможет — это информация с ограниченным доступом операторов. Но, поверьте мне, там трафика хватает. Если хотите оценить — посмотрите на ваплоге популярные сайты, умножьте количество хостов на средний размер одной страницы сайта и получите хоть какие-то данные.
                    • 0
                      getwap.ru (бывший wab.ru) — около 200 000 уникальных посетителей в день.
                      m.mail.ru — моб.версия майла — 1 800 000 уников. Так что действительно, хватает.

                      А прибыли сайтов от продажи контента до сих пор держатся на уровне. Так же как и операторов.
                      • 0
                        прибыль операторов и контент-провайдеров от ВАПа, на самом деле, уже года два, как падает.
                        Просто об этом они не особо рассуждают в открытую.
                  • 0
                    Афтар, ты путаешь WAP-протокол и просто сайты, оптимизированные для мобильных устройств. Или поучи матчасть, или больше про это не пиши. :)
                    • +1
                      Вывод такой сделан не из топика, а из комментариев.
                      • 0
                        Просто обозначение одинаковое используется. Не зря же большинство сайтов, оптимизированных для моб. устройств имеют поддомен wap.***

                        А может просто привык так говорить, ибо во времена того же s-c.ru, где я программировать учился, в ходу было обозначение «WAP-сайт» для любого сайта, адаптированного для моб.устройств.
                        • 0
                          наверное, лучше все-таки оперировать термином «сайт адаптированный для просмотра с мобильного устройства», поскольку WAP-сайтов, как таких, уже не осталось. Большинство (85-95%) популярных используют разменту xHTML, а не WML.
                          • 0
                            Согласен, просто длинновато и постоянно так писать… Мы же не пишем «сайт адаптированный для просмотра на компьютере», мы пишем web-сайт. Почему бы не использовать аналогичный термин для «сайта, адаптированного для просмотра с мобильного устройства»
                      • 0
                        Сейчас к мобильным сайтам требования такие же, как лет 10 назад.

                        Вообщем то большинство людей просматривают сайты через Opera Mini/Mobile, где есть обработка JS или сервером или непосредственно на клиенте.

                        Необходимо смотреть на статистику мобильных браузеров, а уже потом делать выводы что использовать, а что нет.
                        • 0
                          > Сейчас к мобильным сайтам требования такие же, как лет 10 назад.

                          Я имел ввиду web-сайты (как лет 10 назад к web-сайтам)
                          • +1
                            Думаю вполне адекватная статистика

                            За вычетом Opera Mini и компьютеров, 50% трафика все равно приходится на стандартные браузеры телефонов, которые зачастую JS и т.д. — не поддерживают.
                        • 0
                          Никаких таблиц. Только div'ы


                          Неправда. Порой только таблицы и спасают, потому что на div'ах все хорошо только на некоторых телефонах. Возьмите, например любой тач от LG (не Андроид), например, LG KU990 и попробуйте сверстать что-то нетривиальное дивами. Будете неприятно удивлены.
                          • 0
                            не нужно верстать нетривиальное для мобилы
                            с сложными таблицами вы добьетесь требуемого отображения на одном телефоне и получите баги на другом
                            • 0
                              не нужно верстать нетривиальное для мобилы

                              кода этого хочет заказчик, то почему бы и нет, если можно сделать кроссплатформенно? Пусть даже и таблицами, заказчику глубоко все равно какая там верстка.
                              Кстати, мы практикуем верстку, зависимую от устройств — если телефон адекватный (Андроид, айфон и т.д.) — делаем дивами, всякие лыжи — таблицами, потому как зачастую и дизайны для этих устройств отличаются.
                            • 0
                              хотя без таблиц фраза излишне категорична
                            • 0
                              Очень противоречивая статья. Никогда не хотел бы более писать сайты для поддомена wap.abc.xyz
                              Это-личное, само слово wap для меня-ругательство.
                              Тот же самый waplog говорит, что суммарная доля девайсов с 320*240(в которых явно усеченный xhtml и более 8 цветов) и Opera Mini состаяляет почти 60%, с другой стороны, пользователи iPhone и Symbian в wap-сегменте не представлены.

                              А вот pda… — Запросто, @media творит чудеса. Я за @media, Opera Mini и media queries в-общем, Opera Mini достаточно часто предустанавливается, а браузеры обычных телефонов умеют html…

                              Кстати по поводу «никаких таблиц» — лет этак 8 назад рекомендовали весь wap-сайт засовывать в вертикальную таблицу.
                              • 0
                                лет этак 8 назад рекомендовали весь wap-сайт засовывать в вертикальную таблицу

                                Когда это такое было?

                                Никогда не хотел бы более писать сайты для поддомена wap.abc.xyz

                                Ну да, сейчас больше юзают домен *.mobi

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.