Как адаптировать шаблон

https://starper55plys.ru/seo/adaptivnyiy-dizayn-legko/Здравствуйте уважаемые начинающие веб-мастера.

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

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

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

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

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

Для работы с дизайном нам потребуется браузерный веб-инспектор.

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

Веб-инспектор в Ghrome

Первым делом устанавливаем расположение панели. Если оно такое же как показано на рисунке, то оставляем как есть.

Если же расположение вертикальное или в диалоговом окне, то меняем.

Нужное расположение выбирается в меню "Три точки".

При этом панель можно сжать вниз и вытянуть вверх мышью.

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

А это очень важно при создании адаптивного дизайна.

В Mozilla немного по другому.

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

Активация указателя размеров происходит через опцию "Режим адаптивного дизайна".

После её активации на странице появляется вставка с кнопкой регулировки ширины страницы и окном указателя размеров.

Адаптивный дизайн лучше делать в Mozilla, так как в Ghrome была замечена некорректная работа кеша.

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

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

Итак, открываем веб-инспектор и первым делом изучаем структуру нашего сайта.

Смотрим какой блок основной, какие блоки вложены в него и какие вложены во вложенные.

Сделать это очень просто. Обычно панель открывается с основными блоками.

Как видите показаны DOCTYPE, html, head и body id="pag".

DOCTYPE — определяет версию html;

html — основной блок страницы, или экран монитора, планшета, смартфона;

head — блок для служебных тегов, подключений, заголовка;

body id="pag" — основной блок контента с которым нам и предстоит в основном работать.

Первым делом зайдём в тег head (Внешний вид — Редактор — Заголовок (header.php)) и добавим в него мета-тег масштабирования.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Всё, про блок head можно забыть.

Возвращаемся в панель инспектора и смотрим что вложено в тег body.

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

В стилях body нам нужно найти свойство width. В статичных шаблонах оно задано в статичных единицах.

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

Вот пример шаблона, ширина которого задана только в третьем слое — блоке div id="container" (на скрипты пока внимания не обращаем).

Определив где задана статичная ширина идём в файл стилей (Внешний вид — Редактор — Таблица стилей (style.css)), и с помощью поиска (Ctrl+F), находим нужный селектор.

Убираем width:950px; и вместо него прописываем max-width: 1340px;, или какая там у вас ширина экрана.

То есть введём ограничение по максимальной ширине, а минимальная при этом не ограничивается.

Можно задать width: 100%; тогда ваш сайт будет всегда занимать всю ширину экрана.

При таких раскладах по ширине и с мета-тегом viewport, который мы установили в теге head, текст сайта всегда будет смасштабирован по ширине экрана и его больше адаптировать не нужно.

В чём отличие max-width от width: 100%?

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

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

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

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

Нужно только задать margin: auto; первому слою (блоку) после html. Чаще всего это wrapper. Тогда сайт будет по середине.

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

И вот тут начнётся самая интересная, но и самая трудная часть работы.

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

Начнётся полный квардак, называющийся обрушением дизайна.

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

Начинаем помаленьку сжимать страницу, внимательно следя за тем что происходит с дизайном.

Вот, например, стала рушится шапка сайта. Картинка в ней стала обрезаться, а описание полезло на заголовок.

Смотрим при какой ширине экрана начался процесс.

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

@media screen and (max-width: 940px) {}

где

@media — указывает что для определённого типа носителя будут определённые правила;

screen — тип носителя монитор;

(max-width: 940px) — максимальная ширина монитора, на которой будет действовать данное правило;

В фигурных скобках записываются новые стили.

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

Итак, правило записано, посмотрим что в него вносить.

Первым делом сосредоточимся на картинке в шапке сайта.

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

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

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

Нашлась она как и положено в блоке header. Тут же смотрим какой селектор для неё прописан в файле стилей. Видим селектор #branding img со значением display: block.

Копируем #branding img, идём в файл стилей, открытый в отдельной вкладке, вызываем поиск (Ctrl+F), вводим #branding img, и вот он.

Меняем значение block на none.

И смотрим что получилось. Ага, шапка "опустела", а блоки с рекламой уползли вверх.

Так как это не посторонняя реклама, а моя, то эти блоки являются полноценными элементами разметки страницы.

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

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

Для работы с шапкой находим в веб-инспекторе нужные элементы. Это #header, #site-title и #site-description.

Смотрим как называются селекторы, заданные для этих элементов, находим их в файле стилей, копируем, и в таком виде вставляем в правило @media, которое мы создали в конце файла.

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

Наведение красоты в задачу данной стать и не входит, так как сейчас надо только понять принцип создания адаптивного дизайна.

Узнать как находить элементы на странице и манипулировать ими.

Вот для примера мои изменения.

По сути, адаптивный дизайн — это новый дизайн для каждого размера, на котором этот самый дизайн не рушится.

Как только начал ломаться при дальнейшем уменьшении экрана, так на этот размер пишется своё правило, и всё перераспределяется по новой.

Следующее, что скорее всего произойдёт — это сломается горизонтальное меню.

Так как сжать его обычно не удаётся, то ему лучше задать display: none; и вместо него сделать открывающееся меню.

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

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

Ему нужен ответ на конкретный вопрос, который он ввёл в поиск. Поэтому вверх текст с информацией и самое необходимое из сайдбара.

Всё остальное под три чёрточки или три точки. Пользователи уже привыкли к тому, что под ними меню.

Если вы ещё плохо ориентируетесь в свойствах и значениях css, то вот вам ресурс htmlbook.

Просто скопируйте свойство, вставьте в поиск, и выберите там этот сайт.

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

Желаю творческих успехов.

Адаптивный каркас сайта < < < В раздел > > > Адаптивный дизайн — легко

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *