Создание дизайна для мобильных сайтов, разработка wap-сайтов. Часть 1

Число пользователей, посещающих интернет посредством мобильных устройств продолжает стремительно расти, хотя дизайн большинства адаптированных мобильных вебсайтов оставляют желать лучшего.

На самом деле, процесс разработки мобильных вебсайтов может быть значительно легче, чем вам кажется. В нашей сегодняшней статье я хочу рассказать вам о 7 фундаментальных этапах, следуя которым вы сможете избежать непредвиденных проблем и препятствий, которые зачастую приводят мобильные вебсайты к неудаче. К концу статьи вы точно будете знать, куда нужно сосредоточить силы, дабы ваш мобильный вебсайт пришел к успеху.

1. Не смешивайте разметку

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

  • WML

На ранней стадии развития мобильных устройств, пользоваться интернетом можно было лишь посредством протокола WAP (Wireless Application Protocol). WAP-сайты используют язык программирования WML (Wireless Markup Language). WML – это тот же XML, только для мобильных вебсайтов.

К счастью для нас, WML был вытеснен несколькими другими технологиями. На самом деле, если вы хотите заняться разработкой веб-игры для мобильных устройств, то вам следовало бы напрочь забыть о WML. WML зачастую использования для приложений, основанных на информации и баз данных, либо для вебсайтов, которые разрабатывались специально для целевой аудитории пользователей, имеющих устаревшие модели мобильных телефонов и других устройств (от шести лет с момента разработки и раньше).

  • XHTML

Для большинства вебсайтов мы можем игнорировать существование WML, и вместо данной технологии использовать более современную и знакомую нам – XHTML.

Большинство встроенных веб-браузеров в мобильных устройствах без труда способны генерировать XHTML. Мобильные устройства распознают 2 разновидности языка HTML:

* XHTML – тот же язык программирования, который используется в разработки вебсайтов для отображения обычными браузерами, установленными в настольных ПК.

* XHTML-MP – здесь аббревиатура MP расшифровывается как Mobile Profile (думаю, пояснять не нужно?).

Разница в этих двух языках программирования заключается в том, что XHTML-MP состоит из меньшего числа элементов, и имеет более строгие условия при разработке. Эти различия существуют для того, чтобы упростить парсинг и рендеринг веб-документа мобильными устройствами. Но в процессе разработки вы вряд ли заметите различия между написанием кода обычного XHTML и XHTML-MP.

Забавно то, что многие команды разработчиков при разработке мобильных приложений используют традиционный язык программирования XHTML, и все работает прекрасно.

2. Учитывайте размеры экранов телефонов(разрешение)

Ввиду того, что рынок заполонили плазменные панели и LCD/LED-телевизоры, редакторы телеканалов уже не знают, как и где следовало бы отображать логотип телекомпании. Раньше соотношение сторон любого телевизора составляло 3х2, и за редким исключением производитель незначительно отступал от этого правила. Сейчас же рынок полон широким ассортиментом телевизоров, соотношение сторон которых значительно разнится. С такой же проблемой сталкиваются и веб-разработчики.

размер экрана

Конечно же, в мобильной сфере дела обстоят еще хуже! Здесь важно учитывать не только различные разрешения и размеры экранов, но и так же различные формы (как, например, показано на изображении ниже). От узких и широких прямоугольников до длинных и коротких, и даже до квадратных! Здесь ассортимент разрешений явно будет шире.

Если брать в учет самые распространенные разрешения экранов мобильных устройств, то они будут следующими:

  1. 128 x 160 пикселей
  2. 176 x 220 пикселей
  3. 240 x 320 пикселей
  4. 320 x 480 пикселей

Учет данных разрешений помогает нам оптимизировать контент. По крайней мере, они позволяют нам сохранять правильную форму и структуру сайтов. У мобильных устройств отсутствует мышка, можно перемещаться только вверх и вниз, поэтому не стоит требовать от пользователей перемещений по всей странице.

  • iPhone и планшеты против старых мобильников с зелеными дисплеями

На рынке мобильных устройств можно наблюдать множество исключений из правил. Существует практические идеальное равновесие между владельцами современных телефонов и планшетов (типа iPhone и Nokia Internet Tablet) и владельцами стареньких моделей телефонов с «зелеными» черно-белыми экранчиками, типа Nokia 3310.

У старых мобильных телефонов есть кое-какие ограничения, включая и разрешение экрана и невозможность генерировать документы XHTML. Как было сказано в разделе выше, многие потенциальные посетители могут относиться к числу владельцев именно таких телефонов. Поэтому в подобных случаях важно использовать WML.

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

Далее мы рассмотрим, что же это означает для дизайна вашего мобильного сайта.

3. Ориентируемся на правильных посетителей

Целью каждого сайта является возможность для пользователя получить красивый и качественный контент.

Эта цель еще важнее в случае с мобильными вапсайтами, ведь вам нужно не только знать ваших посетителей, но и заранее предугадать то, что они хотели бы получить от вашего сайта. Посетители обычных вебсайтов зачастую посещают вебсайты, сидя за компьютером, который стоит на столе. В таких случаях у них имеется большой монитор, с разрешением которого вряд ли может быть проблема. Пользователи, посещающие ваш сайт посредством мобильных устройств, вряд ли находятся в такой же ситуации: они могут стоять в очереди, ехать в поезде или автобусе, бежать на самолет по аэропорту, потеряться в незнакомом городе ночью и так далее.

Ждите продолжения во 2 части…..

16
Фев

Вверх