Адаптивный веб-дизайн: что это такое, зачем он нужен и его принципы. Адаптивность «малой кровью». Как создается адаптивный дизайн
Адаптивный дизайн современного сайта является одним из основных показателей его качества.
Ни для кого не секрет, что доля использования мобильных устройств для доступа в интернет постоянно возрастает. Эта тенденция характерна как для всего Интернета, так и для Рунета в частности.
И если мы не хотим терять своих посетителей, читателей и потенциальных покупателей, то следует позаботиться о том, чтобы Ваш сайт корректно и читабельно отражался в мобильных устройствах от планшета до смартфона.
К тому же и поисковые системы ранжируют сайты, адаптированные для мобильных устройств более лояльно. Особенно это относится к ПС Google, которая прямо предъявляет к сайтам такие требования.
Что такое адаптивный дизайн сайтаСмысл адаптивного дизайна заключается в возможности комфортного просмотра и чтения материалов, размещенных на сайте на самых различных устройствах.
Основными критериями оценки удобства просмотра являются:
Другими словами, текст должен быть читабельным, картинки и видео хорошо видны, элементы меню и ссылки заметны, доступны и понятны.
Как сделать Ваш сайт адаптивнымДля обеспечения адаптивности сайта к просмотру на устройствах с различным разрешением экрана есть несколько способов. Основными их них являются:
- Адаптивный шаблон сайта.
- Мобильная версия сайта.
- Установка специального приложения на устройстве пользователя.
Как показывает опыт, наиболее оптимальным решением является создание адаптивного шаблона. Два других способа тоже решают эту проблему, но заметно уступают первому способу.
При использовании мобильной версии сайта количество затрат труда, средств и времени сопоставимо с созданием и доработкой адаптивного шаблона.
Но при эксплуатации добавляются действия для поддержания актуальности мобильной версии сайта, синхронизации информации с основным сайтом. Да и для СЕО продвижения добавляются дополнительные вопросы с дублями и т.п.
Плюсы мобильной версии заключаются в том, что убираются все ненужные элементы, эффекты, реклама, подписки и т.п. Сайт будет не только корректно отображаться на мобильных устройствах, но и загружаться будет максимально быстро. Это его основное преимущество.
Такие версии позволяют себе крупные порталы, сайты социальных сетей, крупные корпоративные сайты…
Установка приложения на мобильные устройства и вовсе от Вас не зависит. Во-первых, не на всяком устройстве его можно развернуть. Во-вторых, это требует дополнительных знаний и действий и далеко не все пользователи будут согласны с лишними хлопотами.
Такие приложения обычно устанавливают пользователи, которые доверяют автору и ждут от него новой полезной информации. Это несколько напоминает подписку по электронной почте.
Подводя черту, делаем вывод: создание адаптивного дизайна для своего сайта будет наиболее выгодным решением для небольшого или среднего сайта.
Адаптивная верстка сайтаДля создания адаптивного дизайна придется прибегнуть к технологии адаптивной верстки. Ее суть состоит в следующем:
Сделать шаблон «резиновым»
То есть, не привязываться жестко к ширине страницы, а использовать относительные единицы. То есть сделать свой шаблон пропорционально сжимаемым, то есть «резиновым».
Для этого ширина страницы задается свойством css max-width вместо width, а уже относительно этой величины, ширину других элементов подбирают в процентах (%).
Определить «контрольные точки» ширины экранаОпределиться с контрольными точками (КТ) ширины экрана необходимо для планирования дальнейших действий.
Например.
Максимальная ширина экрана 1000 пикселей. Ширина экрана планшета – 800 пикселей, смартфона – 420 пикселей.
Эти контрольные точки (КТ) могут быть разными для различных типов сайтов. Иногда достаточно одной, к примеру 600 пикселей, а качество просмотра на более мелких разрешениях обеспечивается за счет «резиновости» шаблона.
Планирование компоновки экрана для каждой КТСогласно этим контрольным точкам скомпоновать расположение отдельных блоков на сайте таким образом, чтобы они корректно отражались на мобильных устройствах.
Для этого некоторые блоки, сайдбар, например, придется разместить ниже блока основного контента, а от второстепенных блоков, таких как реклама, слайдеры, заставки можно и вовсе отказаться.
Более подробную информацию о решении таких проблем Вы можете получить, познакомившись с бесплатным курсом по адаптивному дизайну команды WebFormMySelf.
Медиа запросыДля задания контрольных точек необходимо использовать медиа запросы. Эти директивы стандарты CSS3 для управлением отображения содержимым страниц сайта для разных разрешений экрана.
Выглядит эта директива примерно следующим образом:
Адаптивный шаблон для своего блога на WordPress можно обеспечить несколькими способами.
Решив шагать в ногу со временем, я также начал подготовку к адаптации своего блога. О плагинах адаптации тем на WP в интернете много подробной информации. Я познакомился с работой и требованиями популярных плагинов и решил, что их применение будет не самым оптимальным решением для моего блога.
Купить современный адаптивный шаблон в интернете тоже довольно просто, были бы деньги. Но надо, чтобы и сам шаблон Вам понравился и отвечал всем Вашим пожеланиям.
Короче я остановился на третьем варианте и решил адаптировать свой шаблон самостоятельно.
Адаптивный шаблон для WordPress самостоятельноОзнакомившись с принципами адаптации дизайна для мобильных устройств, я бодро приступил к делу, но почувствовал, что моих знаний по html, css, php недостаточно.
И уже начал склоняться к покупке готового шаблона, но в этот момент получил информацию о курсе двух Андреев Бернацкого и Кудлая «WordPress-Мастер от Личного блога до Премиум шаблона». Один из блоков этого курса содержал уроки по адаптации готового шаблона для мобильных устройств.
Цена на курс была сопоставима с ценой нового современного адаптивного шаблона. И я решил потратить эту сумму на приобретение курса и получить вместо готового шаблона – знания. Считаю. Что вложение было правильным и себя полностью оправдало.
Сервис Google по проверки скорости загрузки сайта для мобильных и стационарных устройств — https://developers.google.com/speed/pagespeed/insights/
Здесь же нам дают рекомендации по мероприятиям для ускорения загрузки Вашего сайта.
Хотел кратко описать еще несколько сервисов. но наткнулся на толковую подробную статью и решил не напрягаться, а дать Вам ссылку на нее — http://habrahabr.ru/post/189726/ .
Если эта публикация Вам пришлась по душе, то поделитесь ею с Вашими друзьями в социальных сетях.
Можете дополнить статью своими комментариями.
Всем привет! Недавно, заглянув в статистику одного из своих проектов, я поняла, что пришло время учиться создавать адаптивный дизайн сайта, то есть, дизайн, который будет хорошо смотреться, как на стационарных компьютерах и ноутбуках, так и на мобильных устройствах. Взгляните сами, Метрика намекает.
Как вам такая картина? Возможно, в каких-то тематиках процент мобильного трафика будет меньше, в других больше, но в любом случае не замечать посетителей, которые читают вас со смартфона или планшета больше нельзя.
А вы знаете, каким видят ваш сайт пользователи мобильных устройств? К счастью, для проверки есть отличный сервис — responsinator.com
Здесь все до безобразия просто — вводишь адрес сайта и видишь, как он выглядит на мобильных устройствах. Давайте для примера проверим блог, который, наверное, знаком все.
У Александра Борисова красивый шаблон, сразу видно — в дизайн и верстку вложены деньги и не маленькие. Однако, с телефона читать блог очень неудобно, и я не удивлюсь, если процент отказов среди пользователей мобильных устройств гораздо больше, чем тех, кто заходит на сайт с компьютера.
Что делать? Выхода два: оставить все как есть и наблюдать за тем, как другие проекты обходят твой в выдаче поисковых систем либо сделать дизайн своего сайта адаптивным.
Что такое адаптивный дизайнПо началу я не видела разницы между адаптивной и «резиновой» версткой, когда размеры блоков меняются в зависимости от ширины экрана. Однако, разница есть.
Адаптивный дизайн не просто тянется или сжимается по ширине, он подстраивается под размер экрана, иногда полностью меняя стиль блоков.
Самый простой пример: область контента растягивается на всю ширину экрана, а сайдбар или переносится вниз или вообще исчезает со страницы. Или меню из обычного горизонтального превращается в выпадающий список.
В зависимости от вашего бюджета и знаний CSS/HTML, вариантов может быть несколько.
Заказать адаптивную верстку у фрилансераСамый правильный, на мой взгляд, вариант, и он же самый непопулярный. Потому что удовольствие не из дешевых. И все же, если позволяют средства, и нет желания разбираться в тонкостях верстки, лучше найти студию или фрилансера, который адаптирует ваш шаблон под мобильные устройства или сделает новый. А как проверить его работу на устройствах с разными разрешениями, вы уже знаете — responsinator.com в помощь.
Найти готовый дизайнВ последнее время практически все дизайнеры стараются адаптировать свои шаблоны под мобильные устройства. Можно поискать готовый дизайн, например, тут:
- www.templatemonster.com — одна из самых популярных коллекций платных шаблонов для разных CMS и просто HTML-сайтов.
- www.templatemo.com — множество бесплатных вариантов современного дизайна.
Этот вариант подойдет тем, кто не гонится за эксклюзивным дизайном или способен внести свои правки в код, так, чтобы сделать шаблон уникальным.
Использовать фреймворкиФреймворк (framework) — можно сказать, каркас шаблона, его основные файлы и сетка блоков. Дизайнеры любят их за удобство в работе и экономию времени, потому что готовая «рыба» шаблона позволяет не тратить время на рутину. Если вы умеете работать с фреймворками, использовать их для создания адаптивного дизайна — отличное решение.
Огромный список адаптивных фреймворков на любой вкус вы найдете на Хабре . Но большинство из них достаточно сложные в использовании и тяжелые в объеме. Поэтому тем, кто любит минимализм я рекомендую другой список легких адаптивных фреймворков от Beloweb.ru . Заодно присмотритесь к блогу, здесь очень много полезных «вкусняшек» для дизайнеров и верстальщиков.
Сделать верстку самомуЭтот способ для тех, кто не ищет легких путей и хочет разобраться во всем самостоятельно. По сути, чтобы сделать свой шаблон адаптивным, нужно использовать две вещи:
Мета-тег viewport
Который определяет тип устройства, с которого посетитель зашел на сайт и установит верную ширину экрана. Просто скопируйте этот код в head своего сайта.
Правило @media
Благодаря которому мы можем прописать разные стили для одних и тех же блоков в своем css-файле. Выглядит это примерно так:
#left{ width: 600px; float: left; margin-right: 10px; } #right{ width: 400px; float: right; } @media only screen and (max-width: 1010px){ #left, #right{ width: 98%; float: none; margin: 10px auto; } }
В этом примере блок #left имеет ширину 600 пикселей и будет располагаться слева от блока #right шириной 400 пикселей. Но если разрешение монитора меньше 1010 пикселей, мы убираем обтекание у обоих блоков и растягиваем их на 98% ширины экрана.
И вот таким образом нужно прописать правила под следующие размеры экранов:
- 320px дляiPhone 3-5 в вертикальном положении
- 480px для iPhone 3-4 в горизонтальном положении
- 568px для iPhone 5 в горизонтальном положении
- 384px для смартфона в вертикальном положении
- 600px для смартфона в горизонтальном положении
- 768px для iPad в горизонтальном положении
- 1024px для iPad в вертикальном положении
Полный список разрешений можно найти на responsinator.com или в отчете Яндекс.Метрики для вашего сайта (раздел Технологии/Разрешения дисплеев). Одним словом, тем, кто знаком с версткой сайтов, не трудно будет разобраться в этом вопросе.
Вы знаете, я редко даю ссылки на платные курсы (потому что никогда не рекомендую то, чем сама никогда не пользовалась), но это действительно лучший обучающий материал по верстке из всех, которые мне доводилось смотреть. Именно благодаря Михаилу шаблон моего блога теперь не только адаптирован под разные разрешения экрана, он стал легче предыдущего варианта и лучше оптимизирован под поисковые системы.
Кстати, если читаете статью с мобильного, напишите, все ли на месте, все ли удобно? А на сегодня все. Если у вас остались вопросы или дополнения — добро пожаловать в комментарии, они как обычно открыты для всех.
Адаптивная верстка меняет дизайн страницы в зависимости от поведения пользователя, платформы, размера экрана и ориентации девайса и является неотъемлемой частью современной веб-разработки. Она позволяет существенно экономить и не отрисовывать новый дизайн для каждого разрешения, а менять размеры и расположение отдельных элементов.
В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.
Регулировка разрешения экранаВ принципе, можно разбить устройства на разные категории и верстать для каждой из них отдельно, но это займет слишком много времени, да и кто знает, какие стандарты будут через пять лет? Тем более, согласно статистике мы имеем целый спектр разнообразных разрешений:
Становится очевидно, что мы не сможем продолжать верстать для каждого устройства отдельно. Но что тогда делать?
Частичное решение: делаем все гибкимКонечно, это не идеальный способ, но он устраняет большую часть проблем.
Итан Маркотт (Ethan Marcotte) создал простой шаблон , демонстрирующий использование гибкой верстки:
На первый взгляд может показаться, что все легко, но это не так. Взгляните на логотип:
Если уменьшить изображение целиком, надписи станут нечитаемыми. Поэтому, чтобы сохранить логотип, картинка поделена на две части: первая часть (иллюстрация) используется как фон, вторая (логотип) изменяет свои размеры пропорционально.
Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).
Гибкие изображенияРабота с картинками - одна из самых главных проблем при работе с адаптивным дизайном. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений - использование max-width в CSS:
Img {max-width: 100%;}
Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100% .
Представленный способ является неплохим вариантом создания адаптивных изображений, но, изменив только размер, мы оставим вес картинки прежним, из-за чего время загрузки на мобильных устройствах увеличится.
Еще один способ: отзывчивые изображенияТехника, представленная Filament Group, не только изменяет размер изображений, но и сжимает разрешение картинок на маленьких экранах, чтобы ускорить загрузку.
Для использования данной техники требуется несколько файлов, доступных на Github . Сначала берем JavaScript-файл (rwd-images.js ), файл .htaccess и rwd.gif (файл изображения). Потом используем немного HTML, чтобы связать большие и маленькие разрешения: сначала маленькое изображение с префиксом .r (чтобы показать, что картинка должна быть адаптивной), потом ссылка на большое изображение с помощью data-fullsrc:
Для любого экрана шире 480 px загрузится изображение с большим разрешением (largeRes.jpg ), а на маленьких экранах загрузится (smallRes.jpg ).
В iPhone и iPod Touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной верстки. Однако изображений и текста не будет видно:
Для решения данной проблемы используется тег meta:
Если initial-scale равно единице, ширина картинок становится равной ширине экрана.
Настраиваемая структура макета страницыДля значительных изменений размера страницы может понадобиться изменить расположение элементов в целом. Это удобно делать через отдельный файл со стилями или, что более эффективно, через CSS-медиазапрос. Проблем возникнуть не должно, т. к. большинство стилей останутся прежними, и изменятся только некоторые.
Например, у вас есть главный файл со стилями, который задает #wrapper , #content , #sidebar , #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.
style.css (основной):
/* Основные стили, которые будут унаследованы дочерней таблицей стилей */ html,body{ background... font... color... } h1,h2,h3{} p, blockquote, pre, code, ol, ul{} /* Структурные элементы */ #wrapper{ width: 80%; margin: 0 auto; background: #fff; padding: 20px; } #content{ width: 54%; float: left; margin-right: 3%; } #sidebar-left{ width: 20%; float: left; margin-right: 3%; } #sidebar-right{ width: 20%; float: left; }
mobile.css (дочерний):
#wrapper{ width: 90%; } #content{ width: 100%; } #sidebar-left{ width: 100%; clear: both; /* Дополнительные стили для нового дизайна */ border-top: 1px solid #ccc; margin-top: 20px; } #sidebar-right{ width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; }
На широком экране левая и правая боковые панели хорошо помещаются сбоку. На более узких экранах эти блоки расположены один под другим для большего удобства.
Медиазапросы CSS3Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width , то стили будут проигнорированы. max-width делает противоположное.
@media screen and (min-width: 600px) { .hereIsMyClass { width: 30%; float: right; } }
Медиазапрос заработает только когда min-width будет больше или равна 600 px.
@media screen and (max-width: 600px) { .aClassforSmallScreens { clear: both; font-size: 1.3em; } }
В этом случае класс (aClassforSmallscreens ) будет работать при ширине экрана меньше или равной 600 px.
В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width:
@media screen and (max-device-width: 480px) { .classForiPhoneDisplay { font-size: 1.2em; } } @media screen and (min-device-width: 768px) { .minimumiPadWidth { clear: both; margin-bottom: 2px solid #ccc; } }
Специально для iPad у медиазапросов есть свойство orientation , значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):
@media screen and (orientation: landscape) { .iPadLandscape { width: 30%; float: right; } } @media screen and (orientation: portrait) { .iPadPortrait { clear: both; } }
Также значения медиазапросов можно комбинировать:
@media screen and (min-width: 800px) and (max-width: 1200px) { .classForaMediumScreen { background: #cc0000; width: 30%; float: right; } }
Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.
Загрузить определенный лист со стилями для разных значений медиазапросов можно так:
JavaScript
Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:
$(document).ready(function(){ $(window).bind("resize", resizeWindow); function resizeWindow(e){ var newWindowWidth = $(window).width(); // Если ширина меньше 600 px, используется таблица стилей для мобильного if(newWindowWidth < 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth > 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; }
Если размер экрана уменьшается, можно, например, использовать скрипт или альтернативный файл со стилями, чтобы увеличить белое пространство или заменить навигацию для большего удобства. Таким образом, имея возможность прятать и показывать элементы, изменять размеры картинок, элементов и многое другое, можно адаптировать дизайн под любые устройства и экраны.
В последнее время все больше и больше развиваются технологии и различные устройства (планшеты, смартфоны, мониторы) при помощи, которых просматриваются сайты.
В сферу чего мы получаем огромное множество различных разрешений экранов, что в свою очередь ведет к затруднению получения информации с сайтов. Чтобы информация была хорошо читаема и удобно просматриваема на большинстве устройств и была разработана технология адаптивного дизайна.
Целью адаптивного дизайна является разработка универсального дизайна веб-сайта, который бы в свою очередь позволял просматривать и взаимодействовать с ресурсом с различных устройств.
А также данная технология предполагает разработку одной версии веб-сайта для всех устройств, а не нескольких.
Адаптивный веб-дизайн (англ. Adaptive Web Design) - дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.
Основные принципы адаптивного дизайна:
- Адаптивный шаблон сайта , способность шаблона подстраиваться под различные разрешения экранов устройств от монитора компьютера до смартфона;
- Адаптация и перемещение блоков контента , способность блоков контента в зависимости от разрешения экрана устройства принимать необходимые размеры, а также способность передвигаться на другую позицию в макете;
- Адаптация изображений , способность изображений менять размер в зависимости от разрешения экрана или загружать более адаптированное изображение с меньшим весом и размером;
- Использование гибкой сетки , позволяет максимально быстро изменять конструкцию макета;
- Скрытие менее важных блоков , на небольших экранах некоторые блоки могут скрываться;
- Переработка юзабилити элементов навигации , так как на мобильных устройствах в связи с небольшим разрешением элементы навигации становятся менее кликабельными, их перерабатывают, делая удобно-используемыми;
- Упрощение ряда элементов на веб — странице , некоторые элементы упрощаются для использования на мобильных устройствах;
- Адаптация видео контента , также следует учесть и адаптацию видео;
- Использование медиа — запросов (media query), позволяют создавать адаптивный макет;
- Сначала мобильные (mobile first), проектирование адаптивного дизайна начинается с макета для мобильных устройств.
По поводу последнего пункта правильно это или нет сложный вопрос, по крайней мере, многие утверждают, что необходимо начинать разработку макета именно с версии для мобильных устройств. Я же придерживаюсь немного иного взгляда, мне проще разработать макет под максимальное разрешение с продуманной сеткой и полным функционалом, а уже потом адаптировать под другие разрешения.
Как-то давно в 2012 году я писал небольшую статью о том, какие следует выбирать , разрабатывая дизайн — макет фиксированного сайта. Данная статья получила большой интерес среди читателей, оказывается, данный вопрос интересует многих начинающих дизайнеров и разработчиков. В связи, с чем в данной статье также решил осветить данный вопрос.
Итак, сугубо из своего видения изложу принцип и размеры, под которые следует разрабатывать макет.
Если следовать принципу сначала мобильные то будут такие размеры разрешений, под которые необходимо разрабатывать макет 320px / 480px /768px / 1024px / 1280px может быть и больше зависит от задач.
Картина выглядит примерно, таким образом, но зачастую под какие-то разрешения нет необходимости создавать макет, к примеру, под 480px. если макет не ломается на промежутке 768 — 320px.
Разумеется, создавать холст в фотошопе мы будем с учетом отступов, полосы прокрутки и всего остального, как и обычный макет. для удобства разработки, а также более быстрого проектирования макета. Многие используют в работе фреймворки, а следовательно опираются на сетку того фреймворка на котором ведут разработку.
Благодаря чему, мы сможем показать верстальщику, как будет вести себя макет на различных разрешениях экранов и устройствах. Для примера я набросал небольшой макет, его Вы можете посмотреть на скрине ниже. 
Для того чтобы сообщить браузеру как отобразить размеры страницы и изменить ее масштаб используется метатег viewport . Данный метатег прописывается в сайта. Он позволяет разработчикам установить ширину экрана для устройств, которая прописана в css.
Записывается мета тег viewport так:
