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



С 21 апреля 2015 года поисковая система Google, а со 2 февраля 2016 года Яндекс, внесли изменения в своих правилах по выдачи страниц на поисковый запрос интернет-пользователю. Теперь тем, кто пользуется интернетом с мобильных устройств, на верхние позиции поисковика в первую очередь будут показывать адаптивные сайты, то есть те сайты, которые будет наиболее удобно просматривать на мобильных устройствах.

В связи с нововведением в правилах поисковых систем, для лучшей ревалентности ресурса в сети, теперь сайт должен поддерживать адаптивный дизайн. Немного придется переделать сайт и все :)

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

#wrapper - каркас сайта, то что объединяет весь шаблон его закрывающий тег находится перед закрывающимся </body>.

#header - шапка сайта, ее можно поставить как перед wrapper так и после.

#header h1 - логотип.

#content - служит в качестве блочного элемента, объединяет colLeft и colRight.

#colRight - сайдбар.

#colLeft - место под контент.

#footer - подвал сайта.

Все эти элементы, header, colLeft, colRight, footer должны быть независимы друг от друга. Их можно как в игре "Пятнашки", передвигать и менять местами. А зависеть все это будет от того, с какого мобильного устройства будет осуществляться просмотр сайта (размер его табло). Я не имею виду именно данный шаблон, он самый простой и здесь много не подвигаешь. Другие адаптивные шаблоны у которых имеются дополнительные колонки одна или две, добавочное горизонтальное меню и т.д., но об этом позже.

Вот что получилось, вид на мониторе персонального компьютера:

Демо

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

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

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

Мета-тег viewport

Что бы текст при маленьких экранах остался при своих размерах, между тегами <head></head> нужно добавить мета-тег viewport:

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

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Адаптивный дизайн</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

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

Демо

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

А это и не красиво и не удобно пользователю!

Адаптивный дизайн сайта

Для нормального отображения сайта на мобилах с разным расширением используют медиа-запросы media screen. Немного выше, я говорил про игру в "Пятнашки". Так вот при помощи media screen и создается адаптивный дизайн под любой экран мобильного устройства. Элементы сайта можно менять местами слева-направо сверху-вниз, где то увеличить или уменьшить. Для каждого мобильного устройства можно делать свой адаптивный дизайн сайта.

На нашем примере не правильно расположен сайтбар, с помощью media screen опустим его под контент. Сделаем это не только для данного расширения, но и для мобильных устройств с расширением от 240px до 480px. То есть на телефоне с разрешением экрана больше 480px сайтбар опускаться уже не будет.

@media screen and (min-width:240px) and (max-width:480px)

#footer {
background: #F0DA0E;
width: 100%;
max-width: 1000px;
height: 90px;
margin: 0 auto;
clear: both;
}


@media screen and (min-width:240px) and (max-width:480px) {

#header {
font-size: 0.7em;
}
#wrapper #colLeft {
float:none;
width:100%;
margin-right:0px;
}
#wrapper #colRight {
margin-left:0px;
margin-top:25px;
float:none;
width:100%;
}
}

В данном медиа-запросе прописаны правила для мобильных устройств с экраном не более 480px

#header - в шапке сайта уменьшил размер логотипа, так как при маленьком расширении может не помещаться.

#wrapper #colLeft - отменил выравнивание по левому краю float:none, сделал ширину контента в полный экран width:100%, и сайдбар опустился под контент.

#wrapper #colRight - сделал отступ сайдбара от контента margin-top:25px, width:100% ширину сайтбара в полный экран.

Вот что получилось:

Демо

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

@media screen для экранов от 481 до 800px

@media screen and (min-width:240px) and (max-width:480px) {

#header {
font-size: 0.7em;
}
#wrapper #colLeft {
float:none;
width:100%;
margin-right:0px;
}
#wrapper #colRight {
margin-left:0px;
margin-top:25px;
float:none;
width:100%;
}
}

@media screen and (min-width:481px) and (max-width:800px) {

#wrapper #colLeft {
float:none;
width:100%;
margin-right:0px;
}
#wrapper #colRight {
margin-left:0px;
margin-top:25px;
float:none;
width:100%;
}
}

Демо

И наконец, чтобы адаптивный сайт якобы не растягивался на экранах разрешением свыше 1000px, многие добавляют медиа-запрос с уменьшением ширины (ниже). Ненужно это делать, в каркасе шаблона стоит max-width:1000px; и шире этого параметра он не станет.

@media screen and (min-width:1024px) and (max-width:1400px) {
#wrapper {
width: 90%;
margin: 0 auto;
}
#wrapper #content #colLeft {
width:75%;
}
#wrapper #content #colRight {
width:25%;
}
}

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

Сделать самый простой адаптивный сайт, оказалось не так уж и сложно :) Конечно здесь далеко не все, одних только медиа-запросов можно писать и писать под разные расширения. Целью было, описать сам механизм постройки адаптивного сайта.




Антивирусы
Программы от ведущих разработчиков.

Персональный компьютер
Очистка, ускорение.

Как удалить вирус
Проверенная методика удаления.

Вирус и его цель
Виды, обнаружение и удаление.

Dr.Web
Только Dr.Web антивирусы, сканеры, лечащие утилиты.

Антивирусы для флешки
Как обезопасить свой компьютер от вирусов с флешки.


Антивирусы
Бесплатные и не совсем, для смартфонов и планшетов.

Мобильный телефон
Защита от вирусов, очистка, ускорение.


Создание и продвижение
Как сделать сайт и продвигать его в поисковых системах.

Установить на сайт
Полезные предложения.