seo

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

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

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

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

У Google это    https://search.google.com/search-console/mobile-friendly

У Yandex   https://webmaster.yandex.ru/   Раздел - Инструменты - Проверка мобильных страниц

Очень советую проверить свой блог.

Например, в предыдущей статье я показывала весь процесс проверки шаблона на своем "кофейном" блоге. И результаты были просто отличными. Но при проверки в Вебмастере Гугла, выяснилось, что этот сайт не адаптирован к мобильным устройствам. А Яндекс оценил его на отлично. Я не буду сейчас давать скрины моей проверки - все Вы сможете увидеть в видео этой статьи.

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

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

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

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

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

Для этого в первую очередь надо вписать между тегами <head> </head> шаблона Вашего сайта мета строчку

Для этого в файле редактора - Заголовок внесите ее сразу после тега <head>  На моем кофейном сайте это выглядит так

вьюпорт

А теперь три условия, которые и дают адаптивность шаблону

  1. Резиновая или гибкая сетка.
    Все сайты верстаются по принципу сетки. Так вот она должна быть не статичной, а отзывчивой. То есть реагировать на ширину дивайта, на котором отображается. Для этого в файле стилей CSS размер ширины сайта указывается ни в пикселях, а в процентах;
  2. Гибкие шрифты
    Точно так же гибко должны отображаться и шрифты Вашего сайта. Для этого используется размерность опять же не в px, в em. Это размерность высчитывается относительно максимального размера шрифта к стандартному - 16 px. В этом случае размер шрифта будет так же реагировать на изменения мобильного устройства
  3. Медиа запросы
    Суть данного способа - это создание определенных макетов под определенные размеры мобильных устройств. Только в этом случае Ваш сайт будет правильно отображаться на различных устройствах

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

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

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

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

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

Обратите внимание в первых двух строках на  background-color: #FBFBFB; для области контента и сайтбара. Это кодировка цвета фона.

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

Ну, что же. На этом сегодня закончим.

Комментарии 1

  • Ирина! Актуальная проблема для нынешнего сайта.
    Благодарю, за понятную инструкцию!

Добавить комментарий