7 советов для мобильной версии интернет магазина

Сергей 27.04.2016 4452 5.0 из 5.0 (6)

Оцените материал:

О чем здесь?

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

В этой статье мы рассмотрим несколько интересных аспектов в работе мобильной версии интернет магазина. Данные советы касаются как PDA-версии, так и адаптивного шаблона.

Сделайте контент и инструменты доступными

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

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

Поэтому, убедитесь, что ваш шаблон адаптирован для мобильных устройств. Если это не так, то включите отдельную мобильную PDA-версию сайта.

Убедитесь, что ключевые страницы дружелюбны к мобильным

Это в первую очередь касается страниц заказа и оплаты. Достаточно ли удобно просматривать список заказанных товаров клиенту?

Широкие таблицы далеко не всегда влезают в ширину мобильного экрана и выхода здесь два:

C помощью CSS свойства overflow: hidden; скрыть часть таблицы, оставив при этом возможность листать ее влево/вправо;
Преобразовать ячейки к блочному виду для маленьких экранов.

ключевые страницы дружелюбны к мобильным

Следите за контрастностью ссылок

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

Добавьте свободного пространства

Убедитесь в том, что между ключевыми блоками присутствует достаточное количество свободного пространства. Так вы позволите своим посетителям свободно обращаться с сайтом, без боязни нажать случайно не ту ссылку (особенно актуально для людей с крупными пальцами).

Используйте фиксированное меню

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

Телефон важнее email

Не вынуждайте пользователя мобильного устройства писать вам на email. Показывайте номер телефона. Сделайте номер телефона доступным для звонка в одно нажатие, например так:

<a href="tel:12345678">Позвонить</a>

Используйте онлайн консультантов

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

В то время как многие магазины не предлагают такую возможность пользователям.

Позвольте своим посетителям узнать, в какое время работает онлайн-поддержка, чтобы пользователь мог вернуться на сайт, когда поддержка возобновит работу.

Статьи по теме

Обсуждение

Всего комментариев: 9

Порядок вывода комментариев:

Спам

shatrov • 11:56, 11.05.2016

Добрый день. А к вам можно обратиться за помощью

Цитата

Сергей • 12:10, 11.05.2016

Здравствуйте, Виталий. Что Вам подсказать? CSS стили для оформления таблицы?

Спам

shatrov • 12:11, 11.05.2016

Дело в том что в мобильной версии форма заказа ужас как не удобна.

Сергей • 12:48, 11.05.2016

Мы можете написать мне на почту info@ucozmagazines.ru

Спам

shatrov • 12:58, 11.05.2016

Написал

Спам

Vov4uk • 22:51, 14.07.2016

Спам

Vov4uk • 22:53, 14.07.2016

Подскажите пожалуйста как преобразовать ячейки к блочному виду для маленьких экранов ... как на скриншоте - очень надо.

Сергей • 00:32, 15.07.2016

Попробуйте так:

Код

/* Адаптивные таблицы uCoz */
@media(max-width: 768px) {
  #order-table table, #order-table td, #order-table tr, #invoice-table, #invoice-table tbody, #invoice-table tr, #invoice-table td {
  display: block;
  width: 100%;
  text-align: center;
  }
  #order-table thead, #order-table .order-item-nom, #invoice-table thead, #invoice-table tr:first-child, #invoice-table .gTableSubTop {
  display: none;
  }
  #order-table, #order-table table > tbody > tr > td, #invoice-table, #invoice-table  > tbody > tr > td {
  border: none;
  }
  #order-table tr, #invoice-table > tbody > tr {
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 20px;
  }
  #order-table .btn-default.btn-sm {
margin-bottom: 15px;
}
#order-table .form-inline, #invoice-table {
width: 100%
}
.col_inv_id>a {
display:block;
font-size: 18px;
}
td:before, td div:before {
color: #999;
}
td.order-item-name:before {
     content: 'Наименование: ';
}
td.order-item-art:before{
     content: 'Артикул: ';
}
td.order-item-price:before {
     content: 'Цена: ';
}
td.order-item-cnt:before {
     content: 'Кол-во: ';
}
td.order-item-sum:before {
     content: 'Сумма: ';
}
td.order-item-del:before {
     content: 'Удалить: ';
}
td.col_inv_id>a:before {
     content: 'Заказ №';
}
td.col_status:before {
     content: 'Статус заказа: ';
}
td.col_fld1 div:before {
     content: 'Номер телефона: ';
}
td.col_fld2 div:before {
     content: 'Адрес доставки: ';
}
td.col_fld4 div:before {
     content: 'ФИО: ';
}
td.col_fld5 div:before {
     content: 'E-mail: ';
}
td.col_fld6 div:before {
     content: 'Комментарий к заказу: ';
}
td.col_delivery_id:before {
     content: 'Способ доставки: ';
}
td.col_payment_id:before {
     content: 'Способ оплаты: ';
}
td.col_amount:before {
     content: 'Сумма: ';
}
td.col_add_time:before {
     content: 'Дата оформления: ';
}
}

Спам

Vov4uk • 18:20, 15.07.2016

Огромное спасибо. Очень помогли вы лучшие ...