Responsively App: téměř vše, co potřebujete pro testování responsivních webů

Jak kontrolujete vzhled svých webů na různých zařízeních? Máte je fyzicky? Škubete velikostí okna a koukáte, jak se web mění? Používáte responsivní zobrazení v nástrojích pro vývojáře? Nebo používáte něco sofistikovanějšího? Zkuste multiplatformní program Responsively App a nebudete používat nic dalšího.
reklama

Já i kolega, který mi pomáhá s frontendem používáme pro testování responze asi tu největší klasiku. Nástroje pro vývojáře zabudované dnes v každém webovém prohlížeči, které umožňují změnit velikost displeje použitelné pro web a případně i měnit identifikátor zařízení.

Myslím si, že to postačí pro většinu případů. Zlomek z nich vyžaduje kvůli odlišnostem ve vykreslování fyzické zařízení, zejména věci od Apple. Co se týče nejrůznějších verzí webových prohlížečů a podpory starého ošklivého Internet Exploreru, řeším to díky online službě BrowserStack.

Nicméně i obyčejná změna velikosti okna pro zobrazení webu může být propracovanější. Vývojářské nástroje v prohlížeči mají jednu nevýhodu. Otevřete jedno rozlišení, zkontrolujete, případně odladíte a jdete na další. Nekonečně dlouho měníte myší velikost plochy pro web, abyste zjistili, zda u nějakého exotického rozlišení není problém.

Více náhledů najednou s Responsively App

Program Responsively App toto výrazně zjednodušuje. Najednou totiž zobrazí několik náhledů webu v různém rozlišení. Zároveň synchronizuje posouvání po webu. Jedním pohledem tak zkontrolujete více rozlišení. Nebo chcete-li zobrazení webu na více zařízeních najednou.

Stačí zadat adresu do rozhraní podobného klasickému webovému prohlížeči a počkat na načtení stránky v jednotlivých náhledech. Jakmile točíte myší nebo šudláte po touchpadu, posunují se postupně všechny náhledy.

Pomohlo mi to uvědomit si, jaký je rozdíl v informacích, které se vejdou na obrazovku hned po načtení webu. Když si člověk prohlíží jedno zařízení po druhém, tak mu to tolik nepřijde, ten rozdíl zkrátka nevnímáte.

Responsively App

Nejenom synchronizované prohlížení různých náhledů

Přestože to tak na první pohled nevypadá, je Responsively App docela sofistikovaná pomůcka. Každý z náhledů lze nezávisle otáčet. Kde vám to vadí, tak synchronizované prohlížení vypnete. Mimochodem, nejsou to mrtvé náhledy. Můžete v nich klikat jako ve skutečném prohlížeči a všechny pak stejně zareagují.

Potřebujete screenshot stránky ve vybraném rozlišení? Taky žádný problém. Responsively App vám jej na požádání pořídí pro jedno zařízení nebo pro všechny najednou, podle toho, které tlačítko s ikonkou fotoaparátu stisknete. Screenshot samozřejmě zabere celou stránku, nikoli zrovna viditelnou oblast.

Řada webů v poslední době řeší přepínání stylů podle toho, zda má uživatel nastaveno normální nebo tmavé schéma vzhledu v počítači. I mezi ním se lze jedním stiskem tlačítka v liště vedle adresy přepínat.

Když jen nekontrolujete, ale jste vývojář

Programů, které zobrazí náhled webu v různých rozlišeních je samozřejmě více. Responsively App ale nekončí jen u zobrazení. Máte zde k dispozici klasicky prohlížení elementů na stránce s konzolí.

Další prima funkcí je mazání cookies – třeba pro otestování zobrazení upozorňovací lišty nebo přihlašování. Mazat lze rovněž úložiště. Klávesové zkratky nebo nabídka View umožňují rychle načíst web i bez použití cache. Zajímavá je možnost načíst znovu jenom CSS.

Kolik jen zařízení chcete

V základu jsou zobrazena čtyři zařízení, resp. náhledy na web odpovídající jejich rozměrům. Tedy iPhone 6/7/8 Plus, iPhone X, iPad a simulace laptopu s rozlišením 1280 x 950. Přidat můžete libovolná další, ať už se svým definovaným rozměrem, tak z nabídky v připravené databázi. Aktivní zařízení lze různě filtrovat, aby vám ze všech těch náhledů nešla hlava kolem.

Responsively App je postavena na frameworku Electron, je open source s kódem na GitHubu a v tuto chvíli každých pár dní přibývají nějaká vylepšení. Stáhnete si ji ve verzi pro Windows, Linux nebo macOS.

Přiznám se, že ji mám nainstalovanou asi dva týdny a od té doby jsem ji ještě nevypnul. Zcela jistě mi tento program v počítači zůstane a objeví se na konci roku v pravidelné softwarové inventuře. Zkuste jej také.

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

návštěvník

Vrelá vďaka za tip, už to mám nainštalované a vyzerá to super!

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