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

8

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

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

1. Важность оптимизации для мобильных устройств

Рост мобильной активности начался давно: ещё пять лет назад 75% пользователей выбирали мобильный интернет вместо десктопного. По данным Яндекс.Радара в 2019 году этот показатель заметно вырос.

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

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

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

• удобство;
• высокая скорость загрузки страниц;
• простой интерфейс;
• легко вносить правки в разные версии сайта;
• возможность перейти на основную версию.

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

• адаптивность к разным устройствам;
• удобство редактирования сайта;
• настройка переадресации: пользователь автоматически перенаправляется на мобильную версию нужной страницы;
• облегчённый вес страниц.

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

• правильное отображение на всех устройствах;
• минимум лишних элементов;
• единый URL сайта;
• быстрая реализация;
• комфортное пользование сайтом.

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

Теперь расскажу подробнее про адаптивную вёрстку и мобильную версию.

2. Что такое адаптивная вёрстка

Адаптивная вёрстка — адаптация сайта под устройство, с которого пользователь переходит на сайт.

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

Google в первую очередь рекомендует делать акцент на адаптации сайта к смартфонам.

Адаптивная вёрстка избавляет от потребности в создании отдельного домена для мобильной версии, так как используется один адрес. При правильном внедрении адаптивной вёрстки сайт корректно отображается на разных экранах. Функционал сохраняется, но страницы могут дольше грузиться из-за тяжеловесных элементов (скрипты, объёмные изображения, gif-картинки, фильтры, калькуляторы). Чтобы снизить нагрузку, желательно упростить функционал.

Что можно сделать для улучшения адаптивного дизайна:

• адаптировать изображения под размер экрана через параметр CSS;
• масштабировать видео в CSS;
• добавить горизонтальную прокрутку таблиц;
• скрыть длинное описание под кнопками;
• частично скрыть пункты меню либо спрятать все меню под «гамбургером»;

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

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

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

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

Мобильную версию нужно оптимизировать как отдельный сайт. Если понадобится внести правки, редактировать придётся обе версии. Содержать отдельный домен для мобильных более затратно по сравнению с адаптивной вёрсткой основной версии.

Также важно проследить, чтобы основной и мобильный сайт не конкурировали друг с другом. Для этого их свяжите их в панелях вебмастеров Яндекс.Вебмастер и Search Console либо используйте атрибут rel=»alternate».

Для создания мобильной версии можно использовать:

• онлайн-конструкторы. Например, Creambee или Mobirise;
• плагины для CMS. Например, AMP for WP или WPtouch;
• адаптивные темы в WordPress или других CMS.

Мобильная версия создаётся на поддомене или отдельном домене и копирует основной сайт. Чтобы поисковый робот не сканировал дубли страниц, рекомендуется использовать атрибут rel=»alternate»:

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

Детальнее о поисковой оптимизации мобильных сайтов читайте в справке Google.

4. Проверка оптимизации сайта для мобильных

Проверить отображение сайта на смартфоне можно вручную: полистать меню, посмотреть видео, оценить скорость загрузки страниц с точки зрения пользователя. Для проверки на других моделях телефонов можно использовать онлайн-сервисы. Например, Mobile Phone Emulator или Responsinator.

Статистика об отображении сайта на мобильных доступна в панелях вебмастеров Яндекс и Google. Пример из Search Console:

Пример из Яндекс.Вебмастер:

У Google также есть специальный сервис Mobile-Friendly для тестирования мобильной версии.

Ещё один сервис ThinkWithGoogle, аналог PageSpeed Insights, который проверяет скорость загрузки сайта для мобильных устройств.

Подводим итоги

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

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

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

Какому методу оптимизации для мобильных устройств вы отдаёте предпочтение и почему? Делитесь в комментариях.

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

Одна из тенденций 2018 года — массовый переход на мобильные устройства.

Действительно, очень многие пользователи интернета переходят на мобильные гаджеты (смартфоны, планшеты). С мобильных устройств люди ищут информацию, делают покупки, читают новости. Логично, что совсем скоро Google, а затем и Яндекс при ранжировании начнут отдавать предпочтение сайтам, максимально адаптированным под мобильные устройства.

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

Особенности мобильной оптимизации

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

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

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

Мобильная версия — при заходе с мобильного устройства происходит перенаправление пользователя на поддомен. В качестве имени поддомена обычно используют варианты: m.sitename.com, mobile.sitename.com, pda.sitename.com и пр. Сервер определяет тип устройства и перенаправляет на нужную страницу. Для разных типов устройств используются разные варианты кода и разные URL страниц.

Плюсы такого подхода:

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

Минусы:

• использование дополнительных URL;
• дублирование контента и возможность появления ошибки 404;
• ограничение доступа к нужному контенту из-за упрощения функционала.

Вынос мобильной версии на поддомен подойдет для интернет-магазинов, каталогов, интернет-порталов, социальных сетей.

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

Плюсы:

• ненужные JavaScript можно удалить из HTML;
• можно настроить для каждого устройства свою верстку и свои приложения.

Минусы:

• сложности при разработке;
• вероятность ошибки при определении типов мобильных устройств (если это какой-то редкий телефон, на нём будет отображена десктопная версия сайта).

Подойдет для информационного сайта, блога, форума, для интернет-магазинов.

Адаптивный дизайн — когда URL и код не изменяются. Сервер отдаёт всем устройствам (и мобильным, и десктопным) одинаковый HTML-код, который адаптируется в зависимости от размеров экрана с помощью CSS. В этом случае, нужно проследить, чтобы были открыты для индексации нужные файлы CSS, JavaScript и изображения.

Плюсы:

• быстрая реализация;
• простота разработки;
• URL сайта не изменяется.

Минусы:

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

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

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

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

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

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

Поставьте себя на место потенциального посетителя и зайдите на свой сайт с мобильного устройства. Насколько быстро загружаются страницы? Легко ли будет найти на сайте нужную информацию?

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

Рассмотрим несколько характеристик эффективного мобильного сайта:

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

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

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

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

Как сделать адаптивный сайт

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

Как сделать сайт адаптивным на все экраны?

Чтобы сделать сайт адаптивным на мобильное или стационарное устройство, нужно иметь представление о HTML5, CSS3 и JavaScript. Кроме общих знаний, требуется понимать основные принципы адаптивности.

Только с ними можно начинать делать верстку сайта:

1. Поточность — принцип отсутствия смещения информационных блоков во время просмотра сайта с мобильного устройства.
2. Относительность в измерении — принцип использования относительных единиц для установки размеров и координат верхней и нижней границы блока экрана ПК и дисплея смартфона.
3. Применение контрольных точек — принцип расположения элементов для разных экранов во избежание сдвига содержимого страниц сайта.
4. Принцип грамотного использования минимальных и максимальных значений. К примеру, если экран имеет ширину меньше 1000 пикселей, то контент размещают на весь экран. Иначе максимум ширина будет достигать 1000 пикселей.
5. Принцип вложенности объектов для предотвращения сложностей контроля за разными элементами сайта. Можно вложить их в один контейнер. Требуется для тех блоков, которые не нужно адаптировать под экран — кнопки с логотипами и др.
6. Использование одинаковых шрифтов во избежание перегрузки сайта.
7. Правильное применение растровой с векторной графикой. К примеру, если картинка состоит из множества деталей, следует делать ее в растровом формате и, наоборот, если она одна, то лучше использовать векторный формат. Однако стоит помнить о сжатии. Каждая картинка должна быть оптимизирована под новые браузеры.
8. Соблюдение макетных размеров и общих стандартов верстки сайта. Стандартными принято считать следующие разрешения, при которых не происходит смена дизайна и неправильное отображение сайта:
   • для мобильных устройств – 320px, 480 px;
   • для планшетных компьютеров – 768px;
   • для нетбуков с некоторыми планшетами – 1024px;
   • для ПК – 1280px и больше.

Видео инструкция: Как сделать адаптивный сайт в фотошопе.

Что менять в HTML и CSS коде?

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

Адаптивную верстку начинают с создания контейнера для упаковки картинки. Выглядит это следующим образом:

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

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

В целом получаем готовый шаблон для одной картинки на сайт. Чтобы сделать мини-галерею прописываем следующие коды в HTML структуру:

Так загрузили четыре картинки на сайт. В следующем шаблоне придадим картинкам адаптивность с небольшим отступом:

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

Адаптивное меню

Чтобы сделать адаптивное меню, вначале нужно добавить мега тег meta viewport в раздел шапки. Этот тег нужен, чтобы меню корректно отображалось на любом экране.

Затем добавляем структуру меню по образцу ниже.

Дополнительная седьмая ссылка меню нужна для адаптации сайта под любое мобильное устройство. Далее добавляются стили в body. Это только для декоративных целей. Цвет можно использовать любой. Для примера возьмем бежевое меню. Под body добавляется тег nav. Он позволит сделать навигацию сайта. В этом теге размещаем основные ссылки меню.

Поскольку основных ссылок – 6 штук, то контейнер будет обладать шириной в 600 пикселей, а каждая ссылка – по 100 пикселей. Смотрите ниже.

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

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

Адаптивная шапка сайта

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

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

В конце нужно сделать созданную шапку сайта адаптивной. Для этого нужно применить свойства justify-content со значением space-between.

В целом, работа окончена. Проверить итог работы можно через удобный сервис Google Mobile Friendly.

Гибкие изображения и видео

Сделать изображения с видео гибкими и адаптивными можно с помощью разных способов. Чтобы не использовать сложный атрибут srcset, рассмотрим примеры настройки картинок и видео через CSS. Для базового расположения одиночных картинок с записями или видео, нужно прописать следующую html и css структуру. Здесь элемент обозначения картинки уже будет адаптивным.

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

Что касается трехколоночного макета, структура кодов остается такой же. Следует только выбрать ширину сформированного базового контейнера не трех изображениях или видео. Для этого нужно поставить показатели ширины картинок примерно 1/3 ширины контейнера:

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

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

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

Как сделать адаптивный фон

Чтобы установить адаптивный фон, следует проделать ряд простых шагов:

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

Адаптивный сайт на Тильде

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

Подробнее про адаптивность и отзывчивость дизайна сайта.

Преимущества Тильды заключаются в следующем:

1. Интуитивно понятный интерфейс для новичков и профессионалов.
2. Быстрое и простое редактирование текста (нужно кликнуть на него два раза).
3. Быстрая загрузка любого изображения или видео.
4. Множество заранее созданных шаблонов дизайна сайта на любой вкус.
5. Быстрая работа стандартных блоков, позволяющих редактировать и добавлять информацию, изображения или видео так, как захочется. Причем можно загрузить как обложки с цитатами, так и тарифы с этапами работ.
6. Широкий типографический ассортимент и огромная коллекция шрифтов с пятью настройками жирности текста.
7. Большое количество адаптированных блоков под мобильные устройства, в том числе и таблиц.
8. Простая и быстрая настройка отступов между картинками, таблицами и другими объектами.
9. Возможность без сложностей настроить seo-оптимизацию на сайт, чтобы любой поисковик смог правильно индексировать страницу.
10. Круглосуточная работа справочного центра, техподдержки и колл-центра.

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

Работа с Adobe Muse

Как и Тильда, Adobe Muse является еще одним удобным и современным конструктором начинающего и опытного вебмастера. Он позволяет сэкономить много времени на адаптивности. Все, что требуется от вебмастера, – поработать в редакторе с интерфейсом, а коды сгенерирует система.

Преимущества работы с Adobe Muse следующие:

1. Возможность сделать шаблон сайта без сложностей;
2. Упрощенное создание адаптивного сайта (стандартный сайт можно сделать за 2 часа);
3. Широкий функционал интерфейса;
4. Понятная и быстрая работа с HTML5 и CSS3.

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

Проверка адаптивности сайта

Чтобы проверить настройку адаптивности сайта и его правильного отображения на всех устройствах, можно воспользоваться браузером или специальным сервисом Google Mobile Friendly (Google Search Console).

Браузером Google проверку можно сделать, зажав F12 и выбрав в меню «Дополнительные инструменты» и «Инструменты разработчика». Через Mozilla Firefox сделать это можно также: F12 -> Меню -> Разработка -> Адаптивный дизайн.

Через сервис Google можно проверить адаптивность по ссылке https://search.google.com/test/mobile-friendly.

В целом, сделать адаптивным сайт несложно. Главное – понимать принципы адаптивности и уметь правильно выставлять базовые интернет-настройки для ее создания.

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

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

1. Согласно исследованиям, большинство посетителей заходят на сайты с мобильных устройств. В 2018 году их количество составило 52%.
2. Удобство использования проекта на мобильных гаджетах повышает лояльность аудитории и уменьшает количество отказов.
3. Адаптивная версия увеличивает количество потенциальных клиентов и повышает продажи.
4. Для поисковых систем адаптивность к мобильным устройствам — один из факторов ранжирования.

• удобство всех элементов навигации, чтобы посетители могли на них с легкостью нажимать вне зависимости от разрешения устройства;
• использование только вертикальной прокрутки, простая опция поиска, меню перехода на главную страницу;
• отдельная карта сайта (в случае реализации мобильной версии), содержащая все те же страницы, что и основной сайт;
• удобство при заполнении форм и простота совершения всех конверсионных действий;
• структурированность текста для быстрого восприятия — наличие заголовков, разделов, маркированных списков и визуального контента;
• высокая скорость загрузки мобильных страниц. Проверить скорость можно посредством Google PageSpeed Insights;
• отсутствие элементов, работающих на Flash-технологии, всплывающих окон и рекламы;
• адаптивность размера изображений и видеоматериалов — в случае с видео поддерживается YouTube;

• разметка телефонного номера <a href=»tel:+**********»>8 (***)***-**-**</a>, функция удобного набора номера с сайта при клике на контактный номер телефона;
• чтение текста на любом элементе без затруднений.

1. Адаптивный дизайн — оптимальное решение для небольших ресурсов, таких как лендинги, сайты-визитки, блоги, сайты услуг.

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

Рассмотрим эти варианты подробнее.

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

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

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

Для настройки подойдут CSS-фреймворки — например, bootstrap, в котором можно оптимизировать сайт для мобильных устройств либо использовать медиа-запросы (CSS3 Media Queries).

Рассмотрим детальнее Bootstrap:

В данный популярный инструмент включены следующие компоненты:

• HTML и CSS-шаблоны;
• сетка;
• типографика;
• блоки навигации;
• веб-формы;
• кнопки;
• JavaScript-расширения.

1. Подключим к проекту файлы CSS, а также при необходимости — jQuery и JavaScript.
2. Проверим ресурс на соответствие последним стандартам веб-разработки: должен использоваться HTML5 и метатег viewport, предназначенный для контроля размера окна просмотра и масштаба страницы.
3. При сложностях с такими программами как, например, Google Maps, нужно переопределить box-sizing: border-box для необходимого виджета.
4. В код нужно добавить предопределенные классы Bootstrap Grid или использовать препроцессоры Sass для создания собственной разметки.

Подобных сервисов — десятки. В данной статье мы рассмотрим Wirenode — простой в использовании конструктор мобильных сайтов, бесплатный для персонального использования. Позволяет создать мобильную версию блога на отдельном домене, при условии, что на ресурсе есть RSS-лента.

Тарифы Wirenode предусматривают бесплатное использование для создания одного сайта:

После заполнения полей, выбора типа аккаунта и введения капчи нажмем «Create my account».

Инструмент предлагает создать новый моб. сайт при наличии на нем RSS-ленты. После ввода URL-адреса ресурса нажмем «Mobilize Blog»:

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

Чтобы выбрать тему с адаптивным дизайном для собственного проекта, перейдем в подраздел «Темы» раздела «Внешний вид» и нажмем «Добавить новую»:

Также для Wordpress можно использовать следующие плагины:

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

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

Установим и активируем плагин, затем перейдем к его настройке — для этого зайдем в подраздел «Settings» раздела «AMP». Загрузим логотип и сохраним изменения, нажав «Save changes»:

После выбора темы можно изменить цвета и шрифты в разделе «Global», настроить хэдер и футер, например, добавить кнопку звонка во вкладке «Header». В разделе «Social» можно добавить кнопки социальных сетей.

После завершения настройки активируем в разделе «Advance Settings» перенаправление на AMP-версию сайта для мобильных устройств:

Помимо указанных, можно использовать следующие плагины:

— конструктор для создания адаптивного дизайна:

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

— позволяет создавать мобильную версию на субдомене:

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

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

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