Адаптивный сайт на сегодняшний день является основным требованием к любому проекту. Не все знают как правильно построить сайт для корректного отображения на любых устройствах, используя все современные возможности HTML5.
Как сделать правильно?
На сегодняшний день выделить качественные сайты достаточно трудно — таких меньшинство. Что уж говорить об адаптивности — этот круг становится крайне узким. Многие владельцы сайтов по сей день не считают это серьёзной проблемой — что является серьёзной ошибкой.
В недалеком прошлом веб-сайты создавались непосредственно для персональных компьютеров и особо заморачиваться с отображением не приходилось — всего несколько возможных экранов, под которые не составляло труда спроектировать сайт.
В последнее время выявлены серьёзные изменения, разбивающие этот стереотип. Дело в том, что подавляющее пользователей перешли с настольных компьютеров на планшеты и мобильные устройства. Уверен, каждый это заметил и сам активно используют свои портативные девайсы. И это не вся проблема!
Помимо мобильных устройств в ход пошли широкоформатные мониторы, которые разбивают старый стереотип на мелкие кусочки. Вёрстка сайта начинает съезжать и некорректно отображаться. Решение этой проблемы не заставило себя ждать!
Для обеспечения корректного отображения сайта на всех устройствах и любых форматах были внедрены мобильные версии сайта. К этому способу решения проблемы мало кто перешёл — так как далеко не дешевое это удовольствие, да ещё и довольно сложное в реализации.
Мобильная версия требовала создания дубликата основной версии сайта, с урезанием некоторой части страницы, для корректного упрощенного отображения. Логично предположить, что функционал и возможные ключевые фрагменты сайта теряются, что вызывает неудобства в использовании.
HTML5 — это лучшее решение, которое решает проблему без потери фрагментов сайта и создания отдельной версии под мобильные устройства. А если быть точнее, то решением проблемы служит такая спецификация CSS3, как Media Queries.
Адаптивный дизайн с Media Queries
О нововведениях в HTML5 мы уже говорили, но ещё одно преимущество раскрывается именно в его использовании в адаптивности сайта. В совместном использовании с CSS3 появляется возможность использовать такую интересную спецификацию, как Media Queries.
Данная спецификация позволяет масштабировать и изменять сайт в зависимости от заданных значений размера экрана. Сайты с фиксированной шириной уходят навсегда в историю — именно резиновый дизайн сайта является современной тенденцией.
Преимущество адаптивного сайта:
- корректное отображение на всех устройствах
- возможность детального контроля над любым блоком сайта
- отсутствие дубликатов сайта
- преимущество в ранжировке
- повышение посещаемости
- понижение отказов
Как видно, преимуществ гораздо больше, чем можно было подумать. Адаптивность ценится не только пользователями сайта, но и поисковыми машинами, что позволяет получить необходимое преимущество в выдаче и занять лидирующие позиции в топе.
Дело в том, что с недавних пор Google и Яндекс буквально навязывают веб-мастерам создавать адаптивные сайты и за это поощряют их высокими позициями. Тем самым, в скором времени адаптивные сайты навсегда отодвинут устаревшие сайты, даже если последние имеют большую ценность.
Эта позиция верна и логична — такие условия подвергнут серьёзным изменениям веб-сайтов в лучшую сторону. Качество ресурсов станет выше, что повысит юзабилити и послужит развитию этой сферы. В конечно итоге, такая политика создаст комфортную среду для пользователей — что является неоспоримым плюсом!
Что касается посетителей сайта — адаптивность сайта не останется незамеченным: посещаемость будет расти, а отказы падать. Этот фактор положительно отразится на доходе проекта. Не говоря уже о существенной разгрузке сайта и простоте его использования.
Подробно о Media Queries
При качественной вёрстке и создания адаптивного сайта, корректность работы гарантирована, без всевозможных проблем.
Использование Media Queries имеет своеобразный синтаксис:
|
1 2 3 |
@media screen and (max-width:480px) { //необходимые CSS-правила } |
В примере выше мы задаём CSS-правила для экрана, с шириной не более 480px. Аналогичные спецификации можно создавать абсолютно для любого значения. Имеется возможность задать промежуток значений, если в этом есть необходимость:
|
1 2 3 |
@media screen and (max-width:480px) and (min-width:320px) { //необходимые CSS-правила } |
Теперь наши CSS-свойства будут работать непосредственно на экранах, с шириной 320-480px. Это очень удобно, если элементы сайта требуют более точной настройки.
Это всё, что следует знать о Media Queries.
Адаптивный сайт — тонкости создания
Для создания резиновых блоков на сайте необходимо задать всем нашим блокам сайта удобное отображение:
|
1 2 3 |
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } |
После этого преобразования — блоки будет гораздо легче расставить на свои места.
Следующим этапом будет создание CSS-правил под удобный вам экран (обычно я начинаю со своего монитора). В моём случае правила выглядят таким образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.header{ //шапка сайта width: 100%; height: 60px; } #content{ //непосредственно контент width: 70%; float: left; } #secondary{ //сайдбар width: 25%; float: right; } .footer-block{ width: 100%; height: 212px; } |
В моём случае, всё задано в процентных соотношениях, что позволяет не используя Media Queries добиться адаптивности в отображении. При сжимании экрана — блоки будут спадать вниз (сайдбар спадёт под контент).
Но возникает проблема с величиной шрифта, формой поиска, а также размером иконки счётчика посещаемости поста и количеством комментариев. Эту проблему я решил с помощью спецификации Media Queries:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.entry-header h1 { //заголовок статьи (большой экран) font-size: 1.8em; } @media (max-width: 1200px) and (min-width: 980px){ .entry-header h1 { //заголовок статьи (с меньшим экраном пк) font-size: 1.4em; } } @media (max-width: 767px){ .entry-header h1 { //заголовок статьи (планшетный экран) font-size: 1.4em; } } @media (max-width: 480px){ .entry-header h1 { //заголовок статьи (мобильный экран) font-size: 1.4em; } } #content .entry-meta { //значение счетчика посещаемости (большой экран) font-size: 1.2em; } @media (max-width: 767px){ #content .entry-meta { //значение счетчика посещаемости (планшетный экран) font-size: 0.95em; } } @media (max-width: 480px){ #content .entry-meta { //значение счетчика посещаемости (мобильный экран) font-size: 0.85em; } } |
Таким способом мне удалось задать подходящие CSS-свойства для различных размеров экрана, оформив должным образом все элементы.
При необходимости, можно аналогично воспользоваться спецификацией и для размера колонок и блоков на странице, к примеру:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
@media (min-width: 1200px){ .header{ //шапка сайта (большой экран) width: 1200px; height: 60px; } } @media (max-width: 980px){ .header{ //шапка сайта (небольшой экран) width: 95%; height: 60px; } } @media (min-width: 1200px){ #content{ //непосредственно контент (большой экран) width: 950px; float: left; } } @media (max-width: 980px){ #content{ //непосредственно контент (небольшой экран) width: 70%; float: left; } } @media (max-width: 767px){ //переход в одноколоночный режим #content{ //непосредственно контент (планшетный экран) width: 100%; float: left; } } @media (min-width: 1200px){ #secondary{ //сайдбар width: 250px; float: right; } } @media (max-width: 980px){ #secondary{ //сайдбар width: 25%; float: right; } } @media (max-width: 767px){ //переход в одноколоночный режим #secondary{ //сайдбар width: auto; float: right; } } .footer-block{ width: 100%; height: 212px; } |
Важно использовать процентные соотношения, а не фиксированные размеры — именно это позволяет делать наш дизайн резиновым.
Размеры экранов
Я советую пользоваться рекомендациями bootstrap, которые предлагают для полной адаптивности использовать 4 возможных вариантов:
|
1 2 3 4 |
@media (min-width: 1200px){...} //большие экраны @media (max-width: 992px){...} //небольшие экраны @media (max-width: 767px){...} //планшетные экраны @media (max-width: 480px){...} //мобильные экраны |
Именно эти варианты являются самыми оптимальными и оправданы тестами. Кстати, о бутстрапе мы поговорим отдельно — это очень интересно и удобно!
Intial Scale Meta Tag
Данный мета-тег является важным и полезным для корректного отображения на Iphone. Он даёт указания браузеру Safari не сжимать страницы под экран (по умолчанию), а использовать ширину устройства, как ширину окна.
|
1 |
<meta name="viewport" content="width=device-width; initial-scale=1.0"> |
Не советую им пренебрегать, поскольку ему уделяется отдельное внимание даже в вебмастере Google и Яндекс.
Современные браузеры и IE
На сегодняшний день HTML5 и CSS3 поддерживают практически все браузеры и не проблем практически нет, кроме IE до версии 9. Начиная с IE9 — полая поддержка гарантирована, но учитывая что есть немало пользователей старых версий, при желании можно и для них адаптировать наш сайт.
Для этого достаточно добавить следующий код:
|
1 2 3 |
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> |
После этого можно не беспокоится о возможных проблемах — всё будет в лучшем виде! 
В целом, при желании, можно практически без проблем сделать сайт адаптивным и современным. Это решит многие проблемы и позволит проекту оставаться свежим и современным, а также получать ещё больше трафика от поисковых систем.
Я надеюсь что эта статья многим поможет и облегчит жизнь. Будьте в курсе и следите за новостями
