7 bezpłatnych narzędzi do testowania responsywnych układów
Każda strona internetowa powinna być zaprojektowana z responsywnym podejściem. Abyś był na dobrej drodze, wczesne testowanie i często, za pomocą dowolnego z tych narzędzi do testowania, sprawi, że Twój projekt będzie wyglądał dokładnie we wszystkich przeglądarkach i we wszystkich rozmiarach okienek.
Każda nowoczesna strona internetowa potrzebuje responsywny projekt . To wymaga więcej wysiłku, ale efekt końcowy jest opłacalny.
Naprawdę polecam testowanie Twoich pomysłów za pomocą elastycznych narzędzi do projektowania, aby zobaczyć, jak Twoja witryna wygląda na każdym etapie. Możesz sprawdzić problemy z użytecznością na różnych rozmiarach ekranu, wszystko z jednego poręcznego narzędzia.
Te bezpłatne narzędzia to moje najlepsze narzędzia do testowania elastycznego, ponieważ wszystkie są bardzo łatwe w użyciu. Najlepsze z nich obsługują wiele rozmiarów urządzeń, dzięki czemu można uzyskać wrażenie, jak układ powinien wyglądać od smartfonów po komputery stacjonarne.
1. XRespond
The Aplikacja XRespond nazywa się "laboratorium urządzeń wirtualnych" i powiedziałbym, że jest to całkiem niezłe miejsce.
Dzięki tej witrynie możesz sprawdzić, jak każda witryna wygląda na różnych urządzeniach. Witryna działa w długim, poziomym stylu, gdzie trzeba przewijać w bok, aby zobaczyć wszystkie formaty ekranu.
Etykieta nad każdym ekranem informuje o dokładnym rozmiarze i urządzeniu, do którego pasuje. Dodatkowo z rozwijanego menu jest szeroki wybór smartfonów, tabletów i laptopów do testowania konkretnych urządzeń.
To menu rozwijane obsługuje nawet niestandardowe ustawienie szerokości / wysokości, jeśli chcesz zobaczyć, w jaki sposób witryna wyświetla się na poszczególnych monitorach. Doskonałe narzędzie do testowania responsywnego projektowania i obsługuje wiele różnych stylów urządzeń.
2. Responsinator
Jedną z podobnych aplikacji, która może ci się podobać, jest Responsinator .
Zamiast używania poziomego paska przewijania ta strona wyświetla podgląd każdego urządzenia w pionowej kolumnie. W ten sposób możesz przewinąć w dół każde urządzenie i wyświetlić podgląd strony na każdym z nich.
Urządzenia obejmują najbardziej popularne iPhony i urządzenia z Androidem Nexus, zarówno z podglądem pionowym, jak i krajobrazowym. Znajdziesz tu również podglądy urządzeń iPad również w układzie pionowym i poziomym.
Kolejną fajną funkcją jest przełączanie między HTTP i HTTPS. Responsinator oferuje oba typy do podglądu witryn w zależności od wpisanego adresu URL. Automatycznie dopasuje się do podglądu witryny, aby uniknąć błędów SSL.
3. Responsive Design Checker
Potrzebujesz szybko sprawdzić, czy strona naprawdę reaguje? Następnie spróbuj tego użyć Responsive Design Checker wykonane specjalnie dla niestandardowych rozmiarów ekranu.
Po wprowadzeniu adresu URL masz pełną kontrolę nad elastycznym obszarem testowania. Możesz zmienić szerokość / wysokość, jak chcesz, a nawet użyć go do dopasowania niektórych proporcji ekranu, jeśli używasz narzędzie proporcji .
Na pasku bocznym znajdziesz mnóstwo wstępnie zdefiniowanych rozmiarów ekranu popularnych urządzeń, takich jak tablety Nexus, Kindles, a nawet nowsze telefony, takie jak Google Pixel.
Witryna obsługuje również duże ekrany z monitorami biurkowymi o szerokości do 24 cali . Zaskakująco, te duże rozmiary sprawdzają się nawet na małych monitorach, ponieważ okno podglądu zmienia rozmiar w oparciu o współczynnik, a nie całkowitą szerokość piksela.
Więc jeśli próbujesz przetestować monitory 1920px na swoim mniejszym ekranie MacBooka, to narzędzie jest warte dodania zakładek.
4. Test mobilny Google
Google jest pełne wspaniałych narzędzi dla webmasterów i ich Test przyjazny mobilności jest jednym z takich przykładów.
To narzędzie do testowania nie jest tak naprawdę przeglądarką i nie pomaga wykryć błędów interfejsu użytkownika. Zamiast tego jest to dedykowane narzędzie mobilne do wskazywania problemów w Twojej witrynie na urządzeniach mobilnych.
Po uruchomieniu testu przekaż lub przejdziesz jako witryna przyjazna dla urządzeń mobilnych. Jest to trochę zbyt ogólne dla projektantów, ale Google oferuje wskazówki oparte na obszarach problemowych i elementach strony, które mogą wymagać ulepszeń.
Zachowaj to jako wiarygodne narzędzie do testowania urządzeń mobilnych. Nie jest to kompletny zasób do testowania responsywnego, ale jest doskonałym miejscem do zbierania informacji i pochodzi od prawdopodobnie najbardziej autorytatywnej firmy w Internecie.
5. Responsywne narzędzie Matta Kersley'a
Projektant i programista Matt Kersley wydał własne za darmo narzędzie do testowania dla responsywnych układów. Ten jest o wiele prostszy niż inne i nie ma wielu dodatków.
Zamiast tego jest to zwykły wbudowany podgląd strony z 5 stałymi szerokościami: 240px, 320px, 480px, 768px, 1024px.
Okienka podglądu mają paski przewijania, dzięki czemu możesz swobodnie poruszać się po treści. Nie można jednak klikać żadnych łączy ani przeglądać innych stron w panelach, więc jest to najlepsze rozwiązanie do testowania pojedynczych stron.
Ale dla prostego narzędzia, które wykonuje zadanie, działa to świetnie i jest to jedno z niewielu narzędzi testowych, które domyślnie oferuje szerokość 240 pikseli.
6. Czy jestem responsywny?
Prawdopodobnie nie będziesz potrzebować tego narzędzia, jeśli szukasz dokładności w pikselach.
Zamiast tego Czy jestem responsywny? strona internetowa działa najlepiej w celu szybkiego sprawdzania i podglądu na kilku popularnych typach urządzeń.
Po prostu wpisujesz URL strony internetowej i ładuje się do czterech paneli podglądu urządzenia: smartfona, tabletu, laptopa i komputera. Nie mają one skali, więc patrzysz na stronę tylko jako wskaźnik.
Ale to jest naprawdę fajne, jeśli chodzi o pobieranie zrzutów ekranu z twojej strony, aby pokazać, jak wygląda na różnych urządzeniach. Renderowanie jest dokładne i zależy od przeglądarki w celu prawidłowego renderowania.
Dodatkowo to narzędzie pozwala uruchamiać adresy localhost, dzięki czemu można nawet sprawdzić projekty, które są budynek lokalnie w Twoim komputerze.
7. Test responsywny Designmodo
Jeszcze jedno narzędzie, które naprawdę lubię, to Responsive Web Design Tester stworzony przez Designmodo. To bezpłatne narzędzie ponownie umożliwia podgląd witryny w przeglądarce na podstawie określonych szerokości.
Ale jedynym fajnym dodatkiem do tego narzędzia jest konfiguracja strony oparta na siatce. Możesz sprawdzić swoją stronę pod kątem punktów pikseli, a nawet uczyć się siatka strony za pomocą tej aplikacji internetowej.
Oprócz predefiniowanych szerokości urządzenia możesz również przeciągnąć panel podglądu, aby dopasować się do testowanych szerokości ekranu. Ma wejścia dla szerokości / wysokości, jeśli musisz wprowadzić również rozmiary ręcznie.
Jednak każda ikona urządzenia w prawym górnym rogu pozwala wybierać spośród dziesiątek popularnych rozmiarów ekranu, dzięki czemu jest to idealne narzędzie do sprawdzania dowolnych urządzeń, jakie możesz sobie wyobrazić.
