Эта статья впервые появилась в ноябрьском выпуске (221) журнала .net - самого продаваемого журнала для веб-дизайнеров и разработчиков.
Брюс Лоусон: Кто работал с вами над этим?
SJ: Filament Group, Итан Маркотт, Upstatement, Мэт Маркиз и Миранда Маллиган, директор по цифровому дизайну в Бостонский глобус, составляла основную команду «дизайн-разработка». Между тем внутренняя команда Globe невероятно умела переводить код нашего внешнего интерфейса в полнофункциональный сайт, которым он является сегодня.
БЛ: Итан Маркотт - пример создания адаптивного веб-дизайна; какое влияние он имел на этот процесс?
СД: Большая часть процесса разработки была продиктована идеей Итана о «адаптивном» дизайне. Чтобы применить это мышление на крупномасштабном сайте, нам пришлось расширить оригинальные методы, которые в значительной степени применялись для макета, на другие области, такие как поведение, улучшения разметки, условная загрузка ресурсов и производительность.
БЛ: Каковы были первоначальные технические проблемы?
СД: В основном мы хотели, чтобы страница хорошо работала на устройствах с недостаточной мощностью, что означало найти способ загрузки ресурсов эффективно и быстро реагировать, чтобы мы не добавляли значительных накладных расходов там, где она не поддерживалась или не требовалась должным образом. Каждая критическая функция сайта была разработана для работы независимо от JavaScript, но улучшена благодаря более широкому взаимодействию, основанному на JavaScript, в соответствующих браузерах. Мы сосредоточились на предоставлении наименьшего количества JavaScript, необходимого для выполнения важных полифиллов, обнаружения функций и условной загрузки большего количества JavaScript в зависимости от условий окружающей среды.
БЛ: Почему вы выбрали HTML5?
СД: Мы использовали HTML5 по ряду причин. В основном он ориентирован на будущее и предлагает функции, которые были полезны в нашем наборе функций. Например, мы широко использовали атрибуты данных для настройки поведенческих опций или ассоциирования улучшений контента. Мы также оценили возможность использовать новые семантические элементы вместо div / p / span, где они имеют смысл.
БЛ: Как вы сделали так, чтобы сайт постепенно ухудшался в старых браузерах?
SJ: Чтобы адаптивные макеты работали в браузерах, не поддерживающих медиа-запросы, таких как IE6-IE8, нам понадобился быстрый полифил CSS3 Media Query. Мы обнаружили, что существующие решения были слишком тяжелыми и не переводили макеты достаточно быстро, поэтому нам нужно было написать свои собственные. Результатом этого стал полифилл Respond.js, исходный код которого открыт на Github.
БЛ: Каков был ваш подход к изображениям?
SJ: Мы хотели предоставлять мобильные изображения заранее, чтобы отвечать за пропускную способность при более медленных соединениях, но нам нужно было предоставлять изображения гораздо большего размера на устройствах с большими экранами. Мы разработали подход под названием «Адаптивные изображения», который позволил нам определять размер экрана и на больших экранах заменять изображение мобильного размера на изображение большего размера, не загружая и то, и другое.
Другой проблемой была реклама, поскольку многие сторонние рекламные сервисы не созданы с учетом гибких макетов, а их механизмы встраивания и количество выполняемых ими запросов могут быть довольно дорогостоящими с точки зрения производительности. В конце концов, мы разработали несколько шаблонов для динамической загрузки рекламы, чтобы они не блокировали загрузку контента сразу. Я думаю, что сторонние сервисы необходимо будет переосмыслить, чтобы приспособиться к тому, как будут создаваться веб-сайты в будущем.
БЛ: А как насчет старых браузеров IE / без JavaScript, таких как Opera Mini?
SJ: Мы потратили много времени, чтобы убедиться, что сайт был функциональным и приятным для использования без JavaScript, поскольку мобильный Интернет снова делает эту проблему еще более актуальной.
Браузеры Internet Explorer должны были быть полифильными для поддержки медиа-запросов. Помимо этого, у нас были случайные обходные пути CSS, специфичные для Internet Explorer, но ничего особенного.
Я считаю, что Opera Mini, как правило, довольно легко поддерживать, если вы создаете с прогрессивным улучшением: это отличный браузер с множеством оптимизаций производительности, и, конечно, он невероятно популярен, поэтому его поддержка не составляет труда.
Базовым браузером, который мы регулярно тестировали, был BlackBerry 4.6, который, как и большинство других браузеров, не поддерживающих медиа-запросы, использует базовые возможности без использования JavaScript. Кто-то прислал нам скриншот Глобус сайт работает на Ньютоне недавно!
