Mit jelent a reszponzív webdesign?
Archív bejegyzés, szerkesztett tartalommal
A reszponzív webdesign a képernyő méretéhez és az elérhető helyhez igazítja az elrendezést. Ugyanaz a tartalom másképp rendeződhet telefonon, táblagépen és nagy monitoron, hogy minden eszközön olvasható és használható maradjon.
Nem pusztán egy lekicsinyített asztali oldal
A merev szélességű oldal mobilon apró szöveget, vízszintes görgetést vagy állandó nagyítást eredményezhet. A rugalmas rendszerben az oszlopok átrendeződnek, a képek arányt tartanak, és a gombok érintéssel is elérhetők. A külön mobiloldal bizonyos helyzetekben indokolt lehet, de többletkarbantartást és gondos tartalmi összehangolást igényel. A legtöbb bemutatkozó oldalnál egy közös, jól felépített reszponzív változat praktikusabb.
Valódi eszközökön ellenőrizd
Nézd meg a menüt, a hosszú címsorokat és az űrlapot kis kijelzőn, álló és fekvő helyzetben. Próbáld ki a billentyűzetes használatot és a nagyított szöveget is. A PageSpeed Insights hasznos teljesítményadatokat adhat, de a pontszám nem helyettesíti a használhatósági ellenőrzést, és önmagában nem magyarázza a látogatottságot. A cél, hogy minden eszközön jól használható legyen az oldal; nem kell minden kijelzőn milliméterre ugyanúgy kinéznie.
- Nagy kijelző: A rendelkezésre álló tér engedhet egymás melletti oszlopokat, ha a szöveghasáb jól olvasható marad.
- Köztes méret: Az elemek közötti kapcsolatot a tartalomhoz igazítva kell megőrizni, nem csak két szélső képméretben.
- Mobil: Az oszlopok sorba rendeződhetnek, miközben az olvasási sorrend és a fontos műveletek továbbra is elérhetők.
Tartalomhoz válassz töréspontot
A töréspont nem egy konkrét telefonmodell neve, hanem az a helyzet, amikor az elrendezés már nem működik kényelmesen. Két oszlop addig maradhat egymás mellett, amíg a szöveg és a kép is használható méretű. Ha a bekezdés túl keskeny vagy a gomb nem fér el, érdemes átrendezni a kompozíciót. A hosszú német szöveg vagy egy nagyobb betűbeállítás hamarabb hozhatja el ezt a pontot. Ezért a reszponzív tervezést nem lehet néhány népszerű kijelző pontos méretére leszűkíteni; a köztes szélességeket is vizsgálni kell.
A képek ne veszítsék el a lényegüket
Egy széles nyitókép mobilon más kivágást kívánhat. A fókuszpontot úgy válaszd, hogy az arc, a termék vagy a fontos grafikai részlet megmaradjon. Az aránytartó vágás és az aránytartó teljes megjelenítés két eltérő döntés: egy dokumentumképnél a teljes tartalom lehet fontos, egy hangulati háttérnél a kitöltés. Ha a képen olvasható felirat szerepel, külön ellenőrizd a kis méretet. A megfelelő képváltozat és az ésszerű fájlméret a mobilos élményt is javíthatja, miközben nagy monitoron nem kell pixeles előnézetet használni.
Képkivágás a tartalomhoz igazítva.
- Széles nézet: A kép és a szöveg együtt kapjon megfelelő helyet.
- Mobilnézet: A fontos képrészlet maradjon látható.
- Dokumentumkép: A teljes tartalom fontosabb lehet a kitöltésnél.
Nemcsak a szélesség változik
A telefonos böngésző felső és alsó kezelősávjai, a felugró billentyűzet és a fekvő tájolás is befolyásolja az elérhető területet. Egy teljes képernyős panel ne vágja le a hosszabb szöveget vagy az űrlap végét. A kötött magasság helyett sok helyzetben a minimális magasság és a természetes görgetés jobb megoldás. Próbáld ki a legfontosabb műveleteket valódi gépeléssel: a fókuszált mező maradjon látható, a gomb legyen elérhető, és a hibaüzenet ne ugorjon a kijelzőn kívülre.
Egy rövid ellenőrzési forgatókönyv
Nyisd meg a főoldalt, keress egy szolgáltatást, olvass el egy referenciát és küldj egy tesztűrlapot. Ugyanezt végezd el kis mobilon, közepes kijelzőn és nagy monitoron. Ellenőrizd a billentyűzetes fókuszt, a nagyított szöveget és a csökkentett mozgás beállítását. A tartalmi sorrend legyen logikus akkor is, amikor az oszlopok egymás alá kerülnek. Ha mobilon egyszerűen eltűnik a fontos információ, az nem jó reszponzív megoldás. Az átrendezés feladata a hozzáférés megőrzése, nem a problémás tartalom elrejtése.