Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

Recenzja książki Responsive Web Design

W ostatnim wpisie o temacie responsive web design wspomniałem o książce z takim samym tytułem. Rzutem na taśmę, bo pod koniec 2011 roku skończyłem ją czytać. Dzisiaj opiszę ją dla Was. Na wstępnie mogę już napisać, że dla każdego kto interesuje się tą tematyką jest to obowiązkowa pozycja!

Cena

Książka sama w sobie nie jest droga. Jeżeli zdecydujesz się na tą samą wersję książki co ja - czyli PDF (idealna do jakiegoś czytnika np. tablet, czytnik :) - to zapłacisz $9.

Co w książce?

Ethan Marcotte pokazał problem elastyczności stron na konkretnym przykładzie. Jest to o tyle dobre, że widać czarno na białym co trzeba zrobić ze stroną aby wyglądała poprawnie na większości przenośnych urządzeń. Nie zabrakło różnież linijek kodu. Mógł (Ethan) teoretyzować, ale wtedy książka nie miałaby żadnej wartości. Taką książkę to każdy by mógł napisać :).

Wiedza w książce jest podzielona na 5 części:

  1. Our Responsive Web. Ten rozdział stanowi swego rodzaju wstęp do książki. Takie filozoficzne rozważania autora, który nakreśla problem tworzenia stron w dobie coraz to większej ilości urządzeń mobilnych. Słysznie zauważył, że powrót do czasów kiedy rozdzielność 800x600 była podstawą jest już faktem. Bardzo dobrze zilustrował problem na przykładzie malarza, który musi wykonać swoje dzieło na płotnie o dowolnej wielkości. Dodatkowo podaje inne przykłady responsywnego designu z życia wziętego tj. szyby, które za sprawą prądu robią się przezroczyste czy interaktywne bryły, które się wyginają gdy się do nich podchodzi.
  2. The Flexible Grid. W tym rozdziale zaczynają się konkrety. Ehtan wprowadza nas w projekt, który będzie tworzył. Nakreśla pierwsze problemy oraz pokazuje na czym polega, jak tworzyć elastyczne strony. Na pierwszy ogień bierze stworzenie elastycznego designu (gridu), który odpowiednio reaguje (sam) na zmianę wysokości i szerokości okna przeglądarki.
  3. Flexible Images. Skoro mamy już układ strony, który sam się dopasowuje do rozdzielczości to trzeba rozwiązać problem z obrazkami. Idealnie by było gdyby one też zmieniały wielkość w zależności od rozmiaru okna czy urządzenia. Oczywiście problem pojawia się gdy trzeba przetestować rozwiązanie w Internet Explorerze :). Na to też jest sposób jak się potem okaże. Dynamiczne tła też są omawiane :).
  4. Media Queries. Na początek krótki wstęp do media queries - czym były i jak działały kiedyś i pokazanie możliwości, które dają nam dzisiaj. W większości przypadków problem elastycznych stron można rozwiązać za pomocą: @media screen and (max/min-width/height: ZZZpx). Problem pojawia się, jak zwykle w przypadku IE :). Autor pokazuje kilka gotowych rozwiązań w postaci kilku bibliotek JS. Mnie szczególnie spodobała się tabelka z restawieniem szerokości na różne urządzenia.
  5. Becoming Responsive. Tak jak w przypadku pierwszego rozdziału tak i na koniec autor książki opisuje proces tworzenia stron, które mają być elastyczne. Mamy już praktyczną wiedzą (poprzednie rozdziały). Teraz czas na zastanowienie się kiedy tworzyć takie strony. W tym rozdziale też nie zabraknie kilku ciekawych przykładów z pracy Ethana np. serwowanie takiej samej strony na desktop i urządzenie mobilne z taką różnicą, że na urządzenie mobilne mniej się pokaże, będzie większa i czytelna czcionka jest szaleństwem, bo każemy użytkownikowi zasysać niepotrzebne dane (które są odpowiednio płatne). Warto zastanowić się w takich przypadkach nad jakąś specjalną stroną, która będzie dużo lżejsza.

Czy warto?

Jasne! Mimo, że ksiązka jest dostępna w języku angielskim to warto. Każdy, kto czyta tutatiole, manualne czy dokumentacje, bez problemu przeczyta i zrozumie treść. Cena $9 (za PDF) za taką dawkę wiedzy to nie jest dużo. Ethan omawia każdy element na stronie na który trzeba zwrócić uwagę. Podaje kilka rozwiązań, dzieli się kodem źródłowym a nawet pokazuje jak powinna wyglądać współpraca kodera z grafikiem - a właściwie burza mózgów.

Wg mnie strony na urządzenia mobilne będą bardzo popularne. W Polsce musi dotrzeć do klientów ta myśl. Patrząc nawet na opcje jakie daje sieć reklamowa Google AdWords, to prędzej czy później trzeba będzie się zastanowić czy nie warto w taką wersję strony zainwestować. AdWordsy dają możliwość kierowania reklam na urządzenia mobilne! Do tego czasu lepiej mieć już opanowane podstawy i sztuczki z tworzenia takich stron. Ta książka opisuje wszystko to czego nam (koderom) potrzeba!

[link do książki]

Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar Cani

09.01.2012 Cani

Same dobre rzeczy słyszę o tej publikacji. Właśnie ją zamówiłem. Także myślę, że się nie zawiodę. Dodatkowo cena jest całkiem niska.

Gavatar dev

12.01.2012 dev

Hm, to już kolejna dobra recenzja, która mi się nawija. Chyba muszę się dokładniej przyjrzeć tej książce :)

Gavatar Marian Kaczmarek

28.06.2012 Marian Kaczmarek

Również polecam. Jest napisana bardzo zrozumiałym językiem, więc nawet język angielski nie stanowi tu problemu. Proponuję zamawiać jak najszybciej, póki cena jest przyzwoita.

Gavatar chemikpil

01.10.2012 chemikpil

Dzięki za recenzję, książka już idzie do mnie w wersji papierowej ale już mogę czytać e-booka.
W każdym bądź razie sam temat responsiva jest warty zgłębienia, bo w Polsce kuleje to wszystko, a szkoda, bo może i jest to większy koszt przy tworzeniu, ale przynajmniej strony są bardziej dostępne.

Dodaj komentarz