Testování responzivnosti našeho webu

Jak otestujeme, že je náš web responzivní?

Nedávno jsem psala o responzivitě a důvodech, proč je důležitá. Dneska se přesuneme trošku víc do praxe. Je totiž hezké vědět, co a jak má fungovat, nicméně my si potřebujeme ověřit. že tomu tak skutečně je. Jak tedy nejlépe otestujeme, jestli je náš web správně responzivní?

Já používám při tvoření několik způsobů testování, protože spolehnout se jen na jeden, to není nic pro mě. Jako u jiných věcí, i toto je otázka osobních preferencí a neexistuje jeden jediný správný přístup, jak testovat.

Toto testování taky není úplně nejšikovnější pro profíky. Respektive při profesionální tvorbě webů je třeba mít v prvé řadě maximálně vyladěný kód a vlastně celý proces tvorby. Ušetří se tak mraky času a energie. Proto jestli máte ambice se vývoji věnovat, vypilujte si to, jak jen můžete. Odstranění reworku a zjednodušení všeho za to stojí.

Testování změnou velikosti okna

Když jsem se na začátku učila, jak responzivita šablon funguje, šla jsem na to přes změnu velikosti okna prohlížeče. Jak ho zmenšujeme/zvětšujeme, vidíme, jak se v závislosti na tom mění design. Já si tímto způsobem ráda ověřím, že neexistuje nějaká problematická šířka, při které nakódování nevyhovuje. Typickým příkladem je třeba menu – mění se šířka polí menu, ale velikost písma zůstává. Snadno se může stát, že při určité šířce menu jsou jednotlivé položky menu příliš úzké pro text, který mají obsahovat. Nebo jinde na webu máme obrázek, ten je zmenšený tak akorát, ale text na něm už se stává nečitelným.

Při testování je fajn podchytit všechny tyhle potenciálně problematické oblasti.

Testovací aplikace

Na internetu najdeme řadu šikovných aplikací, do kterých zadáme adresu a za okamžik si můžeme prohlížet náš web na různých zařízeních – aplikace nám nasimuluje web na monitoru počítače, tabletu, telefonu… Můžeme si tak zkontrolovat, jak vypadá náš web na obrazovkách nejběžnějšího rozlišení i konkrétních modelech zařízení.

Testování na mobilu

Už několikrát se mi potvrdilo, že to chce testovat i přímo na mobilu. Jistota je jistota. A čím starší mobil, tím lépe. Mimo jiné i proto, že mobilní prohlížeče jsou často trošku pozadu za těmi desktopovými, takže se nám může stát, že náš kód nebudou umět interpretovat zcela správně. Problém nastává hlavně při použití CSS3. Pokud pracujeme s frameworkem, například Bootstrapem, máme někdy smůlu u nejnovějších verzí. Třeba tenhle web je postavený na šabloně se základem v Bootstrap 4 a některé prvky jsem musela předělávat právě kvůli tomu, že na starých androidových prohlížečích to dělalo velkou paseku.

 

Užitečné odkazy na testovací aplikace:

 

Komentovat

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete použít tyto HTML značky a atributy:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Po odeslání musí být komentář ručně schválen, aby nebyla diskuse plná spamu :). Bude proto chvíli trvat, než se komentář pod příspěvkem zobrazí. Díky!