Эпизод 132 подкаста SitePoint теперь доступен! Он также был частью команды, которая впервые применила это на так называемом «мейнстримовом» сайте, The Boston Globe .
Вы можете скачать этот эпизод в виде отдельного файла MP3. Вот ссылка:
-
Подкаст SitePoint № 132: «Бостонский глобус» отзывчив на Итана Маркотта(MP3, 37:34, 36,1 МБ)
Резюме Эпизода
Луи и Итан знакомятся с тем, как возникла работа по дизайну Boston Globe, как возникла идея Responsive Design и вопрос «все ли не реагирует просто на времена?».
Просмотрите полный список ссылок, на которые ссылается шоу, по адресу http://delicious.com/sitepointpodcast/132 .
Стенограмма интервью
Луи: Здравствуйте и добро пожаловать в еще один эпизод подкаста SitePoint. На этой неделе на шоу интервью со специальным гостем; постоянные слушатели подкаста SitePoint заметят, что за последние несколько месяцев, скажем, мы во многих наших эпизодах много внимания уделяли общей концепции адаптивного веб-дизайна, поэтому очень приятно иметь на шоу сегодня человек, который, как утверждают многие, является создателем этой концепции, Итан Маркотт, привет и добро пожаловать на шоу, Итан.
Этан: Большое спасибо за то, что приняли меня.
Луи: Абсолютно это удовольствие. Мысль о том, чтобы вы присутствовали на этом шоу, была в моей памяти в течение некоторого времени, и недавно она была выдвинута на передний план в результате редизайна веб-сайта Boston Globe, который мы обсуждали на недавнем панельном шоу. Как дела, Итан?
Этан: Хорошо, хорошо. Это был своего рода сумасшедший месяц, я запустил небольшой сайт, как вы сказали, и да, сразу после этого я провел очень запоздалый медовый месяц с моей женой, так что я от усталости и усталости и немного гриппа, но в остальном да просто очень хорошо, чтобы вернуться и онлайн.
Луи: Как запоздалый медовый месяц?
Этан: В этот понедельник у нас двухлетний юбилей.
Луи: Хорошо, ну, в конце концов, вы можете обойти это.
Этан: Я так хорош в управлении временем (смех).
Луи: Как я уже сказал, я позже расскажу о редизайне Boston Globe, потому что это главная причина, по которой я хотел, чтобы ты был на шоу.
Этан: Конечно.
Луи: Но, может быть, немного вернемся назад, поговорим о Responsive Design в целом, это то, о чем мы много говорили в сериале, это своего рода тема дня в кругах веб-дизайна и разработки над Прошлый, скажем, год. И все это вытекает из статьи, которую вы написали для A List Apart , когда это было около двух лет назад, верно?
Этан: Да, май прошлого года на самом деле.
Луи: О, так даже не так долго.
Этан: Нет, не слишком много. Я думаю, что я придумал термин «Апрель прошлого года» в «Особом событии» в Сиэтле, а затем вроде как последовал за ним статья около месяца спустя.
Луи: Точно. Очевидный вопрос, который приходит на ум, — это вопрос, который вам, вероятно, часто задают, это степень, скажем, признания того, что идея найдена в сообществе веб-дизайнеров, и степень, с которой люди были готовы поиграть с ней, реализовать его, мы видели, как его применяют фреймворки, галереи в Интернете; Что-нибудь из этого становится большим сюрпризом для вас, или когда вы придумали это, вы подумали, о, это будет следующая большая вещь или что было …?
Этан: (смеется) Хм, я все еще удивлен тем, насколько люди действительно взволнованы этим, я думаю. Да, это было просто то, чем я всегда увлекался, быть немного более я думаю, я не знаю, гибкий, глупый термин, но да, в любом случае, с моим дизайном покупки, и это было что-то, чем я был просто рады объединению гибких макетов и медиа-запросов. Таким образом, это и в этом, казалось, просто — мы, казалось, достигли точки, когда, особенно в то время, когда я писал это, многие из наших подходов для проектирования на разных устройствах или в разных контекстах цитирования / удаления цитаты определенно чувствовали, что это становится довольно фрагментировано. Это не значит, что с дизайном, специфичным для устройства, что-то не так, я думаю, что есть фантастический бизнес-кейс или фантастический аргумент, но в то время все равно казалось, что это был тип по умолчанию, как будто у каждого был свой тип m. сайты или их точечные сайты WebKit или перенаправление пользователей iPhone и своего рода игнорирование всех остальных. Итак, вы знаете, это было что-то вроде — поставить другой вариант на стол, своего рода альтернативу, так что тот факт, что многие люди с этим сталкиваются, действительно воодушевляет, я имею в виду, что они с этим что-то сделали что я никогда бы не подумал. Так что, да, это отчасти захватывающе.
Луи: Определенно. Когда вы впервые увидели, скажем, добавление более сложных медиа-запросов к спецификациям CSS, это было чем-то, что сразу же пришло вам в голову, как, ой, подождите, я думаю, что мы можем сделать что-то умное с размером экрана или что-то вроде варева на время?
Этан: я не знаю, я имею в виду, что это отличный вопрос, я думаю, что я на самом деле только что закончил сайт для мобильных устройств — я работал в Happy Cog в то время, и пару месяцев назад я закончил мероприятие сайт для вечеринки South-by-Southwest, которую они принимали, и часть этого на самом деле создавала нечто вроде событий. И в ночь на мероприятие на самом деле должно было появиться какое-то приложение для прямого голосования, которое должно было быть доступно для людей из аудитории и, вы знаете, поэтому возникла такая необходимость для создания такого специфического мобильного приложения. И поэтому в то время я читал много замечательных статей о том, как это сделать, потому что в то время я был так сосредоточен на десктопе, и да, я думаю, что это как бы получилось; У меня была книга «Дао веб-дизайна» Джона Аллсоппа на одной вкладке, а затем еще несколько замечательных материалов по медиа-запросам на другой, и я действительно чувствую, что это как раз то, что произошло, вы знаете, у нас есть все эти замечательные инструменты, вроде создать немного более гибко, но все эти ограничения, которые мы продолжаем вводить в среду, я не знаю, похоже, что мы можем создать гибкость Интернета как силу, а не, я не знаю, какое-то ограничение или характеристика, которую нам нужно обойти.
Луи: Да, абсолютно. Думаю, это поднимает еще один вопрос, который у меня возник, который, как вы думаете, был каким-то неправильным пониманием направления, в котором вы изначально пошли с идеей гибкого веб-дизайна? То, что я имею в виду, говоря, что это воспринимается как своего рода способ, — это способ просто преодолеть разрыв между мобильным и большим экранами. Так что, если вы посмотрите на свой первоначальный пример в статье «A List Apart» и на другие подобные примеры, они представляют собой очень гибкие конструкции, которые просто отлично выглядят на различных широтах, и многие люди следуют из это и кажется, что это больше похоже на компоновку с фиксированной шириной, а затем на другую компоновку с фиксированной шириной, и между ними есть просто срез. Вы чувствуете, что это не совсем то, что вы имели в виду, или это просто другой способ сделать то же самое?
Этан: Я имею в виду, что это определенно другой способ проектирования, помимо настольного. Я думаю, что медиа-запросы являются невероятно мощным инструментом для этого. Что касается меня, то я немного говорил об этом в последнее время, но, как мне кажется, я думаю, что есть более широкий класс адаптивных конструкций с цитатами / кавычками, которые используют какую-то технологию интерфейса, будь то JavaScript, будь то переключатели таблиц стилей Будь то медиа-запросы, чтобы сортировать изменения макета в зависимости от некоторых параметров на стороне клиента. А потом адаптивный дизайн всегда был для меня, в частности, объединением гибких макетов и медиа-запросов, поэтому я хотел бы, чтобы эти два термина были различны, и это не означает, что какой-то суждение, как один из моих любимых адаптивных сайтов, вероятно, informationarchitects.jp, это прекрасный сайт с фантастическим контентом, отличным дизайном, но они вроде как переключаются между тремя различными макетами фиксированной ширины, и это нормально. (Смеется.) Думаю, дизайнер и владелец сайта должны выяснить, что лучше всего подходит для их уровня комфорта, для их контента, и вы знаете, просто потому, что он не адаптивный, не значит, что он не красивый, так что где я падаю. Так что глобус, я думаю, вы знаете, хороший пример традиционного определения адаптивного дизайна, это полностью плавная сетка с прикрепленным к ней видом верхнего потолка, вы знаете, с применением максимальной ширины, потому что — и это было скорее ограничено по времени, чем что-либо еще, но фактическая основа является гибкой, даже если медиа-запросы к ней не были доступны, вы знаете, что контент будет как бы заполнять экран соответственно, так что да, именно здесь я как бы провожу черту на мой взгляд, но там нет подобного суждения.
Луи: Да. Одна из вещей, о которых вы упомянули на сайте Globe, заключается в том, что, как вы сказали, есть верхний предел гибкости, поэтому есть момент, когда вы не будете переставлять контент дальше, потому что он находится на некоторой разумно максимальной ширине. ,
Этан: Да.
Луи: Это то, что происходит со мной, когда я смотрю на адаптивный веб-дизайн, кажется, что основное внимание уделяется тому, как мы берем такие настольные сайты, которые мы разрабатывали в течение последних десяти лет, и приводим их в соответствие iPad и меньшие экраны.
Этан: Да.
Луи: Но я думаю, что у любого был опыт, когда вы встречали веб-сайт с фиксированной шириной 800 пикселей на 24-дюймовом кинотеатре.
Этан: (смеется) Да, полностью.
Луи: И как, ну, это невероятно плохое использование пространства.
Этан: Конечно.
Луи: И кажется, что не многие люди взяли это в этом направлении, в направлении, как сейчас у нас есть больше места, как мы заполняем это?
Этан: Да, в общем, я имею в виду, что я думаю, что определенно есть люди, которые считают адаптивный дизайн привлекательным, потому что они видят в этом своего рода ярлык, позволяющий быть мобильным, и в конце скажем, его можно было бы использовать как таковое, вы знаете, вы могли бы втиснуть этот специфичный для настольного компьютера дизайн в мельчайший экран, используя гибкий медиа-запрос макета, что совершенно потрясающе. Но для Глобуса я имею в виду — и я много говорю об этом в книге, фактически не говоря о проекте, но в основном большая часть процесса проектирования для нас заключалась в том, чтобы взять эти очень ориентированные на рабочий стол проекты, а затем отчасти позволить использование дизайна информирует остальную часть процесса проектирования, как, например, переход от компов к адаптивной шаблонной структуре, вы знаете, в основном заливка всего контента, заливка всех изображений, а затем фактическое использование устройств и браузеров и фактическое живое взаимодействие с дизайн как часть наших обзоров дизайна с этого момента, так что мы могли бы провести много хороших дискуссий о том, как использовать концепцию Люка Вроблевского Mobile First в качестве своего рода клина для этого контента — содержит ли этот модуль 58 ссылок в нем на самом деле, они имеют какое-то значение для наших мобильных пользователей, если нет, то какое значение это имеет для любого из наших читателей, вы знаете; это действительно принадлежит на странице. И это не значит, что здесь есть что-то вроде простого бинарного файла, но на самом деле речь идет о том, чтобы внимательно взглянуть на контент, который мы разрабатываем, и убедиться в этом — взяв на себя обязательство, как в любом контексте, так и на каждом устройстве. Я имею в виду технологию переднего плана, позволяющую сделать дизайн подходящим для любого экрана, но вы действительно знаете, можете ли вы начать проект с тщательного изучения контента, который вы разрабатываете, и спросить себя, действительно ли это ценно, я думаю, что общий опыт будет намного лучше для всех ваших читателей.
Луи: Да. Вы упомянули там идею дизайна, и я думаю, что это очень интересно с точки зрения этих очень гибких макетов и включает в себя несколько различных способов организации контента на экране. Представляет ли это большую проблему с точки зрения традиционного рабочего процесса дизайна, когда у вас обычно есть что-то вроде фотошопа, то есть именно так будет выглядеть сайт?
Этан: Верно.
Луи: А потом просто передайте это заинтересованным сторонам, лицам, принимающим решения, и они могут сказать, что да, именно так мы хотим, чтобы сайт выглядел, в то время как когда вы занимаетесь адаптивным дизайном, то есть, как мы уже говорили ранее, может быть три или четыре разных фиксированных макета или может быть своего рода бесконечный градиент разных способов размещения контента на экране; как вы это представляете и как это влияет на рабочий процесс дизайна?
Этан: Да, нет, я имею в виду, это фантастический вопрос. Так что конкретно для Globe я имею в виду, что к тому времени, когда я вышел на сцену, было проделано немало творческой работы, и когда Filament Group, которая фактически является моим клиентом для проекта, и я вроде как встретились с Globe, они уже сделали некоторые виды настольных дизайнов для определенных разделов сайта и некоторые из них понимают, что это своего рода каталог всех этих активов бренда и всех функций, которые нам необходимо включить. Итак, одно из первых обсуждений, которое у нас было с ними, было то, что мы пытались расположить компы как что-то вроде, хорошо, вот каталог нашего понимания того, что мы думаем, что дизайн должен быть, вы знаете, вроде как Вот наше лучшее предположение о том, как этот дизайн будет работать быстро, потому что мы не можем сказать, как будет выглядеть домашняя страница на планшете и на телефоне во всех этих разных диапазонах разрешений, в разных ориентациях, так что это в основном о Хорошо, мы очень быстро перейдем к прототипированию HTML-CSS и продолжим в основном проверять эти предположения о дизайне, вы знаете, жить в браузере. Таким образом, это позволяло выполнять итерации по определенным компонентам, которые изначально не обязательно работали так хорошо, когда мы их портировали на все эти разные экраны и настраивали контент, но это также помогло нам немного поработать больше я думаю, что Agile — и я не имею в виду, как капитал. Методология Agile, но, как —
Луи: (смеется)
Этан: То, что мне сказали, это вещь (смех). Да, я продолжаю представлять подобный более итеративный рабочий процесс, когда я говорю об адаптивном дизайне, и все, как вы, ребята, слышали о гибкой методологии, это не то, во что я бы получил много формального обучения, но мы как-то соглашаемся с этим гибридный процесс, в котором команды разработчиков и разработчиков будут тесно сотрудничать друг с другом на протяжении всего процесса, и одна половина таблицы будет как бы формулировать рекомендации по проектированию в Photoshop и Illustrator, а остальные будут проектировать в HTML и CSS, но оба они, как я полагаю, дают рекомендации относительно того, как должен развиваться дизайн, а затем они просто должны быть проверены, как единая группа.
Луи: Считаете ли вы, что в браузере сейчас больше внимания уделяется дизайну и дизайнерскому мышлению, чем это было несколько лет назад?
Этан: О да, даже год назад. Я не знаю, этот процесс с водопадом, вы знаете, в каждом магазине, в котором я работал, использовался какой-то вариант, и Глобус определенно был для меня самым большим отъездом, вы знаете; Что ты имеешь в виду, что мы не собираемся подписывать контракты, а затем производить их? (Смех). Это было — я имею в виду, что было бы немного более гибко говорить о том, как мы работали, потому что, я не знаю, пример, к которому я все время возвращаюсь, это топ-заголовок на Глобусе — это может и не быть похоже, но это, вероятно, одна из самых сложных частей всего дизайна. Я не знаю, мы дали несколько начальных визуальных рекомендаций в CSS о том, как контент, который был выделен на уровне рабочего стола, мог на самом деле адаптироваться к различным точкам останова, и мы не были по-настоящему довольны этим. Таким образом, мы вроде как, когда у нас был наш проектный обзор, мы как-то называли это областью дизайна, которая, возможно, действительно нуждается в некоторой дополнительной любви, и все согласились с тем, что то, что мы создали, отстой. Так что, по сути, произошло то, что вы знаете, что для нас было действительно хорошим упражнением рассматривать прототипы в сценарии, в котором мы могли бы быстро потерпеть неудачу с дизайном, но мы всегда задаемся вопросом: нужно ли что-нибудь еще в художественном направлении, нужно ли это? дальнейшее визуальное усовершенствование, и, таким образом, своего рода дизайнерская половина команды сбежала и придумала эти фантастические наброски о том, как будет выглядеть топовый заголовок при 480 пикселях или 600 пикселях или что-то в этом роде, так что мы могли бы реализовать оттуда, но вы знаете, если бы мы не определили это как действительно сложную область макета, и мы повторили это примерно дюжину раз довольно быстро, потому что мы были как всегда, хорошо, давайте посмотрим, работает ли это, мы будем перейти на HTML и CSS, переместить вещи назад, вы знаете, что-то вроде уточнения оттуда.
Луи: Точно. Возвращаясь к тому, что вы сказали ранее, вы упомянули, что вас привлекли к участию в проекте, дизайн уже был выполнен.
Итан: Хм-мм.
Луи: Агентство, которое было нанято, чтобы выполнить работу, а затем вышло и наняло вас, имело ли это в виду, что они собирались сделать Адаптивный Дизайн, и именно поэтому они пришли к вам, или как это сработало точно? ?
Этан: Это фантастический вопрос. Так что Upstatement была дизайнерской фирмой в Бостоне, они проделали невероятную работу, и с ними было действительно здорово работать на протяжении всего процесса. Но Globe был довольно предан, я думаю, довольно рано, к этому понятию, что нам нужно, чтобы наш контент был как можно более широкой аудиторией, так что всегда будет какой-то подобный компонент с несколькими устройствами в там, к тому времени, когда Filament Group включилась, именно они собирались выполнять большую часть производственной работы, и они привели меня с собой, я думаю, что ожидание уже было отчасти благодаря Filament, что это было Это будет своего рода адаптивная структура, но им все равно нужно было как-то действовать внутренне, чтобы достичь консенсуса относительно конкретного вида сайта. Итак, я имею в виду, и дизайн довольно прост, и я еще не работал с компом, который, на самом деле, не думаю, что поддается какой-то адаптивному подходу, это похоже на дискуссии, которые вы провели после этого момента, как если вы мыслите в первую очередь из контекста рабочего стола, то возникают всевозможные вопросы о контенте, о том, каким будет дизайн, как будет адаптироваться опыт к различным устройствам, и вы знаете, что они изменятся от проекта к проекту.
Луис: В частности, в этом проекте есть пара интересных моментов, особенно много людей вышло на него и указало, что это своего рода переломный момент для концепции адаптивного веб-дизайна, потому что до этого момента большинство сайтов мы видели, что с помощью этих методов были либо небольшие сайты агентств, либо личные блоги веб-дизайнеров, места, где люди могут свободно экспериментировать.
Этан: Верно.
Луи: Но с точки зрения крупного сайта с большой видимостью, идущего по этому пути, люди сравнили его с тем, что я думаю, что это был ESPN.com, когда происходил переход от макетов на основе таблиц к макетам на основе CSS.
Этан: Хм, хорошо.
Луи: Вам это нравится, или вам известны другие проекты, которые хорошо видны и уже сделали это?
Этан: Я определенно не думал об этом, когда работал над этим (смех). Я имею в виду редизайн Wired News и ESPN, вы знаете, это … я имею в виду, что это фантастические моменты в нашей отрасли. Я думаю, что для меня работа над сайтом такого масштаба была довольно захватывающей, независимо от того, будет ли она адаптивной или нет, так что это было круто. Но я думаю — я имею в виду, что то, что было действительно приятно об этом, было похоже на то, что это было похоже на базовые компоненты интерфейса, такие как гибкая сетка, гибкие медиа-запросы и медиа-запросы, на вид их работы на сайте эта шкала была довольно захватывающей с точки зрения фаната-проектировщика, но реальный процесс обучения был в большей степени ориентирован на процесс, например, привлечение команды дизайнеров и фактически просто преодоление этого барьера разработки дизайна и попытка немного сотрудничать более итеративно на чем-то. Так что, да, я не знаю, я имею в виду, что вопрос масштаба интересен, но, как в конце дня, я надеюсь, вы знаете, может быть, это поможет людям легче сделать себя отзывчивым Дизайн, потому что я знаю, что есть много людей, которые действительно заинтересованы в этом, но вы знаете, может быть, когда мы делали аргументы CSS против таблиц, вы знаете, все как бы ждут, когда кто-то окунет свой палец в воду первый; Я не знаю, может быть, Глобус сделает эту подачу немного легче, вы знаете.
Луи: Точно. И даже имея пример, который вы можете показать людям, которые не являются чем-то вроде небольшого сайта агентства или личного блога, посмотрите, что это основной сайт, и посмотрите, что происходит, когда я перетаскиваю окно (смех).
Этан: Да, да, полностью. Я имею в виду, что перетаскивание окна вокруг интересно, потому что я думаю, что это в основном похоже на инструмент для создания прототипов, верно, я имею в виду, вы знаете, я думаю, что гибкий макет является важной основой для адаптивного дизайна, как я уже сказал, но на В конце дня вы разрабатываете для конкретных устройств, конкретных диапазонов разрешения и, да, я люблю делать окна браузера, но это для меня как бы второстепенное преимущество.
Луи: Да, конечно, это то, что могут делать только дизайнеры, которые смотрят на сайте.
Этан: Да.
Луи: Я взял интервью у Криса Койера пару недель назад для шоу.
Этан: О, классно.
Луи: И он только что сделал свой редизайн своего сайта, и он просто добавил переходы на все позиции своих элементов.
Этан: я знаю, что это —
Луи: Я знаю, это фантастика. Когда мы говорили о редизайне Globe, это одна из вещей, которые появились на панели, показанной две недели назад, например, о, да, это действительно круто, но окно поиска не меняется, когда я его перемещаю.
Этан: Да, да. Я слышал это шоу и понял, что мы потеряли читателя в тот день, но, (смех), да, хорошо, нужно перенести это в будущую версию.
Луи: Вы знаете, что, перетаскивая окно вокруг, мы можем высмеивать все, что хотим, но это первое, что мы делаем в настоящее время при посещении сайта. Еще пару вещей, которые я хотел бы спросить о Глобусе, а потом, возможно, я вернусь и поговорю о другом вопросе, который только что пришёл мне в голову чуть позже.
Этан: Конечно.
Луи: Одна из вещей, которая интересна для сайта такого размера, для меня, во всяком случае, связана с техническими проблемами, связанными с производительностью, я думаю, потому что то, что люди поднимают, когда они говорят об адаптивном дизайне для мобильных устройств по сравнению с выделенными мобильными устройствами. Сайты в том, что, если это не сделано очень осторожно, вы можете загрузить много ресурсов на мобильное устройство, которые не в конечном итоге привыкнут.
Этан: Да, да.
Луи: И, вы знаете, изображения большего размера, чем строго необходимо, большие таблицы стилей, контент, который может быть настроен так, чтобы не отображать их. Были ли какие-то конкретные проблемы, связанные с сайтом в вашей работе, или как вы, ребята, подходили к этому при работе на этом сайте?
Этан: Это, вероятно, еще одна получасовая дискуссия прямо здесь (смех). Но я должен отдать должное, я имею в виду ребят из Filament Group за большую тяжёлую техническую работу на сайте, я имею в виду, что большая часть моей работы была в основном связана с дизайном, как большая работа по макетированию, а затем выяснение процесса, но такие люди, как Скотт Джел и Мэт Маркиз, Тодд, Пэтти и Мэгги из Filament Group, словно все они проделали фантастическую работу, придумав несколько отличных решений для такого рода проблема кодового налога, которую вы упомянули. Я имею в виду, что есть много работы, чтобы сделать предварительную загрузку максимально легкой, поэтому исходный пакет JavaScript и исходный пакет таблиц стилей очень и очень легки; если вы работаете на устройстве без JavaScript или не понимаете медиазапросы, вы не собираетесь загружать что-либо еще, кроме контента, в основном, а затем оттуда к множеству тестов на основе функций Определите, какие ресурсы будут соответствовать вашему опыту, как, например, у вас сенсорный дисплей, и если да, то вы получите несколько библиотек, которые интеллектуально улучшат дизайн, сделав его немного более захватывающим, но в остальном мы не собираемся никого наказывать. Знаете, это довольно простая динамическая вставка JavaScript и CSS, поэтому мы начали с использования YepNope в один момент, и я думаю, что в итоге мы просто использовали гораздо более легкий, просто пользовательский загрузчик, но это было своего рода детищем Скотта Джела, который Я действительно думаю, что отчасти ответственен за все блестящее в JavaScript, который я использую в последнее время (смех). Да, это была одна из вещей, и, да, мы просто попытались придумать легкий словарный запас JavaScript, чтобы мы могли как-то идентифицировать некоторые характеристики вашего устройства, а затем выдать за это замуж, чтобы, ну, вот код, который на самом деле будет иметь отношение к вам, а затем постарайтесь скрыть всю ненужную информацию от пользователей, которые не будут извлекать из этого пользу. Что касается контента, я имею в виду, что мы действительно старались избегать этого вопроса, и поэтому мы постарались провести много дискуссий на протяжении всего процесса проектирования, чтобы выяснить, действительно ли это ценный контент для наших мобильных пользователей. Потому что, опять же, мы действительно старались избегать обременения людей контентом, от которого они не собирались бы извлекать выгоду. Одна из вещей, которая действительно вышла из проекта, или пара вещей, но сценарий адаптивных изображений или сценарий адаптивных изображений Скотта Джела был действительно одной из тех вещей, которые вроде вышли рано, своего рода способ, которым я Подумайте, будьте немного умнее о том, сколько пикселей изображения давят нашим читателям. Вы не можете нарисовать корреляцию между размером экрана и доступной ему полосой пропускания, но сценарий был хорошим способом сказать, что, хорошо, хорошо, если ваш экран выше определенного порога разрешения, мы собираемся чтобы использовать эту версию изображения с более высоким разрешением, если она ниже этого порога, вы знаете, что по умолчанию получите это мобильное изображение; мы всегда придерживаемся такого подхода — мы дорабатываем или уточняем несколько раз на протяжении всего проекта, и я думаю, что некоторые люди в последнее время проделывают интересную работу по исследованию, например, предварительных загрузчиков браузера, и, возможно, на стороне клиента. Решение не будет надежным в долгосрочной перспективе, но в то время это было определенно так, как будто это наше лучшее решение, и многие люди с этим справились и как-то улучшили его. Так что, да, я не знаю, это было в основном как — это был действительно забавный проект, и было действительно весело наблюдать за работой Filament Group и вроде, я не знаю, разбивать проблемы с их гигантскими мозгами (смех) ). По большей части я был просто обезьяной в стиле CSS и дизайна, но да, это было очень весело.
Луис: Это довольно интересно, но возникает вопрос, что все эти вещи — отличные идеи и фантастические способы преодоления этих технических проблем.
Итан: Хм-мм.
Луи: И это напоминает о том, что вы сделали с CSS и дизайном; Вам кажется, что то, что раньше было связано с созданием веб-сайта, было просто так, и все эти технические проблемы были добавлены и сделали дисциплину намного более сложной и, возможно, подняли барьер для входа?
Этан: Да.
Луи: Такая работа действительно очень трудна для человека.
Этан: Верно. Ну да, да, я понимаю, что вы говорите.
Луи: Опять же, я не привожу этот аргумент, мне просто интересно, что вы думаете по этому поводу?
Этан: О, я знаю, что вы выбираете драку, Луи (смех). Но нет, это фантастический момент, я имею в виду, я думал. Я думаю, для меня это все равно, что вы знаете, если бы это был не адаптивный сайт, например, если бы это был обычный сайт с фиксированной шириной 960 в центре, я имею в виду, что я думаю, что это вещи, которые по-прежнему были бы ценными, как этот действительно интеллектуальный ресурс Я думаю, что был бы ключ для сайта такого размера. Я имею в виду, я думаю, вы знаете, я как будто чувствую, что в последнее время мы как бы пытались отойти от всего этого понятия, как прогрессивное улучшение, вы знаете, как предоставлять контент всем, но быть умным о том, как мы улучшаем материал из этой базовой линии. , И я действительно думаю, что это особенно важно для адаптивного проекта, но действительно для любого проекта, такого как умный подход к тому, что вы обслуживаете и кому он может быть очень полезен, так что это не просто что-то вроде, вы знаете, простого, как низкий опыт по сравнению с большой опыт, я имею в виду, вы знаете, я действительно мог видеть это — некоторые вещи, которые я узнал от Globe, являются хорошей основой для некоторых других моих работ с клиентами, так что да, я чувствую, что многие вещи, которые вышли это похоже на что-то вроде, я не знаю, это звучит немного высоко и мощно, но это действительно похоже на здравый смысл для веб-дизайна в целом. Знаете, я не думаю, что мы делали что-то революционное, это просто похоже на то, чтобы быть умным в том, что мы обслуживали и кому; если вы просматриваете сайт как древнюю ежевику, вы получите очень простой опыт и много, надеюсь, хорошего контента, но если вы на iPhone, iPad или новом Amazon Fire, вы получите гораздо более богатый опыт, и, надеюсь, он просто будет чувствовать себя хорошо.
Луи: Да. Также очень рано в игре для многих из этих методов, так как люди разрабатывают либо фреймворки, либо просто наборы хороших —
Этан: О, совершенно.
Луи: — Сценарии, которые легко адаптировать и начать их использовать, станут, я полагаю, более доступными для широкой профессии, чтобы как бы прыгать на доске с такой идеей.
Этан: Да, я имею в виду, что сейчас есть много отличных инструментов, и я знаю, что ребята из Paravel в последнее время просто создают массу отличных вещей, таких как FitVids.js , я не уверен, что вы видел это.
Луи: Да, я думаю, что мы на самом деле подняли это на шоу две недели назад.
Этан: О, да, хорошо, Крис Койер был связан с этим, и Паравел также выпустил этот плагин FitText, потому что Тренту Уолтону нравятся эти большие заголовки в его блоге, но это фантастические инструменты, которые, я думаю, делают некоторые из этих вещей, которые сделать гибкий дизайн, независимо от того, отзывчивый он или нет, чувствовать себя как-то, я не знаю, непреодолимым; Итак, я не знаю, я отчасти взволнован, чтобы увидеть, как все эти вещи выходят, и, да, просто очень рад видеть, что будет дальше.
Луи: Хм, да. Еще одна вещь о глобусе, и я заинтересован в том, чтобы разобраться в этом.
Этан: Конечно.
Луи: Итак, одна из вещей, если оставить в стороне тот факт, что это Адаптивный Дизайн, интересно то, что это своего рода … это платный контент-шлюз, верно, поэтому они приняли подход, вы знаете, это не сайт с рекламной поддержкой, а платный контент. И я предполагаю, что один из моментов, которые многие люди высказали по этому поводу, заключается в том, что отзывчивый характер дизайна может послужить продажей, потому что многие газеты делают платные приложения для iPad, а затем Сайт поддерживается рекламой. И в этом случае я полагаю, что логика, стоящая за этим, заключается в том, что мы можем сделать это один раз и взимать плату за это, потому что это будет так же хорошо для iPad, как приложение для iPad, или так же хорошо для iPhone, как и приложение для iPhone.
Этан: Да, я имею в виду, что я не очень хорошо разбираюсь в бизнес-решениях, касающихся стороны платного доступа, я имею в виду, что вроде как выяснил правила платного доступа в день запуска вместе со всеми остальными.
Луи: (смеется)
Этан: Ну, я имею в виду, что широкий доступ всегда был таким, как если бы глобус действительно в это вкладывался, так, но с точки зрения того, как это будет похоже — я имею в виду большую часть их маркетинговых сообщений с момента запуска. вроде как, как будто странно быть в метро в Бостоне и видеть эти плакаты, похожие на Bostonglobe.comи там, как вы видите, изображено шесть устройств, все из которых показывают контент, что круто, но смущает (смех). Так что, да, но с точки зрения деловых решений, вы знаете, что Глобус был бы лучшим ответчиком, чем я. Что касается рекламы, я имею в виду, что на самом деле это то, над чем я потратил много времени, просто придумав приличную реализацию интерфейса для рекламы, которая у них была, и потому что существовало это требование, что если бы у них был вид рекламной собственности я думаю, что столбец C на рабочем столе, они хотели иметь возможность продвигать что-то вроде визуально высокого уровня в дизайне, так как область просмотра стала меньше, поэтому мы как бы перепрыгнули через пару интересных обручей, чтобы сделать это бывает.Но то, что я обнаружил, заключается в том, что сейчас не многие рекламные сети действительно думают не только о настольных компьютерах, вы знаете, что некоторые из них относятся к мобильным и настольным компьютерам как к двум разным продуктам, и на самом деле не существует изящного способа, которым я видимо, еще вроде как есть свойство рекламы на странице, но потом, как я полагаю, улучшите по сравнению с мобильной версией или улучшите рекламу на ощупь, вы знаете, что это очень похоже на один размер, подходящий для всех, как этот тип рекламных слотов в здесь и на каждом экране это как бы получится. Так что я не знаю, я думаю, что это может быть интересной возможностью для кого-то поработать.Вы уже видели, что вроде как у вас есть свойство рекламы на странице, но, как я полагаю, улучшите по сравнению с мобильной версией или улучшите рекламу на ощупь, вы знаете, что это очень похоже на один размер, подходящий для всех, как этот тип рекламных слотов. здесь, и каждый экран будет своего рода получить это. Так что я не знаю, я думаю, что это может быть интересной возможностью для кого-то поработать.Вы уже видели, что вроде как у вас есть свойство рекламы на странице, но, как я полагаю, улучшите по сравнению с мобильной версией или улучшите рекламу на ощупь, вы знаете, что это очень похоже на один размер, подходящий для всех, как этот тип рекламных слотов. здесь, и каждый экран будет своего рода получить это. Так что я не знаю, я думаю, что это может быть интересной возможностью для кого-то поработать.
Луи: Да, я думаю, это все еще не так серьезно, как, возможно, должно быть. Вы видите много своего рода мобильных сайтов без рекламы, когда в полной версии есть реклама только потому, что я не знаю, что с этим делать (смех). Вы должны думать, что это то, о чем мы думаем, верно, как будто мы просто собираемся сделать мобильную версию, и мы не можем позволить себе показывать рекламу, или мы не знаем, где их разместить, поэтому мы будем просто не кладите их туда.
Этан: Верно. Да, это отличный вопрос.
Луи: И затем, кроме того, если посмотреть на Бостонский глобус, например, если вы смотрите его на мобильном устройстве, реклама все еще там, но при просмотре этих объявлений вы получаете фиксированную ширину 960 с помощью Flash-анимации и гигантских форм. с 30 полями в них.
Этан: (смеется) верно, верно.
Луис: Это явно нехорошо для рекламодателя, верно, я имею в виду, если люди не думают, подумайте, посмотрите, будет ли это через мобильные устройства контент, который мы даем этим людям, продавать, который мы даем этим людям, должно быть также подходит для этого устройства.
Итан:Да, конечно, и это не так — и я не хочу сказать, что это просто, как, ну, ну, мы просто собираемся пометить этот JavaScript, и проблема будет решена, как будто это определенно большой вопрос контента Как вы знаете, если я покупаю рекламную кампанию, мне нужно начать думать о хорошо, ну, мне нужно, не знаю, мобильное место, место для планшета, место для рабочего стола, широкоформатное место, например, как делать это — вы знаете, какие производственные накладные расходы это влечет за собой; это большая проблема, и я думаю, что вы знаете, если кто-то может придумать способ сделать так, чтобы он чувствовал себя решаемым, который был бы огромным, потому что мобильная реклама недавно взорвалась, и если бы мы могли придумать более кросс-устройство способ служения, я не знаю, я не могу поверить, что яЯ говорю о рекламе (смех), да, я думаю, это сделало бы нашу работу дизайнеров намного проще.
Луи: Наш контент в большинстве случаев поддерживается рекламой.
Этан: Конечно да.
Луи: Есть несколько исключений, подобных этому. И это то, что технология развивается в сети, может быть, есть ее задержки, которые могут повлиять на ход событий.
Этан: Да.
Луи: Вы знаете, просто чтобы привести другой пример, несколько дней назад я оказался — я шел по улице и увидел плакат с чем-то интересным, я не могу вспомнить, что это было, но на нем был QR-код Это.
Этан: Конечно.
Луи: Итак, я включил свое приложение для сканирования штрих-кодов, просто чтобы продемонстрировать классные вещицы моей девушке, и отсканировал код, и страница, которая появляется, совершенно не подходит для мобильного устройства.
Этан: Это действительно интересно, да.
Луи: И это продвигается через QR-код, и я даже не могу прочитать это.
Этан: Вау.
Луи: Так что на многих уровнях разногласия связаны с распространением устройств.
Этан: Верно.
Луи: И я думаю, что со временем — и, возможно, этот конкретный проект поможет преодолеть это, потому что он привносит его в более широкий культурный мир.
Этан: Хм, да, посмотрим. Как я уже сказал, это огромная проблема; было бы очень здорово, если бы кто-то мог решить эту проблему, особенно таким образом, что мы не имеем дело с JavaScript, который был написан в 1997 году, так что да, это было бы довольно круто.
Луи: Я хотел кое-что спросить у вас ранее, и давайте просто вернемся к этому, несколько человек вроде как вышли и сказали — я хочу сказать, что Джеффри Зельдман был первым человеком, которого я видел, кто-то сказал что-то такое, если вы… В наши дни вы не занимаетесь адаптивным веб-дизайном, вы не веб-дизайнер, а занимаетесь чем-то другим.
Итан: Хорошо.
Луи: Возможно, я неправильно приписываю эту цитату, я также думаю, что видел, как такие люди, как Джереми Кит и Энди Кларк, говорили вещи, которые очень похожи по тону, и я хотел знать, как вы относитесь к такого рода когда мы говорили о том, что вы загружаете страницу и начинаете перетаскивать окно, чтобы увидеть, как оно реагирует на разные размеры, это то, что мы все сейчас делаем, и вы знаете, мне было интересно, если вы считаете, что это часть лучшего практиковаться сейчас; в октябре 2011 года, когда вы заходите на веб-сайт, на совершенно новый веб-сайт, и он не спроектирован быстро, вы чувствуете себя немного похожим на «ах, вы чувствуете, что вы бы хотели увидеть весь Flash-сайт в 2005 году».
Итан:Верно-верно. Ну, я мог бы, но это только потому, что я живу очень печальным существом (смех). Но нет, я имею в виду, я думаю, как у Джереми Кейта, и у меня обоих были похожие посты, которые выходили примерно через день или два, как-то странно одновременно, пару месяцев назад, я думаю, как сообщество дизайнеров, мы вроде как зацепились за них. что-то вроде черного по сравнению с белым, я не знаю, мобильный по сравнению с настольным компьютером, что-то вроде двоичных полюсов, и какое-то время происходило подобное мобильное против адаптивного обсуждения. Я не знаю, я думаю, что один лагерный вид чувствовал, что Responsive Design был своего рода заменой мобильных сайтов, и были некоторые обидные чувства по этому поводу, и я определенно нет, я никогда не чувствовал так,как я думаю, что вам действительно нужно объединить подход к контенту, который вы разрабатываете, так что, да, если есть значительное совпадение между вашим планшетом и вашим мобильным опытом и вашим рабочим столом, то, возможно, адаптивный или правильный подход — адаптивный, но в остальном, как вы знаете, на самом деле вам просто нужно служить аудитории, для которой вы разрабатываете. Итак, я чувствую, что не знаю, является ли адаптивный дизайн лучшей практикой, но я чувствую, что мы дошли до того, что нам нужно начать задавать себе вопрос, например, как мы начинаем проектировать за пределы экранов ноутбуков, помимо настольных экранов, как наша стратегия для этого, и я думаю, что адаптивный подход может быть правильным для многих проектов, если ониготовы подумать об этом опыте кросс-устройства. Я не думаю, что для «Глобуса» это было бы — как если бы мы как-то достигли точки, когда мы как бы спрятали большое количество контента на странице, я был бы первым, кто сказал, как, смотри, может быть нам нужно придумать другой подход здесь. Я как бы чувствую — недавно я говорил это пару раз, но как догма не оплачивает счета (смех). Я немного увлечен адаптивным дизайном и не могу придумать какой-либо другой подход, который мы могли бы сделать, чтобы сделать Глобус, например, просто независимо от моих предубеждений, это был действительно забавный проект, над которым я работал, но я действительно могу » Я не думаю о каком-либо другом способе, которым мы могли бы сделать это, если бы мы не были, знаете ли, если бы мы не начали с гибкого макета,разработал действительно итеративно, а затем многоуровневые медиа-запросы поверх того контента, который мы как бы тщательно изучили, но это не значит, что это обязательно правильный подход для каждого сайта. Так что да, у меня нет простого ответа здесь.
Луи: Да. Очевидно, что этот метод пока не принят, но вы бы не сказали, что это похоже на просмотр всего сайта Flash в 2005 году.
Итан:О, черт, нет, это звучит слишком по-семинфельдски, но, как некоторые из моих любимых сайтов, имеют фиксированную ширину, так что (смех), это не значит, что вы плохой человек, если вы проектируете с сеткой 960, я не знаю и ад или высокая вода не откажутся от ваших пикселей, я имею в виду, я думаю, что когда мы вступаем в такие дискуссии, как это реагирует или умирает, или это обнаружение устройства, или я не знаю свободы или смерти или чего-то еще, это как будто мы закрываем себя к действительно как удивительное решение. Если мы можем быть немного менее догматичными и немного более вдумчивыми в том, как мы оцениваем материал и придумываем некоторые реальные критерии для него, например, вместо того, чтобы просто говорить о том, что я хорошо говорю, о, вы знаете, есть ли много совпадений между контекстами, например, если мы можем формализовать, как в следующем году или два, как, хорошо, хорошо х,y и z настроены для этой аудитории для этого проекта, тогда адаптивный подход — неправильный, тогда мы можем быть немного более научными и немного менее религиозными в такого рода вещах, так что это то, что я взволнован о том, чтобы провести более широкую дискуссию о том, когда эти вещи имеют смысл, да, я думаю, что нам всем будет лучше.
Луи: Ну, с нетерпением ждем, как это будет развиваться.
Этан: Да, я тоже.
Луи: Большое спасибо, что пришли на шоу и поговорили об этом. Как я уже говорил, я видел, как вышел дизайн Boston Globe, и я определенно хотел поговорить с вами об этом. Поздравляю с отличной работой, это фантастический сайт, и я очень надеюсь, что он успешен и вдохновляет на волну повышенной отзывчивости.
Этан: (смеется) это было бы здорово.
Луи: На крупных сайтах.
Этан: Ах, спасибо, Луис, да, это здорово, быть здесь.
Луи: Абсолютно. Если люди хотят подписаться на вас в вашем блоге, в Twitter.
Этан: Да, я в Твиттере, как @Beep , я клянусь там обильно; Я также недавно только что открыл отзывчивый аккаунт в Твиттере для веб-дизайна на @RWD , я ненавижу аббревиатуру, но она хороша и коротка, и мое портфолио — Ethanmarcotte.com , поэтому я хотел бы услышать от вас, ребята.
Луи: Хорошо, хорошо, еще раз большое спасибо и хорошего дня.
Этан: Большое спасибо за то, что позволили мне поболтать, я действительно ценю это.
Луи: Эй, не беспокойся вообще.
И спасибо за прослушивание на этой неделе эпизода подкаста SitePoint. Мне бы очень хотелось услышать, что вы думаете о сегодняшнем шоу, так что если у вас есть какие-либо мысли или предложения, просто перейдите на sitepoint.com/podcast и вы можете оставить комментарий к сегодняшнему эпизоду, вы также можете загрузить любой из наших предыдущих эпизодов для загрузки. или подписаться, чтобы получить шоу автоматически.Вы можете подписаться на SitePoint в Twitter @sitepointdotcom , это SitePoint dotcom, и вы можете подписаться на меня в Twitter @rssaddict . Спасибо за внимание и пока.
Тема музыки Майка Меллы .
Спасибо за прослушивание! Не стесняйтесь сообщить нам, как у нас дела, или продолжить обсуждение, используя поле комментариев ниже.