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

Osoby które kupowały "Responsive Web Design. Modernizacja witryny", wybierały także:

• Responsive i Bootstrap. Kurs video. Poziom pierwszy. BÅ‚yskawiczne tworzenie responsywnych serwisów WWW 89,00 zÅ‚, (35,60 zÅ‚ -60%)
• Tablice informatyczne. Bootstrap 16,98 zÅ‚, (8,49 zÅ‚ -50%)
• Responsive Web Design. Modernizacja witryny 39,90 zÅ‚, (19,95 zÅ‚ -50%)
• Sass i Compass. Praktyczny przewodnik dla projektantów 49,00 zÅ‚, (24,50 zÅ‚ -50%)
• Responsywne i wydajne projekty internetowe. Szybkie aplikacje dla każdego 34,90 zÅ‚, (17,45 zÅ‚ -50%)

Spis treści

Responsive Web Design. Modernizacja witryny -- spis treści

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)