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

Технологии постоянно улучшаются, смартфоны и планшеты становятся более “крутыми”, а пользователи мобильными. На данный момент количество аудитории с мобильных устройств превысило пользователей с персональных компьютеров. Не даром это повлекло целое направление сайтов под мобильные устройства.


Оглавление

1. Адаптивная верстка сайта — что это такое

2. SEO оптимизация и адаптивная верстка

3. Как проверить адаптивность верстки

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

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

 5.1. Адаптируем очень длинные слова

 5.2. Адаптивное меню сайта

 5.3. Адаптивные изображения

6. Распространенные разрешения экранов

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

1. Адаптивная верстка сайта — что это такое

Адаптивная верстка сайта — это такая html верстка, в которой в зависимости от размеров окна браузера сайт “трансформируется” в удобной для пользователя вид

Отличия мобильной версии сайта и адаптивной

Не стоит путать мобильную версию сайта и адаптивную верстку сайта. Мобильная версия находится на отдельном поддомене и полностью дублирует контент сайта. Адаптивный сайт содержит те же самые адреса URL страниц, но в зависимости от устройства подгружает разные стили CSS, что позволяет отображать сайт в более удобном виде.

2. SEO оптимизация и адаптивная верстка

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

Такая несправедливость может быть объяснена тем, что поисковики, скорее всего, суммируют поведенческие факторы с ПК и мобильных устройств. В итоге естественно, если сайт не адаптирован, то его ПФ будут хуже и это тянет за собой вниз основную версию сайта.

3. Как проверить сайт на адаптивность

Проверить сайт на адаптивность можно лишь открывая его в различных браузерах и на меняя ширину экрана. Но делать это со множества различных устройств с разными разрешениями — отнимет крайне много времени. Также вряд ли у Вас есть в наличии десятки смартфонов и планшетов.

В интернете есть гораздо более быстрое и простое решение. Например, можно установить в браузер Google Chrome специальный плагин Window Resizer и с помощью него открывать сайт в самых популярных разрешениях.

Можно просто вручную изменять размеры окна браузера по ширине и смотреть результат. В Firefox или Google Chrome есть адаптивный дизайн браузера нажав Ctrl+Shift+M.

Самое главное условие — это добиться отсутствия горизонтальной прокрутки и отсутствия flash-плагинов на странице.

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

Ссылки для онлайн проверки сайта на адаптивность в поисковых системах:

  • Проверка адаптивности верстки в Яндексе
  • Проверка адаптивности верстки в Google

После проверки возможно два варианта. Либо сайт оптимизирован, либо нет:

Например, проверка адаптивности в Google:

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





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

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

Чтобы сделать адаптивную верстку, нужно создавать таблицы стилей CSS в третьей версии. Разница между 2 и 3 есть, но в данном вопросе очень сильное значение имеет отсутствие абсолютных значений в стилях. Короче говоря, все значения размеров блоков длина, ширина, размеры — все это задается в процентах.

Помимо этого в CSS3 появилось правило “media queries“, которое позволяет использовать разные стили в зависимости от ширины экрана браузера. Про медиа запросы можно прочитать более подробно в отдельной статье: свойство CSS @media

Синтаксис CSS @Media

@media тип_устройства and|not|only (медиа_особенности){
...
Описание стилей
...

}

Например, напишем условия при которых стили будут работать для устройств с шириной экрана меньше 800px.

@media screen and (max-width: 800px) {
...
стили
...
}

Примечание

Стили надо писать последовательно от большого разрешения к маленькому, то есть сначала общие стили, а потом для «урезанных» размеров, например:

@media only screen and (max-width: 1280px) {
...
}
@media only screen and (max-width: 1024px) {
...
}
@media only screen and (max-width: 800px) {
...
}

В заголовочных тегах необходимо обязательно написать строку:

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

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

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

5.1. Адаптируем очень длинные слова

Например, на странице встретится очень длинное слово и тогда если не установлены свойство overflow, то это может повлечь за собой появление горизонтальной прокрутки. Чтобы этого избежать нужно контенту прописать следующие CSS свойства

.hphns {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

5.2. Адаптивное меню сайта

Сайдбар сайта как правило занимает ширину в районе 200-300 пикселей, что занимает почти всю ширину браузера на мобильных устройствах. Поэтому чаще всего делают выпадающие меню с помощью стандартной кнопки в виде трех штрихов (это стало уже классикой).

Реализовать это на сайте можно, но придется немного повозиться со стилями. Давайте рассмотрим все по шагам.

Ситуация, когда у нас есть меню и есть основной контент (я не стал рисовать шапку и футер):

Html код такой структуры может быть примерно таким:

<html>
<head>
<style>
body{
margin-left: 10%;
width: 70%;
border: 1px solid #eee;
}
#menu{
width: 20%;
height: auto;
float: left;
}
#content{
width: 70%;
height: auto;
float: left;
border-left: 1px solid #000;
padding: 1%;
}
</style>
</head>
<body>
<div id="menu">
Меню
<ul>
<li><a href="#link1">Ссылка в меню 1</a></li>
<li><a href="#link2">Ссылка в меню 2</a></li>
<li><a href="#link3">Ссылка в меню 3</a></li>
<li><a href="#link4">Ссылка в меню 4</a></li>
</ul>
</div>
<div id="content">
<h1>Название страницы<h1>
<p>Контент страницы</p>
<p>Контент страницы</p>
<p>Контент страницы</p>
<p>Контент страницы</p>
</div>
</body>
</html>

Преобразуется на странице в

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

Модифицируем наш пример следующим образом. Если разрешение экрана меньше 800 пикселей, то меню исчезнет и появится специальная кнопка открыть меню.






Приведем html-код адаптивной верстки с комментариями:

<html>
<head>
<style>
body{
margin-left: 10%;
width: 70%;
border: 1px solid #eee;
}
#menu{
width: 20%;
height: auto;
float: left;
display: block;
}
#content{
width: 70%;
height: auto;
float: left;
border-left: 1px solid #000;
padding: 1%;
}
#mob_menu{
display:none;
}
@media only screen and (max-width: 800px)
{
#menu {
display: none;
}
#mob_menu{
display: block;
}
#content{
clear: both;
}
}
</style>
<!-- Для скрытия/раскрытия меню по нажатию на ссылку: -->
<script language="JavaScript" type="text/JavaScript">
function showmobmenu() {
if (document.getElementById('menu').style.display == "block")
{
document.getElementById('menu').style.display = "none"
}
else
{
document.getElementById('menu').style.display = "block"
}
}
</script>
</head>
<body>
<div id="mob_menu">
<a href="javascript:void(0)" onclick="showmobmenu()">
Раскрыть меню &darr;
</a>
</div>
<div id="menu">
Меню
<ul>
<li><a href="#link1">Ссылка в меню 1</a></li>
<li><a href="#link2">Ссылка в меню 2</a></li>
<li><a href="#link3">Ссылка в меню 3</a></li>
<li><a href="#link4">Ссылка в меню 4</a></li>
</ul>
</div>
<div id="content">
<h1>Название страницы<h1>
<p>Контент страницы</p>
<p>Контент страницы</p>
<p>Контент страницы</p>
<p>Контент страницы</p>
</div>
</body>
</html>

Уменьшим ширину экрана до 700 пикселей (к примеру). Вот как это выглядит на странице

Т.е. меню появляется лишь при нажатии кнопки.

Вот что будет при нажатии на кнопку:

5.3. Адаптивные изображения

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

img {
width: 100%;
height: auto;
}

6. Распространенные разрешения экранов

  • Смартфоны портрет и ландшафт от 320px до 480px;
  • Планшеты портрет и ландшафт от 768px до 1024px;
  • Компьютеры и ноутбуки от 768px до 1024px;
  • Компьютеры и ноутбуки от 1824px;




Читайте также:

• Как ускорить индексацию сайта

• Кроссбраузерная верстка

• Кроссбраузерность сайта

• Что такое блог

• Что такое домен

• Крауд-маркетинг и SEO

• Курсивный текст в html

• Подчеркнутый текст html

• Жирный шрифт html

• Зачеркнутый текст html

• Чем открыть XML формат

← Перейти в оглавление seo словаря

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.