Rozeberme Apple.com

Apple.com redesignovalo přesně tak, jak dnes redesignuje každý. Po malých kouscích. Jo, nic moc se nezměnilo – kromě mírné proměny grafického stylu (viz hlavní navigace) přibylo pár fancy efektů – zkrátka a dobře v součtu považuji apple(.com) za praktickou ilustraci toho, jak by se měly věci dělat. A proto bych chtěl apple.com reverzně zinženýrovat a vyjmuté orgány nechat kolovat posluchárnou. A poté si o nich popovídat.

Kromě toho, doufám, že mi s tím pitváním pomůžete.

Orgány

1. Hlavní navigační pruh
   • ztěží postřehnutelné CSS3 gradienty na pravém a levém okraji
   • samotná tlačítka jsou (spritovaným) obrázkem. Nejsem si jist, jestli bych to nezkusil řešit pomocí CSS gradientů a stínů. Kvůli iPodům a iPhonům bude mít apple.com nezanedbatelnou část návštěvníků prohlížejících v Internet Exploreru. Takže asi ne. U jemných gradientů je samozřejmě situace jiná.
   • vizte příčky mezi tlačítky: border-image – opravdu malinký obrázek vložený přímo do CSS souboru (jako url(data:image/png;base64,etc))
   • a samozřejmě CSS transitions. A zdá se, že vyjmenovali všechny dostupné vendor-prefixy! :-)
2. úvodka má 750 KB a na iPhonu se zobrazí zrovna tak, jako v desktopovém prohlížeči. Neumím si dost dobře vysvětlit neexistenci mobilní verze anebo alespoň mobilního layoutu pomocí CSS media-queries a spíše mi to připadá jako zanedbávání určitého segmentu. Protože už kvůli datové velikosti bude UX při mobilním prohlížení… no, problematické.
3. pokud bychom byli důslední a HTML5 bychom na apple.com nehledali v CSS a JQ souborech, nevím, kolik bychom ho našli. Nevidím dál, než za doctype, konstrukce typu a > h4 + p a použití web storage. Vlastní atributy si vymýšlí, ale nevím proč je neprefixují s data-. V iTunes sekci naleznete známky WAI-ARIA.
4. border-radius a box-shadow jsou dnes klasika, zítra skoro retro :-)
5. nejzajímavější ze všeho mi přijde… tramtarará: načítání. Myslím, že postupné načítání stránky, načítání s vizuálními efekty pohybu a přechodu jsou zajímavá neprobádaná oblast – hlavně mám na mysli vliv takových efektů na vnímání stránky. Rád bych si s tím v blízké budoucnosti pohrál. (Zároveň se trochu obávám, že nebudu sám a čeká nás druhá vlna nevkusných, nesmyslných animací.)

   Neméně mě u řízeného vykreslování zajímá technické provedení. Bohužel, i tyto neutříděné myšlenky zapisuji s vtíravou představou na klienta, který čeká na slíbený návrh, takže tady bych doufal, že v kolaboračním duchu budete pokračovat v rozboru vy v komentářích.

Načítání mě tak zaujalo, že jsem si ho nahrál a pustím si ho ve smyčce před spaním. Enjoy.

V Safari

Ve FireFoxu 4

Doplnění 28. ledna

Screenshot stránky v IE 6 a v Safari 5. Navzdory technologické nesrovnatelnosti obou prohlížečů, výsledek je téměř totožný. Všimněte si zakulacených rohů a vnitřních stínů v Safari a také použití šumu (součástí obrázku na pozadí). Na obrázcích není vidět rozdíl v :hover stavu u čtveřice boxů (ani v IE 8 tento efekt není vidět, protože změněné pozadí je definováno CSS gradientem).

Detail stránky v 300% zvětšení, zleva: Safari a IE 6.

Plná velikost (PNG, 700 KB): Safari a IE 6

Vážně, teď prosím vy. Co se vám zdá inspirativní nebo alespoň pozoruhodné? Ať už z pohledu grafiky, UX nebo HTML5 (klidně v tom lidovém slovasmyslu :-). Doplňujte, rozšiřujte, opravujte, kritizujte, dovoleno je vše.