Mobilra optimalizálás

Mostani témám a PHP programozásról a következő: egy oldal mobilra történő optimalizálása. Hatalmas probléma, hiszen dönthetsz úgy, hogy külön mobiloldalt készítesz az oldal adatbázisa alapján, vagy a meglévő stílust átalakítod mobilon is nézhetővé. Én ez utóbbinak vagyok híve, és ezért ástam bele magamat a Bootstrap-be... amit ismét tanulhatok meg újra, hiszen a 3-as verzió alapjaiban más, mint a 2-es.

A Bootstrap 3-as verziójának új jelszava: a mobilra optimalizálás már nem opció, hanem elsődleges! Igenis igény van arra, hogy egy oldalt mobilról is lehessen olvasni, böngészni. Nagyon sokminden változott benne, és aki frissíteni akarja a verziót, az egész oldal CSS hivatkozásainak a class-ait át kell migrálnia, ha 3-as verzióra frissít.

De a Bootstrap-ről később... mert szerintem nem egészen tökéletes az a megoldás, hogy csak a szélességét nézzük egy oldalnak! Az, aki azt mondja, hogy elég, ha a mobiloldal responzív, akkor az számtalan bosszúsággal néz szembe. Egy mobiloldal nem nézhető meg úgy, hogy csak a szélességét változtatjuk meg, és elég, ha néhány elem eltűnik és megjelenik máshol... mert nagyon sok dolog nem így működik.

Sok helyen úgy csinálják, hogy külön oldalt terveznek a mobilok felé, csak az adatbázis a közös. Ez azért nem jó, mert a Google számára a canonical metatagot is be kell állítani, hogy ne legyen duplikáció. A legjobb az MVC (model-view-controller) framework-ökben azt, hogyha akarod, akkor a mobiloldalaknak más sablont készítesz, és a controllernek meghatározod, hogy melyiket hívja be. Így a link ugyanaz, csak az oldal lesz más.

Tehát az is megoldás, hogy különböző view-okat készítesz, és a PHP agent detektálás (pl. a http://mobiledetect.net.) által meghatározod, hogy melyik template-t töltöd be. Az oldal tartalma (content) általában ugyanaz, elég, ha ezt responsívnak tervezed, a többi tartalomelemet, widget-eket pedig hozzáigazítod.


De ha ragaszkodsz a responsive megoldáshoz, keverheted is módszereket - csak egy template-t használsz, a tagnak adsz egy id-t, amit a PHP-s detektálás által meghatározol, majd CSS-ben és JQuery-vel így hivatkozol a responsív részekre: body#mobile vagy body#tablet.

Mint fentebb említettem, a csak responsive megoldás nem tökéletes megoldás. Bár lehet, hogy Amerikában a képek letöltése pikk-pakk megvan, a hazai mobilszolgáltatók előszeretettel tesznek adatmennyiségi korlátot a nagysebességű 3G csomagokra. Ha pedig letelik az adatmennyiség, csiga lassúsággal mehetsz tovább 2G-vel, vagy WIFI-re vadászhatsz... Paradoxon ugyanis az, hogy az emberek türelmetlenek, és ha egy oldal betöltése 1 percnél tovább tart, akkor a felhasználó már rögtön más oldal után néz... Ilyen feltételek mellett a képeket is optimalizálnod kell, és képek esetében nem választható módszer az, hogy elég ha responsív... vagyis... a PHP-s eszközdetektálás által azt a képet választod ki, amelyik a legoptimálisabb szélességre is, és fájlméretben is.

Megteheted azt, hogy a kép linkje nem maga a kép, hanem egy kiválasztó controller, és külön mappára rakod a mobilra szánt elemeket, a tabletre szánt elemeket és a számítógépre szánt elemeket. Ha pedig a felhasználók tudnak képeket feltölteni, akkor lehet külön mappákba rakni a bélyegképeket abban a méretben, amikben szeretnéd, hogy megjelenjenek (pl. a mobiloldal thumbnailjei 80 pixel nagyságúak, a tablet-é 120 pixel, az asztali 150 pixel).

Őrült paradoxon szerint kell tervezni egy weboldalt. Miközben az asztali gépekre szinte elvárás lesz a nagy háttérképek használata, addig a mobiloldalaknál még mindig a kicsi a legjobb... a megoldás persze, hogy a responsívitás, de a nagy kép nem lesz optimális fájlméretben. Remélem, hogy tudtam segíteni abban, hogy megtaláld a legjobb megoldást.