Статьи

Проблемы адаптивного веб-дизайна с Итаном Маркоттом

Сентябрь 15, 2018

Итан Маркотт на выставке версий

В этом эпизоде ​​Showing Version Show к Дэвиду и Тиму присоединился Итан Маркотт, известный дизайнер, который придумал термин «отзывчивый веб-дизайн». Они обсуждают вдохновляющие идеи адаптивного дизайна, проблему адаптации контента для пользователей, преимущества адаптивных прототипов по сравнению со статическими компами и решение сомнений в себе.

Показать заметки

Основные моменты разговора

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

Я начал получать больше запросов в клиентских контрактах на создание сайта для iPhone, что было довольно странно. Это только заставило меня задуматься, ну, а какой следующий веб-сайт нам нужно создать? В какой-то момент в мобильной сети появится еще одна новая интересная вещь. Это не особенно хорошо масштабируется.

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

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

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

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

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

Я чувствую, что адаптивный дизайн — это то, за что я прошу прощения!

Итан Маркотт на выставке версий

расшифровка

Тим:

Эй, как дела, все? Это Тим Эвко …

Дэвид:

… а это М. Дэвид Грин …

Тим:

… и вы слушаете эпизод № 16 подкаста версий.

Дэвид:

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

Тим:

Сегодня у нас есть Итан Маркотт, который, я думаю, изобрел Responsive Design (или что-то еще!), И поэтому мы собираемся поговорить с ним об этом и о некоторых по-настоящему классных вкладах, которые он сделал в Интернете. Итак, давайте продолжим и начнем эту версию.

Итан, спасибо, что присоединились к нам сегодня. Как дела?

Итан:

Да, Тим, хорошо. Хорошо быть здесь с тобой и Дэвидом. Спасибо, что приняли меня.

Тим:

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

Итан:

Чувак, я ожидал чего-то порядка Бэтмена против Бобы Фетта , с точки зрения философии.

Тим:

Мы вернемся к этому чуть позже.

[Смех]

Итан:

Справедливо. Я не знаю. Кто-нибудь говорит, что они не в вечной бета-версии? Я нахожусь в режиме предварительной версии, скажем так.

Тим:

Очень круто, очень круто. Всем дан разный ответ, который просто потрясающий.

Итан:

Ах, хорошо, хорошо.

Тим:

Вы тот человек, который придумал концепцию адаптивного дизайна — или, по крайней мере, дал ему имя, верно?

Итан:

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

Тим:

Я думаю, что многие люди слышали этот термин, и его используют и применяют ко многим вещам, но для людей, которые могут быть не совсем довольны этой концепцией, или кто может быть новичком в этом термине или не слышал его Как бы вы определили адаптивный дизайн для типичной аудитории веб-разработчиков — веб-разработчиков и дизайнеров?

Итан:

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

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

Тим:

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

Итан [3:46] :

Да, я могу дать ему шанс. Я имею в виду, если мы говорим о версиях вещей — и я нахожусь в вечной бета-версии — я думаю, что идея адаптивного дизайна была очень долгой. В конце, когда я работал над этим докладом, был один ага момент — этот первый разговор, где я придумал термин. Но я с самого начала очень любил думать о сети как о совершенно гибкой среде дизайна. Это было еще в конце 90-х, начале 2000-х годов. Вдохновением для моих мыслей о веб-дизайне стала статья «Дао веб-дизайна» , написанная человеком по имени Джон Аллсопп еще в 2000 году.

И я выступаю на многих конференциях и работаю со многими компаниями, и когда я спрашиваю людей, читали ли они эту статью, не так много рук, потому что в Интернете уже более трех недель ( это как древняя история)! [Хихикает] Я все еще думаю, что на самом деле это одна из наиболее предвиденных вещей, и я думаю, что более важные темы о сети как о среде дизайна — даже сегодня — потому что Джон в основном говорит о том, как наши ранние представления о сети в основном относились к ней как клочок бумаги. В Photoshop или Illustrator мы создавали холст, создавали документ с фиксированной шириной и высотой, а затем пытались перевести эту ширину и высоту на экран, что является полностью гибким.

Я имею в виду, что сам экран имеет ограничения, но область просмотра — фактическое окно браузера — мы не можем предсказать его размер или форму. Таким образом, он в основном утверждал, что мы должны действительно рассматривать Интернет как совершенно уникальную среду и разрабатывать более гибко для него. Это было в 2000 году, когда браузеры 4.0 были новой популярностью, на которую мы могли смотреть. У нас не было много инструментов, чтобы реально извлечь выгоду из того, о чем говорил Джон. Поэтому я бы сделал много гибких макетов для своих собственных проектов, для своего блога (когда я обновлял мой), для побочных проектов. Но для большинства моих профессиональных работ это были макеты с очень фиксированной шириной.

Затем появился мобильный и сломал все. В первые дни развития мобильных технологий — по крайней мере, на более развитых рынках — мы повторяли тот же процесс. Как будто у нас будет веб-сайт для настольных компьютеров, потому что мы понимаем веб-сайт для настольных компьютеров, а затем у нас будет отдельный сайт m.dot, этот мобильный веб-сайт. Я начал получать больше запросов в клиентских контрактах на создание сайта для iPhone, что было довольно странно. Это только заставило меня задуматься, ну, а какой следующий веб-сайт нам нужно создать? В какой-то момент в мобильной сети появится еще одна новая интересная вещь. Это не особенно хорошо масштабируется.

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

Тим:

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

Итан:

О человек, я все еще пытаюсь понять это! [Смеется] Я думаю, что это действительно так. Я имею в виду, я никогда не подходил идеально по обе стороны этого уравнения. В зависимости от роли проекта, я буду либо ведущим руководителем по разработке, либо займусь дизайном. Конкретный проект, над которым я работал, я был руководителем по разработке этого полностью гибкого макета на основе сетки, а затем чуть позже я работал над этим сайтом, предназначенным только для iPhone, в качестве внешнего разработчика и осознавал, что эти две вещи не обязательно должны быть полностью противопоставлены. Я думаю, что мы снова можем подумать об одном макете и более гибко думать об этом с эстетической точки зрения, но при этом немного сберегать наши усилия, не обязательно теряя опыт каждый раз, когда на рынке появляется новое крутое устройство.

Дэвид:

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

Итан:

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

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

Тим [8:23] :

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

Итан:

Да, это отличный вопрос, Тим. Я думаю, что я не могу взять кредит на этот переход. Я думаю, что было много людей, которые внесли свой вклад в это обсуждение — и до сих пор, честно говоря. Я думаю, что когда я впервые опубликовал эту статью в A List Apart , я был очень взволнован адаптивным дизайном, и, честно говоря, я все еще поражен этим. Я встретил крайний срок публикации и думал, что это будет конец. И люди просто действительно побежали с идеей. Они начали переделывать свои сайты, делая их более отзывчивыми. Я начал видеть, как агентства реагируют, а затем предлагают решения своим клиентам, и в конце концов я думаю, что это просто поднялось вверх по лестнице.

То же самое произошло в середине 2000-х, когда мы действительно начали спорить о CSS, а не о табличных макетах. Вы видите, что это обсуждение происходит на периферии сообщества, от независимых дизайнеров и разработчиков, и затем это начало получать некоторую господствующую популярность. Я скажу, что я участвовал в гораздо более широкой команде людей в адаптивном редизайне The Boston Globe еще в 2010, 2011 годах. Я думаю, что в тот момент у нас был клиент — не маленький издатель — который был очень взволнован эта идея стать отзывчивой, и как они считают это обязательным для них делом.

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

Тим:

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

Итан:

Конечно. По крайней мере, для меня, я имею в виду, адаптивный дизайн — это, в конце концов, дешевый способ разработки для максимально возможного количества устройств и браузеров. Это гибкий макет. Он не имеет идеальной формы, поэтому по умолчанию этот макет будет расширяться и сжиматься для всех видов экранов разных размеров. Это основа. Я думаю, что на вершине этого вы можете искать эти возможности, чтобы действительно улучшить опыт немного больше. Ранее я упоминал о моей коллеге и подруге, Карен Макгрейн, и она много говорила об этой идее адаптивного контента, где искали возможности, основанные на деловых или стратегических потребностях, для адаптации представления информации на основе определенных контекстных подсказок.

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

Тим:

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

Итан [12:08] :

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

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

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

Дэвид:

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

Итан:

Это отличный вопрос, и я думаю, что — по крайней мере, по моему опыту — я думаю, что большая часть решения действительно сводится к постоянному, частому общению. Я думаю, что старый, очень ориентированный на водопады подход к проектированию и разработке, действительно, хорошо, мы собираемся закончить работу. Мы собираемся подписать их, и мы передадим их разработчикам внешнего интерфейса — что буквально то, что произошло с нами в The Boston Globe, было переработано. По сути, The Boston Globe подписались на этот прекрасный набор композиций, которые были разработаны в InDesign. Затем я и Filament Group — фирма, которая занимается разработкой интерактивных решений, базируется здесь, в Бостоне, — мы были привлечены к работе, чтобы сделать эту вещь отзывчивой.

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

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

Я думаю, в общем и целом, это рефрен, о котором я слышал от многих организаций — что объединенные усилия по проектированию и разработке всегда приводят к гораздо более сильному продукту. Даже BBC (о котором мы говорили в прошлом году на подкасте, посвященном их редизайну глобальных новостей ), они в основном говорили то же самое: если думать о UX и дизайне как об отдельной практике от проектирования и разработки, это на самом деле замедляет вашу скорость. Вы должны быть в состоянии взять дизайн и извлечь из него уроки, как только он действительно будет реализован, увидеть, что работает, а что нет, а затем свернуть его обратно в процесс проектирования. Сближение этих двух лагерей, я думаю, абсолютно необходимо, но это также большой сдвиг для многих компаний.

Тим [16:28] :

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

Итан:

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

Я скажу, что, по крайней мере, в большинстве проектов это рассматривается чаще всего со стороны. Таким образом, даже если это не обязательно воспринимается как подход по умолчанию или может рассматриваться как без вопросов, это не то, что мы должны оправдывать с самого начала. Когда я разговариваю с крупной медиа-компанией, у меня достаточно данных. Они могут посмотреть, например, на Disney.com или Virgin America, и увидеть работу, которую они проделали, и затем они могут начать разговор о том, подходит ли он им или нет.

Дэвид:

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

Итан:

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

Я бы сказал, что Twitter — это, возможно, основной способ выяснить новые методы верстки, новые соображения дизайна, новые вопросы и критику, возникающие в связи с адаптивным дизайном. И затем я стараюсь, чтобы как можно больше людей знали об этих других дискуссиях. Это важно для меня, потому что я действительно чувствую, что я работающий дизайнер и разработчик, который изучает адаптивный дизайн вместе со всеми остальными. Мне действительно нравится делиться этой платформой с как можно большим количеством людей.

Дэвид:

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

Итан:

Да, я все еще пытаюсь понять это! [Смех] Никогда не пишите книги, дети: это ужасно. Это замечательный, ужасный опыт.

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

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

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

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

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

Тим [20:30] :

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

Итан:

Да, да, да. Я не знаю, мне кажется, что адаптивный дизайн — это то, за что я прошу прощения! [Смеется] Извините, ребята, раньше все было просто: мы разработали 1024 веб-сайта и могли вернуться домой в конце дня. Но я думаю, что самая важная вещь — как с точки зрения дизайна, так и с инженерной точки зрения, которой я действительно восхищаюсь — это идея запросов элементов (или запросов контейнеров). Я чувствую, что это следующее … Я хотел бы увидеть некоторую тягу в этом — либо от рабочей группы CSS, либо от пары поставщиков браузеров в решении этой проблемы.

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

Дэвид:

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

Итан:

Да, не шучу. Это лучшее и худшее в этой работе, верно? Сеть никогда не перестает меняться!

Дэвид:

Я собираюсь считать это лучшим.

Итан:

Да.

Дэвид:

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

Итан:

Спасибо за вопрос. Меня зовут Итан Маркотт. Вы можете найти меня на моем веб-сайте ethanmarcotte.com, который ужасно устарел, но, надеюсь, скоро изменится. В противном случае, Twitter, вероятно, лучший способ связаться со мной — @beep в Twitter или @RWD для адаптивного веб-дизайна — хотя я продолжаю думать о заднем приводе всякий раз, когда вижу эту аббревиатуру. Это лучшие места, чтобы найти меня.

Тим:

Beep — лучшая ручка для Twitter.

[Смех]

Тим:

Кроме того, из всех людей, которые публикуют GIF-файлы в Твиттере, Итан, я думаю, у вас есть трофей за все время лучший GIF-пользователь Twitter в истории Twitter.

Итан:

[Смеется] Вы оба очень добры. Я стою на плече гигантов GIF. Beep — это место, где мне весело, а затем RWD — это место, где я говорю о том, что будет дальше с отзывчивостью.

Тим:

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

Итан:

Это была настоящая честь. Большое спасибо вам обоим за то, что приняли меня.

[Музыкальная интерлюдия]

Тим:

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

Дэвид:

Что-то настолько элементарное в работе, что мы все делаем постоянно.

Тим:

Да, он тоже такой скромный.

Дэвид:

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

Тим:

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

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

Давид [24:34] :

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

Тим:

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

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

Дэвид:

Это так. Я имею в виду, я достаточно взрослый, чтобы помнить, когда я разрабатывал контент для печати на мертвых деревьях. Помнишь это? [Смех]

Тим:

О чувак.

Дэвид:

Была эта философия о написании статей. Я делал внутренние коммуникации. Мы выпускали информационный бюллетень, и этот бюллетень был напечатан на бумаге и распространен среди тысяч сотрудников по всему миру. Идея заключалась в том, что вы пишете свои статьи в виде перевернутой воронки, так что вы ставите самые важные вещи наверх, а затем, по ходу дела, вы получаете все меньше и меньше и менее важные вещи — и таким образом, когда человек кто делает макет, чтобы вписаться в коробку, которая будет доступна на листе бумагикоторый будет распространяться, должен редактировать то, что у вас есть, они могут отрубить последние пару абзацев и не потерять ничего ценного. Это совершенно другая философия, только с точки зрения содержания. Адаптивный дизайн объединяет то, что концепция дизайна должна адаптироваться, контент должен адаптироваться к этим различным платформам.

Тим:

Мне очень нравится, как идея адаптивного дизайна породила другие движения. Я имею в виду, если вы думаете об этом, адаптивный дизайн был периодом возрождения о пользователе. Правильно?Сначала мы были просто как, Вот вещь, и вот как вы можете увидеть это. А потом мы вдруг начали говорить, Wait, как же вы лучше хотите его увидеть, исходя от того , что вы доступны для вас? Затем мы начали думать о том, что все в порядке, у нас есть эта часть: она сводится к тому, с чего вы пытаетесь посмотреть на вещь. Но потом мы начали думать о том, как эта вещь работает для вас? Требуется ли слишком много от устройства, с которого вы пытаетесь его просмотреть?

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

Давид [28:20] :

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

Тим:

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

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

Дэвид:

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

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

Тим [31:22] :

Да, одна из вещей, которую кратко затронул Этан — он и Карен МакГрейн проводят много адаптивных семинаров, и одна из вещей, о которых они всегда говорят, это контент-стратегия, потому что большая часть этого действительно сводится к контенту. Вы часто видите людей, которые проектируют для действительно большого экрана или проектируют для абсолютно идеальной среды, а затем пытаются втиснуть эту среду во все свои варианты использования.

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

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

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

Дэвид:

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

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

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

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

Тим:

Я думаю, что это Брэд Фрост, который говорит, что карусели существуют только для того, чтобы бизнес-участники не убивали друг друга .

Дэвид:

[Смеется] Мне это нравится! Я могу украсть это.

Тим:

Да, действительно хорошо. Здорово.

Дэвид:

Это был удивительный эпизод. Я так рад, что вы обратились к Итану, и я рад, что Мэтт смог связать нас с ним.

Тим:

Да, казалось, все получилось очень идеально.

[Музыкальная интерлюдия]

Ну, спасибо всем за внимание, все. Нам всегда нравится говорить со всеми вами о технологиях.

Дэвид:

Мы также хотели бы поблагодарить SitePoint.com и наших продюсеров, Адама Робертса и Офели Лехат, за помощь в производстве от Ральфа Мейсона. Пожалуйста, не стесняйтесь, присылайте нам свои комментарии на Twitter — @versioningshow — и дайте нам оценку на iTunes . Дайте нам знать, как у нас дела.

Тим:

Увидимся в следующий раз и надеемся, что вам понравилась эта версия.

41
Share: