Пользователь
0,0
рейтинг
23 июля 2013 в 14:12

Дизайн → Оптимизация сайта для планшетов tutorial

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

Ускорение набора текста с помощью добавления спецсимволов


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



А при вводе адреса электронной почты меняем символы на необходимые:



Стандартная клавиатура:

<input type="text">

URL-параметры:

<input type="url">

Email-символы:

<input type="email">

Цифровая клавиатура:

<input type="text" pattern="[0­9]*">


Отключение автокоррекции и начальных заглавных букв




Заполнение форм на виртуальной клавиатуре планшета имеет свои особенности. В частности при логине на многие сайты необходимо вводить свой email, и система пытается исправить его в соответствии со своим знанием словаря, а также начать строку с заглавной буквы. Чтобы этого не случалось, используем простой HTML-код в форме:

<input type="text" autocapitalize="off" autocorrect="off">


Правильное расположение блоков


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

Слишком мелко:



Хорошо:



Изменение типографики


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



Изменение размеров кнопок


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



Минимизация набора текста


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



Тач-карусели


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



Отключение a:hover


В тач-устройствах отсутствует возможность удобного наведения курсора на объект, поэтому не стоит использовать такой способ взаимодействия с пользователем (На Хабре, кстати, это еще имеет место — всплывающие подсказки при наведении на оценку топика или комментария для просмотра баланса голосов)

Проектирование для альбомной и портретной ориентации экрана


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

Использование камеры


Планшеты открывают нам новые возможности: например при заполнении профиля можно предлагать пользователю сделать фото для аватара камерой планшета:

<input type="file" accept="image/*" capture="camera">


Скрытие адресной строки


При использовании планшета на счету каждый пиксель, поэетому можно скрыть адресную строку (в Safari) для увеличения полезной площади экрана:

<meta name="apple-mobile-web-app-capable" content="yes" />


Полезное чтиво и использованный материал


.
@grokru
карма
405,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

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

Самое читаемое Дизайн

Комментарии (24)

  • +6
    «Отключение a:hover»
    На самом деле в мобильном safari при коротком клике на ссылке срабатывает таки событие hover а уже при втором клике, либо при более долго клике срабатывает переход.
    • 0
      Ага. Причем этого практически не видно на эмуляторе. Делал меню сайта при отсутствии айфона — проклял всё на свете.
  • +8
    по поводу a:hover, обращаюсь к создателям lurkmore — надо как-то решить этот вопрос, т.к. львиная доля юмора содержится в том, куда ведут некоторые ссылки. Например, ссылка «какой-нибудь дизайнер» может вести на Артемия Лебедева, что в определенном контексте будет смешно.

    Но при просмотре с мобильного девайса эта информация оказывается крайне труднодоступной :(
    • +3
      на лурке приведенное вами в обычном тайтле у a[href] — так что тут вопрос скорее к браузерописателям в том как они вообще на тачскринах хотят отображать тайтлы эти(видимо не очень-то и хотят, или просто не представляют как это будет выглядеть поэтому делают текущее убожество)

      по поводу статьи:
      за скрытие адресной строки поубивал бы, а так — помимо очевидных вещей есть и полезные мелочи напоминать о которых стоит почаще
    • 0
      Да, есть такая проблема. Решается лонг-тачем.
  • +1
    И ещё по поводу a:hover

    На ноутах от самсунга и вроде на с4 поддерживается настоящие наведение. Первые 2 — наведение пером, третий — пальцем. Так что убирать не стоит
    • +2
      Кстати, в Chrome for Android есть способ навести hover, нужно нажать пока не выпадет контекстное меню. Неудобно, но иногда очень помогает.
  • +20
    Почему не указали нигде, что это переводная статья?
  • +4
    Ещё бы хотелось видеть какие мобильные браузеры какие из перечисленных фич поддерживают.
  • 0
    Что касается увеличения размеров кнопок и активной области клика, то про левшей, наверное, тоже не надо забывать.
  • 0
    вы забыли самое главное: как таргетировать стили для 100500 андроидов? если меня читает кто-то, кто эту проблему для себя решил — поделитесь, пожалуйста, решением, как именно вы это сделали! под расширения десктопов верстаю, под айпады-айфоны тоже справляюсь, но что с зеленым делать — я честно говоря не представляю :(

    PS: у автора, судя по тому, что ето перевод, спрашивать бесполезно :)
    • +1
      Пока что лучше этого решения ничего не знаю.

      if (Modernizr.touch) {
        $('body').addClass('touch');
      }
      

      modernizr

      В media queries level 4 будет дополнительные селекторы, определяющие тач-устройства, вот они, но поддержку их ещё не ввели, да и когда введут, останется проблема со старыми не обновлёнными планшетами.
      • +1
        Возможно вам пригодиться…

        // скорее всего мы в IE - Metro mode ( IE10+ )
        if(navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 0) { ... }
        


        Код не дает 100% гарантии что юзверь пользуется пальцами а не мышью и что он находиться именно в Metro, но лично мне этот код помог и он достаточно хорошо работает
        • 0
          Полез в исходники модернайзера, чтобы посмотреть, как там делается, и наткнулся на ссылку на статью. Всё ещё печальнее с определением тач-устройств.
      • 0
        В соседнем топике есть предложения, как заменить восьмикилобайтный modernizr несколькими строчками для определения тачей.
  • +1
    Можно добавить еще вот эту ссылку в качестве справочной.
  • +1
    > Если на сайте используется карусель изображений, она должна управляться тачем:

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

    Но уж если делать, то ставить те, что с использованием аппаратного ускорения — к примеру, Swiper www.idangero.us/sliders/swiper/, Royal Slider dimsemenov.com/plugins/royal-slider/, да и несколько еще других.
  • +2
    Поправьте последний пункт, правильно он пишется так:

    <meta name="apple-mobile-web-app-capable" content="yes" />
    

    (web-app)
  • –1
    По поводу hover. Видел как минимум два устройства с тачскрином, где эта проблема решена. Это какой-то Samsung с активным стилусом (при приближении стилуса к экрану он управляет указателем) и какой-то BlackBerry (простое прикосновение только управляет указателем, а для клика надо с усилием нажать на экран). Немного непривычно поначалу, но я считаю, что за такими устройствами будущее. Если я вообще когда-нибудь буду приобретать устройство с тачскрином, это будет одно из таких.
    • +1
      какой-то BlackBerry (простое прикосновение только управляет указателем, а для клика надо с усилием нажать на экран).

      за такими устройствами будущее

      Это вы сейчас описали то, что в BlackBerry называли Sure-Click и что по сути было костылем, который они придумали, когда припекло сделать смартфон с сенсорным экраном. Аппараты с этим «добром» люто провалились и уже, если я не ошибаюсь, не выпускаются — современные устройства от BlackBerry имеют обычный эмкостный сенсорный экран без подобных извращений.
      • –1
        Нет, SureClick и SureType — это как раз костыли, аналоги T9. А вот подпружиненный тачскрин, распознающий сильные нажатия — это новшество, и очень удобное.
  • +9
    Объясните человеку, который «мимо пробегал» —

    autocapitalize="off" autocorrect="off" (и прочее…)

    это входит в стандарт HTML5 или расширение какое-то поддерживаемое только планшетными операционками, или еще что?
    (из статьи не понятно)
  • 0
    Какой-то баг, Chrome 28, приводит к сообщению «введите данные в указанном формате» даже при вводе только цифр.
    • 0
      Парсер съел часть фразы input type=text pattern="[0­9]*"

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