KODÉR.BLOG

Stavíme (ne)jen responsivní (ne)jen retina web - obrázky

17 Feb 2013

Co je retina displej, proč ho nejen kodéři “řeší” a že jsou nějaké možností jako 2x větší obrázky nebo křivky atd. asi všichní ví, protože takové články vychází 3x do týdne. Tento článek se nebude týkat všech možností, ale spíše jen shrnutí toho nejzajímavějšího a tak nějak celkově mého názoru a pohledu, který nenutím, ale o tom až dále.

PNG Vs. SVG na život a na smrt (IE8)

O tom že se dělají tzv. sprite asi víte (pokud ne, tak: jakýkoliv dotaz na server ke stažení obrázku, CSS, JS je “drahý” a je jich málo, proto se CSS minifikuje, JS knihovny se načítají z nějakých CDN a obrázky se dávají “dohromady” v jeden společný) dříve se připravoval ve Photoshopu, exportovat do formátu PNG a obsahoval většinou šipky, piktogramy, ikonky... dnes ho většina lidí dělá v Ilustrátoru, kvůli práci s křivkama a výsledný výstup exportuje do: SVG - http://prostor.erasvet.cz/img/sprite.svg a PNG - http://prostor.erasvet.cz/img/sprite.png (jen ukázka z jednoho webu, který jsem nedávno dělal). Pokud se podíváme na podporu SVG formátu: http://caniuse.com/#search=inline%20svg tak je asi hned jasné proč musíme připravovat i PNG verzi. Jednoduchou detekci já osobně provádím modernizrem: http://modernizr.com/download/ kde si vygeneruju vždy “čistý” build a zapnu si detekci “Inline SVG” v sekci “Misc.”. Poté pokud prohlížeč umí SVG dává na tag classu “inlinesvg”, pokud ale naopak neumí, tak dává “no-inlinesvg” (tohle asi skoro každý ví, jen doplňuju pro celkový “obraz” mého způsobu práce). Takže poté na celém webu načítám SVG sprite, protože prostě podpora pro něj je mnohem větší a když daný prohlížeč neumí, tak mu uvedenou detekcí “servíruju” PNG, takže uživatel stáhne jak SVG, tak i PNG. Prostě jednoduché, snadné a pro kdejaké drobnosti a detaily, které je možné udělat ve křivkách naprosto dostačující řešení, ALE pak zde máme pár věcí, které nemusí každý “překousnout” a nebo mu to rozpočet “nedovoluje”. Jako třeba:

Šipka 100x jinak

Kdo už kódoval nebo se staral o větší projekt, tak určitě narazil na to, že grafik použil třeba stejnou šipku, vždy jinak velkou a k tomu ještě jinak barevnou, kdybych je měl dělat pomocí zmíněného způsobu SVG + PNG, tak mi vznikne seznam, klidně 10x se opakující šipky, která vždy vypadá trošku jinak a nejen, že to prostě “otravuje” postupně je tam pod sebe všechny přidávat a poté v CSS pozicovat, kde se nachází, když je to přece “pořád stejná šipka”, ale také to neskutečně zdržuje a je to práce otravná a navíc a mě osobně moc nebaví. Naštěstí zde máme font-face a v dnešní době všelijakých aplikací vznikla jedna http://icomoon.io/app/ do které stačí buď nahrát jednotlivé SVG prvky, nahrát celý ikonkový font a vybrat si jen ikonky které potřebujete a nebo použít ty, které už aplikace má připravené http://icomoon.io/app/#library Po výběru nebo nahrání objektů už stačí jen kliknout na tlačítko “Font” dole na stránce a přejít k “pojmenování” znaků a celého fontu pod položkou “Preferences”. Poté už jen “Download” a font si do stránky vložit, jenže to by nebylo to pravé kódování kdyby i zde nevzniknul problém, (z mého pohled) problém číslo jedna je Windows Phone, kde prohlížeč neumí font-face (a určitě nejen on: http://caniuse.com/#search=font-face) tím pádem šipku, piktogram nebo prostě cokoliv co děláte fontem, nezobrazí a finišuje to tím, že ani sám Modernizr neumí bezpečně detektovat přítomnost font-face viz. https://github.com/Modernizr/Modernizr/issues/538
Prostě je to pěkné řešení a neskutečně se mi líbí a sám jsem ho zkusil použít na svém portfoliu a poté na: http://ancymonic.com jen říkám: bacha! Každopádně tuto možnost nezavrhuju a sám teď v SYMBIU zkouším jeden web připravit jak s font-face tak sprite SVG + PNG :)

Proč né a proč ano @2x

Neboli, pokud mám na webu bitmap obrázek ve velikosti 200x200px a chci, aby byl pěkný i na retina displeji, tak ho uložím ve velikosti 400x400px (sice to nebude znamenat 2x tolik dat) a poté ho budu resizovat přímo na webu do velikosti 200x200px, když vypustím kdejaké “testovače” rychlosti připojení k internetu, kdy nějaký script pošle testovací packet a podle rychlosti stažení dává větší nebo menší obrázky (třeba seznam.cz, idnes...), tak mu to bude na mobilním internetu trvat déle, proto: v první řadě se mi osobně nelíbí ty “data”, sice se bude jednat web od webu, protože pochybuju, že na web pojišťovny si sjednávat havarijní pojištění asi nebude nikdo, kdo spěchá na šalinu (sorry tramvaj), ale zase web nějaké galerie nebo agentůry, kam jdu právě na schůzku se reálně dívat mohu, proto někomu kdo bude v “horní dolní” něco hledat na mobilním internetu na iPadu a já mu budu předkládat 2x větší obrázky jen kvůli “zážitku” mi příjde trošku masochystický... pak tu prý máme více jak 60% uživatelů (říkal to apsoň Jakub Španihel), kteří brouzdají doma u TV nebo v posteli na domácí wi-fi síti a ti si zase “zaslouží” mít zážitek, osobně nevím co je “zlo” a co “dobro” u této metody, je to spíše hodně na zamyšlení, každopádně jak je to se stahováním obrázků a jeho “přepisováním” pomocí CSS a kdy a v jakém prihlížeči se daný obrázek nestahuje, doporučuju kdo nezná, tento článek: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ kde je naprosto vyčerpávajícím způsobem ukázáno, jak se dá jednoduše odstraňovat dle rozlišení, tedy podle media queries tedy i podle toho zda má nebo nemá retina displej, obrázek který se má nebo nemá stahovat.

Uffff, tak zase někdy jindy

V ryhlosti jsem shrnul co mě v posledních pár týdnech / měsících trápí a co osobně řeším s jakýmkoliv obrázkem, který má být na stránce. Snad byl článek přínosem a dokázal aspoň někoho správně “nakopnout” a zkusit o tom víc přemýšlet. Budu rád za sdílení a případný komentář, názor nebo reakci, buď přímo sem pod článek a nebo na Facebook stránce: https://www.facebook.com/r4ms3s.cz. Díky :)

Sdílet:

comments powered by Disqus