Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

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

Tag HTML
Obowiązkowym fragmentem kodu HTML jest umieszczenie poniższego fragmentu w sekcji HEAD.<meta name="viewport" content="width=device-width" />Możemy również wstawić cały arkusz stylu, używając media queries. <link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="arkusz600.css" />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.

@media screen and (min-width: 480px) { a { color: red; } }Powyższy fragment CSS powoduje pokolorowanie wszystkich odnośników, jeśli tylko szerokość przeglądarki będzie wynosić minimum 480 pikseli.

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.  

porady urządzenia mobilne inne

Komentarze

0 nowych
  #1 25.09.2015 18:54

Ale to wcale nie musi wyglądać tak, że strona na RWD będzie mobilkę zasypywała skryptami. Te da się ładować dynamicznie (używając, a jakże, również JS) w zależności od wielkości okna. Przykład: na desktopie mamy np. widget facebooka, na mobile panel ukrywamy cssem, kodu natomiast nie ładujemy, bo okno jest za małe.

hyouka   8 #2 25.09.2015 20:08

Wiesz jak jest, jest masa stron co jednak js ładuje, plus co najbardziej denerwuje robią stronę w RWD i dają reklamy które rozwalają RWD, to takie zabawne XD.
To działa podobnie do adblocka, w sumie plugin do przeglądarki skrypty RWD do stron i blokujesz box z reklamą bez adblocka xd

msnet   19 #3 26.09.2015 09:35

Pozwolę sobie na taką małą uwagę - piszesz o wersjach na urządzenia mobilne i sprawdzanie, czy mamy z takim sprzętem do czynienia przy pomocy odczytania szerokości ekranu (w px). Tymczasem wiele urządzeń mobilnym ma ekrany o takiej samej lub większej rozdzielczości, niż przeciętnie mają komputery...

Autor edytował komentarz.
GBM MODERATOR BLOGA  20 #4 26.09.2015 11:41

Brakuje screenów, obrazkowych porównań? RWD to towar, którego opis powinien być wizualnie eksponowany ;-)

hyouka   8 #5 26.09.2015 12:03

Dajesz w media min w dpi a max w px daje to zagęszczenie px na rozdzielczość.
Na ekranie 5 calowym przy HD dpi będzie większe niż na monitorze tak. RWD jest elastyczne, ale przy x ekranach mogą być x osobne arkusze stylów. Dlatego lepiej dawać elementy w % niż w px, łatwiej o skalowanie na nietypowym ekranie.

SebaZ   16 #6 26.09.2015 12:42

Odwieczny dylemat webdewelopera

hyouka   8 #7 26.09.2015 12:47

A jak dodamy do tego wersje pod zegarek który ma okrągłą tarczę to zaczyna się jazda, w przyszłości dojdzie do tego VR, więc czeka nas trochę zabawy w przyszłości.

SebaZ   16 #8 26.09.2015 12:51

@hyouka: raczej wymyślony zostanie nowy interfejs

hyouka   8 #9 26.09.2015 12:58

Mozilla już pracuje nad vr - http://mozvr.com

  #10 26.09.2015 13:30

Przecież to było już 5-6 lat temu ;/ Wprowadzone gdy wchodziło CSS3!

przemo188   8 #11 26.09.2015 18:29

@hyouka: Jest proste rozwiązanie na reklamy dostosowane do stron RWD, ja a swoim portalu informacyjnym używam kodu:

Kurcze, jak wkleić kod, by nie wycieło?

[code][/code]

Autor edytował komentarz.
hyouka   8 #12 26.09.2015 18:55

@przemo188: Wiem, że się da ale są ludzie co nie wiedzą. Robią stronę w RWD a reklama to potem rozwala. Xd

AntyHaker   18 #13 26.09.2015 20:58

"Jest prosto, co nie a zmiany w przyszłości możemy robić bez przebudowy całego szablonu strony"
"(...)sprawdza w pewnych nie. ale także ukazuje(...)"

A tak poza tym ciężko się czyta :s

Autor edytował komentarz.
hyouka   8 #14 26.09.2015 21:02

Dzięki za uwagę, popracuje nad tym.

Kpc21   10 #15 27.09.2015 11:20

@przemo188: Możesz na zewnętrzny serwer wrzucić, np. http://pastebin.com

  #16 27.09.2015 11:58

msnet:
Tyle, że te urządzenia w przeglądarkach zgłaszają niższą rozdzielczość - właśnie po to, by RWD działało poprawnie.Tab S2 ma 1536x2048, ale zgłasza się jako 768x1024, co na 9.7 cala pozwala wygodnie używać strony. W układzie poziomym mamy pełną wersję strony, w pionowym włącza się RWD. Telefony z FHD także zgłaszają się z niższą rozdzielczością, co aktywuje RWD.

Wszelkie zbędne skrypty i widżety na RWD można spokojnie wycinać prostymi warunkami w szablonie - sprawdzając z poziomu PHP user agent przeglądarki.
Gdy jednak chcemy lekką stronę mobilną, to lepiej zrobić oddzielny szablon, który wybieramy na podstawie user agent - nie ma potrzeby ładować na mobilnej całego panelu bocznego tylko po to, by potem ukrywać go w CSS.

hyouka   8 #17 27.09.2015 15:04

RWD + dynamiczna strona bazująca na emberze = Chrome tnie na mobilu za dużo js, tutaj go nie wytniesz bo strona dynamiczna, inna filozofia działania. Młodzi teraz często zamiast forum, używają czatu, bo dynamiczny, bo szybki, bo nie trzeba czekać na odświeżenie strony by zobaczyć nowy post, myślę że w przyszłości wiele stron będzie działać w czasie rzeczywistym, więcej dynamiki, wtedy RWD nie będzie jedynym problemem jeśli chodzi o wydajność. Na forach już mamy tego efekty - centra powiadomień działające bez odświeżania strony itd.

  #18 27.09.2015 16:38

Bootstrap !!!!!!!!!!!!!!!!!!!!!!!

qrisubiter   2 #19 27.09.2015 19:47

@msnet #3:
Piksele CSS to są wirtualne jednostki. W przypadku ekranów low/standard DPI (czyli np. 96 DPI) najczęściej wielkość i gęstość pikseli CSS pokrywa się z wielkością i gęstością pikseli fizycznych. W przypadku ekranów high DPI już się nie pokrywa.
IlośćPikselFizycznych = window.devicePixelRatio * IlośćPikseliCSS;
WysokośćPikselaFizycznego = WysokośćPikselaCSS / window.devicePixelRatio;
Dzięki pikselom CSS nie musimy się w ogóle martwić o fizyczną gęstość pikseli. No chyba, że ktoś chce rysować elementy we fizycznych pikselach to wtedy musi uwzględnić window.devicePixelRatio.
http://www.w3.org/TR/css3-values/#reference-pixel

Autor edytował komentarz.
hyouka   8 #20 28.09.2015 12:26

RWD nie jest idealne, ale pamiętajmy, że systemy operacyjne także mają problemy z dużymi rozdzielczościami. Przy Full HD jest już w miarę dobrze, ale w 4k mamy cuda w zależności od systemu. Tak więc duże rozdzielczości to także wyzwanie dla systemów operacyjnych, tak więc RWD ma podobne problemy. RWD to prawie to samo co idea aplikacji uniwersalnych, tylko jedno jest na webie a drugie na pc w Windowsie.
Taka mała ciekawostka, część aplikacji z sklepu Androida,WP i pewnie iOS to zwykłe wersje stron w RWD, czasem trochę przerobione by bardziej pasować pod daną platformę. Jest to dość proste, w końcu granica między webaplikacjami a tymi klasycznymi zanika.
Wkrótce czeka nas rewolucja w postaci vr, kolejny wymiar rzeczywistości, kolejne pole abstrakcji użyte do komunikacji.
Ciekawe jak wtedy, będzie się pisało motywy, jak 360 stopni to całkiem inna bajka ale o tym innym razem.