2

Responsive Web Design (RWD) – o co kaman?!

RWD

Artykuły z tej serji:

1 . Responsive Web Design (RWD) – o co kaman?!

2. Responsive Web Design (RWD) – podstawy oraz media queries. (w przygotowaniu)

3. Responsive Web Design (RWD) – optymalizacja zdjęć. (w przygotowaniu)

4. Responsive Web Design (RWD) – responsywne tabele. (w przygotowaniu)

 

Jeszcze dwa, trzy lata temu projektując strony i aplikacje internetowe mieliśmy na uwadze tylko komputery stacjonarne i laptopy. Z biegiem czasu ekrany tych urządzeń zaczęły rosnąć, a my przy swojej pracy pomijaliśmy mniejsze (coraz rzadziej używane) rozdzielczości.

Gdy pojawiły się pierwsze telefony z serii “SMART” wiadomo było, że zacznie się rewolucja. Smartfony w zastraszającym tempie podbijały (i podbijają nadal) rynek, są coraz tańsze, a co za tym idzie coraz więcej ludzi posiada taki “kieszonkowy komputer”. Można na nim zrobić w zasadzie wszystko, dlaczego więc nie przeglądać na nim stron internetowych?! I od tego się wszystko zaczęło.

320×480, 480×800, 960×640 etc. to najczęstsze rozdzielczości używane w urządzeniach mobilnych. Małe rozdzielczości uderzyły w nas ze zdwojoną siłą.

Na ratunek przychodzi nam RWD.

RWD responsive web design Responsive Web Design (RWD) - o co kaman?! 01 Responsive web design

Pojęcie Responsive Web Design pierwszy raz pojawiło się w artykule Ethana Marcotte opublikowanym w serwisie alistapart.com.

Wielu ludzi uważa, że RWD można się nauczyć zapamiętując kilka sztywnych zasad. A wprowadzanie ich bezmyślnie do każdego projektu zagwarantuje im oczekiwane rezultaty. Niestety … hmmm … a może własnie “stety” tak nie jest.

Responsive Web Design to koncepcja. Oczywiście posiada ogólne wytyczne, podpowiedzi, może nawet zasady. Jednak sposób ich wykorzystania w projekcie zależy tylko i wyłącznie od nas.

Pamiętaj RWD trzeba przede wszystkim “poczuć” :)

Ale o co kaman?

OK, wiemy już że w RWD chodzi o przystosowanie naszej aplikacji lub strony pod wszystkie dostępne rozdzialczości i urządzenia. Ktoś może zadać pytanie – “kurcze ale jak?”. Czy mamy pisać oddzielne szablony styli dla każdej rozdzielczości? Teoretycznie możemy, ale czy któraś firma znajdzie na to czas i budżet? Wątpię :)

Dlatego musimy zmienić koncepcję tworzenia HTMLa. Musimy zacząć pisać w pełni skalowalne strony. Jeśli chwycimy za prawą krawędź przeglądarki i zaczniemy ją ciągnąć w lewo, to nasza strona musi w locie dostosowywać swój wygląd do zmieniającej się szerokości.

Przede wszystkim zapominamy o pikselach do definiowania szerokości. Ja osobiście w projektach używam ich do ustalania odstępów wewnętrznych (padding) oraz szerokości elementów, które nie powinny jej zmienić. W pozostałych przypadkach używamy procentów lub em’ów z tym, że dla mnie osobiście procenty są w tym przypadku przystępniejsze :)

[message type=”info”]PS. Jednostki EM polecam do definiowania rozmiaru czcionki.[/message]

Musimy także zadbać, aby zdjęcia i multimedia dostosowywały się do szerokości boksu w którym się znajdują, ale o tym w przyszłym artykule.

Dzięki za poświęcony czas! :)

||||| 10 I Like It! |||||