Google Resizer: bleskurychlé a jednoduché testování responzivního designu

V záplavě nástrojů určených k testování responzivního designu webových stránek by vás mohl zaujmout relativně nový nástroj Resizer. Přišel s ním Google a od jiných se liší tím, že se velice snadno ovládá.
reklama

Pro testování responzivního designu a toho, jak weby vypadají při různých rozlišeních, využívám zabudované nástroje ve Firefoxu, Chrome a Safari. Weby testuji i na reálných zařízeních – různých tabletech a chytrých telefonech s iOS, Androidem a Windows Phone. Pokud narazím na problém v iOS, využívám možnost ladění přes iOS Simulator v Xcode.

Občas sahám i po nástrojích MIHTool a Vorlon.js. Byly případy, kdy jsem se bez nich neobešel.

Pro rychlé zobrazení toho, zda se na webu vše správně skládá v závislosti na rozlišení obrazovky, respektive v závislosti na rozměrech okna webového prohlížeče, mi však přijde ideální právě nový Resizer od Google.

Jak testovat responzi

Po načtení domovské stránky Resizeru, klepněte do prostředního horního políčka pro zadání adresy webu, případně si na zkoušku vyberte některý z připravených záznamů.

Zvolený web se poté zobrazí v trojici náhledů odpovídajících notebooku, tabletu a mobilnímu telefonu.

Google Resizer

V pravém horním rohu pak najdete tlačítka pro přepnutí do režimu počítače a mobilního telefonu. Přepnutí probíhá okamžitě, není nutné web znovu načítat jako v jiných nástrojích.

Google Resizer

Když už máte zobrazenu simulaci počítače nebo mobilního telefonu, všimněte si v horní části pravítka ukazujícího rozměry plochy pro zobrazení webu. Znázorňuje různá rozlišení, myší můžete přes pravítko přejet a klepnutím zvolené rozlišení okamžitě zobrazit. Rychle tak otestujete, jak se web přeskládá.

Google Resizer

V prostředním políčku pravítka je po přepnutí navíc zobrazen slovní popis zvoleného rozlišení.

A to je vše. Nic navíc Google Resizer nedovede, ale ta jednoduchost a rychlost, s jakou responzi otestujete v nejpoužívanějších rozlišeních displejů, je prostě k nezaplacení. Přesvědčte se sami.

Tagy
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru