В этой статье мы немного покопаемся во внутренностях официального сайта компании 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, естественно на ресурсе с миллионными посещениями все выверено до мелочей, но если покопаться, к чему придраться найти можно)…
Читайте полный обзор на нашем сайте.