Как оптимизировать свой сайт электронной коммерции для мобильных устройств

Следующая статья поможет вам: Как оптимизировать свой сайт электронной коммерции для мобильных устройств

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

Эти цифры означают, что всякий раз, когда кто-то посещает ваш сайт электронной коммерции, он, скорее всего, будет делать это с мобильного устройства. Было 168 миллионов покупателей мобильной связи в США в 2020 году, и эти покупатели принесли доход в размере 338 миллиардов долларов.

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

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

Влияние оптимизации: как Walmart Canada удвоила продажи мобильных устройств

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

Сделав сайт адаптивным, что означает, что он автоматически подстраивается под тип устройства, которое использует посетитель, Walmart Canada смогла увеличить коэффициент конверсии на 20% и количество мобильных заказов на 98%.

Вот как Walmart Canada удалось добиться таких результатов:

Производительность

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

Таким образом, Walmart Canada сделала повышение производительности приоритетом, когда компания пересматривала свой мобильный опыт. Компания смогла сделать свой мобильный сайт на 35% быстрее, используя такие методы, как кэширование ключевых компонентов и использование иконочных шрифтов вместо изображений.

Макет

Улучшив производительность, Walmart Canada сосредоточилась на том, как макет его адаптивного сайта будет отображаться на разных устройствах.

Компания проанализировала, какая ширина браузера наиболее распространена как на настольных компьютерах, так и на мобильных устройствах, а затем определила, что использование системы с 4/8/12 столбцами обеспечит оптимальное взаимодействие с пользователем. Сайт плавно масштабируется по сетке от 320 до 1152 пикселей, при этом дополнительные столбцы отображаются по мере появления свободного места.

Навигация

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

Walmart Canada обнаружил, что отображение 60 товаров на странице — это как раз то, что нужно для мобильных устройств. Таким образом, посетители могли видеть множество продуктов, не делая еще один клик, а количество продуктов, отображаемых в строке, могло переключаться между тремя, четырьмя и шестью в зависимости от размера окна браузера, при этом в нижней части окна никогда не было незавершенной строки. полная страница результатов.

Как сделать ваш интернет-магазин мобильным

В дополнение к описанному выше примеру Walmart Canada, вот еще несколько советов, как сделать ваш сайт более удобным для мобильных устройств:

• Мобильный дизайн: У Walmart Canada был веб-сайт задолго до того, как были представлены мобильные устройства, поэтому у компании не было другого выбора, кроме как начать с настольной версии своего сайта, а затем развивать свой мобильный опыт на основе этого. Но учитывая, что большая часть интернет-трафика теперь мобильна, интернет-магазинам, которые только начинают свою работу, было бы разумно сначала разработать мобильную версию своего сайта и сделать его настольную версию менее приоритетной.

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

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

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

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

• Сделайте ссылки и кнопки удобными для нажатия: Большинство мобильных пользователей будут использовать свои пальцы вместо мыши для навигации по вашему сайту. Это усложняет выбор точных областей на странице — чтобы помочь вашим посетителям, сделайте интерактивные элементы большими и окружите их большим количеством пустого пространства. Кроме того, имейте в виду, что, хотя имеет смысл размещать кнопки в верхней части страницы для настольной версии, пользователю особенно неудобно выбирать эту область большим пальцем при использовании смартфона.

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

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

• Непрерывно тестируйте: Тот факт, что мобильная версия вашего сайта безупречно работает в браузере Google Chrome, не означает, что так же будет и в обычном браузере. Apple Браузер Сафари. Вы должны регулярно тестировать свой сайт в этих браузерах, чтобы убедиться в отсутствии недостатков, которые необходимо исправить. И хотя Chrome и Safari на сегодняшний день являются самыми популярными браузерами, вы также должны учитывать, что многие из ваших посетителей могут использовать интернет-браузер Samsung, который предварительно загружен на все устройства Samsung. Galaxy устройства.

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