Reszponzív weboldal készítéskor az egyik legfontosabb lépés a média-lekérdezések (media query-k) és a breakpoint stratégiák gondos megtervezése. Ha Terézvárosban dolgozol egy helyi kávézó, galéria vagy éppen egy utcaképet bemutató portál fejlesztésén, érdemes már a tervezés korai szakaszában tisztázni, milyen képernyőszélességekre optimalizálsz, és hogyan osztod fel a tartalmat.
Először is dönts arról, hogy milyen készülékekről szeretnél „célba találni”. A mai okostelefonok 320–480 pixel közötti szélességgel indulnak, a tabletek 600–800 pixelig mennek, majd jönnek a laptopok és asztali gépek majdnem teljes szélessége, 1024 pixeltől felfelé. Ezek az értékek csak iránymutatók: a konkrét projekted tartalmának függvényében érdemes elmozdulni akár 480-ról 540-re, ha például egy alkalmazáskép-sorozatnál látod, hogy 500 pixelen még zsúfolt a sor.
Breakpoint stratégiákból két népszerű megközelítés létezik: a device-first és a content-first (tartalomközpontú) módszer. Az előbbi a jellemző készülékspecifikációkból indul ki, beállítod a töréspontokat a mobil, tablet és asztali méretekhez. A tartalomközpontú viszont azt vizsgálja, hol törik össze a design: például a gomb túl nagy, a kép túl kicsi vagy a szöveg olvashatatlanná válik. Én Teréz körúti irodámban ennél jobban kedvelem a tartalomközpontú megközelítést, mert így sosem marad „rosszul skálázódó” elem.
A tényleges média-lekérdezéseket így írnám meg: először alapértelmezésben mobilbarát stílusokkal kezded a CSS-t (mobile first), majd a @media (min-width: 600px) vagy (min-width: 800px) blokkban finomhangolod a tablet, illetve asztali nézetet. Így biztos lehetsz benne, hogy alapból mindenki kap egy használható, letisztult felületet, és csak nagyobb képernyőn „épülnek fel” extra oszlopok, nagyobb margók, plusz navigációs elemek.
Végezetül érdemes tesztelni a terézvárosi kávézók Wi-Fi-jén, de otthoni chrome devtoolsban, valós iPhone-on és Androidon is. Így biztosan gördülékeny, gyors és esztétikus honlapot kapsz, ami minden helyzetben megállja a helyét. Jó tervezést!