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

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

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

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

У 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; для области контента и сайтбара. Это кодировка цвета фона.

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

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

Related Posts Plugin for WordPress, Blogger...

About Смирнова Ирина

Очень рада приветствовать Вас на своем сайте! Моя задача - помочь начинающим интернет-предпринимателям пройти путь к поставленной цели без потерь. Смело перенимайте мой опыт! УДАЧИ!
Продвижение блога, , Permalink

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

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

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