Jak testować responsywne projekty za darmo
"Przestań zmieniać rozmiar tej przeglądarki, będziesz ją nosić!" Ile razy ją słyszałeś? No dobrze, może nie tak wiele razy, ale jeśli tworzysz responsywne strony internetowe z projektowaniem, wiesz o czym mówię: przy każdej edycji DOM lub CSS przeciągasz krawędź przeglądarki, testując zmiany i szukając wszystko zepsute.
Ostatecznie, większość tego wysiłku jest próbą emulacji rozmiaru ekranu różnych urządzeń.
Jeśli pracujesz nad rozwojem firmy, możesz przetestować różne urządzenia dostarczane przez firmę. Gdzie pracuję, mamy iPada, iPoda, jeden lub dwa inne tablety, laptopy i komputery stacjonarne. Jeśli nie masz tego luksusu, musisz użyć tego, co masz pod ręką.
W moim domu mamy dwa różne laptopy, dwa różne urządzenia z Androidem, Kindle i Nexus 7. Są to urządzenia, których używam do testowania mojego rozwoju freelancerów, ale wyraźnie nie jest to wyczerpująca kolekcja. W ogóle nie ma urządzeń z systemem iOS i chociaż jestem trochę początkującym użytkownikiem, nie planuję kupować każdego nowego telefonu / phableta / tabletu, gdy trafi on na rynek.
Co więc powinien zrobić programista? Na szczęście istnieje coraz więcej dostępnych narzędzi przeglądarkowych, które emulują ekrany różnych urządzeń. Różne narzędzia mają oczywiście różne zestawy funkcji i różne poziomy użyteczności. Przyjrzymy się kilku z nich tutaj.
Do celów testowych użyłem pierwszej prawdziwie responsywnej strony, którą stworzyłem, PajamasOnYourFeet.com. Ta strona jest oparta na Szablon HTML5 Brownie bardzo łaskawie udostępnione społeczności programistów za darmo na EGrappler.
Czy jestem responsywny?
Czy jestem responsywny? jest martwym, prostym, natychmiastowym widokiem Twojej witryny, tak jak wyświetlałby się na czterech różnych urządzeniach. Wszystkie cztery to iOS, a deweloper wyjaśnia, że skupiają się na stronie. Nie oferuje kontroli i nie ma wyboru, tylko bardzo prosta, elegancka prezentacja.
Rozmiary rzutni to
- Pulpit - 1600 x 992px przeskalowany do skali (0.3181)
- Laptop - 1280 x 802 pikseli w skali (0.277)
- Tablet - 768 x 1024px zmniejszony do skali (0,219)
- Mobilny - 320 x 480px zmniejszony do skali (0,219)
Cytując programistę: "To nie jest narzędzie do testowania, naprawdę ważne jest, aby to zrobić na prawdziwych urządzeniach. Zamiast tego jest to narzędzie do szybkiego tworzenia zrzutów ekranu (dla mnie) i wizualnego umożliwienia ludziom "zdobycia" tego, co masz na myśli podczas spotkań z klientami. "
Dwie bardzo ładne funkcje to możliwość przeciągania "urządzeń" w dowolnym miejscu na ekranie oraz możliwość osadzenia witryny testowej w łączu, który można udostępnić. W przeglądarce Firefox, przynajmniej ze strukturą witryny testowej, boczny pasek przewijania na iPhonie nie jest wyświetlany, ale działa w IE i Chrome.
deviceponsive
deviceponsive jest podobny do Am I Responsive? w ten sposób po prostu i czysto wyświetla twoją witrynę, bez żadnych kontroli i opcji, jeśli chodzi o urządzenia. Wszystkie urządzenia są wyświetlane jednocześnie na jednej długiej stronie. Ma ciekawą funkcję, dzięki której możesz dostosować nagłówek strony, edytując kolor tła nagłówka i osadzając własne logo, a następnie udostępniając go za pomocą przechwytywania ekranu. Pozwala to na brandowanie witryny w pewien sposób, gdy udostępniasz zrzuty ekranu klientowi.
Urządzenia i rozmiary ekranów emulowanych na tej stronie są
- Macbook - 1280 x 800
- Portret na iPada - 768 x 1024
- Krajobraz iPada - 1024 x 768
- Portret Kindle - 600 x 1024
- Kindle krajobraz - 1024 x 600
- Portret na telefonie iPhone - 320 x 480
- Krajobraz iPhone'a - 480 x 320
- Portret galaktyki - 240 x 320
- Krajobraz Galaxy - 320 x 240
Podobnie jak w przypadku większości tych narzędzi paski przewijania są wyświetlane na mniejszych urządzeniach. Na rzeczywistym urządzeniu nie byłyby wyświetlane, ale aby umożliwić przewijanie widoku testowego na urządzeniu przewijania bez dotyku, konieczne są pewne ustępstwa.
test responsywny
Podobnie jak programista, test responsywny wyświetla Twoją witrynę na różnych urządzeniach, ale zamiast wyświetlać je wszystkie na raz, wybierasz urządzenie, które chcesz wyświetlić z prostego menu u góry strony. Przeglądając tę stronę na średniej wielkości laptopie, stwierdziłem, że powiększanie strony działa dobrze, co pozwala zobaczyć całą witrynę testową w ramce urządzenia testowego.
Dostępnych jest trzynaście różnych widoków, od dużego monitora komputerowego po to, co nazywają "Crappy Android" (aby być uczciwym, mają też opcję o nazwie "Lepszy Android").
Jeszcze raz Firefox to przeglądarka, która trochę potyka się na tej stronie. Zauważ, że na zrzucie ekranu między zielonym nagłówkiem a obszarem białym tłem znajduje się tylko niebieski pasek, w którym powinien być wyświetlany suwak obrazu.
responsive.is
Całkiem podobne do poprzednich dwóch pozycji, jedna rzecz, która ustawia responsive.is oprócz nich jest płynna animacja z jednego wyświetlacza urządzenia do drugiej i półprzezroczysta nakładka, która pokazuje nieruchomość witryny, która wypada poza obszar wyświetlania.
Jedynymi opcjami dostępnymi tutaj są auto, które wypełnia okno przeglądarki, pokazując stronę tak, jak byś zobaczył, gdybyś tam poszedł, Desktop; Tablet Krajobraz; Portret tabletu; SmartPhone Landscape; i Portret smartfonu, wymiary pikseli nie są podane.
Screenqueries
Ponownie zestawiono kilka różnych funkcji i opcji Screenqueries nieznacznie od innych. W zestawie znajduje się 14 zestawów słuchawkowych i 12 tabletów z oddzielnym sterowaniem umożliwiającym przełączanie między trybem portretu i krajobrazu. Wyświetlane są na ponumerowanej siatce pikseli, z wymiarami pokazanymi w prawym dolnym rogu ekranu testowego. Krawędzie ekranu można przeciągać, dzięki czemu można przetestować niestandardowe rozmiary. Przesuń kursor myszy na obszar testowy lub kliknij go, a tło zmieni kolor na szary, zapewniając mniejszy widok.
Ciekawą cechą tej strony, dla kilku urządzeń jest opcja "TrueView", która pokazuje twoją witrynę zawiniętą w chrome przeglądarki określonego urządzenia.
Niestety i już się do tego przyzwyczaję, Firefox nie wyświetla strony z obrazem witryny testowej. Nie płon mnie, Firefox jest moją ulubioną przeglądarką, ale na szczęście mamy opcje.
Screenfly
Screenfly naprawdę podnoszą iloraz użyteczności. Oferuje dziewięć większych tabletów, od 10 "notebooków do 24", pięć tabletów, dziewięć smartfonów, trzy rozmiary telewizorów i niestandardową opcję rozmiaru ekranu. Każda wybrana opcja może zostać zmieniona na pionową lub poziomą za pomocą osobnego menu. Możesz zezwolić na przewijanie lub nie i możesz wygenerować link do udostępniania za pomocą kliknięcia przycisku.
Witryna jest proaktywnie użyteczna, ponieważ prezentuje informacje o wymiarach pikseli. Każde urządzenie w menu jest wyświetlane z wymiarami nazwy i piksela, wymiary rzeczywistego okna przeglądarki są wyświetlane w prawym górnym rogu okna, a wymiary wybranej opcji są wyświetlane w stopce pod wyświetlaczem wraz z adresem URL strona testowana. Ta niewielka funkcja dodaje miłego akcentu do dokumentowania zrzutów ekranu i udostępniania informacji klientom.
Wszystko to sprawiłoby, że byłoby to doskonałe narzędzie, ale programiści Screenfly zadbali o to, aby go wydobyć z jednego dużego nacięcia i zapewnić funkcję serwera proxy. Cytując z ich strony, "Screenfly może używać serwera proxy do naśladowania urządzeń podczas przeglądania witryny. Serwer proxy naśladuje ciąg agenta użytkownika wybranych urządzeń, ale nie zachowanie tych urządzeń. "
Wszystkie inne omówione tutaj narzędzia dotyczą wyłącznie CSS. Screenfly jest jedynym, który umożliwia testowanie na podstawie ciągu agenta.
Testowanie w jednej witrynie, którą stworzyłem, która zapewnia wersję mobilną na podstawie ciągu agenta, wyniki dla witryny mobilnej były bardzo dobre. Rzeczy wyświetlane dokładnie tak, jak się spodziewałem, a funkcje były testowalne. Trzeba przyznać, że testowanie ciągów agentów to stara szkoła, ale ta strona została "przywrócona", a funkcja serwera proxy jest użytecznym dodatkiem do tej strony.
Wniosek
Widzimy więc, że jest sporo zasobów do testowania twoich responsywnych stron. Zróżnicowane według unikalnych funkcji, które witryny mogą być używane, będą oparte na Twoich indywidualnych preferencjach i wymaganiach, i zachęcam do eksplorowania i eksperymentowania z nimi. Im więcej naprawdę użytecznych narzędzi mamy jako twórcy stron internetowych, tym lepiej.
Czy używasz któregoś z tych narzędzi? Jak testujesz swoje responsywne projekty? Daj nam znać w komentarzach.