Эпизод 111 подкаста SitePoint теперь доступен! Мы говорим о публикации блога Джереми Sea Change , его взглядах на адаптивный веб-дизайн и состоянии мобильной сети.
Слушай в своем браузере
Воспроизведите этот эпизод прямо в браузере — просто нажмите оранжевую кнопку «Play» ниже:
Скачать этот эпизод
Вы можете скачать этот эпизод в виде отдельного файла MP3. Вот ссылка:
- Подкаст SitePoint № 111: Отзывчивый веб-дизайн с Джереми Китом (MP3, 37:56, 36,4 МБ)
Стенограмма интервью
Луи: Привет и добро пожаловать в еще один эпизод подкаста SitePoint. Со мной сегодня мне очень приятно иметь на шоу Джереми Кейта. Я не верю, что Джереми нужно много знакомиться с большинством слушателей этого шоу. Джереми — веб-дизайнер из Великобритании, автор нескольких книг по веб-дизайну, последняя из которых — HTML 5 для веб-дизайнеров, привет, Джереми!
Джереми: Привет.
Луи: Как дела?
Джереми: У меня все хорошо, большое спасибо за то, что приняли меня.
Луи: О, это абсолютное удовольствие. Я думаю, что Кевин упомянул, что он столкнулся с вами на .net Awards.
Джереми: Да, верно.
Луи: Точно, тогда вы проявили некоторый интерес к участию в шоу, а затем совсем недавно мы обсуждали ваш пост в блоге с Майлсом и Максом, и вы присоединились к комментариям и сказали, что есть несколько вещей Я хотел бы иметь возможность уточнить и попасть туда и поговорить о, так что да, вы были достаточно щедры, чтобы предложить прийти и обсудить эти вопросы.
Джереми: Да, хорошо, большое спасибо за то, что позволили мне попасть на шоу.
Луи: О, конечно. Таким образом, темой обсуждения, которая привела нас к тому или иному поводу, был пост в блоге, который вы недавно написали под названием Sea Change , и он был своего рода обсуждением ваших взглядов на роль отзывчивого веб-дизайна, я полагаю, в будущем паутина. Итак, вы хотите, чтобы просто начать нас, дайте нам краткое изложение того, какова была ваша позиция и откуда вы пришли, когда писали это и как вы себя чувствовали. Я думаю, способ, которым мы это представляли, не совсем захватил ваши взгляды, поэтому Я дам вам шанс опровергнуть это.
Джереми: Ну, пост в блоге, вроде как о будущем, вроде как сейчас, о том, как я уже чувствую, что происходит изменение в том, как мы создаем веб-сайты, по сути, мы создавали веб-сайты для устройств на протяжении многих лет, просто случается, что устройства были настольными компьютерами, ноутбуками, и только недавно начали разрабатывать специальные веб-сайты для новых устройств, мобильных телефонов, планшетов и т.д. Но на самом деле мы надеемся, что к веб-разработке, не зависящей от устройств, мы просто адаптируемся к любому устройству, которое использует пользователь. И это вроде того, о чем я говорил, я довольно долго обдумывал эту идею в течение долгого времени, не связанного с разработкой устройств, которая действительно была тем, чем должны были быть веб-стандарты, так или иначе, это только сейчас, наконец, оно начинает бывает. Фактически, вся эта ситуация в некотором роде напоминает мне ситуацию, может быть, десять лет назад, когда произошел этот сдвиг в сторону веб-стандартов от таблиц для макетов и тегов шрифтов, а также к использованию CSS для представления, разделения структуры и представления. Тогда в воздухе можно было почувствовать, что это захватывающее время, люди много убеждались, что это правильно, и потребовалось несколько довольно громких сайтов, таких как редизайн Wired, редизайн ESPN, чтобы убедить людей это стоило сделать, и у вас были такие вещи, как Дзен-сад, чтобы как-то изменить сознание людей. И теперь ситуация похожа, и я думаю, что в сознании людей начинают происходить перемены, и адаптивный веб-дизайн является своего рода первым авангардом такого способа работы. Но я думаю, что я говорил о том, что, возможно, я не достаточно ясно выразился в посте блога, но я думаю, что некоторые люди неправильно понимают то, что я говорю, так как все в порядке, нам не нужно слишком беспокоиться о новых устройствах, таких как мобильные телефоны или планшеты, все, что нам нужно сделать, это взять наши существующие сайты, ориентированные на настольные компьютеры, и просто переформатировать контент, чтобы он помещался на меньших экранах, и это не то, что я имел в виду, это не то, что я говорю. Я говорю о том, что распространение множества различных устройств, множество экранов разных размеров, множество разных возможностей означает, что сайты, ориентированные на настольные компьютеры, которые мы создавали в течение стольких лет, просто больше не собираются его сокращать. и решение состоит не в том, чтобы создать отдельный субдомен для этих новых устройств, для разных пользователей этих устройств решение состоит в том, чтобы перестроить сайт с нуля независимо от устройства, что, как я признаю, является довольно болезненным меняются, и обычно есть политические причины, почему это не всегда разумный вариант, но я чувствую, что это произойдет, нравится вам это или нет. Также как вы можете начать делать это сейчас, начать менять настольный подход к веб-разработке сейчас, или вы будете за кулисами еще через шесть месяцев, 12 месяцев, два года, точно так же, как десять лет назад это было та же ситуация с переходом на CSS и разделением структуры и представления; вы могли бы либо отстать от этого на раннем этапе, либо вы можете играть в догонялки, но это должно было случиться.
Луи: Точно. Я думаю, что одна из вещей, которая интересна в этой идее адаптивного веб-дизайна, и я думаю, что по большей части то, что вы говорите, абсолютно разумно, и мы все можем отойти от этого, одна из вещей, которая выходит, — это адаптивный веб-дизайн. Это такой новый набор методов, что по-прежнему есть вопросы по этому поводу, и люди уже какое-то время пытаются или пытаются ответить на проблему мобильного телефона, как вы сказали, что-то вроде разделения вещей на поддомене или попытки прийти с совершенно другим макетом, что некоторые люди уже имеют некоторые заранее сформированные мнения о лучшем способе сделать это, и, возможно, именно поэтому мы видим немного больше трения, чем мы могли бы ожидать.
Джереми: Да, и не поймите меня неправильно, я не говорю, что Responsive Design — это ответ на все вопросы, и это все, что нужно для веб-разработки, и я согласен, что это очень рано, и это очень экспериментирование продолжается, это то, что делает его захватывающим. Я бы сравнил это с ситуацией, снова возвращаясь к более ранним дням в веб-разработке, я сравнил это с ситуацией с Ajax в том, что вещи начали происходить, и это было очень туманным; примерно в 2005 году мы начали видеть довольно интересные приложения, такие как Gmail и Google Maps, и так далее, а затем появился Джесси Джеймс Гарретт, который дал ему ярлык, назвал его Ajax, и здесь такая ситуация у нас что-то происходит, и приходит Итан Маркотт, и он говорит: «Хорошо, мы будем называть это адаптивным веб-дизайном, и сразу же у нас есть что-то, что можно назвать, и это помогает кристаллизовать вещи, люди могут встать за этим лейблом». , но это все еще очень много экспериментов, пробовать вещи. Я не хочу создавать впечатление, что все ответы есть, нам просто нужно их реализовать, нет, это все еще этап выяснения этого материала, просто я думаю, что хорошо, что у нас есть этот ярлык для такого рода подхода, который идет вразрез с тем, который был подходом по умолчанию в течение последних двух или трех лет, и это идея о том, что мы просто создаем отдельный поддомен для этого типа пользователя и такого типа пользователя, который просто не собирается масштабировать в долгосрочной перспективе.
Луи: Точно. Так вы считаете, что это никогда не будет правильным подходом, что нет ни одной организации или какой-либо публикации, которая могла бы выиграть от разработки веб-сайта специально для мобильных устройств? И затем я думаю, что имеет смысл сказать, что ваш тип традиционного веб-сайта, любой веб-сайт может извлечь выгоду из адаптивных методов, потому что вы сможете адаптироваться к более широкой степени размеров экрана и устройств. Но вы говорите, что никогда не уместно иметь сайт, ориентированный на мобильное устройство, с ограниченным количеством опций, а затем ссылку на основной сайт?
Джереми: Нет, конечно, как и во всем, это зависит от того, является ли ответ практически на каждый вопрос, когда речь заходит о веб-разработке. Но, я думаю, до сих пор я дошел до того, что по умолчанию вы создаете отдельный сайт для мобильных устройств, и только в некоторых крайних случаях вы думаете о том, чтобы один сайт обслуживали всех, для кого вы настраиваете макет. или дизайн для, и я ставлю под сомнение, что по умолчанию. И вы абсолютно правы, есть определенно ситуации, когда для мобильных пользователей должен быть другой URL, возможно, другое подмножество контента, хотя предоставление меньшего контента для мобильных пользователей, это то, что мне, конечно, кажется странным, но это больше о контекст, чем содержание в этих ситуациях. И Итан рассказывает об этой ситуации, он приводит пример сайта событий, он строит сайт для Happy Cog’aoke, который был событием караоке на юге Юго-запада в прошлом году, и сайт, главный сайт в преддверии Все это было посвящено голосованию и выбору песен, и вам нужно было сесть перед компьютером, чтобы использовать его. Но потом, если вы посетили сайт с мобильным устройством в день мероприятия, вы, вероятно, захотите узнать, где это событие, как мне добраться до него, что-то в этом роде, хорошо, в такой ситуации это имело смысл, что вам подадут что-то другое. Но я думаю, что это исключения, а не значения по умолчанию, и определенно существуют ситуации, когда это абсолютно то, что вы хотите сделать, но есть и опасность, есть опасность попытаться сделать предположения о намерениях людей, попытаться принять контекст от устройства, и это то, что я вижу, происходит довольно много. Итак, эта идея, хорошо, что кто-то посещает устройство с небольшим экраном, например, мобильный телефон, тогда они, вероятно, делают предположение, что хорошо, что эти люди не хотят иметь доступ ко всему нашему контенту, они просто хотят узнать адрес или они просто хотят получить наш номер телефона, чтобы они могли позвонить нам, я думаю, это опасное предположение. И это предположение, возможно, было вернее в прошлом, когда мобильные телефоны, откровенно говоря, были не так хороши в работе с веб-контентом, когда люди действительно использовали Интернет на мобильном устройстве, просто как быстрый способ получить некоторую информацию, когда они спешат, в то время как у них голова опущена, хотя они в пути, но данные в настоящее время предполагают, что люди используют мобильные телефоны и другие мобильные устройства в самых разных ситуациях, вы знаете, сидя дома, просто сидя на диване, а не Дотягиваясь до своего ноутбука или за компьютером, вы можете взять мобильный телефон и почитать некоторые сообщения в блоге, или вы можете лежать в постели с iPad, что на самом деле является очень распространенным случаем использования планшетных устройств и мобильных устройств. Так что я не думаю, что больше справедливо пытаться делать эти предположения о намерениях людей просто с их устройства, если оно когда-либо было, и это может быть очень опасным, и люди могут очень расстроиться, в результате вы получите ситуацию где люди автоматически перенаправляются на мобильный сайт, конкретный мобильный сайт с подмножеством контента, и они точно знают, что там больше контента, потому что они посетили тот же сайт ранее в тот же день на настольном устройстве, и они Вы пытаетесь выяснить, как они получают этот контент, и, надеюсь, есть ссылка для просмотра всего сайта, верно, это неизбежно должно быть включено. Так что бывают ситуации, когда вы действительно хотите обслуживать другой сайт, по существу, для мобильных пользователей, но я думаю, что ситуация в меньшинстве, а не в большинстве, и я также считаю, что опасно пытаться делать слишком много предположений о намерениях людей на основе своих устройств.
Луи: Да, так что я думаю, что вы говорите, что в конце дня вы действительно должны учитывать пользователей, которые будут использовать ваш сайт, а не пытаться делать какие-либо обобщения; если есть какие-либо данные, которые есть у владельца сайта или к которым у вас как у дизайнера есть доступ, или если вы можете выйти и поговорить с пользователями и выяснить, чего они хотят, и каковы их условия, когда они используют сайт, нет ничего, что могло бы собирается конкурировать с этим.
Джереми: И я должен сказать, что это работает в обоих направлениях, так же, как мы не должны пытаться делать слишком много предположений о посетителе вашего сайта, который посещает с мобильным устройством свои намерения, так же как и потому, что кто-то посещения с настольным браузером не означают, что у них есть все время в мире, чтобы сидеть там и ждать загрузки страницы или что они не спешат, и что они хотят быстро получить информацию или что у них много пропускной способности. Существует ужасная связь между размером экрана и пропускной способностью, мы склонны считать, что маленькие размеры экрана означают более узкую полосу пропускания, а большие размеры экрана означают большую пропускную способность. И хотя, вероятно, можно с уверенностью предположить, что экран небольшого размера может означать, что мы не можем полагаться на то, что у этого человека быстрое соединение, обратное неверно, вы не можете этого допустить, потому что у кого-то есть широкий экран, у них много пропускной способности.
Луи: Я думаю, что еще одна вещь, которая наиболее интересна для меня в результате всех этих дебатов об отзывчивом веб-дизайне, заключается в том, что он выявляет тот факт, что я думаю, что многие из тех сайтов, которые мы рассматриваем как традиционные сайты, ориентированные на настольные компьютеры, цитируйте / отменяйте цитаты, на них много контента, который, возможно, не так важен. Люди поднимают спор о мобильном сайте, говоря: «О, моему ресторану нужен мобильный сайт, потому что, когда люди в пути, им просто нужен мой адрес, мой номер телефона и мое меню, а люди всегда просто хотят, чтобы ваш адрес, ваш номер телефона и ваш меню, и это должно быть основной информацией на вашем настольном сайте, и все эти другие хлам и большие фотографии людей, бросающих еду в лицо, на самом деле никому не нужны.
Джереми: Точно. Я на самом деле одобрил твит от кого-то в Твиттере сегодня, он подвел его итоги, он сказал: «Мобильные пользователи хотят видеть наше меню, часы и номер доставки, пользователи настольных компьютеров определенно хотят видеть этот мегабайтный PNG, который кто-то улыбается салату» «.
Луи: (смеется) точно, верно. Я не видел этого; Должно быть, я был там в похожей мозговой волне.
Джереми: Да, это подводит итог, верно, что на самом деле то, что на самом деле вызывает это недавнее распространение устройств, размеров экранов и вариантов использования, — это то, как мы занимаемся традиционным веб-дизайном, если вы можете назвать такую молодую индустрию Традиционно, всегда был не в порядке с реальностью, верно, что мы делали много предположений за последние десять лет, которые не были основаны на каких-либо хороших данных или каком-либо хорошем тестировании с реальными пользователями. Мы делали много предположений относительно размера экрана, полосы пропускания, контекста, всех этих видов вещей, которые на самом деле не выдерживают, и что мне нравится в этом взрыве в использовании мобильных устройств, так это то, что он действительно бросает резкий рельеф, как Устаревшие наши методики были до сих пор на рабочем столе. Таким образом, я на самом деле думаю, что люди обычно обращаются к мобильным сайтам, когда они создают эти отдельные мобильные сайты, они делают веб-дизайн правильно, они думают о том, что является основным контентом, что бы люди хотели, когда они приходят на наш сайт. бизнес. И тогда, конечно, очевидный вопрос, как вы говорите, почему мы предполагаем, что люди, посещающие на настольном сайте, не захотят того же самого, основного контента. Так что, да, это своего рода распространение мобильных устройств, распространение устройств действительно показывает, насколько неприкосновенен наш традиционный подход.
Луи: Хм-мм. Поэтому я хочу перейти сейчас и немного поговорить о адаптивном дизайне как о технике и о том, где он сейчас стоит. Так что это была другая вещь, которую, возможно, мы не полностью представили в предыдущем шоу, когда я разговаривал с Максом и Майлсом. Так вы видите это скорее как философию или лучшую практику, или как просто набор инструментов, которые вы затем можете использовать и использовать, чтобы сделать свои сайты настолько хорошими, насколько они могут быть?
Джереми: Хорошо, когда Итан определил термин, он дал ему довольно ясное объяснение, он не сделал его бессмысленным, он имел в виду три конкретных метода, которые используют плавные сетки, верно, с изменяемым расположением, с изменяемым размером или плавные изображения и другие мультимедийные видеоизображения и т. д., а затем корректировка макета с помощью медиа-запросов. Теперь люди действительно сосредотачиваются на части медиазапроса, и есть много людей, которые путают адаптивный веб-дизайн с медиазапросами, тогда они используют термины взаимозаменяемо. И на самом деле, часть медиазапросов, вероятно, наименее интересная часть Responsive Web Design, выясняющая, как сделать гибкий макет и как обрабатывать изображения и видео, и такого рода контекст, это действительно сложная часть, медиазапросы довольно просты. , И на самом деле, даже если вы не используете медиа-запросы и использовали, например, решение на основе JavaScript, похожее на JavaScript Кэма Адамса несколько лет назад, для обслуживания различных макетов в зависимости от размера экрана, я бы сказал, что это одинаково адаптивный веб-дизайн, и аспект медиазапросов — это просто сноска. Но люди зациклились на части медиа-запросов, и они только начали использовать термин взаимозаменяемо. Поэтому я думаю, что термин — это довольно специфический набор техник, как он определен Итаном, но то, как вы подходите к нему, может сильно отличаться, потому что один из подходов к адаптивному веб-дизайну — это буквально использовать существующий веб-сайт для настольных компьютеров, созданный для настольных компьютеров. Это сделано специально для рабочего стола, и вы увидите, как вы можете перекомпоновать контент, чтобы уместить его на меньшем экране, и вы можете добиться определенного успеха в зависимости от способа его кодирования, как я уже сказал, если это было сделано с помощью Жидкий макет для начала вам может повезти. Но такой подход не совсем то, что я бы назвал лучшей практикой адаптивного веб-дизайна. Я думаю, что правильный подход к этому состоит в том, что вы начинаете с базового контента и базовых стилей, связанных с цветом, типографикой и тому подобным, а затем добавляете стили макета в медиа-запросы или любую другую технологию, которую вы используете. используется для определения размера экрана. Таким образом, в некотором смысле это похоже на идею Люка Вроблевского о мобильной связи сначала, верно, сначала думать о ситуации с мобильными устройствами, а затем двигаться вверх, но я думаю, что опасно также думать о мобильных устройствах, это больше похоже на контент в первую очередь, вы думаете о содержание, а затем вы применяете макеты. Теперь этот подход, я думаю, будет работать намного лучше, чем начинать с настольной версии и стараться, чтобы она хорошо работала на небольших экранах. И если вы думаете о том, что вы там делаете, просто начните с контента, примените цветовые стили и стили шрифтов, а затем примените стили макета поверх этого, в зависимости от ширины экрана, это прогрессивное улучшение, верно, я имею в виду, что мы в любом случае, это лучшая практика. И хотя, как я уже сказал, я думаю, что за последние десять лет в Интернете мы много чего делаем, что явно неправильно, то, как мы создавали эти сайты для настольных компьютеров, я думаю, что мы делаем то, что долгое время это был неправильный путь, но прогрессивное совершенствование как подход и методика, которая удивительно устойчива, я снова и снова вижу снова и снова как действительно хорошее решение, не решение, а хороший подход ко многим новым ситуациям. Опять же, чтобы связать это с Ajax, когда Ajax взорвался на сцене, и было много экспериментов, многие люди бросали прогрессивное улучшение в окно, говоря, что это совершенно новый способ делать вещи, нам не нужно думать о этот материал больше. Но, как оказалось, прогрессивное улучшение, когда вы примените его к Ajax, приведет к наилучшему возможному взаимодействию для более функциональных браузеров, но при этом гарантирует, что все работает для старых браузеров.
Луи: Как мы недавно видели с некоторыми из них, я думаю, что редизайн Gawker Media — самый яркий пример этого, люди до сих пор не полностью осознали эту идею, даже с Ajax, и это было шесть лет, так что я думаю, это Адаптивному веб-дизайну может потребоваться некоторое время, чтобы добраться туда.
Джереми: Да, я имею в виду, что мы увидим много разных подходов, даже в первую очередь под баннером адаптивного веб-дизайна или контента, или как вы хотите это назвать. И я думаю, что со временем мы увидим появление лучших практик, я не думаю — я думаю, что еще слишком рано говорить о том, что является лучшей практикой прямо сейчас, и это хорошо, еще есть много возможностей для экспериментов. И это также волнующе, захватывающее время, я думаю; Я помню, когда CSS был новым на сцене, и вы могли обнаружить действительно классную технику, о которой никто не думал, и вы могли бы опубликовать ее в своем блоге и получить хак, названный в честь вас или чего-то еще, или получить технику, названную в вашу честь. И это действительно захватывающее время для веб-разработчика, и я чувствую то же самое, что да, это первые дни, и да, мы все еще разбираемся в этом, и никто не имеет ответов, но это хорошо, Вы знаете, это захватывающе.
Луи: Да, конечно. Я думаю, что, может быть, некоторые из … когда вы думаете об этом, возникает много недоразумений, которые имеют люди относительно того, что такое адаптивный веб-дизайн и каков лучший способ сделать это, там так много всего, я имею в виду, даже если вы посмотрите в галерее медиа-запросов, о которой мы кратко говорили на подкасте с Максом и Майлсом, во многих примерах используется такой подход, например, давайте создадим серию сайтов фиксированной ширины, которые просто корректируют макет, и все они загружают те же изображения и те же ресурсы, так что в основном это просто полноразмерный настольный веб-сайт, который переформатируется. Так что, как вы думаете, будет решением — я имею в виду, вы думаете, это произойдет естественным образом, когда разработчики научатся делать это правильно или это то, что нам нужно, чтобы быть более активным? и найти способ представить правильный способ сделать это людям?
Джереми: Ну, я думаю, что, как я уже сказал, будет много экспериментов, и снова это напоминает мне о ранних днях веб-стандартов, а затем, вероятно, будет какой-то высококлассный сайт, который сделает это правильно, потому что они должны Да, по деловым причинам им нужно убедиться, что они делают это абсолютно правильно, чтобы они действительно потратили время и силы, и будет своего рода канонический первый большой отзывчивый крупный бренд-сайт точно так же, как у нас был ESPN.com, редизайн Wired, вы знаете эти сайты с первых дней макетов на основе CSS, чтобы показать нам путь. Так что я думаю, что у нас будут эксперименты, ну, тогда да, будут люди, которые будут переиздавать сайты, ориентированные на десктопы, это все эксперименты, и вы также заметите, что многие сайты, делающие это сейчас, являются персональными сайтами, верно, портфолио сайтов такого рода. вещь, потому что именно здесь может случиться много экспериментов.
Луи: И есть два способа взглянуть на это. Некоторые люди говорят, что причина, по которой вы видите только личные сайты, блоги и сайты агентств веб-дизайна, заключается в том, что это единственный тип контента, который подходит для этого, но с другой стороны, любая новая техника обычно сначала появляется на личных сайтах и в Интернете. сайты дизайнерских агентств, потому что именно там люди играют с вещами, CSS-дизайном в одном месте и с любой техникой, действительно с CSS 3, которую мы видим сейчас, в основном все еще на этих маленьких сайтах.
Джереми: Да, именно здесь происходят эксперименты. Если вы посмотрите на историю веб-дизайна, вы всегда видели, как эти вещи происходят, сначала на чьем-то личном сайте, а затем они применяются к коммерческим сайтам. Так что я с нетерпением жду возможности увидеть этот сайт, может быть, он уже где-то создан, и я думаю, что действительно будет такой взрыв сайтов, как только будет доказано, что он работает на крупномасштабном коммерческом сайте. И вы могли бы сидеть сложа руки и ждать, пока это произойдет, или вы могли бы попытаться увидеть, можем ли мы быть теми, кто это сделает, как это было бы здорово, если бы мы могли быть впереди этого изменения, а не просто играть в догонялки.
Луи: Да, абсолютно. Я вижу, что на домашней странице About.com в настоящий момент используется адаптивный дизайн, у него очень, очень гибкая сетка, поэтому я думаю, что это один из примеров достаточно крупного или высококлассного сайта, который делает подобные вещи, но они, вероятно, еще много впереди.
Джереми: Хм-мм.
Луи: Итак, я хотел бы немного коснуться некоторых, я полагаю, технических проблем, возникающих при выполнении такого рода вещей, потому что я полагаю, что проблема заключается не столько в работе с экранами разных размеров, потому что это то, что все эти методы реагирования очень хорошо. Но одна вещь, которая действительно возникает, это то, что если вы будете подходить в качестве организации или дизайнера веб-сайта для обработки мобильных устройств и мобильного контекста с цитатами, то это подразумевает несколько других вещей, и, как вы сказали, связь пропускной способности с размером экрана или отсутствие клавиатуры с размером экрана даже не на сто процентов, но это то, что есть, и люди должны учитывать. И я полагаю, что одна из самых больших проблем, связанных с адаптивным веб-дизайном, связана с этой проблемой пропускной способности, верно, если мне нужно предоставить изображение, которое будет хорошо выглядеть в 1024 или 1280, и оно также должно выглядеть хорошо в 320, подход до сих пор в большинстве случаев требовалось использовать действительно большое изображение и масштабировать его в CSS, но это создает проблему пропускной способности. И еще одна проблема, которая возникает, это часть лишнего контента, так что вы немного поговорили о ленивой загрузке в качестве решения этой проблемы, поэтому я хотел бы узнать ваше мнение о том, куда мы идем в отношении такого рода технические проблемы и решения проблем пропускной способности.
Джереми: Когда дело доходит до подачи мультимедийных материалов разного размера, таких как изображения, я думаю, что с этой идеей, когда речь заходит о макетах, вместо того, чтобы уменьшать макет, ориентированный на рабочий стол, чтобы попасть на мобильный сайт, что если мы перевернем его с головы и начнем с узкая версия, а затем масштабировать ее до рабочего стола. Я думаю, что это, вероятно, хороший подход к СМИ; вместо того, чтобы думать о большом изображении как о значении по умолчанию и о том, как мы уменьшаем его для экранов меньшего размера, переворачиваем его на голову и думаем о меньшем изображении как о значении по умолчанию, а затем о том, как мы можем предоставить увеличенное изображение для устройств, которые иметь большие экраны, ноутбуки, рабочие столы и так далее. Я имею в виду, что отчасти это связано с тем, что устройство с меньшим экраном будет включать целую кучу телефонов, которые не обладают такой способностью, у нас сейчас есть несколько отличных мобильных браузеров, Mobile Safari и так далее, но есть и много мобильных телефоны, которые имеют вид более хрупких браузеров. Таким образом, безопасное значение по умолчанию — думать о более низкой пропускной способности, думать о меньших изображениях, думать о линеаризованном дизайне, а затем применять большие изображения, больше контента, многостолбцовые макеты для более функциональных браузеров, которые могут быть на настольный или портативный компьютер. Итак, еще раз, я думаю, что это о том, чтобы перевернуть его с ног на голову. Таким образом, подход заключается в том, что да, у вас есть изображения меньшего размера по умолчанию, а затем используется JavaScript, например, когда вы определяете размер экрана или пропускную способность, чтобы поменять их на большие изображения, и некоторые люди начали писать некоторые умные сценарии по этому поводу, Скотт Джел У меня есть один на GitHub, я думаю о том, чтобы иметь дело с обменом изображениями в зависимости от размера экрана. А потом я натолкнулся на другой JavaScript, я бы не назвал его библиотекой, просто небольшим фрагментом, который пытается реально определить пропускную способность, теперь это действительно крепкий орешек, верно, я имею в виду, что на самом деле довольно легко определить размер экрана, разрешение, такого рода вещи, это решенная проблема, пытаясь выяснить, насколько быстро чья-то связь — это действительно неизвестное неизвестное. Но с помощью некоторого умного Ajax, по существу, проверяющего и проверяющего время отклика, вы можете попытаться справиться с этим, но в целом общий подход, который вы хотите использовать, — это позаботиться о безопасности по умолчанию, поэтому по умолчанию должен быть небольшой экранный контент с узкой полосой пропускания и небольшой мультимедиа, а затем применить полностью развернутый макет больших изображений большего количества контента только к браузерам, которые способны с ним справиться, а затем ленивая загрузка — еще один способ сделать это. Я, вероятно, неправильно использую термин ленивая загрузка, я знаю, что это программный термин, чтобы вызывать что-то только тогда, когда вам это нужно, и я использую его как в буквальной загрузке чего-то после загрузки основного содержимого, что, вероятно, должно быть говоря что-то вроде условной загрузки или что-то в этом роде, но я заимствовал эту фразу как ленивая загрузка.
Луис: Ну, я думаю, что это понятно большинству людей, и многие люди начали делать с JavaScript либо для полифиллов для HTML 5 или CSS 3, либо просто для того, чтобы на вашей странице было много скриптов, которые не нужно запускать сразу, просто немного задерживая, чтобы сократить начальное время загрузки.
Джереми: Да, в любом случае по соображениям производительности. И, опять же, это своего рода ортогональность к мобильным или маленьким экранам или другим устройствам, просто хороший смысл в производительности, чтобы убедиться, что ваш важный контент загружается сначала и загружается быстро, а затем вы можете позволить типу периферийного контента загружаться по-своему. сладкое время. Я знаю, что Flickr делает некоторые ленивые загрузки в фоновом режиме вокруг некоторых периферийных вещей на странице с фотографиями. Итак, опять же, это просто хорошая практика, независимо от того, думаете ли вы о разных устройствах.
Луи: Да, абсолютно. И вы делаете это на своих сайтах, я думаю, Хаффдюффер Я видел одно из ваших сообщений в блоге, что вы ввели некоторую условную загрузку некоторого содержимого боковой панели. Вы делаете какие-либо определения размера экрана для этого или это просто загрузка после основного контента?
Джереми: Ну, во-первых, я просто хотел улучшить производительность, потому что многие вещи, которые были на сайте, в первую очередь, не были основным контентом, было приятно иметь контент, а во-вторых, контент включал в себя отправку третьим лицам. места.Я имею в виду, что я занимался кешированием, но это включало в себя получение фотографий из Flickr, получение обновлений из Twitter, что-то вроде этого, правда, это вроде приятно иметь своего рода украшение. Итак, для начала это была проблема с производительностью, я хочу убедиться, что основной контент на сайте не задерживается этими сторонними запросами. Это та же самая проблема, которую намеревается решить что-то вроде Node.js, верно, что вы не задерживаете рендеринг из-за большого количества запросов на разные вещи. Итак, все началось так, и как только это было сделано, я подумал, что это простой Ajax-запрос, вы знаете, как только страница загружается, извлеките эти данные и поместите их в этот элемент, было довольно легко обернуть это в одно небольшое условное выражение, если заявление, которое просто, если экран больше, чем определенное количество, сделать это.Теперь может случиться так, что когда я это делаю, я на самом деле совершаю классическую ошибку, принимая размер экрана за пропускную способность, верно, я мог бы ошибиться в этом. Но я думаю, что это разумное применение, опять же, я не утверждаю, что у меня есть все ответы; Я думаю, что это разумное использование. Интересно то, что в этой ситуации, а также семантика того, где я это делаю, это, как вы говорите, боковая панель, это сайт с элементами HTML 5, и это элемент в стороне, буквально элемент в стороне. И если вы посмотрите на определение того, какой элемент aside должен использоваться для него, то он довольно близко соответствует виду контента, который приятно иметь, но не вашему основному контенту, верно, контенту, который тангенциально связан с другим контентом вокруг него.Так что было интересно посмотреть, как отображается соответствие между семантикой контейнера контента и тем, как я могу думать о контенте, а также о том, что он не является основным, это не жизненно важный контент, его приятно иметь. Так что, да, я думаю, что ленивая загрузка является интересным подходом с точки зрения производительности и может увязать с идеей небольших экранов и с тем, загружаете ли вы этот контент или нет. Потому что, если у нас нет таких вариантов, как ленивая загрузка, то единственные варианты когда мы рассматриваем, идет ли контент на странице, является ли контент на странице или нет, вот и все, это ваш выбор, да или нет, истина или ложь, один или ноль. Если вам нравится ленивая загрузка, вы можете сказать, что это зависит, вы можете сказать, что контент будет полезен на этой странице, если ситуация позволяет это делать, и это ‘Это очень полезно на самых ранних этапах планирования сайта, когда вы все еще находитесь в стадии разработки, верно, когда вы обсуждаете с клиентом. Потому что вы знаете, как это, верно, клиент будет хотеть все там, как мы должны иметь это там, это там, и вы хотите угодить клиенту, но в то же время вы принимаете точка зрения пользователя, и вы знаете, пользователь просто хочет получить к основному контенту. И этот вид дает вам возможность хорошо сказать, что да, давайте разместим этот контент на странице, если область просмотра достаточно широка, чтобы справиться с этим, и давайте удостоверимся, что контент не мешает основному контенту. Я имею в виду, что это относится как к визуальному дизайну, так и буквально с точки зрения загрузки контента, что основной контент неЭто приятно, если иметь периферийное содержание. Так что хорошо, что он вводит этот третий вариант, вместо того, чтобы просто присутствовать контент, истинный или ложный, что мы получаем такой вид — такой способ сказать, может быть.
Луи: Да.И я думаю, что мне нравится в этом то, что это дает вам возможность странным способом воссоединить концепцию выделенного мобильного сайта с концепцией адаптивного веб-дизайна. Поскольку, вообще говоря, разница между ними заключается в вашем адаптивном веб-дизайне, я имею в виду очень и очень упрощенное изложение в адаптивном веб-дизайне, что содержимое боковой панели перемещается ниже основной колонки, а на выделенном мобильном сайте Колонка боковой панели просто не существует, вы знаете, в простейшем смысле. Но, так что если вы полагаетесь на такого рода потенциально основанную на JavaScript загрузку вашей ссылки внизу страницы с надписью перейти на полный сайт, все, что он может сделать, — это сделать то же самое, просто загрузить содержимое боковой панели и поместить это ниже, верно,так что теперь у вас есть эта опция, я думаю, что-то вроде того, чтобы взять лучшее из обоих миров и работать таким образом, который имеет смысл для мобильных устройств, но также предоставляет весь контент на условной основе, когда либо пользователь хочет, либо мы знаем, что они могут справиться.
Джереми: Да, это хороший момент, когда вы можете принять это решение, хорошо. Я думаю, что мобильный пользователь, пользователь небольшого экрана, просто хочет увидеть этот контент, но при этом дает ему возможность с помощью кнопки, ссылки или чего-то, что можно сказать, показать мне более того, дайте мне полный материал, а затем загрузите его, потому что они специально запросили его. Так что, да, это дает вам то, что вместо того, чтобы сделать этот выбор, вместо того, чтобы вызывать выстрел тем или иным способом, вы получаете возможность вернуть власть в руки пользователя.
Луи: Хорошо. Что ж, было здорово, что ты был на шоу и имел возможность поговорить об этих вещах и по-настоящему взглянуть на это, тебе есть, что сказать, и ты много писал об этом, но иногда по какой-то причине я не знаю, что это такое в Интернете, но в блогах и Твиттере заявления и позиции всегда кажутся более абсолютными, чем они есть на самом деле.
Джереми:Я должен сказать, что я использовал довольно жесткий подход ко многим этим вещам вместо того, чтобы быть, возможно, более нюансированным, но это отчасти потому, что мне нравится поддерживать слабых во многих этих вещах. Итак, я помню пять, шесть лет назад я был тем, кто сказал: «Вы все должны проверить JavaScript, это действительно круто сейчас, и никто не хотел это слышать, это похоже на то, кто сейчас смеется». И в течение десяти лет я говорил о том, что жидкостные макеты — это путь, и теперь я чувствую себя там как-то оправданным, так что я всегда выбираю противоположность тому, что по умолчанию, и своего рода чемпион, потому что по умолчанию стало создание отдельных сайтов для мобильных устройств. Я отстаиваю противоположный подход, отчасти просто чтобы быть упрямым, я думаю (смех). Но я действительно думаю, что это путь вперед,но я должен еще раз уточнить, как я сказал в начале, это зависит, верно, это всегда зависит. А также типы сайтов, о которых я говорю, это определенный тип сайтов. Сейчас 80% моего времени, на котором я работаю, — это сайты, ориентированные на контент, на которых пользователь собирается переваривать информацию, читать что-то, получать опыт. Существует целый класс сайтов, которые сильно отличаются друг от друга. , Веб-приложение, теперь вы попадаете во всю проблему, пытаясь определить, что такое веб-приложение, и оно представляет собой совершенно другую ловушку, и я думаю, что иногда люди определяют свой сайт как веб-приложение, просто как карточку для выхода из тюрьмы, да, о, ничего из этого не относится ко мне, это веб-приложение. Но,Я должен ради раскрытия просто сказать, что я говорю об определенном типе сайта, который является контент-ориентированным сайтом, а не, возможно, сайтом, ориентированным на задачи, каким будет веб-приложение. Так что я знаю, что мне кажется, что я очень абсолютист в этом, это не мое намерение, я стараюсь быть в некоторой степени нюансированным, но я вроде намеренно занимаю жесткую позицию.
Луис: Да, хорошо, это всегда хорошо, потому что, по крайней мере, это провоцирует обсуждение и вовлекает людей в проблемы, потому что, если кто-то читает нюансовый пост, он может не подумать об этом снова, но если они прочитают что-то и скажут, подождите, я не согласен с этим, давайте немного подумать! Хорошо, еще раз большое спасибо за то, что пришли на шоу, Джереми, всегда здорово иметь возможность обсудить это, и слушателям будет здорово услышать ваше мнение по этому поводу. Если люди хотят найти вас в Интернете, вы хотите добавить некоторые ссылки?
Джереми: Да, мой сайт Adactio.com, и я @adactio в Твиттере, и adactio почти на всех сервисах.
Тема музыки Майка Меллы .
Спасибо за прослушивание! Не стесняйтесь сообщить нам, как у нас дела, или продолжить обсуждение, используя поле комментариев ниже.