Strony WWW

Czym są responsywne strony WWW?

Czym właściwie jest Responsive Web Design (RWD)

Jeśli jesteście na etapie szukania agencji, która ma wykonać nową stronę dla Waszej firmy, zapewne trafiliście na pojęcia: RWD, Responsive Web Design czy responsywne strony WWW. Owe pojęcia służą do określania nowego trendu, a właściwie już standardu tworzenia stron.

Jak sami wiecie, do przeglądania Internetu. nie używamy już tylko komputera czy laptopa. Ogromną popularnością cieszą się również smartfony, tablety czy nawet tzw. SmartTV. Każde z tych urządzeń ma inną wielkość oraz rozdzielczość ekranu, więc coś co wygląda dobrze na laptopie, niekoniecznie musi być czytelne na telefonie.

Początkowo tworzyło się „dedykowane” tylko dla smartfonów strony internetowe, które nierzadko znajdowały się pod innym adresem niż strona główna, dopasowane były tylko do jednej konkretnej rozdzielczości. Dodatkowym problemem były koszta, gdyż za stworzenie wersji mobilnej również trzeba było zapłacić, niejednokrotnie nawet więcej. Jak łatwo się domyślić, ze względu na duże koszta takie rozwiązanie takie nie było zbyt popularne i stać na nie było niewielu.

Rozwiązaniem tego problemu stały się właśnie responsywne strony internetowe. Ich ideą jest „dopasowywanie” się do ekranu na jakim są wyświetlane, niezależnie od tego czy jest to 24 calowy monitor FullHD czy 4 calowy smartfon.

Jak to działa?

Początkowo tworzyło się strony internetowe o określonej szerokości. W miarę powstawania większych monitorów, mogących wyświetlić obraz w większej rozdzielczości, strony zaczynały być coraz  “szersze”. W pewnym momencie przyjęło się za standard szerokość 960px, nie tylko dlatego, że rozdzielczość ekranów przez bardzo długi czas wynosiła 1024x768px ale także dlatego, że 960 jest podzielne przez 1, 2, 3, 4, 5, 6, 8, 10, 12, 15 i 16 co ułatwia tworzenie stron na podstawie równej “siatki”.

Dzięki wprowadzeniu Media Queries w CSS3 sytuacja się zmieniła. Pozwalają one na zmianę wielkości elementów na stronie w zależności od rozdzielczości ekranu. Przykładowo, jeśli przeglądarka zgłasza, że jest otwarta na monitorze FullHD nic nie stoi na przeszkodzie by szerokość strony wynosiła 1680px, ale gdy otworzymy tą samą stronę na smartfonie, który jest w stanie wyświetlić tylko 640px w jednej linii, to możemy tak rozmieścić elementy na stronie, by były one czytelne bez powiększania ekranu czy przesuwania widoku na boki. Dzięki takim zabiegom nasza strona wygląda estetycznie niezależnie od rozdzielczości urządzenia, na którym jest wyświetlana.

Obrazy mówią więcej niż tysiąc słów, więc poniżej zrzuty ekranu strony nieresponsywnej i responsywnej na monitorze oraz smartfonie. (Kliknij w obrazek żeby zobaczyć całość.)

miniatura_rwd

Czy Twoja firma potrzebuje responsywnej strony WWW?

Nie tylko potrzebuje, ale powinna mieć responsywną stronę. Wyszukiwarka Google w niedalekiej przyszłości ma marginalizować w wynikach wyszukiwania strony nieresponsywne oraz wyświetlać ostrzeżenia o takowych. A jak wiadomo, każdemu zależy, by znaleźć się jak najwyżej w wynikach wyszukiwania. Na co warto zwrócić także uwagę, to fakt, że w lawinowym tempie wzrasta ilość urządzeń mobilnych w Sieci. Jeszcze 3 lata temu około 1-2% ruchu w Internecie należało do smartfonów i tabletów, obecnie jest to około 8-9% , a w Danii odsetek ten wynosi 34%.

Czy zauważyliście, że sami coraz częściej wyszukujemy informacji, robimy zakupy on-line na naszych telefonach i tabletach, będąc poza domem i korzystając z pakietów internetowych dostępnych w sieciach komórkowych? Sięgamy po smartfona lub tablet, gdy zwyczajnie nie chce się nam czekać na uruchomienie komputera.

Jak sprawdzić czy Twoja strona jest responsywna?

Przygotowałem narzędzie, które pozwala sprawdzić, jak dana strona wyświetla się na różnych urządzeniach. Jeśli na którymś z “urządzeń” pojawia się możliwość przewijania strony w bok lub tekst czy obraz jest ucięty, to znaczy, że twoja strona nie jest responsywna.

http://testrwd.pl

Robert Mleczko

Robert Mleczko – nasz Web Developer. Tworzy responsywne strony internetowych. Ekspert od zadań specjalnych. Rzeczy niemożliwe wykonuje od ręki. Jak nikt potrafi przełożyć wizję klienta i koncept grafika na zgrabny kod i przyjazną dla użytkownika witrynę. Jego specjalnością jest WordPress, Woocommerce oraz Twitter Bootstrap, o którym prowadzi bloga. Nie obce mu są także techniki optymalizacji stron pod SEO. Na bieżąco śledzi nowinki związane z HTML5 i CSS3, by wykorzystać je w swoich projektach.

More Posts - Website