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

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


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

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

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

• Чем меньше высота шапки на странице (в разумных пределах), тем лучше. Видеть вместо желаемого контента одно и то же изображение в треть экрана при каждой загрузке страницы – это ужасно. Один из оптимальных вариантов – создание двух вариантов шапки – полноразмерной для главной страницы и максимально узкой (15-25px) для всех остальных.
• Чем ближе какой-либо обьект к началу страницы, тем проще пользователю получить к нему доступ. Это означает, что следует придерживаться принципа расположения информации в порядке убывания важности – в первую очередь контент, ради которого пользователь пришел на страницу, затем ключевые элементы навигации, затем остальное.
• Располагайте информацию компактно. Избегайте обилия крупных шрифтов и лишних вертикальных промежутков между строками и обьектами.
• Старайтесь давать ссылкам и заголовкам короткие названия. Если они умещаются в одну строку – это лишний штрих к хорошему внешнему виду.
• Не перегружайте дизайн излишней графикой и второстепенными элементами.

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

• Сохраняйте введенные пользователем данные и подставляйте их в качестве значений по умолчанию в следующий раз.
Пример: подставление логина последнего пользователя в форму авторизации, запоминание настроек поиска, etc.
• Сделайте регистрацию настолько простой, насколько это возможно. Требуйте ее только там, где это действительно необходимо.
• Активно используйте accesskeys. Назначайте одинаковым accesskeys одинаковые действия — например, пусть [0] везде будет привязан к ссылке на главную страницу, а [4] и [6] — ответственны за пейджинг по страницам.
• Старайтесь минимизировать количество кликов, требуемых для совершения какого-либо действия.
Пример: распространенная ошибка — создание «промежуточных» страниц, содержащих только текст типа «Регистрация завершена», «Ваше сообщение отправлено», etc. и ссылку «Продолжить». В большинстве случаев эти сообщения стоит выводить сразу на следующих страницах вместе с контентом.
• Дайте юзеру возможность персонализировать ваш сервис, т.е. настроить его «под себя». Если вы предоставляете афишу или прогноз погоды, дайте ему поставить на главную страницу тот кинотеатр или город, которые ему нужны. Если есть возможность комментировать что-либо – дайте возможность указать, сколько комментариев выводить на странице (а так же порядок вывода). Разделяйте функционал и настройки. Выносите настройки в отдельный раздел, чтобы не перегружать страницы дополнительными элементами.

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

• Обязательно оптимизируйте размер отдаваемых изображений. В идеале — выбирать вариант изображения в соответствии с размером экрана пользователя.
• Сделайте lite-версию сайта — без второстепенных изображений (например, аватаров) и максимально уменьшенной шапкой (или без шапки вообще).
• Приведите в порядок html-код, уберите лишние пробелы, комментарии, избегайте длинных id, name и имен классов.

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

• Страницы проекта должны соответствовать спецификациям XHTML Mobile (для проверки можно использовать validome.org)
• CSS должен быть валиден (http://jigsaw.w3.org/css-validator/)
• Верстка должна быть максимально простой (а также “тянущаяся", одноколоночная, кроссбраузерная и с использованием div).
• Следует учитывать ограничения, накладываемые некоторыми аппаратами.
Пример: некоторые устаревшие телефоны плохо работают со страницами больше 40-50кб по обьему, или «тормозят» при отображении страницы с превышением определенного количества знаков.
Пример: большинство телефонов Motorola некорректно обрабатывают тег — жирные символы заменяются нечитаемыми квадратами).