A megújult Plastik (3. rész) – Ethan Marcotte

Bajára mentem eFihez. Be volt már készítve a laptopomra az új fejléc, a retina dizájn, egy keynote prezentáción gondolkodtam. Úgy számoltam, hogy egy kiscsoportos előadás keretén belül megpattintom az új koncepciót. Ez azonban két okból is nehéznek bizonyult: először is rettenet módon spiccesre ittam magam, így moonwalk stílusban léptem a kisház színpadára (amit kétszer is meg kellett sajnos ismételnem), másrészt nem volt projektorom sem. Ettől függetlenül ismertettem a blog új dizájnját.

A reszponzív weblapkészítést, mint kifejezést Ethan Marcotte vetette papírra egy 2010-es List Apart publikációban. Marcotte itt kifejti, hogy – nagy túlzásokkal – a jó weblap olyan, ami minden böngészőméretben, így telefonon, deszkán és monitoron is jól néz ki. Ha megnyitjuk az általa készített minta lapot és elkezdjük átméretezni, látjuk, hogy a viewport kicsinyítésével és nagyításával tökéletes nézetet kapunk. (Marcotte itt még nem vette figyelembe természetesen a retinás felbontásokat, ami ennek a kiterjesztése dupla pixelsűrűségre. Most abba se mennék bele, hogy mikor tökéletes a reszponzivitás – ezek erős, vizsgálódásunkat érdemben nem érintő szakmai kérdések.)

Nekem is ilyesmi volt a fejemben: egy olyan Plastik WordPress felület, ami adaptálódik a viewportra. A célom az volt, hogy legyen egy olyan méretű állapot, mint maga a böngésző, utána egy iPad (~tábla), végül iPhone (~mobil). Mindenhol ugyanazt a látványt kapja az olvasó, függetlenül attól, hol nézi. (A webdizájn korábbi vívmánya, hogy ott, ahol nincs CSS, például egy 1996-os Netscape böngészőben, szépen degradálódik az egész szövegesre. Ezt ma már adottságnak tekintjük, erre nem is térek ki.)

Wyctim HTML keretrendszer választása a 960.gs. Ebben gyakorlatilag egy 1024-es nézetet kapunk 940 képpont hasznos résszel. Ebbe gyönyörűen elfér 700 képpontnyi tartalmi hasáb, a maradékot pedig a jobb hasábnak tudjuk fenntartani – ide kerülnek majd a twittek, kereső form, egyéb apró információk. Több szempontból is jól jön ki ez az egész: először is az iPad álló módban (ahogy a legtöbben webezünk) 768 képpontot rak ki (még retinán is, hiszen ezek logikai képpontok), így pontosan elfér benne az új, 700 képpontra méretezett tartalmi hasáb. Ha elfordítjuk, akkor 1024 képpont szélességünk van, tehát a teljes méretet két hasábbal ki tudjuk rakni. Össze is állt a modell:

1. nézet – web
2. nézet – iPad álló (768 px)
3. nézet – iPad fekvő (1024 px, gyakorlatilag azonos a webes nézettel)
4. nézet – iPhone álló
5. nézet – iPhone fekvő (ez ugyanaz, mint az előző, csak nagyobb fonttal)

Gyorsan hozzá kell tennem, hogy ez a típusú reszponzív weblap nem az igazi. Marcotte ugyanis olyan struktúrát javasol, ami minden méretre egyformán adaptálódik, méreteződik (flexible grid). A mienk fix szélességű, így inkább “herélt reszponzív weblapnak” hívnám legőszintébben. Ettől függetlenül egy kellemes köztes állapot és megfelel a céljainknak.

Le is adaptáltam gyorsan a fejlécet különféle nézetekre.

1. iPad álló (vegyük észre, hogy eltűnik a jobb hasáb):

2. iPad fekvő (megjelenik a jobb hasáb):

3. iPhone álló (szintén eltűnik a hasáb, a logó is degradálódik egyszavasra):

Ha méretezni kezdjük az ablakot, ezek a nézetek szépen ugrálnak dinamikusan. Akkor is jól működik, ha az iPadet forgatjuk, eltűnik, illetve megjelenik a jobb hasáb. De ami még ennél is jobb: mindig olyan nézetben és úgy kapjuk meg a weboldalt, ahogy a készítő elképzelte. Nem kell zoomolgatni, mozgatni, betöltjük és mindig jó (ez az “észrevehetetlen” rész – aki nem weblapkészítő, nem is látja, mi történik a háttérben).

Innentől már nem is volt másra szükség, mint az egészet implementálni.

(Folytatjuk…)