Хороший мобильный проект — какой он?

О да, фликер любит тебя.
Даже в мобильнике.

Сегодня в нашем блоге новинка: гостевой пост специалиста по мобильным проектам Максима Сотникова. Этот обзорный пост поможет сориентироваться тем, кто создает или только начинает создавать хорошие сайты для мобильных телефонов и КПК.

Поехали!

Если кому-то захочется лично обсудить мобильные проекты с Максимом — пишите по адресу elstiletto@gmail.com.

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

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

Правильно отображайте информацию

Все содержимое страницы сайта, с точки зрения пользователя, можно условно разделить на три части:

1. Контент: та информация, ради которой юзер перешел на страницу (зашел на сайт вообще) — текст, изображение, ссылки на видео или другие ресурсы и.т.п.
2. Навигация: управляющие элементы сайта — ссылки на другие страницы сайта, поля и кнопки форм.
3. Фон: то, что имеет для пользователя вспомогательное, второстепенное значение или не имеет значения вообще — шапка сайта, заголовки разделов, рекламные блоки, счетчики, копирайты, элементы дизайна.

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

Чем меньше высота шапки на странице (в разумных пределах), тем лучше. Видеть вместо желаемого контента одно и то же изображение в треть экрана при каждой загрузке страницы — это ужасно. Один из оптимальных вариантов — создание двух вариантов шапки — полноразмерной для главной страницы и максимально узкой (15—25px) для всех остальных.

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

Располагайте информацию компактно. Избегайте обилия крупных шрифтов и лишних вертикальных промежутков между строками и обьектами.

Старайтесь давать ссылкам и заголовкам короткие названия. А если они умещаются в одну строку — это добавочный штрих к хорошему внешнему виду.

Не перегружайте дизайн излишней графикой и второстепенными элементами.

Сведите действия пользователя к минимуму

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

Сохраняйте введенные пользователем данные и подставляйте их в качестве значений по умолчанию в следующий раз.
Пример: подставление логина последнего пользователя в форму авторизации, запоминание настроек поиска, etc.

Сделайте регистрацию настолько простой, насколько это возможно. И вообще, требуйте ее только там, где это действительно необходимо.

Активно используйте accesskeys. Назначайте одинаковым accesskeys одинаковые действия — например, пусть [0] везде будет привязан к ссылке на главную страницу, а [4] и [6] — ответственны за пейджинг по страницам.

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

Дайте юзеру возможность персонализировать ваш сервис, т.е. настроить его «под себя». Если вы предоставляете афишу или прогноз погоды — дайте ему поставить на главную страницу тот кинотеатр или город, которые ему нужны. Если есть возможность комментировать что-либо — дайте возможность указать, сколько комментариев выводить на странице (а так же порядок вывода).

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

Минимизируйте трафик

Доступ в Интернет через GPRS все еще слишком медленный и слишком дорогой. Чтобы сэкономить юзеру деньги и время:

Обязательно оптимизируйте размер отдаваемых изображений. В идеале — выбирайте вариант изображения в соответствии с размером экрана пользователя.

Сделайте lite-версию сайта — без второстепенных изображений (например, аватаров) и максимально уменьшенной шапкой (или без шапки вообще).

Приведите в порядок html-код: уберите лишние пробелы, комментарии, избегайте длинных id, name и имен классов.

Следите за валидностью

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

Страницы проекта должны соответствовать спецификациям XHTML Mobile. Для проверки можно использовать http://validome.org/.

CSS должен быть валиден. Проверять по адресу http://jigsaw.w3.org/css-validator/.

Прим. ред.: еще бы семантичность добавил, ибо многие без CSS смотрят.

Верстка должна быть максимально простая, а также «тянущаяся», одноколоночная, кроссбраузерная и с использованием блоков.

Следует учитывать ограничения, накладываемые некоторыми аппаратами.
Пример: некоторые устаревшие телефоны плохо работают со страницами больше 40-50кб по обьему, или «тормозят» при отображении страницы с превышением определенного количества знаков.
Пример: большинство телефонов Motorola некорректно обрабатывают тег b — жирные символы заменяются нечитаемыми квадратами.

Примечание

От себя хочу добавить, что не помешало бы и в обычном сайтостроительстве применять вышеуказанные правила. Ан нет, расслабились товарищи, думают, что у всех безлимитный ADSL или волокно.

Кстати, качественные отечественные сайты для мобильных устройств все-таки есть: афиша, например, несмотря на то, что она не запомнила мой выбор города Москвы при первом посещении.

Забавно, что в поиске яндекса по сайтам для КПК большая часть — каталоги сайтов для КПК. Вот такой бесконечный цикл у нас пока.