Figyelem! ez egy eléggé technikai jellegű post, úgyhogy programozóknak, site-buildereknek ajánlom! vagy azoknak akik fontolgatják, hogy azok lesznek!:)

Egyre jobban terjednek a mobilok, így egyre sürgetőbb a feladat, ami a fejlesztők és grafikusok, portál üzemeltetők előtt áll, hogy szolgáltatásukat elérhetővé tegyék mobiltelefont használó felhasználóik számára is. Sürgeti ezt a helyzetet az is, hogy már szinte ingyen dobják az ember után az okos telefont, így már már olyanok is mobilról neteznek, akikről elképzelni sem tudtam volna pár éve – például anyósom.

Webes fejlesztőként hosszas kutatás és dilemma előzte meg a választást abban a tekintetben, hogy az Oszkár telekocsi oldallal milyen módon lehelne hatékonyan kiszolgálni ezt a felmerült igényt. Az, hogy mobilalkalmazásra szükség van, az egy tény, és nem is erről szeretnék most írni. Azon felhasználók számára akik nincsenek elkötelezve szolgáltatásunk mellett annyira, hogy már letöltötték volna az applikációnkat, de mégis emberi méretben szeretnék élvezni saját böngészőjükben oldalunkat, szükséges, hogy böngésző alapú, de mobiltelefonok felbontására optimalizált oldalt nyújtsunk.

Ennek megvalósítására számos lehetőségünk van:

1. Sencha Touch:

A Sencha egy ExtJs ből kifejlődött javascript keretrendszer, azt igéri, hogy kivállóan lekezeli az olyan touch screenhez, és mobil eszközhöz köttött eventeket, melyek a weben teljesen ismeretlenek. Pl két ujjal nyulkálás, forgatás, stb. A fejlesztése egyébként annyira nem egyszerű, gyakorlatilag javascriptben kell összehozni a template-eket, és javascriptben kell leprogramozni az egészet. Ezzel persze nem feltétlenül van baj, főleg azoknak akik nagy javascript guruk és fan-ek, és mint ahogy a budapest.js taglétszámából látjuk, bizony nincsenek kevesen ilyenek az országban. Mindenesetre az én személyes szimpátiámat nem nyerte el túlságosan. A javascripten belül is úgy tűnt nekem, mintha egy új programozási nyelven kéne megtanulnom.

2. JQuery Mobile

A jQuery vel biztos vagyok benne, hogy minden webes területen dolgozó fejlesztő és grafikus szoros barátságban van, elég erős közösség áll mögötte, jól fejlődő frankó javascriptes keretrendszer. Nem is döbbenünk meg nagyon, amikor kiderül, hogy mobilos verziója is van a keretrendszernek, ami egész tetszetős, viszonylag könnyen használható. Nagyon jó dokumentáció található hozzá. Egy barátom akinek annyi köze van a webes fejlesztésnek, mint nekem a joghoz (azaz vajmi kevés) össze tudta hozni vele a nicelife.hu oldal mobilos verzióját, az m.nicelife.hu-t. Előnye, hogy gyorsan lehet vele dolgozni, nem ismeretlen a keretrendszer, így nagy meglepetések, hosszú betanulási folyamat nem várható, és attól sem kell félni nagyon, hogy egyszer csak eltűnik a jQuery a föld színéről, mert egyelőre elég stabil megoldásnak tűnik. Folyamatosan fejlesztik, ami szintén előnye.
Azonban azt is el kell mondani, hogy gyakorlatilag egy külön mikrosite készül az oldalból jquery mobile-al, minden oldalhoz külön template szükséges, css-el, javascripttel. Adott esetben külön apira van szükség a szerveroldali funkciók kivezetésére, így a hosszútávú karbantarthatósága nehézkesebb. Ha elkészül egy új modul vagy funkció a weboldalon, akkor ahhoz hogy megjelenjen a mobil verzióban is, külön fejlesztésre van szükség. Természetesen kárpótlást jelenthet, hogy hála a jQuery mobile-nak, nagyon app-szerűen tud kinézni egy jól megírt mobilra optimalizált oldal.
Sajnos hátránya ennek a megoldásnak az is, hogy bizonyos első ránézésre triviálisnak tűnő megoldások fél napos kutatómunkába képesek torkollni, ráadásul ha a fejlesztő szerint elkészültnek titulált verzió a tesztelőhöz érkezik, aki megnézi 6-8 féle mobilon, szinte esélytelen, hogy mindenhol jól nézzen ki és jól működjön elsőre.

Ennek következtében tovább kutakodtam a témában, és úgy döntöttem, a feladatot a css irányból kéne megközelíteni.

3. Fluid grid

A fluid grid témakörrel – sejtésem mi lehet az értelmes magyar fordítása – gyakorlatilag tele van a google. A lényeg az, hogy használjuk a css nyújtotta csodás lehetőségeket, mint a max-width és min-width, továbbá ne használjunk szélességek definiálására pontos pixel értékeket, hanem helyette százalékokban adjuk meg azokat. Ennek hatására ahogy csökken oldalunk szélessége, úgy csökkennek az egyes oszlopok is, egészen a min-width-ig, és csak ha ez alá csökkent a szélesség, akkor kezd el rondán kinézni.
A technológia rendkívüli módon alkalmas arra, ha ki szeretnénk tölteni arányosan szépen egy 1920px széles képernyőt, vagy épp az 1024-es felbontásra optimalizált oldalunkat szeretnénk szépnek mutatni még 800 as szélességben is, de sajnos nagyon kicsi képernyőméretben ez nem lesz az igazi. Analytics szerint az Oszkárt mobilböngészőt használók legnagyobb részre 320 px széles kijelzővel rendelkezik. Kedvenc ticketing rendszerem, a redmine gyönyörűen használja a fluid grid technológiát, de mobilon sajnos használhatatlan szegény.

Így jutottam el addig a megoldásig, ami nekem egyelőre a legjobban bevállt, ez pedig a

4. Responsive web design

Nagyon nem találtam magyar szakirodalmat a témakörről, így a megnevezés lefordításával itt is bajban vagyok kicsit, a lényege a “responsive” résznek, hogy a felhasználó – avagy kliens – változására, vagy állapotára “válaszol” azzal, hogy az adott méretben is úgy jelenik meg az oldal, hogy élvezhető legyen. Ez persze nem megy csak úgy magától, tenni is kell érte. Nem írhatok úgy a responsive web designról, hogy ne említeném meg Ethan Marcotte nevét, aki a technológia feltalálója. Egy cikkét itt olvashatod.
A responsive web design célja az, hogy oldalirányban ne kelljen a felhasználónak scrolloznia mobilon sem, csak fel-le. Nagyítgatnia se kelljen az oldalt, hanem úgy használhassa és élvezhesse, mint akár egy mobilalkalmazást. Ebben a css media type siet segítségünkre, aminek segítségével előállíthatunk olyan css definíciós listát, ami kizárólag bizonyos felbontású kijelzők esetén kerül csak használatba.
Tételezzük fel, az oldalunk 768 px szélességben egész jól néz ki, ellenben ha ennél kisebb a kijelző felbontása ezt már nem fér el, így szeretnénk eltüntetni a jobb oldali menüt. Ezt könnyedén megtehetjük pár sorban:

@media only screen and (min-width: 480px) and (max-width: 768px) {
  div#right-menu {
    display: none;
  }
}

Ha létrehozunk, egy css-t, amiben kizárólag ezek a selector felüldefiniálások kapnak helyet, akkor gyakorlatilag anélkül  hogy a site-hoz érdemben hozzányúlnánk, elkészíthetjük annak mobilra optimalizált változatát, anélkül  hogy új template-eket kéne létrehoznunk, tele kéne raknunk javascriptekkel, vagy egy teljesen újszerű nyelvet kéne megtanulnunk.
Azért természetesen kicsit túlzás, hogy az oldalba nem kell belenyúlnunk, 2 dolgot mindenképp meg kell tennünk:
* egyrészt be kell húznunk az általunk előállított css file-t, pl így:

<link href="responsive.css" 
  type="text/css" 
  rel="stylesheet" 
  media="only screen and (max-device-width: 950px)" />

* másrészt annak érdekében, hogy a mobil böngészők alapértelmezett szélességi beállításait jól tudja értelmezni a css, a következő meta tagre is szükségünk lesz:

<meta name="viewport" 
  content="width=device-width, 
  initial-scale=1, 
  maximum-scale=1">

és innentől már csak a css-en kell dolgoznunk.

Hozzá kell tennem ennek a technológiának is vannak hátrányai. Nem lesz gyorsabb mint az oldal, ugyanis pont ugyanannyi adatot kell letöltenie, betölteni, azok közül csak pár küszöbölhető ki javascripttel. Valamint természetesen ha a site-on változik valami, meg kell nézni mobil oldalon is, hogy nem romlott-e el. Mindazonáltal összességében hatékony technológiának tartom, gyorsan lehet vele dolgozni, a tesztelése annyiból áll, hogy egy összehúzott kijelzőjű böngészőben is kell nézegetni, és miután css-el már szinte bármi megvalósítható, a csinosításban határ a csillagos ég!

Ezzel a technológiával végül elkészült Oszkár mobilra optimalizált verziója, ha Te is használod, remélem tetszik!