Адаптивная верстка сайта для всех разрешений экрана

Адаптивная верстка — это неотъемлемая часть современной web-разработки. В этом случае дизайн страницы делается так, чтобы подстраиваться под любой экран. 10 лет назад, когда mobile-friendly еще не был придуман, верстальщикам приходилось делать сразу несколько web-страниц, чтобы сайт правильно отображался на десктопе, телефонах и планшетах. К счастью, все это давно в прошлом.

Разновидности верстки

Макеты бывают разными по типу отображения.

• Фиксированный или статический. Дизайн страницы создается под один размер. Все четко, конкретно и просто, но есть недостаток — сайт нормально откроется не на всех экранах, а только на мониторах с заранее известным скрином. К примеру, на смартфоне веб-страница не влезет в браузерное окно.

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

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

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

1. Табличная верстка устарела, хотя элемент table поддерживается HTML5. Поэтому некоторые программисты продолжают использовать табличные данные.
2. Блочная верстка представляет собой каркас, на который через CSS накладывается тот или иной шаблон. Особое значение здесь имеют теги: <div>, <header>, <footer>, <nav> и др.

Как сделать адаптивную верстку сайта

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

Заказать качественную и недорогую адаптацию сайта сайта можно у профессионального разработчика

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

1. HTML5. Нужна для разметки элементов на сайте.
2. CSS3. Каскадные стили, предназначенные для декоративного оформления веб-страниц. При помощи CSS также задаются единицы измерения главных блоков сайта — хедера, боди, футера.

Адаптивная верстка CSS

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

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

Однако на этом верстка не заканчивается, ведь нужно задать предельную ширину для max/min разрешения. В противном случае при изменении типа экрана, изображение потеряет качество. 

Добавляем в код автоматическое свойство margin для внешнего отступа на всех 4-х сторонах элемента. Задаем width в 1000px, максимальную ширину элемента max-width в 90% и минимальную ширину в 50px.

Тем самым грани контейнера вместе с изображением будут меняться только в пределах 500-1000px.

Усложняем задачу — сделаем мини-галерею. Принципы верстки остаются те же. Делаем такой же контейнер, упакованный в <div class=image_gallery>.

В CSS прописываем то же, что и в первом случае.

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

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

Верстаем адаптивный сайт

Используя такой подход, удастся сверстать сайт целиком. По сути, web-страница состоит из 3-х основных элементов — хедера, центрального блока с сайдбарами и подвала. Условно можно задать контрольные точки breakpoints для:

• скрывания шапки;
• помещения сайдбара под контейнер;
• оптимизации элементов верхней части страницы.

Заказать качественную и недорогую адаптацию сайта сайта можно у профессионального разработчика

Должна получиться такая вот страничка.

Теперь нужно доработать раздел <head> — добавить обязательные файлы (библиотеку джава, ссылки на применяемые шрифты). Чтобы не прописывать префиксы Chrome, Safari и т. д, добавляем плагин PrefixFree.

Также нужно разместить в <header> необходимые элементы — лого, верхнее меню, поиск.

Блок с оглавлением статьи обертываем в <article>.

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

Отдельная работа должна проводиться по медиа-запросам. Они помогут улучшить отображение сайта на экранах с минимальным разрешением. Другими словами, это правила адаптации для каждой возможной ширины экрана. А их бывает, как известно, несколько — вот эти самые важные. Рекомендуется все их прописать через @media screen и внести правила элементов для каждого разрешения.

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

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

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

Первым делом нужно вставить между тегами <head></head> следующий код.

А также прописать в CSS файле строку с правилом (медиа-запросом) для мобильных экранов (1440-1599px).

Вообще, в адаптивной верстке все завязано на единицах измерения. К примеру, ширина вашего сайта составляет 1000 пикселей. Если его откроют со смартфона, то появится горизонтальная прокрутка, так как по ширине страница не влезет. Указывая в коде width 100%, мы подстраиваем сайт под маленький экран. А чтобы текст не растянулся на широкоформатном мониторе (более 1000px) и оставался адаптивным, прописываем в CSS-код еще и максимальное значение.

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

Bootstrap

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

Что включает Бутстрап:

• адаптивную сеточную систему;
• переменные и миксины Sass;
• готовые компоненты;
• собственную библиотеку иконок SVG;
• мощные плагины JS;
• премиальные темы и многое другое.

Заказать качественную и недорогую адаптацию сайта сайта можно у профессионального разработчика

Bootstrap подходит для нескольких CMS — WP, Joomla и Opencart.

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

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

Что делаем:

• вводим название сайта в поисковую строку сервиса;

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

Сервис очень точный, а самое главное — целиком бесплатный.

Заключение

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