Ez egy összefoglaló bejegyzés a tervezési formákról és ezek kivitelezésében alkalmazható CSS technikai módszerekről.
TARTALOMJEGYZÉK:
Egy weboldaltól ma már alapelvárás, hogy jól kell kinéznie a telefonon, táblagépen vagy asztali számítógépen futó tetszőleges böngészőkben.
Ilyenkor a felhasználónak nem kell vízszintesen görgetnie a böngészés során, mert a tartalom úgy van megtervezve, hogy az folyékonyan, rugalmasan illeszkedjék bármely képernyő nézetablakának kijelzőjébe.
Mobilbarát tervezési formák, avagy reszponzív honlap készítése
A reszponzív és az adaptív alapú tervezési formák ugyanazon feladatok elvégzésére törekednek, azaz a tartalom lehető legoptimálisabb megjelenítésére az adott készüléken. Mindkét tervezési formának megvan a maga előnye és hátránya is.
Míg a reszponzív elven tervezett weboldal tartalma rugalmasan illeszkedik a rendelkezésre álló térhez, addig az adaptív kialakítás testreszabott megoldásokat kínál a különböző készülékekhez, mert több rögzített méretű tervvel dolgozik.
Reszponzív webdesign – RWD
A „Responsive Web Design” kifejezést először Ethan Marcotte webdesigner és fejlesztő hozta létre a Responsive Web Design című bejegyzésében 2010-ben. Ebből később könyv született ugyanezzel a címmel.
A modern reszponzív elrendezési technikák (responsive layouts), megkönnyítik a rugalmas vagy folyékony rácsok (fluid grid) létrehozását, melyek segítségével a weboldal tartalma rugalmasan tud reagálni a megjelenítendő felületre.
Responsive Layouts:
- >>> Flexible Box Layout (Flexbox)
- >>> CSS Grid Layout
- >>> Table Layout
- >>> Multiple Column Layout
Flexible box layout (Flexbox)
Ez az elrendezési módszer ideális az eltérő méretű elemek vagy egy sorba vagy egy oszlopba való elrendezésére, például hosszabb vagy rövidebb cikkek esetében, ha azt szeretnénk elérni, hogy azok kényelmesen illeszkedjenek egymás mellé. A flexbox használatáról jó leírást olvashatsz a CSS Tricks oldalán.
Grid layout
Lehetővé teszi a tartalom sorokban és oszlopokban történő elrendezését egy előre meghatározott rácsszerkezeten belül. A grid layout használatáról részletesebb leírást olvashatsz szintén a CSS Tricks oldalán.
A CSS grid layout-ok képezik az úgynevezett frameworks-ok, azaz keretrendszerek alapját. A legismertebb és leghasználtabb CSS grid layout a bootstrap. Itt olvasatsz a 2020-ban használt legjobb 15 framework-ről egy összehasonlítást.
× | 
× |
Table layout
Táblázatszerű elrendezési módszer nem táblázati elemekre.
Multiple-column layout
A CSS több oszlopos elrendezése lehetővé teszi a szövegek oszlopokba való elrendezését, akárcsak az újságokban.
Reszponzív képek és tipográfia
A tartalmak előre meghatározott rácsokba rendezése még nem elég egy weboldal reszponzív kialakításához. Ezeken kívül szükséges a képek és a tipográfia reszponzív kialakítása is. Ebben az esetben a képernyőméret változásával a szöveges tartalom betűmérete és a képek mérete is rugalmasan igazodnak a megjelenítendő felülethez.
Reszponzív elvű tervezés előnyei:
- ez a tervezési mód ugyanazt a HTML-kódot használja ugyanazon az URL-en, függetlenül a felhasználó eszközétől
- egységes design
- SEO barát
- olcsóbb és egyszerűbb karbantartás
Reszponzív elvű tervezés hátrányai:
- a nagyobb méret miatt lassabban töltődik be a weboldal
Adaptív webdesign – ADW
Az „Adaptive Web Design”-t 2011-ben vezette be Aaron Gustafson webdesigner az Adaptive Web Design című könyvében.
Az adaptív webdesign a webes tartalmak dinamikus kiszolgálását jelenti, ugyanazt az URL-t használja az eszköztől függetlenül, de eltérő HTML-kód verziót generál a különböző eszköztípusokhoz, azaz a weboldal több verzióját hozza létre.
Ezeket a verziókat, vagy elrendezéseket (adaptive layout) előre meghatározott képernyőfelbontásokra és méretekre tervezik. Amikor a webhely felismeri a rendelkezésre álló helyet, kiválasztja a képernyőhöz legmegfelelőbb elrendezést és azt jeleníti meg a felhasználónak.
Mikor használjuk?
Esetenként szükséges egy weboldal tartalmának megjelenítése egymástól extrém módon eltérő eszközökön is, a nagyképernyős tévéktől az okosórákig. Alapjába véve nem szerencsés, ha a tartalom egy része rejtve marad, mert az nem fért ki a képernyőre, de az természetes, ha nem ugyanaz a tartalom jelenik meg a TV és az okosóra képernyőjén.
Az adaptív elvű tervezés előnyei:
- készülékekhez igazodó design
- gyorsabb betöltődés a kisebb méretnek köszönhetően
Az adaptív elvű tervezés hátrányai:
- a bonyolultabb kivitelezés és a magasabb karbantartási igény megemeli a költségeket
- egy URL-t használ, de készülékektől függően több HTML kódot jelenít meg
- kihívást jelent a SEO számára
Önálló mobilra tervezés
Ez egy nem túl elterjedt tervezési forma, amelynek lényege, hogy egy weboldalnak készül egy külön, csak okostelefonokra szánt verziója, eltérő HTML kódot jelenít meg a mobil eszközön, külön URL-címen. Megpróbálja felismerni a felhasználói eszközt, majd átirányítja őt a megfelelő oldalra.
A weboldal mobil verzióját a böngésző URL-sávjában jelölik az “m.” előtaggal. Jó példa erre a wikipedia oldala:
További módszerek egy reszponzív honlap készítéséhez
Tervezési formától függetlenül egy reszponzív honlap készítésénél segítenek Media Query, azaz a töréspontok meghatározása, illetve a display, a position és a float tulajdonságok használata a html kód elemein.
Media Query
A Media Query lehetővé teszi a CSS stíluslapon belül feltételek és szabályok létrehozását, melyek megváltoztatják az oldal megjelenését. Amennyiben a feltétel bekövetkezik, a szabály érvénybe lép, és felülírja az előzőeket.
Egy weboldal reszponzív működéséhez töréspontokat adhatunk meg. Például, azt mondjuk, hogy a képernyő 768px szélessége alatt a képek legyenek 100% szélesek, ezáltal a képek kitöltik a teljes képernyő szélességét. Ha a nagy képernyőn addig több kép jelent meg egymás mellett, akkor ezt a szabályt írja felül az új Media Query és az adott felbontás alatt egy kép fog megjelenni.
A Media Query segítségével további különféle szabályokat hozhatunk létre: a felbontásra, a színekre, az egérrel kiváltott interakciók, mint a hover és a pointer, tulajdonságainak a szabályozására.
Ezen módszerek egyike sem elszigetelten történő felhasználásra lett tervezve, feladattól függően jól kombinálhatóak.
Tervezési formák a google szerint
Függetlenül a választott tervezési formától jelezni kell a Google-nak, ha egy oldal formázva van mobilra.
Figyelni kell rá, hogy a teljes tartalom feltérképezhető legyen a robotok számára. Ha a Googlebot nem fér hozzá egy oldal erőforrásaihoz, például a CSS-hez, a JavaScript-hez vagy a képekhez, akkor előfordulhat, hogy nem észleli, hogy az oldal „mobilbarát”, és ezért nem rangsorolja megfelelően a mobilkeresők számára.
A Google felhívja a figyelmet az általános hibákra is, mint az átirányítás, betű méret, hozzáférhetőség kis képernyőn, stb. Ha további részletek érdekelnek a témában, elolvashatod a Google Common mistakes című cikkét.
A Google a reszponzív alapú tervezést ajánlja, mert ez a legegyszerűbb tervezési minta, úgy a megvalósításban, mint a későbbi folyamatos karbantartásban.
Források: Kulturbanause, Interaction Design Foundation
Google, Mozilla, www.w3.org
