Обзор сайта apple.com

20 ноября 2018

В этой статье мы немного покопаемся во внутренностях официального сайта компании Apple — www.apple.com, посмотрим интересные особенности сайта, применяемые технологии и фишки. Все заметки по сайту актуальны на момент выпуска статьи.

Минимальная ширина сайта составляет 320 пикселей, что соответствует ширине iPhone первой модели — классическое разрешение 320х480.

Максимальная ширина сайта ограничивающая контент это 2560 пикселей, что является разрешением по ширине обычного 27’’ iMac или половина ширины версии с ретина-дисплеем. Таким образом сайт apple.com будет хорошо смотреться на всех продуктах компании. Тем не менее стили отдельных блоков сайта прописаны до сумасшедшего разрешения 1442000 пикселей!

По скриптам в исходниках найдены отсылки к jQuery, да библиотека популярная и упрощает работу во многом, но разве не в силах были купертиновцы по красоте написать все на чистом vanillajs?

Теперь немного подробнее по блокам сайта:

Шапка

Фиксированная шапка сайта, элементы меню расставлены по технологии flexbox с распределением по ширине рабочей области в 1000 пикселей, полупрозрачный фон шапки задан черным цветом с прозрачностью 20%.

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

Ссылки меню при наведении курсора получают полупрозрачность 65% со скоростью анимации в две десятые секунды, шрифт ссылок имитируется с помощью векторных изображений в формате svg.

Элементы ссылок меню имеют свойство clip с параметрами в 1 пиксель для эффекта схлопывания внутрь, который воспроизводится при открытии панели поиска.

Контент

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

Элементы контента со светло-серым фоном (98% белый цвет) разделены между собой отступами полностью белого цвета созданными с помощью свойства толщины рамки элемента.

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

Подвал

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

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

Что имеем в итоге по сайту apple, естественно на ресурсе с миллионными посещениями все выверено до мелочей, но если покопаться, к чему придраться найти можно)…