Az alábbi oldal responsive?

A responsive oldalakon általában %-ban vagy em értékben van minden megadva. Ez viszont nem jelenti azt, hogy ne lehetne pixel fix értékeket használni.

A responsive lényege, hogy minden kijelzőn megfelelően jelenik meg, nem lesz túl nagy vagy túl kicsi semmi. De ettől még lehet, hogy egyik kijelzőn van egy kis keret, máshol meg nincs, mert pl. 5 különböző fix szélességet használ.

A reszponzív szó maga érzékenységet, befolyásolhatóságot, irányíthatóságot jelent:

latin: re- (vissza) + szpondeo (szól) → latin: respondeo (felel) → latin: responsivus (válaszoló) → angol: responsive (igazodó, válaszoló) → magyar: reszponzív.

A reszponzivitás tehát annyit jelent, hogy a weboldal elrendezése, kinézete, bizonyos szempontból a működése alkalmazkodik a kijelző méretéhez, szélességéhez, ettől függően máshogy, máshol jelennek meg rajta bizonyos elemek.

Ha valaki pusztán minden méretet százalékosan ad meg, az ennek a legprimitívebb, és általában a legkevésbé célravezető megoldása. Pl. van egy honlap, van egy 20%-os szélességű oldalsáv, a maradék 80%-ban meg mondjuk termékek vannak felsorolva négyhasábos elrendezésben. Ez FullHD, meg még 1024*768-as felbontásban még úgy talán rendben is van. De egy mobil álló nézetben, ahol 480 pixel a szélesség egy 96 pixeles oldalsávnak – ha még a belső margót (padding) is hozzávesszük – nem sok értelme van.

A másik út, ha a szerver vagy a kliens felismeri, hogy mobiltelefonról nézik az oldalt, és átvált egy mobil nézetre. De ilyenkor sokszor maga a HTML tartalma is más. Ezt nem igazán lehet reszponzív dizájnnak nevezni, már csak azért sem, mert hiába látja úgy a szerver, hogy asztali gépről böngészel, ha a böngésző ablaka van kisebb méretre állítva.

Sokkal gyakoribb, hogy ugyanúgy fix méretekkel dolgozik valaki, de a képernyő szélességétől függően módosítja, hogy egy többhasábos elrendezés hány hasábból is álljon, megjelenjen-e az oldalsáv, vagy azt valahová máshova helyezi, ha nincs elég hely, hogy bizonyos felbontás felett egy menü vízszintes menü, kisebb felbontásnál meg egy menü gomb van helyette. Pl.:

- Nagyobb képernyőn négyhasábos elrendezés + oldalsáv

- Kisebb képernyőn háromhasábos elrendezés + oldalsáv

- Kisebb képernyőn háromhasábos elrendezés + nincs oldalsáv

- Még kisebb képernyőn kéthasábos elrendezés

- Még kisebb képernyőn meg egyhasábos elrendezés

A lényeg, hogy az adott képernyőn mindig a lehető legtöbb, legrelevánsabb információ jelenjen meg, ne legyen se túlzsúfolt, nagyítóval is alig látható betűméret, de ne legyenek alföldnyi méretű üres helyek sem.

~ ~ ~

Az általad beidézett oldal abszolút ebbe a kategóriába tartozik.

- Van egy elrendezés 1200 pixelnél szélesebb képernyőre (fix szélesség, bal oldalsáv, 4 hasábos terméklista)

- Van egy elrendezés 992 és 1200 pixel között (fix szélesség, bal oldalsáv, 3 hasábos terméklista)

- Van egy elrendezés 768 és 991 pixel között (fix szélesség, oldalsáv helyett menü gomb, 3 hasábos terméklista)

- Van egy elrendezés 768 pixel alatt (100%-os szélesség, menü gomb, 2 hasábos terméklista)

- Van egy elrendezés 480 pixel alatt (100%-os szélesség, menü gomb, 1 hasábos terméklista)

Reszponzív? Azaz ugyanannak a HTML tartalomnak a böngészőablak átméretezésével alkalmazkodik a megjelenítése a szélességhez az oldal újratöltése nélkül? Igen.