Разработка мобильной версии сайта

С каждым годом количество людей, использующих смарт-девайсы в качестве основного средства выхода в сеть, растет в геометрической прогрессии. Если на заре появления смартфонов и планшетов интернетом пользовались всего 10-12% от общего количества пользователей, то сегодня эта цифра колеблется в пределах 45-48% и продолжает расти. По прогнозам аналитиков, к 2021 году каждый третий житель Земли будет совершать покупки именно с телефона.
Поэтому открывая интернет-магазин, владелец проекта должен задуматься о том, как сделать мобильную версию сайта. А эксперты веб-студии EcKit готовы рассказать, каким требованиям должен соответствовать хороший ресурс и что нужно учесть при его разработке. На что обратить внимание при создании дизайна? Как настраивать? Будут ли выводиться объявления и промо-материалы? Разберемся с этим вместе!

Требования к мобильной версии страницы сайта

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

Чтобы устранить любой дискомфорт, достаточно:

• Соблюдать дистанцию в 27 пикселей при расположении интерактивных элементов;
• Обеспечить максимальную доступность расположения текстовых материалов: статей, новостей, описаний и т.д.;
• Продумать форму заказа товара так, чтобы у пользователя была возможность купить в один клик;
• Создать кликабельные номера телефонов в корректном формате, чтобы клиент мог связаться с компанией, не открывая набор номера;
• Вывести меню, кнопки навигации, ссылку на главную на «стартовый» экран;
• Проработать размещение контента так, чтобы важная или полезная информация была доступна без скроллинга или увеличения;
• Убрать всплывающие окна и наслоение, в т.ч. формы заказа обратного звонка, онлайн-чата или помощника;
• Обеспечить возможность просмотра видео «во весь экран» (при наличии промо-материалов);
• Заполнить или убрать пустые зоны сверху, снизу или по бокам от отображаемого материала;
• Исключить необходимость в горизонтальной прокрутке;
• Размещать интерактивные элементы в зоне легкой доступности.

С технической же точки зрения, такая версия должна:

1. Открывать доступ к сканированию CSS и Javascript. Достаточно прописать необходимые настройки в файле Robots.txt;
2. Отправлять ответ с HTTP-кодом 200 ОК на сервер, а в отсутствие документа отдавать 404 Not Found;
3. Обладать тегом viewport, отвечающим за корректное отображение содержимого;
4. Работать без Flash-элементов, Silverlight-плагинов и Applet, т.к. эти технологии не поддерживаются большинством устройств;
5. Отображать интерактивные элементы, выполненные с использованием технологии HTML5 для корректной работы с мобильными платформами;
6. Адаптировать размер заголовков, подзаголовков и основного текста под размер экрана устройства для простоты и удобства чтения;
7. Перенаправлять пользователей с помощью 302 редиректа.

Проверить соответствие актуальным требованиям, можно с помощью встроенных инструментов Google или Яндекса: при наличии проблем, поисковики дадут рекомендации по их решению!

Разработка мобильной версии сайта

Существует несколько подходов к «адаптации» под смартфоны и планшеты:

1. Создание мобильной версии – полной копии, настроенной с учетом особенностей отображения информации на экранах устройств. Подразумевает прорисовку отдельного дизайна, верстку, программирование и т.д., следовательно – двойную оплату, из-за чего подходит крупным проектам, готовым платить по двойному тарифу. Чаще всего, страницы отображаются на отдельном поддомене вида «m.», а url выглядит как m.example.com;
2. Адаптивный дизайн, подразумевающий возможность изменения структуры и расположения блоков в зависимости от устройства. Иными словами, при сужении экрана, часть разделов уменьшается, а некоторые меняют свое расположение. Подходит молодым, малобюджетным проектам, т.к. не требует больших затрат, настраивается за несколько часов;
3. Динамический, в котором отдельные элементы будут меняться или исключаться при входе с телефона, но останутся нетронутыми для ПК-версии. Такой подход упрощает навигацию и снижает общий вес, способствуя ускоренной загрузке. Из минусов- необходимость в привлечении команды программистов, способных оптимизировать программный код. К плюсам можно отнести полное соответствие принципам Mobile First.

В любом случае, доверять разработку мобильной версии стоит профессионалам.

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

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

1. Вписываться в габариты экрана;
2. Не создавать помехи для быстрого просмотра;
3. Способствовать решению основных задач пользователя.

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

Настройка страниц под мобильную версию сайта

С точки зрения поисковой оптимизации, настройка проходит в несколько этапов:

1. Добавление метатега “viewport”;
2. Установка user-agent, определяющего устройство;
3. Связь контента метатегами link;
4. Настройка редиректов (301, 302).

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

Вывод объявлений в мобильной версии сайта

Превратить обычное объявление в мобильное можно с помощью встроенных инструментов «Директа». Добавив его в группу к «десктопным», оно будет отображаться на смартфонах, в то время как остальные будут выводиться как и прежде. Постарайтесь «оптимизировать» заголовок, выкинув из него все лишнее. Если есть возможность указать url на “m. ” поддомене – сделайте это.
При создании быстрых ссылок необходимо использовать не более 2 слов. Кроме того, вы можете добавить «виртуальную визитку», с помощью которой потенциальный клиент получит возможность перезвонить на номер «горячей линии» прямиком из поисковой выдачи.