Мобильная версия сайта

мобильная версия сайта

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

Адаптация сайта и контента для пользователей мобильных устройств крайне важно!

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

  1. Адаптивный дизайн;
  2. Отдельная мобильная версия сайта;
  3. Responsive Web Design.

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

Что такое адаптивный дизайн и с чем его едят

Такой способ верстки позволяет создать ресурс, который будет подстраиваться под конкретное разрешение экрана. На устройствах с разным экраном пользователь увидит одну и ту же страницу, но отображаться она будет по разному! Реализуют адаптивную верстку с помощью CSS3 Media Queries.

Преимущества адаптивного дизайна

  • удобная разработка. Сайт с адаптивной версткой автоматически определяет разрешение экрана и подстраивается под него. Это не требует писать код с нуля – поправляем CSS, HTML. Фреймворки позволяют это делать достаточно легко, для опытного верстальщика;
  • единые изменения. Поменяли текст или фотографию? Она изменится одинаково для любых посетителей с любых устройств. Не нужно тратить время для синхронизации (дублирования) изменений, как в случае, например, с отдельной, мобильной версией сайта.
  • единственный адрес. В этом случае не нужны редиректы, поддомены и тп, а юзеру нет нужды запоминать два урла одного ресурса. К тому же, единый адрес лучше влияет на продвижение сайта.

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

  • Пользователи мобильных устройств своими действиям и поведением отличаются от тех, кто сидит с десктопа. Например, клиента банка будут интересовать только конкретные действия: адрес отделения, банкомат, перевод средств;
  • скорость загрузки. Мобильный интернет зачастую на порядок медленней «домашнего». Это надо учитывать при разработке адаптивной версии, ведь размеры ресурса до сих пор влияют на скорость загрузки. Если продолжить пример банка, то элементы типа роликов, калькуляторов, различной анимации нужно менять на другие;
  • в случае плохого юзабилити сайта, или бага юзеру придётся искать стационарный компьютер, чтобы добраться до нужной информации или же воспользоваться другим ресурсом, а значит вы потеряете посетителя и возможного клиента. Разработчики в этом случае стоят перед выбором: терять посетителя, переделывать дизайн или придумать вспомогательные решения (кукисы, подключение разных стилей);

Отдельная, мобильная версия сайта

Для повышения юзабилити можно создать мобильную версию ресурсов. Эти сайты изначально ориентируются на пользователей смартфонов и планшетов. В большинстве случаев версия является урезанным вариантом основной версии сайта. Из функционала остаётся только тот, который разработчик посчитал полезным для пользователей.

Преимущества:

  • простота переделок. Мобильная версия сайта работает отдельно от главной, поэтому править функционал проще, не рискуя затронуть основной. Тем более, что она не несёт лишних функций;
  • хорошее юзабилити. Упрощение дизайна позволяет разместить весь контент и функции не далеко друг от друга. Пользователю не придётся делать лишних действий;
  • скорость загрузки. Мобильные ресурсы загружаются быстрее, так как изначально сконструирован с учетом соответствующей скорости передачи данных. Этот параметр важен для посетителей, у которых по разным причинам может слабый мобильный интернет;
  • посетители в любой момент могут перейти на основную версию ресурса через опцию браузера или самого ресурса.

Недостатки мобильной версии сайта:

  • разные адреса. URL версий различается незначительно, например m.youbank.ru и youbank.ru. Кому-то это не помешает, а кто-то будет раздражаться. Для разработчиков могут возникнуть проблемы с роботами. Необходимо пользоваться метатегами rel=«alternative» и rel=«canonical». В противном случае контент будет продублирован. Кликнув в поисковой выдаче, юзера сначала направят на главный сайт, потом на мобильную версию. Если такая по какой-то причине отсутствует – появится сообщение об ошибке;
  • ограничений в функционале. Мобильный сайт избавляется от части контента и функций. Иногда версии имеют разные наборы содержимого. Это плохо сказывается на общей картине использования ресурса.
  • плохо для SEO. Хотя об этом всегда спорят, но наше мнение редакции таково, что продвигать нужно один ресурс, а не два, которыми по факту являются основная и мобильная версия сайта, особенно, если на них по большей части одинаковый пользовательский контент.

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

Responsive Web Design

Интересным фактом является использование Гуглом Responsive Design + Server Side. Хотя общепринятым считается факт поддержки гигантом адаптивной верстки. При просмотре кода на разных устройствах видны различия в HTML. Технология свела вёрстку ресурса до уровня создания страниц. В этом случае не нужна верстка и программирование.

Достоинства Responsive Design:

  • позволяет использовать преимущество как мобильной версии, так и адаптивного дизайна. Результат зависит от реализации;
  • минимум трафика. Удаление JavaScript снижает нагрузку на процессор, оперативку и кэш мобильности;
  • использование таргетирования. Если на устройстве стоит Android будет предложено загрузить приложений от Гугл, если iOS – от Apple. Метод позволяет делать верстку под разные устройства.

Недостатки Responsive Design:

  • достаточно сложная разработка. Способ требует настроек сервера и работу хороших программистов. Как правило, делается несколько версток;
  • определение устройства. Механизм, по которому устанавливается принадлежность устройства несовершенен. Фиксируются случаи, когда достаточно редкая модель смартфона не определяется как мобильное устройство.

Если не обращать внимание на минусы, то этот способ – лучше, чем первые два. Но требует больше затрат труда.

Итог

В целом идеального варианта нет. Каждый из способов имеет свои достоинства и явные недостатки, которые подтверждаются работой ресурсов. Некоторые порталы показали себя лучше на адаптивной верстке, другие при использовании мобильной версии. Если разработчика не смущают затраты усилий – то стоит обратить внимание на достоинства Responsive Design Многое зависит от тематики и структуры ресурса. Поэтому выбор способа отображения на мобильных устройствах – это один из важнейших стадий создания сайта, как, например, выбор хостинга!

Удачи вам в сайтостроении!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *