Помните ли вы времена, когда загрузка веб-сайта с телефона приравнивалась к движению улитки по брусчатке? Эти времена давно прошли. Сегодня скорость и покрытие связи позволяет нам все больше действий в Интернете выполнять именно со смартфона.

По нашим данным, средний процент мобильного трафика по клиентам агентства BRAB к середине 2018 года достиг отметки 65%.

Мировая статистика говорит о том же:

  • В 2018 году, 52,2% общемирового онлайн-трафика было сгенерировано через мобильные устройства, что на 1,9% больше, чем годом ранее (Statista, 2018).
  • 70% пользователей смартфонов, которые купили что-то в магазине, сначала искали информацию о продукте со смартфона (Google, 2017).
  • 89% людей, скорее всего, порекомендуют бренд другим после позитивного онлайн-опыта с телефона (Google, 2017).
  • Более 40% всех онлайн-транзакций производится с мобильных устройств (Google, 2017).
  • 80% руководителей B2B-компаний ищут информацию о продуктах или услугах в вечернее время на планшете (IDG Global Solutions).

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

Адаптивная верстка — подход, предполагающий изменение дизайна сайта в зависимости от размера экрана, поведения пользователя, платформы и ориентации устройства.

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

Ошибка №1 СОКРАЩАТЬ КОНТЕНТ.

Не заставляйте пользователей переходить на полную версию сайта. Вся без исключения информация, которая есть на нем, должна отображаться и на мобильных устройствах. Спрятать часть сайта только потому, что она не помещается на дисплее — все-равно, что отрезать руку, потому, что она не «влазит» в объектив фотоаппарата. Один сайт = один функционал и один контент вне зависимости от устройства.

Мобильный пользователь должен быть уверенным в том, что он получает всю ту же информацию, что и ПК-пользователь.

Ошибка №2. СЛИШКОМ БОЛЬШОЙ ВЕС ИЗОБРАЖЕНИЙ.

Времена «перехода на полную версию сайта» уже прошли, но мобильный Интернет все-равно бывает медленным. Тяжелые веб-сайты плохо грузятся на мобильных гаджетах, и это факт. Выход есть — оптимизировать все изображения как по весу, так и по размеру.

Согласно исследованию Strangeloop, 57% мобильных пользователей покинут сайт, если он загружается дольше 3-х секунд.

Ошибка № 3. МЕЛКИЕ ЭЛЕМЕНТЫ.

Бабушка, бабушка, а почему у тебя такие большие глаза? Чтобы лучше тебя видеть, внученька! Так бывает только в сказке. В реальной жизни пользователь вряд ли захочет рассматривать на телефоне мелкие шрифты и кнопки.

Спроектируйте интерфейс так, чтобы элементы навигации в адаптивной версии было видно так же хорошо, как Бурдж Халифу на горизонте Дубая. Не заставляйте посетителя сайта приближать кнопку, чтобы нажать на нее.

Только крупные элементы навигации!

Ошибка № 4. ИГНОРИРОВАТЬ СПЕЦИФИКУ ПОЛЬЗОВАНИЯ.

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

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

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

Ошибка № 5. ПРОЕКТИРОВАТЬ С МОБИЛЬНОГО НА ДЕСКТОП.

В последнее время стал модным подход к разработке сайтов «Mobile first». Это определенный отказ от устоявшейся практики: разработки решений первоначально для десктопов, а уже позже — для мобильных устройств.

Подход является правильным, но многие его неправильно понимают. Мнение о том, что нужно начинать проектировать дизайн с мобильной версии — ложное. Настоящая суть «Mobile first» — начинать проектировать сайт с десктопной версии, при этом сразу же продумывать, как будет выглядеть версия для мобильных устройств: как будут сдвигаться блоки, как будут выглядеть кнопки, что будет вместо анимации и т. д.

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

Суть «Mobile first» именно в придании важности адаптивной версии. Будьте готовы к тому, что больше половины пользователей будут просматривать ваш сайт с мобильного устройства. Поэтому, уделите не меньше половины времени продумыванию и тестированию адаптивной версии! Десктопная версия — это не больше половины работы над дизайном. Самое ответственное впереди.