RWD czy osobna strona mobilna

RWD to aktualnie nowy hit eksportowy promowany w sieci, jeden kod wiele urządzeń. Motyw sam się dostosowuje do urządzenia, robi to na żywo, by to sprawdzić wystarczy zmieniać rozmiar okna przeglądarki, a strona powinna sama w czasie rzeczywistym dopasować się do rozmiaru okna, tak by treść i jej elementy były czytelne.

RWD - Responsive Web Design

By było prościej posłużę się przykładem z Wikipedii, byście mniej więcej wiedzieli jak działa RWD. link na wiki

<meta name="viewport" content="width=device-width" />[/code]

Możemy również wstawić cały arkusz stylu, używając media queries.

[code=html]
<link rel="stylesheet" type="text/css"
media="screen and (max-width: 600px)"
href="arkusz600.css" />[/code]

Powyższy fragment mówi o tym, że arkusz stylu o nazwie arkusz600.css będzie działał tylko wtedy kiedy szerokość przeglądarki będzie mniejsza lub równa 600 pikseli. Możemy również użyć np. min-width, max-height, min-height.

Media Queries w CSS
Jeśli nie potrzebujemy dzielić stylów na różne arkusze, możemy zrobić to wszystko w jednym pliku używając media queries.

[code=css]
@media screen and (min-width: 480px) {
a {
color: red;
}
}

Jest prosto, co nie a zmiany w przyszłości możemy robić bez przebudowy całego szablonu strony. Ale mamy dwie wersje RWD, jedna polega na dodaniu do zwykłego motywu opartego na px, wartości dla innych urządzeń np, telefonów. Wtedy zamiast np, 1020px dajemy 500px itd. Jest to takie pseudo RWD, dlaczego bo używa px. Prawdziwy, pełny RWD używa do budowy strony divów opartych o % szerokość/wysokość dzięki temu styl jest bardziej elastyczny, a dzięki css3 można wygodnie zmieniać np, panele które są obok siebie w panele które są jeden pod drugim - to dla wersji mobilnej. Pozwala to dość prosto modyfikować w przyszłości układ elementów bo wystarczy zmienić kilka linii css by panel był gdzieś indziej, by zniknął by zmienić układ strony. Wygodne ale ma pewne wady, przy dużej stronie typu fb, gdzie jest masa js, wersja mobilna zrobiona w ten sposób byłaby dość ciężka, bo motyw mamy dynamiczny, ale zawsze ładuje nam ten sam kod np, php.

Na fb kod odpowiedzialny za wersję mobilną jest inny od tego na wersję z pc dzięki temu nie wczytuje nam elementów których i tak na mobilu nie użyjemy, pozwala to na optymalizację kodu js itd, pod konkretną platformę. I tutaj RWD można użyć ale przy tak dużym serwisie wydaje się to jednak zbyt mało, bo zmienimy tylko maskę, a nie silnik co mogłoby zamulić część smartphonów jak i ma wpływ na wydajność serwera, po co tracić zasoby na wczytywanie funkcji które idą tylko na pc na mobilu, na którym mogą być np. ukryte przy użyciu css.

A teraz czas na zagadkę mamy IPB z osobną wersją mobilną i Flarum z RWD, dwa silniki forum, dwa podejścia do tematu wersji mobilnej, dochodzi tu też filozofia, IPB jest statyczne a Flarum dynamiczne, js. Ale to obrazuje, że da radę zrobić silnik forum który jest w RWD, a do tego działa dość szybko. Pytanie więc która wersja jest lepsza, gdzie jest granica sensu używania RWD, a gdzie osobnej wersji mobilnej. RWD można porównać do aplikacji uniwersalnych w Windowsie, jeden kod pod maską, a kilka gui w zależności od urządzenia i tutaj zagłębiając się w kod aplikacji uniwersalnych można znaleźć zależności w stosunku do RWD, podobną filozofię działania, inne urządzenie, inne gui dostosowane do urządzenia.

Do czego to doszło, zaczęliśmy od RWD a doszliśmy do aplikacji na Windowsie, ale to wszystko się łączy, w zasadzie można powiedzieć, że trochę obrazuje to sens użycia RWD w pewnych okolicznościach to się sprawdza w pewnych nie. ale także ukazuje to jak sieć wchodzi na pc i to dosłownie.

Dochodzi do tego kwestia fałszywego RWD czyli pisania gui mobile na pc ale bez testów na mobilu i potem user odpala motyw a nie może trafić w przycisk bo za mały a na pc wygląda ok, ale emulator to nie to samo co używanie dotyku. Kiedyś trafiłem na mobilne menu RWD, ale pod dotykiem menu pojawiało się na sekundę i znika, tak było w css, dev pisząc je nie zrobił testów i pod dotykiem nie działało. Pomogło użycie js które dawało dwa kliki do menu z dotyku, jeden pokazuje menu, drugi po kliku w wybraną opcję chowa menu. Normalnie myszką najeżdżamy na menu i wysuwa listę pozycji, ale dotyk to nie kursor. Takich smaczków jest wiele, dlatego RWD zastosowane w phpbb3.1 uważam za takie pseudo, bo tylko widać, a elementy są zbyt małe dla użytkownika pod dotykiem, to jakbym zrobił motyw na pc i potem dorobił port do mobila byle się wyświetlał, jest RWD jest, ale używalność na małym ekranie sprowadza się tylko do czytania, a kliknięcie w następną stronę to zabawa w powiększanie elementów bo trudno trafić.

RWD czy osobna wersja mobilna, temat dość długi, ale od siebie dodam, że RWD dla blogów, portali, ok, ale dla web aplikacji, czy portali wielkości FB już raczej nie. Tutaj widzę jeszcze osobną wersję mobilną, a piszę jeszcze bo wraz ze wzrostem mocy obliczeniowej mobila, RWD będzie coraz bardziej popularne, co widać choćby na przykładzie forów, kiedyś były tam osobne wersje mobilne, a teraz powstają silniki pokroju Flarum projektowane od zera zgodnie z RWD. Zmiany idą powoli ale idą i przyszłość to nie px, a %.

Pytanie dla chętnych co RWD ma wspólnego z znacznikami z starych wersji IE ? Jest jedna rzecz która jest podobna, zgadujcie która.