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

Адаптивный дизайн сайта главным образом влияет не только на удобство просмотра для пользователей, но и непосредственно на позиции сайта в поисковой выдаче по ключевым запросам. Как это происходит и почему более детально описано в статье
10 советов по seo-оптимизации сайта для Google.

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

Кирилл Филлипов — Автор канала Domocash

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

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

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

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

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

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

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

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

Кирилл Филлипов — Автор канала Domocash

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

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

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

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

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

Иногда стили заключают непосредственно в тело документа, но смысла это не меняет.

CSS уже достаточно давно поддерживает распознавание и разделение свойств элементов в зависимости от разрешения дисплея, а реализуется это с помощью media-запросов.

Кирилл Филлипов — Автор канала Domocash

Медиа запросы (media queries)

Давайте рассмотрим на примере:

• Текстовый блок 1
• Текстовый блок 2

CSS: .box{ width: 49%; height: 10em; background: orange; display: inline-block; line-height: 10em; text-align: center; } @media screen and (max-width: 736px){ .box{ width:100%; display:block; margin:1em 0; } }

Оба блока у нас имеют одинаковый класс (box) и являются идентичными. При просмотре с компьютера или ноутбука будет применяться основной стиль (.box) описанный без медиа-запроса, в результате мы получим 2 блока шириной по 49% дисплея (width:49%) и располагающиеся на одной строке (display: inline-block;):

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

@media screen and (max-width: 736px){ .box{ width:100%; display:block; margin:1em 0; } }

В результате чего к элементам будут применены стилевые свойства описанные в этом правиле, а именно:

• ширина каждого блока 100% дисплея (width:100%;),
• блочная ориентация (display:block;)
• отступы сверху и снизу по 1 строке (margin:1em 0;):

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

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

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

Рассмотрим наиболее популярный из них, любимый многими и мною в том числе.

Bootstrap

Bootstrap — полностью бесплатный, современный и открытый фреймворк HTML, CSS, JS. Его применение ускоряет разработку сайта в несколько раз без потери качества, а чаще наоборот уберегает от неточностей и ошибок. Если Вы не знакомы с терминами вроде фреймворк, шаблонизатор и т.д. и слово Bootstrap Вам не говорит абсолютно ничего — не переживайте, сейчас объясню все простым языком.

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

Кирилл Филлипов — Автор канала Domocash

Если Вы начинающий разработчик или хотите заниматься своими проектами не углубляясь в вэб-дизайн с головой, Вам намного проще будет выучить элементы описанные в Bootstrap, чем изначально изучать все свойства Css, Js, Html.

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

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

Подключив bootstrap и выучив необходимые для Вас элементы (все это можно найти в документации) Вы можете создать 3 блока, задав им уже описанные классы, допустим:

В результате Вы уже получите полностью адаптивные стандартизированные блоки, добавить необходимые свойства которым так-же можете задать цвет: (background:#f00).

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

Основные рекомендации

• Старайтесь всегда делать адаптивный дизайн с помощью стилей, по-скольку помимо удобства это так-же играет важную роль в ранжировании сайта в поисковой выдаче.
• Не прибегайте к мобильной версии сайта (m.domain.com) без крайней необходимости. Все инструменты для адаптации дизайна являются бесплатными довольно простыми в освоении, одновременно с этим современными и логичными.
• Если Ваша цель — быстрое создание сайта для собственных задач, а не изучение веб-дизайна и разработки с нуля — воспользуйтесь фреймворками и популярными CMS. Это сильно облегчит Ваши задачи.

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