V dnešnej dobe sa responzívny dizajn považuje za jeden z najdôležitejších prvkov na webe. Responzívny web je taký, ktorý sa automaticky prispôsobuje zariadeniu, na ktorom je zobrazený či už sa jedná o PC/notebook, mobil alebo tablet.
Prečo by mal byť web responzívny?
Hlavným dôvodom je aj nárast návštevnosti webov cez mobilné zariadenia za posledné roky. Ak aj dnes užívateľ natrafí na web, ktorý nie je prispôsobený pre mobily, stále je veľká šanca, že z neho odíde ako by na ňom mal zostať a to už môže znamenať aj stratu potenciálneho zákazníka. Na našich projektoch sa programátor už nepýta či bude web prispôsobovať pre tablety a mobilné zariadenia, je to preňho samozrejmosť.
Ako na responzívny web?
Najjednoduchší spôsob, ako riešiť responzívny web je využitie niektorého z CSS frameworkov, ktoré nielen uľahčujú a urýchľujú prácu, ale ponúkajú aj ďalšie možnosti a rozšírenia pre programátora. Medzi najznámejšie patria Twitter Bootstrap a Zubr Foundation. Už viackrát som sa stretol s otázkou, ktorí z nich je lepší, no odpoveď na to neexistuje. Osobne sa viac stretávam práve s využitím Bootstrapu, ktorý aj používam, ale taktiež aj Foundation splní svoj účel. Záleží to na samotnom programátorovi, ak sa naučí používať jeden z nich a vyhovuje mu, nie je dôvod prechádzať na druhý. Tieto frameworky majú v sebe už predvyrobené classy, ktoré sa pridávajú priamo HTML elementom. Pre programátora to znamená, že si ich nemusí písať sám a je to kopec ušetrenej roboty.
Ako si otestovať responzívny web?
Pre programátora je Chrome DevTools ako druhý domov. Ponúka mu veľkú škálu možností ako si responzivitu testovať. Ak sa web nachádza či už na produkčnej alebo testovacej doméne, osobne zvyknem využiť aj starý dobrý nástroj Responsinator, kde stačí iba zadať url adresu webu a aplikáciu nasimuluje ako daný web vyzerá od najmenších mobilných zariadení až po tablety. Toto považujem aj ako jednoduché a efektívne riešenia pre klienta, ak si to chce odkontrolovať všetko na jednom mieste.
Ak sa bavíme o mobilnej verzii, asi najväčšia zmena oproti tej desktopovej je menu/hlavná navigácia. Na mobiloch je riešená cez tzv. hamburger menu.
