Что такое адаптивный дизайн. Адаптивный веб-дизайн: что это такое, зачем он нужен и его принципы
В последнее время все больше и больше развиваются технологии и различные устройства (планшеты, смартфоны, мониторы) при помощи, которых просматриваются сайты.
В сферу чего мы получаем огромное множество различных разрешений экранов, что в свою очередь ведет к затруднению получения информации с сайтов. Чтобы информация была хорошо читаема и удобно просматриваема на большинстве устройств и была разработана технология адаптивного дизайна.
Целью адаптивного дизайна является разработка универсального дизайна веб-сайта, который бы в свою очередь позволял просматривать и взаимодействовать с ресурсом с различных устройств.
А также данная технология предполагает разработку одной версии веб-сайта для всех устройств, а не нескольких.
Адаптивный веб-дизайн (англ. Adaptive Web Design) - дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.
Основные принципы адаптивного дизайна:
- Адаптивный шаблон сайта , способность шаблона подстраиваться под различные разрешения экранов устройств от монитора компьютера до смартфона;
- Адаптация и перемещение блоков контента , способность блоков контента в зависимости от разрешения экрана устройства принимать необходимые размеры, а также способность передвигаться на другую позицию в макете;
- Адаптация изображений , способность изображений менять размер в зависимости от разрешения экрана или загружать более адаптированное изображение с меньшим весом и размером;
- Использование гибкой сетки , позволяет максимально быстро изменять конструкцию макета;
- Скрытие менее важных блоков , на небольших экранах некоторые блоки могут скрываться;
- Переработка юзабилити элементов навигации , так как на мобильных устройствах в связи с небольшим разрешением элементы навигации становятся менее кликабельными, их перерабатывают, делая удобно-используемыми;
- Упрощение ряда элементов на веб — странице , некоторые элементы упрощаются для использования на мобильных устройствах;
- Адаптация видео контента , также следует учесть и адаптацию видео;
- Использование медиа — запросов (media query), позволяют создавать адаптивный макет;
- Сначала мобильные (mobile first), проектирование адаптивного дизайна начинается с макета для мобильных устройств.
По поводу последнего пункта правильно это или нет сложный вопрос, по крайней мере, многие утверждают, что необходимо начинать разработку макета именно с версии для мобильных устройств. Я же придерживаюсь немного иного взгляда, мне проще разработать макет под максимальное разрешение с продуманной сеткой и полным функционалом, а уже потом адаптировать под другие разрешения.
Как-то давно в 2012 году я писал небольшую статью о том, какие следует выбирать , разрабатывая дизайн — макет фиксированного сайта. Данная статья получила большой интерес среди читателей, оказывается, данный вопрос интересует многих начинающих дизайнеров и разработчиков. В связи, с чем в данной статье также решил осветить данный вопрос.
Итак, сугубо из своего видения изложу принцип и размеры, под которые следует разрабатывать макет.
Если следовать принципу сначала мобильные то будут такие размеры разрешений, под которые необходимо разрабатывать макет 320px / 480px /768px / 1024px / 1280px может быть и больше зависит от задач.
Картина выглядит примерно, таким образом, но зачастую под какие-то разрешения нет необходимости создавать макет, к примеру, под 480px. если макет не ломается на промежутке 768 — 320px.
Разумеется, создавать холст в фотошопе мы будем с учетом отступов, полосы прокрутки и всего остального, как и обычный макет. для удобства разработки, а также более быстрого проектирования макета. Многие используют в работе фреймворки, а следовательно опираются на сетку того фреймворка на котором ведут разработку.
Благодаря чему, мы сможем показать верстальщику, как будет вести себя макет на различных разрешениях экранов и устройствах. Для примера я набросал небольшой макет, его Вы можете посмотреть на скрине ниже.
Для того чтобы сообщить браузеру как отобразить размеры страницы и изменить ее масштаб используется метатег viewport . Данный метатег прописывается в сайта. Он позволяет разработчикам установить ширину экрана для устройств, которая прописана в css.
Записывается мета тег viewport так:
600){ // Если ширина больше 600 px, используется таблица стилей для десктопа $("link").attr({href: "style.css"}); } } });
Опциональное отображение контентаВозможность сжимать и менять местами элементы, чтобы они уместились на маленьких экранах, - это замечательно. Но это не лучший вариант. Для мобильных устройств обычно используется более широкий набор изменений: упрощенная навигация, более сфокусированный контент, списки или строки вместо колонок.
Вот наша разметка:
Main Content A Left Sidebar A Right Sidebar
style.css (основной):
#content{ width: 54%; float: left; margin-right: 3%; } #sidebar-left{ width: 20%; float: left; margin-right: 3%; } #sidebar-right{ width: 20%; float: left; } .sidebar-nav{ display: none; }
mobile.css (упрощенный):
#content{ width: 100%; } #sidebar-left{ display: none; } #sidebar-right{ display: none; } .sidebar-nav{ display: inline; }
Если размер экрана уменьшается, можно, например, использовать скрипт или альтернативный файл со стилями, чтобы увеличить белое пространство или заменить навигацию для большего удобства. Таким образом, имея возможность прятать и показывать элементы, изменять размеры картинок, элементов и многое другое, можно адаптировать дизайн под любые устройства и экраны.
Приветствую вас, случайные посетители и постоянные читатели блога сайт!
За время существования этого сайта, я менял шаблон несколько раз и даже создавал собственный с нуля.
Одна из главных задач при выборе нового шаблона – это адаптивная верстка сайта под все разрешения экрана.
Краткий план статьи:
В предыдущей статье я уже писал о том, и зачем он нужен. Но как достичь этой самой адаптивности?
Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ – это адаптивная с помощью CSS.
Как сделать адаптивную верстку сайта
Во-первых,
если вы взялись верстать адаптивный дизайн сайта, между тегами вставьте следующий код:
Какой я был дурак, что не сделал этого сразу, когда пытался сделать адаптивную верстку сайта!!!
Проблема мобильных браузеров в их масштабировании верстки сайта, даже адаптивной.
Представьте себе, я рисую дизайн, потом прописываю все нужные стили и запросы, проверяю адаптивность сайта при разных разрешениях. Все вроде бы хорошо! Но, когда я открываю свой блог на смартфоне, я вижу, что сайт просто напросто сжался. Он не адаптировался к мобильному устройству, а просто уменьшились размеры шрифта, картинок и т.д.
Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!
Но ведь этого не может быть!
Оказывается, если не прописать код, который я указал выше, мобильный браузер не понимает, что сайт адаптивный и пытается просто уменьшить страницу сайта, чтобы она влезла в маленький экран мобильника.
Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).
Адаптивная верстка CSS media запросы
Чтобы сделать адаптивную с помощью CSS, необходимо использовать media запросы.
Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:
@media screen and (min-width: 1440px) and (max-width: 1599px){ }
Это код означает, что стили заключенные между “{ } ” будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.
То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.
Самые важные разрешения экрана, при адаптивной верстке- 320 px - Мобильные устройства (портретная ориентация);
- 480 px - Мобильные устройства (альбомная ориентация);
- 600 px - Небольшие планшеты;
- 768 px - Планшеты (портретная ориентация);
- 1024 px - Планшеты (альбомная ориентация)/Нетбуки;
- 1280 px и более - PC.
Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.
bootstrap адаптивный дизайн
Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.
Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.
Верстка на bootstrap отличается тем, что ширина блока или экрана делится на 12 равных частей. И присваивая определенный класс блоку, можно задать ширину блока равной нужному количеству частей.
Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:
Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.
Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:
Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.
Если разобраться, то работа с бутстрап делает работу с очень быстрой. При чем эти стили точно работают корректно и не будет ничего кривого на сайте.
В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую , чтобы не упустить этот момент.
Проверка адаптивности сайта
Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.
Очень точный и главное бесплатный сервис, который заслуживает уважение и благодарности от веб-мастеров и верстальщиков, которые занимаются адаптивной версткой сайтов.
Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.
Да, чтобы сделать адаптивный дизайн сайта, нужно хорошо потрудится. Но эти труды вознаградятся благосклонным отношением к вашему сайту поисковиков, и самое главное посетителей вашего сайта.