Egy reszponzív oldal ugyanazzal a tartalommal és ugyanazon a címen működik minden eszközön, csak az elrendezése változik. Ami asztali gépen több oszlopban áll egymás mellett, az telefonon egymás alá kerül, a menü egy gomb mögé húzódik, a képek pedig a képernyő szélességéhez igazodnak.
A reszponzív működés úgynevezett töréspontokra épül. Ezek azok a képernyőszélességek, ahol az elrendezés átvált, például ahol a több oszlopból kettő, majd egy lesz. A töréspontokat a tartalomhoz igazítjuk, és nem egy-egy konkrét készülékhez, mert a telefonok és a tabletek mérete folyamatosan változik.
A látogatók nagy része ma telefonról érkezik, sok oldalon a többségük. Ezért a tervezést gyakran a mobilos nézettel kezdjük, mert ott derül ki a legélesebben, mi a fontos, és mi az, ami nyugodtan hátrébb kerülhet.
Mitől jó egy mobilos nézet
- A legfontosabb információ és a fő gomb az első képernyőn látszik
- A gombok és a linkek ujjal is kényelmesen eltalálhatók
- A szöveg nagyítás nélkül is olvasható
- Az űrlapok a megfelelő billentyűzetet hozzák fel, számot a telefonszámhoz, e-mailt az e-mail-címhez
A képeknél is figyelünk a méretre. Telefonra kisebb, gyorsabban betöltődő változat kerül, mint asztali gépre, és ahol kell, a kép kivágása is más, hogy a fontos részlet kis képernyőn is látszódjon. A gyors betöltés mobilon különösen számít, mert a lassú oldalt a látogatók hamar elhagyják.
Egy jó reszponzív terv azt is eldönti, mi kerüljön hátrébb mobilon. Egy hosszú táblázat telefonon kártyákká alakulhat, egy összetett szűrő pedig egy külön panelbe kerülhet, amely csak akkor nyílik ki, amikor a látogatónak szüksége van rá.
A tervekben ezért a fő oldalakból mobilos változat is készül, és a köztes méretekre is megadjuk, hogyan viselkedjenek az elemek. Így a fejlesztőnek nem kell találgatnia, mi történjen egy tableten vagy egy kisebb laptopon.
A mobilos élmény a keresőben is számít, mert a Google az oldalak mobilos változatát veszi alapul, amikor feldolgozza és rangsorolja őket.
