Адаптивный дизайн сайта | Виды адаптивных мобильных дизайнов
Количество устройств с выходом в интернет, постоянно растет. Сначала к компьютерам добавились смартфоны, потом планшеты, теперь телевизоры. Кто знает, каким образом мы будем выходить в Сеть завтра. Очевидно, что дизайн сайтов нужно адаптировать для всех возможных экранов: стационарных и мобильных. Эту задачу решает адаптивный дизайн.
Что такое сайт с адаптивным дизайном?
Вы наверняка замечали, что некоторые сайты по-разному выглядят на разных экранах, то есть на большом мониторе мы видим, к примеру, три колонки, развернутое меню и много других функциональных блоков. На экране мобильного устройства колонка уже одна, меню перегруппировано, большая часть элементов управления скрыта.
Можно подумать, что перед нами совсем другой сайт, созданный специально для мобильных устройств. Так, к слову, раньше и делали, но сейчас дизайнеры предпочитают создавать универсальный дизайн, который автоматически подстраивается под любой размер экрана. Делать это можно разными способами.
Виды адаптивных мобильных дизайнов
Подходы к созданию мобильных сайтов развиваются. Первым из них был так называемый резиновый дизайн, когда контент растягивался или сжимался. Для разных разрешений стационарных мониторов такой подход был вполне применим, но адаптировать дизайн сайта для маленьких экранов смартфонов он уже не мог. Изображение и текст становились слишком мелкими. Поэтому появились более функциональные методы.
- Адаптивный макет. В этом случае проект сайта создается на основе нескольких макетов, фиксированных для стандартных размеров экранов. Фактически дизайнер проектирует несколько разных дизайнов, между которыми выполняется автоматическое переключение. Размеры блоков сайта в этом случае всегда заданы жестко (в px).
- Отзывчивый макет. При таком подходе создается проект сайта с гибкой сеткой, гибкими изображениями и медиазапросами. Иначе говоря, размер блоков задается не в пикселях, а в процентах от размера экрана. Для такого дизайна не имеет значения, открыт сайт на мобильном устройстве или на десктопе — макет в любом случае будет выглядеть хорошо.
- Смешанный макет. Если дизайнер хочет сделать макет максимально адаптированным к всевозможным размерам экранов, он может комбинировать оба подхода. В одних случаях выставлять размеры в пикселях, в других — в процентах, увеличить насколько возможно количество возможных разрешений экранов. Такой подход называют mobile last (от англ. — «последними мобильные»). Его чаще всего используют при создании мобильного сайта на основе классического.
Обратите внимание, что термин «адаптивный макет сайта» — это совсем не то же самое, что адаптивный дизайн сайта. Макет — это лишь изображение, показывающее расположение элементов сайта. Дизайн же — понятие более общее, отражающее подход к работе.
В чем разница между отзывчивым и адаптивным дизайном сайта?
Отзывчивый дизайн основан на трех принципах:
- резиновый макет;
- медиазапросы;
- резиновые изображения и видео.
Все это реализуется средствами HTML+CSS, потому что такой код будет работать на абсолютно любом устройстве: и мобильном, и стационарном. Но при этом мы получаем сильные ограничения по функциональности. Фактически дизайнер разрабатывает только мобильный сайт, который будет просто визуально изменяться под размер экрана.
Адаптивный дизайн основан на отзывчивом, но дополнен концепциями прогрессивного улучшения и mobile first (от англ. — «сначала мобильные»). Эти концепции заключаются в том, что разработка начинается с создания мобильного, самого простого сайта, который постепенно усложняется. На базу из HTML+CSS наращивают улучшения и функциональные элементы, реализуемые средствами CSS+JS.
Выглядеть это будет следующим образом: адаптивный сайт, отображаемый на мобильном устройстве, имеет базовые возможности для взаимодействия с пользователем, при этом большая часть элементов управления будет скрыта. На планшете с большим размером экрана часть элементов управления будет доступна сразу, это уже не совсем мобильный, но еще и не полноценный сайт. На большом экране десктопа адаптивный дизайн «продемонстрирует» нам сайт с максимальным усложнением и функциональностью: всплывающими окнами, онлайн-консультантом, динамическим контентом и так далее.
Универсальные шаблоны для адаптивного дизайна
Каким именно образом делать дизайн адаптивным, каждый решает сам. Можно создать полностью свой макет, а можно использовать один из вариантов, предложенных Люком Вроблевски — основоположником концепции «сначала мобильные».
MostlyFluid («самый гибкий»)
Этот макет основан на резиновой сетке, но на больших экранах она не растягивается, а остается неизменной — увеличиваются лишь поля. Зато при уменьшении экрана колонки сначала сжимаются, а при достижении контрольной точки выстраиваются друг под другом. Основным достоинством этого шаблона можно назвать то, что контрольная точка, на которой происходит переход адаптивного мобильного дизайна на новое расположение элементов, всего одна.
Column Drop («сброс колонок»)
Этот адаптивный шаблон подразумевает видоизменения дизайна следующим образом: при уменьшении размеров экрана колонки выстраиваются вертикально друг под другом, но не все сразу, как в предыдущем шаблоне, а постепенно. Контрольные точки для этого шаблона нужно выбирать в зависимости от вида контента.
LayoutShifter («сдвиг макета»)
Один из самых сложных макетов для адаптивного дизайна, но в то же время и один из самых эффективных. В нем предусмотрено несколько контрольных точек, переход через которые приведет не только к другому размещению колонок, но и к перемещению контента.
Tiny Tweaks («маленькие хитрости»)
Не такой универсальный шаблон, как предыдущие, потому что подходит лишь для дизайна из одной колонки. Это, к примеру, большие статьи, лендинги или одностраничные сайты. В этом случае при изменении размера меняется размер шрифта и изображений, перемещаются отдельные блоки.
Off Canvas («за границами»)
Идея этого шаблона заключается в том, что на большом экране десктопа видны все меню и элементы навигации. Но стоит открыть его на устройстве с меньшим размером дисплея, как часть элементов будет скрыта за границами экрана. В любой момент их можно будет вызвать, а затем скрыть обратно.
Эти шаблоны необязательно использовать поодиночке. Их вполне можно комбинировать — например, Off Canvas хорошо сочетается с Column Drop.
Обязательно ли использовать адаптивный мобильный дизайн?
Еще несколько лет назад над этим вопросом действительно можно было думать. Сегодня объем трафика с мобильных устройств растет с каждым днем, а значит, делать сайты, которые будут нормально выглядеть только на десктопах, просто неразумно.
www.demis.ru
9 основных принципов отзывчивого веб-дизайна / Habr
Отзывчивый дизайн — отличное решение проблемы корректного отображения сайта на разных экранах. Однако новичкам зачастую трудно понять основы, обучаясь только по книгам/статьям. С каждым днём появляется всё больше различных устройств, имеющих разные размеры экрана, поэтому создание дизайна в пикселях и только для настольных компьютеров/смартфонов остаётся в прошлом. Именно поэтому сейчас стоит изучить принципы
Отзывчивый vs Адаптивный веб-дизайн
Может показаться, что это одно и то же. Однако оба этих вида дизайна дополняют друг друга и подходят каждый для своей задачи.
Поток
Когда размер экрана уменьшается, содержимое страницы начинает занимать больше высоты, и элементы начинают смещаться вниз. Такое поведение называется потоком. Это может быть труднодоступным для понимания, если раньше вы использовали фиксированные размеры элементов. Однако, когда вы начнёте использовать поток, вы поймёте принцип его работы.
Относительные единицы измерения
Область просмотра страницы может быть монитором, экраном мобильного или чем угодно ещё. Плотность пикселей на разных экранах также разная, поэтому нам нужны гибкие единицы измерения, работающие везде. Отзывчивый дизайн — именно тот случай, когда относительные единицы измерения вроде процентов становятся действительно полезными. С помощью процентов мы можем задать блоку ширину в 50%, и на любом устройстве он будет занимать лишь половину экрана.
Контрольные точки (Breakpoints)
Контрольные точки позволяют менять расположение блоков на странице только в случае использования экрана с определёнными размерами. Например, на настольных компьютерах у сайта будет три колонки, а на мобильных — только одна. Как вы расставите контрольные точки, зависит от поведения контента. Если содержимое страницы «ползёт», то определённо следует добавить контрольную точку. Однако, контрольные точки следует использовать с осторожностью — вы можете в них запутаться.
Max- и min-значения
Контент, занимающий всю ширину экрана — это здорово, если он отображается на мобильном. А если вы откроете страницу через ваш телевизор? Вряд ли увиденная картина обрадует вас. Поэтому здравым решением будет использование минимальных и максимальных значений. Например, если задать блоку свойства `width: 100%` и `max-width: 1000px`, то он будет отображаться на весь экран, если ширина экрана меньше 1000 пикселей; в противном случае, блок будет занимать 1000 пикселей.
Вложенные объекты
Помните
position: relative? Если у вас будет много элементов, зависящих от расположения других элементов, то их будет тяжело контролировать. Намного проще и правильнее обернуть эти элементы в один контейнер. Кстати, это тот случай, когда статичные единицы измерения вроде пикселей помогут вам. Они полезны для содержимого, которое вы не хотите адаптировать к размеру экрана — например, это может быть логотип или кнопка.Desktop или mobile first
С технической стороны нет никаких отличий: вы можете писать базовую разметку для мобильных, и расставлять ключевые точки для десктопов (mobile first) и наоборот. Часто люди не знают, какой подход выбрать. Подумайте как следует и выберите подходящий вам подход.
Веб-шрифты vs системные шрифты
Хотите использовать на своём сайте круто смотрящуюся гарнитуру Futura или Didot? Используйте веб-шрифты! Хоть они и выглядят красиво, не стоит забывать, что каждый подключённый шрифт будет загружен. Соответственно, чем больше шрифтов, тем медленнее загружается страница. С другой стороны, системные шрифты загружаются моментально за исключением случаев, когда пользователь не имеет локально установленного шрифта, используемого на странице. В таких случаях браузер будет использовать шрифт по умолчанию.
Растровые vs векторные изображения
Имеет ли ваше изображение множество мелких деталей и впечатляющих эффектов? Если да, то используйте растровый формат. В противном случае используйте векторный формат. Для растровых изображений используйте форматы jpg, png или gif, для векторных лучшим выбором будут SVG и иконочные шрифты. Каждый из форматов имеет свои преимущества и недостатки. В любом случае, помните о размере изображений — ни одна картинка не должна попасть в онлайн, не будучи оптимизированной (сжатой). Векторные изображения зачастую избавлены от лишнего размера, однако они не поддерживаются старыми браузерами. Также стоит помнить, что если векторное изображение содержит много деталей, то оно может весить больше растрового.
habr.com
Как сделать один сайт для всех устройств (Responsive Web Design) / Habr
Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»
Почему это глупо
Во-первых, никто не сможет предугадать, какими устройствами будут пользоваться ваши посетители. Нужно ориентироваться не на устройства, а на разрешения.
Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).
Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».
Как сделать один сайт для всех устройств
Вопросы, которые поднимал автор вышеуказанной статьи, уже довольно давно в цивилизованном мире обдуманы, и, более того, они уже решены.
Сейчас можно сделать 1 сайт с единственной версткой, который будет работать на устройствах, начиная с телефонов, заканчивая огромными телевизорами. Например, yiibu.com или alistapart.com (поуменьшайте окно браузера):
Все это называется «Responsive Web Design»
Responsive состоит из следующих техник:
Резиновый макет на основе пропорций (fluid grid)
Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:
.leftcolumn {
width: 27%; /* 270px / 1000px = 0,27 */
float: left;
}
.rightcolumn {
width: 73%; /* 730px / 1000px = 0,73 */
float: right;
}
Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170px, то для него поменяются цель и контекст, и код будет выглядеть вот так:
.leftcolumn .some-div {
width: 62,962963%; /* 170px / 270px = 0.62962963 */
float: left;
}
На хабре был перевод оригинальной статьи Ethan Marcotte «Fluid Grids».
Резиновые изображения (fluid images)
Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства { max-width: 100% }. Изображение с img { max-width: 100% } никогда не вылезет из своего блока-родителя.
Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится. Этот принцип применим как для img, так и для embed, object, video.
Подробная оригинальная статья «Fluid Images».
Media queries
Нужны для отображения макета, оптимизированного под разрешение, с которого в данный момент этот сайт смотрится. Это часть стандарта CSS, которая позволяет применять стили на основе информации о разрешении устройства.
Например, так:
/* начало css */
Здесь базовые стили для глупых браузеров. Например, для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же :).
@media only screen and (min-width: 480px) {
Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone и так далее.
}
@media only screen and (min-width: 768px) {
Планшеты в режиме portrait.
}
@media only screen and (min-width: 992px) {
Планшеты в режиме landscape, нетбуки, ноутбуки, десктоп.
}
@media only screen and (min-width: 1382px) {
Десктоп с большими разрешениями, телевизоры.
}
/* конец css */
media queries понимают все разумные браузеры. Для ie же есть Respond.js
Mobile first
Это техника, при которой сайт верстается сначала для устройств с меньшими возможностями, а затем с помощью media queries добавляются возможности и плюшки.
Так глупые браузеры без media queries получат самый простой контент (например, на мобильных телефонах). А более продвинутые поймут и отрисуют страницу, беря во внимание media queries.
Подробнее о Mobile first
Ссылки
1. Русскоязычный блог о Responsive Web Design
2. Единственная хорошая книга на эту тему — «Responsive Web Design». Написана Ethan Marcotte, который в общем и положил начало адаптивным макетам. После ее прочтения многое прояснится.
habr.com
Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница? / Habr
С тех пор, как вышли книги «Adaptive Web Design» Аарона Густафсона и «Responsive Web Design» Итана Маркотта (русское издание называется «Отзывчивый веб-дизайн»), в сообществе веб-дизайнеров и разработчиков ведутся споры о том, чем отличаются эти 2 подхода. Одни считают, что эти 2 понятия являются синонимами, а другие, что это совершенно разные понятия. Но, как известно, истина всегда где-то посередине, поэтому предлагаю вашему вниманию перевод статьи финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen) «Adaptive vs. Responsive, what’s the difference?»:
Кажется, есть некоторая путаница относительно этих терминов и того, что они означают, так вот здесь мои мысли на данную тему и несколько ссылок, чтобы подкрепить их. Я, как правило, не очень пылкий, когда дело доходит до обсуждения чего-либо, но на этот раз я хотел бы внести в этот вопрос ясность, т.к. слышу его очень часто.
«Отзывчивый веб-дизайн» (Responsive Web Design) является частью более широкого понятия, которое называется «Адаптивный веб-дизайн» (Adaptive Web Design). Когда идет речь об отзывчивом веб-дизайне, то мы имеем в виду только макет веб-страницы (Итан Маркотт, «резиновый» макет, гибкие изображения и медиазапросы).
С другой стороны, «Адаптивный веб-дизайн» включает в себя гораздо больше, чем просто «резиновый» макет. На практике это почти одно и то же, что и прогрессивное улучшение (progressive enhancement), если говорить кратко, то это понятие означает, что мы стремимся предоставить лучшие возможности для максимально широкой аудитории. Также: нельзя смешивать понятия «Адаптивный веб-дизайн» и «Адаптивный макет» (Adaptive layout), т.к. это совершенно разные вещи.
И, наконец, «Адаптивный макет» означает макет, сделанный путем сочетания множества фиксированных горизонтальных размеров (ширины). Сейчас, мне кажется, если все сделано правильно и блоки фиксированной ширины сочетаются с «резиновыми» блоками, то Адаптивный макет можно считать одной из форм отзывчивого веб-дизайна, а не просто его альтернативой. Зельдман уже высказывал немного похожую идею в 2011 году в одной из записей своего блога.
Примечание переводчика. К сожалению, из текста Вильями Сальминена сложно понять, что такое «Адаптивный макет», поэтому я постараюсь объяснить, что это означает своими словами. Подход Итана Маркотта предусматривает использование «резинового» макета (ширина, отступы и поля задаются в процентах), а адаптивный макет предполагает, что для каждого размера экрана у нас используются свои стилевые правила, в которых жестко заданы фиксированные размеры элементов (в пикселях). Более развернутое описание данного подхода вы можете найти в статье «Switchy McLayout: An Adaptive Layout Technique» (перевод).
Ссылки
Update v1. Если моя статья сделала эти 2 понятия более сложными для восприятия, чем они есть на самом деле, то постараюсь объяснить все в двух словах: отзывчивый веб-дизайн является частью адаптивного. Отзывчивый веб-дизайн = «резиновый» макет, в то время как адаптивный веб-дизайн = «резиновый» макет + прогрессивное улучшение.
habr.com
теперь дело уже не в размере экрана / UIDG corporate blog / Habr
В марте 2012 года Гай Подъярны (Guy Podjarny) провел тест, в ходе которого сравнивалась продуктивность работы сотен новых адаптивных сайтов на устройствах с четырьмя различными разрешениями экранов. Получившиеся результаты были весьма разочаровывающими.После двух лет подъема адаптивного дизайна, когда любой дизайнер и разработчик, которых только можно представить, запрыгнули в этот поезд, тест производительности на различных разрешениях потряс сами основы адаптивной теории.
Гай доказал, что практически все адаптивные сайты имеют избыточный вес.
«Мы сделали интернет по своему подобию … Тяжелым», – Джейсон Григсби.
Но, что еще важнее, мобильные пользователи точно так же, как и пользователи настольных ПК, подвергались килобайтной перегрузке.
Представители веб-сообщества по-разному отреагировали на эти данные. Некоторые заявляли, что адаптивный дизайн не является решением на все случаи жизни и, возможно, на данный момент недостаточно развит, чтобы справляться со всеми вызовами, с которыми сегодня сталкиваются дизайнеры.
К счастью, в веб-сообществе всегда найдутся люди, которые схватят быка за рога и перевернут ситуацию с ног на голову.
Современные веб-гуру вроде Брэда Фроста (Brad Frost), Люка Вроблевски (Luke Wroblewski) и Кристиана Хейльманна (Christian Heilmann) увидели возможности там, где другие ужасались кризису, и смогли обернуть проблему на пользу сообществу.
«Если ваш сайт весит 15MB, то это не HTML5. Это глупость», – Кристиан Хейльманн.
Без обид, но производительность в вебе традиционно достигалась за счет вещей, которые лучше всего описываются жаргонизмами разработчиков. Термины вроде GZIP-инг, уродование (uglifying), минификация, DNS Lookup, файл-конкатенация… Все эти непонятные слова выносят дизайнеров за скобки.
Умные люди в сообществе, однако, все же поняли, что корни проблемы лежат глубже. На самом деле абсолютно не важно, оптимизируете вы или сжимаете изображение в ультра высоком разрешении, если при этом вы просто скрываете его от мобильного пользователя, который все равно должен скачать это изображение, чтобы его посмотреть.
«Хорошая производительность – это хороший дизайн», – Брэд Фрост.
Чтобы создавать по-настоящему легкие сайты, не стоит заморачиваться на производительности, вместо этого, производительность должна рассматриваться как один из элементов дизайна.
Производительность так же важна, как и любая другая вещь. Сайты, которые добиваются хороших результатов производительности, с самого начала придерживаются такого подхода. А те, кто упускает это из виду, в конечном итоге страдают от низкой скорости загрузки.
«Производительность – это уважение. Уважайте своих пользователей и они вернутся снова», – Брэд Фрост.
Почему так происходит
Показатель отказов
Существует исследование, согласно которому, 57% пользователей уйдут с вашего сайта, если он загружается дольше трех секунд.
Google, Page Speed & SEO
Весной 2010 года Google начал учитывать скорость при ранжировании сайтов. Она не оказывает большое влияние на позицию сайтов со средней скоростью загрузки, но если страница не загружается за определенное время, то поисковый алгоритм применяет к такому сайту штрафные санкции.
Это еще раз доказывает, что когда речь идет о пользовательском опыте, необходимо уделять внимание скорости.
Соображения скорости
Люди часто говорят о довольно абстрактной концепции «Мобильного контекста». Согласно знаменитой теории Google мобильные пользователи делятся на три типа:
- Повторяющие (Repetitive Now): люди, которые используют свои телефоны, чтобы быть в курсе непрерывных, повторяющихся изменений (спортивные результаты, обновления ленты в Facebook, динамика акций на фондовом рынке).
- Скучающие (Bored Now): Пользователи, которые обращаются к телефону во время ожидания какого-то события.
- Срочные (Urgent Now)
Похоже на правду, не так ли?
На самом деле это не имеет ничего общего с действительностью. Нет никакого «мобильного контекста». Люди будут использовать свои телефоны во время прогулки по улице, домашнего отдыха или в путешествии на поезде. Они делают все одновременно!
Телефоны следуют за людьми, куда бы те ни отправились. Поэтому люди их используют абсолютно везде.
«Мобильный контекст – важная штука, но сначала нужно понять, что же это вообще, черт возьми, такое», – Тим Кадлец.
Люк Вроблевски приводит действительно интересную статистику:
Где люди используют мобильные устройства?
- 84% дома
- 80% в свободное время в течение дня
- 76% в очередях и в процессе ожидания
- 69% в процессе шоппинга
- 64% на работе
- 62% во время просмотра ТВ-программ (альтернативные исследования дают цифру в 84%)
- 47% во время подготовки к работе
С возникновением новых возможных ситуаций, развитием новых рынков и появлением новых привычек у людей, мобильный контекст неизбежно изменится. Можно с уверенностью предположить, что концепция мобильного контекста сохранит свою актуальность до тех пор, пока люди будут пользоваться мобильными устройствами.
И это заставляет нас внимательнее взглянуть на скорость интернета. Есть только одна возможность давать пользователям тяжелый сайт и не получить при этом проблем: если пользователь будет открывать его на Macbook Pro находясь дома с быстрым интернетом.
Однако же необходимо предусмотреть и прочие ситуации, которых существует великое множество. Люди используют для просмотра сайтов бесконечное количество устройств, появляющихся на рынке каждый день.
«Вы не можете знать, с каких устройств будут просматривать ваш сайт. Это решают пользователи», – Карен МакГрейн.
Даже в тех странах, где пару лет назад было не так много смартфонов, сейчас их число растет бешеными темпами.
«Если ваши материалы, контент, информация, продукты, услуги недоступны в мобильной среде, то для этих людей они не существуют вовсе», – Карен МакГрейн.
Еще более важный момент – места, из которых люди будут приходить на ваш сайт. Так что вы должны будете учитывать любую скорость интернета. Дело даже не в том, что некоторые пользователи живут в удаленных регионах, где качество покрытия оставляет желать лучшего. Люди будут заходить на сайт с работы, где есть канал на 100 мб/с, из дома, где доступна скорость от 2 до 30 мб/с, через 3G и 4G и так далее.
Говоря напрямую, адаптивный дизайн больше не история про размеры экранов, но различные сценарии, решения для которых должны быть гибкими и продуманными «от и до».
И как?
Хорошо, что вы спросили.
Выше мы говорили, что производительность не стоит рассматривать, как набор автоматизированных заданий, запускаемых на стороне сервера для спасения обреченного сайта. Существуют способы преодолеть подобные проблемы и даже обратить их в конкурентные преимущества.
Чего стоит избегать
Гай Подъярны выделяет три главные причины существования большого количества тяжелых адаптивных сайтов:
- Загрузка и сокрытие: большое количество элементов загружается, но не показывается пользователю
- Загрузка и урезание: изображения в высоком разрешении загружаются, а затем урезаются для соответствия пользовательскому экрану
- Избыточный DOM: не существует способа избежать парсинга и обработки браузером всех зон DOM, включая скрытые
Упреждающий подход
Существует большое количество информации на тему того, почему сайтам не всегда удается соответствовать ожиданиям в плане производительности. Большинство специалистов говорят что-то вроде «нужно быть адаптивным с самого начала».
Все техники, которые мы обсудим далее, не являются чем-то новым. Интересный момент здесь в том, как они совмещаются и переплетаются, сглаживая недостатки и подчеркивая достоинства друг друга.
Прогрессивное улучшение
Смысл этой техники заключается в обеспечении опыта использования сайта в вебе, который ограничен только самым главным.
Пару лет назад эта теория воспринималась главным образом с «браузерной» точки зрения. С развитием таких технологий как HTML5, CSS3, jQuery и т.п. разработчики, кажется, забыли о своих пользователях. Многие из них создавали несовершенные сайты, слишком полагаясь на эти новые технологии.
Теперь, когда браузеры на основе Webkit, Firefox и другие отвоевали большую долю рынка, появилась другая проблема – огромное количество мобильных устройств с браузерами, которые не обладают возможностями iPhone или Samsung. Прогрессивное улучшение – это единственный подход, который предполагает, прежде всего, учет способностей всех этих забытых игроков, а уже затем движение в сторону более навороченных устройств.
Разработка Mobile First
В 2009 году Люк Вроблевски предложил подход к разработке, получивший название Mobile First, по трем причинам:
- Мобильный рынок продолжает развиваться бешеными темпами.
- Мобильная среда заставляет вас фокусироваться (позволяя избавиться от беспорядка, причиной которому является слишком большее количество места на экране).
- Мобильная среда расширяет ваши возможности (благодаря технологиям вроде GPS, геолокации, мультитач-жестам, акселерометру, камерам).
С тех пор веб-дизайн постоянно смещается в сторону этого подхода. Многие дизайнеры и разработчики отмечают, что построение сначала мобильной версии сайта, дает преимущественно над десктопной разработкой (что очень неплохо иллюстрирует второй пункт выше). Прогрессивное улучшение и подход Mobile First также неплохо сочетаются друг с другом. Разработчики начинают создавать сайт для мобильных устройств, постепенно улучшая его, добавляя большие разрешения к первоначально небольшому размеру экрана.
Джордан Мур (Jordan Moore) собрал отличный список причин использования Mobile First. Он утверждает, что из-за того, что полностью положиться на скорость соединения нельзя, «адаптивный веб-дизайнер» должен начинать работы с самой низкой входной точки – мобильной версии сайта, предполагая низкую скорость соединения, и двигаясь в разработке поэтапно, к более крупным точкам прерывания для более быстрого соединения. В будущем мы сможем полагаться на высокую скорость соединения, но пока стоит принять как должное низкое качество связи и не предпринимать опрометчивых шагов.
Вывод
Разрабатывайте сайт с расчетом на небольшие разрешения и возможности. Используйте технику прогрессивного улучшения с самого начала. Добавляйте дополнительную функциональность, улучшенные визуальные эффекты и способы взаимодействия там, где это имеет смысл.
RESS: Responsive Web design + Server Side components
По мнению многих людей у адаптивного дизайна есть один большой недостаток – он целиком и полностью зависит от определения ширины экрана.
С появлением все большего количества типов устройств, включая гибриды вроде ноутбуков с тачскринами, определение разрешения экрана стало крайне важной вещью в адаптивном дизайне. Библиотеки, которые обеспечивают эту функциональность (главным образом, Modernizr), буквально расцвели и сейчас используются в большинстве проектов. Они помогают разработчикам понимать, поддерживает ли браузер пользователя ту или иную функциональность и, соответственно, предоставлять ее. Но во многих случаях полагаться на браузеры – не лучшая идея, поскольку, зачастую, они могут поддерживать те или иные функции лишь частично, при этом «заявляя» о полной поддержке.
Для решения этой проблемы и был создан RESS. Как и Mobile First термин RESS был образован Люком Вроблевски в 2011 году. Он основывается на определении типа устройства, его оценке и обеспечении связанного пользовательского опыта. Для выполнения этой задачи существуют тяжелые средства вроде WURFL, DeviceAtlas и более легкие, такие как Browser Gem, которые считывают строку User Agent и действуют на основе этой информации.
Оценка типа устройства имеет и другие преимущества. Она позволяет разработчикам использовать различные шаблоны сайта в зависимости от устройства пользователя. Скажем, вы создаете очень большой сайт и хотите упростить мобильную навигацию. Вы можете «поиграть с контентом», показывая или скрывая что-либо, подвигать дивы по JavaScript коду или использовать разные шаблоны для мобильной и десктопной версии сайта, необходимость показа которых определяется сервером.
Представители BBC говорят о том, как RESS и прогрессивное улучшение могли бы работать отдельно. Подход называется Cut the Mustard! Он состоит в создании основной версии сайта, которая будет работать на любом устройстве. Затем устройство оценивается сервером для того, чтобы определить, «срезает ли оно горчицу». Если ответ да, то используется улучшенная версия сайта. Если же устройство не обладает нужными параметрами, пользователь все равно видит основной контент.
Условная загрузка
«Мобильные пользователи хотят видеть наше меню, часы работы и телефон доставки. Пользователи десктопа само собой хотят видеть картинку в 1 мб, на которой кто-то смеется в салат», – Мэт «Wilto» Маркиз.
Рассмотрим пару точек зрения:
1) Мобильные пользователи хотят получить контент, также сильно, как пользователи десктопов.
«Если ваш контент доступен по URL, то его обязательно будут просматривать с мобильных устройств», – Брэд Фрост.
2)Мобильная среда заставляет фокусироваться. Существуют определенные ограничения (вроде скорости соединения или размера экрана), которые дизайнерам необходимо принять, чтобы одинаково хорошо предоставить тот же самый контент.
Эта техника, также называемая «Агрессивным улучшением», позволяет дизайнерам фокусироваться на ключевом контенте и прогрессивно улучшать его для бОльших экранов. Она подразумевает базовый доступ к определенному контенту, который затем может быть дополнен на странице, при появлении места.
«Возможно, более точным определением условной загрузки будет назвать ее подходом content-first. В этом случае сайдбары или многочисленные столбцы с красивым, но нефункциональным контентом – роскошь, вам недоступная», – Джереми Кейт.
Вы можете использовать отличное средство MatchMedia, которое подражает поведению CSS и оценивает размер экрана в JavaScript.
Ленивая загрузка
Сайты, тяжелые на вид и в использовании (Facebook, Twitter, Pinterest), когда им необходима оптимизация для мобильной среды, прибегают к использованию техники ленивой загрузки (lazy loading) для обеспечения лучшего пользовательского опыта. Когда вы загружаете страницу впервые, загружается определенное число постов. Когда вы прокручиваете страницу вниз, дизайнер предполагает, что вы хотите увидеть больше контента, поэтому тот вставляется на страницу с помощью Ajax. Это позволяет значительно ускорить загрузку страницы и избежать избыточности DOM.
Установка бюджета производительности
Тим Кадлец утверждает, что установка максимального веса страницы и контроль этого показателя, является главным способом сокращения времени загрузки страницы. «Задавайте цели и стремитесь к ним». Стив Соудерс (Steve Souders) предлагает на выбор три опции, если вы уже превысили свой бюджет:
- Оптимизация существующей функции или элемента
- Удаление существующей функции или элемента
- Избегание добавления новой функции или элемента
Звучит довольно радикально, но такой подход позволяет сфокусироваться на том, как на общую производительность сайта влияет каждая новая функция.
Кроме того, существует определенное количество методов, работающих на более техническом и менее концептуальном уровне.
Техники работы с изображениями
Веб-сайты примерно на 60% состоят из изображений. И если вы показываете мобильным пользователям с неизвестной скоростью соединения картинки десктопного размера, то обрекаете свой сайт на проблемы со скоростью загрузки.
Способ решения этой проблемы заключается в показе различных версий изображений в зависимости от размера экрана или типа устройства. Таким образом, вы будете показывать маленькое изображение при заходе на сайт с мобильного телефона, картинку в высоком разрешении пользователю десктопа и еще в два раза большее изображение в случае HiDPI устройства.
Адаптивные изображения
Дизайнеры и разработчики во всем мире вели борьбу за включение адаптивных изображений в спецификацию HTML. Мэт ‘Wilto’ Маркиз один из наиболее ярких сторонников этой идеи. Битва еще не выиграна, но появились решения на базе JavaScript, которые помогают добиться желаемого результата.
Скот Йель (Scott Jehl), из Filament Group написал плагин, который имитирует разметку, предложенную сообществом, и прекрасно работает: это PictureFill.
Сжатие изображений
Голландский дизайнер Даан Джобсис (Daan Jobsis) обнаружил очень странный феномен при сжатии изображений в Photoshop. Ему удалось осуществить следующую последовательность действий: он взял изображение, удвоил его размер (200%), сжал его до 25% или менее от его первоначального качества, затем восстановил размер изображения в браузере до изначальной величины (100%). В результате изображение не только стало легче, но и изначально было оптимизировано для HiDPI экранов, благодаря дублированию плотности пикселей.
Единственная обнаруженная проблема здесь заключается в том, что браузеру может быть тяжело отрисовывать увеличенное вдвое изображение в его изначальном размере (особенно если это необходимо делать сотни раз, в случае сайтов с большим числом медиа контента). Чтобы убедиться в оптимальности данного решения необходимо уделить время тестированию.
Векторные vs растровые изображения
Отличным выбором можно назвать SVG изображения. Они полностью масштабируемы, благодаря чему хорошо работают на любом экране. Реализовать fallback в этом случае будет очень просто с помощью Modernizr.
Иконочные шрифты
Технически они на самом деле являются векторными изображениями, только представленными в виде шрифта. Как говорит Крис Койер (Chris Coyier), «иконочные шрифты изумительны» потому что:
- Легко изменять их размер
- Легко менять их цвет
- Легко оттенять форму шрифта
- Они работают в IE6, в отличие от прозрачных PNG.
- С ними можно делать все то же, что и с изображениями
- Они предоставляют неограниченный простор для типографики
Изображения HiDPI
Дэйв Бушелл (Dave Bushell) не так давно написал очень интересную статью с размышлениями о HiDPI-изображениях. Он утверждает, что, даже несмотря на то, что сегодня мы можем показывать пользователям iPhone, iPad или других современных устройств изображения, которые соответствуют возможностям этих девайсов, все еще слишком рано предполагать, что это не навредит сайту.
«Означает ли высокая скорость и высокая плотность пикселей, что пользователи хотят видеть изображения лучшего качества? В случае пакетного тарифа с ограничением по количеству гигабайт, вряд ли», – Дэйв Бушелл.
Что дальше?
Недавно Google разработал новый формат изображений – WebP. Он предоставляет возможность сжатия изображений без потерь, что позволяет получать в три раза меньшие файлы, в сравнении с PNG.
Сегодня существуют простые и легкие JavaScript-библиотеки, с помощью которых можно конвертировать изображения в и из WebP формата. Учитывая влияние последних новинок Google, вполне возможно, что начать эксперименты с WebP для улучшения работы сайтов с большим числом изображений уже сейчас может быть хорошей идеей.
Загрузка элементов
Загружайте элементы аккуратно и по порядку. Контроль этого аспекта несет в себе большие преимущества, позволяя странице сначала отображать базовый контент, а затем улучшать его.
CSS, изображения
Контролируйте загрузку с помощью media query, условной или ленивой загрузки и применяйте техники адаптивных/сжатых изображений.
JavaScript
Используйте такие функции HTML5, как async или defer. Кроме того существуют такие «помощники при загрузке», как RequireJS, который может контролировать загрузку и зависимости.
Реклама, социальные виджеты и сторонние элементы
Просто вставляйте их на страницу после загрузки.
Олдскульные техники улучшения производительности
Они известны довольно давно, но все еще неплохо работают.
Снижайте число HTTP-запросов
Чтобы это добиться, разработчикам необходимо приложить усилия, однако есть ряд способов, позволяющих достичь этого:
- Применяйте конкатенацию для всех CSS-файлов или используйте CSS Preprocessors, чтобы скомпилировать их в один файл.
- Объединяйте JS плагины в том же файле и всегда загружайте их в футере, за исключением случаев, когда им действительно необходимо блокировать рендеринг страницы (если вы загружаете шрифты Typekit в футере, вы получите знаменитый эффект FOUT или «Взрыв нестилизованного текста»).
- При необходимости работы с PNG-изображениями, используйте спрайты. Они объединяют все изображения в одно и используют CSS для «нарезки» его на нужные кусочки.
- По возможности используйте схему данных URL (рус, англ), которая позволит включать изображения в качестве строчных данных и еще сократить число HTTP-заголовков.
Снижайте число байтов
Минифицируйте каждый скрипт или CSS-файл, который вызывается со страницы. Настройте на сервере GZIP-компрессию/расширение и применяйте их для всех элементов.
Заключение
Со времен рождения адаптивного дизайна важность производительности в вебе была сильно преувеличена.
Дизайнеры и разработчики фокусируются на сборке адаптивного паззла, в качестве элементов которого стали выступать различные скорости доступа в сеть, множество различных устройств, разные места нахождения пользователей.
Чтобы подготовиться к проблемам завтрашнего дня нам необходимо обращать большое внимание на производительность, ведь декстоп-ориентированный веб исчезает прямо на наших глазах. Мобильный пользователь быстр, легок и не будет преодолевать препятствия для доступа к контенту, и, учитывая, что сайтов с каждым днем становится все больше, быть быстрым означает быть впереди.
Вам также может понравиться [en]…
P. S. Замечания по переводу принимаются в личку.
P. P. S. Еще мы начали размещать дайджесты интересных публикаций мира юзабилити и UX в своем блоге. Вдруг кому интересно.
habr.com
Респонсивный Vs адаптивный дизайн: что лучше для пользователя?
Современные веб-разработчики и маркетологи все чаще отдают предпочтение респонсивному дизайну (responsive design), позволяющему создать страницу, доступную для просмотра на любом устройстве. И хотя такой подход достаточно хорош с точки зрения Google, который «любит» респонсивные сайты — это далеко не единственный вариант, способный приспосабливаться под нужды пользователя.
Так называемый адаптивный дизайн (adaptive design) появился отнюдь не вчера, но всерьез о нем заговорили лишь недавно, благодаря тем усовершенствованиям, которые он способен привнести в пользовательский опыт.
Чтобы понять, какой из двух видов дизайна лучше всего подходит именно вам, необходимо четко представлять преимущества и недостатки обоих методов, а также знать, какие существуют наиболее оптимальные решения для разных типов сайтов и устройств.
Респонсивный веб-дизайн
Респонсивный веб-дизайн — это масштабирование интерфейса под устройство пользователя за счет media-queries, или модуля CSS3, позволяющего задавать разные стили (или даже таблицы стилей) в зависимости от разрешения экрана, его размеров и прочих характеристик.
Применение данного метода лучше подходит для сайтов с гибкой, или «резиновой» структурой. В противном случае разработчики потратят кучу времени и ресурсов на переделывание сайта под планшет и мобильный телефон, чтобы компенсировать имеющийся недостаток гибкости.
Помимо своей изменяющейся структуры, у респонсивного дизайна есть несколько других преимуществ:
1. Одинаковый внешний вид ресурса в разных браузерах и на различных платформах
2. Наличие у сайта одинакового URL, что способствует SEO-оптимизации
3. Разработчикам необходимо обслуживать лишь один сайт, что позволяет сократить время, затрачиваемое на дизайн и контент
И хотя положительные стороны респонсивного дизайна очевидны, у этого метода существует ряд недостатков. Самым большим из них является скорость загрузки, которая значительно снижается из-за высокого разрешения изображений и других визуальных элементов, необходимых для оформления внешнего вида ресурса.
Если вы делаете выбор в пользу респонсивного подхода, ваши дизайнеры всегда будут ограничены этим фактором, так как сложные визуальные элементы могут «тормозить» загрузку на мобильных устройствах.
Адаптивный веб-дизайн
Адаптивный дизайн функционирует немного иначе. Он сегментирует пользователей на категории в зависимости от того, с какого устройства они просматривают сайт.
В то время как сайты, созданные с помощью технологии респонсивного дизайна, выглядят одинаково вне зависимости от размеров устройства — адаптивный ресурс определяет, с какого устройства пользователь заходит на сайт, и демонстрирует ту его версию, которая была разработана специально для этого типа устройств.
Например, если вы просматриваете обычную страницу блога, где содержатся картинки, заголовки, описания и кнопка «Поделиться», на мобильном телефоне, то страница будет очень долго загружаться из-за большого количества изображений. Кроме того, из-за небольших размеров экрана страница будет выглядеть перегруженной.
Вместо того, чтобы показывать уменьшенную копию ресурса, сервер сайта с адаптивным дизайном идентифицирует тип устройства пользователя и отображает упрощенную версию блога, содержащую только самые необходимые элементы интерфейса и изображения более низкого качества.
Иными словами, сервер берет на себя всю «тяжелую» работу, вместо того, чтобы заставлять сайт оптимизировать самого себя. Среди достоинств адаптивного дизайна можно выделить следующие:
- Изображения загружаются намного быстрее, так как они сжимаются и адаптируются под устройство пользователя
- Загрузка сайта происходит быстрее, так как сервер определяет тип устройства пользователя и загружает соответствующий ему программный код
- Разработчики пользуются свободой творчества, ведь они могут создавать различные версии сайтов и подгонять их под соответствующие типы устройств, чтобы сделать их более удобными для мобильных пользователей.
Привлекательность этого метода омрачается тем, что создать адаптивный сайт не так-то просто. Из-за адаптации дизайна к различным устройствам, время, затрачиваемое на разработку, значительно увеличивается. Более того, если вам потребуется сделать какие-либо доработки на сайте, придется вносить изменения во все его версии. Поэтому если у вас небольшой бюджет и нет команды специалистов, которые будут осуществлять поддержку адаптивного сайта, лучше пока отказаться от данной идеи.
Какой вариант и для чего подходит?
Даже если вы отдаете предпочтение какому-либо одному из двух описанных видов дизайна, важно осознавать, что прежде всего необходимо думать об удобстве пользователей.
Если вашим пользователям удобнее взаимодействовать с ресурсом, который имеет одну и ту же структуру на всех устройствах, то делайте выбор в пользу респонсивного дизайна. Если же ваши пользователи более подкованы технически и вы хотите заложить хороший фундамент на будущее, то адаптивный дизайн станет оптимальным решением.
Несмотря на тот факт, что разработка адаптивного сайта сложнее, его расширенные возможности и высокая скорость загрузки могут оказать положительное влияние на конверсию, что особенно важно в сфере электронной торговли и медиа индустрии.
Для простых лендингов или сайтов, которые прекрасно загружаются на мобильных устройствах, респонсивный дизайн станет оптимальным решением. Их владельцам стоит рассматривать создание адаптивного ресурса как вариант на будущее.
Высоких вам конверсий!
По материалам impactbnd.comimage source rmaxwell
21-10-2015
lpgenerator.ru
Как превратить обычные сайты в адаптивные? / UXDepot corporate blog / Habr
На данный момент около 11-12% из 100 000 самых посещаемых сайтов — адаптивны, и нет сомнений, что в ближайшие несколько лет их количество возрастёт.Так как всё больше организаций закатывают рукава, хватаясь за реалии веба, используемого различными девайсами, будет нелишним рассмотреть несколько стратегий, используемых для достижения нирваны:
Адаптивная модернизация
Адаптивная модернизация — это процесс, при котором берется существующий сайт, предназначенный только для настольных компьютеров, и «переделывается в адаптивный» по факту.
Что касается готовых сайтов (в частности коммерческих), у команд не всегда есть возможность всё отбросить и построить заново.
Дэн Седерхольм
Для большинства организаций, широкомасштабное создание нового дизайна с нуля даже не рассматривается. Именно поэтому адаптивная модернизация это популярный подход к созданию хорошего интерфейса для мобильных устройств.
Преимущества
- Относительно быстро.
Способов сделать адаптивную модернизацию довольно много, эта стратегия может заключаться в добавлении файла small-screens.css на сайт. Несмотря на этот довольно грубый пример, адаптивная модернизация — привлекательный вариант для большого числа организаций, так как не требует перестройки всего с нуля. - Знакомо.
Не сбивает с толку пользователей. Люди годами привыкают к интерфейсу и делая модернизацию существующего, организации сохраняют знакомый подход, при этом улучшая жизнь людям с мобильными устройствами. - Организационно быстрее.
Говоря политическим языком, модернизировать интерфейс более безопасно, чем начинать всё с нуля. Меньше споров о том, какой оттенок зеленого выбрать, какие банальные стоковые фотографии использовать, а управлению не придётся выворачивать руки. Это позволяет командам быстрее запускать адаптивные сайты.
Недостатки
- Затрагивает только малую часть.
Опять же, есть множество вариантов выполнения модернизации, но цель большинства из них — «сделать симпатично». Фокусируясь на переделке макета, модернизация часто упускает огромное количество других факторов, которые нужно учитывать при создании успешного проекта для различных устройств. - 10 литров воды в трёхлитровой банке.
Так как сайты для настольных компьютеров рассчитаны только для них (и, часто, существуют на протяжении длительного времени), они могут содержать много хлама. А так как модернизация, в основном, заключается в переплавке макета, большинство проблем с контентом, не учитываются полностью. - Производительность.
Есть что-то странное в написании кода для лучшей поддержки небольших устройств. Удаление лишнего может зайти слишком далеко, но без концентрации на производительности она сама по себе не вырастет. - Худшая поддержка.
Медиа-запросы, изначально разработанные для настольных компьютеров, плохо поддерживаются большинством мобильных устройств. - Временные исправления.
Мне хочется умереть, когда я слышу от людей просьбу «сделать адаптивным» что-либо, как будто это просто чекбокс в плане проекта (который иногда на самом деле существует). Такой тип ограниченного мышления упускает реальные возможности, которые предлагает адаптивный дизайн.
Адаптивные мобильные сайты
Адаптивные мобильные сайты, или как я их называю «семена для адаптивного будущего», представляют собой практику создания отдельного сайта формата «m.yourdomain.ru» с использованием техник адаптивного дизайна. Эту стратегию используют такие сайты, как The BBC, The Guardian и Entertainment Weekly (над которым работал я).
Мобильная версия даёт возможность посадить семя, которое вырастет из вашего устаревшего сайта.
Со временем устаревший сайт можно удалить, а изначально мобильный, адаптивный и учитывающий будущие тенденции будет развиваться.
Преимущества
- Ниже риск.
Большинство организаций до сих пор замечают, что трафик с мобильных устройств составляет меньшинство. Поэтому запуск мобильного адаптивного сайта позволяет таким организациям протестировать обстановку без необходимости бросаться в эту тему с головой. - Возможность научиться быть гибким.
Дизайнеры могут научиться думать более гибко. Разработчики узнают мириады хитростей устройств на Android. Менеджеры могут понять, как отойти от совершенствования пикселей. Адаптивный мобильный сайт может стать отличной песочницей для обучения. - Инфраструктура.
Команды могут научиться как, раз и навсегда решить проблемы с управлением содержимым, например, с созданием изображений - Удалить лишнее.
Этот подход предлагает отличную возможность для команд спросить себя: «а действительно ли нам это нужно», а также сфокусироваться на производительности. Почему? Потому что в первую очередь они заняты улучшением взаимодействия пользователей с их сайтом на мобильных устройствах. - Будущее за изначально мобильными сайтами.
Несмотря на первоначально неполноценный контент или функционал, при достаточном количестве времени и усилий эти мобильные сайты, в конце концов, могут заменить своих полноформатных предков.
Недостатки
- Это всё равно мобильный сайт.
Будь он адаптивным или нет, этот подход всё равно сохраняет большое количество минусов мобильных сайтов: проблемы с перенаправлением URL, управлением содержимым, одинаковым контентом, последовательностью, SEO-оптимизацией и прочих. - Временные исправления.
Множество мобильных сайтов созданы как пластырь — чтобы остановить кровь. Такие сайты создаются с целью разгрузить растущий трафик, поступающий с мобильных устройств. Эти решения всё же могут удовлетворить существующие потребности, но учитывая будущие тенденции, это вряд ли спасёт вас в долгосрочной перспективе. - Вероятность зачахнуть на корню.
Некоторые организации могут начать такие проекты, пройти полпути, а потом бросить всё это дело, пока не будет принят бюджет на следующий год. - Дизайн для маленьких экранов.
Так как изначально акцент ставится на маленькие экраны, последующий перенос интерфейса на большие дисплеи без потери качества может оказаться проблемой.
Адаптивный дизайн изначально для мобильных устройств
«Сначала мобильные» — это принцип, подразумевающий разработку интерфейса, который будет учитывать ограничения мобильной среды (маленький экран, низкая пропускная способность и прочее), однако использующий все преимущества бОльших экранов.
Преимущества
- Начало с новыми силами.
СНачала мобильные — начало с чистого листа. Дизайнеры с восторгом берутся за работу для целевой аудитории для достижения бизнес-цели. Разработчики фокусируются на компактной и эффективной разметке. Оставляя в стороне (или полностью изменяя) существующую базу кода, команды могут погрузиться в реальность разнообразных устройств без необходимости беспокоиться о расходах на устаревающие технологии. - Лучшая поддержка.
Создавая по принципу «сначала мобильные», разработчики способны обеспечить поддержку большего количества мобильных устройств, особенно более старых, которые не поддерживают медиа-запросы. - Производительность.
Несмотря на то, что производительность сайта в первую очередь зависит от его реализации, адаптивные проекты для мобильной среды дают командам возможность с самого начала акцентировать внимание на производительности. - С учётом всего и сразу.
Дизайн «сначала мобильные» (несмотря на его название) может учитывать большое количество разрешений, а не только ориентироваться на один класс устройств. - Дизайн, ориентированный на будущее.
Интерфейс, в первую очередь разработанный для мобильных устройств, создаёт прочный фундамент, способный перенести проверку временем и служить в качестве платформы для будущего роста и изменений.
Недостатки
- Занимает много времени.
Давайте смотреть правде в глаза, «сначала мобильные» — это далеко не самый быстрый принцип. Он занимает много времени и сил на построение всего с нуля. Нужно сделать всё так, чтобы это стоило потраченных ресурсов. - Сдвиг в сознании.
Довольно сложно заставить организации думать обо всём другим образом. Мышление, направленное на разработку изначально для мобильных устройств, переворачивает всё с ног на голову, что усложняет использование подходов, к которым люди привыкли за много лет. Для этого требуется забыть их (к счастью, об этом есть книга) и постоянно напоминать людям не возвращаться к старым методам. - Организационно сложно.
Большой редизайн обычно усложняется различными видами организационной бюрократии. Президент компании хочет высказать свое мнение по поводу дизайна, несмотря на то, что его не было ни на одном предварительном собрании о том, что вообще такое адаптивный дизайн. На пути создания интерфейса, который будет отлично выглядеть и функционировать на любом устройстве, могут также встать амбиции других людей и политика. - Незнакомо.
Любой редизайн делает интерфейс незнакомым для пользователей. Но чтобы сохранить знакомый подход, особенно если вы собрались всё кардинально менять, нужно быть предельно осторожным.
Стратегия поэтапности
Стратегия поэтапного создания адаптивного дизайна разбивает крупномасштабную кампанию на несколько ступеней. Как и при модернизации (эти стратегии не взаимоисключающие), здесь может не получиться сделать масштабный редизайн, именно поэтому некоторые организации делают это шаг за шагом. Есть несколько видов поэтапного создания адаптивного интерфейса:
Страница за страницей
Этот метод подразумевает создание подгруппы страниц. Такие компании, как Microsoft, запускают адаптивные ключевые страницы, при этом оставляя большинство внутренних только для настольных компьютеров.
Преимущества
- Заметно.
Запуск адаптивных версий самых просматриваемых страниц (например, главной), направляет усилия туда, где большинство пользователей заметят обновлённый дизайн. - Возможность научиться быть гибким.
Организации часто используют такие проекты в качестве проводников к более обширным идеям. Фокусируя внимание на нескольких основных страницах, можно научиться всему, что касается создания адаптивных интерфейсов, а потом использовать эти знания для остальной части сайта. - Более высокие шансы запуска.
Фокусировка на одной странице или одной функции — это отличный способ увидеть результат. Если делать редизайн всего и сразу, это может стать чудовищно сложным делом, которое может никогда не увидеть свет.
Недостатки
- Отсутствие целостности.
Пользователь переходит от блестящего нового дизайна к старому уродливому всего за один клик. Это плохо с точки зрения однородности, так как пользователи воспринимают компанию как одну торговую марку, а не мешанину из разных отделов и приоритетов. - Недальновидность.
Большинство редизайнов, основанных на страницах, сфокусированы на «запуске к третьему кварталу», но довольно часто, на более крупных сайтах, план развёртывания проекта отсутствует. - Вероятность зачахнуть на корню.
В первую очередь необходимо определиться со стратегией и рисками, иначе ваш сайт рискует стать Франкенштейном.
Компонент за компонентом
Я работал с несколькими организациями, которые выбрали довольно интересный подход к адаптивному дизайну. Вместо того, чтобы в первую очередь переоснащать главную страницу, а потом двигаться к внутренним, часть компаний делают адаптивными некоторые компоненты (например, заголовок или подвал), а потом постепенно переходят к другим. Они переключают мета-тег просмотра только когда весь интерфейс становится адаптивным.
Преимущества
- Постепенное ознакомление пользователей с новым интерфейсом.
Вместо того, чтобы сваливать пользователям на голову полностью новый, на 100% изумительный адаптивный дизайн (!), этот поэтапный подход показывает пользователям новый интерфейс на протяжении некоторого времени. Изменения оказываются не такими стремительными, чтобы разозлить людей, но продвигают дизайн в нужном направлении. - Разбивка процесса.
Команды учатся решать модульные проблемы (на уровне блоков), а не фокусироваться на целой странице. - Равномерный уровень усилий.
Разбивка процесса на модули позволяет лучше понять рамки проекта.
Недостатки
- 50 оттенков несовершенства.
Этот подход может оказаться неудачным, так как пользователям придётся иметь дело с таким себе интерфейсом Франкенштейна, который одновременно и старый и новый. - Возможность зачахнуть на корню.
Такие типы проектов нуждаются в чётких конечных целях, иначе они могут навсегда застрять в чистилище. - Техническое сосуществование.
Что происходит, когда один модуль, использующий новейшие технологии и техники, сталкивается лбом с устаревшим модулем? В этом подходе есть множество сложностей, связанных с архитектурой.
«Я Чеви Чейз, а ты нет»
Конечно, все организации разные, поэтому какой путь выбрать — зависит от различных факторов. Время, бюджет, рамки, организационная структура, набор навыков и многие другие факторы влияют на то, какую стратегию лучше применять. Но со временем становится всё более очевидным то, что организациям нужно работать над возрастающим разнообразием устройств, имеющих доступ в интернет.
Это перевод статьи под названием «Responsive Strategy» от Brad Frost. Перевели в компании UXDepot с одобрением автора.
PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу [email protected], пожалуйста 🙂
habr.com