7 bezplatných nástrojů pro testování reaktivních rozvržení
Každá webová stránka by měla být navržena tak, aby reagovala citlivě. Chcete-li udržet vás na správné cestě, testování včas a často s některým z těchto citlivých testovacích nástrojů zajistí, že váš návrh vypadá správně na všech prohlížečích a na všech velikostech výřezů.
Každá moderní webová stránka potřebuje vnímavý design . To vyžaduje více úsilí, ale konečný výsledek je užitečný.
Vlastně doporučuji otestovat své nápady pomocí reagujících nástrojů pro návrh, abyste zjistili, jak se vaše stránky na každé fázi podívají. Můžete hledat problémy s použitelností na různých velikostech obrazovky, a to vše z jednoho praktického nástroje.
A tyto bezplatné nástroje jsou moje nejlepší tipy pro citlivé testování, protože jsou všechny super snadné použití. Nejlepší ze všech těchto nástrojů je podpora mnoha velikostí zařízení, abyste získali dobrý pocit z toho, jak by mělo vypadat vaše uspořádání od smartphonů až po pracovní plochy.
1. XRespond
The Aplikace XRespond nazývá se "laboratoří virtuálních zařízení" a říkám, že je to docela na místě.
Pomocí této stránky můžete zobrazit náhled jakýchkoli webových stránek vypadá na různých zařízeních. Stránky fungují v dlouhém horizontálním stylu, kde je nutné posunout stranou pro zobrazení všech formátů obrazovky.
Značka nad každou obrazovkou vám sděluje přesnou velikost a na které zařízení odpovídá. Navíc z rozbalovací nabídky je k dispozici široký výběr smartphonů, tablet a notebooků pro testování konkrétních zařízení.
Tento rozbalovací panel dokonce podporuje vlastní nastavení šířky / výšky, pokud chcete zjistit, jak se vaše stránky zobrazují na konkrétních monitorech. Vynikající testovací nástroj pro citlivý design a podporuje mnoho různých stylů zařízení.
2. Responsinator
Jedna podobná aplikace, kterou byste si mohli také užít, je Responsinator .
Namísto použití vodorovného rolovacího panelu je na tomto webu uveden každý náhled zařízení ve vertikálním sloupci. Tímto způsobem můžete procházet dolů každým zařízením a zobrazit náhled stránky na každém z nich.
Zařízení zahrnují nejběžnější telefony iPhone a zařízení Android Nexus, a to jak s náhledy na výšku, tak i na šířku. Náhledy zařízení iPad najdete také v portrétu a na šířku.
Další skvělou funkcí je přepnutí mezi HTTP a HTTPS. Společnost Responsinator nabízí obě typy pro prohlížení stránek v závislosti na zadané adrese URL. Bude automaticky odpovídat na jakékoli stránky, které zobrazujete, abyste se vyhnuli chybám protokolu SSL.
3. Odpovědný design Checker
Potřebujete rychle zkontrolovat, zda webové stránky skutečně reagují? Pak zkuste to použít Odpovědný design Checker vytvořené speciálně pro vlastní velikosti obrazovky.
Po zadání adresy URL máte plnou kontrolu nad reakčním testovacím prostorem. Můžete změnit šířku / výšku, kterou chcete, a dokonce ji použít, aby odpovídala určitým poměrek obrazovky, pokud použijete nástroj poměru stran .
Na bočním panelu najdete tunu předdefinovaných velikostí obrazovky pro běžné zařízení, jako jsou tablety Nexus, Kindles a dokonce i novější telefony, jako je například Google Pixel.
Místo také podporuje velké velikosti obrazovky s monitory na ploše až do šířky 24 " . Překvapivě tyto velké velikosti fungují dobře i na malých monitorech, protože podokno náhledu se mění na základě poměru, nikoliv celkové šířky pixelů.
Takže pokud se snažíte otestovat monitory s rozlišením 1920 pixelů na menší obrazovce MacBooku, tento nástroj je dobře zapamatovatelný.
4. Google Mobile Test
Google je plný skvělých nástrojů pro webmastery a jejich Test pro mobilní telefony je jedním z těchto příkladů.
Tento testovací nástroj není ve skutečnosti náhledem a nepomůže vám najít chyby v uživatelském rozhraní. Místo toho je určeným mobilním nástrojem pro určení problémů v rámci vašeho webu v mobilních zařízeních.
Jakmile budou testy spuštěny, budeme prosazovat nebo selhat jako stránky přátelské k mobilním telefonům. To je pro návrháře trochu příliš generické, ale Google nabízí tipy založené na problémových oblastech a prvcích stránek, které by mohly využít zlepšení.
Uložte to jako důvěryhodný mobilní testovací nástroj. Není to kompletní zdroj pro citlivé testování, ale je skvělým místem pro shromažďování informací a pochází zřejmě nejsilnější společnosti na webu.
5. Odpovědný nástroj společnosti Matt Kersley
Návrhář a vývojář Matt Kersley vydal jeho vlastní zdarma testovací nástroj pro citlivé rozvržení. Tenhle je mnohem jednodušší než ostatní a nemá mnoho ozdůbek.
Místo toho je prostý inline náhled stránky s 5 pevnými šířkami: 240px, 320px, 480px, 768px, 1024px.
Panely náhledu vytvářejí posuvníky, díky nimž můžete bez problémů procházet obsah. Nemůžete však kliknout na žádné odkazy nebo procházet jinými stránkami v tabulkách, takže je to opravdu nejlepší pro testování singulárních stránek.
Ale pro jednoduchý nástroj, který provede práci, funguje to skvěle a je to jeden z mála testovacích nástrojů, které ve výchozím nastavení nabízí šířku 240px.
6. Jsem reagující?
Tento nástroj pravděpodobně nebudete potřebovat, pokud hledáte perfektní přesnost pixelů.
Místo toho Jsem reagující? web funguje nejlépe pro rychlé kontroly a náhledy na několika běžných typech zařízení.
Jednoduše zadejte adresu URL webových stránek a načte se do čtyř panelů náhledu zařízení: smartphone, tablet, přenosný počítač a stolní počítač. Nejsou to v měřítku, takže se díváte pouze na místo jako poměr.
Ale je to opravdu skvělý způsob, jak popsat screenshoty vašeho webu, abyste ukázali, jak to vypadá v různých zařízeních. Vykreslení je přesné pro měřítko a závisí na vašem prohlížeči pro správné vykreslování.
Navíc tento nástroj umožňuje spouštět adresy localhost, takže můžete dokonce zkontrolovat projekty, které jste budovat místně na tvém počítači.
7. Odpovědný test Designmodo
Dalším nástrojem, který se mi opravdu líbí, je Odpovědný webový designový tester vytvořil Designmodo. Tento bezplatný nástroj vám umožní znovu zobrazit náhled na stránky ve vašem prohlížeči založené na určitých šířkách.
Ale jeden skvělý doplněk k tomuto nástroji je nastavení stránky založené na mřížce. Můžete zkontrolovat svou stránku na pixelové body a dokonce i na studium stránky mřížky pomocí této webové aplikace.
Vedle předdefinovaných šířky zařízení můžete také přetáhnout podokno náhledu tak, aby odpovídalo šířkám obrazovky, které testujete. Obsahuje vstupy pro šířku / výšku, pokud potřebujete také ručně zadat velikost.
Ale každá ikona zařízení v pravém horním rohu vám umožňuje vybrat z desítek běžných velikostí obrazovky, díky kterým je tento nástroj ideální pro kontrolu jakéhokoli zařízení, které si můžete představit.
