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

Słów kilka o RWD... czyli od czego zacząć

Czym jest to (nie)szczęsne RWD?

RWD to technika projektowania stron w taki sposób, aby dostosowywały się do urządzenia, dzięki czemu możemy na telefonie oglądać równie (lub mniej) funkcjonalną stronę jak na PC.

Nie jest to takie hop siup zrobić dobrą stronę RWD, a przy rozbudowanych serwisach wygodniejszym rozwiązaniem jest aplikacja mobilna. Ale nie wybiegajmy za daleko i skupmy się na podstawach RWD.

Czas start!

Na początek musimy sprawić, żeby nasza strona chciała się skalować na różnych urządzeniach. Używamy do tego specjalnego meta tagu:

<meta name="viewport" content="width=device-width, initial-scale=1">Możemy również zablokować powiększanie, ale nie polecam :)

Mobile first

Pewnie nie raz słyszeliście to określenie - wiele frameworków reklamuje się, że są mobile first. Ale co to tak na prawdę znaczy i czemu warto się stosować do tego?

Zacznijmy od przykładu, zwykła strona którą właśnie tworzymy:<div class="container"> <div class="sidebar"></div> <div class="content"></div> </div> I CSS:

.container { width: 100%; max-width: 1200px; margin: 0 auto;} .sidebar { width: 25%; float: left;} .content { width: 75%; float: right;} Standardowy, prosty kod. Ale strona nie jest responsywna - na małym ekranie nadal będzie sidebar i content obok siebie.

Dodajmy teraz media queries.

@media screen and (max-width: 480px) { .sidebar { width: 100%; float: none; } .content { width: 100%; float: none; } }

I w tym momencie zachęcę Was do korzystania z mixinów w scss.
Czy nie prostszy byłby taki zapis:

.container { width: 100%; max-width: 1200px; margin: 0 auto; } .sidebar { width: 25%; float: left; @include breakpoint(480) { float: none; width: 100%; } }.content { width: 75%; float: right; @include breakpoint(480) { float: none; width: 100%; } } Wygląda zdecydowanie lepiej - od razu widzimy jak dana klasa ma się zachować w innej rozdzielczości. Ale to nie jest mobile first.

Nadal wychodzimy od PC i zmniejszamy razem ze zmniejszaniem ekranu.

A w mobile first chodzi o to, żebyśmy zaczęli od telefonu. Dostajemy grafikę (wersję desktop tylko) i musimy sobie wyobrazić jak ma się zachować na telefonie/tablecie. Idziemy od mniejszej rozdzielczości (np. 480px) do większej (768px), stosujemy min-width, a nie max-width.

Czyli np. zamiast układu sidebar | content ma być przycisk menu i content.

Przeróbmy trochę nasz kod zatem.

.container { width: 100%; max-width: 1200px; margin:0 10px // (ustawmy sobie margines na zmniejszych ekranach na 10px, żeby nie przylegalo do krawędzi) @include breakpoint(desktop) { margin: 0 auto; (a teraz go usuwamy i centrujemy stronę na 1200px +) } } .sidebar { display: none; // (ma nie być na małych ekranach więc chowamy) @include breakpoint(tabletbig) { // powiedzmy, że na 980px+ czyli tablet 10" już ma być widoczne display: block; width: 30% // (i ma zajmować 30%) float:left; } @include breakpoint(desktop) { width: 25%; // a na 1200+ ma być już nasze domyślne 25% } } .content { width: 100%; // na małych ekranach na całą szerokość @include breakpoint(tabletbig) { float: left; width: 70%; } @include breakpoint(desktop) { width: 75%; // a na 1200+ ma być już nasze domyślne 75% } } .menu-btn { position: absolute; top: 0; left: 0; @include breakpoint(tablet_big) { display: none; // wkońcu na tablecie 10" mamy już menu to przycisk niepotrzebny }

I odpowiedni mixin do tego (znaleziony gdzieś w sieci, ale ładnie się sprawdza)@mixin breakpoint($point) { @if $point == desktopbig { @media (min-width:1400px) { @content; } } @else if $point == desktop { @media (min-width:1200px) { @content; } } @else if $point == tablet { @media (min-width:768px) { @content; } } @else if $point == tabletbig { @media (min-width:980px) { @content; } } @else if $point == phone_big { @media (min-width:480px) { @content; } } @else if $point == phone { @media (max-width:320px) { @content; } } }Co nam to daje?
Najważniejsze i wg. mnie najkorzystniejsze to, że nie musimy nadpisywać stylów, co czasem potrafiło być irytujące (np. dlaczego nadal mi bierze z tego, skoro w media jest inaczej!?).
Drugi powód - mamy lepszą kontrole nad tym co dzieje się na danym ekranie (co po części wiąże się z 1.)

Jednak to czy będziesz się stosować do mobile first zależy od Ciebie. Wiem po sobie, że ciężko przejść, ale gdy dostałem większy projekt to sam to zrobiłem bez namowy bo szybciej(!), mimo prawie skończonej pracy, było mi dostosować projekt pod mobile first niż nadpisywać css media queries dla mniejszych rozdzielczości. 

internet porady programowanie

Komentarze

0 nowych
underface   14 #1 18.05.2015 23:20

dobrze kojarzę, że kod jest z bootstrapa?
jeśli tak to warto dać do tego jakiś odnośnik

Kamatori   7 #2 18.05.2015 23:39

Twierdzenie 'mobile first' robi się już powoli przeterminowane w tej branży, a o RWD mówi się już w znaczeniu 'ogólnym'. Tzn. jeśli budować appkę to nie ze względu na urządzenia a ze względu na rozdzielczość.

Bardzo dobry artykuł na ten temat: https://blog.intercom.io/why-mobile-first-may-already-be-outdated/

SebaZ   16 #3 18.05.2015 23:47

Temat potraktowany po macoszemu trochę. Brak wad i zalet.

underface   14 #4 19.05.2015 00:02

@Kamatori: już za chwilę będzie watch first

  #5 19.05.2015 10:39

@underface: A prawdę mówiąc wcale nie powinno być mobile/watch first, ani kategoryzowanie po rozdzielczościach (480px, 768px, itp.), tylko dostosowywanie wyglądu strony lub aplikacji do kombinacji rozdzielczości i wielkości ekranu (tylko jak na to wymyślić chwytliwą nazwę?).

Smartfony potrafią zmieścić na kilku calowym ekranie więcej pikseli niż niejeden monitor 24", ale to nie oznacza, że łatwo będzie w nich nawigować po pełnej wersji strony. Mały ekran powinien wyświetlać mniej elementów, nawet jeśli ma kosmiczną rozdzielczość.

Vidivarius   14 #6 19.05.2015 10:59

Połowiczny of top :)
RWD kojarzy mi się, jako laikowi, z dwiema rzeczami:
1. Polskim samolotem RWD, a w szczególności RDW 5, na którym Żwirko i Wigura zdobyli 1 miejsce w zawodach lotniczych; RWD 5 i jego rekordowy lot nad Atlantykiem
2. RWD jako akronim stosowanej powszechnie strategii przetrwania "Ratuj Własną D**ę"

Thadrion   5 #7 19.05.2015 11:31

polecam autorowi http://getbootstrap.com/

można intuicyjnie budować (w oparciu o "siatkę") strony dopasowujące się do parametrów urządzenia wyświetlającego. Bez żmudnego wynajdywania koła od nowa i pisania wszystkiego od 0

@Vidivarius : tego drugiego rozwinięcia nie znałem :D człowiek uczy się całe życie :P

Autor edytował komentarz.
  #8 19.05.2015 14:15

Bootstrap....

  #9 19.05.2015 14:16

@Vidivarius: RWD oznaczenie polskich samolotów konstruowanych w okresie międzywojennym przez zespół konstruktorów lotniczych Stanisława Rogalskiego, Stanisława Wigurę i Jerzego Drzewieckiego.

kwpolska   6 #10 19.05.2015 15:47

@HitcH czemu nie mogłeś po prostu napisać “responsive web design” w tytule? Albo chociaż tak, żeby można było się domyślić?

duffee   11 #11 19.05.2015 18:20

@kwpolska: wtedy bylo by znacznie mniej odwiedzin

krystian0120   4 #12 19.05.2015 18:31

@Vidivarius: Zapomniałeś o Rear Wheel Drive, czyli napędzie na tył.

kostek135   8 #13 19.05.2015 19:25

http://www.amazon.co.uk/Cheapest-Android-Retina-Display-2048/dp/B00JAD1EQC

Prosze, desktop według twoich styli.

RWD jest do bani, ponieważ już teraz przeciętne urządzenia, zaczynają się równać rozdzielczością z desktopem. Natomiast zachowania użytkowników na mobilnym systemie są inne niż, gdy klika myszką. Słabo sprawdzają się eventy takie jak opuszczenie obszaru, dane są tylko ukrywane, ale i tak pobierane z serwera, co skutkuje, że to co działa szybko na "kablu", wydaje się mulić na "pakietach"

Autor edytował komentarz.
Vidivarius   14 #14 19.05.2015 19:33

@Anonim (niezalogowany): No właśnie to powiedziałem. Może nie wprost, ale jednak. :)

HitcH   5 #15 19.05.2015 19:49

Kod nie jest z Bootstrapa. Znam go i bardzo nie lubię. IMO przerost formy nad treścią. Preferuje systemy gridowe w stylu Gridle.scss (bardzo polecam).

Owszem 10" podpada już po moje granice, ale... zakres dostosowuję pod projekt, to miało być takie pierwsze spojrzenie, dla początkujących lub mało obeznanych w temacie.

Wybaczcie tytuł, mówiąc rwd mam na myśli responsywność, powinienem doprecyzować - nie pomyślałem o ilosci odwiedzin.

@krut - nie liczy się rozdzielczość ekranu (któa na np. 5" jest FHD) a wielkość (czyli wspomniany 5" będzie miał ok. 500px (strzelam bez sprawdzania:P)

Aktualnie jestem w trakcie bliższego zapoznawania się z IONIC i może wkrótce pojawi się wpis o tym. Tymczasem skupiam się na prostych rzeczach - bo zajmują mniej czasu, a mogą się przydać. Gdy będę miał więcej czasu zagłębię się w bardziej zaawansowany webdevelopment.

Dzięki za duży odzew! :)

vbruder   7 #16 19.05.2015 22:32

A już myślałem, że wpis ten dotyczyć będzie doświadczeń autora z firmą RWD Prospect...

  #17 19.05.2015 22:59

@kostek135: no RWD nie jest do bani jak jest dobrze zrobione, po za ustaleniem rozdzielczości podajesz tez dpi lub ratio

* 1.25 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
/* Retina-specific stuff here */
}

/* 1.3 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi){
/* Retina-specific stuff here */
}

/* 1.5 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
/* Retina-specific stuff here */
}

djgrzenio   9 #18 19.05.2015 23:00

@kostek135: no RWD nie jest do bani jak jest dobrze zrobione, po za ustaleniem rozdzielczości podajesz tez dpi lub ratio

* 1.25 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
/* Retina-specific stuff here */
}

/* 1.3 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi){
/* Retina-specific stuff here */
}

/* 1.5 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
/* Retina-specific stuff here */
}

Kpc21   10 #19 20.05.2015 12:13

Co do mobile first...

Wejdźcie na http://ife.p.lodz.pl na jakimś urządzeniu mobilnym. Zamiast sidebara jest menu. Spróbujcie z tego menu skorzystać.

I tak jest bez względu na user agent przeglądarki. Widać że strona bazuje na szerokości ekranu. I odpowiedzcie sobie na pytanie - jaka jest używalność tej strony na urządzeniach mobilnych?

Mobile first - tak, ale to oznacza że nie tylko piszemy kod pod urządzenia mobilne, ale jeszcze testujemy na nich działanie strony.

HitcH   5 #20 20.05.2015 13:04

@Kpc21: Oczywiście, rwd to nie tylko style, ale dostosowanie skryptów i calej reszty pod touch eventy.

Kpc21   10 #21 21.05.2015 19:43

I to jest ogromnie ważne, bo RWD pomijające ten aspekt może ze strony której używanie na urządzeniach mobilnych jest mało wygodne, ale możliwe, zrobić taką, która będzie na nich zupełnie nieużywalna.

kostek135   8 #22 23.05.2015 14:59

@djgrzenio: No i? Przecież to nic nie zmienia. Teraz tylko ograniczyłeś fakt, że urządzenia muszą mieć odpowiednią ilość piksli na cal. Nadal mogę mieć monitor, np. XX" z 4K, który będzie miał 120dpi-240dpi i łapał się do tych styli (np. http://www.noteloop.com/kit/display/pixel-density/).

RWD ssie, bo nie przewiduje podstawowej rzeczy. Nie jest ważna rozdzielczość, ratio, czy liczba piksli, tylko fakt, że to jest telefon (1-2 finger), tablet (2 finger), albo urządzenie, gdzie wskaźnikiem jest myszka. Takich stron używa się zupełnie inaczej (co wiąże się z tym, że muszą być zupełnie inaczej zaprojektowane), inne są zachowania użytkownika, etc. Tego nie da się rozpoznać po tym, że jest ileś tam piksli (na cal, czy nie).

Jedyne do czego RWD się nadaje, to jak już odczytasz z innych źródeł, że mamy do czynienia z telefonem, to do wczytania grafiki o wyższej rozdzielczości przy ładowaniu sprite-ów (żeby nie były kanciaste na brzegach, kiedy telefon ma większą rozdzielczość).

Używanie RWD (wyłącznie) do zrobienia strony, która działa równie dobrze na telefonie co na tablecie i PC/Notebooku, to utopia. A to się starają przekazać, tzw. "obrońcy" RWD.

Autor edytował komentarz.
Jaro070   16 #23 27.05.2015 20:10

Po przeczytaniu tytułu myślałem, że na głównej wylądował wpis o napędzie na tył :p