HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Webáruház optimalizálása mobil eszközökre


É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>     
...