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

    В свете все возрастающего интереса к мобильному интернету, развития 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 некорректно обрабатывают тег — жирные символы заменяются нечитаемыми квадратами).
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 7

      0
      Надеюсь, разработчики сайтов для мобильных устройств будут стараться соблюдать хотя бы половину из вышеперечисленного.
        0
        всё очень правильно, даже добавить нечего :)

        насчёт изображений - их вообще лучше избегать по максимуму, мне кажется. большинство людей всё равно их отключают)
          0
          2010 год на дворе, и до сих пор отключение картинок, печально… :(
          +4
          "Чем ближе какой-либо обьект к началу страницы, тем проще пользователю получить к нему доступ"
          Мечта вап-серфера и лакомое место рекламодателей. Именно верхушка страницы всегда занимается линками на партнерки контент-провайдеров и проданные рекламные места. Что тут не говори, но это было, есть, и, скорее всего, будет ближайшие несколько лет - это бизнес. И очень хороший бизнес

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

          "Сохраняйте введенные пользователем данные и подставляйте их в качестве значений по умолчанию в следующий раз."
          В вапе сделать это сложновато. Например, сименсы(еще те, которые настоящие сименсы, а не бенки-сименс) с кукисами дружат очень плохо. К тому же, установленные кукисы. И если их много(пусть даже килобайт), то это уже дополнительная трата денег пользователя, ибо операторы учитывают как входящий, так и исходящий трафик. Да и не секрет, что наши операторы намеренно настраивают(как путем отсыла настроек на абонентский терминал, так и при обращении к консультантам в офисах) браузеры на выход через вап-точки доступа - они очень дорогие(допустим, у меня(МегаФон-Сибирь) - 256 рублей за метр).

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

          "распространенная ошибка - создание "промежуточных" страниц"
          Не согласен. С одной стороны - да, они мешают и бесполезны. С другой - не секрет, что неголосовые(т.е. трафиковые - gprs/egde) сервисы наших операторов качеством не блещут(хотя два года назад все было куда хуже). Представим себе ситуацию. Пользователь пишет на форум пост. Нажимает "Отправить" - сообщение улетает. ПОльзователь через полминуты(не делая больше никаких переходов) хочет обновить страницу для просмотра новых постов текущей темы. Обновляет - получаем дубль сообщения(при условии, что время повторяемости поста, допустим, 15 секунд). Нехорошо, не так ли? header('Location ...') тут не спасет, ибо наши "любимые"(в вапе, в плане багов. ПРотив настоящих сименсов ничего не имею, даже наоборот - обожаю эти телефоны) сименсы при определенной конфигурации веб-сервера просто пикают и отключаются. Пример, конечно, сложноват и сделано много допущений, но, надеюсь, суть понятна.

          "3. Минимизируйте трафик".
          По подпункту 1 и 2 - лучше делать дизайн таким, чтобы в нем вообще не было графики - чистый html и css. Пришедшим из веба это, думаю, непривычно, но такие сайты хороши тем, что и со включенной, и с отключенной графикой выглядят одинаково превосходно.

          "4. Следите за валидностью".
          С этим абсолютно согласен. Два-три года назад, когда телефоны были древними(тут надо улыбнуться:-)), это была очень большая проблема(но тогда и не знали, что в вапе возможен цветной html. Был только WML), так как телефоны не могли общаться напрямую по http с серверами и использовали гейты - вап-шлюзы, которые запрашивали страницу с сервера, компилировали ее в формат, пригодный для телефона, и отдавали. В случае ошибки(например, забыл удвоить знак доллара) страница попросту отказывалась открывать. Сейчас все намного проще - большинство телефонов умеет напрямую общаться с серверами, и в большинстве случаев невалидная верстка может просто изменить внешний вид страницы. Хотя все-таки валидность надо соблюдат ьвсегда и везде:-)

          Фу, ну в общем-то и все, что я хотел сказать, пользуясь своим многолетним опытом как пользователя вапа, так и его разработчика:-)
          ЗЫ: надеюсь, кто-нибудь осилит прочтение сего комментария
            0
            Осилил и очень рад такому детальному ответу :)
            Момент с accesskeys и формами мы никогда не учитывали, спасибо!


            Не согласен. С одной стороны - да, они мешают и бесполезны. С другой - не секрет, что неголосовые(т.е. трафиковые - gprs/egde) сервисы наших операторов качеством не блещут(хотя два года назад все было куда хуже). Представим себе ситуацию. Пользователь пишет на форум пост. Нажимает "Отправить" - сообщение улетает. ПОльзователь через полминуты(не делая больше никаких переходов) хочет обновить страницу для просмотра новых постов текущей темы. Обновляет - получаем дубль сообщения(при условии, что время повторяемости поста, допустим, 15 секунд). Нехорошо, не так ли? header('Location ...') тут не спасет, ибо наши "любимые"(в вапе, в плане багов. ПРотив настоящих сименсов ничего не имею, даже наоборот - обожаю эти телефоны) сименсы при определенной конфигурации веб-сервера просто пикают и отключаются. Пример, конечно, сложноват и сделано много допущений, но, надеюсь, суть понятна.


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


            По подпункту 1 и 2 - лучше делать дизайн таким, чтобы в нем вообще не было графики - чистый html и css.


            Нельзя так. Все же, живем в век мультимедиа, кроме того - изображения могут быть обязательным элементом контента (wap.mamba.ru например).
              0
              "почему нельзя добавить в скрипт добавления поста проверку, не был ли такой же пост добавлен ранее?"
              Проверка есть. ПРосто для минимизации(смешно звучит) комментария сократил до "время повторяемости поста, допустим, 15 секунд". Т.е. выполняется проверка - если имеется такой пост за последние 15 секунд, то он считается дублем и не сохраняется. Иначе - пишется. Хотя такой интервал больше применим для чата, но все это абстрагировано, чтобы лишь показать небесполезность промежуточных страниц

              "Все же, живем в век мультимедиа, кроме того - изображения могут быть обязательным элементом контента".
              Согласен, что очень хочется сделать вап хоть отчасти похожим на веб. Но надо учитывать и тот факт, что трафик у нас пока не такой и дешевый. И очень много посетителей ходят с отключенными изображениями(лично я потребляю ~100 метров в месяц на серфинг. И это при отключенных картинках и не сидя в чатах). Поэтому, если уж и хочется сделать сайт с графикой, то надо делать так, чтобы и без оной сайт смотрелся как конфетка. Вот хороший пример того, что сайт может выглядеть с отключенной графикой не как конфетка, а как то, из чего многие пытаются конфетку сделать - http://wap.mmska.ru
            0
            интересные комментарии
            спасибо за статью
            пригодится. собрался в ближайшем будующем сделать  pda версию портала

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

            Самое читаемое