Čo je to responzívny web a prečo je dôležitý

favicon-wame
responzivny web banner

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.

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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

wame logo

Tvoríme e-shopy, aplikácie a informačné systémy

Mohlo by Vás zaujímať

Čo to vlastne je API rozhranie a prečo je potrebné ho zabezpečiť? Nikdy ste o tom nepočuli? Nevadí, v tomto článku sa dozviete viac.
V dňoch 27-28.2.2024 sme s WAME zdieľali naše know-how z vývoja webov Magento, Prestashop a webových i mobilných aplikácií na najväčšom e-commerce veľtrhu v Českej republike "CzechOn-lineExpo". Okrem príjemného stretnutia s dlhoročnými klientmi, sme spoznali aj nových partnerov, ich požiadavky na weby i aplikácie a odhalili sme smerovanie e-commerce trhu v najbližších rokoch.
Stretávame sa s klientmi, ktorí uvažujú medzi open-source, e-shopom na mieru alebo krabicovým riešením. Preto sme sa rozhodli venovať práve tejto téme na Ecommerce Bridge a objasniť si najčastejšie mýty a fakty. V našom blogu vysvetlíme čo vám jednotlivé riešenia môžu priniesť a v čom vás môžu v budúcnosti obmedzovať.