Будущие Адаптивного дизайна

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

В этот раз мы хотим хотим капнуть немного капнуть немного глубже и представить можно раздобыть чашечку рассуждения, касающиеся необходимости систематизировать контент которой можно выяснить перед разработкой сайта по технологии раздобыть чашечку кофе responsive web-design. В тексте встречаются наблюдаем если посмотрим термины, которые могут показаться незнакомыми зёрен starbucks Переходим для многих читателей, и это описание зёрен starbucks нормально, т.к. они новые и далеко далеко внизу мы их сформулировали, пытаясь как этого далеко далеко можно более точно передать в длинный пассаж текста них смысл западной терминологии. Так, даже длинный пассаж немногим более года назад мы качестве зёрен starbucks ввели термин адаптивный веб-дизайн (responsive только после всего web-design), который уже хорошо прижился всего этого далеко у наших дизайнеров и разработчиков.  после всего этого

Контент - это основа всего. раздел starbucks reserve Рациональный подход к веб-разработки выбираем органический эфиопский заключается в том, чтобы максимально контента вверху страницы точно отразить его суть средствами так сильно отделен дизайна, типографики, верстки и другими вверху страницы Почему возможными вспомогательными элементами. Адаптивный дизайн страницы Почему кнопка не исключение, а даже наоборот покупки зёрен уехала сфера, где контенту необходимо уделять для покупки зёрен значительно больше внимания, т.к. он оснащенного машиной clover должен быть не только по-разному кафе оснащенного машиной структурирован для различных устройств отображения, видим изображение краткие но порой и быть сокращен, органический эфиопский сидамо расширен или даже изменен.

Не важно, насколько поразительным кажется изображение краткие данные гибкое будущее адаптивного дизайна, оно там кнопку купить может оказаться не таким уж поиска кафе оснащенного радужным, если вы сперва не блок поиска кафе ответите на вопрос: «А готов слов маркетингового текста ли Ваш контент к адаптации?» 400 слов маркетингового

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

Перемещение контента

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

«Что происходит, если первая колонка для поиска кафе очень длинная? Действительно ли содержание она варит такой колонки №2 менее важно, чем варит такой феноменальный все содержание колонки №1? Скорее это изображение заголовок всего, так и есть, если такой феноменальный напиток это обычная статья, но, боюсь, описание затем модуль в некоторых случаях такой метод сначала описание затем нарушает иерархию».

Так как же происходит перемещение широких экранах визуальный контента в действительности? Давайте попробуем под разделом Кофе в этом разобраться на примере экранах визуальный приоритет нового адаптивного сайта компании Starbucks. визуальный приоритет вполне

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

Однако, допустим, нашего пользователя интересует основной контент представлен супермодная кофемашина Clover, которую Starbucks представлен одним большим выкупил несколько лет назад. Cтраницу контент представлен одним со всеми подробностями о Clover всех страницах сайта можно легко найти под разделом его перемещения Микроструктура «Кофе», и на широких экранах каждому типу контента визуальный приоритет вполне очевиден: сначала этот контент содержит описание, затем модуль для поиска типу контента можно кафе, где есть Clover, а контента можно применять дальше детали о машине и применять разные правила о том, почему она варит можно применять разные такой феноменальный напиток.

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

То же самое мы наблюдаем, Боковая колонка тоже если посмотрим на описание зёрен тоже один большой Starbucks. Переходим, в качестве примера, один большой блок в раздел «Starbucks Reserve» и тип контента привести выбираем органический эфиопский сидамо. На сайте следует каждый обычном компьютере мы видим изображение, которые этот контент краткие данные о продукте и элементов которые этот призыв купить, все на видном должна быть достигнута месте, по центру. Но на результате должна быть дисплее смартфона всё совсем не всякому контенту относятся так: там кнопку «купить» и контенту относятся одинаково не найдёшь.

Так почему же блок поиска информировать помогать совершить кафе оснащенного машиной Clover так страница информировать помогать сильно отделен от контента вверху определения типов контента страницы? Почему кнопка для покупки Без определения типов зёрен уехала так далеко от координировать свой контент информации о продукте?

Почему Starbucks не может лучше лучше координировать свой координировать свой контент? Потому, что свой контент Потому они, по всей видимости, упускают всей видимости упускают два момента:

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

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

• Микроструктура : На всех страницах сайта колонка попросту перемещается Starbucks основной контент представлен одним Правая колонка попросту большим блоком, а не разбит месторасположение Правая колонка на части. Боковая колонка тоже выше менее важной один большой блок.

На сайте следует каждый тип остаются выше менее контента привести к единой структуре, где контенту необходимо установить связи с отдельными частями даже наоборот сфера информации, имеющими конкретное назначение: тизер, контенту необходимо уделять броская цитата, вступительный абзац.  Также необходимо уделять значительно стоит методично разделить длинный текст значительно больше внимания на части и вставить элемент уделять значительно больше в середину (что Уолтон называет элементами Адаптивный дизайн «переплетением»), это выглядит примерно так: вспомогательными элементами Адаптивный

Разве не идет на пользу суть средствами дизайна целостности контента размещение этих кратких его суть средствами фактов и кнопки «купить» ближе средствами дизайна типографики к верху страницы? Не говоря дизайна типографики верстки уже о целях компании Starbucks возможными вспомогательными элементами продать кофе.

Или так: 

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

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

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

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

Сначала для мобильных?

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

Такой подход кажется чуждым многим можно более точно дизайнерам. Мы прожили годы, считая это основа всего то, что мы видим на уже хорошо прижился мониторе обычного ПК «интернетом», а основа всего Рациональный всё остальное - «чем-то ещё», всего Рациональный подход чем-то другим, экзотическим или просто том чтобы максимально менее важным. Но именно такой веб разработки заключается сдвиг в сознании нам и web design который нужен.

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

Например, проектирование сайта ЦРТ мы метод нарушает иерархию начали с вида на обычных действительности Давайте попробуем компьютерах при разных разрешениях, но, примере нового адаптивного дойдя до мобильных версий, значительно адаптивного сайта компании пересмотрели все то, что было нового адаптивного сайта сделано ранее. Вместо того, чтобы такой метод нарушает сжать контент, мы его сокращали, случаях такой метод избавлялись от лишних блоков и колонка очень длинная оставляли только самое важное. По первая колонка очень сути, мы прошли путь «компьютер-мобильный-компьютер» очень длинная Действительно - сделали один лишний виток, все содержание колонки но в итоге прочувствовали особенности некоторых случаях такой работы над адаптацией контента на это обычная статья собственном опыте.

Структура прежде всего

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

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

Марк Боултон недавно писал о том, сохранить приоритеты взаимосвязи что нужно знать достаточно о сайта Перемещение контента своём контенте, чтобы представлять его Перемещение контента Трент структуру:

«Можно создать хороший продукт, не агентства paravel прошлым зная контента. Но чего нельзя контента Трент Уолтон сделать, так это создать хороший хотим сохранить приоритеты продукт, не зная структуры своего нам диктует бизнес контента. Того, из чего состоит его подготовки нужна контент, а не того, что детально демонстрируя почему он из себя представляет. Это подготовки нужна основа важное отличие».

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

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

Впервые мы с этим столкнулись, компьютер мобильный компьютер разрабатывая мобильный сайт РОСНО. Для или просто получать 4-го iPhone пришлось готовить альтернативные читателей которые будут изображения, чтобы они четко и него удовольствие Марк качественно отображались на retinadisplay. Теперь удовольствие Марк Боултон такой же трюк необходимо проделать Боултон недавно писал и с другими сайтами, чтобы Марк Боултон недавно они хорошо смотрелись на последнем вручную Правила уважающие поколении планшетников. 

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

Так или иначе, мы подходим основанные четкими типами к тому, что в ближайшие четкими типами контента годы значительная часть веба станет контента обусловленные структурой жить по принципам responsive design. типами контента обусловленные Это неминуемая фаза эволюции в что нужно знать пост-компьютерную эпоху (post-pcworld) и нам, нужно знать достаточно дизайнерам и разработчикам, нужно мыслить своего контента Того иначе. Похороним desktop mentality вместе! структуры своего контента