4. eloadas Flashcards
(29 cards)
Responsive Web Design
RWD
-A képernyő (böngésző ablak) szélességére reagáló, rugalmasan változó grafikai megjelenésű weblapnak a terve
-Azért is van a design kiemelve, tehát a terv, mert a weblap tartalma a grafikai megjelenéstől függetlenül és változatlanul elérhető.
Ethan Marcotte 2011
A responsive tervezés lényege
A weboldal automatikusan alkalmazkodik a felhasználó eszközének képernyőméretéhez
RWD ELŐNYEI
- Időtakarékos, mert egy tartalmat csak egyszer kell feldolgozni.
- Keresőbarát, mert csak egyetlen HTML kódot generál.
- Jobb teljesítményű, mert mobilon, tableten, netbookon, laptopon vagy PC-n, HD TV-n is veszteségmentes és esztétikus megjelenést biztosít.
- Szélesebb körű böngésző támogatás. Nem kell eltérő rendszerekhez eltérő programkódot használni.
- Más megoldásokkal szemben jóval költséghatékonyabb.
- A Google támogatja, ezért SEO-előnyt is jelent.
A RESPONSIVE TERVEZÉS KORLÁTAI
A technika nem jelent mindenre megoldást; nagyobb oldalaknál gyakran célszerűbb mobilverziót készíteni. Mivel még új, akadnak hibák is – ezek közül a legnagyobb gondot a képek mérete okozza.
RESZPONZÍV WEBDESIGN
- A reszponzív webdesign egy rugalmas rácsrendszeren alapul, amely automatikusan alkalmazkodik a különböző képernyőméretekhez.
-Egyetlen weboldal működik minden eszközön, legyen az mobil, tablet vagy asztali gép. SEO szempontból is előnyös, mert a Google kifejezetten támogatja.
ADAPTÍVDIZÁJN
Az adaptív dizájn ezzel szemben több, külön előre megtervezett verziót használ – például külön oldalt mobilra, tabletre, monitorra.
Ez lehetővé teszi az eszközökre szabott pontosabb megjelenítést és gyakran gyorsabb betöltést is.
Mire jó a reszponzív webdesign?
Reszponzív dizájn:
Ideális információs oldalakhoz, márkaépítéshez, ahol fontos az egységes megjelenés minden eszközön. Egyetlen oldal méreteződik át automatikusan. Google-barát és könnyebb karbantartani.
Mire jó az adaptív dizájn?
Akkor jó, ha az oldal funkciója erősen eszközfüggő – pl. webalkalmazások, játékok, mobil appok esetén. Több külön verzió készül, az adott eszközre optimalizálva, gyorsabb betöltéssel és jobb élménnyel.
RWD VS Adaptiv, Mikor melyiket?
Kisebb költségvetésnél, tartalomközpontú oldalhoz: reszponzív.
Komplex, funkciógazdag webalkalmazásokhoz, nagy cégeknél: adaptív.
Kombinált megoldás is lehetséges: alapvetően reszponzív, de bizonyos elemek adaptívan működnek (pl. képek, videók).
RWD- HOGYAN?
Csak HTML és CSS Nem program, vagy Javascript!!!
RWD összetevői
3 összetevőre bontható, ezek pedig
- a folyékony rácsszerkezet (fluid grid),
- a média lekérdezések (Media Queries)
- a folyékony média (fluid media)
Folyékony rácsszerkezet
- a reszponzív design egyik alapja. A fix (pixeles) méretek helyett százalékos arányokat használ, így az oldal elemei rugalmasan igazodnak a képernyőmérethez.
Folyékony rácsszerkezet lényege
Az elemek méretét a szülőelem méretéhez viszonyítva adjuk meg.
Alapképlet:
(aktuális elem pixelben / befoglaló elem pixelben) × 100 = elem szélessége %
Folyékony rácsszerkezet előnye
Rugalmas és jól alkalmazkodik különböző képernyőkhöz.
Pontos szerkezet is elérhető vele, nem csak “szemre”.
Folyékony rácsszerkezet gyakori keretrendszerek
Népszerű keretrendszerek:
Bootstrap
Foundation
Skeleton
Ezek megkönnyítik a rácsalapú elrendezések kialakítását és könnyen testreszabhatók.
Médialekérdezések (Media Queries)
A Media Query nem más, mint egy megfelelő helyzetre vonatkozó formázás.
@media screen and (max-width: 500px) {
body {
background-color: lightgreen;
}
}
Ez a szabály csak akkor lép életbe, ha a képernyő 500 pixelnél kisebb.
Médiatulajdonságok
A médialekérdezések feltételeit ezekkel adjuk meg. Ilyenek például:
width – a viewport szélessége
height – a viewport magassága
min-width, max-width – minimum vagy maximum szélesség
orientation – fekvő (landscape) vagy álló (portrait) tájolás
TÖRÉSPONTOK
A töréspontok azok a képernyőszélességek (px), ahol a weboldal megváltoztatja a megjelenését a különböző eszközökhöz igazodva. Ezekhez médialekérdezéseket használunk.
Általános töréspontok (pl. Bootstrap 5-ben):
A töréspontokat szabadon meghatározhatjuk, de érdemes figyelembe venni a leggyakrabban használt eszközméreteket.
576px – kis eszközök (mobilok)
768px – közepes eszközök (tabletek)
992px – nagyobb eszközök (kis laptopok)
1200px – nagy eszközök (asztali gépek)
1400px – extra nagy kijelzők (pl. 4K monitorok)
Folyékony média (rugalmas képek, videók)
A folyékony média azt jelenti, hogy a képek és videók alkalmazkodnak a kijelző méretéhez – ez a reszponzív webdesign kulcseleme.
Miért fontos a Folyékony média?
A fix méretek nem működnek jól minden eszközön.
A túl nagy felbontású kép lassítja az oldal betöltését, főleg mobilon.
Kisebb eszközökön nincs értelme nagy képeket megjeleníteni – csak helyet és sávszélességet pazarol.
A Viewport
A viewport a weboldal látható területe a böngészőben – mobilon ez a képernyő mérete. Ha nem állítjuk be megfelelően, az oldal nem fog jól megjelenni kisebb eszközökön, még akkor sem, ha reszponzívra van tervezve.
A Viewport probléma:
Mobilon az oldal úgy jelenik meg, mintha nagy képernyőre készült volna, mert a böngésző alapértelmezetten “kinagyítja” az oldalt.
Viewport meta tag
<meta></meta>
Ez azt mondja a böngészőnek:
A nézetablak szélessége egyezzen meg az eszköz szélességével.
Az oldal alap nagyítása 1 (100%).
