Как оптимизировать сайт под мобильные устройства html

Как оптимизировать сайт для мобильных устройств с помощью PageSpeed Insights

Мы опубликовали на сайте PageSpeed Insights новые рекомендации, которые помогут улучшить сайты для мобильных устройств.

Недостаточная оптимизация может свести на нет все преимущества быстрой загрузки сайта. В среднем загрузка одной страницы на мобильных устройствах длится более 7 секунд, но правильное использование инструмента PageSpeed Insights позволяет значительно сократить это время. Предположим, вам удалось добиться загрузки сайта не за семь секунд, а всего за две. Но какой в этом смысл, если пользователю все равно придется потратить ещё 5 секунд на то, чтобы увеличить размер шрифта и прокрутить страницу до нужного места? Новые рекомендации PageSpeed Insights помогут выявить и устранить подобные проблемы.

Вот список новых рекомендаций:

Настройте область просмотра. Если на сайте отсутствует метатег viewport, современные мобильные браузеры не обнаружат оптимизированную версию страницы и покажут версию для компьютеров. В результате текст на странице может отображаться слишком крупным шрифтом. Оптимизацию сайта для мобильных устройств следует начинать с настройки тега viewport и установки параметра width=device-width.

• мобильный интернет
• скорость загрузки
• любой

• Блог компании Google Developers
• Разработка мобильных приложений

Как адаптировать сайт под мобильные: ТОП-10 способов

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

10 методов, как оптимизировать сайт под мобильные устройства

1. Использование тега Viewport.
2. Отсутствие горизонтальной прокрутки.
3. Крупный размер шрифта.
4. Крупные значки.
5. Контрастный текст.
6. Настройка Gzip-сжатия.
7. Открытые для роботов стили CSS.
8. Быстрая загрузка сайта с мобильных.
9. Всплывающие окна не закрывают контент.
10. Ширина картинок и полей ввода 100%.

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

№1. Использование тега Viewport

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

Где viewport — название тега, device-width — указание, что ширина браузерного окна должна быть равна ширине устройства, а 1 означает необходимость использования оригинального масштаба. Таким образом вы сообщите браузеру, что сами адаптируете контент под размеры гаджета и ему не нужно менять масштаб, чтобы уместить все в область просмотра.

№2. Отсутствие горизонтальной прокрутки

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

№3. Крупный размер шрифта

Вчитываться в мелкий текст на телефоне никто не захочет — особенно люди с проблемами зрения. Адаптировать сайт под мобильные устройства — значит, в том числе, сделать текстовую информацию удобочитаемой. Увеличьте шрифт, чтобы пользователям не приходилось масштабировать страницу или напрягать глаза в попытке различить маленькие буквы. Для iOS-гаджетов стандарт обычного текста — 17pt, для Android — 13sp.

Рекомендуется также оптимизировать высоту строки (примерно 140% от кегля текста). Оптимально, если в длину она будет около 50–60 символов с пробелами.

№4. Крупные значки

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

№5. Контрастный текст

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

№6. Настройка Gzip-сжатия

Как мы уже сказали, оптимизировать нужно не только клиентскую, но и серверную часть. Технология gzip позволяет сжимать контент и целые страницы, чтобы ускорить их передачу браузеру. Настройте ее на своем сервере, чтобы перед отправкой файлы уменьшались в объеме, а после их получения пользователем — восстанавливались до привычного размера. Это рабочий способ адаптировать загрузку сайта под мобильные устройства, ведь так они будут тратить меньше трафика. Gzip-сжатие поддерживают все популярные веб-браузеры, так что проблем с ее внедрением возникнуть не должно.

№7. Открытые для роботов стили CSS

Поскольку сайт адаптируют через файлы стилей (.CSS), нужно, чтобы боты поисковых систем могли их просканировать. Без этого краулеры могут решить, что ресурс не адаптивен, а значит, следует понизить его в выдаче при запросах с мобильных устройств. Правила для индексирующих роботов обычно прописывают в robots.txt. Файл с таким именем находится в корневом каталоге проекта. Если его там нет, создайте новый, впишите туда разрешение на сканирование CSS- и JavaScript-файлов (через директиву allow), а затем загрузите на сервер. Это позволит оптимизировать проект не только для пользователей с гаджетами, но и для разных систем поиска.

№8. Быстрая загрузка сайта с мобильных

Еще одно условие для хорошего адаптива — высокая скорость загрузки (в пределах 2–3 секунд). Как правило, на телефонах контент грузится дольше, чем на компьютерах, поэтому обязательно проверьте время загрузки сайта в специальном сервисе (например, в PageSpeed Insight). Там вы узнаете, какие элементы «съедают» больше всего трафика при открытии с мобильных устройств, и сможете оптимизировать их для улучшения этого показателя. Обычно первым делом адаптируют изображения: сжимают, конвертируют в более легкий формат, уменьшают размер. Графический контент очень много весит, поэтому, оптимизировав его, вы существенно ускорите загрузку и, соответственно, сделаете веб-ресурс более удобным.

№9. Всплывающие окна не закрывают контент

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

Адаптируя проект, следите за тем, чтобы поп-апы занимали менее 50% экрана и легко закрывались. Это также поможет оптимизировать его под поисковые системы — из-за назойливой рекламы боты часто оценивают ресурс, как некачественный.

№10. Ширина картинок и полей ввода 100%

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

.header

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

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

input, textarea

Теперь и изображения, и поля ввода не будут выходить за края экрана.

Заключение

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

Похожие статьи

Как ускорить загрузку сайта: ТОП-10 способов

Скорость работы сайта является одной из важнейших характеристик, по которым оценивают его качество. Если страница быстро загружается, то пользователи не покидают ее сразу. А когда уменьшается процент отказов, налаживаются и поведенческие факторы, что впоследствии приводит к улучшению ранжирования и повышению позиций в поиске. Отсюда увеличение трафика, конверсии и продаж. Между ожиданием и более быстрым ресурсом человек обычно выбирает второе. Чтобы удовлетворить клиентов и роботов, необходимо ускорить загрузку в среднем до 2–3 секунд. Особенно этот показатель важен для посетителей с мобильных устройств. В статье мы дадим десять общих советов о том, как увеличить скорость загрузки сайта.

Самостоятельное SEO-продвижение сайта: инструкция для новичков

Поисковая оптимизация (Search Engines Optimization, SEO) — это процесс улучшения сайта таким образом, чтобы он соответствовал требованиям и критериям качества поисковых систем (ПС). Представительство ресурса в поиске играет важную роль для его продвижения, поскольку именно выдачи Яндекса и Google являются главными источниками органического трафика в рунете. В базах поисковиков хранятся сотни миллионов веб-сайтов, и чтобы попасть на первые страницы результатов ранжирования, оптимизаторы настраивают и продвигают свои проекты самостоятельно. Если этого не делать, сами алгоритмы SE (Search Engine) не поднимут сайт на верхние позиции. В статье говорим о том, как настроить SEO самому за 10 шагов.

Увеличение конверсии сайта: ТОП-10 способов

Конверсия может решать разные задачи, но одинакова важна для сайтов разных типов. Для интернет-магазина — это лиды, продажи и прибыль, для электронных СМИ — база для рассылки новостей и заказ платных подписок. Однако целевых действий не будет, если путешествие по сайту окажется неудобным или карточка товара не убедит пользователя в качестве продукта. Представители профессионального сообщества постоянно обмениваются опытом и делятся советами о том, как увеличить конверсию сайта. Однако универсальной формулы для достижения этой цели нет, ведь то, что принесет конверсию одному сайту, может не сработать для другого. Выбирать инструмент нужно, отталкиваясь от особенностей проекта. Делаем в статье обзор 10 эффективных методов, которые вы сможете протестировать и выбрать для своего веб-ресурса.

Нажмите дважды, чтобы увеличить

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

Мобильная версия сайта — это то, как видит ваш сайт пользователь с мобильного устройства — телефона или планшета.

По данным Statcounter, в мире более половины пользователей ищут что-то в интернете именно с мобильных. Google, в свою очередь, в руководстве для занятых руководителей The Mobile Playbook Google утверждает, что 40% пользователей уйдут на сайт конкурента, если у него есть хорошая мобильная версия. Неслучайно не оптимизированная мобильная версия или ее отсутствие снижает рейтинг интернет-ресурса в поисковой выдаче этого поисковика.

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

Как узнать оптимизирован ли мой сайт под мобильные устройства?

Если ваш сайт адаптирован под мобильные устройства, но вы не уверены правильно ли выполнена оптимизация, воспользуйтесь специальной проверкой от Google. Просто введите URL вашего сайта на сайте бесплатного сервиса Mobile-Friendly Test и нажмите кнопку “Проверить страницу”. Сервис оценить ваш сайт, а также предоставит полезные советы по его улучшению.

Как быстро адаптировать сайт под мобильные устройства

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

Существует два основных способа, как сделать адаптацию веб-сайта под мобильные устройства. Для этой миссии подойдет либо применение адаптивного дизайна, либо создание отдельной мобильной версии сайта на поддомене.

Быстрый адаптивный дизайн сайта

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

1. Знакомство с инструкциями Bootstrap — популярного фреймворка для разработки адаптивных сайтов. Собственно в них и расписаны все последующие шаги.
2. Подключение CSS, а если этого требуют компоненты JS и jQuery.
3. Проверка страниц на соответствие последним стандартами дизайна и разработки, например, используется ли HTML5 и метатег viewport, который отвечает за правильное отображение видимой части страницы на экранах разного размера.

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

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

• Не нужно создавать два отдельных макета. При адаптивном дизайне достаточно одного макета, который автоматически будет приспосабливаться к любым размерам экранов.
• Отсутствие лишней нагрузки на SEO-специалистов: не нужно создавать отдельные ссылки на страницы, так как мобильная версия всегда имеет приставку .m или .mobile; добавлять мета-теги rel=«alternative» и rel=«canonical», объясняющие поисковой системе, что контент в мобильной версии не был украден и продублирован; волноваться о правильно настроенных редиректах между версиями.
• Управление одним сайтом, а не двумя. Если нужно внести изменения, то они автоматически станут видны для пользователей, которые посещают ваш ресурс как с десктопа, так и с мобильных устройств.
• Google любит адаптивные сайты. И вот почему: адаптивные сайты быстрее сканируются роботом Googlebot, а страницы индексируются точнее. Единый URL также удобнее для пользователей. Таким сайтам не нужна переадресация, а это сокращает время загрузки. На адаптивных сайтах не возникает типичных ошибок, как на мобильных сайтах.

Шаблоны и плагины

Сравнительно быстро адаптировать сайт можно с помощью готовых тем (шаблонов) или плагинов. Такая опция не требует технических навыков. Однако доступна она не всем — только владельцам сайтов на отдельных CMS.

Первый вариант — установить специальный плагин для существующей десктопной темы, который преобразует ее под мобильные устройства. Например, на сайтах Joomla с этой задачей справятся плагины Responsivizer и Mobile Joomla, на Drupal сайтах — ThemeKey и MobileTheme. Для WordPress подойдёт WPtouch. А еще не так давно, точнее до марта, 2020 года часто использовался плагин для мобильной оптимизации JetPack. Однако разработчики плагина удалили функцию mobile theme, которая собственно и отвечала за адаптацию сайта под мобильные устройства, объясняя это тем, что “большинство тем теперь по умолчанию включают мобильный дизайн, поэтому в этой функции больше нет необходимости”. Кроме того, они рекомендуют использовать адаптивные темы и не усложнять себе задачу.

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

Чтобы быстро найти и установить шаблон

• В WordPress предварительно найдите и загрузите тему на свой компьютер, перейдите в админпанель, Внешний вид & Темы & Добавить новую.
  Примечание: большой список платных и бесплатных тем можно найти на сайте WordPress.org. Перед скачиванием внимательно прочитайте описание и отзывы, обратите внимание на количество скачиваний.
• В Joomla, панель администратора & Расширения & Менеджер расширений & Загрузить файл пакета.
• В Drupal, предварительно скачайте тему из сайта drupal.org, панель администратора & Оформление & Установить новую тему.

А как быть с магазином на OpenCart?

C OpenCart все немного сложнее. Да, в интернете вы найдете множество адаптивных шаблонов, разработанных специально для этой CMS, однако их не всегда можно применить. Дело в том, что сайт OpenCart состоит из разных функциональных модулей. Как правило, модулей “из коробки” недостаточно для полноценного интернет-магазина. Для этого используются дополнительные кастомные модули, в большинстве случаев не поддерживаемые мобильной темой, в которой предусмотрен лишь стандартный ограниченный функционал. Чтобы OpenCart магазин корректно отображался и работал на разных устройствах можно:

• Разработать отдельный мобильный дизайн, то есть отдельную мобильную версию сайта и настроить на нее редирект, предварительно определяя с какого устройства заходит пользователей (контакта с кодом не избежать).
• Выполнить адаптивную Bootstrup верстку, не разрабатывая отдельный дизайн (макет) для мобильных.

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

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

Обратите внимание! Для того чтобы показать Google, что это не дублированный контент, а мобильная версия сайта нужно использовать специальные метатеги rel=«alternative» и rel=«canonical».

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

Как быстро создать мобильную версию сайта?

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

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

• Высокая скорость загрузки сайта. Так как лишний функционал и элементы с десктопной версии на мобильную не переносятся, это уменьшает нагрузку и повышается скорость загрузки. А последнее позитивно влияет на позиции SEO.
• Юзабилити и SEO. Так как в мобильной версии сайта нет ничего лишнего, что могло бы помешать или отвлечь пользователя (неудобные формы, второстепенные тексты и блоки, кнопки, запутанная навигация) улучшаются поведенческие факторы. Пользовательский опыт влияет на поведенческие метрики, а те, в свою очередь, на ранжирование сайта, то есть “высоту” его позиции в выдаче.
• Гибкость. Отдельная версия означает отдельный код. Вы можете быстро и легко вносить изменения в мобильный сайт, не рискуя что-то сломать в десктопе и наоборот.
• Выбор версии. При наличии мобильной версии сайта пользователь, в случае необходимости, всегда может перейти на полную версию.

ТОП-5 рекомендаций, как улучшить работу мобильного сайта

1. Не игнорируйте скорость загрузки

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

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

Обратите внимание! В идеале скорость ответа сервера не должна превышать 0.2 с. Проверить этот показатель можно в Google Analytics: Поведение & Скорость загрузки сайта & Обзор.

Также проверить скорость загрузки сайта можно в специальном бесплатном сервисе Google PageSpeed Insights или Pingdom Tools.

2. Проверяйте отображение элементов

Не забывайте проверять, как отображаются элементы вашего сайта в мобильной версии, ведь согласно исследованию журналиста Тони Хейла издания Times пользователь, который впервые попал на ваш ресурс решает всего за 15 секунд — остаться или покинуть страницу. Поэтому очень важно, чтобы мобильный сайт был интуитивно понятным и удобным в использовании.

Для этого не забудьте проверить страницу с помощью Mobile-Friendly Test. Не стоит игнорировать советы по оптимизации страницы от поискового гиганта Google, особенно учитывая, что они бесплатны!

3. Придерживайтесь принципов Mobile First

В идеале, при создании сайта, нужно начинать с разработки макета именно под мобильные. Ведь разместить множество элементов на большом экране не так сложно, как на маленьком. Кроме этого, Google ставит в приоритет именно мобильную версию сайта. Чтобы завоевать топовые позиции в выдаче, стоит уделить должное внимание именно адаптации под мобильные устройства. Опять-таки, проверить на сколько ваш сайт оптимизирован под мобильные устройства можно с помощью Mobile Friendly Test.

4. Используйте технологию AMP

Если загрузка сайта длится более 3 сек, половина пользователей покидают его, согласно статистике Google, наведенной Девидом Кикпатриком в статье на портале MarketingDive.

Существенно ускорить загрузку страниц можно с помощью технологии AMP, которая сжимает объем данных страниц, уменьшая его в 8 раз. Эта технология разработана Google с целью повышения скорости загрузки сайтов. В результатах поиска ресурсы, использующие эту технологию, обозначены специальной иконкой-молнией. А также имеют URL с приставкой /amp.

Однако такой метод ускорения страниц подойдет не всем. Дело в том, что пользователь, попадающий на сайт с AMP, автоматически переадресовывается на упрощенную версию, где, скорее всего, не будет ни виджетов, ни раздела комментариев, ни дополнительных блоков, например, “Рекомендованное”, утяжеляющих страницу. Собственно именно так и достигается молниеносная загрузка при AMP.

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

Также стоит обратить внимание на Google AMP Cache — метод, при котором данные сайта сохраняются (изображения, шрифты и т.д.), большие картинки автоматически конвертируются в форматы для мобильных устройств. Такие свойства помогают улучшить производительность сервера, а ваш сайт будет значительно лучше работать на мобильных устройствах.

Итоги

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

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

• Адаптивный дизайн. Если у вас есть навыки веб-разработки или разработчик в штате, вы можете адаптировать десктопную версию таким образом, что она будет автоматически подстраиваться под экраны разного расширения посредством CSS. “Заставить” сайт адаптироваться под мобильные можно с помощью специальных плагинов или адаптивной темы. Для этого не нужны технические навыки. Опция доступна владельцам сайтов на CMS WordPress, Joomla и Drupal.
• Мобильная версия сайта. Если речь идет о большом проекте, портале, крупном интернет-магазине, стоит задуматься о разработке самостоятельной отдельной мобильной версии. Здесь не обойтись без помощи команды разработчиков. Если вы владелец небольшого или среднего e-commerce сайта, блога, сайта-визитки и т. д., можно попробовать преобразовать ваш сайт с помощью специальных конструкторов мобильных сайтов. Навыки программирования не понадобятся.

Как оптимизировать сайт для просмотра на мобильных устройствах?

URL-адрес вашего сайта и его HTML-код не меняются. Сервер отдает мобильному гаджету и десктопному компьютеру одинаковый код, который подстраивается под размеры экрана посредством CSS. Главное – не забыть открыть для индексации поисковыми роботами файлы CSS, JavaScript и изображения. Это – уже вопрос к вашим программистам.

• Как реализовать?

Обычно это делается посредством CSS-фреймворков (bootstrap, responsivegridsystem, Sceleton и пр.) или CSS3 Media Queries, под которые адаптируется существующий дизайн.

• Какой результат?

Сайт, который будет доступен со всех устройств, дизайн будет узнаваем на всех этих устройствах, только элементы будут сдвигаться по вертикали. Некоторые элементы не будут отображаться на мобильных устройствах (и наоборот) либо будут отображаться в более компактном виде.

Отдельный шаблон (динамический показ)

• Как это работает?

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

• Как реализовать?

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

Наиболее известные плагины для движка WP:

• WPTouch
• WordPress Mobile Pack
• WP Mobile Detector
• WP Mobile Edition

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

• Какой результат?

У вашего сайта не меняется URL-адрес (что хорошо с точки зрения SEO и поисковых роботов). Шаблон, правда, будет отличаться немного по дизайну от традиционной, десктопной версии, но это не играет значимой роли.

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

Как это работает?

Если пользователь заходит на ваш сайт с мобильного устройства, то он автоматически перенаправляется на поддомен, а URL-адрес при этом меняется. Самый популярный пример – мобильный «ВКонтакте». Её адрес: m.vk.com. А вот так выглядит один из разделов мобильной версии соцсети:

• Как реализовать?

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

И снова о WordPress. Если у вас сайт на этом движке, то…вам снова повезло. При помощи плагина WP Mobile Edition вы сможете быстро и без особого труда создать мобильную версию на отдельном поддомене.

• Какой результат?

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

Итак, вот 3 способа мобильной оптимизации сайта и их ключевые критерии:

Да, конечно же, наша статья была бы неполной, если бы мы не сказали о таких способах мобильной оптимизации, как создание Турбо-страниц (для Яндекса) и AMP-страниц (для Google). Но вы можете узнать об этом сами, ознакомившись с двумя нашими подробными материалами на эти темы. Поэтому здесь читайте статью про то, что такое Турбо-страницы и зачем они нужны, а здесь – материал про Accelerated Mobile Pages для Google и их преимущества.

Какой способ оптимизации лучше?

Все зависит от того, какой у вас сайт. Вариант с адаптивом применим для любых сайтов. Вариант с шаблоном – аналогично, за исключением, разве что простых сайтов на 1-3 страницы или визиток (это просто нерационально с точки зрения трудозатрат). А вот если у вас большой интернет-магазин, то стоит озадачиться реализацией мобильной версии на отдельном поддомене.

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

Как проверить сайт на дружественность к мобильным устройствам?

В первую очередь оценить свой сайт мы рекомендуем в сервисах поисковых систем:

• Проверка страниц сайта на mobile-friendly в Яндекс Вебмастере
• Проверка страниц на mobile-friendly в Google

Это логично – кто индексирует и ранжирует сайты, тот и определяет, на основе чего это делать. А дружественность к мобильным гаджетам стала одним из факторов ранжирования в выдаче Яндекса и Google.

Пример работы сервиса Google, в котором мы проверили сайт нашей компании. Сюда вводите URL сайта:

А после проверки получаете результат. Мы убедились, что у нас все ОК!

Что касается других сервисов от поисковиков, то не стоит забывать о разделе Fetch and Render в Google Search Console. В нем вы можете посмотреть, как мобильную версию вашего сайта видит при индексации поисковый робот.

Сервисы сторонних разработчиков

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

В нем тоже все просто. Сюда вставляете URL страницы, которую хотите проверить:

А вот так выглядят советы:

Существует много сервисов для визуализации того, как отображается страница сайта в мобильном виде. Но мы порекомендуем вам прекрасный (без всякой иронии!) сервис, под названием iloveadaptive.com.

В нем можно посмотреть, как выглядят страницы вашего сайта на экранах различных моделей мобильных гаджетов. Просто оцените сами (снова на примере нашего сайта):

Главное, о чем вам следует знать, это то, что Яндекс и Google по-разному понимают дружественность к мобильным устройствам. Способ решения этой проблемы довольно простой – наверняка одна из двух поисковых систем для вас приоритетнее, а значит, приоритетны и её рекомендации. Поэтому ниже мы рассмотрим требования к мобильным версиям сайтов у двух популярных поисковиков.

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

Они изложены в отдельном разделе Яндекс Помощи, посвященному созданию сайтов для мобильных устройств и особенностям работы с ними. Рекомендуем вам изучить данный раздел. Что же касается наиболее важных пунктов, то стоит выделить следующее:

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

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

О том, как воспринимает разные версии сайта Google, вы также можете почитать в большом руководстве от поисковой системы. Особое внимание советуем обратить на такие его главы, как:

• Подготовка к индексированию, ориентированному на мобильные устройства
• Распространенные ошибки

Ниже, в таблице, приведена важная информация, касающаяся восприятия разных версий одного и того же сайта роботами Google при индексации:

Далее. В отличие от Яндекса, допускающего разницу в контенте, у Google контент на страницах должен совпадать и там и там. Также обе версии должны иметь структурированные данные и метаданные.

Среди других требований Google, на которые вам надо обратить внимание в первую очередь:

• Открытый доступ для роботов к графическим файлам, JavaScript и CSS
• Контент должен отображаться на мобильных устройствах – в первую очередь, это видео
• Корректная настройка переадресации с обычных страниц на мобильные

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

И о главном: для чего все это нужно?

И вот теперь, рассказав для начала о наиболее важном, можно, подводя итоги, рассказать вам о необходимости наличия мобильной версии.

Начнем с простого. Доля мобильных пользователей неуклонно растет. Доля мобильного трафика в России в 2019 году выросла и составляет 61%, тогда как в прошлом году она была 56%. Причем все больше и больше людей пользуются именно смартфонами – по популярности эти гаджеты подвинули даже планшеты.

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

Если вы думаете, что мобильный пользователь все же зайдет к вам с обычного, настольного ПК, то и тут все не так однозначно. Мобильный юзер юзеру рознь. Дело в том, что если в 2018 году доля пользователей, выходящих в интернет исключительно с мобильных гаджетов, составляла 18% от общего числа пользователей интернета, то на начало 2019 года таких людей уже 35% от общего числа. И такая динамика явно дает нам понять, что это не предел.

Это понимают Google и Яндекс. Так Google сделал мобильную дружественность сайта одним из факторов его ранжирования ещё в 2015 году. А в этом году он пошел дальше – с 1 июля все новые сайты будут по умолчанию индексироваться в поисковой системе с приоритетом под удобство пользования на мобильных гаджетах. Практически одновременно начал учитывать фактор мобилопригодности в ранжировании и Яндекс, объявивший об этом в феврале 2016 года.

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

Улучшение органической выдачи Google

Чем отличается контекстная реклама от таргетированной

Что такое парсинг сайта простыми словами
Появились вопросы?

Специалисты компании «Третий Путь» готовы ответить на все ваши вопросы по продвижению сайта, увеличению звонков и заявок на сайте.
Закажи звонок эксперта — мы свяжемся и ответим на все вопросы.

© Третий Путь – продвижение сайтов в поисковых системах, 2024

Заполняя любую форму на сайте, вы соглашаетесь
с политикой конфиденциальности

Хотите получить пример успешного развития сайта в вашей тематике бизнеса? Позвоним вам для уточнения деталей и пришлем успешные кейсы

Политика конфиденциальности
1. ОПРЕДЕЛЕНИЕ ТЕРМИНОВ

1.1. В настоящей Политике конфиденциальности используются следующие термины:

1.1.1. «Администрация сайта» – уполномоченные сотрудники на управления сайтом, действующие от имени ООО «Третий Путь», которые организуют и (или) осуществляет обработку персональных данных, а также определяет цели обработки персональных данных, состав персональных данных, подлежащих обработке, действия (операции), совершаемые с персональными данными.

1.1.2. «Персональные данные» — любая информация, относящаяся прямо или косвенно к определяемому физическому лицу (субъекту персональных данных).

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

1.1.4. «Конфиденциальность персональных данных» — обязательное для соблюдения Организацией или иным получившим доступ к персональным данным лицом требование не допускать их распространения без согласия субъекта персональных данных или наличия иного законного основания.

1.1.5. «Пользователь сайта (далее Пользователь)» – лицо, имеющее доступ к Сайту, посредством сети Интернет и использующее Сайт Организации.

1.1.6. «IP-адрес» — уникальный сетевой адрес узла в компьютерной сети, построенной по протоколу IP.

1.1.7. «Cookies» — небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя, который веб-клиент или веб-браузер каждый раз пересылает веб-серверу в HTTP-запросе при попытке открыть страницу соответствующего сайта.

2. ОБЩИЕ ПОЛОЖЕНИЯ

2.1. Порядок ввода в действие и изменения Политики конфиденциальности:

2.1.1. Настоящая Политика конфиденциальности (далее – Политика конфиденциальности) вступает в силу с момента его утверждения приказом Руководителей Организации и действует бессрочно, до замены его новой Политикой конфиденциальности.

2.1.2. Изменения в Политику конфиденциальности вносятся на основании Приказов Руководителей Организации.

2.1.3. Политика конфиденциальности персональных данных действует в отношении информации, которую ООО «Третий Путь» (далее – Организация) являясь владельцем сайтов, находящихся по адресам: 3put.ru, а также их поддоменах (далее – Сайт и/или Сайты), может получить от Пользователя Сайта при заполнении Пользователем любой формы на Сайте Организации. Администрация сайта не контролирует и не несет ответственность за сайты третьих лиц, на которые Пользователь может перейти по ссылкам, доступным на Сайтах.

2.1.4. Администрация сайта не проверяет достоверность персональных данных, предоставляемых Пользователем.

2.2. Порядок получения согласия на обработку персональных данных и их обработки:

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

2.2.2. В случае несогласия с условиями Политики конфиденциальности и отзывом согласия на обработку персональных данных Пользователь должен направить на адрес эл. почты и/или на почтовый адрес Организации заявление об отзыве согласия на обработку персональных данных.

2.2.3. Согласие Пользователя на использование его персональных данных может храниться в Организации в бумажном и/или электронном виде.

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

2.2.5. Обработка персональных данных Пользователя без их согласия осуществляется в следующих случаях:

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

2.2.6. Кроме персональных данных при посещении Сайта собираются данные, не являющиеся персональными, так как их сбор происходит автоматически веб-сервером, на котором расположен сайт, средствами CMS (системы управления сайтом), скриптами сторонних организаций, установленными на сайте. К данным, собираемым автоматически, относятся: IP адрес и страна его регистрации, имя домена, с которого Пользователь осуществил перехода на сайты организации, переходы посетителей с одной страницы сайта на другую, информация, которую браузер Посетителя предоставляет добровольно при посещении сайта, cookies (куки), фиксируются посещения, иные данные, собираемые счетчиками аналитики сторонних организаций, установленными на сайте. Эти данные носят неперсонифицированный характер и направлены на улучшение обслуживания Пользователя, улучшения удобства использования сайта, анализа посещаемости. Эти данные собираются автоматически, отправку этих данных Пользователь может запретить, отключив cookies (куки) в браузере, в котором открывается сайт.

2.2.7. Порядок обработки персональных данных:

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

3. ПРЕДМЕТ ПОЛИТИКИ КОНФИДЕНЦИАЛЬНОСТИ

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

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

3.2.1. фамилию, имя, отчество Пользователя.

3.2.2. контактный телефон Пользователя.

3.2.3. адрес электронной почты (e-mail).

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

4. ЦЕЛИ СБОРА ПЕРСОНАЛЬНОЙ ИНФОРМАЦИИ ПОЛЬЗОВАТЕЛЯ

4.1. Персональные данные Пользователя Администрация сайта может использовать в целях:

4.1.1. Установления с Пользователем обратной связи, включая направление уведомлений, запросов, касающихся использования Сайта, оказания услуг, обработка запросов и заявок от Пользователя.

4.1.2. Осуществления рекламной деятельности с согласия Пользователя.

4.1.3. Регистрации Пользователя на Сайтах Организации для получения индивидуальных сервисов и услуг.

4.1.4. Совершения иных сделок, не запрещенных законодательством, а также комплекс действий с персональными данными, необходимых для исполнения данных сделок.

5. СПОСОБЫ И СРОКИ ОБРАБОТКИ ПЕРСОНАЛЬНОЙ ИНФОРМАЦИИ

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

5.2. При утрате или разглашении персональных данных Администрация сайта информирует Пользователя об утрате или разглашении персональных данных.

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

6. ОБЯЗАТЕЛЬСТВА СТОРОН

6.1. Пользователь обязан:

6.1.1. Предоставить информацию о персональных данных, необходимую для пользования Сайтом.

6.1.2. Обновить, дополнить предоставленную информацию о персональных данных в случае изменения данной информации.

6.2. Администрация сайта обязана:

6.2.1. Использовать полученную информацию исключительно для целей, указанных в п. 4 настоящей Политики конфиденциальности.

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

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

6.2.4. Осуществить блокирование и/или удаления персональных данных, относящихся к соответствующему Пользователю, с момента обращения или запроса Пользователя или его законного представителя либо уполномоченного органа по защите прав субъектов персональных.

7. ОТВЕТСТВЕННОСТЬ СТОРОН

7.1. Администрация сайта, не исполнившая свои обязательства, несёт ответственность в соответствии с действующим законодательством Российской Федерации, за исключением случаев, предусмотренных п.2.5. и 7.2. настоящей Политики

7.2. В случае утраты или разглашения Конфиденциальной информации Администрация сайта не несёт ответственность, если данная конфиденциальная информация:

7.2.1. Стала публичным достоянием до её утраты или разглашения.

7.2.2. Была получена от третьей стороны до момента её получения Администрацией сайта.

7.2.3. Была разглашена с согласия Пользователя.

8. РАЗРЕШЕНИЕ СПОРОВ

8.1. До обращения в суд с иском по спорам, возникающим из отношений между Пользователем сайта и Администрацией сайта, обязательным является предъявление претензии (письменного предложения о добровольном урегулировании спора).

8.2. Получатель претензии в течение 30 календарных дней со дня получения претензии, письменно уведомляет заявителя претензии о результатах рассмотрения претензии.

8.3. При не достижении соглашения спор будет передан на рассмотрение в судебный орган в соответствии с действующим законодательством Российской Федерации.

8.4. К настоящей Политике конфиденциальности и отношениям между Пользователем и Администрацией сайта применяется действующее законодательство Российской Федерации.

9. ДОПОЛНИТЕЛЬНЫЕ УСЛОВИЯ

9.1. Администрация сайта вправе вносить изменения в настоящую Политику конфиденциальности без согласия Пользователя.

9.2. Новая Политика конфиденциальности вступает в силу с момента ее размещения на Сайте, если иное не предусмотрено новой редакцией Политики конфиденциальности.

9.3. Действующая Политика конфиденциальности размещена на страницах сайтов находящихся по адресам: 3put.ru, а также на их поддоменах.