Testowanie responsywności strony internetowej

Nawet doświadczony projektant może napotkać pewne typowe problemy w procesie budowania strony internetowej, zwłaszcza biorąc pod uwagę wszystkie wyzwania, którym należy stawić czoła w trakcie procesu. Jednym z tych wyzwań jest prawidłowe wyświetlanie strony internetowej na różnych urządzeniach. Czy istnieją skuteczne sposoby na ułatwienie sobie pracy?

Mnogość urządzeń wykorzystywanych przez użytkowników do przeglądania Internetu jest prawdziwym koszmarem dla programistów i projektantów stron internetowych. Z tego powodu przed podjęciem decyzji o uruchomieniu strony warto najpierw przetestować jej responsywność. Na szczęście nikt nie będzie wymagał od ciebie zgromadzenia wszystkich urządzeń i przeprowadzania tych testów ręcznie – byłoby to niezwykle trudne, zwłaszcza w przypadku, gdy musiałbyś szukać poszczególnych urządzeń. Z myślą o właśnie takich przypadkach powstał szeroki wachlarz świetnych i łatwo dostępnych narzędzi i rozwiązań do przeprowadzania testów.

Przedstawię poniżej, w jaki sposób przeprowadzamy testy budując stronę korporacyjną, jak również gdy podejmujemy się prac Drupal developmentu. Pragnę jednak podkreślić, że nie ma jednego uniwersalnego rozwiązania, a zatem należy wybierać mądrze i odnajdywać rozwiązania takie, które w pełni zaspokajają potrzeby.

Responsinator

Narzędzie Responsinator jest naprawdę łatwe i szybkie w użyciu. Wystarczy tylko podać adres URL strony internetowej i kliknąć przycisk „GO”. Następnie zobaczysz, jak Twoja strona będzie wyglądała na różnych urządzeniach (przede wszystkim na sprzęcie Apple). Możesz przeglądać stronę, sprawdzić wszystkie klikalne elementy i.... wyciągać wnioski na temat tego, co należy zmienić.

Mobile Browser Emulator

Kolejne narzędzie – Mobile Browser Emulator – to rozszerzenie przeglądarki Chrome. Narzędzie to pomoże ci sprawdzić, jak będą wyglądały strony, nad którymi pracujesz w najczęściej występujących rozdzielczościach ekranu, typowych dla 90% odwiedzających. Rozszerzenie działa również na plikach lokalnych, więc może być pomocne przy projektowaniu całkowicie nowych usług.

resizeMyBrowser

Narzędzie resizeMyBrowser zostało opracowane z myślą o sprawdzaniu, w jaki sposób są wyświetlane strony w piętnastu popularnych rozdzielczościach. Na pierwszy rzut oka rozwiązanie wydaje się podobne do niektórych narzędzi wymienionych w artykule. Zapytasz pewnie, czy są zatem jakieś różnice? Odpowiedź brzmi – tak! Narzędzie resizeMyBrowser może okazać się bardzo pomocne w sytuacji, w której będziesz budować stronę internetową, która będzie musiała wyglądać świetnie na niestandardowych urządzeniach – obsługuje bowiem niestandardowe rozdzielczości ekranu. Dodatkowo, narzędzie pozwala ci wybrać zarówno zewnętrzny rozmiar okna (outerWindow, obejmującego pasek narzędzi, pasek adresu i inne elementy) lub wewnętrzny rozmiar okna (innerWindow, obejmujący tylko samo okno przeglądarki), w którym zostanie wyświetlony projekt

Google Resizer

Google Resizer jest narzędziem, które pomaga projektantom stron internetowych w testowaniu interfejsów użytkownika, które zostało opracowane dla użytkowników Material Design (języka wizualnego do budowania cyfrowych doświadczeń). Za pomocą tego narzędzia możesz przetestować swój projekt na różnych platformach w celu wykrycia wad i sprawdzenia działania responsywności. Wystarczy wpisać adres URL strony internetowej w pasku i sprawdzić, jak strona wygląda zarówno na komputerach stacjonarnych, jak i na telefonach komórkowych. Dodatkowo narzędzie oferuje dwa projekty demonstracyjne, które pokazują jego możliwości i działanie funkcji.

Ghostlab

Większość narzędzi przedstawionych powyżej jest udostępniana bezpłatnie. Ghostlab jest narzędziem płatnym, ale w zamian oferuje bardziej zaawansowane opcje. Inne narzędzia wymagają ręcznego wprowadzania informacji i przełączania rozdzielczości, natomiast dzięki Ghostlab możesz zautomatyzować cały proces.

Jest to szczególnie pomocne, gdy pracujesz ze stroną internetową z wieloma podstronami. Pomyśl o tym, ile czasu trzeba poświęcić na ręczne sprawdzanie każdej podstrony, a następnie wprowadzanie zmian, żeby naprawić każdy problem, który pojawi się w czasie testów.

Dzięki Ghostlab możesz zsynchronizować wiele różnych urządzeń i przeglądarek, dzięki czemu możesz zobaczyć, jak twoja strona będzie wyglądała na wszystkich wybranych urządzeniach jednocześnie. Po wykonaniu jakiejś akcji w jednej przeglądarce możesz od razu zobaczyć, w jaki sposób określone elementy zmieniają się w tym samym czasie na innych urządzeniach. Możesz także szybko sprawdzić swój kod CSS otwierając różne przeglądarki na swoim urządzeniu i sprawdzając, jak działa bez konieczności zapisywania zmian kodu i odświeżania strony za każdym razem, gdy dopiszesz kilka nowych linii.

Możesz również użyć narzędzia Ghostlab do zdalnego debugowania JavaScript. Oprogramowanie obsługuje języki HTML, CSS, JavaScript Haml, Pug (Jade), Sass, Less, Stylus, TypeScript i CoffeeScript. Wystarczy zrobić zrzut ekranu w narzędziu, dodać uwagi i komentarze, a następnie przekazać je zespołowi. Narzędzie Ghostlab wspiera testy A/B i oferuje tryb prezentacji dla zespołów. Narzędzie kosztuje 45 dolarów za dożywotnią licencję.

Upewnij się, że twoja strona wyświetla się prawidłowo na każdym urządzeniu

Jak widać w naszym artykule, istnieje wiele darmowych narzędzi, za pomocą których można sprawdzić, jak strona będzie wyglądać na różnych urządzeniach. Responsywność to coś, o co powinien zadbać każdy twórca stron internetowych, a przedstawione narzędzia mogą pomóc w stworzeniu naprawdę wyjątkowych serwisów. Warto pamiętać o tym, że wszelkie narzędzia mogą stanowić nieocenioną pomoc, zwłaszcza w fazie projektowania, ale nie są w stanie stwierdzić, czy twoja strona działa prawidłowo lub czy będzie działać z dużą wydajnością. Z tego powodu narzędzia nie zastąpią testów, dzięki którym zagwarantujesz, że twoja strona oferuje odpowiedni UX, sprawną i prostą nawigację oraz, że jest zoptymalizowana pod kątem wyszukiwarek internetowych.