Responsive Web Design. Modernizacja witryny - ebook

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:

• realistyczne planowanie modernizacji i tworzenie harmonogramu prac
• analiza treści witryny przed jej przeprojektowaniem
• zarządzanie wrażeniami użytkownika (UX, z ang. User Experiences)
• domieszki, funkcje i arkusze stylów
• testowanie modernizowanej witryny i jej publikacja

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 (https//webdesignernotebook.com). Inayaili de León mieszka w swoim ulubionym mieście — Londynie. Uwielbia koty i leniwe drzemki.

O autorce (9)

O korektorze merytorycznym (11)

Podziękowania (13)

Przedmowa (15)

Wstęp (17)

Rozdział 1. 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)
  • 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)

Rozdział 2. Etap opracowania treś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)

Rozdział 3. Etap projektowania (61)

• Ewolucja zamiast rewolucji (61)
• Projekty wielokrotnego użytku (63)
• Dostępność (65)
• Wydajność (67)
• Żadnych makiet (68)
• 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)

Rozdział 4. 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)
• 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ńczenie (135)

Dodatek. Materiały (137)

Skorowidz (141)