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

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

В первую очередь хотел бы посоветовать всем веб-дизайнерам (хотя, конечно, сейчас это понятие сильно размыто; можем еще назвать их диджитал-дизайнерами) начать потихонечку перестраиваться и переключаться от «вижуал-ориентированности» в сторону «контент-ориентированности». В статье есть очень правильный абзац про разработку основных семантических правил для контента, который затем можно отпустить в свободное плавание — вот это в точку! Так что нужно выбирать: либо осмысленно структурировать контент, либо продолжать его бессмысленно декорировать — третьего не дано.

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

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

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

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

Авторы правы, Responsive web-design очень быстро становится из модного тренда реальной необходимостью. И в этой реальности все большую роль играет не дизайнер, а технолог-верстальщик, который исходя из своих возможностей корректирует дизайн, адаптирует его в тесной связке с тем, кто готовит дизайн-макет. В СreativePeople технолог сидит в отделе дизайна и тесно работает в творческой группе еще на старте проекта, когда создается креативная концепция и подготовливаются первые скетчи презентации. Это позволяет не упираться в опыт конкретного дизайнера, а по-максимому использовать навыки технолога (о которых, вы еще возможно даже не догадываетесь). Хороший пример такой работы в связке, промо-сайт «Патриота» (www.kuvalda.ru/promo/euro2012/), где основная анимация (пилы) была предложена и сделана не дизайнером, а хрупкой богиней ява-скрипта.

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

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

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

Например, сайт на странице, которого есть 6 конструкций: три из них (меню, лого и футер) неизменны в своем положении. Оставшиеся три составляют 6 вариантов комбинаций (3-факториал). Понятно, что есть смысловые ограничители: не стоит учитывать случаи, когда блок заключения будет выше блока заголовка контента. Но для информационно-насыщенного проекта количество конструкций гораздо больше трех, а 5-факториал — это уже 240 вариантов! А теперь умножим это на количество адаптивных разрешений. У www.smashingmagazine.com, например, их пять.

Возможность для гибкой редакторской разметки страниц (контента) такого нагруженного сайта может предоставить далеко не каждая CMS. Не говоря уже о простом и наглядном интерфейсе управления таким содержанием.

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

Отличная и весьма актуальная статья! Спасибо Саре, переводчикам и соавторам.

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

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

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

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

Еще хочу обратить внимание на то, что автор лишь вскользь упомянул «в заключение» — о микроадаптации графического контента. При существующем многообразии экранов, чтобы добиться «perfect pixel» для графического и иллюстративного материала при просмотре на любом из устройств, весь комплект графики должен быть продублирован 3 или даже 4 раза, с различным разрешением. Допустим это можно сделать автоматически. Но кроме различного разрешения, можно пойти дальше: например, различные пропорции изображений, более удобные для этого типа устройств, или различная степень детализации.

Сменить дизайн на адаптивный — достаточно легко. Но вот как сохранить, переработать и адаптировать уже существующий контент, накопленные знания и опыт, сделать их доступными в новых реалиях? И особенно если учесть уже имеющиеся у человечества объемы — это вопрос крайне важный.

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

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

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

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

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

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

Однако, первоочередная задача любого коммерческого проекта — это решение бизнес-задач: продажа товара, услуги. Насколько правильно в этом случае стремление «похоронить» desktop mentality — не совсем ясно. Ведь большие мониторы остаются устройствами самого комфортного веб-серфинга.

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

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

Адаптивный дизайн — интересная тема, которая, я думаю, усложнит жизнь разработчикам, но сделает web интереснее и понятнее.

Раньше было проще: сайты были резиновые или статичные. Я никогда не был сторонником резиновой верстки. Но в то же время с ростом разрешения экранов сайт шириной в 960-980px уже не всегда хорошо смотрится на большом мониторе. Подливают масла в огонь и post-pc девайсы, количество которых стремительно растет. И поэтому адаптивный дизайн особенно интересен сегодня.

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

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

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

Молодцы что обращаете внимание на западные тренды.

Content is the king, это давно известно.

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

Вобщем-то по тексту все логично, что касается перераспределения контента.

Что касается увеличения разрешения, это в целом не проблема, потому что увеличивается разрешение, увеличивается мощность устройств. Границы стираются когда ты держишь в руке дисплей, аналогичный по разрешению печатной брошюре. Можно предположить, что с наступлением эры дисплеев, способных повторить с точки зрения разрешения лист бумаги произойдет своеобразный ренессанс классических типографских приемов и правил в дизайне. Нынешняя фрагментация дисплеев и форматов заставляет идти на компромиссы и придумывать различные костыли (responsive это тоже своего рода костыль). Возникает другой вопрос — как распознать все возможные ситуации в которых пользователь вступает во взаимодействие с контентом? В идеале любая система должна самостоятельно понимать как ее применяет пользователь и подстраиваться под его нужды. Можно вспомнить разработки Volvo, немного в другой области, система Intelligent Driver Information Manager отключает в зависимости от полученной информации от различных автомобильных сенсоров, различные каналы коммуникации (радио, телефон), способные отвлечь водителя в критической ситуации и привести к непредсказуемым последствиям. В отношении информационных систем можно провести аналогию и представить, как телефон пользователя получает возможность узнать где он находится и что окружает его хозяина, и в зависимости от этого выдать ему некую выжимку информационного потока, которая будет релевантна в этот конкретный момент. Голосовые интерфейсы вроде Siri верный шаг в этом направлении. Надо накапливать и систематизировать информацию о потребителях информации, параллельно убирая барьеры между пользователем и этой информацией. Тот кто сможет сделать это наиболее эффективно станет победителем в погоне за аудиторией.

О чем это статья? — задаю я себе вопрос. И после недолгого размышления пониманию, что она о личном тщеславии. Меня повеселила смелость автора (Sara Wachter-Boettcher), с которой она дает советы создателям сайта Старбакс, даже не задумываясь о том, что ее некомпетентность и ограниченность в понимании целевой группы, задачах, стратегических целях превращают все рассуждения в детский лепет, который можно было бы простить новичкам, но нельзя спускать людям, которые потом с таким же «профессионализмом» продают свою чепуху неподготовленным потребителям. Для меня эта статья стала примером vainglorymentality.

Хотя, цитаты из Болтона, Врублевски и отсылки на микро-форматирование прекрасны, но все что связано с потугами научить Страбакс, вспоминанием Росно и аллюзией, что responsive web design займет больше 2% Веба, на мой взгляд, чушь.

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

Спасибо авторам за статью. Было интересно ее прочитать. Жалко, что был всего один пример, хотелось больше.

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

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

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

В любом случае, технология интересная. Лично я буду с интересом наблюдать за ее развитием.