Поделиться:

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

Опубликовано 8 ноября 2017

Чтобы получить трафик с мобильного поиска, можно адаптировать сайт под мобильные устройства следующими способами:

  • Адаптивный дизайн – это верстка, которая автоматически подстраивается под ширину экрана. Не нужно писать верстку с нуля, достаточно подкорректировать CSS и HTML. Адрес страницы остается неизменным.
  • RESS объединяет адаптивный дизайн и мобильную версию. В этом варианте сайт автоматически определяет ширину экрана и операционную систему, через которую зашел пользователь. Технически это сложно и дорого реализовать, и не каждый специалист возьмется за RESS. Какой из вариантов лучше, однозначно ответить нельзя. У каждого решения есть свои плюсы и минусы – поговорим о них подробнее.
  • Мобильная версия

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

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

  • Не требуется прокрутка страницы. Чем больше нужно прокручивать страницу горизонтально, тем меньше шанс, что пользователи станут это делать.
  • Тачскрин. Чтобы удобнее было просматривать сайт, пользуясь тачскрином. Если пользователям будет неудобно, долго на странице они не задержатся.
  • Корректная работа функционала. На многих сайтах без мобильной версии невозможно даже добавить товар в корзину, если вы зашли не с компьютера. Если вы продаете уникальный товар, который есть только в вашем каталоге, может быть, пользователи включат ПК, чтобы сделать покупку, но намного вероятнее, что поищут интернет-магазин с версией для мобильных устройств.
  • Создание функционала под целевую аудиторию. Можно предусмотреть дополнительные возможности для владельцев мобильных устройств: определение ближайшей точки офлайн-продаж, отправку смс со страницы магазина и многое другое.
  • Быстрая загрузка. Страницы быстрее загружаются на смартфонах, а пользователям не приходится переплачивать за интернет.
  • Мобильный поиск. Для ранжирования в поисковых системах для смартфонов и планшетов используются специальный мобильный поиск, в связи с этим переходов на ваш ресурс будет больше.

Чтобы проверить отображение мобильной версии сайта и оценить ее качество можно воспользоваться следующими сервисами:

  • Google Mobile Friendly
  • Responsinator
  • Ipadpeek
  • Screenfly

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

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

  • Быстрая работа. Шаблон оптимизирован под смартфоны и планшеты, а потому не подгружает ненужные функции. С отдельной версией можно добиться высокой скорости загрузки даже при плохой связи. Пользователи это оценят.
  • Удобство. Верстка, изначально разработанная под смартфон и планшет, а значит информацию и кнопки не нужно долго искать.
  • Простота доработки и устранения багов. Если придется вносить изменения, перед глазами программиста будет только код мобильной версии, и ему не придется выискивать нужные фрагменты в общем коде. Изменения не затронут десктопный вариант.
  • Возможность переключения между версиями. Если по какой-то причине пользователю потребуется десктопный вариант страницы, он легко переключится между версиями.

Но у такого сайта для мобильных устройств будут и недостатки:

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

Как видите, недостатков немного, и все они решаемые.

Адаптивный дизайн

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

Преимущества и недостатки мобильной адаптации сайта:

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

  • Простота создания. В отличие от новой версии, дизайн проще разработать. Вы за один раз создаете сразу несколько версий, а если готовая десктопная верстка уже есть, остается только воспользоваться медиа-запросами, чтобы получить адаптив под меньшие разрешения экранов. Это намного дешевле и быстрее, чем заказывать новый вариант сайта.
  • Один url. Независимо от того, как будет меняться верстка, адрес останется неизменным. Это не просто удобно, но также упрощает SEO.

Недостатки

  • Долгая загрузка сайта Страницы будут долго загружаться, потому что устройству придется грузить весь HTML и CSS-файлы. То есть сайт на смартфоне будет загружаться даже медленнее, чем через ПК. Загруженная страница может выглядеть проще и легче десктопной версии, но это не имеет значения, поскольку смартфон или планшет будут загружать полную и мобильную версию верстки одновременно.
  • Сложность устранения багов Все версии дизайна находятся в одном документе, поэтому разобраться в коде сложнее, чем в коде мобильной версии.
  • Пользователи не могут самостоятельно выбрать версию.Единственный способ увидеть десктопную версию – зайти на сайт с компьютера или ноутбука. Если пользователю понадобится полная версия, без правок верстки, он не сможет ее увидеть с мобильного устройства. Поэтому перед верстальщиками всегда стоит дилемма: немного обрезать функционал и сделать его полностью недоступным для владельцев смартфонов или сохранить функционал в ущерб красоте и удобству.

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

Responsive Design + Server Side

Последнее, о чем стоит упомянуть подробно, – RESS (Responsive Design & Server Side). Хотя RESS считается самым прогрессивным подходом к получению трафика с мобильных устройств, его сложно назвать лучшим решением. Даже если бы это был идеальный способ создать сайт под смартфоны или планшеты, вам было бы непросто прибегнуть к нему: отыскать специалиста, который сделает RESS, сложно и дорого.

И все-таки у RESS есть, как минимум, два преимущества:

  • Использование таргетирования. Можно сделать верстку для устройств на разных операционных системах и одним предлагать скачивание только с iTunes, а другим – только с Google Play.
  • Минимизировать трафик, удалив ненужные JavaScript.

Что касается недостатков:

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

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

Посмотрите другие полезные материалы