KODÉR.BLOG

Jak jsem Jerrymu kódoval portfolko

09 Dec 2013

Hele, budou tam obrázky, mohlo by být “retina ready”, musí to běžet na mobilech / tabletech, chci to dost cool s nějakýma animacema a na nějaký IE do detailu kašleme. Pohoda ne? Jasně Jiřino! Takže takhle nějak na úvod. A dopadlo to takhle: www.jerrytvrdek.com

Když prvně přemýšlíš...

a pak teprve začneš kódovat. Layout je prostej HTML5 doctype, tzn. nějaký header, section, article... elementy, k tomu X nadpisů úrovně H1 na jedné stránce (však to znáš). Aby tohle běželo i v IE, tak je tam modernizr, který je ještě doplněn o detekci: podpory inline SVG a zda je zařízení typu “touch” (důvod proč tohle, bude dále). Samotné CSS jsou psané v LESSu, kde responsive má asi 15 “breakpointů“, protože jednak jsem to chtěl mít vážně perfektní a jednak u webu tohohle typu je prostě potřeba nejen přizpůsobovat na šířku, ale i výšku device a k tomu je ještě potřeba knihovna respond.js, tak aby tahle všechna práce běžela i na IE (jen si dej pozor na “min-height” a “max-height”, protože na IE bez úpravy samotné JS knihovny nefungují). Pro javascript používám jQuery a poslední “přidaná” hodnota je mobiledetect.net ale o tom až dále.

Aby to i vypadalo

Pro všechny prohlížeče a zařízení zobrazuju ikonky v SVG (přece jen mnohem větší % prohlížečů je s podporou SVG a poté modernizrem udělám detect, když neumí “serviruju” PNG), co šlo tak mi Jirka připravil jako sprite (abych ušetřil nějaký ten request, určitě by to šlo ještě lépe, ale maličko jsme spěchali, takže až bude nějaký update :)
Co nešlo jako SVG, tak je jako větší obrázek, který resizuju podle nadřazeného elementu. Netuším jak je “neprůstřelné” nebo jak moc dobré řešení to je, ale obrázek co se má resizovat, má classu “bg”. Tak abych si nemusel “tahat” informace o rozměru daného obrázku přímo z něho, tak každý obsahuje atributy “data-width” a “data-height” , kde jsou jeho originálení velikosti a tím si myslím, že udělám mnohem rychlejší přizpůsobení pro dané rozlišení aniž bych čekal, než se načte.
Texty / nadpisy / popisky, které se zobrazují “na hover”, se musí na devicech zobrazit rovnou, proto už jednou zmíněný modernizr a detekce touche, takže třeba na HP se zobrazují díky tomu popisy reference rovnou, není to 100%, ale nám to stačí.

Mobilujeme

Jeden ze způsobů, jak můžu zrychlit načítání stránky na mobilu, je osekáním počtu requestů, proto na back-endu, pomocí zmíněné PHP knihovny “mobile detect”, zjišťuji zda se jedná o mobil a pokud ano, tak na HP dávám pryč, jak pravý sloupec s About, tak se seznamem referencí (který dávám stejným způsobem pryč i na detailu samotné reference). Tzn. linky v hlavičce mají URL s kotvou na zástupný element, např..: “#about” (jako element v dokumentu Vs. “.about” jako panel), kde po kliknutí na odkaz všude kromě mobilu se zobrazí pravý sloupec, ale pokud v dokumentu není, tak po kliknutí “skočím” na div s daným ID. Pro jistotu kromě detekce, zda je div s panelem v dokumentu (např.: $('.about').length), si zjišťuji, zda je i šířka větší než 540px, pokud ne, tak se sice určitému % (vlastně jen těm, které nezdetekuje PHP knihovna jako mobil a nebo těm co mají tablet užší než 540px) užvatelů načtou i obrázky a zbytečnosti z panelů, ale fungovat jim to bude i tak správně. Určitě se dalo něco podobného udělat i pro tablety, ale přece jen si pořád myslím / doufám, že většina na něm chodí spíše na wi-fi a očekávání s tabletem je přece jen větší!

Bugujeme!

Co mě opravdu překvapilo, byla nejnovější verze Firefoxa na OSX (tuším verze 24 / 25), ve které buguje rotate, takže font ve hlavičce, který je natočen, způsoboval pád Firefoxa. Takže jsem udělal rychlej fix pouze pro FF a na browserhacks.com našel:

body:not(:-moz-handler-blocked)

Prostě jen rychlej fix, kde místo rotace textu, dávám už natočený SVG, protože je to FIX pouze pro FF, a ten SVG umí.

Závěrem

Vlatně úplně jednoduchej malej web, plnej obrázků, různých animací a věcí, který jsem si mohl udělat podle sebe a toho jak si myslím, že by to mělo fungovat, vypadat a hlavně jakej by měl být takovej “rozumnej základ” webu.
Samozřejmě by to šlo posunout ještě dál a hrát si s kdejakým detailem, ale to by takhle šlo do nekonečna, jako např. panely posouvat pomocí 3D transition, nezkoušet je posouvat pod hlavičkou, ale odsouvat “s ní”, lazyloading, a pár dalších animací a fičurek, který Jiřině zase časem ukážu a uvidíme co na to řekne :)
Důvod proč tohle dělám je hlavně ten, že jsem si mohl zkusit něco nového, o čem jsem věděl, ale ještě nebyla příležitost, protože nejen, že by to žádný klient nezaplatil, ale hlavně ani neocenil. A do budoucna vím zase o trošku víc co si můžu při “stavbě” (nejen) nového Socialbakers webu, dovolit, a kde si s tímhle můžeme hrát, ale o tom až třeba příště.
Díky za jakýkoliv komentář, připomínku, dotaz a nebo (pokud se ti článek líbil) sdílení. Uděláš mi radost!
Jo a kdyby jsi měl zájem něco taky super cool nakódovat, tak se ozvi na mail, né že bych měl hafo času, ale zajímavou výzvu nebo pěkný web udělám rád.

Sdílet:

comments powered by Disqus