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

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

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

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

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

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

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

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

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

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

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

/ 02

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

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

/ 02

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

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

/ 02

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

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

/ 02

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

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

/ 02

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

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

/ 02

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

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