Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

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

    О чем здесь?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Обсуждение

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

    avatar
    1
    Добрый день. А к вам можно обратиться за помощью 
    
    Цитата
    Это в первую очередь касается страниц заказа и оплаты. Достаточно ли удобно просматривать список заказанных товаров клиенту?
    avatar
    0
    2
    Здравствуйте, Виталий. Что Вам подсказать? CSS стили для оформления таблицы?
    avatar
    3
    Дело в том что в мобильной версии форма заказа ужас как не удобна.
    avatar
    1
    4
    Мы можете написать мне на почту info@ucozmagazines.ru
    avatar
    5
    Написал
    V
    6
    V
    7
    Подскажите пожалуйста как преобразовать ячейки к блочному виду для маленьких экранов ... как на скриншоте - очень надо.
    avatar
    1
    8
    Попробуйте так:
    
    Код
    /* Адаптивные таблицы 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: 'Дата оформления: ';
    }
    }
    V
    9
    Огромное спасибо. Очень помогли вы лучшие ...
    7 советов для мобильной версии интернет магазина
    7 советов для мобильной версии интернет магазина