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
- 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 (jakourl(data:image/png;base64,etc)) - a samozřejmě CSS transitions. A zdá se, že vyjmenovali všechny dostupné vendor-prefixy! :-)
ú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é.- 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 + pa použití web storage. Vlastní atributy si vymýšlí, ale nevím proč je neprefixují sdata-. V iTunes sekci naleznete známky WAI-ARIA. border-radiusabox-shadowjsou dnes klasika, zítra skoro retro :-)- 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.