Сегодня уже факт, если ваш сайт неудобен на телефоне – вы теряете деньги. Причем это происходит моментально. Смартфон стал главным экраном и с его помощью мы покупаем что угодно и где угодно. Так, вы можете совершать покупки в метро, читать отзывы в очереди и выбирать лучший товар, оформлять доставку по дороге домой. И если интернет-магазин не адаптирован под такой сценарий, он просто не дает результат.
“Когда человек открывает магазин с телефона и сталкивается с неудобством, больше половины таких визитов заканчивается закрытой вкладкой еще до просмотра корзины”, – замечает Евгений Касьяненко, наш ведущий эксперт.
Мы в KISS Software наблюдаем это каждый день – мобильный опыт действительно определяет судьбу продаж. Если вы выходите на рынок впервые или вам необходимо переработать существующий и запущенный сайт, начните именно с удобной версии для смартфонов!
Из личного опыта хотим сказать, что мобильная версия сайта html сегодня не просто “нужно”, она критически важна. И вот какие на то есть явные аргументы:
“Мобильная версия – ваша точка входа в жизнь покупателя. Это как хорошее приложение: открывается быстро, выглядит четко, все под рукой. Такую версию сайта для мобилок хочется сохранить в закладки и посоветовать другу. А это уже не просто покупка, а лояльность”, – поясняет Евгений Касьяненко.
Когда встает логичный ответ, что выбрать – адаптив или отдельный мобильный сайт? Однозначного ответа тут нет. Как говорит наш эксперт Евгений Касьяненко:
“Зависит от целей, бюджета и того, что уже есть на проекте. Мы делаем и то, и другое – все зависит от ситуации”.
Если кратко, адаптив – это когда один сайт автоматически подстраивается под любой экран, хоть смартфон, хоть большой монитор. У него один адрес, одна система управления, и обновлять его проще. К тому же поисковики такой подход уважают – продвигать легче.
Плюсы:
Минусы:
Когда у вас есть отдельный адрес, например m.site.com, и там – своя мобильная версия – это отдельный мобильный сайт. Используется в крупных проектах, где мобильный UX сильно отличается. Наш эксперт, выделяет ряд плюсов и минусов при таком подходе.
Плюсы:
Минусы:
Иногда мы предлагаем смешанный вариант: адаптив с мобильным шаблоном для ключевых страниц. Это может относиться, например, к каталогу или корзине.
“Мы всегда оцениваем поведение клиентов. Иногда именно гибрид дает лучший отклик и рост конверсии”, – подчеркивает наш специалист.
Мобильный сайт должен открываться быстро, быть понятным без подсказок и подталкивать к покупке в пару касаний. Ниже собрали три базовых правила, которых мы в KISS Software придерживаемся на каждом проекте:
Чем меньше шагов, тем выше шанс, что импульсная покупка дойдет до оплаты.
Следуя этим трем принципам, можно превратить визит через мобильное устройство в интернет-магазин в комфортную покупку. И конверсия будет расти без дополнительного рекламного бюджета.
Если хотите понять, как сделать мобильную версию сайта html , то знайте – запустить приложение за выходные не получится. Проект тянет за собой аналитику, дизайн, код и тесты. Ниже – проверенная на реальных проектах дорожная карта, которая помогает не упустить важные моменты. Изучите внимательно, как сделать сайт для мобильного телефона по этим этапам и принцип действий будет понятен.
Сначала оцените, что у вас уже есть и что реально нужно рынку.
Если ваш текущий шаблон уже полуадаптивен, тогда достаточно немного ретуши. Если верстка устарела, дешевле и быстрее спроектировать мобильную версию с нуля, чем чинить старую.
На этом этапе рисуем основу – расставляем блоки, кнопки, меню. Решаем, что убрать, чтобы не перегрузить экран. Хороший прототип экономит десятки часов на переделки. Если сомневаетесь, подключайте UX-специалиста, он убережет от ошибок.
Очень важно упростить анимации, оптимизируя CSS/JS, включая lazy-load картинок. Проверяем визуал в Android и iOS – иногда шрифты разъезжаются только на одной платформе.
Важно пройти проверку. Берем несколько смартфонов и планшетов, открываем каталог, фильтры, корзину, жмем все кнопки. Если есть невидимые или видимые баги, их исправляем до релиза.
После релиза включаем Google Analytics 4 и Яндекс Метрику. Нужно обратить внимание, где посетитель падает и зачем. Если, например, бросают форму оплаты,тогда сокращаем поля в ней. Если уходят со страницы товара – добавляем фото или видео и т.д.
“Мы не отпускаем проект, пока не доработаем на максимум. Запуск – это лишь малая часть из этой работы, ведь рост идет через аналитику и мелкие улучшения каждую неделю”, – подчеркивает Евгений Касьяненко.
Следуя описанной нами пошаговой схеме, вы получаете мобильный магазин, который не тормозит, не сбоит и помогает клиенту купить в два касания, где бы тот ни находился.
Поисковые роботы смотрят на то же самое, что и люди, а именно:
Когда Вам удалось сделать сайт для мобильных устройств правильно, выигрывают сразу два показателя – видимость в выдаче и процент оплаченных корзин:
Даже самый подробный гайд не заменит профессиональную команду, которая знается на всех этапах создания продукта. Поэтому обратите внимание на три причины, почему разработку и поддержку мобильной версии сайта стоит доверить именно нам:
“Мы планомерно ведем проект к стабильному росту, а пока он растет и мы растем вместе с ним. Таковых проектов за нашими плечами уже не один десяток, так что опыта нам не занимать”, – отмечает Евгений Касьяненко.
Хорошо работающая мобильная версия интернет-магазина – это когда клиенту удобно с первых секунд, сайт загружается быстро, и оформление заказа не превращается в квест. В таком формате покупают чаще, и вы быстрее увидите реальные результаты своего бизнеса.
Открытие интернет-магазина – это не только про витрину с товарами в интернете. Это про возможность превратить идею в работающий бизнес без арендных площадей, десятков сотрудников и огромных вложений.
читать больше
Интернет-магазин – это всегда куча различных процессов. Делать все вручную можно недолго, ведь мелкие ошибки копятся и выливаются в пропавшие заказы, рассинхрон остатков и потерянных клиентов.
читать больше
