Az elrendezés képlet (14:53)

Mértékegységek a webdesignban:

  • Abszolút mértékegység: pixel
  • Relatív mértékegység: VH (view of height), százalék

Abszolút mértékegység: az adott érték minden különböző eszközön, monitoron, tableten vagy telefonon, ugyanakkora. Ez a gyakorlatban azt jelenti, hogy amit a monitoron normál méretűnek lesz, az a mobilon óriási lesz, ez pedig nem praktikus reszponzivitás szempontjából.

Relatív mértékegység: a viszonyítási alaptól függ a nagysága, így reszponzivitás szempontjából jobb vele dolgozni, hiszen hasonlóan fog kinézni mobilon és monitoron is az elrendezés ugyanannál az értéknél. A hátránya, hogy nem tudsz megadni egy pontos értéket, mert a végeredmény a látogató eszközétől függ.

Mit használjunk?

  • Pixelnél tökéletesen azt fogod kapni, amit tervezel, konzisztensen ugyanazokat az értékeket tudod használni, viszont pluszban figyelni kell reszponzivitás szempontjából a kisebb kijelzőkre is.
  • %-os megoldásnál ritkábban kell figyelni a kijelző méretekre, mert ott arányaiban hasonló eredményt fogsz kapni, így gyorsabban lehet haladni. Ebben az esetben viszont szinte lehetetlen következetes designt elérni, sokkal inkább hasraütés szerű lesz a weboldalad.
  • VH esetében ha pont teljes képernyőnyi vagy meghatározott arányú szakaszt szeretnél és megvan a tartalom is, akkor jól tud működni, de ez szokta a legtöbbször megbonyolítani a dolgokat.

Pixelt a pontos, konzisztens, profi munkához ajánljuk, a százalékot pedig a gyorsabb, de kicsit elnagyoltabb munkákhoz.

Elrendezés képlet

Az oldalaid készítése során az lesz a cél, hogy a margóknál és belső margóknál csak bizonyos értékeket használj, ezek pedig:
0, 10, 20, 40, 80, 160

Miért jó elrendezés képlettel dolgozni?

  • nem hasraütésszerűek lesznek az értékeid
  • ha design próbálgatsz, jelentősebb lesz a különbség a 2 lépcső között

Pár design szabály:

  • minden új szakasznak adj belső margónak jobb és bal oldalra 20-20 pixelt.
  • az oszlopaidnak is adj meg belső margót, mindenhol 20 pixelt
  • a felső és alsó belső margók legyenek ugyanazok. Érdemes a számsorunkból választani
  • válaszd szét a szakaszokat a háttér színének változtatásával
  • legyenek ugyanolyan méretűek az oszlopok