Новий сайт Apple зміни та програмна реалізація
На цьому тижні Apple представила не тільки новий iPhone і розумний годинник, а й оновлений сайт. Генеральний директор студії Uprock Євген Кузьмін написав для ЦП матеріал про те, що саме змінилося порівняно із попередньою версією ресурсу компанії.
Під час довгоочікуваної презентації нових пристроїв Apple офіційний сайт працював із перебоями. Як і слід очікувати, відбувалося його повне оновлення. Знаючи, як ретельно Apple ставиться до деталей і загальної стилістики своїх продуктів, логічно порівняти стару і нову версію сайту, щоб простежити деякі дизайн-тренди.
Перехід на «плоский» дизайн
В першу чергу впадає в око перероблена навігаційна панель, розтягнута на всю ширину браузера і поява нового розділу Watch. Тепер панель не має тих відблисків і градієнта, які ми бачили в старій версії, і вона краще поєднується (візуально перегукується) з новим «плоським» дизайном в iOS 7 і OS X Yosemite. Можливо, надалі й операційні системи очікує остаточний перехід у бік «плоського» дизайну.
Порівняння старого та нового меню
Також було скасовано меню для пошуку: натомість просто кнопка з піктограмою, яка при натисканні роз'їжджається.
Два варіанти пошуку (згори новий варіант: розкритий під час кліку)
Фон сторінок тепер білий або сірий, а блоки без обведення. Зовнішній вигляд став чистішим і легким для сприйняття, залишаючись таким же охайним, як і раніше.
Мобільна версія сайту
Зрештою, з'явилася повноцінна мобільна версія сайту. Загалом, у дизайні відчувається підхід 'mobile-first'. Картинки та шрифти стали більшими, елементи вирівняні по центру. Весь сайт підготували до «адаптивної» верстки, кожна сторінка складається зскладових блоків та легко перебудовується під розмір екрану. Але варто зауважити, що використовується імітація адаптивної верстки, тому що кожна сторінка генерується на сервері окремо для конкретного пристрою.
Для навігації використовують так званий «гамбургер», який іноді можна побачити і на десктопних сайтах. На мобільних пристроях він стає елементом «де-факто».
Загалом, помітна зміна політики у бік мобільного та адаптивного дизайну, хоча вибір роздільної здатності екранів нових пристроїв (640x1136, 1334x750 та 1920x1080) і вводить у деякий ступор своєю нелогічністю.
Редизайн головної сторінки
Логічно, що повну переробку зазнала головна сторінка, оскільки оновлення сайту було присвячене виходу нового покоління пристроїв. Рішення зі слайдером здається спірним з огляду на те, що він не показав себе на практиці досить ефективним (зазвичай користувачі не заходять далі за другий слайд). Зважаючи на все, завдання полягало в тому, щоб приділити максимальну увагу iPhone 6 і 6 Plus, і це рішення добре поєднується з мобільною версією, де не так принципово, використовується горизонтальний або вертикальний скрол.
Нова головна сторінка
Стара головна сторінка
Сторінки продуктів
Сторінки із пристроями зберегли загальну структуру. А ось сторінки з докладним описом нових продуктів насичені сучасними візуальними ефектами, але в той же час зберігають мінімальну естетику, властиву всьому сайту. Є сильний акцент на великі фотографії, переваги та емоційну складову продукції.
Apple Store та системні сторінки
Значним перетворенням зазнали внутрішні сторінки, які мають функціональний характер. Зміни також торкнулися пріоритетів - фокусзмістився на нові продукти. А додаткові системні сторінки лише трохи змінили свою функціональність, враховуючи результати досліджень поведінки користувачів та їх потреб.
Програмна реалізація
Вивчивши вздовж та впоперек нову версію сайту, цікаво було подивитися на її технічну реалізацію. На жаль, можливості заглянути в серверну частину немає, але загальні висновки щодо клієнтської частини все ж таки можна зробити (аналіз JS, на жаль, неможливий, тому що пройшов мініфікацію).
Реалізація сайту щодо консервативна, формування сторінок відбувається, як і раніше, на сервері, а не на клієнті (браузері користувача). Підхід до структурування css/html неакуратний в наступному: є надмірність коду (ось яскравий приклад), абстрактна логіка в найменуваннях змінних і зневага до CSS-успадкування. Можливо, в цьому є логіка (БЕМ), але якщо дотримуватися такого принципу, то добрим рішенням буде перенести всі абстрактні змінні з HTML у стилі.
Також поганим тоном є використання HTML-структур для забезпечення зовнішнього вигляду, і, звичайно ж, використання обробників (наприклад, кліка) всередині HTML-елементів.
З основних змін варто виділити повний перехід на «плоский» та адаптивний дизайн. Інші нововведення стосуються «продуктової» складової та відповідають стратегічним цілям компанії, які досягаються за рахунок грамотно розставлених пріоритетів. Сайт Apple принципово не змінюється з 2000 року, що говорить про грамотне проектування та акцентування на важливих завданнях.
Сайт Apple є показовим прикладом грамотно спроектованого інтерфейсу, який протягом свого життя зберігає структуру. Усі зміни зберігають приймальність, відповідають актуальним трендам тапродуктам, що просуваються.
Насамкінець, презентація з прикладами всіх версій сайту Apple з 1997 року: