top of page

A reszponzív webdesign tervezésről röviden

Ma már az internetes forgalom több mint 50%-a mobilon zajlik, így ha a weboldalad nem néz ki jól telefonon, az olyan, mintha a boltod ajtajának a felét befalaznád. A reszponzivitás nem lehetőség, hanem napjainkban már alapkövetelmény.


Bemutatom neked hét mréföldkő vagy vezérpillér mentén, hogyan tudod Te is reszponzívvá tenni a weboldalakat a tervezés során.


1. "Mobile-first" szemlélet


A mobile-first szemlélet lényege, hogy először nem asztali méretre tervezünk, amit aztán megpróbálunk "összenyomni", hanem a legkisebb képernyővel kezdünk és onnan bővítünk. Ha ott működik a tartalom, könnyebb lesz bővíteni, mint fordítva.


Ezzel szemben be kell vallanom, nekem redukálni mindig könnyebb, mint bővíteni. Én általában nagyobb felületből indulok és onnan "tördelem" az elemeket egy reszponzív nézetté, így én ebben szabad kezet adnék minden hozzám hasonló gondolkodású személynek.


2. Fluid rácsrendszer (grid)


Felejtsd el a fix pixelszélességeket (pl. 800px), használj inkább százalékokat! Így az elemek rugalmasan alkalmazkodnak majd a képernyő szélességéhez.


3. Rugalmas képek és média


A képeidnek is idomulniuk kell a reszponzív nézethez is, itt is a titok a pixelek és a százalékok közti különbségben vannak. A CSS-ben a max-width: 100%; a legjobb barátod, ez megakadályozza, hogy a képek "kilógjanak" a telefon kijelzőjéről.


4. Breakpointok (töréspontok) tudatos használata


Határozd meg azokat a szélességeket, ahol a design szerkezete megváltozik (pl. a 12 hasábos elrendezésből 8 hasábos lesz)! Így mindig lesz egy adott pont, ahol megváltozik a nézet egésze, addig viszont zsugorodás lesz csak látható a képernyőn. Az is fontos, hogy ne eszközökhöz (pl.: iPhone 15 képernyő), hanem tartalomhoz igazítsd a töréspontokat!


5. Érintésbarát navigáció


Ami egérrel könnyű (például rákattintani apró linkekre), az ujjal sokszor lehetetlen. A gombok legyenek minimum 44x44 pixel nagyságúak, és hagyj köztük elég helyet, hogy elkerüld a félrekattintást!


6. Olvashatóság és tipográfia


Mobil kijelzőn a betűméret kritikus pont. Ami desktopon jól néz ki, az mobilon lehet, hogy túl kicsi vagy túl nagy. Használj relatív egységeket, hogy a szöveg skálázható legyen minden felületen!


7. Tesztelés, tesztelés, tesztelés!


Ne csak a böngésződ átméretezésével tesztelj, használj valódi eszközöket, vagy olyan emulátorokat, amik szimulálják a különböző operációs rendszerek viselkedését! Minden esetben próbáld ki több eszközön, több operációs rendszeren, több monitoron a látványt, mielőtt továbbadnád fejlesztésre.


A reszponzív design egy befektetés a felhasználói élménybe és a Google rangsorolásba is. Te ellenőrizted már a weboldaladad mobilról és tabletről is?



Ne feledd: A profi design tanulható! 


Ha szeretnéd szisztematikusan elsajátítani a logótervezés és a design alapjait, nézz körül az aktuális kurzus kínálatunkban, ahol a hibák elkerülése mellett a sikeres tervezés lépéseit is megtanulhatod!


Induló tervezőgrafika kurzusaink: https://www.feketefeherlany.com/grafika-kurzus

Online havidíjas grafikai tananyagaink: https://www.feketefeherlany.com/pricing-plans/list



Tetszett a poszt? 


Ha úgy érzed, más vállalkozónak vagy kezdő grafikusnak is hasznos lehet ez az 5 tipp, kérlek, oszd meg! Minden megosztás egy lépés afelé, hogy eljussunk azokhoz az emberekhez, akiknek egy megértő kreatívipari közegre, oktatásra, ránk van szüksége!


Profi dizájnokban gazdag hetet kívánunk!


A Feketefehérlány csapata


Comments

bottom of page