Gajewski pyta Gajewskiego z serwisu budownictwo.pl o responsive design

Maciek Gajewski: Na potrzeby naszych Czytelników, wyjaśnij proszę, czym właściwie jest responsive web design.

Marcin Gajewski: To technologia oparta na CSS3, która umożliwia inteligentne dopasowanie ilości i wielkości wyświetlanych elementów na ekranie do wyświetlacza. Wszystko jest uzależnione od szerokości okna przeglądarki. W zależności od niej wyświetlana jest różna ilość elementów, w taki sposób, żeby uniknąć poziomego przewijania, żeby elementy były czytelne, nie było potrzebne powiększanie różnego rodzaju elementów oraz żeby strona wyglądała dobrze na każdego rodzaju urządzeniu. Dużą zaletą jest to, że budujemy tak naprawdę jedną stronę, która posiada trzy wersje. W przypadku wersji mobilnych, z popularną subdomeną „ m.”, na przykład m.pf.pl, musimy obsługiwać dwa portale równocześnie. Owszem, i jeden i drugi jest zoptymalizowany pod urządzenia, na które jest przeznaczony, natomiast musimy utrzymywać dwa portale jednocześnie, a przy tym wiele rozdzielczości. Powiedzmy, że mamy wersję na smartfony i na komputery, ale już nie zawsze weryfikujemy to, na jakim ekranie jest ona wyświetlana i jaka jest szerokość okna przeglądarki. Responsive design pozwala na poprawne, atrakcyjne i, przede wszystkim, czytelne wyświetlanie portalu na każdym urządzeniu.

Responsive web design to jest dość nowa metoda, pierwsze informacje pojawiły się na jej temat 1,5 roku temu. Czemu tak szybko zdecydowaliście się ją wdrożyć?

Staramy się wychodzić naprzeciw rynkowym trendom. Obecnie 50-60 procent społeczeństwa posiada smartfony i coraz więcej osób z nich korzysta. Nawet jeżeli nie używają Internetu komórkowego po sieci GSM, to korzystają z niego w domu przez Wi-Fi i w różnych miejscach. Nawet tutaj mamy (spotkaliśmy się w kawiarni – przyp. autora) dostęp do Wi-Fi. Po prostu chcą mieć informacje nie tylko w zaciszu domu, na komputerze stacjonarnym, na laptopie, ale również na tablecie czy smartfonie.

Skupiasz się na skalowaniu w dół. Często bywa tak, że witryny internetowe są dla typowego konsumenckiego monitora, ale na przykład po uruchomieniu ich na monitorze Full HD wymagają powiększenia, bo interfejs nie jest skalowany w górę. Czy responsive web design przewiduje skalowanie w górę?

Generalnie mamy zakres rozdzielczości do którego następuje skalowanie. Najwyższy zakres jest zoptymalizowany w taki sposób, żeby na każdego rodzaju monitorze serwis był wyświetlany w sposób poprawny. Na każdym monitorze wszystko jest czytelne, dobrze widoczne, jest zaprojektowane w sposób atrakcyjny dla użytkownika. Nie zawsze oznacza to jednak skalowanie w dół. Przykładem może być prosta funkcja, jaką jest GPS, a która nie występuje na komputerach stacjonarnych czy na laptopach. Wyjątkiem są może Maki, ale generalnie 99 procent komputerów stacjonarnych w Polsce i na świecie nie posiada modułu GPS.

Podobnie sytuacja wygląda z funkcją sczytywania danych z GPS, lokalizacją i czy sortowaniem kilku odległości - na komputerach stacjonarnych nie ma to sensu, ponieważ nie są one wyposażone w tego typu moduły. Z kolei na mniejszych urządzeniach typu smartfony, tablety, GPS jest to standard. W momencie skalowania ekranu w dół  pojawia się przycisk, który pozwala na sortowanie firm po odległości. Nie zawsze więc jest to skalowanie w dół, jest to zdecydowanie optymalizacja strony pod dany rodzaj urządzenia i chęć pełnego wykorzystania możliwości, które ta funkcja oferuje.

A czemu nie aplikacja mobilna? To przecież teraz takie „modne”…

Ale jak najbardziej! W Eniro mamy aplikację, która jest przeznaczona dla Panoramy Firm. Jesteśmy teraz w centrum handlowym. Szukamy kawiarni, fryzjera, szewca czy wszelkiego rodzaju instytucji biznesu użyteczności publicznej. W takich sytuacjach używamy tej aplikacji, która jest przydatna z punktu widzenia użytkownika. Ale umówmy się, że remont łazienki robimy w porywach raz na kilka lat, nie dla wszystkich informacje z branży budowlanej są codzienną potrzebą.Budownictwo.pl jest też portalem B2B. Jeżeli zatem prowadzimy własny biznes, korzystamy z wielu urządzeń, dwa i więcej telefony komórkowe, służbowe tablety.

Trudno na każdym z tych urządzeń instalować aplikację i ją użytkować, dlatego z punktu widzenia biznesowego rozwiązanie, które zastosowaliśmy w serwisie budownictwo.pl  jest bardziej optymalne. Nie rezygnujemy z aplikacji, zostawiamy ją dla odpowiedniejszego , bardziej konsumenckiego produktu, jakim jest Panorama Firm.

Na rynku mamy tyle różnych przeglądarek i wiele popularnych silników. Co sprawiło wam najwięcej problemów? Jakie wyzwania były trudne i jak powinni sobie z tym radzić początkujący webdeweloperzy?

Na pewno każda przeglądarka ma swoją specyfikę, na której pewne elementy wyświetlane są w różny sposób. Dlatego warto testować produkt na urządzeniach z iOS-em, jak i na różnego rodzaju przeglądarkach. Na przykład na starszych wersjach Internet Explorera, responsive web design w ogóle nie jest obsługiwany, zdaje się, że do wersji 8.0 włącznie. Wszystko zależy więc od urządzenia. Są takie, które nie obsługują pewnych rozwiązań, na przykład Flash (od Apple). . Jeśli chodzi o rady, to przede wszystkim testować, testować i jeszcze raz testować. Nie tylko samodzielnie, ale prosić o testowanie rodzinę, znajomych, żeby przeklinali nasz portal., ponieważ w momencie, w którym pracujemy nad nim kilka miesięcy, a czasem i kilka lat, nie jesteśmy w stanie zauważyć pewnych rzeczy. Parzymy na niego w określony sposób, a intuicyjność dotarcia do pewnych informacji staje się dla nas oczywista. Portal, zwłaszcza dla nowych użytkowników, musi to być intuicyjny, prosty w użyciu i dotarciu do informacji. Jeśli jesteśmy twórcami, nie jesteśmy w stanie o wszystkim pomyśleć, dlatego testy są bardzo istotne.

Warto też pamiętać, że ekran dotykowy i ekran komputera to trochę inne środowiska. Nie można na tablecie najechać myszką na dowolny element. Interfejs musi być tak zaprojektowany, by był użyteczny nie tylko dla „klikaczy”, ale też dla użytkowników ekranu dotykowego. Mieliśmy taką sytuację, w której testowaliśmy pewne rozwiązanie, i głowiliśmy się nad tym, jak rozwiązać problem bardzo małego przycisku, na który trzeba było najechać. Pamiętam, że jak ja to testowałem, to pierwsze co zrobiłem, to powiększyłem sobie ekran. Reszta otworzyła szeroko oczy, bo nie pomyślała, o czymś tak oczywistym. Każdy korzysta z tych urządzeń inaczej, ty mógłbyś to zrobić jeszcze inaczej, bo jesteś przyzwyczajony do innego rodzaju zachowań. Dlatego duża liczba testerów jest bardzo istotna, zarówno na etapie projektowania interfejsu i makiety, jak i na etapie testów finalnych.

Jeżeli tworzymy portal w dużej firmie, to mamy pewne procedury, na przykład - testowe, wdrożeniowe, na etapie których wiele problemów jest wykrywanych. Bardzo wiele rzeczy, na które wcześniej nie zwrócono uwagi, jest poprawianych. To są drobiazgi, ale pojawiają się w każdym projekcie. Natomiast osoby pracujące nad  portalem od A do Z, co najwyżej kupujące elementy graficzne bo nie czują się dobrze w Photoshopie czy innym programie graficznym, potrafią zrobić wszystko, ale nie zawsze o wszystkim pomyślą. To nie jest kwestia tego, czy są dobrymi programistami, czy złymi, po prostu po kilku miesiącach pracy, wpatrywaniu się w ekran po raz setny, kolejną  godzinę, nie zauważamy pewnych rzeczy.

Responsive web design, jak rozumiem, kosztuje więcej pracy. Czy warto w ogóle się zabierać za to, jeżeli nie jest się częścią większej firmy webdeweloperskiej?

Jak najbardziej. Trzeba tylko pamiętać o tym, że wymaga to znacznie więcej pracy. Wzrasta złożoność projektu, mimo iż to tylko warstwa prezentacji. Z drugiej strony na pewno łatwiej jest zaprojektować interfejs od początku, niż potem przerabiać go pod kątem responsive web design. Wówczas jest to trudniejsze i zajmuje więcej czasu, niż stworzenie od początku strony z myślą o responsive web design.

Czy chcesz coś dodać od siebie dla naszych Czytelników?

Zarówno strony mobilne, jak i aplikacje już istnieją na rynku. Responsive Web Design  jest całkowitą nowością, która właśnie wchodzi na rynek. Pamiętam artykuł, chyba z 17 grudnia, o pierwszym wdrożeniu responsive web design w polskiej bankowości, która jest jedną z najnowocześniejszych na świecie pod kątem rozwiązań informatycznych. My jesteśmy w tym momencie w czołówce, peleton jest gdzieś daleko za nami. Obstawiam, że za dwa lata RWD będzie oczywistością, wtedy każda strona dużej firmy, korporacji będzie posiadała optymalizację pod rozwiązania mobilne. Jesteśmy pierwsi, trochę przecieramy szlaki, ale myślę, że też jest to cenne doświadczenie i użyteczne rozwiązanie dla naszych użytkowników. Ważne jest także to, że dajemy naszym klientom obecność na urządzeniach mobilnych.

W tym momencie nie mam dokładnych danych z rynku polskiego, natomiast na rynku brytyjskim, mniej więcej trzy czwarte stron firm, przedsiębiorstw, kompletnie nie jest zoptymalizowanych pod jakiekolwiek urządzenia mobilne. My dajemy im możliwość zaprezentowania swojej oferty nie tylko na tych dużych ekranach, ale także na - mniejszych, podręcznych. Myślę, że to jest największa wartość dodana tego projektu, z punktu widzenia naszych klientów oraz  użytkowników.

Dzięki za poświęcony czas.

Dzięki!

Maciek Gajewski jest dziennikarzem, współprowadzi dział aktualności na Chip.pl, gdzie również prowadzi swojego autorskiego bloga.