Как и зачем нужно создавать резиновые сайты?

С ростом популярности планшетов и смартфонов, все больше сайтов переходит на адаптивный дизайн, который позволяет вашему сайту смотреться хорошо на любом из этих устройств

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

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

 

Как же создать резиновый сайт или блог?

Один из самых легких способов – это приобрести адаптивный шаблон WordPress.

Вам не надо делать каких-либо изменений в коде.  Вы просто устанавливаете шаблон и ваш резиновый сайт готов.

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

 

Использование Media Queries (Медиа Запросов)

Если вы не хотите покупать резиновую тему или у вас статичный HTML сайт, вы можете использовать медиа запросы.

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

 

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

#sidebar { display: none;}

}

 

Это код говорит браузеру не показывать боковую колонку на устройствах с максимальной шириной в 640 px.

Такие медиа запросы можно добавлять и в файл стилей в шаблонах WordPress , зайдя во Внешний вид — Редактор.

На этом простом примере, надеюсь, вы поняли основную идею медиа запросов.