Декабрь 12, 2018, Автор Дмитрий Белобородов

Кейс: доработка мобильной версии сайта

Мобильная версия

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

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

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

Доработка мобильной версии интернет-магазина «Интерпрезент»

Кейс: доработка мобильной версии сайта интернет-магазина «Интерпрезент»

Именно с такой задачей – необходимостью доработки отображения сайта на мобильных телефонах и планшетах, – мы столкнулись недавно. Сайт https://inter-present.kz был в целом адаптивен, но содержал ряд ошибок и недочётов с точки зрения юзабилити на мобильных устройствах.

Общий вид и шапка сайта

Самая грубая ошибка на мобильном разрешении – это горизонтальный скролл. Контент сайта не вмещается на экране смартфона и требует пролистывания страниц по горизонтали.

На скриншоте сразу видны несколько недочетов:

  • картинка с подарком выходит за пределы экрана;
  • кнопка «онлайн-чат» перекрывает кнопку меню;
  • пустота в шапке возле кнопки меню.

К этой задаче мы подошли комплексно и переработали шапку сайта. В т.ч. добавили кликабельный номер телефона в область возле кнопки меню, переместили  кнопку «быстрый чат» и уменьшили картинку подарка

Общая мобильная вёрстка: ДО
Общая мобильная вёрстка: ДО
Общая мобильная вёрстка: ПОСЛЕ
Общая мобильная вёрстка: ПОСЛЕ

Огромная капча

Тем не менее, даже после всех этих действий на странице все еще оставался горизонтальный скролл. На первом скриншоте Вы можете увидеть, что именно являет неправильную вёрстку. Блок с Google ReCaptcha не вписался в минимальную ширину экрана смартфона. С этой задачей мы справились, использовав компактный вариант отображения капчи.

Блок с Google ReCaptcha: ДО
Блок с Google ReCaptcha: ДО
Блок с Google ReCaptcha: ПОСЛЕ
Блок с Google ReCaptcha: ПОСЛЕ

Псевдоадаптивность элементов

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

"Недружелюбная" вёрстка
"Недружелюбная" вёрстка
Улучшенная вёрстка
Улучшенная вёрстка

Наслоение элементов

Как мы и говорили ранее, очень распространена ситуация, когда элементы накладываются друг на друга, мешают просмотру, да и просто выглядят неэстетично. Такие ситуации надо обязательно устранять:

Наслоение элементов
Наслоение элементов
Лаконичный дизайн
Лаконичный дизайн

Отсутствие отступов

Мелкая недоработка, которая, тем не менее, сразу бросилась в глаза – отсутствие отступов. Её мы также исправили:

Отсутствие отступов
Отсутствие отступов
Их наличие
Их наличие

Мобильное меню

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

Некорректное мобильное меню
Некорректное мобильное меню
Исправленное мобильное меню
Исправленное мобильное меню

Доработка адаптивности сайта интернет-магазина «Фазенда»

Кейс: доработка мобильной версии сайта

Кейсы по доработке адаптивности сайтов и интернет-магазинов встречаются в нашей практике довольно часто. Ещё один такой пример – https://fazenda.shop (розничный магазин) и https://fazendasib.shop (оптовый сайт той же компании).

Общий вид и шапка сайта

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

Элементы топ-хидера не помещаются в контейнере
Элементы топ-хидера не помещаются в контейнере
Переработанный топ-хидер
Переработанный топ-хидер
"Неправильный" горизонтальный скролл
"Неправильный" горизонтальный скролл
Горизонтальный скролл убран
Горизонтальный скролл убран
Было
Было
Стало
Стало

Адаптивность каталога

Также присутствовали ошибки на страницах каталога в отображении на узких экранах. Приведем некоторые доработки адаптивности каталога интернет-магазина:

Без отступов
Без отступов
С отступами
С отступами
Наслоение элементов, отсутствие отступов
Наслоение элементов, отсутствие отступов
Наслоение убрано, отступы настроены
Наслоение убрано, отступы настроены
Отсутствие выравнивания
Отсутствие выравнивания
Выравнивание настроено
Выравнивание настроено
Наслоение элементов, отсутствие отступов
Наслоение элементов, отсутствие отступов
Наслоение убрано, отступы настроены
Наслоение убрано, отступы настроены
Элементы без иконок
Элементы без иконок
Элементы с иконками
Элементы с иконками

Резюме

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

Кейс: доработка мобильной версии сайта

2
Оставить комментарий

avatar
1 Цепочка комментария
1 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
2 Авторы комментариев
Валерия БеляковаИгорь Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Игорь
Гость
Игорь

Ребята Спасибо, отлично работаете, все сделали качественно и не затягивали со сроками, в общении очень приятные.
Спасибо всей команде каждый специалист в своем направлении.

Какую услугу я заказал у ребят
1 — обновление дизайна
2 — сайт был кривой на телефоне
3 — ускорили скорость загрузки сайта
4 — анализ сайта, показали на слабые моменты

вот сейчас праздники закончатся заказу у них продвижение сайта

Всем ещё раз спасибо, успехов и максимального развития!!
С уважением Игорь.

Валерия Белякова
Администратор

Большое спасибо за ваш отзыв, Игорь!


Scroll Up