Keď sa pozriete, ako ľudia v tramvaji, v čakárni alebo na gauči hľadajú firmy, takmer vždy držia v ruke telefón. Web, ktorý sa na ňom dobre číta a ovláda, vám prinesie zákazníka. Web, ktorý treba približovať prstami, ho pošle ku konkurencii. Tento článok vysvetľuje, na čo sa pri mobilnej verzii pozerať, aby ste to vedeli posúdiť aj bez technických znalostí.
Prečo je mobil dôležitý
Majiteľ firmy sedí pri počítači, a preto má sklon posudzovať web na veľkej obrazovke. Zákazník, ktorý hľadá otváracie hodiny alebo telefónne číslo, to však často robí práve na telefóne, medzi dvoma inými vecami. Má málo trpezlivosti a jednu voľnú ruku.
Vyhľadávače navyše pri hodnotení stránok berú do úvahy, ako sa web správa na mobile. Preto sa dnes dizajn často navrhuje najprv pre telefón a až potom pre počítač. Netvrdíme, že mobil je dôležitejší pre každý odbor, ale ignorovať ho sa nedá.
Čo je responzívny dizajn
Responzívny web je jeden web, ktorý sa prispôsobí šírke obrazovky. Na počítači vidíte texty vedľa seba, na telefóne pod sebou. Menu sa z lišty zmení na ikonku s tromi čiarkami. Obrázky sa zmenšia, aby sa nevysúvali mimo obrazovky. Nemusíte udržiavať dva samostatné weby a všetky zmeny stačí urobiť raz.
Responzívny dizajn je súčasťou aj našej základnej webstránky za 150 € a webu s admin panelom za 200 €. Nie je to príplatok navyše.
Ovládanie palcom
Telefón väčšina ľudí drží v jednej ruke a ovláda palcom. Spodná polovica obrazovky je preto pohodlnejšia než horný roh. Z toho vyplýva niekoľko praktických pravidiel:
- Tlačidlo na zavolanie alebo napísanie má byť veľké a dobre viditeľné, nie malý odkaz v pätičke.
- Odkazy a tlačidlá nesmú byť tesne vedľa seba, inak človek klikne vedľa.
- Telefónne číslo má byť klikateľné, aby sa po ťuknutí rovno vytočilo.
- Formulár má mať čo najmenej políčok. Každé navyše je dôvod, prečo ho nikto nevyplní.
Ako odhad pre tlačidlá sa často uvádza výška približne 44 pixelov, čo zodpovedá šírke bruška prsta. Nie je to zákon, ale dobrý začiatok.
Veľkosť písma a čitateľnosť
Text na mobile musí byť čitateľný bez približovania. Bežný text by mal mať aspoň 16 pixelov a riadky nemajú byť príliš dlhé ani príliš husté. Dôležitý je aj kontrast: svetlosivý text na bielom pozadí vyzerá elegantne na monitore, ale na slnku vonku ho nikto neprečíta.
Vyhnite sa veľkým blokom textu bez medzier. Krátke odseky, jasné nadpisy a odrážky pomáhajú čítať na malej obrazovke. Rovnaký princíp platí pri písaní obsahu pre web, o čom je aj článok web pre malú firmu: čo má obsahovať.
Rýchlosť na mobilnom pripojení
Telefón nemusí byť pripojený na rýchlu Wi-Fi. V budove s horším signálom sa ťažký web načítava dlho a návštevník väčšinou nečaká. Najčastejšie spomaľujú web nezmenšené fotky, veľa skriptov a zbytočné doplnky. Podrobnejšie sa tomu venuje článok prečo je web pomalý.
Praktická rada: fotky pred nahratím zmenšite a použite moderné formáty. Nenahrávajte fotku s rozmerom 6000 pixelov tam, kde sa zobrazí v šírke 400 pixelov.
Ako web skontrolovať na telefóne
Na kontrolu nepotrebujete žiadne nástroje, stačí váš telefón a pár minút:
- Otvorte web v prehliadači a posuňte celú stránku od začiatku po koniec.
- Skontrolujte, či sa nič nevysúva do strany a či nemusíte posúvať stránku horizontálne.
- Ťuknite na každé tlačidlo a odkaz v menu. Fungujú aj po otvorení a zatvorení?
- Ťuknite na telefónne číslo a e-mail. Otvorí sa volanie a pošta?
- Vyplňte a odošlite kontaktný formulár.
- Otočte telefón naležato a pozrite, či sa web neposunul zle.
- Skúste web otvoriť v Androide aj v iPhone, ak máte oba po ruke. Požiadajte známeho, ak nie.
- Zapnite pomalšie pripojenie, napríklad vypnite Wi-Fi, a sledujte, ako dlho trvá načítanie.
Rovnakú kontrolu urobte aj pred spustením nového webu. Úplný zoznam bodov nájdete v checkliste pred spustením webu.
Na čo si dať pozor
- Neposudzujte web len na počítači. Najprv ho otvorte na vlastnom telefóne.
- Kontaktné údaje a hlavné tlačidlo musia byť na mobile vidieť bez hľadania.
- Vyhnite sa malému písmu a svetlému textu na svetlom pozadí.
- Obrázky pred nahratím zmenšite, inak sa web zbytočne spomalí.
- Skúste web na viacerých zariadeniach, rôzne telefóny ho môžu zobraziť trochu inak.