Érzékeny web design - Responsive web design (RWD)
Az okos telefonok és táblagépek elterjedése új kihívás elé állítja a honlapkészítőket és web designereket. Már nem elegendő csak a monitorok egyre növekvő felbontásához igazítani egy honlap megjelenését, de élvezhető külsőt kell biztosítani a webhelyet mobil eszközön meglátogató felhasználók számára is.
A mobil eszközök speciális tulajdonságai:
- Kis képernyőfelbontás
- Esetenként kis átviteli sebesség
- A letöltött tartalom mennyiségével arányos költségek
Megoldási lehetőségek:
1. Készíthetünk külön honlapot az okos telefonok és külön honlapot az asztali számítógépek számára.
- Ekkor ügyelni kell arra, hogy a keresők büntetik a duplikált tartalmakat.
- Érdemes elolvasni a Google webmesterek számára készített a keresőoptimalizálás alapjait bemutató kis összefoglalóját: Google Keresőmotor-optimalizálási útmutató kezdőknek
2. Készíthetünk egyetlen honlapot, amelynek megjelenítését CSS3 segítségével igazítjuk a megjelenítő eszközhöz illetve annak felbontásához.
Ehhez segítséget többek között itt találunk: Google Webmaster Central Blog
Példa felbontástól függő stílusdeklarációkra:
Forráskód
<style>
...
@media screen and (min-width:1601px) {
/* Stílusok nagyon széles képernyőre */
}
@media screen and (min-width:801px) and (max-width:1600px) {
/* Stílusok átlagos képernyőre */
}
@media screen and (min-width:480px) and (max-width:800px) {
/* Stílusok mobilra, táblagépre, keskeny képernyőre */
}
@media screen and (max-width:479px) {
/* Stílusok mobilra */
}
</style>
...