markusbird

Hiszed, vagy sem, fejlődik a web standard a vektorgrafikus képek megjelenítésének irányába. Rajzolj egy vektoros képet, exportáld ki SVG-ként, majd ágyazd be, akárcsak egy képet.

Sajnos még nem minden böngésző által támogatott (például az IE utóbbi verziói nem jelenítik meg), de azért jó látni, hogy haladunk.

Az alábbit én rajzoltam Google Drive-ban, a Drawing eszköztárban. Kattintásra megnyílik az eredeti vektoros változat, ahol látható, hogy bármekkorára is nagyítjuk a böngészőablakot, vagy bármilyen közelre zoomolunk, a minőség változatlan, a szélek élesek maradnak. A fájl mérete pedig nevetséges 13 KB.

Nem csak pici a fájl mérete raszteres képekéhez képest, de még a kép felbontásán sem kell aggódni. Mindíg tökéletes lesz, hiszen a helyi készülék rendereli megadott koordináták alapján. Ez viszont rendesen igénybe veheti a hardvert egy bonyolult kép esetében. Az átmenetek, az átlátszóság vagy a túl sok különálló elem megterhelheti a gyengébb mobilokat. Mondjuk mire elterjedt web standard lesz ebből, addigra ez nem fog igazán számítani.

UPDATE: közben próbálgattam különböző böngészőkben és készüléleken. Valamelyik széthúzza, valamelyik nem jeleníti meg. Ezt még ne használjátok élesben, de mondom, erre haladunk!

Az előző posztban kicsit aggódtam, hogy a renderelés is beleszámít a Google által fontosnak ítélt Page Speed-be. Ez így is van, tehát Page Speed = szerver előkészítési idő + letöltési idő + renderelési idő. Ez rendben is van, viszont ami igazán aggasztott, hogy a CSS3 effektek igen sok kliens oldali renderelést igényelnek. Kicsit körülnéztem és ezt mondják az internetek:

• nem szabad elszállni az effektekkel. Például ha árnyékolunk, akkor azt azért tegyük, hogy kiemeljünk vagy elkülönítsünk egy tartalomrészt, mintsem a vicc kedvéért. Ugyanígy gondoljuk meg az átlátszóságot, átmeneteket és figyeljünk a felhasználói élményre.
• még mindig jobban járunk így, mintha képfájlokkal helyettesítenénk az effekteket, amiknek a letöltési ideje hosszabb, illetve ezeket is le kell renderelni

Szóval nincs itt nagy veszély, ha nem szállunk el.

A mod_pagespeed egy olyan, Google által ápolt optimalizáló eszköz, ami az oldal struktúrájának megváltoztatása nélkül is hatásosan csökkenti az oldal letöltési idejét. Ez persze nem jelenti azt, hogy a munka során nem kell figyelnünk az oldal méretére és a felesleges dolgok kigyomlálására. (Ráadásul ez nekem új, hogy a renderelési idő is mérvadó, nem csak a letöltési. Ezek szerint ésszel kell használni a CSS3 speciális effektjeit és a vizuálisabb jellegű JavaScript-eket. De ezzel kapcsolatban még nyomozni fogok.)

A cucc maga egy Apache modul, amit a nagyobb szever szolgáltatók alaból kínálnak. Csupán a .htaccess fájlt kell némileg módosítani, azaz a következőt hozzáadni (ez szolgáltatónként változhat!).

<IfModule pagespeed_module>
   ModPagespeed on
   ModPagespeedEnableFilters extend_cache
</IfModule>

Persze ez csak akkor érvényes, ha meggyőződtünk róla, hogy a hosting szolgáltatás valóban integrálta ezt. Ha saját szervered van és szeretnéd ezt integrálni, természetesen az is lehetséges, de ehhez mélyebbre kell ásni.

Mondhatod, hogy leszarod az oldal letöltési idejét, mert néhány tizedmásodpercnyi különbség nem mérvadó, csakhogy a Google ezt is figyelembe veszi a rankingnél. Megéri ezzel pár percet foglalkozni.

A teljes lista itt található, de kiemelném az érdekesebb és várva várt funkciókat, amiket weboldalainkon hasznosíthatunk:

• remote debugging: azaz mobilon vagy tableten megnyithatjuk oldalunkat, majd az ahhoz szinkronizált asztali eszközről kikereshetünk egy kérdéses elemet. A mobil eszközön az elem felvillan, azaz kiderül például, hogy mi miatt esik szét a layout. Gondolom visszafelé is működik, azaz megtudhatjuk egy elem nevét, így a kódban könnyedén hivatkozhatunk rá. Sosem használtam még ilyet, de elvileg Android is megtudja csinálni Chrome-mal karöltve.
• <input type = "file"/>: na ez már nagyon kellett. Ez a kódocska feljogosítja a böngészőt, hogy elküldjön a galériába, ahol képet vagy videót választhatunk ki feltöltésre. Nem kell többé külsős szoftver ehhez. Lassan oda is eljutunk, hogy nem kell hazaszaladni a géphez egy önéletrajz elküldéséhez.
• Smart App Banner: nagyon Apple cucc, amivel könnyedén  meginvitálhatod a látogatót, hogy töltse le az oldal App verzióját, már ha van neked ilyen Store-ban. Nem tudom, hogy működik, de úgy néz ki, hogy egy standard kinézetű bannert ágyaz be, a megfelelő App ikonnal és leírással ellátva. Gondolom lesz majd valami egyedi kód, amit a többi böngésző figyelmen kívül hagy.
• Web Audio API: mivel nincs Flash, ezért illett már meglépni. Habár maga a specifikáció a még nem kiforrott a W3C részéről.
• CSS filters: a készüléken helyileg renderelt speciális képi effekteket teszi lehetővé. Lesz itt minden. Homályosítás, árnyékok, szépia. Elvileg pár sornyi kóddal instagramosíthatod az oldalad minden egyes fotóját, jee!

Van még pár dolog, de azok közül is a legtöbb csak arról szól, hogy az Apple behozza, amivel a világweb mögött lemaradt az utolsó update óta.

Reszposzív oldalak tesztelésére a legkézenfekvőbb módszer a böngészőablak méretének változtatása. Ez nem teljesen bomba-biztos de általában kielégítő megoldás. Aztán persze érhet meglepetés, ha megnyitod az oldalt egy másik eszközön.

A Responsivator egy olyan gitHub project, illetve eszköz, ami a kérésedre kinyomja neked ugyanazt az oldalt különböző méretekben. Az előre meghatározott arányok népszerű készülékeken alapulnak (Pl.: iPhone, iPad, Nexus 7 stb.). Hozzá kell tennem, szerintem nem annyira ajánlatos készülékekből kiindulva tervezni. Egyszerűen ott határozzunk meg egy töréspontot, ahol az összenyomott elemek vizuálisan vagy funkcióban gyengélkedni kezdenek. Referenciának viszont remek, ha így meg tudjuk nézni az oldalt pár másodperc alatt.

Persze ha lehetőség van rá, teszteljük az oldalt minél több valódi készüléken és büngészőben, mivel - a méret kérdésen kívül is - másképp renderelhetnek a különböző böngésző motorok. Tipikus reszponszív probléma, amibe bele lehet futni, hogy elsőre jól renderel az oldal, de mégis enged jobbra vagy balra navigálni a készülék, mert van valamilyen rejtett margin vagy elem a fő kontenten kívül, viszont ezt az extra helyet nem minden böngésző tartja fenn, tehát tervezéskor lehet, hogy nem veszed észre. Ilyenkor kemény Inspect Element vagy Firebug mazsolázás jöhet segítségül.