Na pewno pamiętacie te czasy, kiedy hitem w telefonie komórkowym była możliwość uruchomienia przeglądarki Internet Explorel i operowania w niej wskaźnikiem po ekranie za pomocą przycisków nawigacyjnych na klawiaturze. O tak! To dopiero technologia! Onet w telefonie. Koniec świata... Kto z nas pomyślałby wtedy, że za kilkanaście lat większość operacji internetowych będziemy dokonywać z poziomu naszego smartfona, a nie komputera?
Technologia ewoluuje, a w raz z nią zmieniają się trendy w projektowaniu stron internetowych. Dziś skupimy się na popularnym pojęciu jakim jest RWD. Zatem zacznijmy od początku i przyjrzyjmy się samemu skrótowi.
RWD - co to?
RWD (Responsiwe Web Design) w wolnym tłumaczeniu znaczy tyle co responsywne, elastyczne strony www. Tego typu strony dopasowują się idealnie do każdego popularnego urządzenia mobilnego, niezależnie od jego rozdzielczości. Stronę prawidłowo zbudowaną w stylu RWD możemy przeglądać zarówno w formie desktopowej, jak również na komórce, iPadzie i każdym innym urządzeniu mobilnym.
Tworzenie stron RWD
Elastyczny projekt strony internetowej opiera się o konfigurację kodu HTML, tak aby był on wysyłany w identycznej formie na wszystkie urządzenia. Na podstawie zapytań o CSS strona www zostaje odpowiednio wyświetlona na poszczególnych rozdzielczościach.
Dlaczego warto?
Do najważniejszych korzyści wiążących się z wdrożeniem RWD zaliczamy:
- wyższe wyniki w wyszukiwarce - Google pozycjonuje wyżej w rankingu strony z wdrożoną technologią RWD
- administrowanie jedną witryną, brak wersji mobile - 0% ryzyka o duplicate content między wersjami
- niższe koszty - utrzymujesz tylko jedną stronę zamiast dbać o wersję mobile i desktop oddzielnie
- mniejszy współczynnik odrzuceń - responsywna wersja pozwala na zwiększenie konwersji zakupowych w obrębie witryny
Jak projektować responsive web design?
HTML5 wprowadził metodę pozwalającą deweloperom stron www przejąć kontrolę nad metatagiem za pomocą znacznika.
Tym samym, każda Twoja strona (o ile jest dostosowana do urządzeń mobile) powinna zawierać następujący element
< meta content="width=device-width, initial-scale=1.0" name="viewport" />
Powyższy tag dopasuje stronę do 100% szerokości ekranu, zachowując skalę 1:1 z możliwością skalowania.
Jeżeli nasza strona nie posiada wersji mobilnej, powyższy kod spowoduje wyświetlenie kawałka strony (lewy górny róg). Użytkownik będzie miał jedynie możliwość nieergonomicznej manipulacji ekranem. Jest to bardzo złe rozwiązanie, które może skutkować brakiem zaufania do strony i przekładać się na wysoki współczynnik odrzuceń. Dlatego na samym początku projektowania warto zadbać o responsywny szablon.
Ważne zasady o których musisz pamiętać:
- Nie definuj stałej szerokości dla dużych elementów - np. ustawiając rozmiar obrazka w treści artykułu na Twojej stronie www, nadaj mu szerokość 100% zamiast przykładowo 750px.
- Nie styluj treści pod określoną szerokość ekranu na którym ją projektujesz - z uwagi na to, że wymiary i szerokość ekranu w pikselach CSS różnią się znacznie między urządzeniami, zawartość nie powinna polegać na określonej szerokości w celu dobrego renderowania. Wielkość liter, określaj w jednostce rem, która jest obliczana przez przeglądarkę na postawie wartości font-size.
- Użyj zapytań o media CSS, aby określić wyświetlanie dla małych i dużych ekranów - ustawienie bezwzględnych dużych szerokości CSS dla elementów składowych strony, rozszerzy je przez co będą źle wyświetlane na mniejszych urządzeniach. Zalecam Ci użycie wartości względnych, jak wspomniane wyżej przy elementach graficznych 100%.
RWD vs Strona Mobilna
WAŻNE! Strona responsywna nie jest tym samym co strona mobilna. Mobilna wersja to oddzielna witryna internetowa, utworzona specjalnie pod mniejsze rozdzielczości. Warto pamiętać, że posiadanie dwóch stron o podobnej lub tej samej treści będzie generować problem duplikacji, za co Google może nałożyć na naszą stronę filtr, ograniczający widoczność kluczowych podstron w indeksie.
RWD a Pozycjonowanie
Responsywne strony www w dobie Mobile First, o którym już niedługo na blogu, są szczególnie wspierane przez Google. Posiadając stronę RWD zapewniasz sobie wyższe pozycje w wynikach wyszukiwarki. Twoi klienci znajdują się w Internecie, z którego najczęściej korzystają właśnie na swoich urządzeniach mobilnych. Responsive Web Design jest odpowiedzią na panujący "mobile trend". To również standard w obecnym projektowaniu stron www, który Google postrzega jako jeden z wielu czynników rankingowych.
Jeżeli jeszcze nie masz przystosowanej strony pod RWD, skontaktuj się z nami. Zespół Fusion Marketing wykona audyt Twojej strony oraz pomoże Ci przejść na jasną stronę Internetu!
Strony RWD - przykłady
Dla naszych klientów tworzymy responsywne projekty stron i sklepów www. Prócz tego, oferujemy tworzenie stron pozycjonujących w naszej aplikacji FusionSystem, która została wyposażona w ponad 50 nowoczesnych szablonów z technologią RWD. Dzięki tej ofercie, z łatwością poprowadzisz kampanię Content Marketingową dla swojego biznesu.
ALERTSMOGOWY.PL - PORTAL INFORMACYJNY (SMOG, ZAGROŻENIA I PRZECIWDZIAŁANIE, URZĄDZENIA ANTYSMOGOWE)
AUTO-ONLINE.PL - PORTAL EDUKACYJNY Z BRANŻY MOTORYZACYJNEJ (LEASING, WYNAJEM SAMOCHODÓW)