Поделиться:

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

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

В 2016 году число обращений к интернету с Android и iOS впервые превысило трафик с персональных компьютеров. Компания StatCounter зафиксировала 51,3% запросов со смартфонов и планшетов. Процент мобильного трафика зависит от многих факторов: в Индии он составляет 75%, в США на долю смартфонов и планшетов приходится 42% запросов, в Великобритании – 44,4%. В России чаши весов все еще склоняются в пользу ПК, а трафик со смартфонов оценивают приблизительно в 20%, но эта цифра постоянно растет. Вместе с ней повышается интерес к мобильным версиям сайтов.

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

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

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

Решения для получения мобильного трафика

Чтобы получить трафик с мобильных устройств, можно сделать мобильную версию, адаптивный дизайн или RESS. Что такое версия сайта для мобильных устройств, вы уже знаете. Адаптивный дизайн – это верстка, которая автоматически подстраивается под ширину экрана. Чтобы адаптировать сайт, не нужно писать верстку с нуля, достаточно подкорректировать CSS и HTML. Адрес страницы остается неизменным.

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

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

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

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

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

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

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

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

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

Преимущества адаптивных сайтов:

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

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

Второй недостаток – сложность устранения багов. Все версии дизайна находятся в одном документе, поэтому разобраться в коде сложнее, чем в коде мобильной версии. Хорошо, если у вас есть штатный программист, который поддерживает сайт, он писал дизайн и прекрасно разбирается в своем коде. Тогда трудностей не будет, хотя ему все равно будет не слишком удобно работать. А если штатного программиста нет, или вы сменили специалиста, ему потребуется больше времени и усилий, чтобы устранить баги или отредактировать страницы.

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

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

Responsive Design + Server Side

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

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

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

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

Вы можете заказать разработку мобильной или адаптивной версии сайта, а так же продвижение в мобильном поиске Яндекс и Google по телефону +7 (495) 125-20-11 (или другими, указаны в шапке) или заполнив форму на сайте! Посмотрите цены и тарифы на SEO.

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