A mobilbarát megjelenés a mai interneten nem opcionális, hanem kritikus. Az embereknek legalább 50%-a mobilon böngészik az internetet, ezért az oldalt mobilra kell optimalizálni.
Responsive design alapok
Az alábbiak a responsive design alapvető elemeei:
- Viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - Flexible layout: Százalékos szélességek helyett pixel helyett
- Media queries: Különböző képernyőméretek számára különböző stílusok
Mobilbarát tipográfia
A szöveg mérete mobilon alkalmazkodni kell:
- Fejléc: Legalább 20 px
- Normál szöveg: Legalább 16 px
- Sor magas: Legalább 1.5
Nyomtatási méretek
Az alábbiak az ajánlott nyomtatási méretek:
- Mobil telefonok: 320-480 px
- Táblagépek: 768-1024 px
- Laptopok/Asztali gépek: 1025 px+
Mobil navigáció
A mobil navigáció az alábbiak alapján tervezendő:
- Hamburger menü: Három vízszintes vonal ikon
- Kereső funkció: Könnyen elérhető keresés
- Érintési célpontok: Legalább 48×48 px
Kép optimalizálása mobil eszközökre
A képeknek mobil készülékekre kell optimalizálva lenni:
- Responsive képek:
<img srcset="image-small.jpg 480w, image-large.jpg 1200w"> - Lazy loading:
<img loading="lazy" src="image.jpg">
A mobilbarát design biztosítja, hogy az oldal minden eszközön jól néz ki és könnyen használható.