5 způsobů, jak ověřit, že web vypadá všude dobře

Jakmile se dozvíš, jak moc je responzivita webu důležitá, bezpochyby budeš chtít taky zjistit, jak jsou na tom tvoje stránky. Ukážu ti, jak to ověřit snadno, rychle a bezpečně.

Jestli netušíš, o čem je řeč, přečti si nejdřív článek Co je to responzivita a proč ji chtít

Jak zkontrolovat, jestli je web responzivní?

Způsob #1: Jak to vidí Google

Abys zjistili, jak je se zobrazováním vašich stránek spokojený Google, využijte jeho Test použitelnosti v mobilech.

Test použitelnosti v mobilech

Do jediného formulářového pole zde vložíš adresu stránky a klikneš na tlačítko Spustit test. Pak si skočíš uvařit kafe (nebo nalít něco ostřejšího), než si Google vše náležitě přechroustá.

Až se vrátíte z kuchyně (nebo zavřeš Facebook), budeš si moc gratulovat, nebo se dočteš, co všechno se Googlebotovi (= špion strýčka Googla, který mezitím prošmejdil tvoji stránku) na tvém webu nepozdává a proč ho na mobilech nebude pouštět ani na dohled ke stupňům vítězů.

Tuto variantu testování doporučuju využít v kombinaci s kteroukoli z následujících možností. Opravdu není od věci vědět, co si o tvém webu Google myslí. Zároveň je fajn mít přehled i o tom, jak web vypadá na různých zařízeních, když na něj kouká skutečný člověk.

Způsob #2: Prostě se podívej

Otevři si svůj web na všech možných zařízeních, která máš k dispozici. Zkontrolujte nejen hlavní stranu, ale i podstránky, blogové články atd.

U rozsáhlých webů, kde by bylo zdlouhavé procházet úplně všechno, projdi ta nejdůležitější místa (hlavní strana, celý prodejní proces, kontakty) a z dalších namátkově vyberte tak, aby byly co nejvíce zastoupené podstránky s různým rozvržením.

Způsob #3: Responsive Web Design Checker

Na internetu najdeš také řadu online nástrojů, které umí web zkontrolovat na různých zařízeních místo tebe. Jedním z nich je responsivedesignchecker.com.

Zde stačí zadat adresu stránky, kterou chceš prozkoumat, kliknout na Go a pak už se jen vlevo proklikávat ze zařízení na zařízení. Když klikneš na ikonku (monitor, tablet, telefon), rozbalí se nabídka konkrétních zařízení s uvedením rozlišení. Stačí pak na ně kliknout a náhled webu se přizpůsobí.

Nejsou to jen statické obrázky. Web můžeš v každém zařízení posouvat a taky klikat na odkazy.

Způsob #4: Zeptej se prohlížeče

Na první pohled možná trošku složitější řešení je využít nástrojů, které jsou součástí prohlížeče. Je ale rychlé a nemusíš adresu svého webu podsouvat cizím serverům. A navíc nakonec není zase tak složité, jak to z popisu možná bude vypadat.

  • Mozilla Firefox slyší na pokyn Ctrl + Shift + M.

Současným stisknutím těchto tří kláves se okno prohlížeče jako mávnutím kouzelného proutku přepne na tzv. Responsive Design Mode. (Pro návrat do původního stavu stačí magickou trojkombinaci Ctrl+Shift+M zmáčknout znovu nebo kliknout na křížek vlevo nahoře.)

responzivita-firefox

V prostředí Responsive Design Mode můžeš začít zkoumat web v různých rozměrech, které ti nabízí roletka vedle křížku. Imaginární zařízení si otočíš kliknutím na šipku, která je hned vlevo.

Do toho se dostaneš tak, že:

  1. Zmáčkneš klávesu F12.
  2. Ustojíš šok z té změti prapodivných znaků, které se najednou vedle webu objeví.
  3. Klikneš na ikonku mobilních zařízení (nebo taky zkusíš magickou trojkombinaci Ctrl + Shift + M).
responzivita-chrome

Typ testovaných zařízení se mění pomocí první položky v menu (na obrázku je zrovna zvolen Galaxy S5). Náhled otočíš kliknutím na ikonku telefonu v tomtéž menu úplně vpravo.

Způsob #5: Pohraj si

Takto sice nebudeš mít přehled o přesných rozměrech, ale pro rychlou představu, jak se tvůj web chová na různých zařízeních, tato možnost bude stačit.

Prostě si web otevři a zkoušej různě zmenšovat okno prohlížeče – stačí upravovat šířku.

Jak tvůj test dopadl?

  • Držela jsem palce, aby všechno klaplo a tvůj web responzivní byl, tak jsem teď napnutá, jak to dopadlo. Pochlubíš se?
  • Zajímalo by mě taky, kterou z možností jsi využila, proč a jak se ti s ní pracovalo.
  • Výhledově mám v plánu i článek s tipy, co dělat, když zjistíš, že tvůj web responzivní není. Hodil by se ti?

Všechno mi to napiš rovnou do komentáře pod tento článek.

Jestli ti to přijde užitečné, pošli to dál →

Share on facebook
Share on linkedin
Share on pinterest
Share on twitter

Prostor pro postřehy a dotazy

2 komentáře

  1. Dobrý den,
    potřeboval bych od Vás poradit ohledně responzivity webu pro mobily. Na notebooku, když si to upravuji, tak to vypadá všechno dobře a v pořádku, zmenšuji si i okno prohlížeče, dávám tam i velikosti různých mobilních zařízení, ale jakmile si to pustím přímo na mobilu, tak to mám celý zničený.
    Děkuji Vám za odpověď.

    Pěkný den přeji

    Au Quang Hoa

Napsat komentář

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

Nové články e-mailem

Vlož sem svoji adresu a dám ti vědět o všem, co připravím pro počítačové blondýny:

Kdo to píše?

Rubriky na blogu

Návody

Nejnovější články a návody

Sdílení vítáno!

Share on facebook
Facebook
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
Share on twitter
Twitter