Responsywne strony internetowe - z czym to się je?

Responsywne strony internetowe - z czym to się je?

Od ładnych kilku lat responsywne strony internetowe stały się standardem. Wzniosła cały webdesign na zupełnie nowy poziom – poziom uniwersalności, świeżości i przede wszystkim – prostoty. Miarą jakości odtąd stało się także uporządkowanie i wizualny ład – coś, czego mocno brakowało niektórym stronom www w ostatnich latach.

Wejście responsywnych witryn internetowych definitywnie także pogrzebało Adobe Flash’a, który w latach 2000 królował w Internecie.

1. Czym jest responsywność i jak ją ocenić, testować, w przypadku gdy jesteśmy klientem agencji interaktywnej?

Musimy zdać sobie sprawę, że żadna strona internetowa – choćby była nie wiadomo jak piękna i nowoczesna, nie będzie przynosić zysków, leadów, jeśli nie będzie responsywna. W dzisiejszych czasach jest to oczywistość oraz standard, bez którego żadne działania marketingowe nie będą miały powodzenia. Tym bardziej, należy do tematu podejść poważnie i rzetelnie weryfikować, czy nasza nowa strona internetowa jest responsywna.

2. Responsywność - definicja

RWD (ang. responsive web design) to sposób projektowania stron internetowych, w takiej technice aby ich układ i design samoistnie dostosowywał się do rozmiaru okna przeglądarki, w której jest wyświetlana i pozostawał przy tym czytelny. Nie ma więc tu mowy o powiększaniu czy “szczypaniu” ekranów tabletów, czy telefonów by cokolwiek przeczytać. Responsywne strony internetowe wyświetlają się poprawnie na wszystkich dostępnych urządzeniach mobilnych, zachowując swoją stylistykę oraz odpowiednią typografię.

 

Dodatkowo, od kilku lat, sam Google wspiera strony posiadające wersje responsywne, co wpływa na lepszą pozycję w wyszukiwarce oraz skuteczniejsze pozycjonowanie witryny.

 

Pamiętajmy: responsywna strona www nie wyświetla się 1:1 identycznie na każdym urządzeniu. Dostosowuje się ona do wielkości ekranu, dzięki czemu będzie ona dobrze wyglądać i będzie czytelna, zarówno na niewielkim ekranie smartfona czy tabletu, a także na dużych rozdzielczościach ekranów laptopów czy komputerów stacjonarnych.

 

3. Zalety responsywności

Wiemy już, że responsywność to podstawa każdej strony internetowej, którą tworzymy. Trudno obecnie wyobrazić sobie sytuację, w której musimy używać bocznego scrolla na telefonie, by cokolwiek przeczytać, czy moment w którym nie widzimy całości grafiki, bo nie mieści się ona na ekranie. Wygląda to mało profesjonalnie i nie najlepiej świadczy o projektancie danej witryny.

 

Wersja responsywna to przede wszystkim wygoda w użytkowaniu i dbałość i czytelność wyświetlanych tekstów. Pozwala zachować spójność estetyki witryny bez względu na to, czy użytkownik wyświetli ją na Androidzie w telefonie, czy na Safari w swoim Macbooku.

 

Responsywność to przede wszystkim komfort użytkowana – a jak wiadomo, dziś wszyscy cenimy sobie szybkie i czytelne sposoby nawigacji i pozyskiwania informacji. Nie ważne, gdzie użytkownik będzie chciał wyświetlać stronę, jej design i układ zostanie zachowany. A to z kolei “robi +100” do profesjonalizmu i budowania rzetelnej, poważnej marki o ugruntowanej i nieposzlakowanej opinii na rynku.

4. Wady responsywności

Ponieważ obecnie trendy oraz standardy idą w stronę uniwersalności, czytelności i prostoty, zasadniczo responsywność, jako taka, nie posiada wad. 

Jak wiadomo, nie warto chwalić dnia przed zachodem słońca, bowiem, w przypadku gdy, na naszej stronie korzystamy ze skomplikowanych animacji, lub (co gorsza, jeszcze) z technologii Adobe Flash… Niestety, skrypty urządzeń mobilnych nie obsłużą takich elementów. 

 

Także, jeśli układ bądź nawigacja naszej witryny wymaga jakichś skomplikowanych interakcji, jeśli podczas scrollowania następują po sobie określone akcje, musimy liczyć się z tym, że w wersjach mobilnych będą one musiały zostać znacznie uproszczone, lub w ogóle wyłączone. Pamiętajmy, że ekrany smartfonów są niewielkie, najczęściej ułożone w orientacji pionowej, a więc zupełnie inaczej niż na ekranach komputerów stacjonarnych i laptopów – a więc wymagają one totalnie innych układów, by całość była czytelna.

 

5. Testowanie responsywności

Jeśli otrzymujemy od agencji interaktywnej link z zakodowaną stroną internetową, możemy, a nawet powinniśmy we własnym zakresie potestować wyświetlanie jej na różnych urządzeniach a także przeglądarkach.

 

Chcąc zrobić to możliwie dokładnie i rzetelnie, musimy pamiętać o kilku rzeczach:

– Na urządzeniach mobilnych – smartfonach i tabletach, nie ma efektów “hover”, a więc efektów, animacji wynikających z najechania kursorem myszy (brak tu w ogóle kursora myszy!) na dany odnośnik/kafelek/obraz. Wskutek czego już na starcie musimy być świadomi tego, że pewnych efektów w wersjach responsywnych nie będzie.

 

– Aktualizacja przeglądarek. Nie tylko na laptopie czy komputerze stacjonarnym – także w telefonach. Agencje przeważnie zastrzegają sobie, że gwarantują poprawne wyświetlanie zaprojektowanych witryn, tylko w najnowszych wersjach, lub “nie starszych niż”. Jeśli więc wciąż korzystamy z Internet Explorera w wersji z 2013 roku… chyba czas najwyższy odświeżyć przeglądarkę internetową 🙂

6. Tyle w teorii, a jak to wygląda w praktyce?

Nie ma tu żadnej magicznej recepty – po prostu odpalamy naszą stronę na wszystkich dostępnych w danym momencie urządzeniach i sprawdzamy jak witryna się zachowuje – czy wszystkie grafiki wyświetlają się poprawnie, czy się nie ucinają, czy nie pojawia się poziomy scroll, czy teksty są czytelne i nie zmniejszają do nienaturalnych wielkości.

Co ważne – testujemy także interakcje, czyli klikalność wszystkich odnośników oraz linków w menu. Zwłaszcza nawigacja mobilna powinna zostać przez nas szczegółowo przetestowana – w końcu w ten sam sposób będą po stronie poruszać się użytkownicy i potencjalni klienci.

 

Zgłaszanie wszelkich nieprawidłowości, błędów i usterek najlepiej listować z podziałem na podstrony, ale z zaznaczeniem na jakim urządzeniu testowanie było wykonywane oraz na jakiej wersji i typie przeglądarki. To bardzo ułatwi pracę developerom.

Jeśli responsywne strony internetowe to temat, którym Cię właśnie zaciekawiliśmy, jeśli chciałbyś odświeżyć swoją istniejącą już witrynę firmową – zachęcamy do wypełnienia krótkiej ankiety projektowej i skontaktowania się z nami. Doradzimy, wycenimy i jak zawsze – damy z siebie 100% aby efekt końcowy zachwycił nie tylko Ciebie, ale i Twoich klientów.

responsywność

rwd

strony internetowe

Czytaj również

Grafika a e-commerce - jak połączyć dobre (ładne) z użytecznym?
1068

Grafika a e-commerce - jak połączyć dobre (ładne) z użytecznym?

Dzisiejsze zagadnienie jest z cyklu pytań retorycznych, na które większość zapewne zna odpowiedź. Mimo to, wydaje się że duża grupa właścicieli firm o roli designu zupełnie zapomina, zadowalając się formą “good enough” (“wystarczająco dobre, zadowalające” w wersji polskiej). O ile takie myślenie wcale nie jest karygodne, jeśli mamy dobre przesłanki i goni nas czas. Jeśli jednak chcemy się odpowiednio przygotować do kampanii, zmian, rebrandingu… dobrze jest po prostu wiedzieć czym jest ten mityczny dobry design.

Czytaj dalej