9 najlepszych narzędzi i witryn do testowania responsywnych witryn internetowych

Wszyscy tam byliśmy…

Strona, którą projektujesz, świetnie wygląda na Twoim laptopie, telefonie i tablecie. Ale wtedy ktoś pokazuje Ci zrzut ekranu przedstawiający wygląd witryny na jego urządzeniu, a Ty po prostu chcesz płakać. To, co prawdopodobnie się wydarzyło, to to, że są na ekranie z punktem załamania, dla którego nie testowałeś swojego projektu.

W tej chwili projektowanie responsywne nie wymaga myślenia. Twoje projekty muszą wyglądać dobrze na każdym ekranie. Jeśli jesteś użytkownikiem Divi, masz już zestaw praktycznych narzędzi, które pomogą Ci w responsywnym projektowaniu. Niemniej jednak zawsze dobrym pomysłem jest sprawdzenie jak największej liczby rzutni. Najlepiej mieć jedno okno z Divi Builder, a drugie z responsywnym narzędziem, które można regularnie odświeżać.

Niektórzy wolą projektować „z myślą o urządzeniach mobilnych”, inni robią to jednocześnie, a jeszcze inni projektują najpierw komputery stacjonarne, a potem dostosowują się do mniejszych ekranów. Bez względu na proces, musisz mieć odpowiednie narzędzia, aby sprawdzić, jak responsywna jest Twoja witryna.

Właśnie dlatego zestawiliśmy tę listę z niektórymi z najbardziej praktycznych narzędzi i witryn do testowania responsywnych stron internetowych. Wypróbuj je i przekonaj się, z którym najbardziej Ci odpowiada.

Zanurzmy się.

Subskrybuj nasz kanał YouTube

Sprawdź narzędzie w Chrome

Pierwsze responsywne narzędzie testowe na liście znajduje się bezpośrednio w przeglądarce Chrome. To samo narzędzie, którego używasz do sprawdzania kodu witryny, ma również funkcję testowania rozmiarów ekranu i widocznych obszarów. Kliknij prawym przyciskiem myszy dowolną witrynę i kliknij „Sprawdź”. Po otwarciu okna kontroli zobaczysz ikonę urządzeń obok przycisku o nazwie „Elementy”. Po kliknięciu przycisku urządzeń na ekranie wyświetla się witryna, na której się znajdujesz, w różnych punktach przerwania.

Możesz wprowadzić określony rozmiar lub po prostu chwycić i przeciągnąć róg okna, aby ręcznie zmienić punkt przerwania. Jest to świetne do sprawdzenia, jak projekt dostosowuje się do różnych rzutni.

Responsywne narzędzie testowe

Responsive Test Tool jest jak większość responsywnych witryn testowych, możesz wprowadzić adres URL strony, którą chcesz przetestować, w pasku wyszukiwania u góry ekranu. To konkretne narzędzie ma do wyboru długą listę wstępnie ustawionych rozmiarów urządzeń. Jeśli potrzebujesz innego rozmiaru, możesz wybrać niestandardowe pomiary rozmiaru. Jeśli chcesz sprawdzić zmiany w projekcie, po prostu kliknij przycisk „Sprawdź”, aby ponownie załadować. W oknie testowym znajduje się przycisk do przełączania funkcji przewijania oraz przycisk „obróć”, który umożliwia sprawdzenie zarówno układu pionowego, jak i poziomego.

Twórca tego narzędzia stworzył również system grid dla responsywnych stron internetowych. Znajdziesz go na ikonie żarówki w prawym górnym rogu.

Wypróbuj to narzędzie

Responsywny kontroler projektu

Responsive Design Checker to witryna z wieloma wstępnie ustawionymi rozmiarami ekranu i opcją niestandardowego rozmiaru. To, czego brakuje temu narzędziu w porównaniu do narzędzia powyżej, to numerowana linijka u góry ekranu i przycisk obracania. Cechą wspólną jest to, że przycisk „Idź” działa w ten sam sposób, po prostu kliknij go, gdy dokonałeś zmiany w projekcie i chcesz sprawdzić wyniki.

Wypróbuj to narzędzie

Mody projektowe

Design Modo to narzędzie do tworzenia stron internetowych i wiadomości e-mail z bezpłatnym, responsywnym narzędziem testowym w ramach swojej witryny. To narzędzie ma wszystkie cechy dwóch powyższych narzędzi, a także przycisk przeciągania, aby zobaczyć, jak zmienia się projekt, gdy rzutnia się kurczy i rozszerza. Oczywiście działa również jako narzędzie do generowania reklam i leadów dla ich głównych usług. Jedyną przeszkodą jest to, że pomiary pokazywane przez narzędzie dotyczą rozdzielczości, a nie widoku. To może być trochę mylące.

Wypróbuj to narzędzie

ScreenFly

Screenfly to kolejna strona internetowa z tymi samymi responsywnymi funkcjami testowania, co w powyższych przykładach, ale ustawienia wstępne są nieco przestarzałe. Ostatnie ustawienie wstępne iPhone'a to 7X. Niemniej jednak narzędzie nadal działa dobrze i ma funkcję niestandardowego rozmiaru, przyciski obracania i odświeżania oraz przełącznik przewijania.

Wypróbuj to narzędzie

Responsinator

Responsinator jest nadal jedną z najpopularniejszych aplikacji do testowania responsywnych stron internetowych, prawdopodobnie dlatego, że wygląda tak fajnie. Po dodaniu adresu URL wyświetla witrynę na wielu różnych urządzeniach mobilnych, zarówno w układzie pionowym, jak i poziomym. To narzędzie jest praktyczne do szybkiego sprawdzania w najpopularniejszych urządzeniach, ale jest ograniczone, jeśli chcesz sprawdzić wszystkie punkty przerwania.

Wypróbuj to narzędzie

Czy odpowiadam?

Am I Responsive jest podobny do Responsinator, ponieważ pokazuje stronę testową w określonej liczbie urządzeń. Zaletą tego narzędzia jest to, że możesz wykonać zrzut ekranu wyników i użyć go w swoim portfolio. Ponadto każdy ekran można przewijać niezależnie.

Wypróbuj to narzędzie

Pixeltuner

Pixeltuner to strona podobna do Responsinator. Narzędzie pokazuje tylko 6 rozmiarów ekranu, ale to dobry wybór. Dzięki tym sześciu rozmiarom możesz być pewien, że pokryłeś wszystkie podstawy. Brakuje tylko większych rozmiarów ekranu powyżej 1500 pikseli.

Wypróbuj to narzędzie

Responsywny tester projektowania stron internetowych

Responsive Web Design Tester to nie strona internetowa, to rozszerzenie przeglądarki. Znajdziesz go w rozszerzeniu lub bibliotece dodatków przeglądarki. Poniższy link dotyczy rozszerzenia Chrome, ale narzędzie działa również w przeglądarkach Safari i Firefox. Po kliknięciu ikony rozszerzenia możesz wybrać z listy ustawień wstępnych, a następnie witryna otworzy się w nowym oknie w wybranym rozmiarze rzutni. Presety są nieco przestarzałe, ale możesz dodawać nowe urządzenia i tworzyć własne preferowane grupy.

Wypróbuj to narzędzie

Podsumowujemy naszą listę Responsywne narzędzia do testowania projektów i witryny

Projektując w Divi, masz możliwość dostosowania układów do ekranów pulpitu, tabletu i telefonu. Opcje w Divi są bardzo praktyczne i mogą pomóc w uzyskaniu idealnego wyglądu układu dla każdego rozmiaru ekranu. Ale zawsze w twoim najlepszym interesie jest użycie dodatkowego narzędzia, które obsługuje responsywne projekty Divi.

Jakiego narzędzia używasz? Czy wspomnieliśmy o tym tutaj? Wybraliśmy narzędzia z tej listy, ponieważ wszystkie są praktyczne i łatwe w użyciu. Niektóre są lepsze od innych, a ten, którego potrzebujesz, zależy od tego, jak złożony jest Twój projekt. Wypróbuj je, aż znajdziesz swój ulubiony i daj nam znać, który to jest.

Polecane zdjęcie za pośrednictwem aurielaki / shutterstock.com