Responsive Web Design z jQuery

Twórz strony na miarę XXI wieku.

Jeszcze całkiem niedawno - w świecie bez smartfonów i tabletów - tworzenie stron było zdecydowanie prostsze. Projektanci i deweloperzy nie musieli się martwić o to, jak strona będzie się prezentowała na różnej wielkości ekranach, dopasowywali ją do 2–3 rozdzielczości. Obecnie, w erze urządzeń mobilnych o poziomych, pionowych, małych, średnich i bardzo dużych ekranach, pewnie często zastanawiasz się, jak skutecznie zadbać o responsywność swojej strony. Sięgnij po ten przewodnik i spraw, by zarówno użytkownicy komputerów stacjonarnych, jak i laptopów, tabletów czy smartfonów z przyjemnością korzystali z Twojej witryny.

W trakcie lektury dowiesz się, jak budować responsywne strony WWW. Responsywne to znaczy takie, które dostosowują swój wygląd i układ do urządzenia, na którym są przeglądane. Nauczysz się korzystać z dopasowujących się układów i siatek (ang. grids) oraz zbudujesz menu, które wszędzie będzie wyglądało dobrze. Ponadto przekonasz się, że stworzenie galerii, osadzenie mediów oraz atrakcyjnej tabeli dla urządzeń mobilnych nie musi być karkołomnym zadaniem! Na sam koniec dowiesz się, jak testować takie strony, oraz poznasz przydatne wtyczki dla jQuery. Książka ta jest doskonałym źródłem wiedzy dla wszystkich podążających za trendami w tworzeniu stron WWW!

Sięgnij po książkę i dowiedz się, jak:
• stworzyć atrakcyjne menu i galerię
• wykorzystać możliwości małych ekranów
• zbudować responsywną tabelę
• zastosować dodatkowe wtyczki
• zbudować uniwersalną stronę WWW

Zaoszczędź swój czas i twórz uniwersalne strony WWW.

Spis treści:

Wstęp (15)

• Co znajdziesz w tej książce? (15)
• Czego potrzebujesz? (16)
• Dla kogo jest ta książka? (17)
• Konwencje (17)
• Pobranie przykładów dla książki (18)
• Errata (18)
• Piractwo (18)

Rozdział 1. Poznawanie projektów responsywnych (19)

• Koncepcja responsywnego projektu stron (20)
• Porównanie stron responsywnych, płynnych i adaptacyjnych (21)
• Dopasowywanie strony WWW do ekranu za pomocą zapytań o media (22)
• Najpierw-mobilne (23)
• Używanie siatek (25)
• Ćwiczenie 1. - projektowanie z siatkami w modelu najpierw-mobilne (25)
• Podsumowanie (26)

Rozdział 2. Projektowanie responsywnych układów i siatek (27)

• Dostosowywanie strony za pomocą języka JavaScript (28)
  • Adapt.js (28)
  • Respond.js (30)
• W jaki sposób wartości procentowe nadają strukturom elastyczność? (30)
  • Konwersja pikseli na procenty (32)
• Czym jest system responsywnej siatki? (34)
  • Systemy responsywnych siatek (35)
• Szablony siatek Photoshopa (42)
• Ćwiczenie 2a - tworzenie układu siatek (44)
• Ćwiczenie 2b - wykorzystanie biblioteki Foundation4 do przygotowania struktury strony (45)
• Podsumowanie (50)

Rozdział 3. Tworzenie responsywnego menu (51)

• Projektowanie menu w celu poprawienia użyteczności (52)
• Najczęściej używane wzorce responsywnego menu (53)
  • Top nav (53)
  • Footer anchor (55)
  • Toggle (58)
  • Menu Select (60)
  • Footer-only (61)
  • Multi toggle (62)
  • Toggle and slide (65)
  • Menu off-canvas (67)
• Ćwiczenie 3. - dopasowywanie menu z wykorzystaniem rozwiązania Toggle Menu (69)
• Podsumowanie (69)

Rozdział 4. Projektowanie responsywnych tekstów (71)

• Konwertowanie tekstu na jednostki względne (72)
  • Jednostka względna - procentowa (72)
  • Jednostka względna - em (73)
  • Jednostka względna - rem (74)
• Poprawianie wymiarowania elementów za pomocą właściwości box-sizing (74)
• Dopasowywanie rodziny czcionek do potrzeb nagłówków responsywnych (76)
  • Narzędzie Font Squirrel do generowania czcionek (77)
  • Wtyczka FitText (80)
  • Wtyczka SlabText (81)
  • Lettering (82)
  • Kern.js (85)
  • Responsive Measure (86)
• Ćwiczenie 4. - dopasowywanie nagłówka strony (87)
• Podsumowanie (88)

Rozdział 5. Przygotowywanie obrazków i filmów (89)

• Prosta zmiana wymiarów obrazka za pomocą CSS (90)
• Stosowanie punktów zmiany obrazków (90)
• Jak działa znacznik picture? (92)
• Kontrolowanie nastaw responsywnych obrazków (92)
  • Biblioteka CSS - Focal Point (93)
• Alternatywne rozwiązanie ze znacznikiem picture (95)
  • Foresight - wybieranie właściwego obrazka dla danej wielkości ekranu (95)
  • Picturefill - rozwiązanie najbardziej przypominające znacznik picture (98)
• Tworzenie responsywnych obrazków tła za pomocą wtyczek jQuery (98)
  • Anystretch - łatwe rozciąganie tła (99)
  • Backstretch - tworzenie responsywnego pokazu slajdów (101)
• Obsługa ekranów o wysokiej gęstości (103)
• Tworzenie responsywnych elementów filmowych (104)
  • FitVids - szybkie rozwiązanie problemów z filmami (105)
• Ćwiczenie 5. - tworzenie różnych wersji obrazka na główną stronę witryny (106)
• Podsumowanie (108)

Rozdział 6. Tworzenie responsywnych galerii obrazów (109)

• Responsywne galerie obrazów (109)
  • Wtyczka Elastislide (110)
  • FlexSlider2 - w pełni responsywna galeria (115)
  • ResponsiveSlides - najlepsza z prostych galerii (119)
  • Swiper - dotykowa galeria obrazków (123)
  • Slicebox - animacja z użyciem obrazów z galerii (128)
• Wykorzystanie gestów dotykowych (129)
• Implementowanie zdarzeń dotykowych we wtyczkach JavaScript (131)
  • QuoJS - prosta biblioteka interakcji dotykowych (131)
  • Hammer - mała biblioteka wielodotyku (132)
• Ćwiczenie 6. - tworzenie galerii obrazków za pomocą wtyczki Swiper (133)
• Podsumowanie (134)

Rozdział 7. Projektowanie tabel responsywnych (135)

• Tabele responsywne (135)
• Rozwijane tabele responsywne (136)
  • Rozszerzenia do wtyczki (139)
• Stackedtables (141)
  • Jak to zrobić, wykorzystując tabelę z poprzedniego przykładu? (141)
• Poziome przewijanie (143)
• Odwrócenie ułożenia nagłówka (145)
• Odnośnik do pełnej tabeli (147)
• Ćwiczenie 7. - tworzenie tabeli responsywnej z cenami za pomocą wtyczki FooTable (149)
• Podsumowanie (149)

Rozdział 8. Implementowanie formularzy responsywnych (151)

• Typy i atrybuty elementów formularzy (152)
• Funkcja autouzupełniania z wtyczką Magicsuggest (153)
  • Jak to zaimplementować? (153)
• Funkcje wyboru daty i czasu (155)
  • Pickadate - responsywne wybieranie daty i czasu (155)
• Funkcja podpowiedzi (157)
  • Tooltipster - nowoczesna funkcja podpowiedzi (157)
• Tworzenie formularzy responsywnych za pomocą biblioteki IdealForms (158)
  • Jak to zaimplementować? (159)
• Ćwiczenie 8. - tworzenie formularza kontaktowego za pomocą biblioteki IdealForms (162)
• Podsumowanie (163)

Rozdział 9. Testowanie responsywnych stron (165)

• Symulowanie urządzeń za pomocą narzędzi dla przeglądarek (165)
  • Narzędzie sieciowe Viewport Resizer (166)
  • Narzędzie sieciowe Surveyor (166)
  • Narzędzie sieciowe ScreenFly (168)
• Emulator przeglądarki Opera Mobile (169)
• Wskazówki dotyczące testowania responsywnych stron WWW (169)
• Ćwiczenie 9. - przetestujmy naszą stronę na różnych wielkościach ekranu (170)
• Podsumowanie (170)

Rozdział 10. Prawidłowa obsługa przeglądarek (173)

• Sprawdzanie funkcji obsługiwanych przez przeglądarkę (174)
  • CanIUse.com (174)
  • QuirksMode.org (175)
• Definiowanie rozwiązań zastępczych (176)
• Narzędzia do wykrywania dostępności funkcji (177)
  • CSS Browser Selector + (177)
  • Modernizr (178)
  • YepNope.js (180)
• Implementacje wypełniaczy (181)
  • MediaElements.js (181)
  • SVG (183)
  • Respond.js (184)
• Podsumowanie (185)

Rozdział 11. Przydatne wtyczki responsywne (187)

• Wtyczki obsługujące strukturę strony (187)
  • Tworzenie prostych struktur responsywnych za pomocą wtyczki Columns (188)
  • Użycie wtyczki Equalize do dopasowania wymiarów elementów (191)
  • Implementowanie strony z kafelkami za pomocą wtyczki Packery (192)
• Wtyczki tworzące menu nawigacyjne (194)
  • Tworzenie menu bocznego za pomocą wtyczki Sidr (195)
  • EasyResponsiveTabstoAccordion (197)
  • Większa elastyczność menu dzięki wtyczce FlaxNav (198)
• Różne rozwiązania (200)
  • SVGeezy (201)
  • Prefix free (201)
  • Magnific Popup (203)
  • Riloadr (204)
  • Calendario (206)
• Podsumowanie (209)

Rozdział 12. Poprawianie wydajności stron (211)

• Wykorzystywanie sieci dostarczania treści (211)
• Zmniejszenie liczby żądań HTTP (212)
  • Warunkowe ładowanie komponentów (212)
  • Konsolidacja i minimalizacja zasobów (skryptów JavaScript i stylów CSS) (212)
  • Technika CSS Sprite (213)
• Zmniejszanie wielkości przesyłanych plików (214)
  • Progresywne obrazki JPEG (214)
  • Optymalizacja obrazków (215)
• Testowanie wydajności stron WWW (216)
  • PageSpeed Insights (217)
  • YSlow (218)
  • WebPagetest (219)
  • Mobitest (219)
• Podsumowanie (220)