Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00357 007488 11260056 na godz. na dobę w sumie
Responsive Web Design. Modernizacja witryny - ebook/pdf
Responsive Web Design. Modernizacja witryny - ebook/pdf
Autor: Liczba stron: 144
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-3366-6 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> strony mobilne
Porównaj ceny (książka, ebook (-20%), audiobook).
Projektowanie responsywnych stron WWW (ang. Responsive Web Design) jest koniecznością. Wynika to z rosnącej liczby przeróżnych urządzeń mobilnych, wykorzystywanych przez rzeszę użytkowników. Nowoczesne podejście do RWD wymaga zmiany sposobu myślenia. Utrzymywanie oddzielnych wersji witryny jest nieefektywne. Zamiast tego należy utworzyć jeden, spójny i responsywny projekt strony. Na takiej stronie cały układ będzie ulegał płynnym przekształceniom, aby zapewnić komfort przeglądania niezależnie od wymiarów wyświetlacza. Oczywiście dotyczy to również stron istniejących, które powinny zostać zmodernizowane.

Niniejsza książka jest przeznaczona dla osób, które planują zmodernizowanie swojej witryny w celu zapewnienia jej responsywności. Przedstawiono tu mnóstwo praktycznych wskazówek pozwalających na wdrożenie nowej wersji witryny, nawet gdy brakuje czasu i środków. Dowiesz się, jak rozplanować adaptację projektów i wzorców przy różnych breakpointach oraz jak zadbać o responsywność obrazów. Opisano tu takie techniki, jak przekształcanie siatek stałych w siatki płynne, stosowanie komponentów wielokrotnego użytku, korzystanie z zapytań medialnych. Pokazano, jak korzystać z przydatnych wzorców projektowych, na przykład wzorców nawigacji. Dzięki tej praktycznej książce zmodernizowanie witryny będzie o wiele łatwiejsze i... mniej stresujące!

Niektóre zagadnienia omówione w książce:

Czy Twoja strona jest już responsywna?


Inayaili de León zajmuje się projektowaniem witryn WWW od 2003 r. Obecnie pracuje w Canonical, firmie rozwijającej system Ubuntu, gdzie doskonali narzędzia do projektowania graficznego online. Znakiem firmowym de León są eleganckie, przyjazne użytkownikowi projekty stron. Jest również pisarką, autorką licznych artykułów, publikowanych m.in. w A List Apart, 24 Ways, Smashing Magazine i .net Magazine, oraz bloga Web Designer Notebook (http://webdesignernotebook.com). Inayaili de León mieszka w swoim ulubionym mieście — Londynie. Uwielbia koty i leniwe drzemki.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Moving to Responsive Web Design. Bring Existing Static Sites into Today s Multi-Device World with Responsive Web Design Tłumaczenie: Maksymilian Gutowski ISBN: 978-83-283-3365-9 Original edition copyright © 2016 by Inayaili de León All rights reserved. Polish edition copyright © 2017 by HELION SA All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. 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 biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą 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/rewede 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(cid:258)ci Rozdzia(cid:239) 1 O autorce ......................................................................................................9 O korektorze merytorycznym ......................................................................11 Podzi(cid:218)kowania ...........................................................................................13 Przedmowa .................................................................................................15 Wst(cid:218)p .........................................................................................................17 Etap planowania ........................................................................................23 Zespół ...................................................................................................................................... 23 Zaangażuj właściwych ludzi .......................................................................................... 24 Wskaż opiekuna projektu .............................................................................................. 25 Wszyscy muszą uczestniczyć ......................................................................................... 25 Planowanie improwizowane ................................................................................................ 26 Widok całości .................................................................................................................. 26 Zapis cyfrowy .................................................................................................................. 27 Znaleźć czas ............................................................................................................................ 30 Zapoznaj się ze swoim terminarzem ............................................................................ 30 Priorytetyzacja ................................................................................................................. 30 Przydzielanie zadań ............................................................................................................... 31 Razem ............................................................................................................................... 31 Osobno ............................................................................................................................. 32 Okresy przestoju ............................................................................................................. 32 Zakres prac .............................................................................................................................. 32 Lista życzeń ...................................................................................................................... 33 Porządkowanie ................................................................................................................ 33 Priorytety ......................................................................................................................... 33 Podział zadań ................................................................................................................... 34 Test jednej godziny ......................................................................................................... 34 Poleć książkęKup książkę SPIS TRE(cid:165)CI Rozdzia(cid:239) 2 Rozdzia(cid:239) 3 6 Określ etapy ..................................................................................................................... 35 Określ, co wykracza poza zakres prac .......................................................................... 35 Pamiętaj o testach ........................................................................................................... 36 Terminy ................................................................................................................................... 36 Faza 1 ................................................................................................................................ 37 Faza 2, Faza 3… ............................................................................................................... 37 Strategie wdrażania ................................................................................................................ 37 Zarządzanie aktualizacjami witryny ................................................................................... 38 Prowadź rejestr decyzji ......................................................................................................... 38 Podsumowanie ....................................................................................................................... 40 Etap opracowania tre(cid:258)ci .............................................................................41 Projektowanie z właściwą treścią ......................................................................................... 41 Dostępność ............................................................................................................................. 42 Ułatwienia dostępu pomagają wszystkim ................................................................... 43 Co można zrobić ............................................................................................................. 43 Dostępność i użyteczność .............................................................................................. 45 Ewaluacja istniejących treści ................................................................................................ 45 Inwentaryzacja i audyt treści ......................................................................................... 45 Wykaz treści .................................................................................................................... 46 Audyt treści ...................................................................................................................... 46 Szybka inwentaryzacja i audyt ...................................................................................... 47 Stała obsługa witryny ............................................................................................................ 48 Unikaj powielania pracy ................................................................................................ 48 Stopniowe wprowadzanie aktualizacji ......................................................................... 48 Aktualizacja i upraszczanie zastanych treści ..................................................................... 49 Szybkie poprawki ............................................................................................................ 49 Krócej nie znaczy lepiej .................................................................................................. 50 Mniej może znaczyć lepiej ............................................................................................. 51 Ograniczanie obciążenia poznawczego bez ograniczania dostępu do treści ......... 52 Przygotuj plan ........................................................................................................................ 55 Przygotowanie wytycznych stylistycznych ........................................................................ 56 Udoskonalenie systemu zarządzania treścią ...................................................................... 57 Usuń style inline ............................................................................................................. 58 Usuń opcje stylizacji ....................................................................................................... 58 Ustrukturyzuj treść ......................................................................................................... 59 Inna możliwość: niczego nie rób ......................................................................................... 60 Podsumowanie ....................................................................................................................... 60 Etap projektowania ....................................................................................61 Ewolucja zamiast rewolucji .................................................................................................. 61 Projekty wielokrotnego użytku ............................................................................................ 63 Dostępność ............................................................................................................................. 65 Wydajność .............................................................................................................................. 67 Żadnych makiet ...................................................................................................................... 68 Poleć książkęKup książkę SPIS TRE(cid:165)CI Określanie reguł ..................................................................................................................... 68 Spisz reguły ...................................................................................................................... 68 Zrealizuj projekt .............................................................................................................. 70 Określanie breakpointów ..................................................................................................... 71 Użyj przeglądarki ............................................................................................................ 71 Tweakpointy i breakpointy ........................................................................................... 72 O czym pamiętać ............................................................................................................. 72 Kiedy używać danych analitycznych ............................................................................ 72 Przygotowanie wytycznych stylistycznych ........................................................................ 72 Zrzuty, zrzuty, wiele zrzutów ........................................................................................ 74 Racjonalizacja .................................................................................................................. 75 Opracuj poradnik stylistyczny ...................................................................................... 76 Uporządkuj arkusze stylów ........................................................................................... 77 Jeśli masz już gotowy poradnik stylistyczny ............................................................... 77 Poradnik stylistyczny czy biblioteka wzorców? .......................................................... 77 Standaryzacja witryn ............................................................................................................. 78 Partyzancki UX ...................................................................................................................... 79 Makiety z karteczek ........................................................................................................ 79 Prototypowanie błyskawiczne ....................................................................................... 79 Testowanie ekspresowe .................................................................................................. 81 Najważniejsze zagadnienia testowe .............................................................................. 81 Siatki i tekst ............................................................................................................................. 82 Wartości procentowe ..................................................................................................... 82 Siatki responsywne ......................................................................................................... 82 Zmień kolejność treści ................................................................................................... 84 Określ skalę typograficzną ............................................................................................. 87 Zarządzanie obrazami ........................................................................................................... 88 Inwentaryzacja obrazów ................................................................................................ 88 Uważaj na rozmiar .......................................................................................................... 89 Pliki SVG .......................................................................................................................... 89 Wzorce projektowe przydatne pod kątem responsywności ............................................ 90 Wzorce nawigacji ............................................................................................................ 90 Tabele ............................................................................................................................... 92 Zmaksymalizuj korzyści z opinii zwrotnych i przeglądów .............................................. 95 Podsumowanie ....................................................................................................................... 97 Etap realizacji .............................................................................................99 Eksperymentuj na małych projektach ................................................................................ 99 Dostępność ........................................................................................................................... 100 Wydajność ............................................................................................................................ 101 Budżet wydajności ........................................................................................................ 102 Wydajność odczuwalna ............................................................................................... 103 Odchudzone strony na dużych ekranach .................................................................. 104 Okrojone fonty webowe ............................................................................................... 104 Przydatne narzędzia ..................................................................................................... 105 7 Rozdzia(cid:239) 4 Poleć książkęKup książkę Płynne siatki i tekst .............................................................................................................. 107 Płynna siatka na szybko ............................................................................................... 108 Ulepszenie kodu ............................................................................................................ 108 Usuń style inline ........................................................................................................... 110 Poszukaj inspiracji ........................................................................................................ 110 Zrezygnuj z absolutnych jednostek miary ................................................................. 111 Skalowalny tekst ............................................................................................................ 112 Zapytania medialne ............................................................................................................. 113 Mobile first i progresywne ulepszanie ....................................................................... 114 Obsługa w przeglądarkach ........................................................................................... 115 Modernizacja obrazów pod kątem responsywności ......................................................... 116 Obrazy SVG ................................................................................................................... 116 Element picture i atrybut srcset .................................................................................. 117 Zarządzanie obrazami .................................................................................................. 118 Skompresuj bitmapy ..................................................................................................... 119 Obrazy opcjonalne ........................................................................................................ 119 Testowanie ............................................................................................................................ 119 Na czym testować i co poprawiać ............................................................................... 120 Stwórz własne laboratorium ....................................................................................... 120 Emulatory i inne narzędzia ......................................................................................... 122 Udoskonalenie procesu produkcyjnego ........................................................................... 124 Pisanie kodu .................................................................................................................. 124 Publikacja witryny ........................................................................................................ 130 Pomiar sukcesu po publikacji ............................................................................................ 131 Podsumowanie ..................................................................................................................... 132 Zako(cid:241)czenie ..............................................................................................135 Dodatek. Materia(cid:239)y ...................................................................................137 Skorowidz .................................................................................................141 SPIS TRE(cid:165)CI 8 Poleć książkęKup książkę R O Z D Z I A (cid:146) 1 (cid:132) (cid:132) (cid:132) Etap planowania Jest tyle rzeczy do zrobienia, ulepszenia i naprawienia, że pewnie od razu chciałbyś ruszyć z pracami nad responsywnością. Warto jednak poświęcić chwilę na rozplanowanie, jak najlepiej wykorzystać dostępny czas i zasoby w trakcie realizacji projektu. Pamiętaj też, że nie osiągniesz swojego celu z dnia na dzień. Pod koniec etapu planowania powinieneś zyskać poczucie, że już lepiej wiesz, z czym wiąże się unowocześnianie strony, ile czasu może Ci zająć wykonanie poszczególnych zadań i kiedy wydasz pierwszą wersję responsywnej witryny. W tym rozdziale dowiesz się: (cid:120) jak od samego początku włączyć w prace wszystkie najważniejsze osoby; (cid:120) jak wykorzystać w planowaniu proste i tanie narzędzia; (cid:120) jak znaleźć czas na pracę nad unowocześnieniem strony; (cid:120) jak najefektywniej wykorzystać czas każdej z zaangażowanych osób; (cid:120) jak określić zakres projektu; (cid:120) jak określić kamienie milowe i terminy, tak aby zespół pracował z myślą o konkretnych datach; (cid:120) jakie strategie wdrażania wykorzystuje się zazwyczaj w ramach przeprojektowywania stron pod kątem responsywności; (cid:120) jak uwzględnić wprowadzane równolegle aktualizacje; (cid:120) o znaczeniu prowadzenia rejestru decyzji podjętych w trakcie realizacji projektu. Zespó(cid:239) Do opracowania jakiegokolwiek projektu potrzebni Ci są ludzie. Niezależnie od tego, czy Twój zespół składa się z trzech, czy trzydziestu osób, powinieneś wiedzieć, z kim będziesz pracować nad projektem przez wszystkie etapy. Zanim zabierzesz się do jakiegokolwiek planowania lub przydzielania zadań, powinieneś poświęcić chwilę na zorientowanie się, kto powinien i kto będzie brać udział w projekcie. Rzadko kiedy jest to oczywiste. Musisz odbyć wystarczająco dużo rozmów, aby ocenić, jak praca nad projektem może wpłynąć na różne osoby z różnych działów. Dopiero po przeprowadzeniu stosownego rozpoznania będziesz wiedzieć wystarczająco dużo o strukturze zespołu i organizacji, aby móc określić, kto i na jakim etapie będzie uczestniczył w projekcie. Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) ETAP PLANOWANIA Zaangażuj właściwych ludzi Na podstawie wstępnego rozpoznania spisz imiona wszystkich osób, które prawdopodobnie będą zaangażowane w pracę nad projektem od początku do końca. Zmodyfikowanie tej listy może się jeszcze okazać konieczne na późniejszym etapie planowania, ale postaraj się od razu spisać ją możliwie rzetelnie. Wszyscy, którzy na nią trafią, powinni zostać o tym poinformowani i wiedzieć, że stali się częścią zespołu. Podobnie jak przy każdym innym projekcie, musisz jasno określić, kto czym będzie się zajmował, nawet jeśli ten konkretny opis będzie się z czasem zmieniał. Napisz każdej osobie krótki opis tego, co ma wnieść w rozwój projektu. Czy będzie się głównie zajmować pisaniem kodu na potrzeby front-endu? Czy będzie pisać właściwą treść strony? Czy może będzie jedynie potwierdzać wykonanie zadań? Czy musi znać bieżący status projektu, ale nie będzie bezpośrednio nad nim pracować? Przydatne jest także utworzenie tabeli umiejętności i podanie w niej predyspozycji poszczególnych osób, a także ich doświadczenia i obowiązków, czyli zakresu, w jakim mają oni prawo podejmować ostateczne decyzje. Projektant UX może na przykład decydować o architekturze informacyjnej lub nawigacji na stronie. Frontendowiec może z kolei odpowiadać za dotrzymywanie standardów kodowania, zapewnienie kompatybilności z przeglądarkami oraz za testy. Tworzenie tabeli, w której wiersz oznacza jedną osobę, możesz zacząć od zapisania następujących nagłówków kolumn: (cid:120) Imię (cid:120) Stanowisko, zespół (cid:120) Rola w projekcie (cid:120) Opis roli (cid:120) Poziom uczestnictwa (cid:120) Podstawowe umiejętności W pracy nad responsywnością witryny występują podobne role jak przy innych projektach. W zależności od skali przedsięwzięcia w zespole mogą znaleźć się następujące osoby: (cid:120) badacz, (cid:120) copywriter, (cid:120) strateg treści, (cid:120) projektant UX, (cid:120) projektant interakcji, (cid:120) projektant graficzny, (cid:120) projektant UI, (cid:120) kierownik artystyczny, (cid:120) programista frontendowy, (cid:120) programista backendowy, (cid:120) menedżer projektu. Na liście możesz także zapisać osoby spoza standardowego zespołu, jeśli mają one mieć jakiś udział w projekcie lub są uprawnione do podejmowania decyzji w jego sprawie, np.: (cid:120) prezes, (cid:120) menedżer marki, (cid:120) inżynier jakości, (cid:120) menedżer produktu, (cid:120) analityk SEO, (cid:120) pracownicy działu komunikacji i sprzedaży. 24 Poleć książkęKup książkę ZESPÓ(cid:146) Pamiętaj, że niektóre z osób, które będą uczestniczyć w projekcie, nie muszą brać udziału w zebraniach dotyczących opracowania planu. Są to między innymi: (cid:120) Testerzy — niezależnie od tego, czy będą to rekrutowani później zewnętrzni podwykonawcy, czy pracownicy z firmy, z którymi być może będziesz wykonywał na bieżąco testy użyteczności. (cid:120) Konsultanci i inni eksperci, z których wiedzy będziesz korzystać, lecz którzy nie będą bezpośrednio uczestniczyć w pracach ani nie mają uprawnień do podejmowania decyzji. Skoro już się orientujesz, kto będzie pracować nad projektem, musisz zdecydować, kto będzie przewodzić zespołowi. Wskaż opiekuna projektu W dalszej kolejności musisz dopilnować, aby projekt miał swojego opiekuna — kogoś, kto będzie mu przewodził i na bieżąco przypominał o zadaniach. Bez opiekuna aż za łatwo byłoby wymyślać kolejne wymówki i odkładać prace nad responsywnością na później, aby tymczasem zająć się innymi projektami. Warto pamiętać, że opiekun projektu nie musi być menedżerem projektu. Podobnie jak w przypadku innych tego typu projektów, opiekun może być starszym designerem lub programistą albo nawet projektantem UX. Domyślam się, że skoro czytasz tę książkę i wykonujesz przedstawione tutaj zadania, to prawdopodobnie Ty sam przyjmiesz rolę opiekuna. Być może jednak tylko przygotowujesz plan realizacji projektu, a odpowiedzialność musisz powierzyć komuś innemu. Opiekun projektu będzie musiał: (cid:120) dopilnować ukończenia projektu; (cid:120) dopilnować dotrzymania terminów i zmieszczenia się w budżecie; (cid:120) motywować zespół, także wtedy, gdy postęp prac nie jest odczuwalny; (cid:120) koordynować działania zespołu, ponieważ nie zawsze wszyscy współpracownicy mają ze sobą styczność. Opiekun projektu powinien uczestniczyć w realizacji projektu, a nie być osobą spoza zespołu, która nie ma do czynienia z jego codzienną pracą. Nie musi jednak stale zajmować się tym konkretnym projektem, podobnie zresztą jak pozostali członkowie zespołu. Gdy sama zajmowałam się pracą nad responsywnością ubuntu.com, zdarzyło się kilka okresów, w których musiałam zająć się innymi projektami, z tym że były to przerwy zaplanowane z wyprzedzeniem (planowanie takich przerw omówimy w dalszej części tego rozdziału). Stale jednak odpowiadałam w jakiś sposób za postęp prac nad responsywnością. Gdy opiekun projektu nie pracuje bezpośrednio nad tworzeniem czegoś namacalnego, to prawdopodobnie inni się tym zajmują. Opiekun wciąż zatem musi zarządzać przedsięwzięciem i być na bieżąco z tym, co robi jego zespół. Wszyscy muszą uczestniczyć Każdy ma własną wizję tego, z jakimi konkretnie działaniami wiąże się tworzenie responsywnej strony internetowej i jak powinien wyglądać rezultat. Na etapie planowania musisz jednak wyeliminować tę subiektywność i sprawić, aby wszyscy mieli wspólną wizję. Jeśli osoby, które mają pracować nad projektem, wezmą udział przynajmniej w części zebrań i warsztatów, będą one bardziej zaangażowane w sam projekt i będą lepiej rozumieć, dlaczego zostały podjęte pewne decyzje. Trudniej podważyć decyzję, na którą miało się wpływ, niż taką, z którą nie miało się nic do czynienia lub której kontekstu się nie zna. Prawdopodobnie nie wszystkie pomysły i życzenia zostaną przyjęte, a konieczne będzie pójście na wiele kompromisów. Odbędziesz jednak dyskusje potrzebne do tego, aby ludzie zrozumieli, dlaczego pewne decyzje zostały podjęte. 25 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) ETAP PLANOWANIA Mając ograniczony czas i zasoby, musisz podjąć pewne trudne decyzje i zgodzić się na różne kompromisy, dlatego nie powinieneś narażać się na ryzyko, aby osoba dołączająca do prac na późniejszym etapie mogła podważyć wszystkie podjęte na samym starcie — i prawdopodobnie słuszne — decyzje. Nie oznacza to jednak, że Twój plan w ogóle nie powinien ulegać zmianom. Możesz zmienić zdanie lub trafić na nowe rozwiązanie, które okaże się lepsze od pierwotnego. Zawsze powinieneś pozwalać sobie na odrobinę elastyczności, gdy się dowiadujesz, że Twój pierwszy pomysł nie jest optymalny. Warto również pamiętać, że gdy przedstawiciele wyższego kierownictwa uczestniczą we wstępnej fazie planowania i mają okazję wysłuchać, jak zespół analizuje problem, to na ogół nie wtrącają się później w prace i pozwalają wszystkim robić swoje — oczywiście o ile Twój zespół składa się z inteligentnych i kompetentnych profesjonalistów. Tak czy inaczej, istotne jest, aby wszystkie osoby (w tym nawet dyrektorzy), które będą (lub będą chciały) uczestniczyć w pracy nad projektem na późniejszych etapach, zostały zaproszone do współpracy nad określeniem jego zakresu i harmonogramu. Pewnie myślisz sobie teraz: „Przecież nie zmieszczę tych wszystkich ludzi w jednym pomieszczeniu i nie przetrzymam ich tam na długie godziny, żeby mi pomogli w opracowaniu projektu. Przecież była mowa o rozwiązaniach dla zespołów, którym brakuje czasu! Co tu się w ogóle dzieje?”. Wiem z własnego doświadczenia, jak trudno jest zaciągnąć stado zapracowanych ludzi na kilkugodzinne spotkania. Mogę Cię jednak zapewnić, że wszelkie starania podjęte na samym początku projektu zdecydowanie opłacą się w toku prac nad responsywną witryną, ponieważ zyskasz w ten sposób czas na rozwiązywanie problemów z designem i kodem, który w przeciwnym razie musiałbyś poświęcić na radzenie sobie z polityką i konfliktami wewnątrz zespołu lub poza nim. Zgromadzenie wszystkich potrzebnych ludzi na zebraniu, na którym zainaugurujesz prace nad responsywnością witryny, jest samo w sobie poważnym przedsięwzięciem, wymagającym cierpliwości i wyczucia momentu, gdy ludzie będą dostępni. Jeśli jednak chcesz robić wszystko poprawnie od samego początku, będziesz musiał podjąć się także tego. Planowanie improwizowane Najprostszym i najłatwiejszym sposobem na rozplanowanie wielkiego, złożonego projektu jest sięgnięcie po wielki stos karteczek samoprzylepnych. Praca z karteczkami pozwala na improwizowanie i swobodne modyfikowanie planu w razie zmiany wymagań i harmonogramu, czy też stanu wiedzy o projekcie. Karteczki należy przekładać tyle razy, ile to będzie konieczne, aż do uzyskania planu, który sprawia wrażenie, że odpowiada możliwościom Twojego zespołu i wymaganiom witryny. Przeklejanie karteczek jest prostsze i tańsze od poprawiania designu i kodu na późniejszym etapie. Widok całości Gdy opracowujesz plan projektu, który może stać się niezwykle duży i złożony i który będzie wymagać udziału wielu osób w długotrwałych pracach, masz do czynienia z wieloma drobnymi częściami, zadaniami i pomysłami, które trzeba grupować, priorytetyzować i rozplanowywać w czasie. Mając przed oczami wszystkie elementy, które składają się na cały projekt, zyskujesz lepszy ogląd jego skali i tego, jak dużo zadań trzeba będzie pominąć w poszczególnych fazach prac. Wygląda to trochę tak jak w serialach kryminalnych. Śledczy przypinają wszystkie poszlaki i dowody do wielkiej tablicy, na którą następnie patrzą przez długie godziny, żeby zwrócić uwagę na pominięte wskazówki i powiązania. Gdy masz przed oczami wszystkie materiały związane ze sprawą, łatwiej Ci jest znajdować brakujące ogniwa i wymyślać kreatywne, nietypowe rozwiązania. Podobnie jak serialowi śledczy, potrzebujesz dużej powierzchni na ścianie, ponieważ karteczki samoprzylepne (Twoje główne narzędzie na tym etapie) mają to do siebie, że przybywa ich w postępie geometrycznym. Najlepiej znaleźć jakąś powierzchnię, do której karteczki i inne materiały będą mogły być przyczepione przez cały czas pracy nad projektem. Jeśli nie jest to możliwe, postaraj się chociaż zapewnić taką powierzchnię na potrzeby zebrań i dokumentować na bieżąco wszystkie postanowienia. 26 Poleć książkęKup książkę PLANOWANIE IMPROWIZOWANE Karteczek powinieneś mieć pod dostatkiem, więc zrób odpowiednie zapasy. Nie daj się skusić na zakup tanich karteczek, tylko zdecyduj się na porządny produkt: karteczki Post-it® 3M. Bądź co bądź zależy Ci przecież na tym, żeby Twoje notatki z pomysłami i całym planem nie rozlatywały się po całym pomieszczeniu przy najmniejszym podmuchu. Mają być tam, gdzie je przykleiłeś! Poza tym powinieneś kupić jak najwięcej różnych kolorów karteczek, w razie gdybyś chciał odróżnić od siebie informacje, takie jak: zadania, przydziały obowiązków, etapy projektu, iteracje, czy nawet różne projekty. Zapis cyfrowy Prawdopodobnie będziesz musiał w końcu przenieść plany do formatu cyfrowego. Przynajmniej jednak na początkowych etapach, gdy pomysły dopiero się pojawiają i kiedy starasz się dostosować jeden złożony projekt do wielu innych projektów, możliwość zmiany planu bez większego wysiłku jest bardzo istotna. W zależności od tego, jak Twój zespół zazwyczaj pracuje, możesz zdecydować, w jaki sposób najprędzej przedstawić przynajmniej najważniejsze elementy planu w formacie cyfrowym, którym można się łatwiej dzielić z innymi zainteresowanymi. Jest to szczególnie istotne w przypadku rozproszonych zespołów, których członkowie nie zawsze znajdują się w tym samym miejscu w tym samym czasie. Cyfrowy zapis planu, zadań i terminów może mieć mniej lub bardziej formalny charakter — wszystko zależy od Twoich potrzeb. Istnieją różne narzędzia do planowania projektów, ale niektóre z nich cieszą się większą renomą i popularnością wśród wielu profesjonalistów. Większość tych narzędzi oferuje podstawowe funkcje i obsługę kilku kont użytkowników za darmo, ale jeśli chcesz w pełni wykorzystać ich możliwości i dostęp do projektu dać wielu użytkownikom, będziesz musiał zdecydować się na płatną usługę (zazwyczaj opłacaną abonamentowo od liczby kont). Basecamp 3 (rysunek 1.1) pozwala m.in. na przeglądanie kalendarzy wybranych projektów lub wszystkich projektów naraz — wraz z kamieniami milowymi i terminami. Możesz także śledzić postępy prac nad projektem, postępy, jakie wybrani uczestnicy odnoszą w ramach pracy nad jednym projektem lub nad wszystkimi (co bywa przydatne). Kolejną przydatną funkcją, którą wprowadzono w nowej wersji Basecamp, jest możliwość tworzenia cyklicznie wysyłanych pracownikom zapytań ewaluacyjnych. Rysunek 1.1. Basecamp 3 27 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) ETAP PLANOWANIA Narz(cid:218)dzia open source Wybór narz(cid:218)dzia s(cid:239)u(cid:285)(cid:200)cego do planowania projektu jest w du(cid:285)ym stopniu uzale(cid:285)niony od sposobu, w jaki dzia(cid:239)a Twój zespó(cid:239), funkcjonalno(cid:258)ci, jakiej wymagasz, a tak(cid:285)e tego, ile jeste(cid:258) sk(cid:239)onny za nie zap(cid:239)aci(cid:202). Poza omawianymi przeze mnie narz(cid:218)dziami do zarz(cid:200)dzania projektami mo(cid:285)esz te(cid:285) skorzysta(cid:202) z ró(cid:285)nych aplikacji open source. Je(cid:258)li zale(cid:285)y Ci na wi(cid:218)kszej kontroli nad swoim narz(cid:218)dziem, powiniene(cid:258) dowiedzie(cid:202) si(cid:218) nieco wi(cid:218)cej o takich rozwi(cid:200)zaniach1. Kolejnym istniejącym już od jakiegoś czasu narzędziem jest Asana (rysunek 1.2). Ta aplikacja do zarządzania zadaniami pozwala na przeglądanie statusów projektów, tak jak Basecamp, ale udostępnia także kalendarze i daje wgląd w pliki. Można w niej również tworzyć konta dla gości o ograniczonej widoczności treści. Asana umożliwia integrację z popularnymi serwisami, takimi jak Campaign Monitor, Dropbox, Evernote, Dysk Google, Harvest, HipChat, JIRA, Slack i WordPress. Rysunek 1.2. Asana Popularnym narzędziem do tworzenia notatek i gromadzenia pomysłów oraz wyników badań jest Evernote (rysunek 1.3). Evernote pozwala też na cyfryzację „papierowych” notatek i tworzenie osobnych notesów dla różnych projektów. Można w nim także wstawiać adnotacje w plikach takich jak PDF oraz przeglądać wcześniejsze wersje notatek. Jedną z wyróżniających funkcji tej aplikacji jest rozbudowany system wyszukiwania, który uwzględnia wszystkie materiały, w tym obrazy i załączniki. Evernote zapewnia też dostęp offline, dzięki czemu możesz przeglądać swoje notatki w dowolnym miejscu. Trello (rysunek 1.4) należy do nowszych narzędzi do zarządzania projektami i zadaniami. Aplikacja przedstawia model zbudowany z karteczek ułożonych w kolumny. Jej szybki i przyjazny interfejs sprawił, że od razu zyskała popularność w zespołach projektowych. Możesz tworzyć listy kontrolne na karteczkach, a także osadzać dokumenty i dodawać komentarze. Trello obsługuje składnię Markdown i zapewnia integrację z serwisami takimi jak Dropbox, Evernote, GitHub, Dysk Google, Google Hangouts, MailChimp, Salesforce, Slack i Twitter. 1 Robin Muilwijk, Top 11 Project Management Tools for 2016, 28 marca 2016, https://opensource.com/business/16/3/top-project-management-tools-2016. 28 Poleć książkęKup książkę PLANOWANIE IMPROWIZOWANE Rysunek 1.3. Evernote w podstawowej, darmowej wersji Rysunek 1.4. Trello 29 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) ETAP PLANOWANIA Znale(cid:283)(cid:202) czas Skoro czytasz tę książkę, to prawdopodobnie masz bardzo dużo pracy i musisz radzić sobie z kilkoma projektami jednocześnie, starając się odnieść do wszystkich uwag, które przychodzą do Ciebie od klientów lub z innych części firmy. Prawdopodobnie odpowiadasz też za aktualizowanie istniejącej już witryny i zarządzanie nią, czym będziesz musiał się zajmować także podczas pracy nad jej responsywną wersją. Moim zdaniem najtrudniejszym aspektem pracy nad przekształceniem statycznej strony w responsywną jest znalezienie na to czasu, a nie samo rozwiązywanie problemów technicznych i projektowych. Istnieją jednak pewne procesy i narzędzia, które pomogą Ci poradzić sobie z poczuciem, że nie masz czasu ani możliwości zajęcia się interesującym Cię projektem. Zapoznaj się ze swoim terminarzem Zanim zaczniesz przydzielać terminy i okresy przeznaczone na pracę nad responsywnością strony, musisz się rozeznać, jakie masz inne zobowiązania. Sięgnij po karteczki i stwórz siatkę na kolejne miesiące, w której kolejne miesiące lub tygodnie zapisane są w górnym rzędzie jako nagłówki kolumn. Umieść następnie w odpowiednich kolumnach wszystkie terminy, których musisz dotrzymać w ramach pracy nad innymi projektami. Musisz także podać czas, przez jaki będziesz zajmował się poszczególnymi projektami — same terminy nie wystarczą (tabela 1.1). Tabela 1.1. Terminarz w formie siatki Stycze(cid:241) 4 – 8 Stycze(cid:241) 11 – 14 Stycze(cid:241) 18 – 22 Projekt B: wersja 1 … Projekt A: gotowa treść Nazwa 1 Nazwa 2 … Ja na ogół dodatkowo komplikuję tę siatkę (ale tym samym ją usprawniam), podając po lewej stronie jako nagłówki rzędów imiona najważniejszych członków zespołu lub zakresów prac (treść, design, kodowanie itd.). Dzięki temu terminarz staje się bardziej szczegółowy, a także pokazuje, kto ma kiedy wolny czas. To istotne, ponieważ nie wszyscy pracują nad tymi samymi projektami jednocześnie. Po wykonaniu tego zadania zyskasz lepszy ogląd tego, czy są jakieś wolne przedziały czasowe, w które możesz wcisnąć swój projekt, czy może będziesz musiał obniżyć priorytetowość innych projektów, aby móc zająć się responsywnością strony. Priorytetyzacja Przejrzyj kalendarz, który stworzyłeś w poprzednim punkcie, i wskaż projekty, których terminy ukończenia są niejasne lub nie są absolutnie obowiązujące. Sprawdź, czy któreś z nich mają niezdefiniowane lub luźno sformułowane wymagania, a także czy któreś czekają dopiero na zatwierdzenie (np. przez podpisanie umowy z klientem lub wpłatę zaliczki). Wskaż też inne zainicjowane oddolnie projekty, które uważasz za mniej ważne od zapewnienia witrynie responsywności — powinna to być większość z nich. W tym miejscu musisz być bezwzględny, jeśli chcesz w ogóle znaleźć czas na kolejny projekt. Jeśli się okaże, że możesz bez problemu odłożyć niektóre zadania na bok, to znaczy, że nie dość surowo podchodzisz do wykrawania czasu na swój własny projekt. Po opracowaniu listy z zaktualizowanymi priorytetami i harmonogramami porozmawiaj z osobami zaangażowanymi w pracę nad projektami, które musiałeś odstawić na boczny tor. Wyjaśnij im, że będziesz mógł na nowo wprowadzić te zlecenia, gdy otrzymasz nieco konkretniejszy opis lub gdy załatwione zostaną sprawy, które na razie uniemożliwiają rozpoczęcie prac. Powiedz, że usiłujesz zaplanować projekt modernizacji witryny pod kątem responsywności i że to on będzie miał pierwszeństwo przed 30 Poleć książkęKup książkę PRZYDZIELANIE ZADA(cid:148) jakimkolwiek mgliście sformułowanym konspektem, przy czym koniecznie wytłumacz, jakie korzyści przyniesie całej firmie responsywna witryna. Nie zaprzeczam, że łatwiej powiedzieć, niż zrobić, ale właśnie teraz powinieneś popracować nad swoimi umiejętnościami dyplomatycznymi. Z drugiej strony, gdy już się tym zajmiesz, zyskasz więcej czasu, który będziesz mógł poświęcić na tworzenie responsywnej strony. Jesteś już gotów wypełnić puste miejsca pracą, która jest do zrobienia. Przydzielanie zada(cid:241) Czas, który spędzisz na formułowaniu projektu i jego harmonogramu, okaże się zmarnowany, jeśli nie przydzielisz następnie każdego zadania właściwej osobie (lub grupie osób) i nie wyznaczysz na to odpowiedniego czasu. Twoim celem jest dopilnować, aby czas i umiejętności każdego pracownika zostały spożytkowane jak najefektywniej. W tym celu musisz opracować harmonogram, który uwzględni nie tylko najważniejsze umiejętności, wiedzę i dostępność poszczególnych pracowników, ale także liczbę osób potrzebnych do wykonania różnych zadań. Niektóre zadania wymagają udziału większej liczby ludzi, żeby zostały wykonane skutecznie. Przydzielając zadania różnym współpracownikom, weź pod uwagę, że istnieją trzy rodzaje zadań: (cid:120) wykonywane przez grupę; (cid:120) do wykonania przez dwie osoby lub w pojedynkę; (cid:120) takie, którymi można zająć się w okresach przestoju. Razem Niektóre zadania są prostsze i wykonuje się je szybciej, gdy wszyscy mogą się spotkać i omówić problem, który trzeba rozwiązać. Gdy trzeba wygenerować wiele pomysłów, burza mózgów z udziałem paru osób przyniesie lepsze rezultaty (i w dodatku szybciej), niż gdybyś miał sam wszystko wymyślać dniami lub tygodniami. Takie sesje ideacyjne nie muszą trwać długo, aby przynieść rezultaty. Załóżmy, że chcesz opracować stopkę witryny, która będzie zawierać kilka linków do najważniejszych sekcji, profili społecznościowych, regulaminu i innych dokumentów prawnych. W takim wypadku możesz wygospodarować dwugodzinne okienko, w trakcie którego 3 – 5 designerów i programistów zajmie się szkicowaniem własnych propozycji oraz omawianiem wad i zalet wszystkich przedstawionych rozwiązań. Pod koniec takiej sesji powinieneś mieć dwa lub trzy pomysły, które będzie można prototypować, przetestować i ulepszyć aż do uzyskania stopki pasującej do witryny responsywnej. Oto kilka innych zadań, które lepiej i sprawniej wykonuje się w grupie liczącej powyżej trzech osób: (cid:120) testowanie projektu na różnych urządzeniach i w różnych przeglądarkach; (cid:120) wymyślanie sposobów na stworzenie responsywnej nawigacji; (cid:120) opracowywanie pomysłów na responsywną siatkę; (cid:120) omawianie sposobów obsługiwania responsywnych obrazów; (cid:120) przeglądanie wszystkich wzorców projektowych użytych na stronie i omawianie, które należy usunąć, a które połączyć; (cid:120) przeprowadzenie sesji, na której podane zostaną wzorce projektowe do wykorzystania na stronie; (cid:120) nakreślenie nowej architektury informacyjnej witryny; (cid:120) inne zadania, przy których kluczowe jest wygenerowanie pomysłów. 31 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) ETAP PLANOWANIA Osobno Członkowie zespołu wyznaczonego do pracy nad responsywnością strony nie muszą spędzać całego swojego czasu nad tym projektem. Prawdopodobnie mało będzie momentów, w których wszyscy będą razem nad nim siedzieć i nie ma w tym nic złego. Kilka powtarzalnych, lecz czasochłonnych czynności można powierzyć jednej osobie, a pozostałe należy oddelegować do pracy nad innymi zadaniami lub projektami. Inwentaryzacja treści, stron, obrazów i wzorców projektowych to właśnie tego typu zadania. Wiele zadań czysto produkcyjnych, zwłaszcza związanych z porządkowaniem i refaktoryzacją kodu, można powierzyć kilku programistom. Ponadto badania narzędzi i rozwiązań, a także sposobów, jakie inni ludzie już zastosowali do podobnych wyzwań, może wstępnie przeprowadzić jedna osoba, a następnie omówić wszystko w grupie. Oto kilka innych zadań, którymi może zajmować się jedna bądź dwie osoby: (cid:120) katalogowanie architektury informacji; (cid:120) inwentaryzacja treści; (cid:120) inwentaryzacja wzorców projektowych; (cid:120) inwentaryzacja obrazów; (cid:120) porządkowanie znaczników; (cid:120) porządkowanie i refaktoryzacja arkuszy stylów; (cid:120) tworzenie niewielkich prototypów, np. służących do testowania konkretnych wzorców projektowych; (cid:120) korekta tekstu; (cid:120) edycja obrazów; (cid:120) pisanie nowych wytycznych stylistycznych lub aktualizacja istniejących. Okresy przestoju Będą się zdarzać momenty, w których żaden z członków zespołu nie będzie się zajmował projektem. Nie oznacza to jednak, że możesz lekceważyć nadzorowanie postępów. O ile takie okresy przejściowe będą należycie odnotowywane i wszyscy wiedzą, że będą miały miejsce, to nie powinny sprawiać problemu. Podczas takich przerw opiekun projektu jest szczególnie ważny, ponieważ musi dopilnować, aby po powrocie do pracy nad responsywnością zespół utrzymał swój entuzjazm i rozpęd. Brak widocznych postępów, możliwości odhaczenia wykonanych zadań i perspektywy ukończenia projektu bywa zniechęcający. Opiekun projektu musi dopilnować, aby uczestnicy traktowali projekt jako coś, co z czasem zostanie ukończone, a obecnie rozwija się we właściwym kierunku. Skoro już wykroiłeś w swoim terminarzu nieco czasu na zajęcie się responsywnością i dobrze się orientujesz, ile kto może poświęcić projektowi czasu w ciągu najbliższych tygodni lub miesięcy, czas zająć się określeniem jego zakresu. Zakres prac Nie możesz pozwolić sobie na luksus, jakim jest przeznaczenie dłuższych przedziałów czasowych na pracę nad swoim nowym projektem, więc musisz skoncentrować się na tym, co możesz osiągnąć w czasie, którym dysponujesz. Jeśli postępujesz zgodnie z zawartymi tutaj wskazówkami i wykonujesz zadania, które Ci podsuwam, Twój zespół powinien dość dobrze wiedzieć, jak będą wyglądać rezultaty projektu, co trzeba będzie zrobić w celu ich uzyskania i — już na późniejszym etapie — jak będzie się on odnosić do innych projektów. 32 Poleć książkęKup książkę ZAKRES PRAC Przed wykonaniem tych zadań projekt responsywnej strony jest jedynie pomysłem, który krąży w głowach różnych osób. Każdy ma nieco odmienną wizję. Niektórzy mogą sądzić, że realizacja tego projektu nie wymaga większego wysiłku, a inni będą przerażeni ogromem prac do wykonania (podejrzewam, że tych drugich może być więcej). Po wyciągnięciu tych wszystkich wizji na światło dzienne łatwiej będzie zdefiniować zakres prac i harmonogram projektu. W ramach wykonywania przedstawionych poniżej zadań pamiętaj, aby koniecznie robić zdjęcia, zapisywać lub w inny sposób rejestrować pojawiające się pomysły. Do pomysłów z początku dyskusji możesz zechcieć wrócić później, a nie będzie to możliwe, jeśli zapiszesz jedynie ten plan, który zostanie opracowany pod koniec rozmowy. Lista życzeń Po określeniu ogólnych celów projektu najprostszym sposobem na sformułowanie konkretów jest poproszenie wszystkich uczestników projektu, aby napisali na karteczkach, co chcieliby zmienić na stronie — niezależnie od tego, czy ich pomysły bezpośrednio przekładają się na zapewnienie responsywności. Na każdą kartkę powinien przypadać jeden pomysł. Jest to również dobry sposób na rozbicie dużego projektu na małe części. Wszyscy wiemy, że mniejsze zadania są mniej onieśmielające i wydają się bardziej wykonalne niż jedno wielkie. Możesz poprosić współpracowników o przygotowanie się do tego zadania z wyprzedzeniem, ale tak czy inaczej daj im trochę czasu na przemyślenie tematu i spisanie swoich pomysłów już w trakcie zebrania. Jeśli chcesz im podać jakieś wytyczne co do tego, na czym powinni się skoncentrować, zwróć uwagę, że wszystkie podane zadania powinno móc się wykonać w czasie określonej liczby dni lub w ciągu trwającego tydzień lub dwa sprintu. Po spisaniu wszystkich pomysłów poproś uczestników o przyklejenie karteczek w dowolnym miejscu na ścianie. Kolejnym krokiem jest poproszenie uczestników o uporządkowanie pomysłów tematycznie. Nie martw się, jeśli niektóre karteczki będą wielokrotnie przeklejane przez różne osoby — po prostu w którymś momencie zakończ to ćwiczenie. Prawdopodobnie okaże się, że te dziesiątki lub setki różnych pomysłów w rzeczywistości odnoszą się do wspólnych wątków. Porządkowanie Nadszedł czas, aby uporządkować zadania i tematy w sposób bardziej ustrukturyzowany. Niektóre z opisanych zadań prawdopodobnie będą bardzo luźno związane z projektem, więc możesz zacząć od odstawienia ich na bok lub przydzielenia ich do osobnego projektu, bądź odłożyć ich wdrożenie do kolejnej iteracji projektu responsywnej strony. Możesz także podzielić zadania według poziomu trudności lub czasu ukończenia. Być może warto zacząć od umieszczenia na jednej liście pożytecznych zmian i aktualizacji, które można wdrożyć stosunkowo szybko lub łatwo. Bardziej rozbudowane zadania, nad którymi praca może być skomplikowana lub długotrwała bądź wymagać udziału różnych zespołów, umieść na osobnej liście. Na tym etapie możesz zdjąć karteczki ze ściany, przykleić nowe i zapisać na nich główne koncepty z każdego wątku. Służy to głównie temu, żebyś nie musiał przeklejać dziesiątek karteczek naraz, żeby przenieść jedno zadanie lub pomysł z miejsca na miejsce. Nie odrzucaj jednak pomysłów, które wydają się być podobne do innych, ale w rzeczywistości są na tyle odmienne, że powinny mieć przydzielone własne wątki. Priorytety Kolejnym krokiem jest uporządkowanie karteczek według ważności zadania lub w kolejności, w jakiej należy je wykonać. Konieczne może być na przykład przeprowadzenie inwentaryzacji wszystkich wzorców projektowych przed zajęciem się czymkolwiek innym. Innym takim zadaniem jest inwentaryzacja całej treści lub uporządkowanie kodu HTML. Możesz uznać, że najważniejsze jest zaprojektowanie 33 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) ETAP PLANOWANIA i opracowanie w pełni responsywnego systemu nawigacji lub zaktualizowanie treści tak, aby lepiej wyglądały na małych ekranach. Priorytetowe zadania należy przenieść na sam początek. Niektóre zadania trzeba wykonać przed innymi, więc musisz to uwzględnić i uporządkować je według priorytetu. Priorytetowość pozostałych zadań jest subiektywna, więc przygotuj się na wiele dyskusji, towarzyszących temu zadaniu. Jeśli ktoś wypowiada się na rzecz jednego zadania, spychając inne na bok, upewnij się, że argumentacja tej osoby jest ugruntowana potrzebami użytkownika i celami biznesowymi firmy. Trudno dyskutować z kimś, czyje rozumowanie oparte jest jedynie na osobistych preferencjach. Jeśli zatem programista powie: „Powinniśmy zaimplementować jQuery Mobile, bo inne biblioteki JavaScript są do bani”, spytaj go, jaką korzyść przyniesie to użytkownikom strony, firmie lub projektowi. To miłe pracować nad czymś ekscytującym, przyjemnym i interesującym, ale trzeba uważać, żeby nie działać wyłącznie z myślą o własnym zadowoleniu bez zwracania uwagi na to, czy będzie to korzystne dla projektu. Jak już wspomniałam, istotne jest, aby wyważyć chęć stworzenia responsywnej witryny z innymi celami biznesowymi. Musisz wobec tego umieć uzasadnić, dlaczego przeznaczasz czas na pracę nad swoim projektem, posługując się argumentami odnoszącymi się do celów firmy i potrzeb użytkowników, a nie do Twoich preferencji. Podział zadań Niektóre z podanych zadań mogą być zbyt rozbudowane, aby można było je ukończyć w tydzień lub dwa. Niektóre mogą nawet wymagać rozłożenia prac na dwa różne etapy realizacji projektu. Jeśli ktoś zatem zaproponuje „Przeredagować tekst — zwiększyć czytelność na urządzeniach mobilnych”, możesz podzielić to zadanie na mniejsze części: „Przeredagować tekst w głównych działach”, „Przeredagować tekst na stronie głównej”, „Przeredagować tekst na stronie pomocy” itd. Jeśli możesz skorzystać jedynie z krótkich przerw w pracy nad innymi projektami, łatwiej Ci będzie zmieścić w harmonogramie takie drobniejsze zadania. Należy także omówić w grupie, jakie inne, niewymienione dotąd zadania, należy wykonać wraz z omawianym. Nawiązując do poprzedniego przykładu, przed zabraniem się do redagowania tekstu być może należy zatrudnić copywritera lub spisać wytyczne stylistyczne. Test jednej godziny Dobrym sposobem rozkładania większych zadań na mniejsze jest udzielenie odpowiedzi na poniższe pytanie: Gdybyś miał tylko jedną godzinę do spożytkowania, jakie zadanie byś wykonał, aby popchnąć projekt naprzód? Gdy masz tylko jedną godzinę na poprawienie czegoś, musisz skoncentrować się na zadaniu, które jest zarówno ważne, jak i wykonalne w tym czasie — takim, przy którym narobisz się jak najmniej, a z którego wyciągniesz jak najwięcej. Jeśli chcesz (lub musisz), możesz nawet rozplanować cały projekt, kierując się tym pytaniem. Przyjęcie takiego podejścia ułatwi Ci odrzucanie pomysłów na zbędne dodatki, ozdoby i zadania, które nie miałyby istotnego wpływu na postęp prac. Możesz zwiększyć limit czasowy do dwóch godzin, jeśli uważasz, że to konieczne. Nie zalecałabym jednak przekraczania granicy dwóch godzin, ponieważ taka ilość dostępnego czasu utrudnia skoncentrowanie się na najważniejszym zadaniu, jakie w danym momencie można wykonać, aby przyczynić się do opracowania responsywnej witryny. Zakres tego, co możesz zrobić w ciągu dwóch godzin, jest znacznie szerszy, co nie jest szczególnie korzystne, gdy przede wszystkim musisz zdecydować, do czego należy się zabrać. Możesz zadać powyższe pytanie jeszcze przed rozpoczęciem spisywania listy życzeń, tak aby współpracownicy od razu rozbili zadania na mniejsze. Może warto ograniczyć czas do 30 minut? Czy ktoś ma pomysł na zadanie do wykonania w tak krótkim czasie? 34 Poleć książkęKup książkę ZAKRES PRAC Oto kilka pomysłów na zadania, które można spróbować wykonać w ciągu godziny: (cid:120) Przejrzeć dane analityczne witryny w poszukiwaniu konkretnych informacji, takich jak najczęściej używane urządzenia i najczęściej odwiedzane strony. (cid:120) Przygotować spis rodzajów obrazów użytych na stronie. (cid:120) Ocenić jakość treści w wybranej sekcji witryny. Czy tekst jest za długi, żeby dało się go czytać na małym ekranie? Czy obrazy wnoszą coś wartościowego? (cid:120) Sprawdzić rozmiar najważniejszych stron docelowych. (cid:120) Przeprowadzić testy użyteczności, uwzględniając kontrast kolorów i wielkość tekstu. (cid:120) Przetestować witrynę z jednym użytkownikiem. Pamiętaj jednak, że istnieją też czynności, których nie da się sprawnie wykonać w krótkich odstępach czasu. Zarówno designerzy, jak i programiści pracują lepiej, gdy mogą skoncentrować się na wybranym zadaniu na tyle długo, żeby „wejść w trans”. Jest to na ogół pożądany stan, gdy designerzy mają projektować, programiści kodować, a copywriterzy — co tu dużo mówić — pisać. Takie zadania wymagają pewnej kreatywności i weny, a czasami także łutu szczęścia. Jeżeli zależy Ci na ponadprzeciętnych rezultatach, musisz zatem wydzielić dłuższe przedziały czasu pracy, podczas których pracownicy nie będą sobie musieli przerywać. Określ etapy Sądzę, że dobrym pomysłem na tym etapie planowania jest szczegółowe rozplanowanie przynajmniej pierwszych dwóch wydań responsywnego projektu. Jak to bywa z każdym projektem, harmonogramy i zakresy na pewno będą ulegać zmianie, dostosowując się do nieprzewidzianych okoliczności. Wiedząc, jakie najważniejsze zadania trzeba wykonać za pierwszym podejściem, będziesz miał mniejsze opory przed przełożeniem innych zadań do kolejnego wydania. Nie będziesz miał czasu, aby od razu zająć się niektórymi rzeczami, które wymagają poprawienia, ale za to będziesz miał poczucie, że uwzględniłeś w planie te czynności i że nie zostaną one zapomniane. Choćby najogólniejsze sformułowanie drugiego etapu i przeklejenie niektórych karteczek do sekcji „Etap 2” ułatwi prowadzenie dyskusji o tym, które zadania trzeba wykonać najpierw. Zamiast mówić: „Nie zajmiemy się tym”, możesz powiedzieć: „Zajmiemy się tym, jak już uporamy się ze wszystkim innym”. Określ, co wykracza poza zakres prac Jedną z najważniejszych spraw do załatwienia w ramach planowania tego projektu jest spisanie listy wszystkich rzeczy, których zespół nie będzie mógł zrobić lub naprawić. Ważne jest, żeby każdy obecny lub przyszły uczestnik projektu był zaznajomiony z tą listą. To między innymi dlatego tak silnie nalegam, żebyś włączył wszystkich zainteresowanych we wstępny etap planowania. Prawdopodobnie rozumiesz już, że nie możesz sobie pozwolić na usprawnienie wszystkiego, co wydaje Ci się nie działać w witrynie. Listę zatytułowaną „Nie poprawiamy” należy przekazać wszystkim, którzy biorą udział w projekcie. Oto niektóre z czynności, które zespoły pomijają przy pierwszej iteracji projektu responsywnej witryny: (cid:120) aktualizacja architektury informacyjnej, (cid:120) aktualizacja tekstu, (cid:120) responsywność obrazów, (cid:120) projekt graficzny, (cid:120) layout na dużych ekranach, (cid:120) aktualizacja kodu HTML, (cid:120) ulepszenie interakcji dotykowej. 35 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) ETAP PLANOWANIA Nie twierdzę, że akurat te czynności należy zostawić na później, bo ostatecznie wszystko zależy od potrzeb witryny, a także ograniczenia czasu i zasobów, z jakimi musisz się zmierzyć. Gdy nie dysponujesz listą zadań do wykonania, musisz stale prowadzić zespół we właściwym kierunku i dbać o to, aby koncentrował się na właściwych działaniach. Designerzy i programiści potrafią być uparci i mieć bardzo stanowcze poglądy co do tego, w jakiej kolejności należy wykonywać różne czynności. Spędziłeś jednak wystarczająco dużo czasu na określaniu priorytetów zadań, które są najważniejsze dla stworzenia responsywnej strony i które można wykonać w ograniczonym czasie, żeby już nikomu nie przyszło do głowy, aby robić wszystko po swojemu w sytuacji, gdy czas nagli. Powinieneś uważać także na rozpłynięcie zakresu, które może nastąpić po wprawieniu machiny produkcyjnej w ruch. W trakcie pracy na ogół pojawiają się nieuwzględnione w pierwotnym planie kwestie, których rozwiązanie wydaje się kluczowe. Często też pojawiają się problemy, których rozwiązanie można spokojnie odłożyć na później. Zanim poszerzysz zakres projektu o takie kwestie, koniecznie oceń ich znaczenie w porównaniu ze wszystkimi innymi zadaniami, które musiałyby zostać pominięte w bieżącej iteracji, żeby możliwe było uwzględnienie nowych zadań. Musisz oceniać surowo, aby nie rozdmuchać zakresu prac. Pamiętaj o testach Jeśli nigdy dotąd nie pracowałeś nad dużym projektem responsywnej witryny, możesz nie być świadom tego, ile potrzeba czasu na przetestowanie go na różnych urządzeniach i systemach operacyjnych. Najlepszym sposobem na włączenie testowania do planu jest uwzględnienie go przy każdym etapie. Jeśli zatem tworzysz prototyp responsywnego systemu nawigacyjnego, przeznacz dodatkowy czas na jego testowanie. Jeśli zamierzasz przeredagować tekst pod kątem czytelności na mniejszych ekranach, wydziel trochę czasu na przeglądanie go na mniejszych urządzeniach, zanim uznasz zadanie za ukończone. Celem przekształcenia witryny o ustalonej szerokości w responsywną jest zapewnienie poczucia spójnej jakości korzystania z niej na dowolnym urządzeniu. Dlatego właśnie tak istotne jest testowanie od samego początku. Nie pozwól, aby testowanie zostało odłożone na sam koniec, przed wydaniem ukończonej strony, gdyż na pewno ujawnią się wtedy nieoczekiwane błędy, które będziesz musiał naprawić w ostatniej chwili. Rozwiązanie takich problemów i ponowne przetestowanie strony może wtedy potrwać dłużej, niż byś się spodziewał. Jeśli współpracujesz z zespołem testerów, powinieneś dopilnować, aby testy odbywały się w trakcie produkcji, a nie tylko pod koniec. Istotne jest, abyś uwzględnił w planowaniu harmonogram testerów i spiął wszystko w czasie. Po wykonaniu omówionych w tym podrozdziale zadań powinieneś już mieć jasną, ogólną wizję tego, jakiego wysiłku potrzeba do osiągnięcia celu określonego dla projektu oraz rozplanowania prac. Wiadomo teraz, jakie warunki projekt musi spełnić, aby został uznany za ukończony, i co trzeba zrobić, żeby doszło to do skutku. Terminy Każdy projekt powinien mieć wyznaczony termin ukończenia. Powinieneś być w stanie wyobrazić sobie rzeczywistość, w której użytkownicy mogą już korzystać z pierwszej wersji Twojej responsywnej witryny. Gdy kamienie milowe i terminy nie są określone, a zdajesz się jedynie na swoje pragnienie urzeczywistnienia responsywnego projektu, zaczynasz się plątać, a inne projekty zaczynają mieć pierwszeństwo. Jeśli zazwyczaj planujesz częste wydania z niewielkimi zmianami, w tym wypadku powinieneś zdecydować się na określenie większych kamieni milowych, wskazujących momenty ukończenia kluczowych aktualizacji witryny, takich jak: „Wydanie 3: Cały tekst dostosowany do ekranów mobilnych” lub „Wydanie 5: Nowa architektura informacyjna”. Tak czy inaczej, zapisz takie kamienie milowe i terminy wydań we własnym harmonogramie oraz w terminarzach wszystkich współpracowników. 36 Poleć książkęKup książkę STRATEGIE WDRA(cid:191)ANIA Faza 1 Mając lepszy ogląd wszystkich swoich pozostałych zobowiązań i czasu, jaki możesz przeznaczyć na pracę nad responsywnym projektem, powinieneś w miarę łatwo wskazać prawdopodobną datę wydania pierwszej wersji Twojej responsywnej witryny. Nawet jeśli ma to nastąpić za kilka miesięcy, ważne jest samo określenie daty i przypilnowanie, aby
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Responsive Web Design. Modernizacja witryny
Autor:

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ą: