Są dwie zasadnicze metody prezentacji treści stron internetowych na komputerach przenośnych (smartfony, tablety).
- wersja RWD (angielski akronim: Responsive Web Design)
- wersja mobilna – odrębny szablon mobilny.
Zasadniczo się one od siebie różnią i przeważnie wybiera się jedną lub drugą metodykę – bez stosowania „hybryd” (które ciężko osiągnąć z powodu ograniczeń technicznych).
Ad. 1) Wersja RWD
Jest to stosunkowo nowocześniejsza metoda. Z tego powodu też niegdyś dostępna tylko dla niektórych przeglądarek. W tym momencie powszechna. Polega ona na automatycznym dostosowywaniu strony do danego urządzenia w sposób płynny.
Widok strony na komputerze i widok strony w urządzeniu przenośnym jest identyczny. Tak jak na obrazku powyżej. Nie ma odrębnego uproszczonego szablonu – bo to de facto ten sam kod i ten sam szablon HTML. Elementy witryny w sposób płynny i automatyczny tak się inteligentnie przebudowują (zawężają, są przerzucane w dół, skalują się) aby umożliwić ich odczyt na mniejszym ekranie. Wielkość czcionki też jest w sposób automatyczny dostosowywana do wielkości ekranu.
Wersja RWD witryny budowana jest przeważnie w oparciu o framework typu Twitter Boodstrap. Wiąże się to z odpowiednim wykonaniem projektu graficznego. Projektant nie ma pełnej swobody w tworzeniu np. szerokości kolumn strony lub wielkości innych elementów. Tak samo jeśli chodzi o wielkość marginesów. Musi mieścić się w ramach tzw. siatki grid:
Zasadniczo nie ma możliwości przełączenia się na widok normalny np. poprzez wymuszenie wersji desktopowej – bo tak na prawdę to ciągle ta sama strona (ten sam szablon HTML).
Przykłady naszych realizacji:
www.grand.pl
www.ledart.net.pl
(dostosowywanie RWD można zobaczyć już w przeglądarce WWW zmieniając szerokość jej okna)
Ad. 2) Wersja mobilna (odrębny szablon mobilny)
Jest to przygotowanie 2 odrębnych widoków stron. Odrębnego dla urządzeń desktopowych (komputery stacjonarne, laptopy) i odrębnego dla przenośnych (smartfony, tablety). W tym drugim przypadku widok jest uproszczony i elementy są zoptymalizowane (np. grafiki są zmniejszone i bardziej skompresowane) aby szybciej się wczytywały.
Zazwyczaj detektor po stronie serwera rozpoznaje że strona została wczytana przez urządzenie mobilne i prezentuje odrębny szablon. Lub też automatycznie przekierowywuje na podstronę m.nazwastrony.pl gdzie ten szablon jest ustawiony jako domyślny (zależy od użytego CMS). W takim wypadku można zazwyczaj wymusić na urządzeniu mobilnym wersję desktopową – i vice versa
Przykłady naszych realizacji:
(uwaga aby zobaczyć widok mobilny należny włączyć stronę na np. smartfonie)
Podsumowanie
Warto podkreślić, że obie metody są respektowane np. przez Google.com (pod kątem pozycjonowania) jako metody umożliwiające użytkownikom mobilnym otwieranie strony. Wybór konkretnego sposobu osiągnięcia tego celu zależy w głównej mierze od charakteru serwisu i stopnia jego skomplikowania. Zależy także od preferencji Klienta w jaki sposób jego strona ma się dostosowywać do urządzeń przenośnych.
Zapraszamy do przeglądnięcia naszego portfolio: http://smartprojects.pl/realizacje.html. Większość wykonanych przez nas stron posiada wersje mobilne / RWD. Przynajmniej jeśli chodzi o poprzednie realizacje. Nowe projekty wykonywane przez nas już zawsze posiadają wersję mobilną. Traktujemy to jako standard realizacji.