Darmowy fragment publikacji:
Tytuł oryginału: Redesign The Web (The Smashing Book #3)
Tłumaczenie: Marek Pętlicki
Skład: Marcin Chłąd
ISBN: 978-83-246-5613-4
Published 2012 by Smashing Media GmbH, Freiburg, Germany.
All Rights Reserved. Authorized translation from the English language edition published
by John Wiley Sons Limited. Responsibility for the accuracy of the translation rests solely
with Helion S.A. and is not the responsibility of John Wiley Sons Limited. No part of this
book may be reproduced in any form without the written permission of the original copyright
holder, John Wiley Sons Limited.
Translation copyright © 2014 by Helion S.A.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu
niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą
kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym,
magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi
bądź towarowymi ich właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce
informacje były kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani
za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych
lub autorskich. Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności
za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/redewe
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
• Kup książkę
• Poleć książkę
• Oceń książkę
• Księgarnia internetowa
• Lubię to! » Nasza społeczność
Spis treści
7
9
37
71
93
135
161
195
229
253
283
309
333
Wstęp
Elliot Jay Stocks
Biznesowa strona przeprojektowywania
Paul Boag
Wybór platformy: techniczne kwestie przeprojektowywania
Rachel Andrew
Zanurz się w HTML5
Ben Schwarz
Przestyluj, przekoduj, przeobraź za pomocą CSS3
David Storey i Lea Verou
Odkryj JavaScript na nowo:
sztuczki pozwalające zastąpić skomplikowany kod jQuery
Christian Heilmann
Techniki budowania lepszego user experience
Dmitry Fadeyev
Projektowanie z myślą o przyszłości, za pomocą Photoshopa
Marc Edwards
Przeprojektowywanie z osobowością
Aarron Walter
Urządzenia mobilne w projektowaniu interfejsu użytkownika:
„Wersja WWW czy natywna?”
Aral Balkan
Nowy projekt przepływu: podejście z myślą o przyszłości
Stephen Hay
Bądź cudownie elastyczny: projektowanie atomów i pierwiastków
Andy Clarke
Skorowidz
Kup książkęPoleć książkęKup książkęPoleć książkęBądź cudownie elastyczny:
projektowanie atomów
i pierwiastków
Andy Clarke
Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówROZDZIAŁ 11Kup książkęPoleć książkęsą takie trzy słowa, które moim zdaniem idealnie
podsumowują pracę nad projektami WWW.
Są to:
• Responsywny.
• Projekt.
• WWW.
To Ethan Marcotte wymyślił nazwę dla tej kombinacji elastycznych siatek, płynnych obrazów
i definicji stylów dla różnych mediów w CSS3. Niedługo potem twórcy stron WWW na całym
świecie zaczęli chwalić się przepięknymi szablonami stron, pakietami, skryptami i innymi
rozwiązaniami wielu problemów zdefiniowanymi pojęciem wprowadzonym przez Ethana:
responsywnym projektem WWW (ang. responsive Web design).
Responsywny projekt WWW nie dotyczy tylko tego, w jaki sposób projektanci i programi-
ści wykorzystują takie technologie jak media queries w CSS3. Nie chodzi o to, jak obsługujemy
obrazy o różnych rozmiarach czy tabele danych. To są tylko wybrane wyzwania technolo-
giczne, ale responsywność nie dotyczy tylko pokonywania problemów. Nie polega na uczeniu
się owych języków ani zdobywaniu doświadczenia w ich wykorzystaniu. Chciałbym, żeby to
było takie proste.
Ale nie jest.
Projektowanie w sposób responsywny to coś o wiele, wiele bardziej skomplikowanego.
Czy to Ci się podoba, czy nie, responsywny projekt WWW stawia wyzwania całej wiedzy,
jaką posiadamy na temat WWW, i dotyczy to wszystkich osób zaangażowanych w proces.
Właśnie dlatego w tym rozdziale zademonstruję, dlaczego stare metody projektowania są już
nieaktualne, i wprowadzę nowe mechanizmy, które reagują w sposób responsywny i które
z powodzeniem zastosowałem w swoich projektach.
PoDstawa PraCy
Jak sądzę, nie jestem jedyną osobą, która wierzy w to, że responsywne projektowanie stron
WWW stanowi fundamentalną zmianę sposobu projektowania. Andy Hume napisał104:
Dla mnie responsywne projektowanie stanowi kolejny przykład powrotu do ducha
WWW. Właśnie dlatego nie jest to jeszcze jeden zbędny dodatek. To podstawa tego,
co powinieneś robić.
Zgadzam się z Andym i choć niektóre osoby postrzegają responsywne projektowanie WWW
jako jeszcze jeden trend, jakich wiele, ja wierzę, że to prawdopodobnie największa i naj-
ważniejsza zmiana w filozofii projektowania stron WWW od momentu powstania tej sieci.
Napisałem kiedyś105:
104 Andy Hume, Responsive by Default (responsywny z założenia), smashed.by/respdef.
105 Andy Clarke, I Don’t Care about Responsive Web Design (nie martwię się o responsywne projektowanie
WWW), smashed.by/respcare.
310
ROZDZIAŁ 11Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówKup książkęPoleć książkęWszystko, co jest sztywne i nieresponsywne, nie powinno być już nazywane projektem
WWW, jest czymś innym. Jeśli nie potrafisz wykorzystać wrodzonej płynności sieci
WWW, nie jesteś projektantem WWW, jesteś kimś innym. Projektowanie WWW jest
responsywne. Responsywne projektowanie WWW jest projektowaniem WWW realizo-
wanym w prawidłowy sposób.
Nie przesadzałem. Podtrzymuję to stwierdzenie, nawet mimo że niektórzy uważają, że mnie
nieco poniosło. Wierzę, że analiza tego, w jaki sposób projekt będzie reagował na różnych
rozmiarach wyświetlaczy na niezliczonych typach urządzeń, jest jednym z najistotniejszych
aspektów pracy nowoczesnego projektanta WWW.
Jak, kieDy i DlaCzego?
Responsywne projektowanie WWW zmienia to, co robimy dla WWW, zatem zmienia też
sposób, w jaki to robimy. Już nie tylko projektanci i programiści są zarażeni. Responsywne
projektowanie WWW wywiera wpływ na wszystkich, którzy wymyślają, projektują, budują,
płacą za WWW lub jej używają.
• Strateg treści? Ty.
• Projektant interakcji, doświadczenia lub grafiki. Zgadza się.
• Programista interfejsu lub strony serwerowej? To też Ty.
• Szef lub klient? Zgadłeś.
• Użytkownik? To też Ty, i to w dobrym znaczeniu tego słowa.
Responsywne projektowanie WWW stawia więcej pytań, niż udziela odpowiedzi. Wpływa
na pracę i interakcje między wszystkimi osobami zaangażowanymi w proces, od specjalistów
od treści i programistów wszelkiej maści, po szefów i klientów, którzy akceptują pracę, którą
wykonujemy, i płacą za nią.
Projektowanie responsywne stawia przed nami wyzwania w zakresie tego, jak, kiedy i dla-
czego. Tym wyzwaniom nie zawsze łatwo sprostać i zmiany, które wprowadzają, nie zawsze są
popularne. Należy oczekiwać sporego oporu u ludzi, którzy nie potrafią lub nie chcą zrozu-
mieć potrzeby adaptacji.
to było naPrawDę Proste żyCie
W 1998 roku, gdy tworzyłem swoje niewielkie studio projektowe, największym wyzwaniem
technicznym były problemy ze zgodnością wyświetlania stron w przeglądarkach Internet
Explorer 4 i Netscape 4. Trzeba przyznać, że choć pracowałem z niedojrzałymi technologiami
i musiałem radzić sobie z koszmarnymi przeglądarkami, życie miałem wówczas znacznie
prostsze. Wszyscy takie mieliśmy.
311
Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówROZDZIAŁ 11Kup książkęPoleć książkęNaprawdę proste życie.
Oto schemat mojej pracy, założę się, że Twój był taki sam. Może nadal taki jest?
1. Tworzyłem projekt w Adobe Photoshop lub Macromedia Fireworks: pojedynczy
projekt, który miał działać dla wszystkich, niezależnie od tego, z jakiej przeglądarki
korzystali i na jak dużych ekranach.
2. Demonstrowałem projekt klientom w postaci makiet (które nazywałem statycznymi
prezentacjami wizualnymi, ponieważ były nieinteraktywne).
3. Po konsultacji z klientami nanosiłem poprawki. Ich wynik eksportowałem do ko-
lejnego zestawu statycznych prezentacji. Po dwóch, trzech lub czterech iteracjach
projekt był akceptowany, wówczas kroiłem go na fragmenty w HTML-u i CSS-ie,
wysyłałem na serwer i wracałem do domu na herbatę i powtórki Animal Magic106.
W tamtych czasach tworzenie pojedynczego projektu było jak najbardziej do przyjęcia, ponie-
waż dla nas, naszych szefów i klientów sieć WWW była medium obsługiwanym z platformy
desktopowej. Dziś jednak nie możemy sobie pozwolić na komfort pojedynczego projektu. Życie
już nie jest tak proste, ponieważ kiedyś mieliśmy dwie istotne przeglądarki, dziś mamy ich po-
tencjalnie setki na różnych rodzajach urządzeń, na których ludzie korzystają z zasobów WWW.
wszystko Płynie
Nawet już na przełomie tysiącleci powinniśmy zacząć się orientować, że sieć WWW znacząco
różni się od innych mediów i że część jej unikalności polega na braku kontroli nad tym, w jaki
sposób ludzie ją oglądają i wchodzą w interakcje z treściami i usługami przez nią świadczony-
mi. Prawda jest taka, że od początku powinniśmy tworzyć nasze projekty tak, aby uwzględ-
niać elastyczną naturę sieci WWW.
W rzeczywistości było kilka osób, które zdawały sobie sprawę z tego faktu i próbowały nas
uświadomić, że żyliśmy w błędzie. W 2000 roku John Allsopp napisał tekst, który jest przez
wiele osób uznany za najważniejszy artykuł na temat projektowania WWW w historii: A Dao
of Web Design (Tao projektowania WWW). W tym artykule John napisał107:
Kontrola, jaką projektanci znają z mediów drukowanych i często pożądana w mediach
WWW, jest po prostu efektem ograniczeń kartki papieru. Musimy pogodzić się z tym, korzy-
stać z faktu, że projektowanie WWW nie ma takich ograniczeń, i projektować z myślą o tej
elastyczności. Ale w pierwszej kolejności musimy się pogodzić z tym, że wszystko płynie.
106 smashed.by/anmag.
107 John Allsopp, A Dao of Web Design (Tao projektowania WWW), smashed.by/dao.
312
ROZDZIAŁ 11Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówKup książkęPoleć książkęDobra rada.
Czy z niej skorzystaliśmy?
Nie żartuj.
Co zrobiliśmy zamiast tego?
Oszukiwaliśmy się, że mamy kontrolę. Próbowaliśmy wymusić ten sam poziom kontroli, jaki
mieliśmy w druku. W znacznym stopniu ignorowaliśmy fakt, że WWW jest elastyczna i pró-
bowaliśmy zmusić ją do tego, żeby była nieruchoma. Oto kilka przykładów naszych zabiegów.
Projektowanie od krawędzi kontenera
Gdy dokonałem przejścia z druku do WWW, to medium było zupełnie nowe. Nie było żadnych
reguł. Dlatego ja i inni projektanci podobni do mnie zaimportowaliśmy zasady, idee i narzę-
dzia, które doskonale znaliśmy. Ludzie, którzy nas wynajmowali, również nie znali się na
WWW, dlatego oni także zaadaptowali swoją wiedzę z redakcji i drukarni i wykorzystali to,
co zawsze dla nich działało.
Do projektowania stron WWW używałem Photoshopa i każdy nowy projekt rozpoczynałem
od pustego dokumentu: tworzyłem prostokąt w układzie pejzażu i wypełniałem go pomysłami.
Te pierwsze prostokąty miały 640 pikseli szerokości i 480 wysokości, ponieważ wówczas taka
była rozdzielczość większości monitorów w komputerach PC. Projektanci byli przyzwyczajeni
do kontroli, dlatego robiliśmy wszystko, co w naszej mocy, aby ją zachować, między innymi takie
idiotyzmy jak pisanie skryptów, które nie pozwalały zmienić wymiarów okna przeglądarki, albo
opakowywanie zawartości w pięć lub więcej zagnieżdżonych ramek108. Ten prostokąt o szerokości
640 pikseli był dość ciasny, ponieważ (zapewne to pamiętasz) klienci nie chcieli zmuszać użyt-
kowników do przewijania treści, więc wszystko musiało (po prostu musiało) mieścić się jednocze-
śnie na ekranie. Ekrany o szerokości 640 pikseli wkrótce ustąpiły rozdzielczości 800600, więc
projektanci po prostu rysowali większe prostokąty. Wizja większej przestrzeni była upajająca, ale
w niedługim czasie i te wielkie prostokąty zostały zapełnione i zaczęliśmy patrzeć na następną
okazję: rozdzielczość 1024768. I znów, i jeszcze raz, na każdym etapie, studiowaliśmy logi serwe-
rów i łamaliśmy głowy, czy to już czas, żeby przełączyć się na większą szerokość prostokąta.
To może wydać się dziwne, ale w 2005 roku dyskusja nad tym, czy lepsze są układy sta-
tyczne, czy płynne, była bardzo gorąca. Poważnie.
Kiedyś przeprowadziłem wywiad z Jasonem Santa Marią na temat jego nowego projektu
strony A List Apart, serwisu dla osób tworzących strony WWW109. Dziwiłem się, dlaczego
Jason zdecydował się ustawić szerokość strony na 1240 pikseli, zamiast zastosować płynny
układ oparty na procentach. Jason odpowiedział110:
108 Dokument FAQ aplikacji Dreamweaver, Using Frames To Align Page Content
(używanie ramek do wyrównania treści strony), smashed.by/tut.
109 Jason Santa Maria, A List Apart Redesign (projekt serwisu A List Apart), smashed.by/mari.
110
Andy Clarke, A List (taken) Apart (A List Apart rozłożony na części), smashed.by/andy.
313
Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówROZDZIAŁ 11Kup książkęPoleć książkęA List Apart zawsze starał się być serwisem wyprzedzającym inne koncepcyjnie. Nie
obsługujemy już rozdzielczości 800600 ani oczywiście 640480. Czy wy tak robicie?
Gdy strony przestały poprawnie się wyświetlać w rozdzielczości 640480, ludzie wpadli
w szał… w tej chwili nikogo to już nie obchodzi. Wszystko się zmienia. Zaufaj mi, niedłu-
go przekonasz się, że coraz więcej stron zacznie się rozszerzać, jakby chciały wygodnie
się rozciągnąć, a nie gnieździć z podkulonymi kolanami.
Ludzie oburzyli się wówczas na nowy, szerszy A List Apart. No może nie aż tak drastycznie.
Jeremy Keith (o którym trudno powiedzieć, że nie jest konsekwentny) powtarzał wątpliwości
Jona Hicksa111 na temat rozbieżności między „rozsądkiem projektantów a preferencjami użyt-
kowników”. Jeremy powiedział wówczas112:
Argumenty o szerokościach 640, 800 czy 1024 piksele są niczym dyskusja nad tym, czy
pepsi smakuje lepiej niż coke, gdy tak naprawdę potrzebujesz szklanki wody. Zabawa
w cyferki to ściema. Wielka ściema o ustalonej szerokości.
Przez lata oszukiwaliśmy się, że skoro 640, 800, 1024 piksele były najpopularniejszymi szero-
kościami ekranów, powinniśmy projektować strony tak, aby miały taką szerokość. Desperac-
ko czepiliśmy się ustalonych wymiarów, ponieważ rzeczywistość, czyli fakt, że sieć WWW
jest medium o płynnych granicach i nieustalonych wymiarach płótna, bez krawędzi, była
zbyt trudna do zaakceptowania.
Sieć WWW nie ma kraWędzi
Dziś nie jesteśmy w stanie przewidzieć rozmiaru ani formatu, w jakim będzie oglądana nasza
strona, zatem sieć WWW efektywnie nie ma krawędzi. Co zatem robią projektanci?
Tworzymy krawędzie… Gdy szerokość 640 została zastąpiona przez 800, a ta następnie
przez 1024, stosowaliśmy coraz szersze płótna jako punkt wyjścia dla naszych projektów. Ry-
sowaliśmy coraz większe prostokąty, a następnie wypełnialiśmy je naszą treścią, zaczynając
od krawędzi i kontynuując do środka.
Gdy Steve Jobs (pokój jego duszy) w 2007 roku wyciągnął z kieszeni pierwszego iPho-
ne’a z przeglądarką Safari, zademonstrował dwie orientacje ekranu w jednym urządzeniu.
Zaimplementowane w iPhonie gesty przesuwania i rozciągania udowodniły ostatecznie, że
krawędzie nie mają znaczenia. Sieć WWW zmieniła się tego dnia na zawsze, dzięki temu jed-
nemu urządzeniu. Co zatem zrobiliśmy my, projektanci?
Narysowaliśmy maleńki prostokąt. 320 pikseli szerokości, 480 wysokości.
111
112
Jon Hicks, Is 1024 OK? (czy 1024 jest OK?), smashed.by/hicks.
Jeremy Keith, A List Too Far Apart? (A List Apart rozstawiony za szeroko?), smashed.by/runaway.
314
ROZDZIAŁ 11Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówKup książkęPoleć książkęGdy Steve usiadł na kanapie i pokazał pierwszego iPada, ponownie ustawiliśmy nasze płótna
na wymiary 1024 na 768 pikseli. Tak bardzo zafiksowaliśmy się na wymiarach płótna programu
graficznego, ponieważ wiedzieliśmy, o co w tym chodzi, i tego oczekiwali szefowie i klienci.
Czy słyszałeś taką definicję obłędu: robienie za każdym razem tego samego, oczekując in-
nego wyniku? Właśnie tak pracowaliśmy dotychczas. Prostokąt to się rozszerzał, to kurczył,
to znów rozszerzał. Liczba wymiarów prostokąta ciągle rosła, ale nasze myślenie pozostawało
bez zmian.
z nożem na strzelaninę
Nie powinniśmy być dla siebie zbyt surowi. Narzędzia, którymi kiedyś się zachwycaliśmy,
wykonały swoje zadanie tak dobrze, jak były w stanie, przez długi czas utrzymując przy życiu
wizję WWW o ustalonych wymiarach. Pomyśl o tym. Jaka jest pierwsza operacja, gdy zaczy-
nasz nowy projekt w Fireworks lub Photoshopie?
Plik/Nowy
N.
A następnie ustalasz wymiary dokumentu.
Zadaj sobie pytanie, czy istnieje powód tego, że tak wiele stron ma ustawioną na sztywno
szerokość i wycentrowany układ. Czy to nie jest efekt tego, że klient widział, a następnie
zaakceptował projekt stworzony na obrazku o ustalonej szerokości?
Dostawcy oprogramowania graficznego, jak Adobe, uzupełnili swoje produkty o mechani-
zmy wspomagania projektowania stron WWW, ale nie znajdziesz w nich niczego, co pomaga-
łoby projektować w sposób responsywny. Nie są w stanie nawet pomóc nam w demonstrowa-
niu klientowi stanów i przejść między nimi, nie mówiąc już o obrazowaniu sposobu, w jaki
elastyczny układ wpływa na zmiany rozmieszczenia elementów. Ponownie zacytuję Jasona
Santa Marię113:
Każdy element strony może wpłynąć na położenie innych elementów. Musimy być
w stanie określić, co ma się stać z elementem (foat, clear, wrap itp.), gdy coś takiego się
wydarzy. Dodatkowo okno przeglądarki jest płótnem o zmiennych rozmiarach. Aplikacje
desktopowe działają wyłącznie na ustalonych wymiarach płótna, projektowanie w spo-
sób płynny i elastyczny wymaga czegoś więcej niż tylko wyobraźni.
Obecnie używane przez nas narzędzia, w szczególności Photoshop i Fireworks, po prostu nie
są przystosowane do obsługi wymagań projektowania responsywnego. Przynoszą nóż na
strzelaninę.
113
Jason Santa Maria, A Real Web Design Application (realne zastosowania projektowania WWW),
smashed.by/rwdapp.
315
Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówROZDZIAŁ 11Kup książkęPoleć książkęten kręPuJąCy fakt
Przez długi czas najtrudniejszym zagadnieniem projektowania WWW nie był fakt, że wielu
użytkowników korzystało z naszych projektów na wyświetlaczach różnych wymiarów. Dzia-
ło się tak głównie dlatego, że nie przejmowaliśmy się tym.
Po prostu ignorowaliśmy ten krępujący fakt i kontynuowaliśmy swoją robotę, wierząc, że
większość ludzi posiada ekrany o wystarczających wymiarach, aby nasz projekt wyświetlił
się na nich bez problemu.
Gdy iPhone uświadomił nam w końcu, że nasza praca nie zawsze będzie najlepiej wyglądała
na ekranie o szerokości 1024 pikseli, w pierwszym odruchu zaczęliśmy tworzyć projekty dedy-
kowane dla iPhone’a, które były niezależne od tych dla desktopu. To automatycznie spowo-
dowało podwojenie czasu niezbędnego na tworzenie projektu, uwagi od klienta, poprawki
i zatwierdzenie.
Gdy na rynku pojawiło się więcej smartfonów, eReaderów i tabletów, szefowie i klienci
zaczęli prosić o dedykowane wersje projektu strony również dla urządzeń takich jak114:
iPhone
Android
iPad
Kindle Fire
Ale tworzenie niezależnych wersji dla każdego z nich powoduje trzy-, cztero-, a nawet pięcio-
krotne zwiększenie ilości czasu niezbędnego na projektowanie. Trzy-, cztero-, pięciokrotne
wydłużenie cyklu akceptacji. Trzy, cztery, a nawet pięć razy więcej spotkań!
Z tak wielką liczbą charakterystyk, możliwości i wymiarów tworzenie niezależnych pro-
jektów dla każdego z wymienionych urządzeń nie ma sensu, ekonomicznego ani praktyczne-
go, nie jest też najbardziej efektywnym sposobem wykorzystania czasu i talentu projektanta.
Tworzenie kilku projektów o ustalonych wymiarach nie ma żadnych zalet również ze wzglę-
dów technicznych, gdy projekty zaczniemy przekładać na kod. Jak Stephanie Rieger napisała
w The ‘trouble’ with Android115:
Projektowanie z zastosowaniem sztywnych wymiarów ekranu w rzeczywistości nigdy
nie było dobrym pomysłem… po prostu istnieje za wiele różnic nawet pomiędzy „najpo-
pularniejszymi” urządzeniami.
Zamiast myśleć o niezależnych projektach dla każdego z urządzeń, powinniśmy zacząć my-
śleć, jak sugeruje Ethan Marcotte116, o pojedynczym projekcie, który ma wiele powierzchni,
ułożonych zgodnie z pewnym konceptem, czymś na wyobrażenie płynnego kontinuum:
114 Powszechnie stosowane wymiary i gęstości ekranów smartfonów znajdziesz w rozdziale 7.
115 Stephanie Rieger, The ‘trouble’ with Android („kłopot” z Androidem), smashed.by/trouble.
116 Ethan Marcotte, Responsive Web Design (responsywne projektowanie WWW), smashed.by/rwdala.
316
ROZDZIAŁ 11Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówKup książkęPoleć książkęZamiast dopracowywać niezależne projekty dla każdego z nieskończonej liczby urzą-
dzeń, możemy potraktować je jako różne punkty widzenia na to samo doświadczenie.
Podoba mi się ten sposób pojmowania projektowania responsywnego: różne punkty widzenia
na to samo, ponieważ doskonale wpasowuje się w koncepcję „wszystko płynie” Johna Allsop-
pa opisaną w jego Dao. O projekcie lubię myśleć jak o rzece, która zaczyna się jako strumyk
i staje się coraz szersza, aż wpada do morza. Nigdy nie wiemy, w którym miejscu jej nurtu
użytkownik będzie miał okazję jej doświadczyć, dlatego musimy być elastyczni.
Ten fakt nasuwa pytanie: jeśli nie możemy używać niezależnych projektów o ustalonej
szerokości, co powinniśmy zrobić? W jaki sposób tworzyć projekt? W jaki sposób projektować
WWW bez krawędzi?
„hej, zobacz, co zrobiłem”
Dziś zupełnie normalne jest tworzenie kilku statycznych prezentacji tworzonego projektu.
Istnieje kilka powodów takiego zachowania.
Dla ProJektantów
Photoshop i Fireworks są niesamowitymi narzędziami do eksperymentowania, które poma-
gają nam rozwiązywać problemy i definiować wizualny kierunek projektu. Czasem sam fakt
używania Photoshopa czy Fireworksa jest już pomocny, niekiedy przypadkowo pozwalając
nam osiągnąć wyniki, których nie bylibyśmy w stanie uzyskać za pomocą innych narzędzi.
Wynik możemy pokazać szefom i klientom, mówiąc: „Hej, zobacz, co zrobiłem”.
Problem ze statycznymi prezentacjami, jak pisałem już wielokrotnie, polega na tym, że
nie potrafią przekazać rzeczywistego zachowania interaktywnej strony WWW. Gdy są użyte
w nieprawidłowy sposób, mogą wywołać błędne oczekiwania. Projektanci używają tego typu
prezentacji w celu uzyskania akceptacji projektu, a szefowie i klienci oczekują, że końcowy
wynik będzie wyglądać dokładnie tak jak na prezentacji. W końcu właśnie to im pokazaliśmy.
Ale nie wszystkie przeglądarki są w stanie wyświetlić dokumenty w idealnie taki sam
sposób. Wszystkie mają inne cechy, które są ignorowane przez statyczny projekt. Z tego
powodu to tylko nasza wina, że musimy później spędzać godzony nad HTML-em, CSS-em
i JavaScriptem w daremnych próbach dostosowania do statycznego projektu wyglądu strony
w każdej przeglądarce.
Z tego też powodu w przyszłości projektanci muszą zaakceptować fakt, że to, co zobrazują
na statycznych prezentacjach, nie musi wyglądać identycznie na każdym urządzeniu. Muszą
się też nauczyć wywoływania odpowiednich oczekiwań w odbiorcach tych statycznych pre-
zentacji: to tylko przykład wyglądu strony na niektórych platformach, ale nie na wszystkich.
317
Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówROZDZIAŁ 11Kup książkęPoleć książkęDla Programistów
Statyczne prezentacje wizualne mogą być użyteczne dla programistów, którzy otrzymali
zadanie implementacji projektu. Prezentacje służą jako schemat dla programistów oraz jako
wzorzec dla szefów i klientów, którzy będą chcieli porównać, w jakim stopniu ostateczny
wynik będzie pasować do wizji projektowych przekazanych w prezentacji.
Jednak od tej pory programiści muszą zaakceptować fakt, że statyczna prezentacja stano-
wi jedynie wzorzec wyglądu strony. Programista musi się nauczyć samodzielnie podejmować
decyzje projektowe, dotyczące między innymi tego, w jaki sposób projekt dostosowuje się do
zmian rozmiaru ekranów i urządzeń.
Dla klientów
Najbardziej wartościowym etapem procesu projektowania są często dyskusje na temat tych sta-
tycznych prezentacji z klientami i szefami. Jeśli zostaną zdefiniowane odpowiednie oczekiwania,
a szefowie i klienci zrozumieją znaczenie tego, co widzą, statyczne prezentacje mogą stanowić nie-
samowitą pomoc w definiowaniu planu i wywoływaniu komentarzy i konstruktywnej krytyki.
Problem polega na tym, że odpowiednie oczekiwania rzadko bywają zdefiniowane, a im
więcej oczekujemy od statycznych prezentacji wizualnych, tym stają się one mniej odpo-
wiednie i mniej efektywne w charakterze narzędzi do przedstawienia projektu klientowi.
W szczególności prezentacje o stałej szerokości nie reagują na zawartość, a dodatkowo lu-
dziom łatwo jest pomylić projekt z układem strony.
Projekt nie (zawsze) jest układem
Czy klient kiedykolwiek powiedział Ci „nie podoba mi się projekt”?
Jeśli to Ci się przytrafiło, czy spróbowałeś podrążyć temat i dowiedzieć się, co konkretnie
w projekcie mu się nie spodobało? Założę się, że nie były to dobrane czcionki ani sposób ich
użycia. Nie zostały nawet zauważone. Nie był to też sposób, w jaki użyłeś koloru. Ani ele-
gancko dobrane linie, ramki i cienie wokół kontenerów. Być może szczegóły brzmiałyby jak:
„Pasek boczny powinien być po lewej, nie po prawej”.
Innymi słowy, klient miał na myśli układ, ale krytykował projekt.
Nierzadko zdarza się, że szefowie i klienci traktują układ w tych samych kryteriach co
inne zagadnienia projektu: typografię, kolor czy teksturę. Projektanci zajmują się również
tym zagadnieniem, ponieważ od lat tworzyli i demonstrowali statyczne prezentacje, w któ-
rych były zawarte wszystkie te rzeczy.
318
ROZDZIAŁ 11Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówKup książkęPoleć książkęOd dziś musimy zaakceptować, że projekt i układ są wzajemnie niezależnymi problema-
mi. Projekt komponentów i ich wzajemne ułożenie w poziomie i w pionie stanowią niezwią-
zane zagadnienia. Aranżacja układu komponentów będzie bez wątpliwości zupełnie inna
na różnych szerokościach ekranu, ale projekt tych komponentów z pewnością pozostanie
niezależny od układu.
w PierwszeJ koleJnośCi zaProJektuJ komPonenty
Zastanówmy się przez chwilę nad komponentami, które wykorzystujemy w praktycznie każ-
dym projekcie. Prawie na pewno musisz zaprojektować następujące elementy:
• kontenery;
• tabele danych i inne typy paneli;
• obrazy (treści i ikonografię);
• elementy interfejsu (karuzele lub przewijacze itp.);
• nawigację (na wielu poziomach);
• czcionki.
Zachowaj czujność. To jest istotny moment. Tworzenie projektu w oderwaniu od układu
sprowadza się do definiowania stylu tych komponentów. To, w jaki sposób wygląda każda
z tych części, będzie definiowało wygląd całości. A dokładniej: wygląd i zachowanie każdego
z tych komponentów powinny być zaprojektowane w pierwszej kolejności, na długo zanim
zaczniesz zastanawiać się nad ich układem. O takim podejściu lubię myśleć jak o pracy od
absolutnych podstaw: na poziomie atomów.
Zdaję sobie sprawę, że idea projektowania komponentów w oderwaniu od kontekstu może
wydać się dziwaczna, szczególnie jeśli przyzwyczaiłeś się (jak większość z nas) do projekto-
wania stron WWW w „tradycyjny” sposób. Ale prawda jest taka, że od dłuższego czasu i tak
wykorzystywaliśmy podobnego typu abstrakcyjne koncepcje.
tabliCe nastroJów
Tablice nastrojów od dawna były doskonałym narzędziem do gromadzenia materiałów na
inspiracje. Niezależnie od tego, czy kolekcje obrazów zapisywałeś na swoim komputerze, czy
w aplikacjach typu Evernote, usługach online jak Pinterest, czy po prostu przypinałeś pinez-
kami do tablicy korkowej, kombinacja różnych elementów była pomocna do wykreowania
odpowiedniego nastroju.
319
Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówROZDZIAŁ 11Kup książkęPoleć książkęNasze tablice nastrojów mogą mieć nowoczesny, zabawny albo tradycyjny wydźwięk oraz,
nieważne jak to nazwiesz, wygląd, nastrój czy osobowość. Najważniejsze jest to, że za ich
pomocą definiujemy styl. Oczywiście projektowania nie musimy zaczynać od papieru, nożyc
i kleju. Jeśli wolisz, możesz nie brudzić rąk.
Jeżeli projektujemy w sposób responsywny, możemy zacząć od projektowania komponen-
tów jako indywidualnych, ale stylistycznie powiązanych części projektu.
Być może Adobe Photoshop i Fireworks nie są idealnymi narzędziami do projektowania
stron WWW, ale są wartościowe do projektowania różnych typów komponentów. Aby na tym
etapie uniknąć myślenia o układzie, spróbuj utworzyć dokument Photoshopa albo Fireworksa
o wymiarach 10 000 na 10 000 pikseli albo większy. Na tak wielkim płótnie pogrupuj ele-
menty na nagłówki, style elementów tekstowych, formularzy, przycisków, komunikatów
o błędach itd. Gdy to będzie konieczne, przesuwaj komponenty na płótnie, porównując, jak
wyglądają w różnych zestawieniach.
Trent Walton napisał117:
Projektanci WWW muszą na projekt patrzeć ponad układem elementów strony i wy-
obrażać sobie, w jaki sposób elementy będą zmieniały wzajemne ułożenie przy różnych
szerokościach ekranu, nie tracąc przy tym formy i hierarchii. Media queries mogą być
użyte do czegoś więcej niż naprawianie popsutych układów. Z odpowiednim planowa-
niem możemy zacząć tworzyć choreografię elementów proporcjonalnie do rozmiaru
ekranu, serwując najlepsze z możliwych doświadczenie przy jego dowolnej szerokości.
Odseparowanie projektu od układu osiągane dzięki pracy na poziomie atomowym jest waż-
nym zjawiskiem, ponieważ pomaga każdemu (projektantowi i jego szefowi lub klientowi)
skupić się na szczegółach projektu, a jednocześnie pozwala uniknąć definiowania oczekiwań
co do tego, w jaki sposób komponenty będą ułożone na ekranach różnych rozmiarów.
Przez kilka ostatnich miesięcy do celów prezentacji projektów klientom używałem arku-
szy projektowych (ang. design sheets). Odkryłem, że są niezwykle efektywne, choć ich użycie
wymaga odrobiny czasu na początku, w celu wyjaśnienia klientom zasady ich działania.
Dzięki nim możemy zadać klientom pytanie: „Czy to jest nastrój, który chcemy osiągnąć?”.
Arkusze projektowe są doskonałym narzędziem pozwalającym na bardzo wczesne ustale-
nie aspiracji klienta. Zamiast zachęcać go do stwierdzeń typu „Podoba mi się ten projekt”, to
podejście pomaga zachować precyzję oceny poszczególnych elementów projektu:
117
Trent Walton, Content Choreography (choreografia treści), smashed.by/trent.
320
ROZDZIAŁ 11Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówKup książkęPoleć książkę• Jak czysty lub minimalistyczny powinien być projekt?
• W jaki sposób użyjemy koloru do zasugerowania akcji?
• Ile będzie przejść tonalnych i jaki będzie kontrast?
• W jaki sposób będą użyte czcionki do rozróżnienia typów treści?
• Jak wiele będzie poziomów hierarchii typograficznej?
Projektowanie komponentów w ten sposób może pomóc znaleźć odpowiedź na te pytania
i daje każdej zaangażowanej osobie możliwość zmiany zdania, zanim włożymy dużo wysiłku
w projekt lub implementację.
Używanie arkuszy projektowych pozwala nam również na stosowanie iteracji projekto-
wych, nawet jeśli inne aspekty strony WWW nie są jeszcze gotowe. Dzięki temu mamy moż-
liwość porzucenia archaicznego przepływu pracy przemyconego z drukarni do sieci WWW.
Znasz to doskonale:
Plan → Zatwierdzenie → Projekt → Zatwierdzenie → Implementacja
Dzięki temu, że pracujemy w sposób bardziej elastyczny, projekt może zająć miejsce różnych
etapów, czasem nawet można go zacząć, zanim zakończy się etap planowania, a ukończyć
długo po rozpoczęciu etapu implementacji. Dzięki temu projektowanie staje się głęboko zinte-
growane i jest procesem ciągłym w całym cyklu tworzenia strony.
kafelki stylów
Sprowadzenie projektowania do wyglądu i zachowania elementów to coś, o czym myślała
również projektantka Samantha Warren. Swoją technikę nazwała kafelkami stylów (ang.
style tiles). Samantha tłumaczy118:
Kafelek stylów jest wizualną „paletą”, na której naniesione są wzory, materiały i farby
realizujące cele klienta. Stworzyłam szablon Photoshopa z wymaskowanymi obszarami,
w których [...] wyświetlam przykłady przycisków, elementów nawigacyjnych i możliwo-
ści typograficznych.
Dla Samanthy kafelki stylów są efektywnym narzędziem do komunikacji oraz projektowania
na poziomie komponentów119.
118
119
Samantha Warren, Style Tiles as a Web Design Process Tool (kafelki stylów jako narzędzie projektowania
WWW), smashed.by/styletiles.
Bardziej szczegółowy przegląd procesu projektowania Samanthy znajdziesz na stronie www.styletil.es.
321
Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówROZDZIAŁ 11Kup książkęPoleć książkębootstraP
Dla niektórych projektantów komponenty strony mogą być wykorzystane również w przy-
szłych projektach. Należą do nich Mark Oto i Jacob Tornton, para projektant-programista pra-
cująca dla Twittera. Są twórcami projektu Bootstrap120. Być może sieć WWW nie ma krawędzi,
ale zawiera treści. Treści te wyrażamy odpowiednimi elementami HTML, takimi jak:
• nagłówki na poziomach od 1 do 6;
• akapity, cytaty i elementy tekstowe;
• listy: definicje, numerowane i nienumerowane;
• media: obrazy i ich etykiety (ang. caption);
• tabele;
• formularze: przyciski, elementy i etykiety.
Oprócz systemu siatki stworzonego na cele Twittera Bootstrap definiuje domyślne projekty
„typografii, formularzy, przycisków, tabel, siatek, nawigacji i inne”. Bootstrap jest interesują-
cy z kilku powodów. Nie tylko stanowi solidną bazę szablonów dla projektów, ale dzięki temu,
że definiuje pokaźny zestaw elementów HTML wraz z wybranymi stylami domyślnymi, jest
idealnym punktem początkowym dla nowych projektów.
Dribbble
Dribbble121 jest stroną, na której projektanci dzielą się niewielkimi zrzutami (maksymalnie
400 na 300 pikseli) projektów, nad którymi pracują.
Zrób sobie wycieczkę po podstronach Dribbble, a znajdziesz mnóstwo przykładów pro-
jektów na poziomie komponentów i innych detali, którymi chcą się pochwalić projektanci.
Natkniesz się na projekty elementów nawigacji oraz kompozycje obrazów. Jeśli interesują Cię
formularze, napotkasz style różnych elementów formularzy oraz przycisków w każdym sta-
nie. Nie brakuje też typografii, znajdziesz tyle przykładów czcionek i efektów, ile tylko chcesz.
Projekty prezentowane w serwisie Dribbble są doskonałymi przykładami projektów bez
układu. Pokazują, w jaki sposób można projektować i demonstrować naszym szefom czy
klientom decyzje projektowe w formacie, który nie pozwala pomylić projektu z układem.
120 Twitter Bootstrap, smashed.by/boots.
121
smashed.by/drbb.
322
ROZDZIAŁ 11Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówKup książkęPoleć książkęrysunek 11.1. Na pierwszy rzut oka trudno zrozumieć, dlaczego takie narzędzie jak Bootstrap
może być istotne dla twórcy projektów responsywnych. Możesz się zdziwić, ale Bootstrap
jest doskonałym punktem wyjścia do tworzenia komponentów stron WWW
rysunek 11.2. Dribbble prezentuje komponenty projektowe w neutralnym środowisku
323
Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówROZDZIAŁ 11Kup książkęPoleć książkęzaleCenia stylowania
Gdy pracujesz nad projektem, przy którym współpracują zespoły ludzi, precyzyjne i dobrze
napisane zalecenia stylu mogą okazać się kluczowe dla zachowania spójności. Organizacje
używają zaleceń stylu do różnych celów, wydawnictwa stosują je do definiowania reguł
pisowni i interpunkcji, publicyści do zachowania jednolitego stylu w publikacjach. W sieci
WWW najlepsze zalecenia stylu w jasny sposób określają zestaw stylów projektowych.
Jednym z najlepszych przykładów zaleceń stylu, jakie widziałem ostatnio, były zalecenia
stworzone na potrzeby BBC. Dokumenty pod nazwą Global Experience Language (GEL)122
opisują kompletny język wizualny BBC na potrzeby WWW ze szczegółowymi informacjami
na temat typografii, ikonografii i projektu komponentów interfejsu, jak warstwy, akordeony
i karuzele.
rysunek 11.3. Zestaw dokumentów Global Experience Language (GEL) stworzony przez BBC
opisuje kompletny język wizualny BBC na potrzeby WWW
Ekspert od poczty elektronicznej MailChimp123 stworzył własną bibliotekę wzorców doku-
mentującą style takich elementów jak przyciski, formularze i zakładki kart. Może się zasta-
nawiasz, dlaczego wspominam o zaleceniach stylu w rozdziale poświęconym projektowaniu
responsywnemu, szczególnie biorąc pod uwagę to, że tego typu dokumenty są z reguły two-
rzone do udokumentowania zasad stylu po zakończeniu projektowania stron WWW.
122 smashed.by/gel.
123 smashed.by/mc.
324
ROZDZIAŁ 11Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówKup książkęPoleć książkęrysunek 11.4. MailChimp stworzył własną bibliotekę wzorców dokumentującą
style elementów interfejsu użytkownika
Podobnie jak Bootstrap Twittera, GEL autorstwa BBC i wzorce projektowe MailChimpa stano-
wią doskonałe przykłady projektów komponentów. Opisują ze szczegółami, jak ma wyglądać
każdy z elementów, i realizują to zadanie, nie odwołując się do układu stron lub robiąc to
w minimalnym stopniu.
Najbardziej szczegółowy dokument definiujący style nie opisuje po prostu projektu strony,
on jest jej projektem. Dlaczego zatem czekać z jego utworzeniem do zakończenia projektu? Po-
traktuj zalecenia stylu jako jeszcze jeden przykład projektowania na poziomie komponentów.
Używaj ich do udokumentowania, a następnie zaprojektowania każdego elementu, który po-
jawi się na stronie. W dalszej kolejności możesz wykorzystać te dokumenty do zaprezentowa-
nia kierunku, w jakim zmierza projekt, bez ujawniania szczegółów układu, a także uzyskać
akceptację, nie wywołując oczekiwań związanych z układem.
używaJ statyCznyCh PrezentaCJi tam, gDzie to ma sens
Odkryłem, że projektowanie statycznych elementów w pierwszej kolejności naprawdę spraw-
dza się w przypadku moich klientów. Projekty przebiegają sprawniej, szybciej i z mniejszą
liczbą nieporozumień. Ale rozpoczęcie projektowania od komponentów wydaje się procesem
trudnym do opanowania dla niektórych osób. Ponieważ część z nas jest zmuszona do pracy
w procesach organizacyjnych, w których statyczne demonstracje wizualne są nadal głównym
narzędziem komunikacji między projektantami, programistami i ich szefami, nie każdy ma
komfort porzucenia tej formy przekazu.
325
Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówROZDZIAŁ 11Kup książkęPoleć książkęProjektanci potrzebują widzieć elementy we wzajemnych relacjach. Dzieje się tak, ponie-
waż rozmiary i proporcje mają znaczenie i nic nie zastąpi wizji tego, jak wszystkie elementy
pasują razem. W tej sytuacji statyczna prezentacja projektu z jednym wybranym układem
może zawierać mnóstwo informacji. Sam robię coś takiego podczas każdego projektu.
Nie możemy też uciec przed faktem, że przez lata szefowie i klienci tak bardzo przywykli
do oglądania pełnoekranowych kompozycji, że niektórzy z nich mogą poczuć się nieswojo,
gdy przedstawisz im obrazy zawierające tylko projekty wybranych komponentów bez układu.
Czegoś takiego doświadczyłem na wczesnym etapie przełączania się na strategię projektowania
komponentów w pierwszej kolejności. Tego typu sytuacje mogą wymagać ostrożności i upew-
nienia odbiorcy, że dzięki temu podejściu wynik końcowy będzie znacznie lepszy. To jeden z po-
wodów prezentowania projektu klientowi w postaci pełnoekranowej statycznej prezentacji.
Jeśli Twój przepływ pracy zmusza Cię do stosowania pełnoekranowych statycznych pre-
zentacji, przynajmniej na razie, nie oznacza to, że musisz pożegnać się z zaletami rozpoczy-
nania projektowania od komponentów. W każdym razie, jeśli postarasz się ustalić odpowied-
nie oczekiwania. Nasi szefowie i klienci muszą nauczyć się, że demonstrowane im statyczne
prezentacje są po prostu odwzorowaniem atmosfery projektu i tylko jednym z możliwych
odwzorowań.
atmosfera projektu
Jeśli musisz kontynuować wykorzystywanie pełnoekranowych prezentacji układu, nadal
możesz rozpocząć projektowanie od komponentów i używać ich na urządzeniach o różnych
wymiarach ekranów. Rozłóżmy proces projektowania strony WWW (dotyczy to każdego
projektu) na składowe:
• typografia: czcionki, efekty i odstępy;
• kolor: wywoływanie nastroju i podkreślanie akcji;
• tekstura: aspekty dekoracyjne, w tym ramki, cienie i kształty;
• układ: elementy ułożone na siatce w poziomie i w pionie.
W pierwszej kolejności oddzielmy układ od innych elementów. Pozostaną: kolor, tekstura i ty-
pografia. Osobiście lubię nazywać je atmosferą projektu, ponieważ wyobrażam sobie koncert
albo mecz gry w piłkę, których atmosfera została określona jako elektryzująca. Założę się, że
każdy z nas był na przyjęciu, na którym atmosfera była chłodna. Być może nawet zdarzyło się
komuś być świadkiem kłótni wywołanej samą atmosferą pomieszczenia.
W projekcie atmosfera opisuje uczucia, jakich doznajemy, które są wywoływane przez
kolor, teksturę i typografię. O atmosferze możesz też myśleć w innych kategoriach. Możesz
nazywać ją „uczuciem”, „nastrojem” albo „tożsamością wizualną”. Nieważne, jak to nazwiesz,
atmosfera projektu nie zależy od układu. Jest niezależna od wzajemnego wizualnego położenia
elementów. Można ją widzieć albo czuć na każdym rozmiarze ekranu, na każdym urządzeniu.
326
ROZDZIAŁ 11Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówKup książkęPoleć książkęGdy my albo nasza organizacja przechodzimy na nowe i lepsze sposoby tworzenia projek-
tów124, zrozumienie sposobów oddzielenia atmosfery od statycznych prezentacji wizualnych,
a nawet istniejących stron WWW jest niezwykle istotne. To taka umiejętność, którą progra-
miści oraz projektanci powinni zdobyć jak najszybciej, ponieważ wiedza na temat tego, w jaki
sposób postrzegać, rozdzielać i zmieniać ułożenie elementów w formie układu przy każdej
jego zmianie, jest kluczowa w dobrym responsywnym projekcie WWW.
wyDobyć atmosferę
Rzućmy okiem na niewielki wybór projektów WWW. Oddzielimy ich atmosferę i układ i przy
każdym z nich zastanowimy się, co powoduje, że jego atmosfera jest unikalna.
food sense
Pierwszym przykładem jest Food Sense125, przepięknie zaprojektowana, responsywna strona,
której tematyką jest „żywność roślinna” (rysunek 11.5). Jeśli zastanowimy się nad nią w kryte-
riach statycznych, możemy skomentować dwukolumnowy układ desktopowy. Ale my chcemy
spojrzeć głębiej. Szukamy jej atmosfery. Rozbijemy ją na kolor, teksturę i typografię.
rysunek 11.5. Strona serwisu Food Sense
124 W poprzednim rozdziale Stephen Hay opisuje tego typu praktyki projektowania z myślą o przyszłości.
125 smashed.by/food.
327
Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówROZDZIAŁ 11Kup książkęPoleć książkęKolor: w atmosferze każdego projektu kolor wywołuje nastroje i kreuje emocje, ale słownika
kolorów możemy też użyć do prowokowania działań, przekazywania komunikatów i innych
interakcji. Food Sense wykorzystuje subtelne odcienie zieleni, czerni i bieli łączącej w jedno
wszystkie elementy projektu.
Tekstura: gdy mówię o teksturze, nie mam na myśli dosłownego znaczenia tego terminu,
choć nikt nie broni Ci zastosować tekstury skóry albo podartego papieru, jeśli lubisz takie
rzeczy. Zamiast tego przez teksturę rozumiem aspekty dekoracyjne projektu, w tym linie
(ramki i separatory), cienie i kształty.
Możemy na przykład przeanalizować linie. Czy są pojedyncze, podwójne, przerywane? Czy
mają jednolitą szerokość? Czy istnieje hierarchia szerokości linii separatorów między główny-
mi i pomocniczymi sekcjami treści? Jeśli tak, w jaki sposób jest ona ustrukturalizowana?
Jak są wykorzystane cienie? Czy kontenery mają wyraziste tło, a może zastosowany jest
gradient lub wzorek? Czy narożniki kontenerów są zaokrąglone, czy ostre? Te wszystkie
zagadnienia odnoszą się do tekstury.
Food Sense ma jednolite kolory tła kontenerów i proste, przerywane oraz ciągłe linie sepa-
ratorów. Przyciski i odnośniki mają subtelne, szare ramki i cienie. Obrazy wstawione w treści
mają białe dopełnienie, co widać dzięki szarej ramce. Ręcznie rysowane ikony wzmacniają
przyjacielską atmosferę projektu serwisu Food Sense.
Typografia jest prawdopodobnie tym z elementów atmosfery, który najłatwiej jest wyod-
rębnić, ale typografia to coś więcej niż wybór czcionki. Atmosfera typograficzna uwzględ-
nia wysokości wierszy, odstępy między znakami oraz między elementami. Elliot Jay Stocks
napisał126:
Uważam, że rozpoczęcie projektowania od typografii zamiast od treści posuwa nas krok
dalej od zbędnych komplikacji związanych z „projektowaniem dla samego projektowa-
nia” i krok bliżej do tego, byśmy zostali mistrzami typografii.
Projektanci Food Sense wybrali nagłówki, komunikaty i treści pisane małymi literami szery-
fową czcionką FF Tisa Web Pro. Ich projekt dopuszcza dużą liczbę odstępów, co tworzy lekką,
otwartą atmosferę pełną powietrza.
Jamie oliver
Gdy dłuższy czas studiujemy atmosferę projektów, nasze oczy szybko przyzwyczajają się do
ich różnic. Pozostając przy tematyce jedzenia, rzućmy okiem na stronę Jamiego Olivera127. Ma
ona zupełnie inny wygląd w porównaniu z Food Sense. Rozbijmy atmosferę strony Jamiego Oli-
vera na elementy: kolor, teksturę i typografię. Zostawię Ci nieco pracy na samodzielną analizę.
126 Elliot Jay Stocks, The Typography-out Approach in the World of Browser-based Web Design
(podejście do projektowania WWW oparte na typografii), smashed.by/typeout.
127 smashed.by/jam.
328
ROZDZIAŁ 11Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówKup książkęPoleć książkęrysunek 11.6. Strona WWW Jamiego Olivera
Kolor: strona wykorzystuje połączenie brązów i błękitów, co jest widoczne również w logo.
Czy uda Ci się znaleźć system regulujący zastosowanie kolorów w odnośnikach? W jaki spo-
sób kolor jest użyty w nawigacji?
Tekstura: w jaki sposób strona wykorzystuje obrazy tła do tworzenia bloków treści? Czy
zauważasz wzorce projektowe w tych panelach? Na przykład jak nagłówki są oddzielone od
treści poniżej? W jaki sposób są zaprojektowane przyciski? Czy mają zaokrąglone, czy ostre
narożniki? Czy zachowano tutaj spójność?
Typografia: strona wykorzystuje powszechnie dostępne czcionki. Czy zastosowano wyraźną
hierarchię nagłówków? Czy istnieją różnice między typografią w treści? Jeśli tak, na czym
polegają? Czy strona sprawia wrażenie otwartej, czy zatłoczonej? W jaki sposób dopełnienie
i marginesy wpływają na poczucie przestrzeni w projekcie?
bbC food
Do końca pozostaniemy przy tematyce żywieniowej. Przyjrzyjmy się stronie WWW poświę-
conej żywieniu przygotowanej przez BBC128, na której mamy okazję zaobserwować w dzia-
łaniu zalecenia GEL dotyczące wyglądu. Ponownie nie będziemy zwracać uwagi na układ.
128 smashed.by/bbc.
329
Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówROZDZIAŁ 11Kup książkęPoleć książkęZamiast tego będziemy szukać elementów atmosfery, które odróżniają tę stronę od innych
stron o zbliżonej treści lub tematyce.
rysunek 11.7. Strona BBC Food
Strona BBC Food wykorzystuje kolor do zasugerowania, które z elementów są odnośnikami.
Zastosowana paleta jest przygaszona, być może w celu wyodrębnienia kolorów na fotogra-
fiach. W miejscach, w których są wykorzystane ikony z zestawu zdefiniowanego w dokumen-
cie GEL, są one wyraziste i mają jednolite kolory, jak tła kontenerów.
Na stronie BBC krawędzie kontenerów są kwadratowe i ostre. W miejscach, w których
treść nachodzi na obrazy, projektanci strony BBC Food zdecydowali się na półprzezroczyste
tła w bieli lub czerni. Same obrazy są nieprzetworzone, bez krawędzi.
Strona BBC wykorzystuje pogrubioną typografię w celu „stworzenia silnie zarysowanych
hierarchii i dramatyzmu na stronie”129. Domyślną czcionką jest Arial, choć jeśli poszukasz
głębiej, na platformie Mac znajdziesz i czcionkę Helvetica Neue. Te same czcionki są wyko-
rzystane do nagłówków i treści.
Tego typu ćwiczenie można wykonać na dowolnej stronie WWW. Jest szczególnie przydat-
ne w przypadku grupy projektantów lub programistów pracujących razem. Stało się kluczo-
wą częścią moich warsztatów poświęconych projektowaniu responsywnemu i uważam je za
bardzo skuteczne.
129 smashed.by/bbcfonts.
330
ROZDZIAŁ 11Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówKup książkęPoleć książkęstań się cudownie elastyczny
Niezależnie od tego, czy uczymy się projektować strony, zaczynając od komponentów, czy wy-
dobywać atmosferę ze statycznych prezentacji wizualnych, nie musisz już tworzyć osobnych
prezentacji statycznych dla każdej strony, nie mówiąc już o każdym urządzeniu. W rzeczywi-
stości jestem skłonny zaryzykować stwierdzenie, że dni statycznych prezentacji projektu są
policzone, ponieważ my, nasi szefowie i klienci, zaczynamy zdawać sobie sprawę z tego, jak są
one mało precyzyjne i nieefektywne. A to oznacza, że musimy znaleźć nowe techniki projek-
towania responsywnego, czy nam się to podoba, czy nie.
Wiem z własnego doświadczenia z ostatnich dwunastu miesięcy, że im głębiej staram się
sięgnąć w tematykę projektowania responsywnego, tym trudniej jest mi znaleźć odpowied-
nie narzędzia. Choć od lat promuję twierdzenie, że strony nie muszą wyglądać tak samo we
wszystkich przeglądarkach, z jakiegoś powodu zrezygnowanie z kontroli nad układem nie
przychodzi mi łatwo. Zorientowałem się, że moja rola jako projektanta uległa zasadniczej
zmianie. Nie mogę już oczekiwać, że będę miał taką samą kontrolę nad układem na ekranach
różnych rozmiarów, jaką cieszyłem się dawniej.
Responsywne projektowanie stron WWW niesie jednak istotne zalety dla projektantów,
szczególnie w takiej organizacji pracy, gdzie ceni się elastyczność. Mogę teraz skupić się na
szczegółach projektu na wszystkich etapach procesu implementacji, nie tylko na początku.
Zamiast precyzyjnie definiować układy strony na każdym z możliwych rozmiarów ekranu,
mogę wytłumaczyć swoje motywacje dla każdego elementu projektu i pozostawić innym
członkom zespołu możliwość interpretacji projektu i adaptacji go w trakcie implementacji.
Tego typu organizacja pracy działa doskonale dla mnie i moich klientów.
Jednak żeby to funkcjonowało prawidłowo, programiści, z którymi pracuję, muszą rów-
nież nauczyć się podstaw projektowania oraz zdobyć umiejętności wydobywania atmosfery
z projektu. Muszą wziąć odpowiedzialność za projekt i podejmować decyzje z nim związane.
Dla niektórych to okazuje się przytłaczającym wyzwaniem, ale moi współpracownicy potrak-
towali to raczej jako możliwość rozwoju i nabycia nowych umiejętności.
Na początku tego rozdziału powiedziałem, że responsywne projektowanie stron WWW
stawia więcej pytań, niż udziela odpowiedzi, że wystawia na próbę relacje w pracy i inte-
rakcje między wszystkimi osobami zaangażowanymi w proces. Wiem, że tym wyzwaniom
nie zawsze łatwo sprostać. Jednak widziałem na własne oczy, jak zaangażowani projektanci
i programiści stawiają im czoła, jak odpowiedzialni szefowie i klienci potrafią pozytywnie
reagować, gdy orientują się, jak wiele korzyści może przynieść responsywny projekt strony.
Dzięki wspólnej pracy możemy spowodować, że sieć stanie się bardziej responsywnym miej-
scem, jakim miała być od zawsze.
331
Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówROZDZIAŁ 11Kup książkęPoleć książkęo autorze
andy Clarke był nazywany wieloma określeniami, od kiedy rozpoczął pro-
jektowanie stron WWW dziesięć lat temu. Jego ego jest szczególnie po-
łechtane takimi jak: „ambasador CSS”, „branżowy prorok”, „inspirujący”, ale
najbardziej dumny jest z tego, że Jeffrey Zeldman (ojciec chrzestny stan-
dardów WWW) raz nazwał go „potrójnie utalentowanym skubańcem”.
Andy zarządza Stuff and Nonsense, małym biurem projektowym, w któ-
rym współpracuje z takimi klientami jak ISO, STV oraz z rządem Wielkiej
Brytanii. Prowadzi odczyty na konferencjach o projektowaniu WWW na ca-
łym świecie oraz jest autorem Transcending CSS i uznanego Hardboiled
Web Design.
332
ROZDZIAŁ 11Bądź cudownie elastyczny: projektowanie atomów i pierwiastkówKup książkęPoleć książkęSkorowidz
@font-face, 100
37signals, 182, 184
500 Startups, 241
A
blog, 43, 80, 82
Bonlook, 183
Bootstrap, 322, 325
Budd Andy, 241
Burka Daniel, 18
em, 97
emocje, 238
EPOS, 52
etykieta, 173
ewangelista, 59
ActionScript, 275
Adobe Flex, Patrz: Flex
Adobe Illustrator, Patrz: Illustrator
Adobe PhoneGap, Patrz: PhoneGap
Adobe Photoshop, Patrz: Photoshop
adres e-mail, 20, 62, 164
no-reply, 187
AJAX, 137
Alfred Korzybski, 285
Allsopp John, 312, 317
amalgam of traits personality, Patrz: amalgamat
osobowości śladowej
amalgamat osobowości śladowej, 231
Amazon Payments, 46
analiza
heurystyczna, 22
konkurencji, 22
osobowości, 22
przedprojektowa, 19, 20
strategiczna, 22
Anderson Stephen, 241
Android, 199, 258
ankieta, 27, 28, 164
Ansca, 275
Anthony Wing Kosner, 241, 242
aplikacja
aktualizacja, 265
dedykowana, 272
funkcjonalność, 287
hybrydowa, 261, 280
imersywna, 275, 276
międzyplatformowa, 272, 274, 277, 279, 285
natywna, 33, 196, 199, 255, 256, 257, 263, 264,
268, 274, 275, 277, 278, 280
nieimersywna, 276, 277
nienatywna, 260, 274
projektowanie, 254, 268
scenariusz, 299
WWW, 33, 260, 261, 262, 264, 266, 268, 275,
278, 279
Apple, 192, 199, 258
Apple iCloud, 266, 267
Appleseed Jamie, 180
ASP, 13, 53
Ateş Faruk , 95
atrybut
async, 77
pubdate, 82
role, 87
typu, 76
Audible, 191
B
backend, Patrz: mechanizm strony serwerowej
Bagcheck, 179, 180, 181
Basecamp, 182
Baymard Institute, 180
baza danych, 61
przenoszenie między hostami, 68
BB C Food, 329
Beanstalk, 67
Ben the Bodyguard, 176, 178
Berners-Lee Tim, 269
biblioteka
HTML5 Shiv, 79
jQuery, Patrz: jQuery
Modernizr, Patrz: Modernizr
C
F
Facebook, 11, 16, 169, 181, 262
Feathers, 259
Firefox, 72, 96, 102, 122, 204107
Fireworks, 312, 315, 317
Flash, 262, 275
flash test, Patrz: test skojarzeń
Flex, 275
Flexbox, 107, 108, 111
Flexible Box Layout, Patrz: Flexbox
Food Sense, 327
forced continuity, Patrz: wymuszona
kontynuacja
Ford Henry, 175
formularz, 142, 163, 173, 322, 324
akordeonowy, 170
pytanie o płeć, 171
walidacja, 143, 174
wartości domyślne, 172
G
Gallagher Nicolas, 79
General Electric, 234
Git, 67
GitHub, 67
Gmail, 260, 264
Google Analytics, 75
Google Checkout, 46
Google Docs, 264
Google Web Fonts, 102
gra, 275, 277
OpenGL, 223
gradient, 115, 201, 211, 214, 215, 216
graf punktów przełomowych, 300, 301
Groupon, 179
Grupa Robocza ds. Technologii Hipertekstowych
Aplikacji Sieciowych, Patrz: WHATWG
H
HAML, 254
Headscape, 12
Heppo.se, 183
Hicks Jon, 314
Hipmunk, 236, 242
Holst Christian, 180
host
konfiguracja, 67
zmiana, 67
hosting, 38, 53, 60, 61, 62
bezawaryjność, 63
w chmurze, 64
współdzielony, 64
Hsieh Tony, 184
HTML, 32, 137, 254
HTML5, 32, 72, 73, 90
HTML5 Element Flowchart, 85
Human Interface Guidelines, Patrz: interfejs
użytkownika zalecenia
Hume Andy, 310
I
iframe, Patrz: ramka
Illustrator, 207, 208
Zapisz dla Internetu, 208
zarządzanie kolorem, 208
cache, Patrz: dane podręczne
Carbonmade, 233
Carson Ryan, 187
CDN, 76
cel biznesowy, 11, 17, 19, 20
Chargify, 47
chmura, 64, 263, 266
Chrome, 72, 78, 96, 104, 107,
ciasteczka, 88, 168
cień, 100, 203, 211, 212
client-side storage, Patrz: dane magazyn
po stronie klienta
CMS, 38, 40, 41, 42, 58
Cocoa Touch, 259, 275, 277, 280
Content Delivery Networks, Patrz: CDN
continuous client, Patrz: klient ciągły
conversion rate, Patrz: współczynnik powrotu
użytkowników na stronę
Cooper Alan, 231
Corona, 275, 277
cPanel, 64
CSS, 13, 32, 72, 137, 223, 254
klasa, 138
przejście, Patrz: przejście
selektor, Patrz: selektor
skrypt resetujący, 79
transformacje, 122, 124
punkt odniesienia, 125
CSS3, 32, 94, 310
cuting-edge features, Patrz: przeglądarka
nowe funkcje
czcionka, 100, 101, 102, 219, Patrz też: typografia
czytnik ekranu, 85
D
dane
aktualizacja, 182
magazyn po stronie klienta, 88, 297
podręczne, 182
dark patterns, 190
deklaracja, DOCTYPE, 73, 75
delegacja zdarzeń, 140
Digg, 18
dokument
projektowanie, Patrz: projektowanie
dokumentów
skupiony na treści, 268
DOM, 136
domena, 62, 68
Dribbble, 322
dziedziczenie, 86
E
e-book, 275, 277
e-commerce, 44, 45, 58, 59
efekt viralowy, 178
ekran
kontrast, 198
OLED, 221
wielkość, 196, 197, 269, 285, 297, 313, 314, 315
electronic point-of-sale, Patrz: EPOS
element
blokowy, 81, 84
body, 98
canvas, 153
334
Kup książkęPoleć książkęSkorowidz
Zapisz dla Internetu, 207
zarządzanie kolorem, 204, 205
PHP, 61
PHPMyAdmin, 68
piksel, 196
Pinker Steven, 235
Plesk, 64
plik
gęstość, 197, 286, 297
PDF, 201
PNG, 200, 204, 220
kompresja, 220
SVG, 201, 297
płatności, 38, 46
bramka, 46, 47, 53
kartą kredytową, 47, 173, 174
okresowe, 49
poczta e-mail, 62, 68
odpowiedzi od automatów, 187
podatek, 49
poddomena, 64, 76
podpiksel, 220, 221
podręcznik stylu, 249, 324
projektowanie
aplikacji, Patrz: aplikacja projektowanie
dokumentów, 254, 268
interakcji, Patrz: interakcja
komponenty, 319, 320, 322, 325, 331
liniowe, 294, 296, 303
od zewnątrz do wewnątrz, 255
responsywne, 25, 33, 43, 310, 315, 331
style, 324
user experience, Patrz: UX
w przeglądarce, 302, 303, 304, 305, 306
zorientowane na użytkownika, 231, 255, 281
Firefox, Patrz: Firefox
funkcja, 74, 75, 95, 137
Google Chrome, Patrz: Chrome
Internet Explorer, Patrz: Internet Explorer
nowe funkcje, 72
przedrostek wydawcy, 95, 96
Safari, Patrz: Safari
wersja beta, 72
przeglądarka, 25, 32, 72
przejście, 129, 130, 138, 139
przepływ, 285
przycisk, 173, 176, 182, 324
pseudoklasa, 127
punkt przełomowy, 300, 301
q
QuietWrite, 168, 169
r
ramka, 76, 100
raport analityczny, 22
Recurly, 47
reguła, 94
reguła, 102
rem, 97
RequireJS, 76
Retina, 197, 198, 199, 202, 219
Rieger Bryan, 295
rozdzielczość, 13, 33, 197, 199, 286
s
SaaS, 46, 58, 59
Safari, 72, 78, 96, 98, 104, 154
Santa Maria Jason, 313
screen readers, Patrz: czytnik ekranu
interakcja, 254
interfejs użytkownika, 12, 14, 28, 184, 198
mobilny, 181
zalecenia, 258
Internet Explorer, 79, 90
iOS, 199
iPhone, 197, 199, 202, 203, 219, 259, 260, 261, 275,
278, 314, 316
Irish Paul, 95
Ive Jonathan, 192
J
Jade, 254
Jamie Oliver, 328
JavaScript, 32, 72, 76, 136, 137, 254, 277, 299
jednostka
em, Patrz: em
rem, Patrz: rem
Jobs Steve, 175, 192, 314
Jos Buivenga, 101
jQuery, 136, 140, 254
JSON, 77
k
kafelek stylów, 321
Kate Kiefer-Lee, 249
Keith Jeremy, 263, 314
klawiatura Swype, 259
klient ciągły, 266, 267
Klout, 179
kompatybilność wsteczna, 73
komunikator Trillian, 266
konkurencja, 22
l
LABjs, 76
LDAP, 52
LESS, 254, 305
lista, 141, 177, 180, 322
ikona, 183
LocalStorage, 88, 89, 90, 145, 146
logo, 14
m
MailChimp, 186, 239, 245, 246, 325
mapa bitowa, 201, 209
Marcotte Ethan, 310
marka, 14, 243
McClure Dave, 241, 242
mechanizm
3-D Secure, 48
antyspamowy, 62
API JavaScriptu, 88
blogowy, 43
Drag and Drop, 153
FileReader, 153
Local Storage, Patrz: Local Storage
logowania, 181
MasterCard SecureCode, 48
sessionStorage, 88, 90
sklepu internetowego, 38, 44, 49, 50
strony serwerowej, 38, 55
śledzenia zamówień, 50
uwierzytelniający, 181
Verifed by Visa, 48
zarządzania kolorem, 204, 205, 208
media query, 310
Medina John, 238
menu rozwijane, 83
merchant account, Patrz: użytkownik konto
dedykowane w systemie płatności
metainformacje, 87
metoda, 138
className, 138
querySelector, 138
querySelectorAll, 138
Meyer Eric, 79
miernik kompletności, 178
miniatura, 153
Modernizr, 79, 95
Moll Cameron, 11, 12, 14
Monotask, 164
mood board, Patrz: szablon nastrojów
MooTools, 254
Mullenweg Mat, 163
n
nagłówek, 80, 81, 84, 85, 86, 99, 322
natywność, Patrz: aplikacja natywna
Neal Jonathan, 79
Nerd Communications, 176
Nielsen Jakob, 12
non-core, Patrz: technologia poboczna
o
osobowość, 231, 232, 235, 236, 241, 243
open source, 55
Opera, 72, 73, 74, 96, 108, 154
opowieść, 176
organizacja
logo, Patrz: logo
marka, Patrz: marka
rynek, 14
wizerunek, 14
zarząd, 20
tworzenie, 245
Oto Mark, 322
P
pamięć długotrwała, 238
parser
JSON, 77
XML, 76
Patrz: PCI DSS
bramka
PayPal, 44, 46
PCI DSS, 47, 49
persona, 231, 242, 244
Petrus Piotr, 85
PhoneGap, 275, 277
Photojojo, 233
Photoshop, 196, 302, 317
cienie, 203, 211, 212
czcionka, 219
gradient, 201, 211, 214, 215, 216
maski wektorowe, 201, 217
obiekt inteligentny, 217, 218
plasterek, 223, 224
oparty na warstwie, 225
profil koloru, 204, 206, 207
roztrząsanie, 216
skalowanie, 203
tekstura, 217
warstwa
efekty, 201
kształtu, 209
obracanie, 209
wzorek, 217
335
Payment Card Industry Data Security Standard,
payment gateway, Patrz: płatności bramka
payment service provider, Patrz: płatności
Kup książkęPoleć książkęSkorowidz
selektor, 94, 125, 142
kraju, 180
serwer, 38, 54
dedykowany, 64
DNS, 68
produkcyjny, 65
przedprodukcyjny, Patrz: serwer testowy
testowy, 65
VPS, Patrz: serwer wirtualny
wirtualny, 64
sessionStorage, 88, 90
sklep
internetowy, 44, 49
dostawa, 50
koszyk, 45, 58
produkty cyfrowe, 51
promocje, 45
z aplikacjami, 33, 264
skrypt, 76
Normalize.css, 79, 80
Reset CSS, 79
resetujący CSS, 79
wielkość, 78
Softpedia, 190
sofware as a service, Patrz: SaaS
Souders Steve, 78
Spent, 177, 178
sprite, 223
Square, 174, 175
staging, Patrz: serwer testowy
standardy
WAI-ARIA, Patrz: WAI-ARIA
WWW, 32, 94
storytelling, Patrz: opowieść
Stripe.com, 46, 47, 169
strona WWW, 268, 269, 270
aktualizacja w czasie rzeczywistym, 179, 180
analiza, Patrz: analiza
animacja, 129, 131, 147, 198
budżet, 53
dostępność, 85, 86
funkcjonalność, 287
integracja z innymi systemami, 51, 54
język programowania, 53, 56
kod, 13
moda, 16
modyfikowanie, 11, 12, 14, 55, 57
modyfikowanie pułapki, 15, 53
na urządzenia mobilne, Patrz: urządzenie
mobilne
odwiedzalność, 14
oglądalność, 44
osobowość, Patrz: osobowość
pozycjonowanie elementów, 106
prototyp, 303, 304
przejście, Patrz: przejście
przenoszenie między hostami, 67, 68
przeprojektowanie, 10, 12, 31, 38,
Pobierz darmowy fragment (pdf)