Človek si na mobile prehliada stránku inak ako na počítači. Ak prezeráte stránku reštaurácie, pravdepodobne hľadáte menu, otváracie hodiny, kontakt a podobne. Nezaujímajú vás detailné obrázky ľudí ochutnávajúcich šalát, blog s receptami a ostatné drobnosti. Tie si radšej pozriete na počítači (prípadne aj tablete), keď máte čas.
Responzívny dizajn stránky ju prispôsobuje podľa toho, na akom zariadení ju prehliadate. Na základe toho, či ju pozeráte na mobile, tablete alebo počítači sa mení rozlíšenie stránky, veľkosť obrázkov, rozmiestnenie prvkov, či samotný text. Nie je pritom potrebné mať rôzne stránky pre rôzne zariadenia. Responzívny layout využíva CSS štýly na prehodenie obsahu webu podľa rozlíšenia obrazovky. Jednoducho povedané – prispôsobuje sa podľa toho, na čom si ju prezeráte a koľko miesta má na zobrazenie.
Účasť na bratislavskom Open Coffee ma inšpirovala k spísaniu pár rád, na čo myslieť pri návrhu a tvorbe responzívneho dizajnu (nemýľte si s mobilným webom). Takže:
Zjednodušujte
Browsery v smartphonoch vo väčšine prípadov automaticky zväčšujú alebo zmenšujú stránku, teda ukazujú celú stránku naraz. To môže byť frustrujúce pre návštevníka, ktorý má malý mobil a hľadá dôležitú informáciu, umiestnenú niekde navrchu stránky v pravom rohu. Riešením sú stĺpcové layouty. Podľa veľkosti prehliadača sa počet stĺpcov znižuje.
Ako spomenul Jakub Česák na Open Coffee, pri prezeraní stránok v mobile sú ľudia zvyknutí ísť smerom dole, scrollovať palcom (podobne ako myšou). Umiestňujte preto text vertikálne a nenúťte ich robiť iný pohyb, než dole.
Zjednodušovanie platí aj pre text. Obrazovka telefónu má menej priestoru ako obrazovka počítača, preto nie je vhodné zahltiť ju textom. Vyberajte to najdôležitejšie, dlhé (a možno nepotrebné) texty skráťte.
Voľte veľké tlačítka
Návštevníci na mobiloch radšej klikajú ako píšu. Nepríjemné a trochu otravné je to, keď musia zoomovať (zväčšovať), aby mohli kliknúť na odkaz, tlačítko, čokoľvek. Myslite aj na ľudí s veľkými palcami a malými telefónmi. Tvorte väčšie tlačítka, na ktoré sa dá jednoducho kliknúť prstom. Podobne tvorte aj odkazy. Dostatočne veľké, aby sa na ne ľahko klikalo palcom a samozrejme, odlíšené od ostatného textu.
Zmeňte usporiadanie prvkov
Návštevníci sa orientujú na webe inak na počítači (a laptope), tablete a inak na mobile. Či už ide o veľkosť obrazovky alebo o čas. Na obrazovke počítača rýchlo vnímajú text a vyberajú z neho to najdôležitejšie. Všímajú si veľké obrázky, text a postupne ho prezerajú očami, kým nenájdu to podstatné.
Pri mobile stránku vnímajú inak. Nie sú ochotní hľadať informáciu na stránke zahltenej textom. A nakoniec, ani na to nemajú čas. Ukážte im preto to, čo hľadajú. Ostatné informácie skryte. Skryte (prípadne obmedzte) príspevky blogu. Skryte dotazník o kvalite vašich služieb. Skryte odporúčania. Ukážky vašich prác minimalizujte na jednu, dve. Naopak, ukážte im to, čo ich zaujíma – kde sídlite, kontakt, vaše služby, otváracie hodiny, menu (ak ste reštaurácia), odkazy na sociálne siete.
Testujte
Prezerajte si váš web z rôznych zariadení. Počnúc rôznymi prehliadačmi na počítači, až po rôzne typy mobilov. Dajte mobil (prípadne tablet) do rúk vašim známym, kamarátom, rodine a všímajte si, ako si stránku prezerajú a na čo klikajú. Požiadajte ich, aby si stránku pozreli svojim mobilom (alebo aj tabletom). Pýtajte sa, čo im chýba, čo im vadí a nechajte si poradiť. Aj tu platí – viac hláv, viac rozumu.
Návrh a tvorba webu s responzívnym dizajnom môže dať chvíľu zabrať, preto premýšľajte. Premýšľajte, čo vašich návštevníkov môže zaujímať, keď vyhľadajú vašu stránku na svojom mobile alebo tablete. Premýšľajte, či text, ktorý máte na webe je naozaj potrebný aj na mobilnom telefóne. Uľahčite to vašim návštevníkom a nedovoľte, nech zbytočne blúdia.
P.S. Chcete vedieť, ako vyzerá vaša stránka v rôznych rozlíšeniach? Skúste tento šikovný nástroj.