Reszponzív weboldal

A reszponzív weboldal ugyanazt a tartalmat mutatja minden eszközön, csak más elrendezésben. Nem külön mobiloldal készül: a CSS a képernyő szélessége szerint rendezi át az elemeket — az asztali három hasáb telefonon egymás alá kerül.

Hogyan működik

A stíluslapban töréspontok vannak: szélesség-határok, ahol az elrendezés vált. Egy tipikus oldalon három ilyen van — asztali, tablet és telefon.

A jó reszponzív terv nem az asztali nézetből kicsinyít, hanem a legszűkebb változattal kezd, és felfelé bővít. Így az kerül be, ami tényleg fontos: kis képernyőn nincs hely a díszítésre, tehát a lényeg marad.

Ez a sorrend egyben tartalmi fegyelem is. Ami mobilon nem fér el, arról érdemes eldönteni, kell-e egyáltalán.

Hol szokott elromlani

Tünet	Tipikus ok	Javítás
Vízszintes görgetés	Fix szélességű elem vagy nagy kép	Rugalmas méret, maximális szélesség korláttal
Táblázat kilóg	A táblázat nem tördelhető	Saját görgetődoboz a táblázat köré
Menü nem nyílik	A mobil menü szkriptje hibás	Valódi eszközön tesztelés
Szöveg a képre csúszik	Fix magasságú szakasz	Tartalomhoz igazodó magasság
Ár- vagy kártyarács szétesik	Túl szűk befoglaló doboz	A rács szélességi korlátjának ellenőrzése

Mit ellenőrizz átadás előtt

Öt gyors próba, ami a hibák többségét kiszűri:

Görgess vízszintesen telefonon minden aloldalon. Ha bármelyik mozdul, van kilógó elem.

Forgasd el a telefont. Fekvő nézetben gyakran más törik el.

Nagyíts kétszeresére. A gyengébben látó látogatók így használják az oldalt.

Nézd meg sötét módban — ha a stíluslap nem számolt vele, olvashatatlan szövegek jelenhetnek meg.

Töltsd ki az űrlapot valódi telefonon, valódi adattal.

Gyakori kérdések

Mi a különbség a reszponzív és a mobilbarát között?

A reszponzív a megvalósítás módja, a mobilbarát az eredmény. Egy rosszul megvalósított reszponzív oldal is lehet mobilon használhatatlan.

Mi az a töréspont?

Az a képernyőszélesség, ahol az elrendezés vált — például ahol a három hasáb kettőre, majd egyre csökken.

Lassabb a reszponzív oldal?

Nem ettől lassú. A sebességet a képek mérete, a szkriptek száma és a kiszolgáló válaszideje határozza meg.

Kell külön tablet-nézet?

Külön változat nem, de érdemes megnézni: a köztes szélességeknél gyakoribb, hogy szétesik az elrendezés.

Mit jelent a „mobile first” tervezés?

Azt, hogy a legszűkebb képernyővel kezdesz, és onnan bővítesz felfelé. Ez tartalmi fegyelmet is ad: ami mobilon nem fér el, arról ki kell mondani, kell-e egyáltalán.

Mit tegyek, ha a régi sablonom nem reszponzív?

Rövid távon a legfontosabb aloldalak külön javítása is segít, de tartósan sablonváltás a megoldás. Csere előtt viszont mentsd az URL-szerkezetet, és ha változik, irányítsd át a régi címeket.