Основы адаптивного веб — дизайна (Responsive). Или как сделать простой шаблон адаптивным.
Здравствуйте, дорогие читатели блога. Сегодня я с Вам хотел бы поговорить об основах адаптивного дизайна (responsive), а так же разложить по полочкам один из примеров, который я подготовил.
Другими словами мы сегодня узнаем что такое адаптивный веб-дизайн, и в общем как его использовать или же сделать. Хочется сказать сразу, что полностью я его описывать не буду, а затрону так сказать самое главное. Пост будет рассчитан на новичка. Таким образом я постараюсь Вас не запутать.
И так, поехали.
Что такое адаптивный веб-дизайн?
Вы, наверное, не раз заходили на какой нибудь сайт со своего мобильного устройства, и наверное Вам приходилось увеличивать веб страницу, чтобы можно было прочитать этот мелкий текст, который ещё и в добавок полностью не помещается на экране мобильного устройства. Таким образом приходится прокручивать влево или вправо веб страницу, что в свою очередь причиняет некоторое неудобство. А вот если Вы зашли на сайт с адаптивным веб — дизайном, то тут картина совершенно меняется. Вам вообще не нужно делать никаких «тело движений» всё очень удобно и понятно читается.
Другими словами адаптивный дизайн отвечает за правильное отображение сайта на мобильных устройствах. Он так сказать, подстраивает сайт под разрешение мобильного девайса.
Немного теории (Основы)
Как известно, что весь веб дизайн большую часть строится на CSS, в CSS задаётся практически все правила отображения сайта в различных браузерах. Соответственно и адаптивный веб — дизайн не исключение. Самое главное это стандартное правило media queries, в которых и задаются все новые классы под желаемое разрешение экрана. Но и конечно же стандартная CSS вёрстка не много изменилась. Самое большое изменение это использование процентов а не пикселей в ширине объектов.
Например: Размер блока главного контента на странице был равен 600px, а ширина блока сайдбара 400px. В адаптивном дизайне данные значения нужно прописывать в процентах. Исходя из этого у нас получится ширина контента 60%, а ширина сайдбара 40% Надеюсь, что суть Вы уловили.
Так же в стилях будут использоваться новые свойства, которые не использовались при фиксированном шаблоне. Вот они:
max-width и width: если ширина сайта равна width:1000px то при уменьшении окна браузера будет появляться горизонтальная полоса прокрутки, другими словами сайт просто не будет влазить в окно. И его придётся горизонтально прокручивать чтобы увидеть весь сайт. Но если мы поставим width:100% Сайт растянется на всю ширину монитора. На малых разрешениях такой способ будет смотреться нормально, а вот на мониторах с большим разрешением сайт очень сильно растянется и будет совершенно не читабельным. Таким образом если Вы хотите чтобы сайт остался шириной в 1000px, но к тому же чтобы не появлялась горизонтальная полоса прокрутки, нужно применить max-width.
Вот что у нас было:
width:1000px
А вот что стало
width:100%;
max-width:1000px;
Теперь наш блок станет резиновым, который будет такого размера как и окно браузера, но если ширина достигнет в 1000 пикселей блок перестанет растягиваться.
min-width и width: Тут совершенно всё наоборот, если в первом случае мы избавлялись от горизонтальной полосы прокрутки, то тут мы её возвращаем. Другими словами, если резиновый блок шириной в 100% при уменьшении разрешения будет подстраиваться под окно браузера, чем меньше окно тем и меньше сам блок. min-width может установить значение ширины блока после которого он перестанет уменьшаться. Например, если установить min-width: 200px; то блок при достижении данной ширины перестанет уменьшаться, таким образом будет появляться горизонтальная полоса прокрутки в окне браузера.
Практика
Исходя из вышеприведенной теории я подготовил самый простой шаблон, который показывает суть адаптивного веб дизайна.
Данный шаблон состоит из трёх блоков — это шапка сайта, главный контент и сайдбар. Таким образом у меня получились блоки к которым я присвоил соответствующие ID CSS:
Шапка сайта — #headerInner
Главный контент — #colLeft
Сайдбар — #colRight
Как проверить?
Чтобы проверить работоспособность данного шаблона, просто поизменяйте курсором размер окна браузера и всё сработает, или же воспользуйтесь сервисами для проверки адаптивного дизайна.
Ну а сейчас давайте посмотрим и разметку html, она довольно проста:
< !DOCTYPE html>
</pre>
<div>
<div>
<a href="http://beloweb.ru">Логотип</a></div>
</div>
<pre>
<!-- начало врапер --></pre>
<div>
<div>
<div>
<div>
<div>
<h2>Основной контент</h2>
Содержание главного контента</div>
</div>
<!-- Конец коллефт -->
<!-- начало колрайт -->
<div>
<div>
<h2>Текст сайдбара</h2>
Содержание сайдбара</div>
</div>
<!-- Конец колрайт --></div>
<!-- Конец контент --></div>
<!-- Конец мидл --></div>
<pre>
<!-- Конец врапер -->
Как Вы заметили, что ширина сайта равна в 1000px и используется width и max-width: о которых я писал выше.
Шапка сайта так же имеете ширину в 1000 пикселей. Главный контент #colLeft имеет ширину в 67%, правая колонка width:30%; и отступ между ними margin-left:30px; далее данный отступ мы будем задавать в процентах.
Использование @media screen
Теперь самое интересно. Сейчас будем использовать @media screen основу адаптивного дизайна.
Но для начала хочется сказать, что в @media screen задаются желаемые разрешения устройств. Их существует множество, вот самые популярные: 320px, 480px, 600px, 768px, 900px, 1200px. В нашем примере мы будем использовать только два разрешения, это 1024px и 768px. Таким образом если разрешение устройства меньше чем 1024px будут задаваться свойства, которые заданы в @media screen. Так же точно и с разрешением 768px.
Вот как выглядит правило @media screen в стилях CSS:
@media screen and (min-width:200px) and (max-width:1024px) {
}
Как видите, что мы задали max-width:1024px, данное значение говорит браузеру с какого разрешения применять правило. А min-width:200px не даст сузить сильно сайт. Между этими скобками {} мы пишем новые свойства классам, которые задали в стилях для шаблона.
1024px
Например я хочу не много сузить весь сайт при заданном разрешении, но главный контент и сайдбар остаются на месте.
Вот что я прописываю в стилях:
@media screen and (min-width:100px) and (max-width:1024px) {
/* размер блока где находятся главный контент и сайдбар*/
body #wrapper {
margin-top:40px;
width: 90%;
margin: 0 auto;
}
/* размер шапки сайта*/
body #headerInner {
width:90%;
margin:0 auto;
}
/* размер главного контента*/
#wrapper #content #colLeft {
width:67%;
}
/* размер сайдбара*/
#wrapper #content #colRight {
margin-left:3%;
width:30%;
}
}
Шапке сайта #headerInner задан новый размер в 90%, так же убран max-width: он тут не нужен. #wrapper — это блок в котором находятся контент и сайдбар, его ширина тоже 90% как и у шапки сайта. Ширина сайдбара и контента остались неизменными только изменился отступ у сайдбара в 3%. Это нужно для того чтобы при уменьшении размера окна сайдбар не уезжал вниз.
768px
Теперь задаём стили для разрешения от 768px и меньше. Сейчас нам нужно переместить сайдбар под главный контент, так как если его оставить справа, будет вообще не красиво и нечитаемо на маленьких разрешениях. Вот что нужно прописать в стилях:
Для главного контента #colLeft мы задали ширину в 100%, для того чтобы он растянулся на весь экран, также убрал выравнивание по левому краю float:none, для того чтобы сайдбар #colRight съехал под главный контент.
Для сайдбара, тоже задал ширину в 100% и убрал выравнивание. А так же сделал отступ сверху, чтобы он немного отделялся от контента margin-top:25px;
Вот что у меня получилось:
Важно!
Обновлено 1,08,2013
Огромное спасибо Александру, который указал на ошибку. Путь можно не прописывать и без них всё отлично работает. Моя ошибка была в том, что правила в CSS я задавал выше основных правил в файле CSS. Задавайте правила адаптивного дизайна в самом конце стилей CSS и будет всё отлично работать.
1. Я заметил одну особенность. Когда задаются правила к стилям в @media screen к классам, к ним нужно прописывать некий путь. Например класс #headerInner вообще не работает без стандартного класса body. Если написать просто #headerInner и задать к нему правила, то браузер почему то не применяет эти правила, а вот если написать body #headerInner то начинает всё работать. Так же и для всех других классов. Если класс #3 находится в классе #2 то нужно прописывать #2 #3 иначе правила работать не будут.
2. Если Вы собрались делать шаблон с адаптивным дизайном, обязательно между тегами <head> и </head> добавьте вот этот мета тег:
И картинки будут автоматически растягиваться и сужаться.
Вывод
Друзья, это совершенно не сложно как кажется на первый взгляд. Только не много нужно посидеть и разобраться как это работает. Во вторых адаптивный дизайн очень сильно упрощает пользование сайтом на всех мобильных устройствах. Как Вам известно, что сейчас очень стали популярными данные гаджеты. Так что я бы не советовал Вам пропускать данный шаг. Учитесь.
Например я практически без проблем для своего шаблона на блоге http://beloweb.ru/ сделал доступным для мобильных устройств, адаптивным. Кстати можете проверить 🙂
Так же у данного дизайна есть огромные возможности, сайт можно переделать до неузнаваемости. Но не перестарайтесь, главное удобство.
Друзья, если Вам будет что то не понятно или что нибудь не будет получаться, обязательно пишите в комментариях. До скорых встреч.
Адаптивный дизайн: теория и практика | by Mariya Tereshkova
Сузить данный контент можно 3-мя способами:
уменьшить карточки постов;
уменьшить паддинги;
уменьшить шрифты.
Теперь, ваша задача — рассчитать, до какого предела могут сузиться отступы и карточки, а затем расписать это всё верстальщику.
Сперва можно вдвое сузить расстояния около стрелок, приравняв их к внутренним отступам между карточками постов. После чего мы можем начать сужать карточки. В изначальном варианте интерфейса у нас были довольно крупные названия постов, мы можем уменьшить их с 30 до 24 px. Начав сужать контент, мы упрёмся в минимальный допустимый размер карточек, при котором в название и описание поста будет влезать достаточное количество символов. В данном случае, это 320 px.
Сложив все данные, мы узнаем, что минимальная ширина при указанных размерах будет равняться 1272 px. Это наш второй брейкпоинт.
Легендарное правило Mobile First На заре появления адаптивного дизайна зародилось мнение начинать создание сайтов с размеров под мобильные устройства. Данный способ позволял свести количество функционала и данных на страницах до минимума, предоставляя пользователю только самое необходимое. В своё время издательство A Book Apart даже опубликовало книгу на эту тему (кстати, рекомендую к прочтению).
Сейчас трудно найти дизайнеров, которые начинают разработку сайта с мобильного размера, но такой метод до сих пор имеет право на существование. На определенном этапе создания адаптива необходимо предусмотреть, что вы хотите получить на экране мобильного устройства. И чем раньше вы это сделаете, тем лучше.
👉 Правило #2 Чем ближе вы к размеру 1000 px, тем больше вам стоит задумываться о том, какой интерфейс вы хотите получить в смартфоне.
С подобными карточками всё просто: мы либо свернем их в карусель, либо дадим списком друг за другом. Я остановлю свой выбор на карусели. На сенсорных устройствах, где почти весь интерфейс свайпится, можно скрыть стрелки прокрутки карточек и оставить page control indicator, который информирует нас о том, что карточек в данном блоке много.
Что мы хотим увидеть на мобиле? Можно оставить карточки во всю ширину экрана, но гораздо лучше будет показывать кусочек следующей карточки, чтобы юзер видел, что за экраном есть другой контент.
Итак, минимальный размер телефона 320 px:
пускай отступ между карточками не будет превышать 20 px, чтобы текст под карточками не упирался друг в друга;
мы покажем еще 10 px от следующей карточки в карусели, значит, на карточку остаётся не более 290 px;
карточку можно прижать прямо к краю экрана, но я бы оставила еще 10 px свободного пространства, чтобы текст под карточкой не упирался в край экрана.
Итог, 280 px.
Если мы сузим текущую карточку до 280, то увидим, что у нас не влезает крупный текст описания в 17 px. Уменьшим размер шрифта до 15. Экран всё еще довольно широкий, и карточки могут существовать при просторных паддингах в 40 px. Сложив все минимальные данные, получим третий брейкпоинт — 1000 px.
👉 Правило #3 Рекомендуемые размеры текста контента на мобильных устройствах — 15–17 px. Используйте 12–14 размер только для дополнительной и ненужной информации. Человеку в движении и с расстояния вытянутой руки будет сложно прочесть столь мелкий текст.
👉 Правило #4 Не прижимайте контент к краю экрана. Возьмите запас в 10–30 px (в идеале, 15–20). Довольно сложно прочесть текст, который упирается в экран телефона. Исключением являются картинки и медиа, их можно (и иногда даже нужно) растягивать на всю ширину экрана.
Вернёмся к нашему интерфейсу. В окне меньше 1000 мы можем сжать нашу карусель до 2-х карточек на одном экране и сохранить комфортные паддинги между постами. Сложив все данные, получим следующую минимальную точку —680 px.
Кстати, вот как будет выглядеть экран при такой сетке при ширине в 1020 px:
Теперь мы дошли до мобильных устройств. Нашим пятым брейкпоинтом станут все экраны менее 680 px. Мы сузим отступы до края окна и получим удобный слайдер, при минимальных размерах карточек в 280 px.
Адаптивный дизайн в Figma — Convertmonster
Адаптивный дизайн – это способность проекта подстраиваться под все современные цифровые устройства. При разработке макета обязательно нужно предусмотреть возможность адаптива, чтобы пользователь смог комфортно просматривать страницы через телефон или планшет. Сегодня расскажем, как сделать адаптивный дизайн в графическом редакторе Figma. В него включен ряд инструментов, способных подогнать фреймы по ширине и высоте. Этот вариант адаптива называется растягивающейся версткой, где при изменении размеров окна дочерние объекты также будут меняться, расширяясь и сжимаясь.
Как работает адаптивность в figma?
Интернет-сайт рекомендуется сделать адаптивным, чтобы он одинаково корректно смотрелся на всех цифровых устройствах. Поэтому верстальщик обязан позаботиться о том, чтобы все важные элементы поместились на экране. У пользователя не должно возникнуть трудностей при просмотре страниц сайта. Если некоторые ссылки в навигации не являются важными, их следует поместить в гамбургер-меню. Этот список будет открываться при нажатии. Остальной контент рекомендуется разместить в виде ленты новостей, так как для пользователей удобнее прокручивать ленту, чтобы узнать последние апдейты и получить больше информации.
Версию страниц для смартфонов рекомендуется сделать облегченной, чтобы посетителя не отвлекали посторонние объекты. Идеальный вариант – это светлый шаблон для веб-сайта. Для телефонов стоит применить крупный шрифт для удобства чтения. Графическое сопровождение типа jpg-файлов при просмотре на ПК отображается полностью, для смартфонов их следует уменьшить, чтобы они помещались на экране полностью. Вся остальная графика, которая составляет интерфейс сайта, должна сжиматься и подстраиваться под конкретное устройство, именно так работает адаптивность. Сейчас мы разберем, как сделать резиновую верстку для вашего макета.
Работа с меню Constraints
У каждого объекта есть панель свойств, которая появляется сбоку при щелчке по форме. С её помощью можно производить разные действия – масштабировать, менять цвет и так далее. Один из параметров является Constrains, он позволяет делать привязку к краям. Для этого существуют раскрывающиеся списки меню. Каждое ключевое слово привязывает к определенному краю: left/слева, right/справа, top/сверху, bottom/снизу, center/центр. Также присутствуют пункты, где можно произвести настройку сразу по двум параметрам. Left and Right и Top and bottom.
Во всех случаях объект будет привязан к определенному краю, кроме пункта, где указано сразу два условия.
На примере выше мы задали сразу четыре условия привязки, воспользовавшись двумя списками. Здесь произойдет растягивание по всему холсту.
Scale – придает объекту свойство увеличиваться пропорционально фрейму. Масштабируются не только формы, но и отступы по краям.
Если нужно сделать центрирование контейнера, то для этого существует center, который настраивается в двух плоскостях (высота и ширина). Container будет придерживаться центра того места, где был размещен.
Крупный проект состоит из интерфейса и вложенных друг в друга блоков. Функция выравнивания пригодится, если существует задача сделать центрирование, ориентируясь на один из блоков. В таком случае стоит помнить, что манипуляция с привязкой осуществляются только внутри фрейма. Поэтому вначале создаем frame и придумываем ему имя block-1. Если он был создан за пределами макета, то переносим его на макет, у которого, предположим, название main-frame. В итоге у нас получится следующее:
Теперь rectangle (прямоугольник): применяем свойства Constrains, и квадрат будет выравниваться по отношению к block-1.
Создание адаптивного дизайна
Для создания адаптивного дизайна потребуется инструмент Auto-Layout. Он позволяет создавать динамические фреймы. Они меняются в зависимости от содержимого, если вы напишете текст, то область расшириться. Чтобы включить опцию auto-layout нужно выбрать frame и в правой панели нажать плюс, как показано на скриншоте ниже:
Если frame гораздо больше, чем текстовое поле, то при копирование в него текста произойдёт автоматическое сжатие. В нашем случае слой под названием frame-1 примет более компактный вид, как показано на картинке:
Обратите внимание на отступы по бокам, они были проставлены в настройках по умолчанию. Для их изменения следует открыть окно, нажав на иконку “Alignment and padding”. Посередине находится выравнивание, здесь предлагается сделать выравнивание по левому и правому краю, а также центру, по вертикальной плоскости и по горизонтальной, соответственно. Чтобы протестировать, рекомендуется увеличить размер области и попытаться выровнять текст внутри.
По бокам от опции “alignment” присутствуют четыре поля с цифрами. Если поменять значения, то расстояния от края до элемента изменятся. Другой способ, переназначить отступы, это воспользоваться Mixed, здесь все цифры требуется записать, как в стилях CSS, т.е. через запятую.
На панели есть две иконки “стрелки”, они указывают направление расположения “блоков”. Чтобы посмотреть, как это работает, рекомендуется разместить сразу несколько объектов, например “Rectangle”. Перед размещением нужно выключить auto-layout, если рабочая область недостаточного размера, то её следует растянуть, и уже потом размещать. Активируем снова auto-layout и в настройках меняем “alignment” по центру, а дальше щелкаем по направлению и смотрим результат:
У нас теперь несколько блоков. Над квадратами можно производить дополнительные действия, например:
Spacing between items – отступ между прямоугольниками.
Space between – автоматически проставляется расстояние между объектами при изменении области. Если оставить второй пункт в этом списке, то параметр первого изменится на auto.
В правой панели есть раздел resizing, он используется, когда требуется убрать пустое пространство. На выбор два раскрывающихся списка по “ширине” и “высоте”. Чтобы уменьшить область, нужно щелкнуть по “Hug contents”. На скриншоте показан пример “до” и “после”.
Примечание: наглядно можно увидеть, что если создать frame, расширить его, добавить несколько объектов, после этого применить auto-layout, то ключевые объекты будут отображены по центру, а остальное пространство будет убрано.
Внутренние примитивы также могут изменяться. Свойство Fill Container растягивает объект по всему холсту. Доступно два варианта по горизонтали и вертикали. В resizing также присутствует квадрат настроек, если на него навести мышкой, то появятся стрелки. Щелкая по ним, примитивы будут меняться в размерах.
Функцию Fill container можно использовать только на внутренних объектах фрейма. Для главной области есть hug container. Но при разработке, встречаются задачи, где требуется задействовать сразу два этих свойства. Рассмотрим пример, создадим frame и назовём его page-1, второй объект разместим внутри и дадим название left-frame. Нарисуем несколько примитивов, для каждого фрейма применим свойство auto layout, как показано ниже. Опция автоматически уменьшит слой page-1, поэтому размер width следует проставить вручную.
Щёлкнем по left-frame и настроим параметры resizing. Теперь в опции выбираем пункт, указанный на скриншоте ниже. После этого дочерний frame растянется на всю область. При изменении height у page 1, внутренний блок также будет увеличиваться или уменьшаться в размерах.
Допустим, центральный примитив rectangle, нужно сделать динамически видоизменяемым. Для этого поменяем свойства у прямоугольника, как показано в примере ниже. После выполнения всех действий при изменении параметр высоты у page1, размер rectangle также будет видоизменяться.
С текстовыми полями нужно производить те же действия. Например, при добавлении текста блоки расположенные ниже должны смещаться вниз. Как этого добиться? Для начала добавим еще frame, придумаем название container-text. Сделаем так, чтобы местоположение в иерархии было выше остальных слоев, начинаем заполнять область текстовыми полями их будет всего два.
Краткое описание (description) статьи.
Ссылка “читать полностью”.
В text-1 находится фрагмент статьи, взятый с официального сайта figma, а в text-2 ссылка для перехода, где можно полностью ознакомиться со статьей. Ниже показан образец, как это выглядит.
Container-text следует преобразовать в auto-layout и в resizing установить опцию fill container.
Чтобы text-2 сдвигался в зависимости при увеличении текстового поля, следует в text-1 поменять значение на Hug contents.
Ниже предоставлен пример, где при заполнении текстового поля text-1 надпись “Читать подробнее” сдвигается вниз.
Категории со статьями размещаются списком или три в ряд. Допустим, нужно сделать верстку нескольких карточек. Они будут состоять из двух блоков. Первый – это картинка статьи, вторая является общим контейнером, где будет содержаться всё, включая графическое превью (предварительный просмотр).
Начнем создание нового фрейма назовём его category-frame. Укажем размеры 1500 на 1000 пикселей. На главной области нужно добавить еще три фрейма. Имя объектам рекомендуется дать article-frame (1,2,3). Внутренняя часть карточек будет содержать превью, картинку и текст с описанием. Имя прямоугольников preview-(1,2,3). Полностью макет выглядит как на картинке:
Теперь в catеgory-frame добавим auto layout и, соответственно, то же самое нужно сделать с внутренними слоями. Внешний frame “направление по горизонтали”, внутренний – по вертикали.
При добавлении auto layers в article-frame(1-3) произойдёт сжатие объекта до минимальных размеров, вам потребуется вручную отредактировать высоту. На оставшееся пространство следует разместить два текстовых поля. Одно – это краткое описание статьи, второе – “читать подробнее”. Если вставить целый абзац, то текстовое поле расширится и верстка собьётся, как показано ниже:
Чтобы исправить проблему в свойствах параметра “W”, нужно указать значение “400”. Текстовое поле назовём text-1, дальше делаем дубликаты text-2 и text-3. Разместим их в соответствующие фреймы, кроме того, нужно у карточки указать место для перехода на полную статью, например, “Читать подробнее”. Для выделения ссылок в тексте надо использовать синий цвет. Наша категория со статьями почти готова, осталось только у text(1-3) изменить значение на “hug contents” Результат на картинке ниже:
После заполнения любого текстового поля с именем text-(1-2-3), надпись “читать подробнее” сместится вниз.
Особенности адаптивного дизайна для мобильных устройств
Получив техническое задание, разработчик уточняет у заказчика, под какие цифровые устройства делать дизайн. Клиент говорит – “под все”, и дизайнер озадачен, так как количество существующих разрешений велико и если нет опыта, то процесс разработки окажется трудоемким.
Для начала нужно понимать, что верстальщик работает в первую очередь с диапазоном размеров, поэтому для экранов требуется задавать жесткие рамки макета. Давайте разберемся, под какое оборудование какую ширину и высоту следует устанавливать.
ПК – 1920 на 1280 пикселей, последний параметр можно сделать и 1440.
Планшеты 1024 (768) на 1000.
Смартфоны 480 (320), в некоторых случаях делают единый интерфейс на 360, тогда потребуется проверить корректность отображения верстки.
Рассмотрим задачу, где требуется разместить иконки. Для начала создадим frame для смартфона. Заходим и выбираем подходящее устройство, например, “iPhone 11 Pro Max”.
Создадим первые icons (для этого можно использовать инструмент rectangle) и упакуем их в frame. Быстрый способ это сделать – выделить объекты и нажать (Ctrl+ALT+G). Придумываем названия row-frame-1. Дальше делаем дубликаты row-frame-2, row-frame-3 и так далее, пока полностью не заполним.
К главному фрейму применим Auto-layout и в панели Design установим в Spacing Between Items 10 пикселей.
Чтобы адаптивный дизайн умел подстраиваться под все размеры цифровых устройств, можно сделать растягивающуюся верстку. Для начала у всех фреймов с названием row-frame-(1-9) установим Resizing “fill container”. То же самое нужно сделать с каждой иконкой. При увеличении размера внутренние объекты также будут менять ширину и высоту.
Вся иерархия состоит их этих настроек:
IPhone 11 Pro Max-1 – “Fixed width и height”.
Row-frame-(1-9) – Fill container (vertical и horizontal).
Rectangle-(1-36) – те же настройки, что и во втором пункте.
Для того, чтобы получить доступ к опции Rectangle, нужно добавить Auto-layout во все слои с названием row-frame.
Этот вариант подойдет, когда необходимо оформить дизайн, где все блоки растягиваются и сжимаются при изменении масштаба. Что делать, если требуется оставить иконки без изменения, но при просмотре на разных устройствах увеличивать только расстояние между ними? Достаточно поменять настройки. Вот список изменений:
Row-frame-(1-9) – Alignment and between нужно настроить на space between.
Rectangle-(1-36) – resizing нужно настроить на fixed width и height.
После выполнения этих пунктов, иконки будут находиться на определённом расстоянии. Верстка будет подстраиваться под размер экрана.
Если в приложении требуется части интерфейса прикрепить к краям, то в этом случае подойдет опция Constrains. Размещаем блок и настраиваем Constrains по правому краю границы, второй можно прикрепить слева, как показано на картинке:
Когда дело доходит до разработки контентной части, здесь нужно сделать так, чтобы фрейм динамически расширялся при заполнении текстового поля. Как этого добиться? Просто создаем frame c именем content-frame, добавляем туда text и небольшой абзац. Подстраиваем наше описание под размеры content-frame.
Последнее, что требуется сделать, это в content-frame добавить Auto-Layout, после этого frame расширится до нужных размеров. Дальше пользователь может вписывать текст или стирать его, контентная часть будет автоматически масштабироваться по вертикали.
Статья может плотно прилегает к границам контейнера. В Фигме это можно исправить, настроив отступы по четырем граням. Полностью результат можно видеть на картинке:
Figma mirror
Специальное приложение для просмотра макета на телефоне. Когда пользователь редактирует кадр в основной программе, то изменения вступают в силу и на мобильном устройстве. И все, что происходит в редакторе, отобразится на экране смартфона. Пользователь увидит, как выглядит верстка на мобильном устройстве. Вот пример работы расширения:
Адаптивный дизайн сайта – это необходимость для ведения успешного бизнеса онлайн. Многие пользователи смотрят интернет-страницы на телефонах и планшетах. Если ресурс будет динамически подстраиваться под гаджеты, то клиенты станут дольше задерживаться на странице, что положительно скажется на продвижении. Методы, приведенные в статье, помогут настроить верстку для вашего проекта в сервисе Фигма.
Что такое адаптивная верстка, как ее сделать и примеры дизайне веб-сайта
Пришло время решений, одинаково удобных и для мобильных устройств, и для стационарных компьютеров. Подробно рассмотрим адаптивный дизайн сайта: что он из себя представляет, по каким принципам строится, чем отличается от других, а также ответим на самые распространенные вопросы.
И сразу же об актуальности: сегодня он считается одним из весьма явных и даже ключевых показателей качества и современности корпоративного или частного web-ресурса во Всемирной Сети. Причем его разработка – это все еще сравнительно новое направление, и для него весьма характерны частые изменения различных мелочей. Но зато он ориентирован на перспективу – не только на те гаджеты, которыми мы пользуемся прямо сейчас, но и на те, что будем юзать лет через 5.
Если вы решили сделать адаптивную версию дизайна вашего сайта, но не знаете с какой стороны подойти к данной задаче, и у вас не подходящего специалиста на примете, вы можете обратиться к программистам “Студии 17”.
Что такое адаптивный веб-дизайн
Оформление сайта, при отображении которого страницы автоматически подстраиваются под разрешение и даже под текущий формат экрана устройства, а потому одинаково наглядно и удобно просматриваются на компьютерах или ноутбуках, на планшетах, смартфонах и даже телевизорах. Человеку, посещающему ресурс с телефона, не придется вручную расширять какую-то область, чтобы не промахнуться по нужной ссылке, все иконки и надписи будут четкими, а не размытыми, даже на ТВ с широкой диагональю, и так далее.
По-английски он называется Adaptive Web Design, и данный термин метко отражает, каким он должен быть – гибким и функциональным.
Зачем нужна адаптивная версия сайта
Ее стоит внедрить, как минимум, по трем причинам, каждая из которых достаточно важна сама по себе:
Чтобы к вам «в гости» было одинаково комфортно заходить с любого гаджета – сегодня люди бродят по интернет-просторам с помощью айфонов и нетбуков, отличающихся между собой размерами и разрешением экрана; чтобы обеспечить удобство всем и каждому, необходимо реализовать автоматически подстраиваемый интерфейс.
Чтобы ваш ресурс чаще посещали с нестационарных устройств, и мобильный трафик планомерно увеличивался – за последние годы в разы возросло количество людей, пользующихся для серфинга смартфонами и планшетами; их нельзя игнорировать, ведь часть из них – ваша целевая аудитория, а потому важно создать им все условия, чтобы они захотели побывать у вас снова.
Чтобы оперативно предоставлять клиентам/подписчикам ценную информацию – сегодня горячую новость или срочное уведомление человеку проще прочесть с телефона (ведь он всегда под рукой, а до компьютера, бывает, еще нужно добраться).
Преимущества и недостатки адаптивного дизайна
Универсально подстраивающаяся под гаджеты версия сайта обладает такими достоинствами:
Экономит силы, средства, время на обслуживание – с нею нет необходимости поддерживать сразу несколько ресурсов, достаточно обеспечивать бесперебойную работу одного.
Повышает число показов в отчетах аналитических сервисов Гугла и Яндекса – благодаря тому, что синхронизирует запросы от различных устройств.
Упрощает SEO-продвижение – у каждой страницы будет только один URL, соответственно, все ссылки будут в равной степени удобными для конечного пользователя.
Вообще не требует сложных серверных компонентов – адаптивный сайт нуждается лишь в разовой модификации базовых стилей CSS-стилей, тогда контент будет подстраиваться под девайс юзера.
Помогает быстрее рекламироваться в социальных сетях – получать лайки в ВК и Facebook, собирать больше твитов и тому подобное; опять же, все из-за одинаковых УРЛов.
Минусы тоже есть, и это:
Сложность совмещения с уже существующим ресурсом – проще создать новый web-проект, чем переписывать старый.
Размещать картинки высокого разрешения довольно проблематично – для этого зачастую приходится использовать решения “в обход” основных, вроде библиотеки Sencha либо плагина Adaptive Images.
Страницы весят больше, чем обычно – из-за загрузки файлов JavaScript и уже упомянутых стилей CSS у них появляются «дополнительные» килобайты.
На практике достоинства гораздо существеннее недостатков.
Принципы адаптивной верстки
Разработчики стараются не только передать корпоративный дух, назначение и основные идеи проекта или обеспечивать его необходимым функционалом, но и снабдить его определенными свойствами, удобными для последующей универсальной подстройки.
Прочность
Мобильная версия должна быть схожей с десктопной по оформлению, но при этом важно, чтобы она оказывалась гораздо более компактной: чтобы при ее открытии со смартфона информационные блоки, смещаясь, автоматически выстраивались по вертикали – по порядку, так называемым потоком.
Относительность единиц измерения
Обязательно учитывайте, что 320 px разрешения на практике по-разному выглядят на айфоновском дисплее и на широкоформатном мониторе компьютера, поэтому следует задавать масштаб с координатами относительно тех объектов, что есть на каждом устройстве. Стандартом сегодня является верхняя граница экрана – равняются именно по ней.
Использование контрольных точек
Осуществляется привязка к тем элементам, местоположение которых остается статическим до тех пор, пока не будет выполнен вход с другого гаджета. Это своеобразные фиксаторы, и они не дают изображениям «уползать» за границы.
Максимальные и минимальные значения
Можно задать лимиты ширины и высоты пикселей, чтобы текстовая информация (и другой контент) либо корректно отображалась на весь дисплей, либо на его часть, но не растягивалась и оставалась читабельной.
Вложенность объектов
Если один блок зависит от размещения другого, их допустимо отправлять в общий контейнер, чтобы они были взаимосвязаны, и тогда их не придется подстраивать. Такой прием работает с кнопками, лого, да много чем еще.
Правильные шрифты
Их можно перевести в web-формат, чтобы они автоматически увеличивались/уменьшались, исходя из диагонали экрана. Но помните, что тогда они будут подгружаться, тогда как адаптивный сайт – это ресурс, контент которого отображается не только корректно, но и быстро (современный пользователь точно не станет долго ждать, чтобы посмотреть страницу, а уйдет искать другую).
Грамотное использование графики
Если изображение детализированное, стоит сделать его растровым, если же нет – векторным. И каждую картинку лучше оптимизировать, то есть сжать, но так, чтобы ее поддерживали даже старые браузеры.
Выдерживание размеров макетов
Важно соблюсти подходящее разрешение – среди стандартных вариантов:
320, 480 px – для смартфонов,
768 – для всевозможных планшетов,
1024 – для нетбуков,
от 1280 – для стационарных компьютеров.
Хотя жесткого соблюдения норм не предусмотрено – допустимы и промежуточные варианты. Но тогда в качестве точек «перелома» принимают фактические значения ШхВ нестандартного гаджета.
Правильные медиазапросы
С их помощью при создании ресурса задаются:
типы поддерживаемых девайсов,
условия показа тех или иных объектов.
На каждый будут подгружаться соответствующие стили CSS-языка.
Размеры макетов
Еще одно, заслуживающее отдельного внимания, правило адаптивного дизайна – это mobile first: в первую очередь разрабатывают решения под мобильные, и уже потом, на их основе, делают связанную с ней десктопную версию. Шаблоны разделяются (по ширине экрана) на 6 вариантов, растущих следующим образом, в пикселях:
320,
480,
768,
1024,
1280,
1600.
Внимание, если нет «переломов» на большем промежутке, допустим, с 320 по 1024 px, то не будет и практического смысла предлагать отдельные решения под меньший, например, с 320 по 768.
Viewport и Media query
Это важные параметры, которые необходимо правильно задавать. Первый – это мета-тег, говорящий браузеру о том, нужно ли увеличивать/уменьшать страницу, и как отображать присутствующие на ней объекты. Его следует записать в <head> таким образом:
Первая часть после него определяет, что ширины растягивания контента и экрана совпадают, вторая устанавливает масштаб 1 к 1.
Также верстка адаптивного сайта подразумевает использование css3 медиазапросов. Выше мы определили, что они должна включать в себя, теперь посмотрим способ их записи:
@media screen and (max-width: 768px) {
.class {
свойство: значение;
}
}
Здесь:
@media – сам запрос,
screen – носитель,
max-width – обязательное условие к выполнению (тут – ширина не достигает 768 пикселей),
class – селекторы, определяющие рабочие параметры.
При создании web-ресурса используются функции, указывающие цвет, ШхВ, сетку, ориентацию объектов, разрешение. Текущие цифры, сразу по достижению которых изменяется оформление, называют точками “перелома” (контроля), от английского breakpoints. Также находится место для логических операторов and, not и only (И, НЕ, только соответственно).
Типы адаптивных макетов
Существует 5 основных вариантов шаблонов – рассмотрим каждый.
Резиновый
Сравнительно легко реализуется, максимально наглядный для пользователя. Объекты при нем сжимаются, подстраиваясь под размер экрана, или вытягиваются длиной лентой для удобного скроллинга.
Перенос блоков
Хорош тогда, когда предусмотрено много колонок с данными. Согласно ему, при уменьшении диагонали дисплея сайдбары смещаются вниз.
Переключение
Трудоемкий в создании и внедрении, а поэтому не самый популярный способ. При его реализации под каждое актуальное разрешение нужно создать свой макет (а потом между ними будет осуществляться автоматический выбор – по ситуации).
Адаптивность «малой кровью»
Вариант, отлично подходящий для простых по структуре и функционалу проектов. Типографика и изображения банально масштабируются. Правда, он не гибкий, ведь уменьшение/увеличение ШхВ происходит на фиксированный коэффициент и не может динамически меняться.
Панели
Здесь при вертикальном/горизонтальном тапе всплывает меню, как во многих мобильных приложениях. Для фанатов десктопного серфинга подобная навигация будет не самой очевидной, но этот способ построения шаблонов сегодня считается очень перспективным, так что придется привыкать.
Что такое адаптивный дизайн сайта, и чем он отличается от отзывчивого
Они довольно похожи, но принципиальная разница есть в технологии их реализации:
Responsive Design (RWD) создается с гибкой сеткой или другими подходящими, но статическими свойствами, позволяющими одному шаблону быть актуальным для нескольких гаджетов.
Adaptive (AWD) проектируется с условиями, изменяющимися, исходя из устройства серфинга, в его базе есть уже ряд макетов, он динамический и ориентирован на диагональ экранов.
Во втором случае во главу угла ставится функциональность – особенности девайса учитываются в обязательном порядке. От размеров дисплея напрямую зависит характер расположения блоков. При разработке отзывчивого ведущую роль играют медиазапросы и относительная сетка, заданная в процентах.
Есть разница и в работе серверных скриптов: при AWD они сначала определяют, с чего заходит человек, а потом загружают оптимизированную под этот гаджет версию страницы.
Что лучше использовать? Зависит от структуры web-ресурса: если она «резиновая», отзывчивость будет весьма удобной, вот только от нее может снизиться скорость загрузки (при наличии большого количества визуальных элементов).
Зато адаптивность сайта – это мощный инструмент во всех остальных случаях: он развязывает дизайнерам руки, дает возможность разделить юзеров на категории и предложить каждой ориентированные на нее решения. Проще говоря, владельцы смартфонов будут видеть один макет, созданный именно для их удобства, планшетов – другой, стационарных ПК – третий.
Разница прекрасно видна по блогам, напичканным фото, текстами, броскими заголовками, функциональными кнопками. При RWD, зайдя с айфона, вы увидите его уменьшенную копию, при AWD – облегченную, которая загрузится гораздо быстрее. Да, навигация будет отличаться, но для современных продвинутых пользователей это, скорее, преимущество, а не проблема.
Итак, резюмируем, выделяя ключевой показатель:
Responsive
Adaptive
Один, но гибкий шаблон для всех девайсов
Сразу несколько макетов – для каждого гаджета свой
Отличие адаптивного сайта от мобильной версии
Созданные под конкретные модели и операционные системы телефонов и планшетов приложения – тоже вариант, у которого, правда, есть определенные недостатки:
под всякую новую ОС требуется отдельное решение, что сопровождается дополнительными затратами ресурсов на разработку;
программный продукт нужно загружать (а иногда даже покупать) – это дополнительные усилия со стороны пользователя, и далеко не все захотят их предпринимать; ленивых требуется убеждать, что это ПО полезно, тратиться на рекламу и тому подобное;
траффик разделяется на два потока, и кажется, что посещаемость меньше;
материалы web-ресурса приходится интегрировать – либо синхронизируя с работой мобильной версии, либо параллельно наполняя контентом сразу два ресурса, а это двойной труд.
И вот тут уместно еще раз упомянуть термин «адаптивная верстка сайта»: что это такое в данном контексте? Здесь это комплекс мер, предпринимаемых разработчиками для создания web-проекта с одним адресом, оформлением, контентом и системой управления, одинаково удобным для просмотра со всех активно используемых устройств. Да, минусы у этой технологии тоже есть, но они весьма относительны. Главным недостатком считается новизна: пока ею в совершенстве владеет лишь малое число специалистов. Но зато какие перспективы она открывает! Ею будут пользоваться и через 5 лет, когда, вполне вероятно, появятся какие-то принципиально иные гаджеты.
Образы в адаптивном дизайне: примеры
Под этим понятием скрываются изображения, отлично масштабируемые при разных размерах браузера, – рассмотрим существующие нюансы.
Применение свойства width
Если его значение равняется 100%, картинка будет увеличиваться/уменьшаться вверх/вниз.
Записывается оно так:
<img src=”img_dog.jpg” style=”width:100%;”>
В ряде случаев то же фото можно растянуть сверх исходного размера, но тогда уж лучше указывать в коде следующий оператор.
Использование max-width
Если его показатель в 100%, объект изменяет свой масштаб по мере необходимости, но никогда не становится больше первоначального.
Варианты разработки и примеры адаптивных версий сайтов
Итак, можно:
Заказать web-ресурс у профессионалов – самый простой и надежный выбор, ведь специалисты решат вопрос максимально качественно. Подходящих разработчиков вы найдете в лице коллектива Студия17 – обращайтесь.
Найти уже готовое оформление и начать его использовать – подходит для тех, кто не ищет эксклюзивности, но при этом разбирается в теме настолько, чтобы самостоятельно переписать часть кода.
Применить фреймворки, то есть каркасы с основными объектами, и уже на их основе достроить свое детище. Этот способ хорош тем, что позволяет получить и бесценный опыт конструирования, и уникальный набор шаблонов.
Как сделать адаптивную верстку сайта на базе фиксированного макета
Если есть рабочая и уже проверенная тема, нужно:
сделать ее резервную копию;
установить редактор CSS-кода, допустим, Notepad++ или бесплатный Adobe Brackets;
запустить Google Chrome и нажать F12.
После такой подготовки можно приступать к основной части – следует:
Перенести проект на локальный сервер, чтобы он был временно недоступен пользователям.
Добавить мета-теги и перевести абсолютные единицы измерения в относительные (пиксели – в проценты).
Оставить без изменения max-width, то есть основную ширину, остальные выразить в %, разделив их на главную (родительскую).
Изменить размеры шрифтов на em, найдя частное между нужными и стандартными. Если по умолчанию они 16px, а вам нужно 24, получится 24/16 = 1,5 em.
Прописать в CSS свойство «height: auto», благодаря ему картинки будут автоматически масштабироваться (правда, без изменения веса).
Это основные мероприятия, после них останется найти точки «перелома» – те, в которых наблюдаются перестройки шаблона. Искать их следует, постепенно уменьшая размер окна Google Chrome, и как только оформление перестанет корректно показываться, зафиксировать первую breakpoint в файле «style.css», а затем следующую и так до конца. Отступы блоков обнуляются.
Когда вы сделаете все это, то увидите, как элементы подстраиваются под различные размеры экрана.
Обязательно ли использовать Adaptive Web Design?
Над таким вопросом можно было раздумывать несколько лет назад, сегодня же его внедрение – необходимость. Потому что статистически фиксируемые объемы мобильного траффика неуклонно растут: все больше пользователей серфят по интернет-просторам именно с планшетов и, особенно, со смартфонов, и этим людям нужно давать возможность открывать удобную к просмотру версию веб-проекта, ведь это ваша целевая аудитория.
Мы подробно рассказали, что такое адаптивная верстка сайта, примеры макетов и варианты решений тоже привели, но готовы помочь вам еще больше. Обращайтесь в компанию Студия17, заказывайте наши услуги, и мы разработаем современный web-ресурс с AWD, одинаково дружелюбный ко всем его посетителям.
Адаптивный дизайн сайта | Виды адаптивных мобильных дизайнов
Количество устройств с выходом в интернет, постоянно растет. Сначала к компьютерам добавились смартфоны, потом планшеты, теперь телевизоры. Кто знает, каким образом мы будем выходить в Сеть завтра. Очевидно, что дизайн сайтов нужно адаптировать для всех возможных экранов: стационарных и мобильных. Эту задачу решает адаптивный дизайн.
Содержание
Что такое сайт с адаптивным дизайном?
Вы наверняка замечали, что некоторые сайты по-разному выглядят на разных экранах, то есть на большом мониторе мы видим, к примеру, три колонки, развернутое меню и много других функциональных блоков. На экране мобильного устройства колонка уже одна, меню перегруппировано, большая часть элементов управления скрыта.
Можно подумать, что перед нами совсем другой сайт, созданный специально для мобильных устройств. Так, к слову, раньше и делали, но сейчас дизайнеры предпочитают создавать универсальный дизайн, который автоматически подстраивается под любой размер экрана. Делать это можно разными способами.
Виды адаптивных мобильных дизайнов
Подходы к созданию мобильных сайтов развиваются. Первым из них был так называемый резиновый дизайн, когда контент растягивался или сжимался. Для разных разрешений стационарных мониторов такой подход был вполне применим, но адаптировать дизайн сайта для маленьких экранов смартфонов он уже не мог. Изображение и текст становились слишком мелкими. Поэтому появились более функциональные методы.
Адаптивный макет. В этом случае проект сайта создается на основе нескольких макетов, фиксированных для стандартных размеров экранов. Фактически дизайнер проектирует несколько разных дизайнов, между которыми выполняется автоматическое переключение. Размеры блоков сайта в этом случае всегда заданы жестко (в px).
Отзывчивый макет. При таком подходе создается проект сайта с гибкой сеткой, гибкими изображениями и медиазапросами. Иначе говоря, размер блоков задается не в пикселях, а в процентах от размера экрана. Для такого дизайна не имеет значения, открыт сайт на мобильном устройстве или на десктопе — макет в любом случае будет выглядеть хорошо.
Смешанный макет. Если дизайнер хочет сделать макет максимально адаптированным к всевозможным размерам экранов, он может комбинировать оба подхода. В одних случаях выставлять размеры в пикселях, в других — в процентах, увеличить насколько возможно количество возможных разрешений экранов. Такой подход называют mobile last (от англ. — «последними мобильные»). Его чаще всего используют при создании мобильного сайта на основе классического.
Обратите внимание, что термин «адаптивный макет сайта» — это совсем не то же самое, что адаптивный дизайн сайта. Макет — это лишь изображение, показывающее расположение элементов сайта. Дизайн же — понятие более общее, отражающее подход к работе.
В чем разница между отзывчивым и адаптивным дизайном сайта?
Отзывчивый дизайн основан на трех принципах:
резиновый макет;
медиазапросы;
резиновые изображения и видео.
Все это реализуется средствами HTML+CSS, потому что такой код будет работать на абсолютно любом устройстве: и мобильном, и стационарном. Но при этом мы получаем сильные ограничения по функциональности. Фактически дизайнер разрабатывает только мобильный сайт, который будет просто визуально изменяться под размер экрана.
Адаптивный дизайн основан на отзывчивом, но дополнен концепциями прогрессивного улучшения и mobile first (от англ. — «сначала мобильные»). Эти концепции заключаются в том, что разработка начинается с создания мобильного, самого простого сайта, который постепенно усложняется. На базу из HTML+CSS наращивают улучшения и функциональные элементы, реализуемые средствами CSS+JS.
Выглядеть это будет следующим образом: адаптивный сайт, отображаемый на мобильном устройстве, имеет базовые возможности для взаимодействия с пользователем, при этом большая часть элементов управления будет скрыта. На планшете с большим размером экрана часть элементов управления будет доступна сразу, это уже не совсем мобильный, но еще и не полноценный сайт. На большом экране десктопа адаптивный дизайн «продемонстрирует» нам сайт с максимальным усложнением и функциональностью: всплывающими окнами, онлайн-консультантом, динамическим контентом и так далее.
Универсальные шаблоны для адаптивного дизайна
Каким именно образом делать дизайн адаптивным, каждый решает сам. Можно создать полностью свой макет, а можно использовать один из вариантов, предложенных Люком Вроблевски — основоположником концепции «сначала мобильные».
MostlyFluid («самый гибкий»)
Этот макет основан на резиновой сетке, но на больших экранах она не растягивается, а остается неизменной — увеличиваются лишь поля. Зато при уменьшении экрана колонки сначала сжимаются, а при достижении контрольной точки выстраиваются друг под другом. Основным достоинством этого шаблона можно назвать то, что контрольная точка, на которой происходит переход адаптивного мобильного дизайна на новое расположение элементов, всего одна.
Column Drop («сброс колонок»)
Этот адаптивный шаблон подразумевает видоизменения дизайна следующим образом: при уменьшении размеров экрана колонки выстраиваются вертикально друг под другом, но не все сразу, как в предыдущем шаблоне, а постепенно. Контрольные точки для этого шаблона нужно выбирать в зависимости от вида контента.
LayoutShifter («сдвиг макета»)
Один из самых сложных макетов для адаптивного дизайна, но в то же время и один из самых эффективных. В нем предусмотрено несколько контрольных точек, переход через которые приведет не только к другому размещению колонок, но и к перемещению контента.
Tiny Tweaks («маленькие хитрости»)
Не такой универсальный шаблон, как предыдущие, потому что подходит лишь для дизайна из одной колонки. Это, к примеру, большие статьи, лендинги или одностраничные сайты. В этом случае при изменении размера меняется размер шрифта и изображений, перемещаются отдельные блоки.
Off Canvas («за границами»)
Идея этого шаблона заключается в том, что на большом экране десктопа видны все меню и элементы навигации. Но стоит открыть его на устройстве с меньшим размером дисплея, как часть элементов будет скрыта за границами экрана. В любой момент их можно будет вызвать, а затем скрыть обратно.
Эти шаблоны необязательно использовать поодиночке. Их вполне можно комбинировать — например, Off Canvas хорошо сочетается с Column Drop.
Обязательно ли использовать адаптивный мобильный дизайн?
Еще несколько лет назад над этим вопросом действительно можно было думать. Сегодня объем трафика с мобильных устройств растет с каждым днем, а значит, делать сайты, которые будут нормально выглядеть только на десктопах, просто неразумно.
Полезно
8
Как построить адаптивный сайт при помощи CSS?!
Все говорят об адаптивном веб-дизайне. Но значит ли это, что все понимают, для чего он нужен?
Респонсивный дизайн – это не только разработка сайтов для мобильных устройств, здесь речь идет об адаптации макетов под разные размеры экрана (viewports).
В этом уроке мы рассмотрим основные принципы, лежащие в адаптивном веб-дизайне, для лучшего понятия этой техники. Затем, мы создадим адаптивный веб-сайт, который будет отлично масштабироваться на больших и малых экранах. Респонсивный веб-дизайн стал очень популярным, когда все больше и больше людей используют мобильные устройства, такие как iPhone, iPad, BlackBerry, а также другие смартфоны и планшеты с доступом к интернету.
Важно понимать, что сайт не должен быть построен под конкретный рабочий стол или мобильное устройство. Здесь важна способность макета адаптироваться под различные размеры.
Разочарование пользователей
Некоторые люди думают, что сократить функционал и устранить контент, который они считают несущественным, это является нормальным для пользователя. Но как вы можете быть уверены, что информация, которую вы урезали или перенесли на вторичную страницу, не является контентом, который наиболее важный для меня?!
Во-первых, нужно понимать, что респонсивный дизайн, это не только забота о мобильном дизайне. Во-вторых, разработка хорошего адаптивного сайта, требует большое количество времени и усилий, а не только помощь медиа-запросов. С огромным и все возрастающим числом веб-устройств, очень важно, дать своему веб-сайту шанс эффективно облегчить пользовательский опыт.
Для респонсивного веб-сайта, мы можем использовать один и тот же код как для настольного компьютера, так и для мобильного устройства. Это удобно тем, что мы не должны отдельно корректировать контент для каждого устройства. Но многие веб-сайты скрывают свое содержимое, считая его ненужным для мобильных пользователей. В этом есть две проблемы:
Во-первых, это эффективно наказывает мобильных пользователей, просматривающих сайт.
Во-вторых, скрытые стили в CSS, не означает, что контент не загружается. Это может массово повлиять на эффективность, особенно для тех, у кого плохая связь.
Поэтому лучшим подходом к разработке веб-сайта, заключается в рассмотрении дизайна мобильных или небольших устройств, в первую очередь. Таким образом, вы сможете сосредоточиться на наиболее важной информации, которую ваш веб-сайт должен выдать. А потом, при необходимости, можно использовать условные методы загрузки, где ваши сетки макета, большие изображения и медиа-запросы, нанесены поверх уже существующей мало-экранного дизайна.
Пошаговое руководство
Для этого урока, мы создали веб-сайт, который прекрасно масштабируется между большими и малыми экранами. Вы сохраняете весь контент, на всех размерах экрана. И с помощью медиа запросов, навигация будет переключена с горизонтального на вертикальный дисплей, для небольших устройств.
Ключевым элементом гибкости в адаптивном дизайне, является fluid ширина макета. Все, что вам нужно сделать, это создать wrapper, content и column widths, которые будут адаптироваться под различную ширину устройств. В этом нет ничего нового, но сейчас это важнее, чем когда-либо. Чтобы не усложнять задачу, мы создадим fluid страницу, состоящую из навигации, главного изображения и двух колонок, которая учитывает расположение на устройствах различных размеров. Мы, также включили respond.min.js, который позволяет медиа-запросам работать в IE6-8.
Основная HTML структура:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Респонсивный сайт Демо</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
<link href="styles/main.css" type="text/css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type='text/javascript' src='scripts/respond.min.js'></script>
</head>
<body>
<div>
<header>
<nav>
<ul>
<li>
<a href="#main" title="к главному контенту">Скролл к контенту</a>
</li>
</ul>
</nav>
<h2>Logo</h2>
<nav>
<ul>
<li><a href="#" title="Home">Главная</a></li>
<li><a href="#" title="About">Купить</a></li>
<li><a href="#" title="Work">Сервис</a></li>
<li><a href="#" title="Contact">Контакты</a></li>
</ul>
</nav>
<div>
<img src="images/merc.jpg" alt="banner" />
</div>
</header>
<section>
<h2>Технические данные</h2>
<p>Открытый автомобиль Mercedes 190 SL называли кабриолетом из-за трёхместной компоновки салона.
Двигатель ставили один — новый четырёхцилиндровый агрегат рабочим объёмом 1,9 л. «Четвёрка» получилась путём
отсечения двух цилиндров от рядного мотора родстера 300 SL Gullwing. У двух двигателей одинаковый диаметр
цилиндра (85 мм), но ход поршня уменьшился с 88 до 83,6 мм. На «сто девяностом» мотор, оснащённый двумя
карбюраторами Solex, выдавал 105 сил и 142 Н•м. Кабриолет (сухая масса — 1160 кг) комплектовался полностью
синхронизированной «механикой» с четырьмя ступенями и мог разгоняться до 171 км/ч. Покупателям были доступны машины как с мягким верхом (цена — $3998), так и с демонтируемым жёстким ($4295).
Производство в Штутгарте шло с 1955 по 1963 год, а всего был сделан 25 881 автомобиль. </p>
</section>
<aside>
<h2>История</h2>
<p>История модели Mercedes SL уходит корнями в 1954 год — именно тогда на автосалоне
в Нью-Йорке немцы представили двухдверку Mercedes 190 SL. Можете себе представить уровень эстетического шока посетителей тогдашнего мотор-шоу. Под кузовом пленительной красоты скрывалась
укороченная платформа от седана Mercedes W120 Ponton и стальной монокок. Подвеска была полностью независимая — с двухрычажкой спереди и качающимися полуосями сзади. Длина — 4290 мм,
расстояние между осями — 2400 мм. </p>
</aside>
</div>
</body>
</html>
CSS
Когда дело доходит до CSS, то установить max-width, будет хорошей идеей, это остановит сайт от масштабирования на огромных экранах, но не будет удерживать от сокращения страниц. Один из основных вопросов при переключении с фиксированной ширины на fluid, это изображения. В CSS, есть простое решения этой проблемы. Просто установите ширину изображения на 100%. Также добавим auto для высоты изображений, чтобы избежать сплющенных изображений в Опере и Сафари на малых экранах:
Ваше изображение будет отображаться на его родительском элементе в полную ширину, и будет сжиматься вместе с ним. Только убедитесь, что изображения max-width, не превышают максимальную ширину его контейнера.
Использование больших изображений может влиять на время загрузки. Поэтому для небольших экранов, существует респонсивный метод для изображений, который определяет размер экрана пользователя, и выдает меньше/больше картинку, в зависимости от того, что необходимо. Этот метод, пока еще сложно назвать идеальным, но все таки стоит его рассмотреть.
Переключение главной навигации
Основная причина, почему вам надо сменить навигацию, это происходящая минимизация, которая может привести к нечитаемости и трудности нажатия кнопок. Используя этот метод, вы облегчите жизнь пользователя. Вы также можете заметить в коде, что мы внесли изменения в #main и aside разделы, для соединения их в одну колонку.
Вы заметите, что на некоторых мобильных устройствах, ваш веб-сайт, автоматически сжимается под размеры данного экрана. Этот момент, как раз и становится проблемой, когда нам нужно увеличить размер экрана, чтобы навигировать по неудобному содержания.
Чтобы разрешить медиа-запросам войти в полный эффект, обычный мобильный, оптимизированный, респонсивный сайт должен содержать что-то вроде следующего:
Cвойство width, отвечает за размер области просмотра. Он может быть установлено на определенное число пикселей, width=960, или на device-width значение, что является шириной экрана в пикселях в масштабе 100%. initial-scale свойство управляет масштабом при первой загрузке страницы. maximum-scale, minimum-scale, и user-scalable свойства, контролируют то, как пользователи могут масштабировать страницу (больше/меньше).
Высоких конверсий!
10-03-2016
Адаптивный дизайн сайта и основные стратегии по его внедрению
От автора: адаптивный дизайн сайта — это совершенно новый подход к дизайну, который привлекает к себе все больше внимания, но, учитывая, насколько сильно он отличается от традиционных методов разработки, вначале он может показаться заоблачно сложным для начинающих веб-дизайнеров и разработчиков. В этой статье я собираюсь осветить некоторые важнейшие моменты, связанные с разработкой и внедрением адаптивного веб-дизайна и сделать вашу жизнь, друзья, немножечко легче .
Классический подход к созданию сайта выглядит примерно так: блок по разработке, блок по веб-дизайну, блок по верстке и т. д. Однако, в последние несколько лет все начало меняться кардинальным образом: термин «веб-дизайн» постепенно угасает, в то время как «адаптивный дизайн» коварно укрепляет свои позиции, постепенно совершая сдвиги в сознании специалистов.
По большому счету, веб-дизайн не стоит воспринимать так уж однозначно, а стремительное развитие адаптивного дизайна, который считается уже почти индустриальным стандартом, повлекло за собой целую карусель различных инструментов и платформ.
Понятие адаптивности
«Что такое адаптивный дизайн и к чему он адаптируется?» — может спросить человек несведущий. Я вам отвечу: к виду используемого устройства. Адаптивный дизайн обеспечивает хорошее восприятие веб-страниц на различных гаджетах, подключенных к интернету.
Один и тот же сайт должен отлично смотреться на ноутбуках, смартфонах, планшетах и т. д., независимо от формата экрана и используемого разрешения. При этом пользователям должно быть одинаково удобно просматривать веб-страницы для всех форматов, без необходимости, к примеру, расширять отдельные блоки, чтобы не промахнуться мимо нужной кнопки.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнее
Из-за того, что каждый адаптивный проект является индивидуальным и итеративным, проанализировать все его процессы, чтобы дать решения на все случаи жизни и повысить эффективность работы, довольно сложно. Тем не менее, существуют общие успешные стратегии и техники по внедрению, улучшению и созданию адаптивного дизайна сайта, которые можно применять практически в любых случаях.
Стратегия «Mobile First»
Данная стратегия разработки была предложена еще в 2009-м году Люком Вроблевски — автором книг и статей по веб-дизайну, руководителем социальной сети Bagcheck, которую всего через 9 месяцев после создания приобрела компания Twitter Inc.
Предложенный Люком Вроблевски подход к разработке получил название «Mobile First» («Первым делом мобильные») по трем причинам:
мобильная среда позволяет фокусироваться и избавиться от беспорядка, возникающего вследствие «захламления» большого количества места на экране;
мобильный рынок имеет тенденцию к развитию бешеными темпами;
мобильная среда связана с множеством возможностей (камера, мультитач-жесты, GPS, акселерометр, геолокация).
С тех пор веб-дизайн уверенно смещается в сторону этого подхода. Многие веб-дизайнеры и веб-разработчики вначале задумываются о том, как сделать адаптивный дизайн мобильной версии сайта, а затем уже занимаются десктопной разработкой.
Стратегия «Mobile First» предполагает в качестве стартовой точки создание структуры и контента мобильной версии, работающей в условиях низкой скорости интернета, и движение к крупным точкам прерывания с более быстрым соединением, одновременно с улучшением и оптимизацией упрощенных версий.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнее
Таким образом, обеспечивается инновационная и эффективная работа всех видов устройств. Разработчики сайта фокусируются на нуждах пользователей, создают оптимизированные и высокоскоростные страницы, обращают внимание на важный контент. Кстати, подходом «Mobile First» пользуется даже Google.
Контентная стратегия «Content out»
Цель создания адаптивного дизайна — это обеспечить наилучшее юзабилити в любом контексте. Это отличный повод для того чтобы проанализировать контент, сделать его легкодоступным и читабельным на всех видах устройств.
Многие из тех, кто не использует стратегию «Первым делом мобильные», отдают предпочтение стратегии «Первым делом контент». Это, конечно, дело правильное, однако, не стоит воспринимать этот призыв буквально и считать, что не следует начинать разработку дизайна до тех пор, пока не будет готов весь контент.
Наполнение должно непрерывно создаваться и обсуждаться как на этапе создания адаптивного дизайна сайта, так и после его завершения! Как сказал известный дизайнер Cennydd Bowles, «дизайн и контент должны идти рука об руку». Они должны дополнять друг друга.
Совсем другое дело — стратегия «Первым делом структура контента». В первую очередь, вам нужно точно определиться с миссией сайта, что он пытается сообщить миру. А уж затем тщательно продумать структуру его наполнения, способы создания, типы и предназначение каждого элемента, при этом во главу угла нужно ставить именно пользователя.
У вас должна быть заготовлена стратегия, благодаря которой вы будете обеспечивать каждого юзера необходимым контентом на каждом этапе его пути на вашем ресурсе. Структура сайта должна быть основана на исследовании поведения и потребностей вашей целевой аудитории.
Если на начальных стадиях разработки сайта вы хорошо структурируете контент, в будущем вы легко перенесете его на другие платформы и устройства. Разумеется, не помешает и пример адаптивного дизайна — образец, на который вы будете ориентироваться.
Уделите время созданию скетча и прототипа
Решение вопроса, под какие разрешения делать адаптивный дизайн, должно начаться с создания организованного макета — скетчинга, который в дальнейшем будет легко масштабировать.
Разнообразие устройств с их возможностями, разрешениями и размерами экрана означает большое количество макетов. Создание скетча позволит заложить базу для будущего прототипа проекта. С его помощью можно вынести на обсуждение различные идеи, сделать грубые наброски, которые лягут в основу каркаса сайта.
После того, как скетч готов, можно переходить к созданию работающей черновой версии сайта или HTML-шаблона. Этот процесс называется прототипированием, и он подразумевает минимальное визуальное оформление, для того чтобы усовершенствовать взаимодействие и функциональность.
Данная стратегия поможет вам переосмыслить весь подход к созданию адаптивного дизайна. Теперь вы не станете разрабатывать «мобильные сайты» и «веб-сайты», а сконцентрируетесь на разработке гибких систем с набором правил, которые определяют доставку контента и его предоставление, в зависимости от контекста.
Надеюсь, данная статья была полезна как опытным, так и начинающим веб-дизайнерам.
Ну и традиционное напутствие напоследок: делайте сайт полезным, удобным и привычным, независимо от устройства, на котором его просматривают. До новых встреч, друзья!
P.S.: а вы уже подписались на обновления нашего блога?
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнее
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!
Смотреть видео
Адаптивный веб-дизайн — Как сделать сайт хорошо выглядящим на телефонах и планшетах
В быстро развивающемся мире подключенных устройств адаптивный веб-дизайн по-прежнему имеет решающее значение в веб-разработке.
Еще недавно термина «адаптивный веб-дизайн» не существовало. Но сегодня большинству из нас пришлось в той или иной степени принять его.
По данным Statistica, по состоянию на 2019 год 61% всех посещений в поисковой сети Google совершается на мобильных устройствах. В сентябре 2020 года Google изменит свой алгоритм поиска, чтобы отдавать предпочтение сайтам, оптимизированным для мобильных устройств.
В этом посте я расскажу о следующем:
Что такое адаптивный веб-дизайн?
Метатег области просмотра и его назначение
Эффективные методы, используемые в адаптивном веб-дизайне для мобильных и планшетных устройств
Инструменты, помогающие моделировать и контролировать взаимодействие с пользователем мобильных устройств и планшетов
Что такое адаптивный веб-дизайн? (RWD)
Адаптивный веб-дизайн — это подход, ориентированный на среду пользователя веб-сайта.Среда пользователя будет зависеть от того, какое устройство он подключил к Интернету.
Есть много характеристик устройства, которые предоставляют возможности для ориентации на пользователя. Некоторые из них включают:
сетевое соединение
размер экрана
тип взаимодействия (сенсорные экраны, трекпады)
графическое разрешение.
До того, как адаптивный веб-дизайн стал популярным, многие компании управляли полностью отдельным веб-сайтом, который получал трафик, перенаправляемый на основе пользовательского агента.
Но в адаптивном веб-дизайне сервер всегда отправляет один и тот же HTML-код на все устройства, а CSS используется для изменения отображения страницы на устройстве.
Независимо от двух вышеперечисленных стратегий, первый шаг в создании веб-сайта для телефона или планшета — убедиться, что браузер знает намерение. Здесь в игру вступает метатег области просмотра.
Метатег области просмотра указывает браузеру, как настроить страницу по ширине каждого устройства.
Когда элемент meta viewport отсутствует, мобильные браузеры будут отображать веб-страницы с настройками рабочего стола по умолчанию.Это приводит к кажущемуся уменьшению масштаба и зависанию.
Ниже представлена стандартная реализация:
Пример метатега окна просмотра
Теперь, когда браузер знает, что происходит, мы можем использовать популярные методы, чтобы сделать наш веб-сайт адаптивным. ?
Если вы новичок в адаптивном веб-дизайне, мультимедийные запросы — это первая и самая важная функция CSS, которую нужно изучить. Медиа-запросы позволяют стилизовать элементы в зависимости от ширины области просмотра.Одна из популярных стратегий CSS — сначала написать мобильные стили и построить на их основе более сложные, специфичные для настольных компьютеров стили.
Медиа-запросы — важная часть адаптивного веб-дизайна, обычно используемая для макетов сетки, размеров шрифтов, полей и отступов, которые различаются размером экрана и ориентацией.
Ниже приведен пример распространенного варианта использования стиля «сначала мобильные», в котором ширина столбца составляет 100% для небольших устройств, а для больших окон просмотра — 50%.
Приведенный выше код является простым примером, но то, что он делает на самом деле, довольно интересно.
При рассмотрении в первую очередь мобильных устройств, элемент «столбец» имеет ширину 100%;
Используя медиа-запрос min-width , мы определяем правила специально для видовых экранов с минимальной шириной 600px (видовые окна шире 600px ).Итак, для видовых экранов шириной более 600px наш элемент столбца будет иметь ширину, равную 50% от его родительского элемента.
Хотя медиа-запросы необходимы для адаптивного веб-дизайна, многие другие новые функции CSS также получают широкое распространение и поддержку в браузерах. Flexbox — одна из этих новых важных функций CSS с точки зрения адаптивного веб-дизайна.
Что такое Flexbox?
Вам может быть интересно — «что делает Flexbox»? Лучший вопрос — «чего не может Flexbox»? Какой самый простой способ центрировать по вертикали с помощью CSS? Flexbox.Как создать адаптивный макет сетки? Flexbox. Как мы можем достичь глобального мира? Flexbox.
Модуль Flexbox Layout (Flexible Box) обеспечивает более эффективный способ компоновки, выравнивания и распределения пространства между элементами в контейнере, даже если их размер является динамическим (отсюда и слово «гибкий»).
В приведенном ниже примере мы объединяем медиа-запросы, как описано выше, для создания адаптивной сетки.
Создаем макет flexbox с дисплеем : flex в нашем основном элементе контейнера .
Стиль в первую очередь для мобильных устройств. Мы устанавливаем для основного элемента значение flex-wrap: wrap , что позволяет дочерним элементам оборачиваться в нашем макете flexbox, как показано ниже на рисунке 1.Мы устанавливаем flex-base: 100% для наших элементов div , чтобы гарантировать, что они охватывают 100% ширины родительского элемента в макете flexbox (рисунок 1).
Стиль для больших устройств, таких как планшеты и настольные компьютеры. Мы используем медиа-запрос, аналогичный нашему примеру в предыдущем разделе, чтобы установить наш контейнер main element на flex-wrap: nowrap . Это гарантирует, что дочерние элементы не переносятся и что они поддерживают столбец в макете строкового типа. Установив div на flex-base: 33% в медиа-запросе, мы устанавливаем столбцы, ширина которых составляет 33% от ширины родительского элемента.
В этом примере волшебство проявится на больших устройствах с нашими объединенными правилами медиа-запросов и flexbox. Поскольку мы определили дисплей : flex и поскольку мы не переопределили правило в медиа-запросе, у нас есть макет flexbox для мобильных устройств, планшетов и настольных компьютеров. Медиа-запрос flex-base: 33% и унаследованный display: flex правила дадут нам узнаваемый макет flexbox, как показано на рисунке 2. В прошлом, чтобы получить макет этого типа столбца, нам нужно было сделать некоторые серьезная тяжелая работа и написание путаницы в CSS.
Рисунок 1: Пример мобильной гибкой сетки Рисунок 2: Настольный пример гибкой сетки
Flexbox предоставляет отличный способ создания различных, гибких макетов. В некоторых случаях у нас может не быть такой свободы в вертикальном пространстве. Возможно, нам потребуется разместить элемент на фиксированной высоте. В этой ситуации в нашем распоряжении есть еще один прием — горизонтальная прокрутка.
Может наступить время, когда у вас будет контент, выходящий за пределы области просмотра, без изящного способа его обработки. Вот … свиток переполнения приходит на помощь.?
Обычно этот метод используется в прокручиваемых меню и таблицах. Ниже приведен пример прокручиваемого меню.
Адаптивный веб-дизайн
Задний привод
Адаптивное меню
Пример прокрутки переполнения
Это очень много контента!
да
мы
имеют
Другая
элемент
overflow-y: scroll — ключевой ингредиент этого рецепта. Если указать это, дочерние элементы будут переполнять горизонтальную ось с прокруткой.
Не так быстро! Хотя вы можете подумать, что overflow-y будет достаточно, мы также должны указать браузеру не заключать дочерние элементы в пустое пространство : nowrap ?
Теперь, когда у нас в рукаве есть несколько методов компоновки RWD, давайте взглянем на элементы, которые создают проблемы, связанные с их визуальной природой, — изображения и видео.
Адаптивные изображения
Используя современные атрибуты тегов изображений, мы можем работать с различными устройствами и разрешениями. Ниже приведен пример адаптивного изображения.
Установив max-width: 100% изображение будет увеличиваться или уменьшаться в зависимости от ширины контейнера.
Используя комбинацию тегов picture , source и img , мы фактически визуализируем только одно изображение и загружаем только наиболее подходящее изображение в зависимости от устройства пользователя.
WebP — это современный формат изображений, обеспечивающий превосходное сжатие изображений в Интернете. Используя источник , мы можем ссылаться на изображение WebP для использования в браузерах, которые его поддерживают, и на другой тег source для ссылки на PNG-версию изображений, не поддерживающих WebP.
srcset используется, чтобы сообщить браузеру, какое изображение использовать, в зависимости от разрешения устройства.
Мы устанавливаем встроенную отложенную загрузку с помощью пары атрибут / значение loading = "lazy" .
Адаптивное видео
Адаптивное видео — еще одна тема, которая вдохновила на создание большого количества статей и документации.
Одна из ключевых стратегий создания адаптивных изображений, видео, фреймов и других элементов включает использование соотношения сторон. Поле соотношения сторон — это не новая техника, а довольно полезный инструмент, который можно использовать как веб-разработчик.
Эта статья представляет собой убедительную демонстрацию того, как добиться «плавной» ширины видео. Давайте посмотрим на код и разберем его.
В этом примере у нас есть видео YouTube, встроенное как iframe, и контейнер div с классом videoWrapper .Этот код делает многое … давайте копнемся.
position: relative в элементе контейнера позволяет дочерним элементам использовать позиционирование освобождения относительно него.
height: 0 в сочетании с padding-bottom: 56,25% является ключевым ингредиентом, который устанавливает динамическое поведение, обеспечивая соотношение сторон 16: 9 .
position: absolute , top: 0 и left: 0 Установка в iframe создает поведение, при котором элемент позиционируется абсолютно относительно своего родителя… наклеив его в левый верхний угол.
И, наконец, ширина и высота 100% делают дочерний элемент iframe 100% его родителя. Родитель, .videoWrapper , полностью контролирует настройку этого макета с соотношением сторон.
Я знаю … это много. Мы можем сделать больше, чтобы видео и изображения выглядели лучше всего на телефонах и планшетах. Я бы поощрял независимые исследования по этим темам в дополнение к этому.
Хорошо, теперь, когда мы мастера адаптивного веб-дизайна, как мы можем проверить то, что мы сделали? К счастью, у нас есть ряд инструментов для моделирования и мониторинга взаимодействия с пользователем на различных устройствах.
Существует множество полезных инструментов, которые помогут нам создавать веб-сайты с адаптивным веб-дизайном. Ниже приведены некоторые из них, которые я считаю особенно полезными.
Chrome DevTools Mobile Emulation
DevTools Chrome обеспечивает мобильную эмуляцию ряда планшетов и мобильных устройств. Он также предоставляет «отзывчивую» опцию, которая позволяет вам определять собственный размер области просмотра.
Рисунок 3. Эмуляция мобильных и планшетных устройств Chrome DevTools
Мониторинг производительности мобильного веб-сайта с помощью Foo
Lighthouse — это инструмент с открытым исходным кодом, позволяющий анализировать производительность веб-сайта на конкретном устройстве.
Foo незаметно использует Lighthouse для мониторинга производительности веб-сайта и предоставляет обратную связь для анализа. Вы можете настроить мониторинг как для настольных, так и для мобильных устройств, чтобы получать постоянную обратную связь о том, насколько быстро реагирует ваш веб-сайт.
Например, в отчете «Маяк» будут указаны изображения, которые неправильно загружены в зависимости от устройства.
Рисунок 4: Отчет Lighthouse с эмуляцией мобильного устройства
Заключение
Адаптивный веб-дизайн будет продолжать стремительно развиваться, но если мы будем оставаться в курсе текущих тенденций, мы сможем обеспечить наилучшие условия для наших пользователей.Я надеюсь, что эти инструменты и методы будут вам полезны!
Не только пользователи нашего веб-сайта получат выгоду от универсального дизайна, но и поисковые системы будут оценивать наши веб-страницы выше.
6 эффективных советов, как сделать веб-сайт адаптивным
Как будто машина предугадывает то, что вам нужно. То же самое можно сказать и об адаптивном веб-дизайне.
Адаптивный дизайн нацелен на обеспечение наилучшего взаимодействия с пользователем на широком спектре платформ, независимо от того, просматриваете ли вы веб-страницы со своего ПК, ноутбука, планшета или смартфона.Он основан на идее, что мы используем несколько экранов для просмотра контента, и что этот контент должен автоматически реагировать в соответствии с размером вашего экрана.
Важно, чтобы веб-сайт вашей компании, как руль автомобиля или тормоза, был отзывчивым. Итак, давайте посмотрим, что такое адаптивный дизайн, почему вы должны его использовать и как вы можете реализовать его на своем веб-сайте или в существующем дизайне.
Если вы хотите поговорить со специалистом, вы можете связаться с нами по телефону 888-601-5359.
Мы не просто хотим рассказать вам о прекрасной работе, которую мы делаем
Мы хотим вам показать!
Мы создали
более тысячи веб-сайтов в таких отраслях, как ваша Посмотреть наши прошлые работы
Что такое адаптивный дизайн?
Для современных веб-сайтов приятный пользовательский интерфейс основан на адаптивном дизайне. Пятнадцать лет назад все работали в Интернете, используя настольный компьютер с монитором, но в наши дни есть гораздо больше вариантов.
Цель адаптивного дизайна — сделать работу пользователей на этих устройствах максимально удобной, даже если дизайн может немного отличаться. Например, вы можете представить информацию в одном столбце на смартфоне и в двух столбцах на ноутбуке, но брендинг и контент останутся неизменными.
Адаптивный дизайн обещает минимальную прокрутку, панорамирование, масштабирование и, что наиболее важно, путаницу. Это делает работу приятной для всех, независимо от того, какое устройство они используют для просмотра вашего сайта.
Вы хотите, чтобы ваш веб-сайт выглядел так же хорошо на 4-дюймовом экране смартфона, как и на 17-дюймовом ноутбуке. Вот что может дать адаптивный дизайн.
Зачем нужен адаптивный дизайн?
Создание хорошего пользовательского опыта необходимо для долголетия любого бизнеса. И хотите верьте, хотите нет, но ваш веб-сайт — это продолжение вашего физического бизнеса.
Когда покупатели входят в ваш магазин, вы можете поприветствовать их, предложить им горячий напиток и спросить, на какие вопросы вы можете помочь.Все это часть создания отличного опыта, который заставит клиента захотеть вернуться.
Та же идея верна и в Интернете. Чем более приятным и легким для клиента будет опыт работы с веб-сайтом, тем больше вероятность, что он останется на нем, будет просматривать, совершить покупку или даже вернуться к нему позже.
Подумайте о своем собственном опыте в сети. Вернулись ли вы когда-нибудь на сайт, который загружался за минуту, некорректно отображался на вашем мобильном устройстве или просто отказывался работать?Ни за что! Это одна из основных причин, по которой вы должны заставить свой веб-дизайн правильно работать на всех устройствах, а адаптивный дизайн — ключ к этому.
Кроме того, Google рассматривает, является ли веб-сайт оптимизированным для мобильных устройств, в рамках своих алгоритмов поисковой системы. Это означает, что адаптивные сайты с гораздо большей вероятностью будут иметь более высокий рейтинг в любом конкретном поиске, чем сайты, которые этого не делают. Так что сделать ваш сайт адаптивным — это определенно в ваших интересах!
Как реализовать адаптивный дизайн
Теперь, когда вы понимаете, что такое адаптивный дизайн и почему он так важен для владельцев бизнеса с веб-сайтом, вот краткое руководство по созданию адаптивного веб-сайта, которое поможет вам внести необходимые изменения в ваш сайт.
1. Принять жидкую сетку
Лет назад большинство веб-сайтов создавалось на основе измерения, называемого пикселями. Но теперь дизайнеры перешли на использование плавной сетки.
Сетка пропорционально изменяет размер элементов вашего сайта, а не делает их одного определенного размера. Это упрощает настройку размеров для разных экранов: элементы будут реагировать на размер экрана (то есть сетки), а не на размер, который они заданы в пикселях.
Адаптивная сетка часто делится на столбцы, а высота и ширина масштабируются. Ничто не имеет фиксированной ширины или высоты. Вместо этого пропорции зависят от размера экрана.
Вы можете установить правила для этой сетки, изменив CSS и другой код своего веб-сайта.
2. Разрешить сенсорные экраны
В наши дни даже ноутбуки поставляются с сенсорными экранами. Это делает очень важным создание адаптивных веб-сайтов с учетом требований пользователей как мыши, так и сенсорных экранов.
Если у вас есть форма, которая содержит раскрывающееся меню в представлении рабочего стола, подумайте о том, чтобы придать этой форме такой стиль, чтобы она была больше и легче нажималась кончиком пальца на устройствах с сенсорным экраном. Кроме того, помните, что к крошечным элементам (например, кнопкам) очень трудно прикоснуться на смартфонах, поэтому постарайтесь реализовать изображения, призывы к действию и кнопки, которые правильно отображаются на всех экранах.
3. Решите, какие элементы включать на маленькие экраны
Адаптивный дизайн не означает точное копирование вашего веб-сайта с одного устройства на другое.Вы ищете лучший пользовательский интерфейс, и это может означать, что вам нужно не обращать внимания, когда кто-то смотрит на ваш сайт на очень маленьком экране.
Отзывчивые веб-сайты часто объединяют свои меню или параметры навигации в кнопку, которую можно открыть одним нажатием. Меню может отображаться в развернутом виде на большом экране, но его можно открыть с помощью этой единственной кнопки на маленьком.
Опять же, вы можете установить правила для включения или исключения определенных элементов, изменив CSS и другой код вашего сайта.Это может занять некоторое время, но ваши посетители это оценят!
4. Подумайте об изображениях
Изменение размера изображения может быть одним из самых сложных аспектов адаптивного веб-дизайна. Вам нужно будет создать правила в вашем CSS, которые определяют, как изображения обрабатываются на разных экранах — независимо от того, сделаны ли они на всю ширину, или удалены, или обрабатываются другим способом.
5. Попробуйте предварительно разработанную тему или макет
Если вы не дизайнер по натуре, вам может потребоваться дополнительная помощь в преобразовании вашего сайта в адаптивный.Хорошая новость в том, что помощь доступна.
Если у вас нет времени или желания самостоятельно разработать адаптивный веб-сайт, вы можете «обмануть», используя тему или заранее разработанный макет, который сделает всю работу за вас. Это означает, что все, о чем вам нужно будет беспокоиться, — это обновить цвета, брендинг и контент, чтобы они соответствовали потребностям вашей компании.
Если вы используете WordPress, существует множество как бесплатных, так и платных тем, которые адаптируются прямо из коробки.То же самое относится ко многим ведущим поставщикам электронной коммерции, которые предлагают темы на своих сайтах.
6. Передайте свой проект на аутсорсинг
Если вы не используете WordPress или размещенный на хосте веб-сайт электронной коммерции, возможно, вам не удастся найти заранее разработанную тему для использования. Или вы можете просто захотеть дизайн, который лучше соответствует вашим конкретным потребностям или бренду компании. Что ж, вы всегда можете нанять кого-нибудь, чтобы создать что-то индивидуальное для вас!
Компания веб-дизайна, такая как WebFX, имеет опыт разработки адаптивных сайтов.Фактически, все веб-сайты, которые мы создаем, быстро реагируют на запросы! Это означает, что вам никогда не придется беспокоиться о том, чтобы изменить дизайн своего сайта для удобства работы с мобильными устройствами (если, конечно, вы не хотите чего-то еще).
Вы также можете попробовать нанять фрилансера для редизайна вашего сайта, но не забудьте проверить его рекомендации, так как это сложная работа. Создание адаптивных веб-сайтов требует сильного опыта в веб-дизайне. Это не та область, где вы хотите экономить на цене.Выделите в своем бюджете место, чтобы заплатить кому-то за тщательную работу, чтобы вам не приходилось снова возвращаться к этому вопросу через шесть месяцев.
93%
клиентов очень довольны нашими результатами.
Получите предложение!
WebFX помог нам расширить наше цифровое присутствие не только в Центральной Пенсильвании и Средней Атлантике, но и на всей континентальной части США.
Адаптивный дизайн имеет решающее значение для дальних перевозок
Адаптивный дизайн — это не тренд или мимолетное предпочтение — это долгосрочная стратегия, в которую нужно инвестировать.Экраны продолжают развиваться, и ваш веб-сайт должен соответствовать потребностям каждого браузера, независимо от того, какое устройство он использует.
Сделав дизайн своего веб-сайта адаптивным, вам не придется беспокоиться о новых технологиях, которые сделают ваш веб-сайт устаревшим. Независимо от того, какая новинка появится, ваш сайт будет подготовлен. Это не только сбережет ваше рассудок и сэкономит бюджет, но и порадует посетителей.
Здесь мы дали вам много советов, как сделать ваш сайт адаптивным, но мы понимаем, что некоторые из них могут быть слишком техническими для вас.Так что, если вы хотите узнать, как WebFX может помочь сделать ваш сайт адаптивным, обратитесь к одному из наших экспертов по веб-дизайну прямо сейчас, чтобы получить бесплатное предложение без каких-либо обязательств. Мы будем рады услышать ваши идеи и помочь удовлетворить ваши уникальные потребности!
WebFX — это агентство интернет-маркетинга с полным спектром услуг, расположенное в Гаррисберге, штат Пенсильвания. Мы делаем гораздо больше, чем просто адаптивный веб-дизайн, и можем предоставить вам все, от SEO до электронного маркетинга. Нам не терпится услышать от вас!
Адаптивный дизайн: передовой опыт и рекомендации
Адаптивные веб-сайты — это веб-сайты, которые адаптируются ко всем размерам и разрешениям экрана не только для настольных компьютеров, но и для мобильных устройств, планшетов и иногда даже для телевизоров.
По данным Statista, мобильный трафик составлял 52,64% всего мирового трафика в 2017 году, а это означает, что веб-сайт , не оптимизированный для мобильных устройств , теряет примерно половину своего трафика . К концу 2018 года ожидается, что доля глобального трафика для мобильных устройств вырастет до 79%, что является исключительным увеличением.
Компании, у которых нет мобильных веб-сайтов, отстают с угрожающей скоростью, потому что 8 из 10 посетителей перестанут взаимодействовать с веб-сайтом, который плохо отображается на их устройстве.Для пользователей слишком легко нажать кнопку «Назад» и вместо этого попробовать конкурирующий бизнес, и Google даже ранжирует не отвечающие на запросы веб-сайты ниже .
Вы можете пройти тест Google для мобильных устройств здесь.
Означает ли это, что мобильный телефон важнее компьютера? Нет. 83% мобильных пользователей говорят, что они должны иметь возможность продолжить работу на компьютере, если захотят.
Взгляните на эту оптимизированную для мобильных устройств версию eBay в сравнении с тем, как бы она выглядела, если бы она не была оптимизирована для мобильных устройств .Вы бы даже рассматривали неоптимизированную версию?
eBay: не оптимизирован для мобильных устройств по сравнению с адаптивным веб-сайтом, оптимизированным для мобильных устройств.
Чтобы создавать веб-сайты, которые могут конкурировать в современном Интернете, веб-дизайнеры должны быть экспертами в области адаптивного веб-дизайна (RWD). С чего им начать?
Подход к адаптивному веб-дизайну, ориентированный на мобильные устройства
Веб-дизайн, ориентированный на мобильные устройства, означает, прежде всего, разработку мобильного веб-сайта и доведение его до настольной версии.Этот подход работает по ряду причин.
У мобильных веб-сайтов больше проблем с удобством использования (в основном это связано с нехваткой места на экране), поэтому практичнее и эффективнее сосредоточить основное внимание на мобильном дизайне.
Легче увеличить мобильной версии, чем уменьшить настольную версию (опять же, из-за нехватки места на мобильных веб-сайтах).
Веб-дизайн, ориентированный на мобильные устройства, помогает переоценить то, что необходимо визуально и функционально.
Дизайнерам следует подумать о том, чтобы в адаптивном веб-дизайне ориентироваться на мобильные устройства. (Источник: Usabilla)
Разработка веб-сайта как адаптивного сайта для мобильных устройств заставляет дизайнеров задавать ряд важных вопросов, поскольку на экране остается меньше места для работы. Вот вопросы, которые необходимо задать:
Действительно ли эта функция / функция необходима?
Как мы можем спроектировать что-то минималистичное для мобильных устройств, которое впоследствии будет хорошо масштабировано для настольных компьютеров?
Стоит ли этот визуальный эффект того времени, которое требуется для загрузки на мобильном устройстве?
Какова основная цель и какие визуальные элементы помогают пользователям в ее достижении?
Сейчас мы рассмотрим несколько примеров адаптивного веб-дизайна.А пока давайте поговорим о том, какие устройства, размеры экрана и веб-браузеры актуальны сегодня.
Какие разрешения экрана подходят для адаптивного веб-дизайна?
Вот наиболее распространенные разрешения экрана среди пользователей мобильных устройств, планшетов и настольных компьютеров по всему миру. Как видите, существует широкий диапазон разрешений, поэтому ни мобильные устройства, ни планшеты, ни настольные компьютеры сейчас не доминируют на рынке. Это говорит нам о том, что дизайнеры должны учитывать все из них, когда думают об адаптивном веб-дизайне.
360×640 (маленький мобильный): 22,64%
1366×768 (средний ноутбук): 11.98%
1920×1080 (большой рабочий стол): 7,35%
375×667 (средний мобильный): 5%
1440×900 (средний рабочий стол): 3,17%
720×1280 (большой мобильный): 2,74%
Как и в случае с разбивкой по устройствам, мы должны сегментировать данные по местоположению, чтобы соответствовать демографическим характеристикам пользователей (или ожидаемым демографическим характеристикам пользователей) нашей целевой аудитории. Также стоит ориентироваться на разрешения, которые набирают популярность, потому что, хотя некоторые размеры экрана в настоящее время не так распространены, они могут появиться в будущем.Это поможет отзывчивым дизайнерам создать ориентированный на будущее UX, который будет работать даже при изменении доли рынка.
Например, разрешение 360×640 (которое в основном соответствует устройствам Samsung, использующим Android) выросло за последний год на 5,43%. Дизайнеры могут использовать подобные ценные идеи для определения ключевых точек останова перед тем, как приступить к созданию дизайна веб-сайта.
Какие веб-браузеры популярны сегодня?
Адаптивный веб-дизайн предлагает удобство работы на любом устройстве, и, поскольку разные веб-браузеры по-разному отображают веб-страницы, веб-сайты необходимо тестировать, чтобы убедиться, что они совместимы с различными браузерами для мобильных и настольных компьютеров.
Несмотря на то, что масштабирование веб-сайта до правильных точек останова является в первую очередь обязанностью веб-разработчика, именно веб-дизайнер решает, как именно адаптивный веб-сайт будет адаптироваться к различным размерам экрана, чтобы обеспечить оптимальное взаимодействие с пользователем.
Вот глобальная разбивка доли рынка веб-браузеров для мобильных и настольных компьютеров.
Хром: 55,04%
Safari: 14.86%
Браузер UC: 8.69%
Firefox: 5.72%
Opera: 4.03%
Internet Explorer: 3,35%
Адаптивный дизайн — это не просто «все приспособлено» — это еще и адаптация к возможностям аппаратного обеспечения устройства и веб-браузера , а также к разрешению устройства . Одним из примеров этого может быть то, что, хотя Google Chrome поддерживает свойство CSS overscroll-behavior: (которое определяет, что происходит, когда пользователь слишком сильно прокручивает к краю области просмотра), он не поддерживается ни в одном другом веб-браузере.
Лучшие практики адаптивного дизайна
Устранение трения
Как упоминалось ранее, подход к адаптивному веб-дизайну, ориентированный на мобильные устройства, поможет дизайнерам оценить, что действительно необходимо для достижения пользователем своей основной цели.
По мере того, как мы дорабатываем до версии для планшета (а позже и версии для настольного компьютера), мы можем начать думать о второстепенных целях и микровзаимодействиях, потоках пользователей и CTA (призывы к действию), которые делают эти цели пользователя достижимыми.Что еще более важно, мы фокусируемся на основных задачах пользователя, сначала и устраняют любое ненужное трение , которое не помогает ни основным, ни второстепенным целям.
Первичной целью может быть покупка продукта, тогда как вторичной целью может быть подписка на информационный бюллетень (что может привести к покупке позже).
Вот потрясающий пример устранения трений: поскольку в мобильных пользовательских интерфейсах обычно сложнее ориентироваться, было бы лучше переключиться на одностраничную оплату для мобильных магазинов электронной коммерции и включить многоступенчатую оплату только для настольных магазинов электронной коммерции.
Дизайн для больших пальцев
Адаптивный веб-дизайн сложен в том смысле, что пользователи будут взаимодействовать с настольным веб-сайтом с помощью щелчков, а с мобильной версией — с помощью касаний и смахиваний. Есть и физические различия. Пользователи настольных компьютеров обычно размещают свои компьютеры на поверхности, тогда как мобильные пользователи держат свои устройства в руках. Эти различия существенно меняют способ, которым дизайнеры пользовательского интерфейса мобильных устройств разрабатывают цели касания и другие важные элементы пользовательского интерфейса, с которыми взаимодействуют пользователи.
Большие пальцы могут дотянуться до центра экрана устройства лучше, чем до углов.(Источник: A List Apart)
Давайте посмотрим на несколько примеров:
Люди обычно ожидают, что основная навигация на рабочем столе будет вверху; однако на мобильных устройствах он должен быть внизу. Большие пальцы не дотягиваются до вершины.
Другие интерактивные элементы также должны быть легко доступны. Это означает, что они должны находиться в центре экрана, потому что большим пальцам труднее дотянуться до краев и углов экрана устройства.
Чтобы их можно было легко нажимать, важные ссылки и призывы к действию должны иметь высоту не менее 44 пикселей (меньшие точки касания плохо влияют на удобство использования).
Рекомендуемая литература: Основное руководство по удобству использования мобильных устройств.
Воспользуйтесь преимуществами встроенного оборудования мобильных устройств
Мобильное оборудование (например, камера устройства или службы GPS) специально не зарезервировано для нативных приложений, и, как упоминалось ранее, адаптивный веб-дизайн — это не просто «сделать все подходящим». Речь также идет об адаптации к возможностям устройства. В случае мобильного веб-дизайна, поскольку мобильные устройства имеют простые в использовании камеры, некоторые микровзаимодействия, такие как ввод данных, на самом деле проще на небольших экранах, если веб-сайты используют доступное собственное оборудование.
Давайте посмотрим на несколько примеров:
Сканирование кредитных карт / карт для пополнения счета (поскольку бланки на мобильных устройствах часто сложны)
Обмен фотографиями в социальных сетях, потому что они уже есть на вашем устройстве
Двухфакторная аутентификация (поскольку вы уже используете мобильное устройство)
Быстрая проверка акций / аналитика (поскольку мобильные приложения упрощают информацию)
Выполнение поиска в Интернете с помощью голоса (поскольку использование громкой связи проще, чем набор текста)
Сделать макеты гибкими / адаптивными по умолчанию
Не у каждого пользователя будет развернут браузер на рабочем столе.Это означает, что, хотя дизайнерам необходимо учитывать ответные точки останова устройств, которые пользователи используют сегодня, им также необходимо учитывать то, что происходит между этими точками останова.
Гибкий и фиксированный макет для адаптивного веб-дизайна.
Адаптивные точки останова должны использоваться для «перекомпоновки» макета и контента на новое устройство, но для учета всех размеров между ними (на всякий случай) макеты должны быть в противном случае Fluid (то есть они естественно адаптируются / растягивать при изменении размера браузера).
Помните эти советы при разработке гибких / адаптивных макетов:
Процентные единицы позволяют элементам быть текучими.
Установка минимальной и максимальной ширины может включить сценарий «но не делайте больше / меньше этого».
Форматы изображений
SVG можно увеличивать и уменьшать без потери качества, и они не зависят от разрешения (в отличие от JPG и PNG, которые не имеют).
Не забывайте о альбомной ориентации
Мы говорили о конкретных точках реагирования ранее, но мы также должны учитывать, что эти мобильные окна просмотра также могут отображаться в альбомной ориентации.Хотя реализация гибкого макета технически сделает контент адаптивным, потеря значительной части окна просмотра портрет может стать препятствием для удобства использования и доступности.
Навигация
обычно безопасна (иногда даже лучше, поскольку пользователи обычно перемещаются в альбомной ориентации с помощью двух больших пальцев ), но прокрутка становится значительно сложнее, что не совсем оптимально, поскольку пользователю требуется больше прокручивать в альбомной ориентации.
Дизайнеры могут также захотеть рассмотреть возможность проектирования с учетом контрольных точек ландшафта; например, мозаичные элементы, расположенные вертикально на мобильном устройстве, могут отображаться в виде ползунка с левой и правой кнопками навигации, что означает, что пользователю не нужно прокручивать.
Помните, типографика тоже может реагировать
Несмотря на то, что UX-дизайнеры обычно используют пиксельные блоки для разработки веб-сайтов, в реальной сети одна точка больше не обязательно равна пикселю, потому что разные устройства имеют разное разрешение. IPhone X, например, имеет 458 PPI (пикселей на дюйм), поэтому, когда размеры пикселей становятся меньше, мы можем добиться более четкой графики в том же физическом пространстве (Apple называет эту технологию «Retina», а Android — «HDPI»).
Это означает, что размер шрифта 16 пикселей, например, будет выглядеть больше или меньше на некоторых устройствах в зависимости от его разрешения. Веб-разработчики обычно используют единицы em для определения размеров шрифта, которые представляют собой тип адаптивного модуля, где 1em равно 1 пункту.
Инструменты передачи дизайна, такие как Zeplin, Sympli, Marvel и InVision, могут помочь дизайнерам сотрудничать с разработчиками по вопросам, за которые они несут совместную ответственность. В то время как дизайнеры выполняют дизайн, а разработчики выполняют код, в целом рабочий процесс разработки продукта — это командная работа, требующая прочного взаимодействия.
Советы и рекомендации по оптимизации производительности адаптивного дизайна
Адаптивный веб-дизайн — это не только то, как он выглядит, но и то, как он действует и ощущается. Не менее важна адаптация веб-сайтов таким образом, чтобы они загружались быстрее на предполагаемом устройстве.
Ленивая загрузка неосновных изображений и видео
Изображения и видео составляют значительную часть от общего объема загрузки веб-сайта, но вам не нужно загружать их все сразу. Существует два сценария, в которых рендеринг мультимедиа может быть отложен: контент, находящийся ниже сгиба, может быть загружен, когда пользователь прокручивает ниже сгиба, и медиафайлы с блокировкой рендеринга должны загружаться только после загрузки макета и контента.Эта практика называется отложенной загрузкой, когда загрузка тяжелых, неважных элементов откладывается для повышения производительности страницы.
Условная нагрузка
Некоторые элементы веб-сайта не предназначены для мобильных пользователей или, по крайней мере, не стоят дополнительной когнитивной нагрузки. Мы хотим, чтобы наши мобильные веб-сайты были простыми, поэтому имеет смысл скрывать элементы в определенных сценариях. При этом мы должны убедиться, что не тратим впустую ресурсы и пропускную способность браузера, загружая эти элементы, даже если они скрыты; следовательно, рекомендуется включать эти элементы только в определенных условиях.
И снова разработчик может добиться этого с помощью кода; однако дизайнеры могут повысить производительность страницы, сообщая условия, когда и где определенные элементы должны и не должны существовать.
Адаптивные изображения
Как упоминалось ранее, некоторые устройства отображают больше пикселей на дюйм, что может привести к тому, что изображения станут размытыми, если они не будут экспортированы с правильным разрешением. В зависимости от разрешения устройства для некоторых потребуются изображения с двойным (@ 2x), тройным (@ 3x) и даже четырехкратным (@ 4x) размером.Веб-браузеры теперь поддерживают элемент , который выбирает правильное разрешение изображения в зависимости от устройства.
Дизайнеры, создающие адаптивные веб-сайты, могут адаптировать изображения для правильного устройства, следя за тем, чтобы экспортировать изображения во всех разрешениях, используемых на современных устройствах (если вы не уверены, спросите своего разработчика — общение является ключевым моментом, когда дело доходит до адаптивного веб-дизайна).
Экспорт графических ресурсов из Sketch @ 2x для адаптивного веб-дизайна.
Заключение
Wireframing может помочь сгладить складки на ранних этапах процесса проектирования, и это хорошо работает при использовании мобильного подхода к адаптивному веб-дизайну.Возможно, есть точка останова, требующая особого внимания, или, может быть, есть концепция, которая просто неэффективна с точки зрения скорости реагирования на мобильных устройствах. Лучше найти неровности на дороге раньше, чем позже (т. Е. До добавления визуальной эстетики).
Современные инструменты дизайна, такие как Adobe XD, Marvel и InVision, позволяют командам тестировать прототипы на реальных устройствах, обсуждать отзывы в контексте и, как правило, сотрудничать в команде, пока макет не будет работать во всех сценариях.
Использование экономичного рабочего процесса UX, в котором адаптивный дизайн управляется внутренним тестированием и обратной связью, обеспечит бесперебойную работу пользователя на всех платформах и всех разрешениях экрана, прежде чем он будет впервые представлен реальному пользователю.
• • •
Дополнительная литература в блоге Toptal Design:
Адаптивный веб-дизайн: основные советы и подходы
Дни разработки веб-сайта для одного экрана рабочего стола действительно прошли. Технологии и распространение мобильных веб-сайтов подталкивают веб-дизайнеров к переосмыслению того, как их работа отображается на различных устройствах. Подумайте об этом: сколько времени вы просматриваете каждый день на своем телефоне по сравнению с настольным ? Введите: адаптивный дизайн веб-сайта.
Что такое адаптивный дизайн?
–
Проще говоря, адаптивный веб-дизайн (RWD) — это подход, который позволяет дизайну и коду реагировать на размер экрана устройства. Это означает, что это дает вам оптимальные впечатления от просмотра, смотрите ли вы на 4-дюймовый мобильный телефон Android, iPad mini или 40-дюймовый кинотеатр.
Сравните, как выглядит наш сайт при статическом и фактическом адаптивном дизайне :
Лучшие адаптивные веб-сайты по существу используют гибких сеток , гибких изображений и CSS стилей, чтобы изменить дизайн сайта и отобразить его в соответствии с шириной браузера.Конечная цель дизайнеров должна заключаться в том, чтобы легко адаптировать UI и UX дизайна веб-сайта для разных устройств и платформ.
Почему так важен адаптивный дизайн?
–
Если бы мы спроектировали и разработали бесчисленное количество версий веб-сайта, которые работали бы для всех известных устройств, этот процесс просто не был бы практичным с точки зрения времени и был бы чрезвычайно дорогостоящим! Это также сделало бы сайты неэффективными для будущих технологических изменений и сделало бы их почти невозможными в обслуживании.Адаптивный дизайн — эффективное решение для будущего вашего сайта.
Основным ключом к адаптивному веб-дизайну является знание своей аудитории и того, какое устройство они используют для просмотра вашего веб-сайта. Какая доля вашего текущего трафика составляет для ПК, планшетов и мобильных устройств? Примерно 56 процентов трафика на веб-сайтах в США сейчас поступает с мобильных устройств. Сегодня насчитывается около 2,6 миллиарда пользователей смартфонов и к 2020 году, а к 2020 году их число может превысить 6 миллиардов . Мобильный дизайн никогда не был так важен.
Очень важно разработать свой веб-сайт для разных устройств, но это усложняется при разработке в разных веб-браузерах. Каждый основной веб-браузер имеет собственную мобильную версию и отображает сайты по-разному. Еще сложнее то, что существует множество версий браузеров, которые необходимо обслуживать — нельзя ожидать, что все будут использовать последнюю версию. Поэтому важно, чтобы дизайн работал и реагировал на различные версии браузеров.
Не любите дизайн для Интернета? Не волнуйтесь, каждый в отрасли ведет постоянную борьбу за адаптацию дизайна для всех версий браузеров, а также устройств.Лучший ответ — просто протестировать свой сайт на как можно большем количестве новых и старых устройств. (И наймите супер-гуру-разработчика!)
Для каких размеров веб-сайта я должен создавать дизайн?
–
Не существует «стандартного размера веб-сайта». Существуют сотни устройств, и размеры моделей и разрешения экрана постоянно меняются. И каждый отдельный сайт привлекает пользователей на разных устройствах. Например, вы с большей вероятностью посмотрите рецепт на своем мобильном устройстве (когда вы готовите на кухне) и с большей вероятностью будете искать учебник по Photoshop на своем рабочем столе (вы знаете, когда вы пытаетесь разобраться, как что-то сделать в фотошопе).
Вы можете узнать, какие браузеры и размеры веб-страниц наиболее популярны для вашего сайта, просмотрев Google Analytics. Итак, с бесконечными комбинациями размеров браузеров и устройств, как вообще можно адаптировать дизайн, не теряя рассудка?
Попробуйте создать как минимум 3 макета
–
Адаптивный дизайн веб-сайта должен иметь как минимум 3 макета для разной ширины браузера. Конкретные цифры, которые мы приводим, — это то, что мы сейчас используем в 99designs, но не жесткие правила.
Маленький: до 600 пикселей. Так контент будет выглядеть на большинстве телефонов.
Средний: 600–900 пикселей. Так контент будет выглядеть на большинстве планшетов, некоторых больших телефонах и небольших компьютерах типа нетбуков.
Большой: более 900 пикселей. Так контент будет выглядеть на большинстве персональных компьютеров.
Каждый из этих макетов должен включать одинаковые текстовые и графические элементы, но каждый должен быть разработан таким образом, чтобы наилучшим образом отображать этот контент в зависимости от устройства пользователя.Масштабирование страницы до размеров экрана меньшего размера сделает контент нечитаемым, но если вы масштабируете контент относительно друг друга и переключитесь на 1 столбец, это сделает его более читабельным.
Пример нашей страницы с логотипом для трех разных размеров экрана для адаптивного дизайна веб-сайта.
О чем задуматься
—
Удобство для пользователя — ключ к успеху: адаптивный дизайн должен быть чем-то большим, чем просто преобразование настольного сайта в мобильный экран. Нам необходимо учитывать опыт пользователей, их взаимодействие и основной контент, который они действительно ищут при использовании мобильного устройства.
Не создавайте для новейшего мобильного устройства с экраном определенного размера. Вместо этого создайте свой сайт вокруг вашего контента. Как макет и элементы будут работать на рабочем столе и как эти же элементы будут адаптироваться друг к другу на мобильном устройстве?
дизайн Karol Ortyl
Вовлеченность: иерархия макета очень важна, особенно на мобильных устройствах. Часто лучше меньше, да лучше! Мобильный интерфейс по сравнению с настольным компьютером гораздо более сфокусирован с ограниченным пространством, поэтому способ, которым пользователи читают и перемещаются по вашему сайту, должен быть действительно четким, чтобы донести ваше ключевое сообщение и понять, о чем сайт.Также подумайте о главном действии на странице. Если ключевая цель — заставить людей нажимать кнопку «связаться с нами», не прячьте ее внизу страницы под блоками текста. Адаптируйте свой контент и дизайн к этому опыту.
Гибкие изображения действительно важны для разработки адаптивного веб-сайта. Вам нужно подумать о том, насколько изображение будет масштабироваться. Как это будет выглядеть на большом экране рабочего стола по сравнению с планшетом и маленьким экраном мобильного устройства? С точки зрения разработки, код позволит изображениям масштабироваться в процентах от ширины окна браузера.
Навигация важна для мобильных устройств. Существует несколько распространенных методов сопоставления больших меню и содержимого. Это может быть знакомое меню стиля гамбургера, простой выпадающий список, поля развертывания / свертывания или вы можете использовать вкладки, которые прокручиваются по горизонтали, как YouTube.
Дизайн
от UI Garage
Жесты открывают новые возможности для дизайна. Людям нравится читать руками и взаимодействовать с контентом — это расширяет возможности пользователя.На мобильных телефонах и планшетах пользователи могут масштабировать или перемещать изображения по экрану пальцем. Взаимодействие сильно влияет на дизайн. Например, если у вас есть галерея изображений, постарайтесь не использовать стандартную карусель (маленькие точки), чтобы люди циклически просматривали каждое изображение. Подумайте о размере пальца человека и о том, как это превратить в полезное решение для пользовательского интерфейса. Согласно Apple: удобный минимальный размер нажимаемых элементов пользовательского интерфейса составляет 44 x 44 пикселей . Этот предел часто нарушается, и реальный предел оценки составляет около 25 пикселей.Сложный дизайн рабочего стола должен иметь возможность адаптироваться к простому интуитивно понятному интерфейсу для небольшого мобильного экрана. Всегда помните об этом при проектировании для разных устройств. Дизайн должен быть гибким, чтобы пользователям было удобнее работать на всех устройствах. Тесное сотрудничество с разработчиком, чтобы понять, какие возможности на небольших экранах повлияют на процесс проектирования.
Разработайте как минимум 3 версии для браузеров разной ширины. Мы используем менее 600 пикселей, 600–900 пикселей, 900 пикселей +.Между этими ширинами ваш контент может свободно масштабироваться, или вы можете сохранить 3 фиксированных макета. Наличие 3 (или более) фиксированных макетов и добавление полей при необходимости обычно легче спроектировать и реализовать, чем плавное масштабирование. Однако жидкостное масштабирование может улучшить работу на большем количестве устройств.
Инструменты и ресурсы
—
Ваш веб-браузер может показаться очевидным инструментом для использования, но это наиболее эффективный ресурс для предварительного просмотра ваших дизайнов в Интернете.Установите несколько разных браузеров, чтобы получать хорошие отзывы. Затем начните изменять размер окон браузера.
Ваше мобильное устройство — еще один очевидный инструмент для использования, но он действительно полезен для предварительного просмотра вашего дизайна, потому что он показывает вам, как именно ваш веб-сайт будет выглядеть в этих конкретных условиях.
Гибкие сетки основаны на разработке макета веб-сайта на процентных значениях, а не на заданных пикселях. Например, ширина контента на экране рабочего стола может составлять 930 пикселей, но вы хотите, чтобы дизайн был уменьшен до 320 пикселей на мобильных устройствах.Чтобы преобразовать это в масштабируемую цифру, результат получается 320/930 = 34,4%. Когда вы примените это к размеру мобильного экрана, элементы в макете дизайна будут изменять размер по отношению друг к другу. Нам нравится One% CSS Grid.
Дизайн Антона Ахейчанка
Медиа-запросы — это тип кода, который будет внедрен на ваш сайт, когда он будет построен. Это важно в вашем коде, потому что он задает условия, при которых дизайн волшебным образом адаптируется к размеру экрана.Например. «Когда размер экрана равен 480 пикселей или меньше, переходите к макету дизайна планшета». Попробуйте прямо сейчас, просто перетащив окно браузера меньше (если вы находитесь на рабочем столе). Вы увидите, что размер содержимого автоматически изменяется в соответствии с различными точками останова дизайна на экране.
Другие ресурсы для начала:
Я уверен, что теперь вы знаете все об адаптивном дизайне, верно ?!
–
Не волнуйтесь, это универсальная задача дизайна для всех, кто работает в веб-индустрии.Лучшее, что вы можете сделать, — это быть в курсе последних лучших практик UI / UX, разрабатывать дизайн вокруг вашего контента, сохранять гибкость ваших изображений, всегда учитывать вашу навигацию и помнить, что взаимодействие с пользователем является ключевым.
Каковы ваши лучшие советы по адаптивному дизайну?
–
Нужен адаптивный веб-сайт, разработанный для вашего бизнеса?
Наше глобальное сообщество профессиональных графических дизайнеров может это сделать!
Как создать адаптивный веб-сайт для мобильных устройств
Создавать или не создавать мобильный сайт; этот вопрос находится в центре многих дискуссий.Однако есть и другой вариант: адаптивный веб-дизайн. Когда, почему и как следует разрабатывать адаптивный веб-сайт?
В связи с тем, что к 2015 году количество пользователей мобильного Интернета в США превзойдет количество пользователей настольных компьютеров, планшеты становятся все более популярными и даже при росте использования ТВ-интернета, компаниям важно обеспечивать удобство работы всех своих посетителей, независимо от того, на каком устройстве они находятся. поехали. Как адаптивный дизайн помогает нам в этом? Что ж, позволив нам создать одно решение для веб-сайта, гибкое для экранов разной ширины.Он использует гибкие сетки и умные стили, чтобы представить одно и то же содержимое пользователю, но отображает это содержимое в формате, соответствующем ширине устройства. Ознакомьтесь с этим руководством для начинающих по адаптивному веб-дизайну, чтобы получить более подробное введение.
Почему вы должны создавать адаптивный сайт?
Есть много вариантов, которые следует учитывать, когда клиент запрашивает мобильное решение для своего веб-сайта, и пригодность этих вариантов зависит от бизнес-требований и бюджета; также важно учитывать любые существующие решения или сайты, которые у них уже есть.Создание адаптивного веб-сайта — это не полная мобильная стратегия и не ответит на все вопросы, но, особенно если вы запускаете веб-сайт с нуля, вам следует рассматривать это как очень серьезный вариант.
Так почему вы решили создать веб-сайт таким образом?
Вы начинаете с нуля
Разработка полностью нового веб-сайта или веб-приложения — сложный процесс. Вы не узнаете, будет ли сайт успешным, пока он не заработает и не появится в мире, поэтому создание отдельного мобильного сайта или мобильного приложения в тандеме с проектом веб-сайта может быть большой тратой времени и денег.Более эффективно повысить эффективность нового сайта, прежде чем создавать дополнительный мобильный сайт или приложение.
Вы хотите снизить затраты
Надежные адаптивные решения требуют дополнительного времени на проектирование и интерфейсную разработку, но не слишком сильно влияют на разработку приложений. На разработку адаптивного сайта может уйти примерно на 20–30 процентов больше времени, но это все же быстрее, чем создание дополнительного мобильного сайта или приложения. Подобная разработка сайта также означает, что вам нужно только для разработки, управления и обслуживания одного сайта, так что это также может снизить эти затраты.
Вы хотите, чтобы он работал, даже когда будут выпущены новые устройства
Мобильный сайт должен уметь распознавать устройство пользователя; при выпуске новых устройств сайт нужно обновлять. Поскольку адаптивное решение распознает только ширину браузера, никаких новых обновлений делать не нужно. Это означает, что он более перспективен и масштабируем.
Процесс
Давайте поговорим о процессе создания адаптивного веб-сайта на примере веб-сайта отеля.В сентябре прошлого года компания Equator выпустила новый веб-сайт Macdonald Hotels. Macdonald Hotels — это британская гостиничная сеть, состоящая из 47 отелей и курортов в Великобритании и Испании. Мы создали для них новый сайт, который включал новую структуру сайта, обширное содержание отелей и новую систему бронирования. Вот шаги, которые мы прошли, а также некоторые соображения, которые следует учитывать при разработке адаптивного веб-сайта.
Это ключевые шаги:
Исследование / определение объема работ: Понимание дополнительных требований к адаптивному сайту
Каркас: Сеточные структуры и макеты для сайта с учетом разной ширины экрана
Внешний вид: Соображения стиля
Создание сайта: Проблемы с HTML и CSS
Исследования и предварительное определение
Исследования всегда являются очень важным этапом в процессе проектирования, поэтому стоит уделить особое внимание людям, которые будут использовать разные устройства.Понимание того, как эти разные пользователи могут захотеть использовать веб-сайт на разных устройствах, поможет вам решить, каковы приоритеты в проекте.
Какие разные цели будет преследовать пользователь на разных устройствах?
Подобные вопросы становятся все более излишними. Раньше мы предполагали, что мобильные пользователи ориентированы на выполнение задач, например Я хочу узнать адрес отеля; Я хочу что-нибудь быстро забронировать. Но теперь люди на любом устройстве с такой же вероятностью будут неторопливо просматривать Интернет, как и им нужно быстро выполнить задачу.Тем не менее, об этом стоит подумать, поскольку подобный подход к целям пользователей может помочь вам расставить приоритеты для контента сайта, независимо от того, какое устройство использует посетитель.
Какие технические соображения нам необходимо сделать для функциональности и содержания?
Подумайте, как любая сложная функция может работать на разных устройствах. Хотя отзывчивый сайт будет изменять CSS только в зависимости от ширины, если есть сложные элементы, которые в значительной степени зависят от JavaScript, они могут плохо работать на меньшем устройстве, и, возможно, стоит их скрыть.
Каркас
Логику, лежащую в основе изменения стилей, может быть немного сложно определить, и магия этого действительно проявится в сборке сайта, но нам нужен способ начать определять различные этапы ширины макета. Мы выбираем 3 варианта ширины экрана: рабочий стол, iPad и iPhone. Мы чувствовали, что это соответствует нашим требованиям, но для вашего проекта вы должны подумать о том, какие значения ширины важны для вас — вам даже может потребоваться взглянуть на большую ширину экрана для использования телевизора в Интернете.
На этом этапе проекта у вас уже должны быть ключевые шаблоны, которые вам понадобятся для каркаса, но вам не нужны каркасы для всех этих шаблонов разной ширины. Основная цель здесь — помочь определить логику того, как CSS изменит внешний вид страницы, поэтому сосредоточьтесь на страницах с очень разными макетами. Мы рассмотрели домашнюю страницу, все страницы процесса бронирования, страницы отелей, страницы предложений, а также некоторые общие макеты. Каждый из них охватывал различные макеты столбцов, типы контента и ключевые функции.
Начало работы
Сначала определите структуру сетки для каждой ширины ключа. Мы создали 3 страницы для ширины экрана 1024 пикселей (рабочий стол), 768 пикселей (портретная ориентация iPad), 320 пикселей (портретная ориентация iPhone), затем нам нужно было определить структуру сетки для каждой из этих значений ширины.
Очень простая структура сетки с одинаковой шириной столбцов на каждом макете упростила нам планирование переноса компонентов при изменении ширины.
Создание главного шаблона
При создании каждого каркаса вам нужно подумать о столбцах и о том, как компоненты в них будут адаптироваться по мере уменьшения ширины страницы & mdashe.грамм. что происходит, когда у вас меньше места? Если у вас четыре столбца с контентом? Когда вы переходите на трехколоночную ширину? Между дизайнером и разработчиком интерфейса всегда должно быть постоянное общение, чтобы ответить на любые вопросы о том, что вы можете делать с компонентами визуально и в CSS.
Начиная с домашней страницы
Вам может показаться, что есть другая страница, которая имеет более высокую важность, чем домашняя страница, но именно с нее мы начали.Вот наш готовый оригинальный каркас. Вы можете видеть, что длина мобильной страницы немного больше из-за переноса содержимого на один столбец.
Основная навигация
Мы создали простую горизонтальную верхнюю навигацию, ширина которой плавно изменялась бы вместе с размером экрана. По мере того, как экран уменьшался, элементы меню становились ближе друг к другу, а затем при необходимости переходили к следующей строке. Это работает для настольных ПК, ноутбуков и планшетов, но, двигаясь дальше, мы хотели создать меню, которое лучше подходило бы для устройств.Это дало нам возможность разделить меню на две колонки для мобильного устройства.
Другие компоненты заголовка выровнены по правому краю и будут просто сдвигаться по мере уменьшения ширины страницы.
Помните, когда вы стилизуете навигацию, подумайте, как она будет работать при изменении размеров экрана. Некоторые стили, такие как использование вкладок, могут быть трудными для работы и хорошо выглядеть по мере уменьшения ширины экрана.
Нижний колонтитул
Наш нижний колонтитул довольно прост, просто подумайте, какой контент вы хотите и как он будет меняться при изменении ширины и уменьшении столбцов — это может быть так же просто, как компоненты, обертывающие друг друга.
Прочие компоненты
Наша простая сеточная структура упростила планирование наших компонентов. На домашней странице мы использовали горизонтальный скроллер с четырьмя компонентами, которые прокручивались одним щелчком мыши. Наш макет планшета позволил нам сохранить этот компонент, но просто изменить его, чтобы отображались только три элемента, затем на ширине нашего телефона мы полностью удалили функцию прокрутки и вместо этого отображали каждый элемент по вертикали. Каждый разрабатываемый вами компонент может требовать разного поведения, поэтому подумайте о том, как посетитель захочет использовать компонент на экранах разных размеров.Пользователям телефонов удобнее прокручивать страницу вниз, чем использовать маленькие кнопки для взаимодействия со страницей.
Протестируйте прямо сейчас
Как только вы создали свой первый каркас, сразу же протестируйте его на соответствующем устройстве. Легко разместить изображение на простой веб-странице и посмотреть, как оно выглядит и ощущается при прокрутке вниз. Это позволит вам заранее узнать, работает ли ваш каркас. Такое тестирование очень быстро дало нам понять, что работает, а что не работает.Если вы посмотрите на этот каркас, вы быстро увидите наш первый выпуск.
Когда пользователь перемещался по сайту, он видел только эти первые два элемента страницы — навигацию и панель поиска. Это означает, что пользователь может быть не уверен, изменилась ли страница, а также где он на самом деле находится на сайте. Эта проблема была решена путем простого помещения этих элементов в панели «показать / скрыть», что позволило пользователю намного быстрее проникнуть в контент.
Добавление версий для планшетов и мобильных устройств в процесс пользовательского тестирования также даст вам много полезных отзывов.Теперь, когда ваши каркасы созданы, протестированы, изменены и одобрены, пора сделать их хорошо выглядящими для экрана любой ширины.
Внешний вид
Нет необходимости создавать визуальные эффекты для каждого каркаса. Основная цель — охватить все стили, которые потребуются для создания HTML и CSS. Будет немного пересечения для каркасов и визуальных элементов, некоторые стили потребуются для мобильных устройств, где не было необходимости в начальном каркасе.
Стилизация страницы: Подумайте о том, чтобы упростить стили для мобильной версии. В CSS3 замечательно то, что вам не нужно много изображений, чтобы получить отличные стилизованные эффекты, но для их загрузки все же требуется некоторое время.
Размышляя о шрифте: Убедитесь, что ваш размер шрифта будет читаемым на каждом устройстве. На мобильном устройстве они должны быть намного больше, чтобы их можно было читать.
Также будьте готовы к тому, что ваши визуальные эффекты изменятся, когда они будут переведены в сборку сайта.Всегда должен быть баланс между тем, что хорошо выглядит на плоском визуале, и тем, что будет работать при разработке сайта. Окончательный вариант сайта не так уж и далек от нашего внешнего вида. Взгляните сюда, и вы сможете сравнить его с действующим сайтом.
Создание сайта
Создание HTML и CSS — это самостоятельная задача, поэтому я не буду вдаваться в подробности, но вот несколько вещей, о которых стоит подумать.
Влияние размеров изображений: Сайт должен будет загружать полноразмерные изображения, даже если CSS уменьшает их размер, поэтому старайтесь сохранять размеры изображений как можно меньшими.Однако могут быть некоторые изящные уловки JavaScript, чтобы сделать сайт более плавным. На этом сайте мы изначально загрузили изображение наименьшего размера, а затем использовали JavaScript, чтобы решить, нужно ли тогда изображение большего размера.
Использование расширенного CSS: Важно, чтобы клиент поддерживал идею использования расширенных стилей CSS, позволяя стилям сайта ухудшаться по мере того, как это происходит с возможностями браузера. Это позволяет сократить время загрузки сайта.
Требуется постоянное общение: Проект всегда будет проходить гладко, если команда общается друг с другом, поэтому как дизайнер, так и разработчик хорошо обсуждают проблемы и решения, как только они появляются.
Стоит взглянуть на взгляд нашего фронтенд-разработчика Джейми Бойда на фронтенд-разработку веб-сайта Macdonald Hotels для обеспечения адаптивного дизайна.
Так что все это значит?
Если вы думаете о том, чтобы убедить своего клиента разработать и разработать его новый сайт с учетом требований, прежде всего, вы должны подумать, действительно ли это правильное решение для него, тогда вам нужно будет убедить его в преимуществах и сообщите, что это добавит времени проекту.Но я верю, что именно так в будущем будет развиваться больше сайтов.
Мы все так много узнали в этом проекте о разработке адаптивного веб-сайта. Нам повезло с клиентом, который, как и мы, стремился создать что-то новое и инновационное, и благодаря этому мы создали сайт, которым все гордимся.
Изображение на домашней странице UX Booth с сайта needoptic на Flickr.
Учебное пособие и лучшие практики по адаптивному веб-дизайну
Мобильная революция, начавшаяся десять лет назад, не только изменилась
то, как мы взаимодействуем с продуктами, но также изменили способ разработки продуктов.Первый iPhone был мощным компьютером, который сочетал в себе три вещи: телефон,
музыкальный проигрыватель и интернет-браузер. Последнее оказало огромное влияние на
веб-индустрии, потому что дизайнерам приходилось адаптировать веб-сайты для экранов небольшого размера.
И ситуация усложнилась, когда
другие производители оборудования поспешили адаптироваться к
еще больше нишевых мобильных устройств. В результате дизайнеры, работавшие в сети
дизайн должен был адаптировать веб-сайт не только для различных разрешений рабочего стола, но и
также для многих различных мобильных устройств.
Быстро стало очевидно, что создание отдельной версии
сайта для каждого разрешения и нового устройства было нецелесообразно. Индустрия дизайна
требовался новый подход к веб-дизайну, который был бы достаточно гибким, чтобы поддерживать
различные типы экранов и разрешений. Такой подход
называется адаптивным дизайном, и он представляет собой фундаментальный сдвиг в том, как мы создаем веб-сайты.
В этой статье я хочу поделиться основополагающими правилами, которые
поможет вам обеспечить высокое качество работы, независимо от того, насколько большой или малый размер экрана будет у ваших пользователей.
Что такое адаптивный дизайн?
Адаптивный веб-дизайн — это
подход, который позволяет проектировать на различных устройствах (мобильных, настольных, планшетных,
и т. д.) и предполагает, что дизайн должен реагировать на поведение пользователя на экране
размер, платформа и ориентация.
Гибкие сетки — основополагающие элементы адаптивного
дизайн. Все ресурсы, такие как изображения, адаптируются к различным размерам и разрешениям экрана (с использованием медиа-запросов CSS).
В результате пользователь получает отличный UX независимо от того, какое устройство он использует — будь то
большой рабочий стол или маленький экран мобильного устройства, сайт автоматически
переключите, чтобы приспособиться к разрешению.
В 2010 году Итан Маркотт написал вводную статью о подходе «Адаптивный веб-дизайн» для A List Apart. Вот отличная цитата Итана: «Вместо того, чтобы приспосабливать отдельные проекты к каждому из постоянно растущего числа веб-устройств, мы можем рассматривать их как аспекты одного и того же опыта. Мы можем проектировать для оптимального просмотра, но встраивать основанные на стандартах технологии в наши проекты, чтобы сделать их не только более гибкими, но и более адаптивными к средствам массовой информации, которые их воспроизводят.
Отзывчивый, адаптивный или мобильный. Первый
В мире веб-дизайна у нас есть несколько терминов, которые описывают процесс оптимизации дизайна для различных экранов — адаптивный, адаптивный и ориентированный на мобильные устройства дизайн. Вы можете задаться вопросом, в чем именно разница между ними?
Отзывчивый и адаптивный веб-дизайн тесно связаны, но между ними есть некоторые различия. Адаптивный веб-дизайн использует медиа-запросы CSS для динамического изменения макета страницы в зависимости от целевого устройства, такого как тип отображения, ширина, высота и т. Д.Адаптивный дизайн, с другой стороны, использует статические макеты, основанные на точках останова, которые не реагируют после загрузки. Как видите, адаптивный дизайн — менее гибкое решение проблемы оптимизации дизайна для различных экранов.
«Mobile-first» — концептуальный термин. Как следует из названия,
mobile-first означает, что веб-дизайнеры начинают разработку продукта с мобильных
средний, а затем дизайн планшета, настольного компьютера и мониторов. «Сначала мобильные»
мышление для дизайна помогает продуктовым командам сосредоточиться на самом важном контенте
и доставить его пользователям.
Изображение frikota
Технические составляющие адаптивного веб-дизайна
Трудно понять природу адаптивного дизайна
не понимая его технической стороны. Адаптивные веб-сайты имеют три
определяющие функции: гибкие макеты, медиа-запросы и гибкие медиа.
Гибкие макеты
Гибкие макеты — это практика создания макета веб-сайта с гибкой сеткой. Гибкие сетки создаются с помощью CSS. Веб-макет состоит из столбцов, которые автоматически меняются по размеру экрана или окна браузера.
Медиа-запросы
Одного гибкого подхода к макету недостаточно для оптимизации
дизайн для различных экранов. Когда макет становится слишком маленьким, макет может
начать разбивать и создавать столбцы, которые будут слишком маленькими для отображения содержимого
эффективно. Медиа-запросы приходят, чтобы спасти положение.
Итан Маркотт дает медиа-запросам следующее определение:
«Медиа-запрос позволяет нам ориентироваться не только на определенные классы устройств, но и на
фактически проверять физические характеристики устройства, делая наши
Работа.»Медиа-запросы позволяют веб-дизайнерам создавать проверки условий для корректировки
веб-дизайн на основе свойств устройства пользователя. Они также позволяют веб-дизайнерам
чтобы указать разные стили для конкретного браузера и устройства
(т.е. разной ширины области просмотра или разной ориентации устройства).
Гибкие изображения и видео
По мере того, как окна просмотра начинают менять
размер, изображения, видео и другие типы мультимедиа должны масштабироваться, настраивая их
size при изменении размера области просмотра.
Все ресурсы в адаптивном дизайне распределены в гибкой
контейнеры — эти контейнеры изменяют свой размер, когда пользователь меняет окно браузера или переключается на другое устройство. Простой способ сделать
Масштабируемость мультимедийного контента заключается в использовании свойства max-width со значением 100%.
Природа адаптивного дизайна
Некоторые люди думают, что адаптивный веб-дизайн — это адаптация дизайна к разным разрешениям экрана. Это не совсем так. Адаптивный дизайн представляет собой совершенно новый взгляд на дизайн.Речь идет о создании гибких дизайнерских решений. Чтобы представить адаптивный дизайн, Джош Кларк незабываемо адаптировал знаменитую цитату Брюса Ли «Будь водой, мой друг», когда он придумал, что контент подобен воде.
Вы наливаете воду в чашку, она становится чашкой. Вы наливаете воду в бутылку, она становится бутылкой. Вы наливаете воду в чайник, и он становится чайником.
Брюс Ли, Будь водой, мой друг
Что это означает? Если вы думаете о своем содержании как о воде
и перелить из одного аппарата в другой — вода осталась прежней, но
вид воды меняется в зависимости от устройства.И у вас может быть больше воды, чем
устройство может обрабатывать, а это означает, что вам нужно будет оптимизировать контент для каждого устройства.
Адаптивный дизайн основан на идее «гибкости всего», а не только
макет, но само содержимое должно быть выровнено по носителю.
Рекомендации по дизайну
Теперь давайте поделимся несколькими рекомендациями по дизайну для создания адаптивных
дизайн:
Группировка размеров экрана по категориям
It
можно сгруппировать различные размеры экранов в несколько основных категорий, и
дизайн для каждой группы.Метод, называемый жидкими сетками, использует медиа-запросы минимальная ширина устройства , максимальная ширина устройства и ориентация , чтобы сделать веб-дизайн настолько гибким, насколько это необходимо.
Дизайн The Guardian
Гибкие изображения
В адаптивном веб-дизайне каждое изображение загружается в свое
исходный размер, если только область просмотра не становится уже, чем изображение
исходная ширина. Избегайте жесткого кодирования высоты и ширины; вместо этого позвольте браузеру
измените размер изображений по мере необходимости (CSS должен регулировать относительный размер изображений).
Показать / скрыть контент и функциональные элементы
Можно уменьшить размеры пропорционально экрану
размер, поэтому элементы будут хорошо помещаться на меньшем экране. Используя запросы CSS (видимость : скрытая ),
также можно скрыть некоторый контент на мобильных устройствах. Помните, что мобильный
опыт должен быть целенаправленным, поэтому рекомендуется расставлять приоритеты
контент, представляющий максимальную ценность для ваших пользователей.
Отображение / скрытие содержимого применимо для всех элементов содержимого, включая навигацию.Отличным решением является навигация Priority +, которая предоставляет наиболее важные параметры и скрывает оставшиеся параметры за некоторой формой ссылки «еще».
Приоритет и навигация на моб. GIF от Брэда Фроста.
Курсор мыши и сенсорный экран
размер интерактивных элементов должен быть пропорционален методу ввода. На
на рабочем столе мы используем мышь, а на сенсорном экране мы взаимодействуем пальцами. Вот пара вещей, которые следует помнить, когда
оптимизация дизайна для сенсорного ввода:
Забыть
о состояниях при наведении на сенсорный экран.Сенсорные экраны не могут отображать
on-hovers, потому что нет курсора.
Увеличение
размер интерактивных элементов и ввести больше пробелов между
интерактивные варианты.
Оптимизация изображений и видео
Адаптивный
веб-дизайн требует оптимизации медиа-контента:
Избегайте тяжелых визуальных ресурсов. Когда ресурс изображения предоставляется с большим разрешением (больше, чем размер области просмотра) или в формате сжатия с потерями (например, PNG для изображений), браузеру придется изменить размер изображения, чтобы оно соответствовало области просмотра и процессу загрузка займет больше времени из-за размера файла.Используйте Squoosh для сжатия, изменения размера и управления изображениями. Ознакомьтесь со статьей Контрольный список производительности переднего плана для получения дополнительной информации об оптимизации производительности.
Оптимизируйте изображения для небольших экранов. Недостаточно просто изменить размер изображений. На небольших экранах стоит обрезать некоторые изображения, чтобы они сохраняли свое видение.
Попробуйте использовать больше SVG, чем растровой графики. SVG меняют свое разрешение в зависимости от путей изображения, а не пикселей, поэтому они остаются неизменными при любом размере.
Обратите внимание на типографику
Типографика — краеугольный камень дизайна.Люди посещают
веб-сайты для содержания. Вот почему, когда дело доходит до адаптивного веб-дизайна,
Важно выбрать шрифт, хорошо работает на всех экранах и любых разрешениях устройств:
Избегайте фиктивного содержания. Избегайте использования «Lorem Ipsum» при разработке веб-макетов. Фиктивный контент не очень помогает понять, готов ли ваш дизайн к реальному содержанию или нет.
Используйте em или rem вместо px. Итан Маркотт написал отличную статью в блоге Adobe Typekit, в которой объясняет, почему для размера шрифтов рекомендуется использовать em вместо пикселей.Короче говоря, следует избегать пикселей, потому что они имеют фиксированный стандарт размера. Em или rem основаны на процентах и масштабируются.
Адаптивный дизайн от The Guardian
Начните с самого маленького ракурса
Когда вы начинаете работать над адаптивным веб-дизайном, это жизненно важно
сначала создать мобильный макет. Подход, ориентированный на мобильные устройства, заключается в следующем:
важно, потому что это поможет вам создать опыт, ориентированный на контент.
Создавайте четкую визуальную иерархию
Визуальные иерархии занимают центральное место, когда вы работаете над
адаптивный дизайн.В зависимости от типа контента и его ценности
для посетителей некоторые материалы важнее, и их следует просматривать в первую очередь, в то время как
другой контент менее ценен. Самый важный контент находится в верхней части
иерархия.
Чтобы упростить задачу, можно использовать шаблоны компоновки для нескольких устройств. Люк Вроблевски в своей статье «Шаблоны макетов для нескольких устройств» определил пять широких категорий адаптивных макетов. Для целей этой статьи я выберу только четыре категории:
В основном жидкие.Макет с несколькими столбцами обеспечивает более крупный
поля на больших экранах, полагается на плавные сетки и изображения для масштабирования от больших
экраны вплоть до маленьких экранов.
Падение колонны. Этот шаблон начинается с многоколоночного
макет и заканчивается макетом с одним столбцом, отбрасывая столбцы по пути
по мере того, как размеры экрана становятся уже.
Схема расположения переключателя. Этот шаблон пытается адаптироваться
на экранах разных размеров. Обычно это хорошо работает для сайтов с большим количеством визуальных элементов.
нравятся фотогалереи.
Рисунок не на холсте.Этот паттерн подталкивает второстепенные
содержание вне поля зрения.
Заключение
Инструменты адаптивного веб-дизайна позволяют дизайнерам поддерживать единообразный внешний вид на нескольких устройствах. Независимо от того, какое устройство использует человек, у него всегда будет контент, оптимизированный для этого носителя.
Адаптивный веб-дизайн — научитесь кодировать продвинутый HTML и CSS
Урок 4
В этом уроке
4
HTML
CSS
Поделиться
Интернет стал развиваться быстрее, чем кто-либо мог предположить, он растет как сумасшедший.Теперь, в последние несколько лет, на сцену резко выросла мобильная связь. Рост использования мобильного Интернета также намного опережает рост общего использования Интернета.
В наши дни трудно найти человека, у которого не было бы мобильного устройства или нескольких устройств, подключенных к Интернету. В Великобритании мобильных телефонов больше, чем людей, и, если тенденции сохранятся, использование мобильного Интернета превысит использование настольного Интернета в течение года.
С ростом использования мобильного Интернета встает вопрос о том, как создавать веб-сайты, подходящие для всех пользователей.Промышленным ответом на этот вопрос стал адаптивный веб-дизайн, также известный как RWD .
Отзывчивый обзор
Адаптивный веб-дизайн — это практика создания веб-сайта, подходящего для работы на любом устройстве и с любым размером экрана, независимо от размера, мобильного или настольного компьютера. Адаптивный веб-дизайн ориентирован на обеспечение интуитивно понятного и приятного опыта для всех. Пользователи настольных компьютеров и мобильных телефонов в равной степени выигрывают от адаптивных веб-сайтов.
Сам термин адаптивный веб-дизайн был придуман и в значительной степени разработан Итаном Маркоттом. Многое из того, что рассматривается в этом уроке, впервые было рассказано Итаном в сети и в его книге Responsive Web Design , которую стоит прочитать.
Фиг.4 У
Food Sense красивый веб-сайт, который реагирует на все размеры окна просмотра. Независимо от того, насколько большим или маленьким может быть окно просмотра, веб-сайт Food Sense настраивается, создавая естественный пользовательский интерфейс.
Отзывчивый vs.Адаптивная и мобильная версия
Для некоторых термин адаптивный может быть не новым, а другие могут быть еще более знакомы с терминами адаптивный или мобильный . Что может заставить вас задуматься, в чем именно разница между ними.
Отзывчивый и адаптивный веб-дизайн тесно связаны и часто заменяются как одно и то же. Отзывчивый обычно означает быстрое и позитивное реагирование на любое изменение, в то время как адаптивный означает, что его можно легко модифицировать для новой цели или ситуации, например, изменения.Благодаря адаптивному дизайну веб-сайты постоянно и плавно изменяются в зависимости от различных факторов, таких как ширина области просмотра, в то время как адаптивные веб-сайты создаются с учетом группы предустановленных факторов. Комбинация обоих идеальна, обеспечивая идеальную формулу для функциональных веб-сайтов. Какой именно термин используется, не имеет большого значения.
Mobile, с другой стороны, обычно означает создание отдельного веб-сайта, обычно в новом домене, исключительно для мобильных пользователей. Хотя иногда это имеет место, обычно это не лучшая идея.Мобильные веб-сайты могут быть очень легкими, но они зависят от новой базы кода и анализа браузера, что может стать препятствием как для разработчиков, так и для пользователей.
В настоящее время наиболее популярный метод заключается в адаптивном веб-дизайне, в котором предпочтение отдается дизайну, который динамически адаптируется к различным окнам просмотра браузера и устройства, при этом меняя макет и контент. Это решение обладает всеми тремя преимуществами: отзывчивым, адаптивным и мобильным.
Гибкие макеты
Адаптивный веб-дизайн разбит на три основных компонента, включая гибкие макеты, медиа-запросы и гибкие медиа.Первая часть, гибкие макеты, — это практика создания макета веб-сайта с гибкой сеткой, способной динамически изменять размер до любой ширины. Гибкие сетки строятся с использованием единиц относительной длины, чаще всего в процентах или em единиц. Эти относительные длины затем используются для объявления общих значений свойств сетки, таких как ширина , поле или отступ .
Относительная длина области просмотра
CSS3 представил некоторые новые единицы относительной длины, в частности, связанные с размером области просмотра браузера или устройства.Эти новые блоки включают vw , vh , vmin и vmax . В целом поддержка этих новых устройств невелика, но она растет. Со временем они захотят сыграть большую роль в создании адаптивных веб-сайтов.
VW Ширина окна просмотра
vh Высота видовых экранов
vmin Минимум высоты и ширины области просмотра
vmax Максимум высоты и ширины области просмотра
Гибкие макеты не рекомендуют использовать фиксированные единицы измерения, такие как пиксели или дюймы.Причина в том, что высота и ширина области просмотра постоянно меняются от устройства к устройству. Макеты веб-сайтов должны адаптироваться к этому изменению, а фиксированные значения имеют слишком много ограничений. К счастью, Итан указал на простую формулу, которая поможет определить пропорции гибкого макета с использованием относительных значений.
Формула основана на делении целевой ширины элемента на ширину его родительского элемента. Результат — относительная ширина целевого элемента.
1
2
цель ÷ контекст = результат
Гибкая сетка
Давайте посмотрим, как эта формула работает в макете из двух столбцов.Ниже у нас есть родительский раздел с классом , контейнер , обертывающий как раздел , так и , помимо элементов . Цель состоит в том, чтобы секция располагалась слева и в стороне, справа, с равными полями между ними. Обычно разметка и стили для этого макета выглядят примерно так.
HTML
1
2
3
4
5
<раздел>...
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.container {
ширина: 538 пикселей;
}
раздел,
в стороне {
маржа: 10 пикселей;
}
раздел {
плыть налево;
ширина: 340 пикселей;
}
в стороне {
float: right;
ширина: 158 пикселей;
}
Используя формулу гибкой сетки, мы можем взять все фиксированные единицы длины и превратить их в относительные единицы.В этом примере мы будем использовать проценты, но единицы на также будут работать. Обратите внимание: независимо от того, насколько широким становится родительский контейнер , разделы , и , за исключением полей и ширины , масштабируются пропорционально.
1
2
3
4
5
6
7
8
9
10
11
12
13
секция,
в стороне {
маржа: 1.858736059%; / * 10px ÷ 538px = 0,018587361 * /
}
раздел {
плыть налево;
ширина: 63.197026%; / * 340px ÷ 538px =.63197026 * /
}
в стороне {
float: right;
ширина: 29,3680297%; / * 158 пикселей ÷ 538 пикселей = 0,293680297 * /
}
Принятие концепции гибкого макета и формулы и повторное их применение ко всем частям сетки позволит создать полностью динамический веб-сайт, масштабируемый под любой размер области просмотра. Для еще большего контроля в гибком макете вы также можете использовать свойства min-width , max-width , min-height и max-height .
Одного подхода к гибкой компоновке недостаточно. Иногда ширина области просмотра браузера может быть настолько маленькой, что даже пропорциональное масштабирование макета приведет к созданию столбцов, которые слишком малы для эффективного отображения содержимого. В частности, когда макет становится слишком маленьким или слишком большим, текст может стать неразборчивым, а макет может начать ломаться. В этом случае мультимедийные запросы могут быть использованы для улучшения взаимодействия с пользователем.
Медиа-запросы были созданы как расширение для типов мультимедиа, которые обычно встречаются при нацеливании и включении стилей.Медиа-запросы предоставляют возможность указывать разные стили для конкретных условий браузера и устройства, например, ширины области просмотра или ориентации устройства. Возможность применять уникально ориентированные стили открывает мир возможностей и возможностей для адаптивного веб-дизайна.
Инициализация медиа-запросов
Существует несколько различных способов использования медиа-запросов: использование правила @media внутри существующей таблицы стилей, импорт новой таблицы стилей с использованием правила @import или создание ссылки на отдельную таблицу стилей изнутри HTML-документ.Вообще говоря, рекомендуется использовать правило @media внутри существующей таблицы стилей, чтобы избежать дополнительных HTTP-запросов.
HTML
1
2
3
CSS
1
2
3
4
5
6
/ * Правило @media * /
@media all and (max-width: 1024px) {...}
/ * Правило @import * /
@import url (styles.css) all and (max-width: 1024px) {...}
Каждый медиа-запрос может включать в себя тип медиа, за которым следует одно или несколько выражений. Общие типы носителей включают все , экран , печать , телевизор и шрифт Брайля . Спецификация HTML5 включает новые типы мультимедиа, включая даже 3D-очки . Если тип носителя не указан, медиа-запрос по умолчанию будет использовать тип носителя , экран .
Выражение медиа-запроса, которое следует за типом медиа, может включать в себя различные медиа-функции и значения, которые затем присваиваются как истинные или ложные. Когда мультимедийной функции и значению присваивается значение true, применяются стили. Если для медиа-функции и значения присвоено значение false, стили игнорируются.
Логические операторы в медиа-запросах
Логические операторы в медиа-запросах помогают создавать мощные выражения. Для использования в медиа-запросах доступны три различных логических оператора, в том числе и , не и только .
Использование логических операторов и в медиа-запросе позволяет добавить дополнительное условие, гарантируя, что браузер или устройства выполняют и , и , и , и , и , и , и т. Д. Несколько отдельных медиа-запросов могут быть разделены запятыми, действуя как невысказанный оператор или . В приведенном ниже примере выбираются все типы мультимедиа от 800 до 1024 пикселей в ширину.
1
2
@media all and (min-width: 800px) и (max-width: 1024px) {...}
Логический оператор , а не отменяет запрос, указывая любой запрос, кроме указанного. В приведенном ниже примере выражение применяется к любому устройству, не имеющему цветного экрана. Здесь, например, применимы черно-белые или монохромные экраны.
1
2
@media not screen and (color) {...}
Логический оператор only является новым оператором и не распознается пользовательскими агентами, использующими алгоритм HTML4, таким образом скрывая стили от устройств или браузеров, которые не поддерживают медиа-запросы.Ниже выражение выбирает только экраны с портретной ориентацией, на которых пользовательский агент может воспроизводить медиа-запросы.
1
2
@media only screen and (Ориентация: книжная) {...}
Без типа носителя
При использовании , а не и , только логических операторов , тип носителя можно не указывать. В этом случае тип носителя по умолчанию все .
Медиа-функции в медиа-запросах
Знание синтаксиса медиа-запросов и работы логических операторов — отличное введение в медиа-запросы, но настоящая работа связана с медиа-функциями. Функции мультимедиа определяют, какие атрибуты или свойства будут использоваться в выражении мультимедийного запроса.
Высота
и Ширина Характеристики носителя
Одна из наиболее распространенных функций мультимедиа связана с определением высоты или ширины для области просмотра устройства или браузера.Высота и ширина могут быть найдены с помощью функций мультимедиа высота и ширина . Каждая из этих мультимедийных функций может иметь префикс min или max квалификаторов, создавая такую функцию, как min-width или max-width .
Свойства , высота, и , ширина, основаны на высоте и ширине области визуализации области просмотра, например окна браузера. Значения для этих функций мультимедиа по высоте и ширине могут быть любой единицей длины, относительной или абсолютной.
1
2
@media all and (min-width: 320px) и (max-width: 780px) {...}
В адаптивном дизайне наиболее часто используемые функции включают min-width и max-width . Они помогают создавать адаптивные веб-сайты в равной степени на настольных компьютерах и мобильных устройствах, избегая путаницы с функциями устройства.
Использование минимум
и максимум префиксов
Префиксы мин. и макс. могут использоваться для многих мультимедийных функций.Префикс min указывает значение , большее или равное , тогда как префикс max указывает значение , меньшее или равное . Использование префиксов min и max позволяет избежать конфликта с общим синтаксисом HTML, в частности не использовать символы < и > .
Ориентация носителя
Ориентация Функция носителя определяет, находится ли устройство в горизонтальной ориентации или книжной ориентации . альбомный режим запускается, когда дисплей больше, чем выше, а портретный режим запускается, когда дисплей выше, чем шире. Эта мультимедийная функция играет большую роль в мобильных устройствах.
1
2
@media all and (ориентация: альбомная) {...}
Характеристики носителя с соотношением сторон
Соотношение сторон и соотношение сторон устройства Характеристики определяют соотношение ширины / высоты пикселя целевой области рендеринга или устройства вывода.Префиксы min и max доступны для использования с различными функциями соотношения сторон, определяя соотношение выше или ниже указанного.
Значение для функции соотношения сторон состоит из двух положительных целых чисел, разделенных косой чертой. Первое целое число определяет ширину в пикселях, а второе целое число определяет высоту в пикселях.
1
2
@media all and (min-device-aspect-ratio: 16/9) {...}
Pixel Ratio Media Features
В дополнение к функциям мультимедиа с соотношением сторон есть также функции мультимедиа с соотношением пикселей . Эти функции включают в себя функцию отношения пикселей устройства , а также префиксы мин. и макс. . В частности, функция соотношения пикселей отлично подходит для идентификации устройств высокой четкости, включая дисплеи Retina. Медиа-запросы для этого выглядят следующим образом.
1
2
@media only screen и (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3) {...}
Разрешение Media Feature
Разрешение Медиа-функция определяет разрешение устройства вывода в плотности пикселей, также известной как точек на дюйм или DPI . Медиа-функция с разрешением поддерживает префиксы мин. и макс. .Кроме того, мультимедийная функция с разрешением и будет принимать точки на пиксель ( 1,3dppx, ), точки на сантиметр ( 118dpcm, ) и другие значения разрешения на основе длины.
1
2
@media print и (минимальное разрешение: 300 точек на дюйм) {...}
Другие мультимедийные функции
Другие мультимедийные функции включают определение доступных выходных цветов с использованием функций цвет , цветового индекса и монохромный , идентификацию растровых устройств с помощью функции сетки и идентификацию процесса сканирования телевизора с помощью сканировать особенность.Эти функции менее распространены, но в равной степени полезны при необходимости.
Браузер медиазапросов Поддержка
К сожалению, медиа-запросы не работают в Internet Explorer 8 и ниже, а также в других устаревших браузерах. Однако есть пара подходящих полифиллов, написанных на Javascript.
Respond.js - это легкий полифилл, который ищет только типы мультимедиа минимальной / максимальной ширины, что идеально подходит, если используются только эти типы мультимедийных запросов. CSS3-MediaQueries.js - это более развитый и тяжелый полифилл, предлагающий поддержку большего массива более сложных медиа-запросов.Кроме того, имейте в виду, что любой полифил может иметь проблемы с производительностью и потенциально замедлять работу веб-сайтов. Убедитесь, что любой конкретный полифилл стоит компромисса с производительностью.
Демонстрация медиа-запросов
Используя медиа-запросы, мы теперь перепишем гибкий макет, который мы создали ранее. Одна из текущих проблем в демонстрации возникает, когда боковая ширина становится бесполезно малой в меньших окнах просмотра. Добавив медиа-запрос для видовых экранов шириной менее 420 пикселей, мы можем изменить макет, отключив поплавки и изменив ширину секции и в сторону .
1
2
3
4
5
6
7
@media all and (max-width: 420px) {
section, aside {
float: нет;
ширина: авто;
}
}
Фиг.4
Без каких-либо медиа-запросов секции и в сторону становятся довольно маленькими. Возможно, он слишком мал, чтобы даже содержать реальный контент.
Фиг.4
Используя медиа-запросы для удаления поплавков и изменения их ширины, раздел и в сторону теперь могут охватывать всю ширину области просмотра, давая передышку для любого существующего контента.
Определение точек останова
Ваш инстинкт может заключаться в том, чтобы записывать точки останова медиа-запроса вокруг общих размеров области просмотра, определяемых различными разрешениями устройства, такими как 320px , 480px , 768px , 1024px , 1224px и т. Д. Это плохая идея .
При создании адаптивного веб-сайта он должен адаптироваться к массиву различных размеров области просмотра, независимо от устройства. Точки останова следует вводить только тогда, когда веб-сайт начинает ломаться, выглядит странно или затрудняется работа.
Кроме того, все время выпускаются новые устройства и разрешения. Попытка не отставать от этих изменений может оказаться бесконечным процессом.
Mobile First
Один из популярных методов использования медиа-запросов называется сначала мобильный . Подход, ориентированный на мобильные устройства, включает использование стилей, нацеленных на меньшие области просмотра, в качестве стилей по умолчанию для веб-сайта, а затем использование медиа-запросов для добавления стилей по мере увеличения области просмотра.
Основное мнение, лежащее в основе дизайна, ориентированного на мобильные устройства, заключается в том, что пользователю мобильного устройства, обычно использующего меньшее окно просмотра, не нужно загружать стили для настольного компьютера только для того, чтобы позже они были перезаписаны мобильными стилями.Это пустая трата полосы пропускания. Пропускная способность, которая важна для всех пользователей, которым нужен быстрый веб-сайт.
Подход «сначала мобильные» также поддерживает проектирование с учетом ограничений мобильного пользователя. Вскоре большая часть использования Интернета будет осуществляться на мобильных устройствах. Планируйте их соответствующим образом и развивайте собственный мобильный опыт.
Ряд мобильных медиа-запросов в первую очередь может выглядеть примерно так.
1
2
3
4
5
6
/ * Сначала стили по умолчанию, затем медиа-запросы * /
@media screen и (min-width: 400px) {...}
@media screen и (min-width: 600px) {...}
@media screen и (min-width: 1000 пикселей) {...}
@media screen и (min-width: 1400px) {...}
Кроме того, загрузку ненужных медиаресурсов можно остановить с помощью медиа-запросов. Вообще говоря, избегать CSS3-теней, градиентов, преобразований и анимации в мобильных стилях - тоже неплохая идея. При чрезмерном использовании они вызывают большую нагрузку и могут даже сократить срок службы батареи устройства.
1
2
3
4
5
6
7
8
9
10
11
/ * Носитель по умолчанию * /
тело {
фон: #ddd;
}
/ * Медиа для больших устройств * /
@media screen и (min-width: 800px) {
тело {
фоновое изображение: url ("bg.png") 50% 50% без повтора;
}
}
Мобильная первая демонстрация
Добавляя медиа-запросы к нашему предыдущему примеру, мы переписали несколько стилей, чтобы иметь лучший макет на видовых экранах шириной менее 420 пикселей.Переписав этот код, чтобы сначала использовать мобильные стили по умолчанию, а затем добавив медиа-запросы для настройки для видовых экранов шириной более 420 пикселей, мы построим следующее:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
секция,
в стороне {
маржа: 1.858736059%;
}
@media all and (min-width: 420px) {
.container {
максимальная ширина: 538 пикселей;
}
раздел {
плыть налево;
ширина: 63.197026%;
}
в стороне {
float: right;
ширина: 29.3680297%;
}
}
Обратите внимание, это то же количество кода, что и раньше. Единственным исключением является то, что мобильные устройства должны отображать только одну декларацию CSS . Все остальные стили откладываются, загружаются только на более крупные области просмотра и без перезаписи исходных стилей.
Окно просмотра
В наши дни мобильные устройства обычно неплохо справляются с отображением веб-сайтов. Иногда им может понадобиться небольшая помощь, особенно при определении размера области просмотра, масштаба и разрешения веб-сайта.Чтобы исправить это, Apple изобрела метатег viewport .
Фиг.4
Хотя в этой демонстрации есть медиа-запросы, многие мобильные устройства по-прежнему не знают исходную ширину или масштаб веб-сайта. Следовательно, они не могут прерывать медиа-запросы.
Высота видового экрана
и ширина
Использование метатега viewport со значениями height или width будет определять высоту или ширину окна просмотра соответственно.Каждое значение принимает либо положительное целое число, либо ключевое слово. Для свойства height допускается ключевое слово device-height , а для свойства width принято ключевое слово device-width . Использование этих ключевых слов унаследует значения высоты и ширины устройства по умолчанию.
Для получения наилучших результатов и наилучшего внешнего вида веб-сайта рекомендуется использовать параметры устройства по умолчанию, применяя значения device-height и device-width .
1
2
Фиг.4
Предоставление устройствам информации о предполагаемой ширине веб-сайта, в данном случае ширина устройства , позволяет правильно изменять размер веб-сайта и обрабатывать любые соответствующие медиа-запросы.
Масштаб видового экрана
Чтобы контролировать, как веб-сайт масштабируется на мобильном устройстве и как пользователи могут продолжать масштабировать веб-сайт, используйте свойства минимального масштаба , максимального масштаба , начального масштаба и масштабируемые пользователем свойства .
Начальный масштаб веб-сайта должен быть установлен на 1 , поскольку это определяет соотношение между высотой устройства в портретной ориентации и размером области просмотра. Если устройство находится в альбомном режиме, это будет соотношение между шириной устройства и размером области просмотра. Значения для начального масштаба всегда должны быть положительным целым числом от 0 до 10 .
1
2
Рис.4
Использование целого числа больше 1 увеличит масштаб веб-сайта до масштаба по умолчанию. Обычно это значение устанавливается равным 1 .
Значения минимального масштаба и максимального масштаба определяют, насколько маленьким и большим может быть масштабирование области просмотра. При использовании минимального масштаба значение должно быть положительным целым числом, меньшим или равным начальному масштабу . Используя те же рассуждения, значение максимального масштаба должно быть положительным целым числом, большим или равным начальному масштабу .Значения для обоих из них также должны находиться в диапазоне от 0 до 10 .
1
2
Вообще говоря, эти значения не должны быть установлены на то же значение, что и исходная шкала . Это отключит любое масштабирование, которое может быть выполнено вместо этого, используя масштабируемое пользователем значение .Установка масштабируемого пользователем значения на без отключит любое масштабирование. Как вариант, установка масштабируемого пользователем значения на да включит масштабирование.
Отключение возможности масштабирования веб-сайта - плохая идея. . Это вредит доступности и удобству использования, не позволяя людям с ограниченными возможностями просматривать веб-сайт по своему желанию.
1
2
Разрешение области просмотра
Разрешение браузеру решать, как масштабировать веб-сайт на основе любых значений масштаба области просмотра, обычно помогает.Когда требуется больший контроль, особенно над разрешением устройства, можно использовать значение target-densitydpi . Область просмотра target-densitydpi принимает несколько значений, включая device-dpi , high-dpi , medium-dpi , low-dpi или фактическое число точек на дюйм.
Использование target-densitydpi значение области просмотра редко, но чрезвычайно полезно, когда требуется попиксельное управление.
1
2
Объединение значений области просмотра
Мета-тег области просмотра будет принимать как отдельные значения, так и несколько значений, что позволяет одновременно устанавливать несколько свойств области просмотра.Установка нескольких значений требует разделения их запятой в пределах значения атрибута content . Одно из рекомендуемых значений области просмотра показано ниже с использованием свойств ширины и начального масштаба .
1
2
Фиг.4
Комбинация width = device-width и initial-scale = 1 обеспечивает обычно требуемый начальный размер и масштаб.
Правило области просмотра CSS
Поскольку метатег области просмотра так сильно вращается вокруг установки стилей отображения веб-сайта, было рекомендовано переместить область просмотра из метатега с HTML в правило @ в CSS. Это помогает отделить стиль от содержимого, обеспечивая более семантический подход.
В настоящее время в некоторых браузерах уже реализовано правило @viewport , однако его поддержка по всем направлениям невелика.Ранее рекомендованный метатег viewport выглядел бы как следующее правило @viewport в CSS.
1
2
3
4
5
@viewport {
ширина: ширина устройства;
масштабирование: 1;
}
Последний, не менее важный аспект адаптивного веб-дизайна - это гибкие медиа. Поскольку размер видовых экранов начинает меняться, медиа не всегда соответствует их размерам. Изображения, видео и другие типы мультимедиа должны быть масштабируемыми, изменяя их размер по мере изменения размера области просмотра.
Один из быстрых способов сделать носитель масштабируемым - использовать свойство max-width со значением 100% . Это гарантирует, что по мере уменьшения области просмотра любой носитель будет уменьшаться в соответствии с шириной своих контейнеров.
1
2
3
4
img, video, canvas {
максимальная ширина: 100%;
}
Гибкие встроенные носители
К сожалению, свойство max-width не работает для всех экземпляров мультимедиа, особенно для iframe s и встроенных мультимедиа.Когда дело доходит до сторонних веб-сайтов, таких как YouTube, которые используют фреймы для встроенных мультимедиа, это огромное разочарование. К счастью, есть обходной путь.
Чтобы встроенное мультимедиа было полностью отзывчивым, встроенный элемент должен быть абсолютно позиционирован внутри родительского элемента. Родительский элемент должен иметь ширину 100% , чтобы он мог масштабироваться в зависимости от ширины области просмотра. Родительский элемент также должен иметь высоту 0 для запуска механизма hasLayout в Internet Explorer.
Затем
Padding присваивается нижней части родительского элемента, значение которого устанавливается в том же соотношении сторон видео. Это позволяет высоте родительского элемента быть пропорциональной его ширине. Помните предыдущую формулу адаптивного дизайна? Если видео имеет соотношение сторон 16: 9, 9 , разделенное на 16 , будет равно .5625 , что потребует заполнения нижнего края 56,25% . Отступы снизу, а не сверху используются специально для предотвращения Internet Explorer 5.5 от разрыва и рассматривает родительский элемент как абсолютно позиционированный элемент.
По соображениям безопасности CodePen не позволяет использовать iframe во встроенных примерах кода, однако вы можете просмотреть и отредактировать этот код на их веб-сайте.
