Sedem skvelých nástrojov na testovanie vašich responzívnych webových návrhov

Každý moderný webový dizajnér by mal poznať princípy responzívneho webdizajnu - ako dosiahnuť, aby sa vaše stránky vykresľovali perfektne na akomkoľvek zariadení alebo veľkosti obrazovky, na ktorej sa zobrazujú. (Ak potrebujete osviežovač, pozrite si naše sprievodca profesionálneho responzívneho webdizajnu ).

Ale teória je jedna vec a prax druhá. Ak chcete zaistiť, aby váš web plne reagoval, musíte ho skutočne otestovať na rôznych zariadeniach.

prvok 3d pre dodatočné efekty cc

Väčšina z nás však nemá rozpočet na to, aby získala stovky fyzických zariadení, ktoré by ste potrebovali na vykonanie testu v reálnom svete. Ale nebojte sa! Tieto nástroje poskytujú dom na polceste tým, že vám umožňujú testovať vaše responzívne návrhy vo virtuálnom prostredí.



01. Responzor

Pomocou nástroja Responsinator si môžete pozrieť, ako vyzerá váš web v rôznych výrezoch

Pomocou nástroja Responsinator si môžete pozrieť, ako vyzerá váš web v rôznych výrezoch

Krása Responsinátora spočíva v jeho jednoduchosti. Stačí zadať adresu URL svojej webovej stránky a tento bezplatný nástroj založený na prehliadači vám ukáže, ako sa vaša webová stránka vykresľuje v najobľúbenejších tvaroch a veľkostiach obrazovky.

Vynikajúco môžete pracovať so svojou stránkou kliknutím na odkazy, písaním do vyhľadávacích polí atď. Upozorňujeme, že ide o všeobecné zariadenia, nie o konkrétne.

02. Screenfly

Skontrolujte, ako sa váš web zobrazuje na rôznych zariadeniach, vrátane televízorov, pomocou aplikácie Screenfly

Skontrolujte, ako sa váš web zobrazuje na rôznych zariadeniach, vrátane televízorov, pomocou aplikácie Screenfly

Screenfly je bezplatný nástroj na testovanie webových stránok na rôznych veľkostiach obrazovky a rôznych zariadeniach. Existuje už pár rokov, ale stále je populárny a svoju prácu robí mimoriadne dobre.

Stačí zadať adresu URL, v ponukách zvoliť zariadenie a veľkosť obrazovky a uvidíte, ako dobre na tom váš web funguje. Medzi podporované zariadenia patria stolné počítače, tablety, televízory a smartfóny.

03. Režim zariadenia Google DevTools

Režim zariadenia DevTools emuluje rôzne zariadenia v prehliadači Chrome

Režim zariadenia DevTools emuluje rôzne zariadenia v prehliadači Chrome

Režim zariadenia DevTools ponúka vývojárom jednoduchý spôsob simulácie mobilných zariadení v prehliadači Chrome. Pomocou neho sa dozviete, ako sa váš web zobrazuje v rôznych veľkostiach a rozlíšeniach obrazoviek, vrátane obrazoviek Retina.

V emulátore môžete dokonca simulovať vstupy zariadenia pre dotyk, geolokáciu a orientáciu zariadenia.

04. Google Resizer

Resizer vám pomôže určiť hraničné hodnoty Material Design pre vaše responzívne stránky

Resizer vám pomôže určiť hraničné hodnoty Material Design pre vaše responzívne stránky

Pokyny týkajúce sa materiálového dizajnu spoločnosti Google zahŕňajú rady týkajúce sa používania hraničných bodov, responzívnych mriežok, správania sa povrchov a vzorov používateľského rozhrania. A minulý rok uviedla na trh bezplatný nástroj, vďaka ktorému môžete vidieť, ako vyzerá nasledovanie tohto usmernenia na zariadeniach zo skutočného sveta.

Google Resizer vám umožňuje zadať vlastnú adresu URL a zobraziť stránku v rámci hraničných hodnôt Material Design pre počítače a mobilné zariadenia. Ak si chcete najskôr pozrieť ukážku, kliknite na panel s adresou a vyberte možnosť Pestom “Alebo„ Svätyňa ‘Z rozbaľovacej ponuky.

05. Ghostlab

Ghostlab sa zameriava na simultánne testovanie na rôznych zariadeniach a prehliadačoch

Ghostlab sa zameriava na simultánne testovanie na rôznych zariadeniach a prehliadačoch

Ghostlab, platená aplikácia na testovanie webových stránok, vám umožňuje testovať vaše webové stránky súčasne na viacerých prehliadačoch a mobilných zariadeniach. Začnite testovať v jednom prehliadači alebo zariadení a všetky ostatné budú zrkadliť vaše akcie, či už klikáte na odkazy, vyberáte tlačidlá, vypĺňate formuláre alebo načítate stránku znova.

Môžete tiež vziať snímok obrazovky z ľubovoľného zariadenia, anotovať ho a presunúť myšou do nástroja na sledovanie chýb. Vidieť to v akcii v toto video .

06. Zásobník prehľadávača

Browser Stack je platený testovací nástroj zameraný na podnikanie

Browser Stack je platený testovací nástroj zameraný na podnikanie

Browser Stack je jedným z najpokročilejších a najkomplexnejších testovacích nástrojov na svete. Platená aplikácia ponúka na testovacie účely prístup k viac ako 1 000 mobilným a desktopovým prehliadačom. Zoznam sa neustále aktualizuje na základe trendov na trhu a štatistík používania na základe 36 000 zákazníkov prehliadača Stack.

ako skryješ svoje obrázky na facebooku

S používateľmi ako Twitter, Microsoft, AirBnB a Mastercard to zjavne robí dobre.

07. CrossBrowserTestovanie

CrossBrowserTesting ponúka obrovské množstvo zariadení a testovacích funkcií v reálnom svete

CrossBrowserTesting ponúka obrovské množstvo zariadení a testovacích funkcií v reálnom svete

Najväčším súperom Browser Stack v testovacom priestore je CrossBrowserTesting, ktorý ponúka viac ako 1 500 prehliadačov a zariadení, na ktorých si môžete vyskúšať svoj responzívny web.

Jeho platforma typu „všetko v jednom“ vám umožňuje vykonávať paralelné automatizované testy, vizuálne porovnávať snímky obrazovky, posúvať prstom a interagovať s vašim webom na zariadeniach z reálneho sveta a podľa potreby vzdialene ladiť váš kód.