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

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

В своей практике мы применяем 2 подхода для адаптации веб-страниц под мобильные экраны:

• Использование адаптивной верстки.
• Разработка отдельной мобильной версии сайта.

Создание адаптивного сайта

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

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

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

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

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

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

Пример

Типовая задача: оформление покупки товара в интернет-магазине.

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

Примеры мобильных сайтов:

• Новостной портал - 116kzn.ru;
• Интернет-магазин Диабетика m.thediabetica.com;
• Официальный сайт Внутренних войск МВД m.vvmvd.ru

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

1. Проектирование.

2. Дизайн.

3. Верстка, программирование.

4. Тестирование.