Услуги

  • Сайты

  • Контент

  • Продвижение

  • Битрикс24

Все услуги
Все услуги

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

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

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

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

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

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

Banner

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

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

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

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

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

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

01

/ 02

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

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

01

/ 02

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

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

01

/ 02

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

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

01

/ 02

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

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

01

/ 02

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

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

01

/ 02

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

Banner

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

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

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

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

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

Резюме

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

Хотите обсудить проект?

Оставьте ваш номер телефона и наш менеджер свяжется с вами в ближайшее время