Mobile First – de hogyan?
2021. augusztus 31. Blog, Segédlet
Az elmúlt években a webdesignban vagy azzal kapcsolatos témákban egyre gyakrabban üti fel a fejét ez a jelmondat. Első megjelenésekor a Google-nél beállt paradigmaváltást jelentette: a keresőóriás a weboldalak kiértékelésekor a megszokott, hagyományos megközelítés helyett, miszerint az internet a számítógépeken történik, és a mobil internetezés csupán ennek valamiféle kényszerű kistestvére, előbbre vette a mobilos böngészési élményt, és nagyobb súllyal kezdte számításba venni a mobil nézetek minőségét az asztalival szemben. A kifejezés azóta a webdesignban is megjelent, kicsit más jelentéssel.
Mi áll az egész hátterében?
Az okostelefonokkal és az egyre elérhetőbb szélessávú mobilinternet elterjedésével radikálisan megváltozott, ahogy az emberiség internetezik: az elmúlt évre a globális interenthasználatban a mobilos netezés túllépte az ötven százalékos határt. Ez globálisan értendő, ami persze azt jelenti, hogy mind földrajzi, mind szellemi értelemben véve a különböző területeken láthatunk nagy különbségeket (pl. Ázsiában lényegesen nagyobb a mobilozás aránya, a közösségi médiahasználat pedig az egész világon túlnyomóan mobil készülékeken történik). A lényeg az, hogy a modern webdesignban nem lehet mellékes tényezőként tekinteni a mobilos weboldalakra, ugyanis – piactól függően – könnyen lehet, hogy a felhasználóink 60-70%-a, vagy akár ennél is több kizárólag a mobiltelefon képernyőjén találkozik a művünkkel.
De már ezt csináltuk eddig is, nem?
A reszponzív webdesign már évek óta alapvetésnek számít, mi sem természetesebb, hogy minden épkézláb designer úgy építi meg a honlapjait, hogy azok a kijelző méretével együtt szépen átméreteződjenek – és ugyanígy tesz minden korszerű weboldal-motor is. Mi itt az újdonság?
A válasz persze az, hogy ez még mindig nem mobile first, csak azt jelenti, hogy érdemben foglalkozunk a mobilos használattal is. A valódi “először a mobilt!” webdesign valóban azzal kezdni, hogy a honlap layoutját mobilképernyőn tervezi meg, és ezt bővíti ki azután a tabletes és desktop használat képernyőméreteire. Ez mindenképpen furcsa érzés, hiszen a honlapok tervezése szinte mindig desktopon történik, így magától értetődőnek érződik, hogy abból induljunk ki, de a designnak a felhasználók, és nem a fejlesztők igényeit kell követni.
Milyen szemléletbeli különbségeket jelent ez?
Ahogy mondtam, az oldalak felvázolásakor a mobilképernyő sablonját kell elővenni, és úgy kell megtervezni az oldalunkat, hogy a mozgásban levő, de legalábbis a világ nyüzsgésétől körülvett felhasználó számára kell jól használható, hatékony, és persze tetszetős oldalt tervezni. Ha ez megvan, elkezdhetsz azon dolgozni, hogyan lehet az oldal jellegzetességeit megnövelni és kibővíteni az asztali használathoz. Elsőre nehéz átprogramozni az agyunkat, de a gyakorlat mint mindig, itt is segít.
Mobile first alapelvek
A mobilos használhatóságnak természetesen számos fontos alapelve van, ezek már régóta ismertek, de néhányat kiemelnék közülük, mint jellemzően szem előtt tartandót:
- Letisztult, sallangmentes layout, maximum két hasábbal, de inkább eggyel,
- Jól kinéző, átgondolt, mobil használatra tervezett design (magasabb kontraszt, kiemelkedő, könnyen megnyomható CTA-k, megfelelő méretű beviteli mezők, stb.) Meríthetsz némi ihletet az akadálymentes webdesignból is, sok a közös vonás a kettő között.
- Különösen figyelj a sebességre! A mobil oldalak tesztelésénél a benchmark oldalak jellemzően gyenge hardver (4-5 éves telefonok) és lassú, 3G-s internetkapcsolat szimulálásával vizsgálják meg a honlapok várható teljesítményét. Ebben a versenyben fokozottan számíthat minden lefaragott kilobájt!
- A kapcsolatfelvételi információk legyenek könnyen elérhető helyen – a mobilos látogatók kevesebbet fognak kattintgatni az oldalon, hogy megtalálják, amit keresnek – a fontos információkat helyezd jól látható helyekre.