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

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

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

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

800125ba240c7acd69286ee7930c23fc

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

b391efc857a7a23f6236f495105e2567

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

<input type="text">

 

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

<input type="url">

 

Email-символы:

<input type="email">

 

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

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

 

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

bed00e3c5b7877e6d1264a9afa1b211f

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

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

 

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

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

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

ac4443da9f156af755166c6ce2da9e17

Хорошо:

ded8a2325e5bff042bb687c03a495a97

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

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

09113b9d8cb03a7f9a4f4749ac9a471d

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

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

385baa875678873c0208fac49687a3d5

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

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

0ee7b2ba94b91462f7630740ff301f4f

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

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

79c246d1019a91252ee1bb641407b00f

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

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

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

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

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

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

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

 

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

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

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

 

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