Веб-сайт CDS, созданный собственными силами Пола Льюиса, показал, как создать отличный мобильный веб-интерфейс для посетителей конференции.
За кулисами
Примечательна плавность работы сайта в различных мобильных браузерах. Он наилучшим образом использует циклы макетирования и отрисовки браузера.
Используются новые функции веб-платформы
- Сервисный работник
- Манифест
- Цвет темы
Узоры
- Расходные карты
- Адаптивная сетка
- Материальный дизайн
Исходный код
Интервью
Разработка
Когда Пол приступил к созданию сайта, ключевым приоритетом было внедрение прогрессивного улучшения . Вместо того, чтобы проектировать для настольных компьютеров, он сначала создавал его для маленьких экранов, а затем доводил до больших экранов — постепенно улучшая, а не изящно ухудшая. Это потребовало множества медиа-запросов, но также и достаточной свободы для наблюдения за небольшими изменениями между ключевыми точками останова. Отслеживание размеров экрана давало ему представление о том, где контент может сломаться, и он мог быстро это исправить.
Еще одним важным аспектом PE является максимальная обратная совместимость. Пол предпочел использовать float вместо Flexbox, потому что чувствовал, что это увеличит количество браузеров, в которых будет работать сайт. Для конкретной планировки сайта это оказалось вообще не проблема. Если бы ему понадобился Flexbox, он бы использовал PE, чтобы добавить его.
Основной проблемой сайта была функция раскрытия и свертывания карточек, что потребовало продумывания совершенно нового способа работы с анимацией. Пол придумал стратегию, которую он назвал FLIP , которая предполагает приведение элементов анимации в их конечное состояние . Отсюда вы применяете удобные для компоновщика свойства, такие как преобразования и непрозрачность, чтобы инвертировать изменения и вернуть элемент в исходное положение. Наконец, после этого включите переходы при трансформациях и непрозрачности и удалите эти изменения. Это заставляет элементы снова переместиться в свои конечные позиции! Пол признает, что это немного неожиданно, но работает очень хорошо и повышает производительность.
Производительность
Зная Пола Льюиса как гуру производительности, я не удивился, узнав, что мощность была очень важным фактором при создании сайта. Он в значительной степени полагался на WebPageTest , чтобы получить как можно меньшее значение индекса скорости . Без встраивания YouTube Полу удалось получить число менее 1000 по кабельному соединению , а это означало, что большинство пользователей получили первоначальный рендер менее чем за секунду .
Большая часть работы по достижению этой цели была проделана в задачах Grunt по максимально возможному объединению, минимизации и сжатию изображений. Сайт также откладывает второстепенные изображения до загрузки страницы, чтобы реальный контент отображался на экране быстрее.
Чтобы еще больше ускорить загрузку страницы, Пол подключил сервисного работника . С его помощью, независимо от того, находитесь ли вы в сети или нет, посещение страницы может обслуживаться из кеша, гарантируя, что вы получите доступ к контенту даже при нестабильном соединении (чрезвычайно важно во время конференции по Wi-Fi!). Сайт CDS — один из первых производственных сайтов, использующих новую функцию, из-за которой Пол столкнулся с рядом «проблем раннего внедрения», но огромный прирост производительности, по его словам, компенсировал это. Фактически, теперь он использует его на каждом создаваемом им сайте!
Производительность, конечно, зависит не только от того, насколько хорошо загружается сайт, но и от того, насколько хорошо он работает. Пол знал, что анимация будет сложной задачей, поэтому он придумал FLIP . Кроме того, он приложил все усилия, чтобы ничто не мешало сенсорному вводу или прокрутке. Несмотря на то, что сайт не очень сложный, для сборки он применил модифицированную методологию RAIL (на самом деле ему не требовалось много простоя), и это очень помогло!
Дизайн
Поскольку сайт был создан одним человеком, это означало, что Пол был одновременно дизайнером и разработчиком проекта, что привело к беспрецедентному уровню понимания проблем друг друга в двух «командах». Ему нравится проектировать рабочий стол вниз (в противоположность прогрессивному улучшению, которое он использовал во время разработки), потому что это дает ему представление о том, что должно быть включено в проект. После этого Пол переходит к мобильному представлению, что позволяет ему значительно уточнить ситуацию и убедиться, что самым важным вещам уделяется наибольшее внимание. Это затем влияет на версию для настольных компьютеров, поскольку информационная архитектура и приоритеты неизбежно будут нуждаться в обновлении.
Не все прошло гладко. В рекомендациях по материальному дизайну в то время не было четкого описания того, как создать содержательный сайт, поэтому были области, в которых он терпел неудачу. В дизайне также не удалось учесть связь между расписанием и информацией о сеансе, и, в конечном итоге, UX означал, что люди будут просматривать расписание и расстраиваться из-за того, что не могут сразу перейти к информации о сеансе.
При этом я думаю, что Пол проделал огромную работу по переносу спецификации Material Design на контент-сайт. и я очень доволен визуальными эффектами и движением. В нем чувствуется уникальное ощущение Material Design, а информация и внешний вид способствуют взаимодействию и иерархии.
Успех
- Успешно выпустил весь сайт на Github ( > 200 звезд ), чтобы он послужил шаблоном и источником вдохновения для веб-разработчиков .
- Включены новейшие и лучшие возможности веб-платформы: сервис-воркер, веб-манифест и динамические цвета темы . Конечный эффект — это то, что действительно интегрировано с платформой при запуске на устройствах Android. Если его добавить на главный экран пользователя, оно будет очень похоже на приложение, которое он будет использовать, и это действительно здорово.
- ~73,7 тыс. просмотров страниц, 180 тыс. кликов по подразделам сайта означали, что люди действительно использовали его и взаимодействовали с ним, гораздо больше, чем ожидалось.
В общем, это отличное вдохновение для сегодняшних веб-разработчиков и очень успешный веб-сайт конференции.