2034

Cechy strony responsywnej pod lupą

Cechy strony responsywnej pod lupą

1. Kolejny raz sięgamy po zagadnienie responsywne strony internetowe, ponieważ, mimo popularności i powszechnego dostępu do samouczków czy tutoriali, cały czas, często (za często!) spotykamy się z niewiedzą oraz pytaniami, na końcowych (sic!) etapach projektów “A dlaczego na telefonie moja strona tak dziwnie wygląda…?”

Cechy strony responsywnej pod lupą. I zaznaczyć należy, że “dziwnie” wcale nie znaczy, źle czy niepoprawnie – w naturalnym rozumieniu osób jakkolwiek związanych z IT 😉
No więc pada odpowiedź “Ponieważ jest responsywna…”

O RWD napisano już naprawdę dużo. Nie tylko na stricte branżowych portalach. Jak cały świat IT, wszystko w tej materii ewoluuje, rozwija się i RWD, które funkcjonowało jeszcze rok, dwa lata temu, nijak ma się do dzisiejszych standardów. Nie znaczy to oczywiście, że tworząc swoją witrynę rok temu, musimy ją projektować na nowo, o nie. Znaczy to mniej więcej tyle, że całkiem możliwe, iż dziś, rok później, pewne efekty, rozwiązania czy kod, można by stworzyć inaczej, ergo łatwiej, szybciej, efektywniej.

Nie będziemy, po raz kolejny, przytaczać definicji RWD, jednak gdy pada “Dobrze, to ja w takim razie rezygnuję z tego. Nie chcę by moja strona tak się wyświetlała na tablecie, proszę o identyczna wersję układu i wyglądu na każde urządzenie!” stajemy trochę pod ścianą i tu przydają się umiejętności skutecznego negocjowania 😉
Optymalizacja pod kątem urządzeń mobilnych to dziś absolutna podstawa, jeśli chcemy, by oferowane przez nas produkty lub usługi spotkały się z pozytywnym odbiorem jak największej liczby potencjalnych i obecnych klientów. Rezygnacja z modelu RWD to dobrowolne godzenie się na odchodzących – wraz z ich pieniędzmi – klientów. Wystarczy spojrzeć na jakiekolwiek badania, ankiety pokazujące, że ruch Internetowy w Polsce w prawie 50% odbywa się za pomocą… urządzeń mobilnych! To znaczy, że połowa klientów, odwiedzających naszą nie responsywne strony po prostu z niej ucieknie. Obecnie, nie ma nic gorszego niż witryna, którą trzeba “szczypać” na telefonie / tablecie, by cokolwiek przeczytać czy kliknąć. Internauci z takich stron po prostu szybko uciekają, nie wdając się nawet w szczegóły. I nie ma co liczyć, że po raz drugi odnajdą nas, siedząc przy biurku przy swoim pececie.

2. I tu dochodzimy do cech strony responsywnej:

– Po pierwsze czytelność.

Jest to naj-najważniejsza cecha. O ile ekrany tabletów, można powiedzieć, są porównywalne z ekranami mniejszych laptopów, o tyle ekrany małych smartfonów to naprawdę mikre ekraniki, na których wszystko musi być czytelne! Dlatego też warto, projektując wersję mobilną upraszczać maksymalnie część graficzną – to, że coś fajnie i nowocześnie wygląda w wersji desktopowej, nie znaczy, że będzie miało rację bytu na małym ekranie smartfona Iphone 5.

Obecnie standardy kodowania pozwalają na wyłączanie pewnych elementów strony, w zależności od rozdzielczości i urządzenia, na którym strona www jest obecnie wyświetlana. Nic więc nie stoi na przeszkodzie, by na danych telefonach wyłączyć pstrokate patterny tła, czy niektóre efekty, które powodować będą spadek czytelności tekstu. Ważne: odpowiednia wielkość fontu pozwala komfortowo przeczytać tekst, bez konieczności jego powiększania. I równie ważne jest, by w tej kwestii zaufać programistom, nie silić się na tworzenie sztuki dla sztuki – strona rwd ma przede wszystkim być cz-tel-na!

– po drugie:

Dopasowanie rozmiaru w poziomie. Czyli: sytuacja, w której strona wykorzystuja całą szerokość ekranu i nie trzeba jej przesuwać na boki, by zobaczyć całą zawartość. Boczny scroll (prawo-lewo) to wynik zapewne błędu kodu, błędu ładowania się witryny, lub po prostu brak responsywności.

– po trzecie:

Łatwość nawigacji. Tu, znowu wracamy do wielkości fontów, braku ozdobników, które utrudniać będą sprawne poruszanie się po witrynie. Jakiekolwiek linki muszą być na tyle oddalone od siebie, by bez problemu móc palcem dotknąć żądanego elementu bez pomyłki. Ważne: w urządzeniach mobilnych nie ma czegoś takiego jak efekt hover! Nie mamy tu kursora myszki, sterowanego naszą dłonią, a tylko palce, które po prostu naciskają ekran, wybierając prezentowane elementy. Warto o tym pamiętać.

Dowiedz się więcej…

2034

Czytaj również

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

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