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

Posted by | August 15, 2013 | Web Development | 2 Comments
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.

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!

Zobacz także / zobacz wszystkie

RWD

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

| Web Development | 2 Comments

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…

blog-top-wpqt

WordPress Quick Tip – Jak dodać własny rozmiar zdjęcia do uploadera WordPressa

| Wordpress Quick Tips | One Comment

W wersji 3.3 WordPressa pojawiło się wiele nowych filtrów. Jenym z nich jest image_size_names_choose. Dzięki niemu możemy sami zdefiniować sobie nowy rozmiar zdjęcia, który będzie można wybrać w uploaderze WordPress….

blog-top-wpqt

WordPress Quick Tip – Edytor WYSIWYG – zmiana szerokości podglądu na pełnym ekranie oraz dodanie stylów templatki

| Wordpress Quick Tips | No Comments

Jeśli często używasz trybu pełnoekranowego podczas pisania artykułów lub Twój klient chce z takiej opcji korzystać, irytujący może być fakt, że po paru godzinach pracy nad treścią artykułu po zapisaniu…

wp-top

WordPress 3.4 Beta 1

| Wiadomości | No Comments

Panowie z WP poinformowali dziś, że pojawiła się pierwsza BETA nowej wersji CMSa. WordPress oznaczony numerkiem 3.4 jest we wczesnej fazie Beta i na pewno jeszcze nie nadaje się do…

2 Comments

Leave a Reply

Your email address will not be published.