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

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

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

А также данная технология предполагает разработку одной версии веб-сайта для всех устройств, а не нескольких.

Адаптивный веб-дизайн (англ. Adaptive Web Design) - дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

Основные принципы адаптивного дизайна:

• Адаптивный шаблон сайта , способность шаблона подстраиваться под различные разрешения экранов устройств от монитора компьютера до смартфона;
• Адаптация и перемещение блоков контента , способность блоков контента в зависимости от разрешения экрана устройства принимать необходимые размеры, а также способность передвигаться на другую позицию в макете;
• Адаптация изображений , способность изображений менять размер в зависимости от разрешения экрана или загружать более адаптированное изображение с меньшим весом и размером;
• Использование гибкой сетки , позволяет максимально быстро изменять конструкцию макета;
• Скрытие менее важных блоков , на небольших экранах некоторые блоки могут скрываться;
• Переработка юзабилити элементов навигации , так как на мобильных устройствах в связи с небольшим разрешением элементы навигации становятся менее кликабельными, их перерабатывают, делая удобно-используемыми;
• Упрощение ряда элементов на веб — странице , некоторые элементы упрощаются для использования на мобильных устройствах;
• Адаптация видео контента , также следует учесть и адаптацию видео;
• Использование медиа — запросов (media query), позволяют создавать адаптивный макет;
• Сначала мобильные (mobile first), проектирование адаптивного дизайна начинается с макета для мобильных устройств.

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

Размеры макетов адаптивного дизайна

Как-то давно в 2012 году я писал небольшую статью о том, какие следует выбирать , разрабатывая дизайн — макет фиксированного сайта. Данная статья получила большой интерес среди читателей, оказывается, данный вопрос интересует многих начинающих дизайнеров и разработчиков. В связи, с чем в данной статье также решил осветить данный вопрос.

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

Если следовать принципу сначала мобильные то будут такие размеры разрешений, под которые необходимо разрабатывать макет 320px / 480px /768px / 1024px / 1280px может быть и больше зависит от задач.

Картина выглядит примерно, таким образом, но зачастую под какие-то разрешения нет необходимости создавать макет, к примеру, под 480px. если макет не ломается на промежутке 768 — 320px.

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

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

Мedia query и viewport в адаптивном дизайне

Для того чтобы сообщить браузеру как отобразить размеры страницы и изменить ее масштаб используется метатег viewport . Данный метатег прописывается в сайта. Он позволяет разработчикам установить ширину экрана для устройств, которая прописана в css.

Записывается мета тег viewport так:

• width=device-width — означает что ширина страницы сайта устанавливается в соответствие ширине экрана устройства.
• initial-scale=1.0 — данный атрибут скажет браузеру установить соответствие масштаба 1:1 для пикселей, что означает не масштабировать.

Слева без мета-тега, справа с использованием мета-тега viewport.

Также для мета-тега могут устанавливаться другие атрибуты и параметры.

Media Queries

В разработке адаптивных сайтов главную роль играют css3 media queries (медиа — запросы). Медиа – запросы включают в себя медиа — тип (принтеры, смартфоны, экраны, телевизоры, проекторы и др.) и условия, которое может принимать в свою очередь истину или ложь (true, false). В зависимости от того верный ли медиа — тип и выполняется ли условие будут применяться различные стили css. Если будет верно, то будут применяться те стили, которые прописаны в этом медиа – запросе, если же будет ложным, то будут применяться обычные стили css.

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

Записывается следующим образом:

@media screen and (max-width: 1000px) { .class { свойство: значение; } }

• @media – медиа – запрос;
• screen – медиа – тип (также называют тип носителя);
• max-width: 1000px – условие, которое должно выполняться (в нашем случае стили будут применяться, если ширина окна меньше ширины 1000px);
• . class – прописываются соответствующие селекторы (классы, id) в которых свойствам задаются новые значения.

В большинстве случаев для разработки адаптивного дизайна используются следующие медиа — функции.

• max-width: width — означает, что если ширина окна браузера меньше заданной ширины, то выполняется условие и применяются соответствующие стили (пример: max-width: 768px, означает, что если ширина окна браузера меньше 768px то следует использовать стили, указанные в медиа — запросе).
• min-width: width — означает, что если ширина окна браузера больше заданной ширины, то условие выполняется, и применяются указанные стили в запросе (пример: min-width: 480px).

Но также могут использоваться и другие функции: color, device-width, grid, height, orientation: landscape, orientation: portrait, resolution и другие.

Значения, которые используются в медиа — функциях называют также breakpoints (переломные или контрольные точки). В этих контрольных точках как Вы догадались, и меняется дизайн сайта.

• 320px - мобильные
• 480px - мобильные
• 768px - планшеты
• 1024px - планшеты, нетбуки
• 1280px и более - персональные компьютеры.

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

В медиа – запросах также применяются и логические операторы такие как:

• and – логическое И, применяется для объединения нескольких условий (пример: @media print and (color) { … }).
• not – логическое НЕ, применяется для отрицания условия (пример: @media not all and (color) { … }).
• only – применяется для старых браузеров, не поддерживающих медиа — запросы (пример: @media only screen and (max-width: 1300px) { … }).

Media queries прописываются в конце файла стилей, после всех основных стилей css.

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

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

1. Первым делом делаем резервную копию шаблона (темы), на всякий случай.
2. Далее нам потребуется программа для редактирования css, это может быть любой редактор кода, например brackets от adobe он бесплатный или Notepad++.
3. А также браузер google chrome, с его инспектором кода (вызывается клавишей F12).

Далее начнем редактирование, для удобства можно перенести шаблон на денвер (локальный сервер), либо на поддомен, кому как удобнее, чтобы пользователи не видели все те правки, которые будут происходить с макетом. Первым делом добавим мета-тег viewport, о нем я писал выше в том виде как рекомендуется.
Далее нам необходимо перевести все статические единицы измерения в относительные единицы измерения.

Таковыми являются px, необходимо перевести их в %, а шрифты задать в em. В основном это касается ширин и шрифтов.

Ширину основного контейнера wraper {max-width: 960px;} оставляем без изменения, если записано width измените на max-width. Для остальных контейнеров будем менять ширину на % отношение. Переводить мы будем по формуле:

Размер контейнера (px) / размер основного контейнера (родителя) в (px) * 100% = результат (%)

Например, статичный контейнер тела сайта 720px размер основного контейнера (его родителя), к примеру, стандартный 960px, тогда получим следующее 720/960*100=75% .

Таким образом, мы переведем нашу статичную верстку в резиновую. Далее переведем наши шрифты, если они в px в em для этого опять же воспользуемся формулой:

Размер шрифта (px) /16px (стандартный размер) = размер шрифта (em)

Например, размер шрифта 32рх, тогда 32/16=2em.
После чего сделаем наши изображения адаптивными. Для этого в css пропишем следующие свойства и значения.

Img{ max-width:100%; height: auto; }

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

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

Ну, вот наша с вами основа готова, теперь необходимо определить контрольные точки, в которых макет будет перестраиваться, продумать, как будут вести себя блоки, что будем скрывать и записать это все в медиа – запросы. Определять эти самые переломные точки мы будем при помощи браузера google chrome.

Откроем в нем наш макет, нажмем клавишу F12 и будем уменьшать размер окна браузера. В верхнем правом углу у нас будут писаться размеры окна, нас интересует первое значение, оно указывает на ширину. Необходимо сжимать до тех пор, пока дизайн не перестанет корректно отображаться. В том размере, когда макет выглядит не корректно, мы и будем создавать контрольную точку.
Определив первую переломную точку, запишем ее в файл style.css в самый конец после всех основных стилей. Допустим наш макет, имеет левый сайдбар и контентную часть с анонсами, и при 910px сайт начинает отображаться не корректно. В данном случае мы запишем следующий медиа запрос.

@media only screen and (max-width: 910px){ /* контентную часть мы делаем во всю ширину, отменяем выравнивание*/ section { width: 100%; float: none; } /* сайдбар мы делаем также во всю ширину, отменяем выравнивание*/ aside{ width: 100%; float: none; } }

Если у этих блоков есть какие-то отступы (margin, padding) их следует, либо обнулить, либо учесть при написание ширины. К примеру, padding: 2%; тогда ширину запишет следующим образом width: 96%; .

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

По такому же принципу мы создаем и остальные контрольные точки, находим ширину, при которой макет ломается (смотрится не корректно) записываем медиа – запрос, формируем для него стили задаем ширину блоков, можем скрыть менее важные блоки (display: none ).

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

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

Ну, вот вроде и все что хотел рассказать в этой статье, хотел написать немного об адаптивном дизайне, а получилось довольно объемно, надеюсь, материал будет вам полезен.

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

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

Что такое адаптивный веб-дизайн

Адаптивный веб-дизайн (в английском языке «responsive web design») – это дизайн веб-страниц, обеспечивающий отличное восприятие на различных устройствах, подключенных к Интернету.

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

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

Зачем нужен адаптивный веб-дизайн?

1) Большое разнообразие устройств, с которых можно выходить в Интернет. В настоящее время существует множество устройств, которыми люди пользуются, в том числе, и для того, чтобы выходить в Интернет. Все эти устройства различаются размером экрана, разрешением и, соответственно, тем, как может отображаться на них веб-сайт. Поэтому важно, чтобы ваш сайт хорошо смотрелся и правильно отображался у любого из пользователей, независимо от того, какое устройство он использует.

2) Популярность мобильных устройств с выходом в Интернет и увеличение мобильного Интернет-трафика. С ростом популярности мобильных устройств количества пользователей, которые заходят с них на сайты, заметно увеличилось, поэтому просто игнорировать их уже нельзя – это не один-два человека в полгода, это значительная часть вашей аудитории, и им должно быть удобно пользоваться вашим сайтом (иначе они не будут этого делать).

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

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

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

1) Под каждый тип операционной системы нужно свое приложение / версия сайта. Это требует дополнительных ресурсов, как временных, так и денежных.

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

3) Разделение траффика. С точки зрения продвижения сайта мобильное приложение не удобно тем, что разделяет весь траффик ресурса на траффик сайта и траффик приложения, что будет выглядеть, как меньшая посещаемость сайта.

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

В отличие от мобильных приложений, адаптивный дизайн – это один адрес сайта, один дизайн, одна система управления и содержание сайта.

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

Принципы адаптивного дизайна

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

• Проектирование для мобильных устройств с самых ранних этапов ("mobile first");
• Применение гибкого макета на основе сетки (flexible, grid-based layout);
• Использование гибких изображений (flexible images);
• Работа с медиазапросами (media queries);
• Применение постепенного улучшения.

Типы адаптивных макетов

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

1) Резиновый

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

2) Перенос блоков

Очевидный способ для многоколоночного сайта: при уменьшении ширины экрана дополнительные блоки (сайдбары) переносятся в нижнюю часть макета.

3) Переключение макетов

Этот способ наиболее удобен при чтении сайта с различных устройств: под каждое разрешение экрана разрабатывается отдельный макет. Способ трудоемок, поэтому менее популярен, чем предыдущие два.

4) Адаптивность «малой кровью»

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

5) Панели

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

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

Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

Техники Responsive web design

Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?

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

Резиновые изображения — одна из центральных тем в адаптивном веб-дизайне. В статье Ethan Marcotte приведен подробный обзор создания их с помощью классического фрагмента кода img { max-width: 100%; } , а также все необходимые детали, необходимые для началы работы.

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

Для просмотра больших писем часто необходима горизонтальная прокрутка, особенно когда к письму приложено большое изображение. В данном исследовании Campaign Monitor объясняет, как электронные письма могут быть оптимизированы для мобильных устройств с помощью Media Queries и предложено несколько полезных методов и фрагментов кода для использования на практике.

Инструменты для адаптивного веб-дизайна

Это быстрый и малый по объему Polyfill (фрагмент кода, добавляющий неподдерживаемый браузером функционал) создан Scott Jehl для поддержки свойств min-width и max-width из CSS3 Media Queries в IE6-IE8 и выше.

Используйте информацию из этого маленького интрумента для создания адаптивного сайта.

Инструмент для быстрого прототипирования адаптивного дизайна. Вы можете спроектировать CSS для различных популярных размеров экранов, ориентаций и браузеров, будь то телефоны (BlackBerry Torch, Google Nexus One,iPhone, Motorola Droid), планшеты (BlackBerry Playbook, iPad,Samsung Galaxy Tab, Dell Streak), мониторы или телевизоры (720p, 1080p).

Вы можете просмотреть результаты проектирования прямо в браузере и использовать привычные вам средства разработки, такие как Firebug. Также попробуйте альтернативный инструмент ScreenFly .

Инструмент 320 and Up основан на принципе mobile first (сначала мобильные устройства), при котором дизайн создается сначала для экранов мобильных устройств, а затем расширяется для планшетов, настольных ПК и больших экранов. Он хорошо работает как в качестве дополнения к HTML5 boilerplate, так и отдельно.

Это настраиваемые шаблоны для создания многофункциональных, высокопроизводительных мобильных веб-приложений. Вы получите кроссбраузерность для смартфонов класса А и хорошую поддержку для старых BlackBerry, Symbian и IE Mobile. А также большое количество различных оптимизаций для мобильных браузеров.

Фреймворки для адаптивного дизайна

1140 CSS Grid оптимизирован для работы на экранах от размера мобильных устройств до мониторов 1280px в ширину. Это простая и гибкая сетка, использующая Media Queries .

Этот CSS-фреймворк — хорошая основа для разработки на крошечных экранах (например, телефоны) и небольших экранах (например, планшеты) прямо из коробки с минимальными усилиями. Помимо этого имеется генератор для создания резинового CSS-фреймворка под себя.

Flurid — это резиновая сетка на 6, 7, 8, 9, 10, 12 и 16 колонок.

FluidGrids — генератор модульной сетки, который создает макеты из 6, 7, 8, 9, 10, 12 или 16 колонок.

CSS-фреймворк для создания адаптивных макетов. Он содержит 4 базовых макета и три набора типографики.

Резиновый фреймворк с упором на типографику.

Tiny Fluid Grid поможет вам создать свою собственную резиновую сетку из 12, 16 or 24 колонок, задать их максимальную и минимальную ширину и отступ в процентах.

Стратегии адаптивного дизайна

Luke Wroblewski законспектировал презентацию Ethan Marcotte о применении принципов адаптивного веб-дизайна в модернизации сайта одной из ведущих газет. Среди прочего, Ethan объясняет, как он подходит к методологии проектирования адаптивного веб-дизайна и что из себя представляет процесс прототипирования в контексте адаптивного веб-дизайна.

Luke Wroblewski делал заметки на Конференции Breaking Development во время выступления Stephen Hay о реалиях проектирования для различных устройств.

Дискуссии и различные точки зрения на адаптивный веб-дизайн

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

Публикация представляет собой сочетание философии и стратегии для аккумулирования лучших практик в области адаптивного дизайна.

Регулярно обновляемая коллекция веб-сайтов, которые используют Media Queries.

В 9 серии The Big Web Show Jeffrey Zeldman и Dan Benjamin пригласили Ethan Marcotte, чтобы обсудить адаптивный дизайн.

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

Современные веб-разработчики и маркетологи все чаще отдают предпочтение респонсивному дизайну (responsive design), позволяющему создать страницу, доступную для просмотра на любом устройстве. И хотя такой подход достаточно хорош с точки зрения Google, который «любит» респонсивные сайты — это далеко не единственный вариант, способный приспосабливаться под нужды пользователя.

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

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

Респонсивный веб-дизайн

Респонсивный веб-дизайн — это масштабирование интерфейса под устройство пользователя за счет media-queries, или модуля CSS3, позволяющего задавать разные стили (или даже таблицы стилей) в зависимости от разрешения экрана, его размеров и прочих характеристик.

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

Помимо своей изменяющейся структуры, у респонсивного дизайна есть несколько других преимуществ:

1. Одинаковый внешний вид ресурса в разных браузерах и на различных платформах
2. Наличие у сайта одинакового URL, что способствует SEO-оптимизации
3. Разработчикам необходимо обслуживать лишь один сайт, что позволяет сократить время, затрачиваемое на дизайн и контент

И хотя положительные стороны респонсивного дизайна очевидны, у этого метода существует ряд недостатков. Самым большим из них является скорость загрузки, которая значительно снижается из-за высокого разрешения изображений и других визуальных элементов, необходимых для оформления внешнего вида ресурса.

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

Адаптивный веб-дизайн

Адаптивный дизайн функционирует немного иначе. Он сегментирует пользователей на категории в зависимости от того, с какого устройства они просматривают сайт.

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

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

Иными словами, сервер берет на себя всю «тяжелую» работу, вместо того, чтобы заставлять сайт оптимизировать самого себя. Среди достоинств адаптивного дизайна можно выделить следующие:

1. Изображения загружаются намного быстрее, так как они сжимаются и адаптируются под устройство пользователя
2. Загрузка сайта происходит быстрее, так как сервер определяет тип устройства пользователя и загружает соответствующий ему программный код
3. Разработчики пользуются свободой творчества, ведь они могут создавать различные версии сайтов и подгонять их под соответствующие типы устройств, чтобы сделать их более удобными для мобильных пользователей.

Привлекательность этого метода омрачается тем, что создать адаптивный сайт не так-то просто. Из-за адаптации дизайна к различным устройствам, время, затрачиваемое на разработку, значительно увеличивается. Более того, если вам потребуется сделать какие-либо доработки на сайте, придется вносить изменения во все его версии. Поэтому если у вас небольшой бюджет и нет команды специалистов, которые будут осуществлять поддержку адаптивного сайта, лучше пока отказаться от данной идеи.

Какой вариант и для чего подходит?

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

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

Приветствую вас, случайные посетители и постоянные читатели блога сайт!

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

Краткий план статьи:

В предыдущей статье я уже писал о том, и зачем он нужен. Но как достичь этой самой адаптивности?

Для этого есть разные способы. Кто то использует 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 и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.

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

Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.

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