Vége a szép időknek, amikor egy weboldalt elég volt 1024x768-ra tervezni, ma már érzékelhető forgalom érkezik mobil eszközökről. Erre az első válasz a mobil változatok megjelenése volt, de ez szerintem nem elég, nem így kellene. A Media2Radio-val már két hónapja kísérletezünk egy másik megközelítéssel.
A következő problémáim vannak a "klasszikus" mobil változatokkal:
A Media2Radio egy "klasszikus" elrendezésű weboldal, ezekből a részekből áll: fő tartalom, kiegészítő tartalom, navigáció, fejléc és lábléc. A fő és kiegészítő tartalom alkotja az oldal "törzsét", két oszlopban. A kiegészítő tartalomban vannak a keresztbeajánlások és egyéb kevésbé fontos "bizbaszok", a fejléc szerepe leginkább az, hogy szép legyen, a lábléc pedig azért van, hogy "ne lógjon az oldal a levegőben", és oda tettünk néhány kevésbe fontos navigációs elemet is.
Első lépésként érdemes a fentiek szerint felosztani a tartalmat, mert egyből nyilvánvalóvá válik, hogy mit kell a mobilos részből kidobni: a kiegészítő részt és a fejlécet. A mobilos megjelenés a navigációval kezd, ami lehetőleg csak néhány pontból álljon, senki nem fog 6-7 elemnél több lehetőségben böngészgetni, nem kényelmes. A tartalmi részben minden rugalmas szélességű legyen, így jól fog megjelenni a desktop változat kb. 500 pixel szélességű dobozában és egy mobil képernyőjén is. A mobilos megjelenés végén ismét a lábléc érkezik, a kevésbé fontos linkekkel.
Csak egyféle CSS-t készítettünk, nincs handheld és @media, meg egyebek. A lehető legtöbb elem mérete em-ekkel lett megvalósítva, hogy mindenhol rugalmasan jó legyen. És most a legfontosabb:
Minden munkamenet elején megnézzük JavaScript-tel a screen.width tulajdonságot, ez szerencsére minden böngészőben elérhető és jól működik. Ha nagyobb 800-nál, akkor jelenítjük meg (szintén JavaScript-tel) a többi tartalmat. Ezeket nem húzzuk be mondjuk egy AJAX kéréssel, hanem ott van már a JavaScript kódban sima változóban tárolt HTML kódként, hogy gyors legyen. Amúgy is csak néhány kByte.
Mi van, ha nincs JavaScript? No problem, akkor csak a mobilos változat látszik, attól még használhatók maradunk.
A CSS kód nem változik, mindössze a body tag kap egy 'bigscreen' class-t. A CSS úgy van megírva, hogy a végén található néhány sornyi body.bigscreen kivétel, így lesz a mobilos CSS-ből desktop. Bumm.
A margók mindenhol meg lettek növelve, szép nagy white-space-ek vannak mindenhol azért, hogy tapiképernyőn is könnyen lehessen a bumfordi ujjakkal nyomkodni.
Az űrlapokat lerövidítettük, csak a legszükségesebb mezőket tartalmazzák, mert mobilon nehézkes a kitöltés, és desktop-on is lusta mindenki. 2010-ben már pláne nem szabad olyan modellekben gondolkodni, ami sok mezőn alapul.
Csak egeres dolgoknál van mouse over, mindennek működnie kell anélkül is, maximum nem lesz olyan szép.
Ha embed-delünk valami objektumot (hogy legyen zoxigén), akkor tegyük alá/mellé a tartalomra mutató direkt linket is, mert ahány mobil eszköz, annyiféle képpen eszi az ilyesmit. Példa: egy YouTube videónál az embed kód alá kerüljön a videó saját oldalára mutató link, hogy azok az eszközök, amik nem jelenítenek meg ilyesmit, el tudják indítani a saját YouTube appjukat, ha van nekik olyan.
Másik példa: az mp3-akat Flash lejátszókban mutatjuk, de adunk direkt mp3 linket is, ha nincs a gépen Flash (és nem, a HTML5 audio player-ek sem működnek minden mobilos eszközön!). A noembed és egyéb alternatív tartalom csacsiságok sajnos nem működnek minden mobilos böngészővel, ezért kell ez a fapados megoldás.
Érthető, hogy minél kisebb letöltési méret kell, de sokan nem gondolnak a memóriaigényre.
A mobilos böngészők általában nagyon kevés RAM-ot használhatnak (a desktop-hoz képest), és hiába a kis letöltési méret (mondjuk 3 kB), a képek általában a felbontásuknak megfelelő szeletet hasítják ki a memóriából, pl. egy 100x100-as 4 csatornás PNG rögtön 40 kB-ot. Ha ezekből több van, akkor pillanatok alatt el lehet érni a több mB méretet, a böngésző pedig elszáll. Hányszor dobott ki a mobilos böngésződ emiatt, ugyeugye?
Biztos van még valami, amit kifelejtettem, de a lényeget olvashattátok. A végére itt a slusszpoén, hogy miért érte meg ezt az egészet csinálni azon kívül, hogy többféle eszközön is kábé használhatók maradunk: állandó, tartós növekedést eredményezett a látogatásokban (17%), az oldalon eltöltött idő pedig 23%-kal nőtt.
iMect means internet, media and other cool things. We're a small company located in Hungary. There is a big footer on every page where you can discover what we do and what happens with us.
Az iMect jelentése: internet, média és egyéb király dolgok. Egy kis magyar cég vagyunk. Minden oldalon van egy nagy lábléc, ahol felfedezheted, hogy mivel foglalkozunk.