Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00322 003664 21329622 na godz. na dobę w sumie
wyszukaj dokładnie | pobierz wtyczkę
Redesign The Web. Smashing Magazine - książka
Redesign The Web. Smashing Magazine - książka
Autor: Liczba stron: 336
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-5613-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).
Czytaj online.
Komentuj

Odkryj sieć na nowo!

Sieć WWW podlega ciągłym przemianom. Webdeveloperzy dysponują lepszymi narzędziami, a przeglądarki są wydajniejsze i potrafią znacznie więcej niż jeszcze kilka lat temu. Te zmiany mają ogromny wpływ na to, jak obecnie tworzy się atrakcyjne strony internetowe. A czy Twoje podejście do projektowania stron idzie z duchem czasu? Czy Twoje rozwiązania prawidłowo funkcjonują na urządzeniach mobilnych, które generują coraz więcej ruchu sieciowego? Jeśli masz wątpliwości, koniecznie sięgnij po tę książkę — kolejny podręcznik z kultowej serii „Smashing Magazine”!

Znajdziesz tu odpowiedzi na wiele kluczowych pytań. W trakcie lektury dowiesz się, jak do projektowania współczesnych stron internetowych podchodzą światowej sławy profesjonaliści. Poznasz najlepsze techniki wykorzystania możliwości HTML5, CSS3 i JavaScriptu. Nauczysz się również tworzyć strony zgodne z podejściem responsive web design. Te trzy słowa to klucz do Twojego sukcesu! Przekonaj się sam dzięki tej niesamowitej książce!

Sięgnij po najnowszą książkę z serii „Smashing Magazine” i:

Ta książka zmieni Twoje podejście do projektowania stron WWW!

Znajdź podobne książki Ostatnio czytane w tej kategorii

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 800600, 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ść 1024768. 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 800600 ani oczywiście 640480. Czy wy tak robicie? Gdy strony przestały poprawnie się wyświetlać w rozdzielczości 640480, 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)

Gdzie kupić całą publikację:

Redesign The Web. Smashing Magazine
Autor:
Sklep
Format
Cena
Helion.pl Helion.pl
książka
59,00 zł
Idź do sklepu »

Opinie na temat publikacji:

Inne popularne pozycje z tej kategorii:

Czytaj również:

Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: