Blog Spark Media

0

Coraz częściej przy okazji projektowania stron internetowych słyszy się o RWD. Skrót ten wywodzi się z angielskiego terminu Responsive Web Design, co na nasz rodzimy język tłumaczy się jako „responsywność”. Podejście to odnosi się do takiego projektowania stron, żeby poprawnie wyświetlały się one na różnych urządzeniach – tych z najmniejszym ekranem (smartfony), z trochę większym (tablet) i największym (komputery stacjonarne i laptopy). Aby to osiągnąć niektóre elementy na różnych wielkościach ekranu muszą być wyświetlane w inny sposób: zmienia się ich ułożenie, inaczej wygląda główne menu serwisu, tekst zostaje dopasowany do szerokości wyświetlacza itd. Takie projektowanie stron zostało wymuszone przez trend, jaki można zaobserwować od pewnego czasu – coraz więcej użytkowników do korzystania z internetu używa urządzeń mobilnych takich jak telefony komórkowe, czy tablety. budując serwis „po staremu” nie będzie on niestety dostosowany do tych urządzeń, co skutecznie zniechęci tę grupę użytkowników do korzystania z niego.

Jednym z ostatnich serwisów internetowych, w których zastosowaliśmy RWD był ten, który stworzyliśmy dla firmy Medicalgoritmics – producenta nowoczesnych urządzeń do analizy EKG i arytmii serca. Strona powstała z myślą o nadchodzącym debiucie firmy na Giełdzie Papierów Wartościowych w Warszawie (GPW). W związku z tym, jedną z najważniejszych części serwisu była podstrona poświęcona relacjom inwestorskim; na jej przykładzie chcielibyśmy pokazać na czym polega RWD.

Pierwszy z obrazków pokazuje stronę wyświetloną na ekranie komputera w rozdzielczości 1366×768 px (ekran 15″).

laptop

Strona www – widok na laptopie

Widok na tablecie w układzie poziomym niezbyt różni się od tego na laptopie, natomiast po obróceniu urządzenia o 90 stopni widać drobne zmiany – menu główne powędrowało na górę oraz w celu zaoszczędzenia miejsca zniknął z niego claim „Innovative Solutions in Medicine”.

tablet_poziom

Strona www – widok na tablecie (układ poziomy)

tablet_pion

Strona www – widok na tablecie (układ pionowy)

Największe roszady przynosi projekt strony na smartfonach. Kolumny w tabelach  i opisy na wykresie zwęziły się, a menu całkowicie zniknęło z podstawowego widoku. Aby je wyświetlić, należy kliknąć odpowiednia ikonkę na górnym pasku. Prawą dla menu głównego i lewą dla kontekstowego.

smnartfon_poziom

Strona www – widok na smartfonie (układ poziomy)

smartfon_pion

Strona www – widok na smartfonie (układ pionowy)

Czy to jest wszystko warte zachodu?

Oczywiście! Przede wszystkim z uwagi na komfort. Dawniej, aby przejrzeć stronę na telefonie trzeba było przewijać ja nie tylko w pionie, ale też w poziomie, co było bardzo uciążliwe. Strony responsywne aktywnie dostosowują się do wielkości wyświetlającego go ekranu i znacząco podnoszą wygodę użytkowania.

Wydawać by się mogło, że zaprojektowanie widoków na trzy różne urządzenia to jest ogromne przedsięwzięcie zarówno z czasowego, jaki i finansowego punktu widzenia. Nic bardziej mylnego! Stworzenie responsywności choćby dla w/w serwisu zajęło nam kilka dni. Kosztowo również wygląda to atrakcyjnie, gdyż płaci się za jeden (bardziej złożony) produkt, a nie za np. 3 mniejsze. Owszem, dla bardzo rozbudowanych serwisów czas ten może się wydłużyć, jednakże w większości przypadków nie przekroczy on wspomnianego zakresu czasu. Poza tym większe serwisy (np. allegro.pl, facebook.com, itp) chętniej stawiają na dedykowane aplikacje mobilne, które w tym przypadku po prostu lepiej się sprawdzają.

Przy okazji każdego zapytania (dotyczącego stworzenia strony internetowej), które do nas spływa gorąco zachęcamy klientów do implementacji RWD. Jest to nowoczesne podejście do tworzenie stron www, które staje się już standardem.

Zaproś nas na prezentację do siebie
Skontaktuj się ze SPARK MEDIA