Spis treści O autorze

9

O recenzentach

11

Wstęp

15

Co znajdziesz w tej książce? Czego potrzebujesz? Dla kogo jest ta książka? Konwencje Pobranie przykładów dla książki Errata Piractwo

Rozdział 1. Poznawanie projektów responsywnych Koncepcja responsywnego projektu stron Porównanie stron responsywnych, płynnych i adaptacyjnych Dopasowywanie strony WWW do ekranu za pomocą zapytań o media Najpierw-mobilne Używanie siatek Ćwiczenie 1. — projektowanie z siatkami w modelu najpierw-mobilne Podsumowanie

Rozdział 2. Projektowanie responsywnych układów i siatek Dostosowywanie strony za pomocą języka JavaScript Adapt.js Respond.js W jaki sposób wartości procentowe nadają strukturom elastyczność? Konwersja pikseli na procenty Czym jest system responsywnej siatki? Systemy responsywnych siatek

15 16 17 17 18 18 18

19 20 21 22 23 25 25 26

27 28 28 30 30 32 34 35

Responsive Web Design z jQuery

Szablony siatek Photoshopa Przygotowanie znacznika meta widoku Ćwiczenie 2a — tworzenie układu siatek Ćwiczenie 2b — wykorzystanie biblioteki Foundation4 do przygotowania struktury strony Podsumowanie

Rozdział 3. Tworzenie responsywnego menu Projektowanie menu w celu poprawienia użyteczności Najczęściej używane wzorce responsywnego menu Top nav Footer anchor Toggle Menu Select Footer-only Multi toggle Toggle and slide Menu off-canvas Ćwiczenie 3. — dopasowywanie menu z wykorzystaniem rozwiązania Toggle Menu Podsumowanie

Rozdział 4. Projektowanie responsywnych tekstów Konwertowanie tekstu na jednostki względne Jednostka względna — procentowa Jednostka względna — em Jednostka względna — rem Poprawianie wymiarowania elementów za pomocą właściwości box-sizing Dopasowywanie rodziny czcionek do potrzeb nagłówków responsywnych Narzędzie Font Squirrel do generowania czcionek Wtyczka FitText Wtyczka SlabText Lettering Kern.js Responsive Measure Ćwiczenie 4. — dopasowywanie nagłówka strony Podsumowanie

Rozdział 5. Przygotowywanie obrazków i filmów Prosta zmiana wymiarów obrazka za pomocą CSS Stosowanie punktów zmiany obrazków Jak działa znacznik picture? Kontrolowanie nastaw responsywnych obrazków Biblioteka CSS — Focal Point Alternatywne rozwiązanie ze znacznikiem picture Foresight — wybieranie właściwego obrazka dla danej wielkości ekranu Picturefill — rozwiązanie najbardziej przypominające znacznik picture

4

42 43 44 45 50

51 52 53 53 55 58 60 61 62 65 67 69 69

71 72 72 73 74 74 76 77 80 81 82 85 86 87 88

89 90 90 92 92 93 95 95 98

Spis treści

Tworzenie responsywnych obrazków tła za pomocą wtyczek jQuery Anystretch — łatwe rozciąganie tła Backstretch — tworzenie responsywnego pokazu slajdów Obsługa ekranów o wysokiej gęstości Tworzenie responsywnych elementów filmowych FitVids — szybkie rozwiązanie problemów z filmami Ćwiczenie 5. — tworzenie różnych wersji obrazka na główną stronę witryny Podsumowanie

Rozdział 6. Tworzenie responsywnych galerii obrazów Responsywne galerie obrazów Wtyczka Elastislide FlexSlider2 — w pełni responsywna galeria ResponsiveSlides — najlepsza z prostych galerii Swiper — dotykowa galeria obrazków Slicebox — animacja z użyciem obrazów z galerii Wykorzystanie gestów dotykowych Implementowanie zdarzeń dotykowych we wtyczkach JavaScript QuoJS — prosta biblioteka interakcji dotykowych Hammer — mała biblioteka wielodotyku Ćwiczenie 6. — tworzenie galerii obrazków za pomocą wtyczki Swiper Podsumowanie

Rozdział 7. Projektowanie tabel responsywnych Tabele responsywne Rozwijane tabele responsywne Rozszerzenia do wtyczki Stackedtables Jak to zrobić, wykorzystując tabelę z poprzedniego przykładu? Poziome przewijanie Odwrócenie ułożenia nagłówka Odnośnik do pełnej tabeli Ćwiczenie 7. — tworzenie tabeli responsywnej z cenami za pomocą wtyczki FooTable Podsumowanie

Rozdział 8. Implementowanie formularzy responsywnych Typy i atrybuty elementów formularzy Funkcja autouzupełniania z wtyczką Magicsuggest Jak to zaimplementować? Funkcje wyboru daty i czasu Pickadate — responsywne wybieranie daty i czasu Funkcja podpowiedzi Tooltipster — nowoczesna funkcja podpowiedzi Tworzenie formularzy responsywnych za pomocą biblioteki IdealForms Jak to zaimplementować?

98 99 101 103 104 105 106 108

109 109 110 115 119 123 128 129 131 131 132 133 134

135 135 136 139 141 141 143 145 147 149 149

151 152 153 153 155 155 157 157 158 159

5

Responsive Web Design z jQuery

Ćwiczenie 8. — tworzenie formularza kontaktowego za pomocą biblioteki IdealForms Podsumowanie

Rozdział 9. Testowanie responsywnych stron Symulowanie urządzeń za pomocą narzędzi dla przeglądarek Narzędzie sieciowe Viewport Resizer Narzędzie sieciowe Surveyor Narzędzie sieciowe ScreenFly Emulator przeglądarki Opera Mobile Wskazówki dotyczące testowania responsywnych stron WWW Ćwiczenie 9. — przetestujmy naszą stronę na różnych wielkościach ekranu Podsumowanie

Rozdział 10. Prawidłowa obsługa przeglądarek Sprawdzanie funkcji obsługiwanych przez przeglądarkę CanIUse.com Mobile HTML5.org QuirksMode.org Definiowanie rozwiązań zastępczych Narzędzia do wykrywania dostępności funkcji CSS Browser Selector + Modernizr YepNope.js Implementacje wypełniaczy MediaElements.js SVG Respond.js Podsumowanie

Rozdział 11. Przydatne wtyczki responsywne Wtyczki obsługujące strukturę strony Tworzenie prostych struktur responsywnych za pomocą wtyczki Columns Użycie wtyczki Equalize do dopasowania wymiarów elementów Implementowanie strony z kafelkami za pomocą wtyczki Packery Wtyczki tworzące menu nawigacyjne Tworzenie menu bocznego za pomocą wtyczki Sidr EasyResponsiveTabstoAccordion Większa elastyczność menu dzięki wtyczce FlaxNav Różne rozwiązania SVGeezy Prefix free Magnific Popup Riloadr Calendario Podsumowanie

6

162 163

165 165 166 166 168 169 169 170 170

173 174 174 175 175 176 177 177 178 180 181 181 183 184 185

187 187 188 191 192 194 195 197 198 200 201 201 203 204 206 209

Spis treści

Rozdział 12. Poprawianie wydajności stron Wykorzystywanie sieci dostarczania treści Zmniejszenie liczby żądań HTTP Warunkowe ładowanie komponentów Konsolidacja i minimalizacja zasobów (skryptów JavaScript i stylów CSS) Technika CSS Sprite Zmniejszanie wielkości przesyłanych plików Progresywne obrazki JPEG Optymalizacja obrazków Upraszczanie stron za pomocą HTML5 i CSS3 Testowanie wydajności stron WWW PageSpeed Insights YSlow WebPagetest Mobitest Podsumowanie

Skorowidz

211 211 212 212 212 213 214 214 215 216 216 217 218 219 219 220

221

7

O recenzentach Maria Gabriela Didoni ma ponad 12 lat doświadczenia w nauczaniu języka angielskiego. Zdobyła tytuły naukowe w językach portugalskim, angielskim, hiszpańskim oraz w dziedzinie tłumaczeń. Tego wszystkiego uczyła się na uniwersytecie Sagrado Coração University w São Paulo. Maria jest też posiadaczką certyfikatu pedagogicznego wydanego przez ten sam uniwersytet i dalej kształci się w zakresie języka angielskiego w szkole Vancouver English Center w Kanadzie.

Joydip Kanjilal ma tytuł MVP (Microsoft Most Valuable Professional) z ASP.NET, często przemawia na konferencjach. Napisał już kilka książek i artykułów. Ma ponad 16 lat doświadczenia w programowaniu, w tym przynajmniej 10 lat z platformą .NET i powiązanymi z nią technologiami. Kilka razy otrzymał tytuł MSDN Featured Developer of the Fortnight, a strona www. community-credit.com wielokrotnie przyznawała mu tytuł Community Credit Winner. Jest autorem takich książek jak Visual Studio Six in One (Wrox), ASP.NET 4.0 Programming (Mc-Graw Hill), Entity Framework Tutorial (Packt), Pro Sync Framework (Apress), Sams Teach Yourself ASP.NET Ajax in 24 Hours (Sams) i ASP.NET Data Presentation Controls Essentials (Packt). Joydip napisał ponad 250 artykułów opublikowanych w poważanych witrynach, takich jak www. msdn.microsoft.com, www.code-magazine.com, www.asptoday.com, www.devx.com, www.ddj. com, www.aspalliance.com, www.aspnetpro.com, www.sql-server-performance.com i www. sswug.com. Wiele z tych artykułów zostało też opublikowanych na stronie www.asp.net — oficjalnej stronie Microsoftu poświęconej technologii ASP.NET. Ma wieloletnie doświadczenie w projektowaniu rozwiązań z różnych dziedzin. Najlepiej czuje się z takimi językami i technologiami jak C, C++, VC++, Java, C#, Microsoft .NET, Ajax, WCF, REST, SOA, wzorce projektowe, SQL Server, systemy operacyjne i architektura komputerów. Prowadzi swojego bloga pod adresem http://aspadvice.com/blogs/joydip oraz stronę www.joy dipkanjilal.com. Można go też spotkać na Twitterze — https://twitter.com/joydipkanjilal, na Facebooku — https://www.facebook.com/joydipkanjilal i na LinkedIn — http://in.linkedin.com/ in/joydipkanjilal.

Responsive Web Design z jQuery

Alex Libby pracował przede wszystkim w działach obsługi IT. Przez ostatnich 15 lat zajmował się obsługą użytkowników w zróżnicowanych środowiskach. Aktualnie pracuje jako analityk obsługujący średniej wielkości serwer SharePoint dla międzynarodowej firmy dystrybucyjnej w Wielkiej Brytanii. W swojej pracy Alex styka się z różnymi technologiami, ale pierwszą jego miłością jest ruch otwartych źródeł, a w szczególności takie technologie jak jQuery, CSS3 i HTML5. Do dzisiaj Alex napisał już kilka książek dla wydawnictwa Packt, w tym również książkę opisującą technologie języka HTML5, a także książkę poświęconą narzędziom biblioteki jQuery. W wolnym czasie Alex lubi udzielać się w lokalnym teatrze amatorskim, jeździć na rowerze i fotografować.

R. J. Lindelof już od 1998 roku eksperymentuje w dziedzinie rozwoju interfejsów stron internetowych, a samym programowaniem zajmuje się od 1993 roku. Prowadzi i obsługuje setki różnych witryn swojej własnej firmy lub jej klientów. Od momentu powstania pierwszego smartfona był entuzjastycznym liderem tej gałęzi sieci WWW. Specjalizuje się w tworzeniu aplikacji WWW oraz wykorzystywaniu możliwości i skalowalności takich aplikacji w chmurze. Dzisiaj R. J. nadal projektuje responsywne aplikacje WWW i przygotowuje rozwiązania dla swoich klientów. Cały czas uczy się nowych technik, a jednocześnie naucza innych programistów i opiekuje się nimi. Uznaje się za członka ciągle rosnącej społeczności rzemieślników oprogramowania.

Carla Molina ma ogromne doświadczenie w zakresie nauczania, a także sprawdzania i tłumaczenia tekstów na język angielski. Przetłumaczyła i sprawdziła już wiele artykułów naukowych, stron internetowych oraz innych publikacji. Od sześciu lat mieszka w Stanach Zjednoczonych. Uczestniczyła już w różnych kursach języka angielskiego i uczyła tego języka wielu imigrantów w szkole językowej w New Jersey. Ukończyła też koledż w Essex County, na którym otrzymała tytuł nauk humanistycznych. Aktualnie na uniwersytecie w Brazylii rozpoczęła drugi fakultet z języka portugalskiego i angielskiego. W 2012 roku otrzymała propozycję pracy jako nauczyciel języka angielskiego w firmie informatycznej w Campinas w São Paulo. Aktualnie Carla prowadzi własną firmę oferującą naukę języka angielskiego oraz usługi tłumaczeniowe. W wolnym czasie zajmuje się fotografią, uprawia jogę, słucha muzyki i rysuje.

12

O recenzentach

Anirudh Prabhu pracuje jako programista w firmie Xoriant Solutions. Może pochwalić się czterema latami doświadczeń w projektowaniu i tworzeniu stron WWW. W swoich projektach jest odpowiedzialny za przygotowywanie i obsługę skryptów JavaScript. Specjalizuje się w technologiach sieciowych, takich jak HTML, CSS, JavaScript, jQuery i SASS. Na uniwersytecie w Bombaju uzyskał tytuł magistra informatyki. Był już recenzentem technicznym książki Toma Bakera Pro Javascript Performance. W wolnym czasie Anirudh uwielbia czytać, słuchać muzyki oraz fotografować.

Paul Sprangers już od ponad dekady zajmuje się tworzeniem stron WWW. Początkowo tworzył strony w technologii Flash i dopiero uczył się języka HTML, wykorzystując do tego funkcję Zapisz jako HTML w programie Microsoft Word. Ostatecznie wypłynął jednak na szersze wody i teraz specjalizuje się w takich technologiach jak HTML, CSS i jQuery. W 2003 roku razem z kolegami założył w Holandii firmę Interactive Studios. Do dzisiaj zajmuje się ona tworzeniem stron WWW oraz specjalistycznego oprogramowania dla klientów regionalnych i międzynarodowych. Niedawno ich firma uruchomiła duńską stronę z zaproszeniami EasyInvite.nl. Na stronie paulsprangers.com znajdziesz artykuły przygotowane przez Paula, które dotyczą głównie technologii CSS i jQuery oraz firmy Apple.

Taroon Tyagi jest tępym dwunogiem znanym z ostrego języka. Jest racjonalistą z optymistycznymi zapatrywaniami, o wysoce rozwiniętym pociągu do jedzenia, technologii i wiedzy. Taroon jest projektantem interfejsów i interakcji. Lubi wprowadzać zasady prostoty i minimalizmu zen. Uwielbia projektować ciekawe rzeczy, szczególnie wtedy, gdy nikt na to nie patrzy. A gdy chwilowo nie tworzy, można przyłapać go na czytaniu całej sieci WWW i pisaniu w niej, na słuchaniu muzyki i szukaniu inspiracji.

13

Responsive Web Design z jQuery

14

Wstęp Sieć WWW nie jest już ograniczona do komputerów stacjonarnych i laptopów. Technologie sieciowe rozprzestrzeniły się na wiele zróżnicowanych urządzeń, począwszy od ogromnych monitorów stojących na biurkach, poprzez tablety i smartfony, a skończywszy na telewizorach i wyświetlaczach przy drogach. Dodatkowo poszerzył się też zakres funkcji i interfejsów stron oraz zakres metod interakcji, z jakich możemy korzystać. Dzisiaj responsywny projekt stron jest już nie tylko dodatkiem. Oznacza to, że znowu musimy uzupełnić nasze umiejętności o systemy siatkowe, tak aby z ich pomocą przygotować zróżnicowane i bogate witryny. W tej książce dokonamy tego wszystkiego, wykorzystując CSS3 i jQuery, czyli technologie, które pozwalają na doskonałą integrację z różnymi urządzeniami, systemami i przeglądarkami. Inną zaletą wykorzystania biblioteki jQuery jest szybkość tworzenia stron z wykorzystaniem najróżniejszych wtyczek (ang. plugins) przygotowywanych przez całą społeczność. Nie musimy ponownie wymyślać czegoś, co już zostało przygotowane! Co więcej, zawsze mile widziane są poprawki, a Twoje zaangażowanie się w społeczność pomoże w pracy innym.

Co znajdziesz w tej książce? Rozdział 1., „Poznawanie projektów responsywnych”, rozpoczyna się od przedstawienia koncepcji responsywności tworzonej za pomocą generowanych siatek i dopasowywania ich do różnych ekranów. W dalszej części rozdziału wyjaśniać będę koncepcję mobile-first (najpierw urządzenia mobilne). Rozdział 2., „Projektowanie responsywnych układów i siatek”, pokazuje tworzenie elastycznych struktur dla stron WWW, a następnie koncentruje się na wykorzystywaniu systemów responsywnych siatek w celu usprawnienia prac projektowych. W rozdziale 3., „Tworzenie responsywnego menu”, zaprezentuję kilka analiz i przykładowych implementacji poszczególnych wzorców menu nawigacyjnego. Dzięki temu łatwiej będzie Ci wybrać rozwiązanie właściwe dla danej sytuacji.

Responsive Web Design z jQuery

Rozdział 4., „Projektowanie responsywnych tekstów”, poświęcony zostanie konwertowaniu tekstu na jednostki względne i poprawianiu go w celu uzyskania ładnych, responsywnych nagłówków. W rozdziale 5., „Przygotowywanie obrazków i filmów”, objaśnię sposób obsługi obrazków o wysokiej rozdzielczości zapisanych w różnych formatach. Następnie wyjaśnię, dlaczego znaczenie kierunku podczas oglądania stron na smartfonach jest takie ważne. W rozdziale 6., „Tworzenie responsywnych galerii obrazów”, zaprezentuję cztery wtyczki tworzące galerie obrazków wraz z przykładowymi implementacjami oraz przydatnymi bibliotekami do obsługi dotyku uzupełniającymi ten rodzaj interakcji. Rozdział 7., „Projektowanie tabel responsywnych”, poświęcony zostanie różnym metodom tworzenia responsywnych tabel i radzenia sobie z problemami z dopasowaniem ich szerokości do różnych ekranów. W rozdziale 8., „Implementowanie formularzy responsywnych”, zajmiemy się różnymi funkcjami formularzy poprawiającymi doświadczenia użytkownika przy ich wypełnianiu na urządzeniach mobilnych. Rozdział 9., „Testowanie responsywnych stron”, zapozna Cię z metodami przeprowadzania testów responsywności strony na różnych przeglądarkach i platformach w celu uniknięcia nieoczekiwanych zachowań. W rozdziale 10., „Prawidłowa obsługa przeglądarek”, omówię niezwykle ważną tematykę ograniczania (ang. fallback) funkcji stron. Zacznę od sposobów wykrywania funkcji oferowanych (lub nie) przez przeglądarkę i zaprezentuję właściwe metody radzenia sobie z takimi brakami. Rozdział 11., „Przydatne wtyczki responsywne”, poświęcony zostanie wtyczkom ułatwiającym tworzenie struktur strony, menu nawigacyjnego i innych elementów, które uzupełniają rozwiązania zaprezentowane w poprzednich rozdziałach. W rozdziale 12., „Poprawianie wydajności stron”, zaprezentuję najważniejsze metody analizowania wydajności przygotowanej strony z wykorzystaniem specjalnych narzędzi. Podam też kilka wskazówek pozwalających uzyskać najlepsze wyniki.

Czego potrzebujesz? Zdecydowanie łatwiej będzie Ci przyswoić sobie wiedzę zawartą w tej książce, jeżeli będziesz mieć już na oku witrynę, którą można by przekształcić na wersję responsywną. Wszystkie potrzebne działania będzie można wykonywać w ramach ćwiczeń do rozdziałów.

16

Wstęp

Na liście niezbędnego oprogramowania znajdują się serwer HTTP Apache, program graficzny Adobe Photoshop CS5 (lub nowszy) i jakiś edytor tekstu, np. Sublime Text 2. Nie można też zapomnieć o przeglądarce takiej jak Firefox lub Chrome. Oprócz tego na potrzeby testów i przykładów dobrze będzie mieć pod ręką jakieś urządzenie mobilne typu smartfon lub tablet.

Dla kogo jest ta książka? Niniejsza książka przeznaczona jest dla projektantów stron WWW chcących tworzyć strony samodzielnie dopasowujące się do urządzenia, na którym są wyświetlane. Z pewnością przyda się pewna znajomość jQuery, CSS3 i HTML5.

Konwencje W tej książce wykorzystałem wiele stylów, które wyróżniają w tekście różne rodzaje informacji. Oto kilka przykładów takich stylów wraz z objaśnieniami. Znajdujące się w tekście słowa kluczowe, nazwy tabel bazy danych, nazwy folderów i plików oraz ich rozszerzenia, a także przykładowe adresy URL, dane wprowadzane przez użytkownika i identyfikatory Twittera prezentowane będą następująco: „Specyfikacja HTML5 uzupełniona została nowymi elementami strukturalnymi, takimi jak header, nav, article i footer”. Blok kodu prezentowany jest następująco: .orientation_landscape .div-example { border: 2px solid red; }

Jeżeli będę chciał zwrócić Twoją uwagę na konkretną część bloku kodu, to zostanie ona wyróżniona za pomocą pogrubienia:

Nowe pojęcia i ważne słowa zostaną w tekście wyróżnione pogrubieniem. Z kolei słowa pojawiające się na ekranie, w menu lub w okienkach dialogowych wyróżniać będę kursywą, np. „kliknięcie przycisku Dalej przenosi do następnego ekranu”. Ostrzeżenia, wskazówki i ważne uwagi pojawiać się będą w takich ramkach.

17

Responsive Web Design z jQuery

Pobranie przykładów dla książki Przykłady dotyczące książki są dostępne do pobrania pod adresem ftp://ftp.helion.pl/przyklady/ rewejq.zip.

Errata Choć staramy się ze wszystkich sił, aby materiał zawarty w książce był poprawny, mogą pojawić się błędy. Jeśli znajdziesz w książce błąd — dotyczy to zarówno treści, jak i przykładów — będziemy bardzo wdzięczni za jego zgłoszenie. Zgłaszając błąd, pomożesz innym czytelnikom uniknąć frustracji, a my usuniemy błędy w następnym wydaniu. Erratę możesz zgłosić za pomocą formularza dostępnego na stronie http://helion.pl/user/erraty/rewejq. Po sprawdzeniu zgłoszenia i jego akceptacji poprawka pojawi się na stronie internetowej wydawnictwa na liście errat dotyczących książki.

Piractwo Nieprzestrzeganie praw autorskich w internecie to stały problem. Wydawnictwo traktuje ochronę praw autorskich bardzo poważnie. Jeśli natkniesz się na nielegalne kopie wydawanych przez nas książek w dowolnej formie, zgłoś nam adres strony lub jej nazwę, abyśmy mogli przedsięwziąć odpowiednie kroki zapobiegawcze. Zauważone naruszenie praw autorskich możesz zgłosić, używając formularza dostępnego pod adresem http://helion.pl/piracy.phtml. Dziękujemy za pomoc przy ochronie autorów książek oraz pomoc w dostarczaniu treści wysokiej jakości.

18

1 Poznawanie projektów responsywnych Coraz częściej w społeczności twórców stron WWW można usłyszeć słowo „responsywny” (ang. responsive). Bez obaw — razem dojdziemy do prawdziwego znaczenia tego słowa i poznamy wpływ, jaki ma ono na rozwój dzisiejszych witryn. Jednym z czynników (czasami jest on niestety całkowicie ignorowany) wpływających na decyzje podejmowane podczas rozpoczynania projektu jest liczba urządzeń i wielkości ekranów, na których sprawdzona ma być responsywność układu. Jeszcze nie tak dawno pracowaliśmy z odgórnie przyjętymi wymiarami stron, na przykład ze stałą szerokością 1024 pikseli. Działo się tak dlatego, że przyjmowaliśmy tylko jeden sposób oglądania stron WWW — na komputerach stacjonarnych. Z czasem rozwój technologii spowodował powstanie coraz to nowych grup urządzeń zdolnych do wyświetlania stron WWW (takich jak smartfony, tablety, telewizory i wielkie monitory komputerów), a także nowych metod interakcji tych urządzeń ze stronami. Rozwój technologii mobilnych oraz szybka ewolucja metod nawigacji na stronach i przeglądania ich zawartości zmusiły nas do zakwestionowania koncepcji stałych wymiarów stron. Konieczne stało się wymyślenie struktur samodzielnie dopasowujących się do zaistniałej sytuacji. W tym rozdziale:  poznamy koncepcję responsywnego projektu stron WWW,  porównamy ze sobą projekty responsywne, płynne i adaptacyjne,  odczytamy szerokość ekranu za pomocą zapytań o media,  poznamy koncepcję mobile-first (najpierw mobilne),  nauczymy się używać narzędzi siatki,  wykorzystamy koncepcję mobile-first do przygotowania siatki.

Responsive Web Design z jQuery

Koncepcja responsywnego projektu stron Nie mogę rozpocząć tego rozdziału bez cytatu z Ethana Marcotte’a, autora wydanej w 2011 roku książki Responsive Web Design, która stała się podstawą do powstania wielu innych książek i artykułów wykorzystywanych przez społeczność projektantów. Dzięki książce Marcotte’a zrozumiałem, że responsywny projekt strony ma prezentować ją użytkownikowi w sposób dopasowany do wielkości używanego przez niego ekranu. W tym celu muszą być zastosowane trzy podstawowe techniki:  Elastyczny układ wykorzystujący siatkę.  Elastyczne obrazki i materiały wideo.  Odpowiednie wykorzystanie stylów CSS w celu dopasowania zachowania strony (zapytania o media). W dalszej części tego rozdziału podam więcej szczegółów na temat każdej z tych technik. W ramach lepszego zobrazowania całej koncepcji na poniższym rysunku przedstawiam przykład strony wyświetlanej na małym urządzeniu (smartfonie), na urządzeniu średniej wielkości (tablecie) i na wielkim monitorze komputera stacjonarnego.

Poza przygotowaniem zmiennych wymiarów strony i zastosowaniem kilku zapytań o media czeka nas jeszcze kilka innych wyzwań.

W książce będę mówić o wielu różnych wyzwaniach, takich jak:  zastępowanie zdarzeń związanych z myszą zdarzeniami związanymi z dotykiem,  zastosowanie funkcji wypełniania pól formularzy danymi,  nadawanie priorytetów różnym rodzajom treści,  optymalizacja procesu ładowania strony.

20

Rozdział 1. • Poznawanie projektów responsywnych

Porównanie stron responsywnych, płynnych i adaptacyjnych Responsywny projekt strony nieco różni się od projektu płynnego. W projektach płynnych chodzi o automatyczne dopasowanie struktury i wymiarów strony (wykorzystuje się do tego względne jednostki szerokości, takie jak em lub wartości procentowe), ale nie stosuje się w nich układu dopasowującego się do otoczenia. Oprócz tego należałoby zaznaczyć, że responsywne projekty stron nie są rozwiązaniem idealnym, które sprawdza się na wszystkich urządzeniach mobilnych. Jak już pokazałem wcześniej, prawidłowo zrealizowane projekty tego typu pozwalają dopasować stronę do urządzenia użytkownika, ale nie ma gwarancji, że będą one działały prawidłowo na każdym urządzeniu. To właśnie z tego powodu musimy cały czas starać się poprawiać naszą znajomość technologii. Bardzo podoba mi się cytat z Aarona Gustafsona, autora książki Adaptive Web Design: Projekt adaptacyjny polega na takim przygotowaniu interfejsu, żeby dopasowywał się on do możliwości użytkownika (dotyczy to zarówno formy, jak i funkcji). Projekt adaptacyjny wykorzystuje nowe funkcje HTML5 jedynie na nowszych urządzeniach, na przykład w celu przygotowania ładniejszej prezentacji. Na starszych urządzeniach te zaawansowane funkcje są pomijane, ale podstawowe funkcje strony są nadal w pełni realizowane.

Istnieje wiele metod implementowania funkcji adaptacyjnych. Poniżej prezentuję najczęściej stosowane:  Wykorzystanie wtyczek jQuery do zdefiniowania interakcji dotykowych na urządzeniach mobilnych (więcej na ten temat znajdziesz w rozdziale 6.).  Przekształcanie standardowych struktur tabel w tabele responsywne (więcej na ten temat w rozdziale 7.).  Wizualne poprawki elementów formularzy przygotowane specjalnie dla komputerów stacjonarnych (rozdział 8.).  Wykorzystanie funkcji geolokalizacji w celu zaprezentowania użytkownikowi lepiej dopasowanych treści.  Modyfikowanie hierarchii informacji zgodnie z ustalonymi priorytetami treści. Brazylijczyk Diego Eis — propagator najlepszych sposobów projektowania stron WWW oraz twórca strony http://tableless.com.br — w jednym ze swoich artykułów przedstawił doskonałe porównanie projektów responsywnych i nieresponsywnych. Wyobraź sobie, że planujesz wycieczkę w kilka miejsc. Przygotowując się do niej, na pewno naszykujesz sobie wiele wariantów ubrań: kurtki, spodnie, koszule itp., które sprawią, że Twoja torba będzie naprawdę ciężka.

21

Responsive Web Design z jQuery

Musisz przygotować je wszystkie, bo nie wiesz, jakiej pogody się spodziewać. Podobnie przygotowanie strony WWW na wszystkie możliwe ewentualności może czasem negatywnie wpływać na szybkość jej pracy.

Dopasowywanie strony WWW do ekranu za pomocą zapytań o media Luke Wroblewski, autor serii popularnych książek o projektowaniu stron WWW, zaproponował następującą klasyfikację rozmiarów aktualnie używanych urządzeń:  4" – 5" (smartfony)  5" – 6" (hybrydy telefonu i tabletu)  7" – 8" (małe tablety)  9" – 10" (tablety)  11" – 17" (laptopy)  20" – 30" (komputery stacjonarne) Nazwy takie jak „smartfon” można traktować jako ogólny opis klasy urządzeń, ale nie wolno zapominać, że responsywne projekty stron dopasowują się do rozdzielczości ekranu, a nie do rodzaju urządzenia. Musimy zatem sprawdzić, czy dla określonej szerokości ekranu nie należałoby przygotować specjalnego wariantu. Specyfikacja CSS2.1 skupiała się na różnych rodzajach mediów, takich jak wydruk, ekran lub urządzenie przenośne, natomiast w specyfikacji CSS3 nacisk położono na różne funkcje tych mediów. Bardzo często wykorzystywane są zapytania o media, które w większości przeglądarek (Firefox 3.6, Safari 4, Chrome 4, Opera 9.5, iOS Safari 3.2, Opera Mobile 10, Android 2.1, Internet Explorer 9 i wszystkie ich nowsze wersje) obsługiwane są domyślnie. Pojawia się jednak pytanie, co z Internet Explorerem 6 – 8? Na potrzeby tych przeglądarek przygotowano specjalne rozwiązanie o nazwie Respond, które do starszych przeglądarek wprowadza obsługę zapytań o media (więcej na ten temat w rozdziale 10.). Wracając do tematu, podaję poniżej listę funkcji najczęściej wykorzystywanych w ramach zapytań o media:  Szerokość: min-width lub max-width.  Wysokość: min-height lub max-height.  Ułożenie: sprawdza, czy urządzenie jest ustawione pionowo, czy też poziomo.  Rozdzielczość: na przykład min-resolution: 300dpi. Proszę spojrzeć na poniższy kod CSS pozwalający lepiej zrozumieć sposób użycia zapytań o media oraz poznać ich składnię:

22

Rozdział 1. • Poznawanie projektów responsywnych

/* Standardowe ekrany stacjonarne */ @media only screen and (min-width:1025px) { TU WPISZ CSS } /* Tablety */ @media only screen and (min-width:481px) and (max-width:1024px) { TU WPISZ CSS } /* Smartfony */ @media only screen and (max-width:480px) { TU WPISZ CSS }

Poniższy obrazek jest wizualizacją idei zawartej w kodzie. Widać na nim, że zawartość strony może być wyświetlana w różnych układach — zależnie od wielkości ekranu urządzenia.

Pobieranie przykładowego kodu Pliki z przykładowymi wycinkami kodu możesz pobrać z adresu ftp://ftp.helion.pl/przyklady/rewejq.zip.

Najpierw-mobilne Zacznijmy od analizy projektu przedstawionego na poniższym rysunku:

23

Responsive Web Design z jQuery

Takie efekty uzyskuje się najczęściej wtedy, gdy projekt rozpoczyna się od wersji na komputery stacjonarne, gdzie wypełnia się puste przestrzenie banerami lub obrazkami, mniej istotnymi odnośnikami, animacjami i innymi elementami. Zwykle zapomina się o najbardziej oczywistym i podstawowym przepływie treści na stronie, do którego przyzwyczajeni są użytkownicy. Wiem, że czasami te dodatkowe elementy wydają się istotne dla projektu, ale tutaj widać, iż ten projekt wymaga ponownego sprawdzenia architektury informacji. W poprzednim przykładzie po prawej stronie można zobaczyć, jak prosta może być komunikacja z użytkownikiem, a zmniejszenie natłoku elementów graficznych może poprawić czytelność. I to jest właśnie najnowszy trend: upraszczanie. Doskonale podsumowuje to cytat z Billa DeRoucheya: Rozpoczęcie projektowania od wersji na urządzenia mobilne zmusza nas do wydobycia najistotniejszych elementów. Innymi słowy, podejście typu najpierw-mobilne jest dobre dla firm, ponieważ skupienie się na określonym celu przynosi zyski. Treści, które dodajesz do swojej strony, są ważne i wartościowe dla użytkownika. Implementacja nowych funkcji pozwoli odwiedzającym stronę na szybszy i bardziej intuicyjny dostęp do potrzebnych im treści.

W tym przypadku po zastosowaniu podejścia najpierw-mobilne poszczególne łącza dostępne były dopiero na stronach wewnętrznych. Trzeba jednak pamiętać, że zadaniem strony głównej jest skierowanie użytkownika na potrzebną mu stronę, zgodnie ze zdefiniowanym dla witryny przepływem informacji. Takie rozwiązanie jest do zaakceptowania jedynie w przypadku mało istotnych odnośników. Proszę spojrzeć na poniższy rysunek. Można tu zauważyć wiele zmian w organizacji informacji na stronie i skoncentrowanie się na najważniejszych odnośnikach.

24

Rozdział 1. • Poznawanie projektów responsywnych

Używanie siatek Siatka jest wizualną pomocą ułatwiającą zdefiniowanie struktury naszej strony. Przede wszystkim ma ona poprawiać funkcjonalność, zachowanie i priorytet wyświetlanych treści. Jej przygotowanie powinno być pierwszym krokiem w każdym projekcie, ponieważ usprawnia ona analizowanie architektury informacji i ułożenia elementów wizualnych. Najprostszą metodą rozpoczęcia prac nad projektem jest skorzystanie ze strony Wireframe.cc (http://wireframe.cc/). Narzędzie to pozwala na szybkie przygotowanie pierwszego szkicu. Do bardziej szczegółowych prac lepiej nadają się inne narzędzia, takie jak Balsamiq Mockups albo Pencil. Praca z Wireframe.cc jest bardzo prosta. Po wejściu na stronę wykonaj poniższe czynności: 1. W lewym górnym rogu wybierz rodzaj urządzenia. 2. W razie potrzeby kliknij przycisk ustawień (ikona z zębatkami), aby ustalić szerokość kontenera. 3. Teraz możesz rysować, klikając mysz i przeciągając ją po ekranie. 4. Następnie wybierz szablon. 5. Jeżeli wybrany szablon nie będzie właściwy, to kliknij go dwukrotnie i wybierz inny. Po zakończeniu pracy z siatką nie zapomnij kliknąć przycisku Save, który wygeneruje adres URL do wykorzystania w przyszłości.

Ćwiczenie 1. — projektowanie z siatkami w modelu najpierw-mobilne Wejdź na stronę http://mediaqueri.es/ i przejrzyj przedstawione tam przykłady. Prace nad naszym projektem strony zaczniemy od przygotowania siatek dla trzech rodzajów urządzeń: smartfonów, tabletów i komputerów stacjonarnych. Oczywiście będziemy przy tym stosować koncepcję najpierw-mobilne. Jako podstawa dla ćwiczenia 1. zostaną wykorzystane trzy siatki z poniższego rysunku.

25

Responsive Web Design z jQuery

Podsumowanie W tym rozdziale poznaliśmy koncepcję responsywnego projektu stron WWW. Dowiedzieliśmy się też, czym jest koncepcja najpierw-mobilne, jak można wykorzystywać zapytania o media do wprowadzania zmian w implementacji naszej strony. Przygotowaliśmy też siatki ogólnie szkicujące wygląd tej strony. Mamy zatem podstawy do zapoznania się z następnym rozdziałem, w którym napiszemy kod opisujący te właśnie siatki. Teraz zaczniemy rozwijać nasz projekt, ucząc się przy tym używania trzech różnych systemów responsywnych siatek: siatki o płynnej linii bazowej (ang. fluid baseline grid), siatki 1140 (ang. 1140 Grid) i mojej ulubionej siatki Foundation4 (ang. Foundation4 grid). Oprócz tego sprawdzimy, jak można zmienić zachowanie strony za pomocą języka JavaScript. Wszystkie te tematy zostaną objaśnione w następnym rozdziale.

26

2 Projektowanie responsywnych układów i siatek Myśląc o responsywnej sieci WWW, trzeba jej wymiary definiować nie w pikselach, a w proporcjach. Powyższy cytat z Trenta Waltona podsumowuje idee przyświecające temu rozdziałowi, ponieważ podczas prac nad projektami responsywnymi musimy myśleć o płynności i adaptacji, a nie o dopasowywaniu wszystkiego co do piksela. Właśnie dlatego coraz rzadziej spotyka się strony z idealnie wyrównanymi w stosunku do siebie elementami. Istnieją dwie metody unikania takich problemów podczas tworzenia rzeczywiście responsywnych stron:  Stosowanie jak najmniejszej liczby obliczeń podczas przekształcania strony.  Wykorzystywanie systemów responsywnych siatek, w których wybieranych jest kilka kolumn, a kod utrzymuje wszystkie elementy w tych kolumnach za pomocą wymiarów względnych. Rozwój technologii mobilnych i szybka ewolucja technik tworzenia stron WWW spowodowały konieczność ponownego przyjrzenia się koncepcji stałych wymiarów stron i wymyślenia takich struktur, które będą się same dopasowywały do urządzenia i wyświetlały treści odpowiednie do danej sytuacji.

Responsive Web Design z jQuery

W tym rozdziale dowiemy się:  jak zmieniać stronę za pomocą języka JavaScript,  że definiowanie obiektów za pomocą wartości procentowych nadaje całej strukturze niezbędną elastyczność,  jak wykorzystywać właściwości responsywnych systemów siatek,  jak przygotować kod trzech różnych responsywnych siatek,  jak narysować szablony siatek w Photoshopie,  jak jeszcze przed rozpoczęciem prac zdefiniować wartości znaczników meta i viewport,  jak implementować siatki za pomocą narzędzia Foundation4 Grid.

Dostosowywanie strony za pomocą języka JavaScript Jak już mówiłem w poprzednim rozdziale, możemy wykorzystać zapytania o media w celu zidentyfikowania dostępnej aktualnie przestrzeni i wprowadzenia odpowiednich dla niej zmian w układzie strony. Ta właściwość jest bardzo użyteczna, ale nie działa niestety w starszych przeglądarkach, takich jak Internet Explorer 8 i poprzednich. Przyjrzyjmy się teraz dwu rozwiązaniom, które nawet w tych przeglądarkach prawidłowo obsługują zapytania o media. Są to: Adapt.js i Respond.js. Każde z tych rozwiązań poddamy dokładniejszej analizie i sprawdzimy, jakie udostępnia funkcje, oprócz dynamicznego odczytywania wymiarów urządzenia (tak jak robią to zapytania o media). Dowiemy się w ten sposób, czy mogą stanowić alternatywę w projektach, w których wymagana jest obsługa starszych przeglądarek.

Adapt.js Oto najważniejsze cechy biblioteki Adapt.js:  Po odczytaniu wymiarów okna przeglądarki biblioteka ta aktywuje tylko te części stylów CSS, które są rzeczywiście potrzebne.  Plik samej biblioteki jest naprawdę niewielki. Przed zastosowaniem tej biblioteki w projekcie trzeba jeszcze rozważyć następujące problemy:  Analiza wielkości okna przeglądarki wykonywana jest na żądanie, co może powodować powstawanie małych opóźnień podczas wybierania właściwego zestawu stylów CSS.

28

Rozdział 2. • Projektowanie responsywnych układów i siatek

 Skrypt musi zostać umieszczony na samym początku kodu (w znaczniku head), przez co początkowe ładowanie strony może się nieco wydłużyć. Razem z biblioteką Adapt.js dostarczanych jest kilka plików CSS oraz zapytań o media, które mogą zostać wykorzystane przy tworzeniu strony. Na poniższym rysunku przedstawiam listę plików domyślnie dostępnych pod adresem http://adapt.960.gs/.

Jak to zrobić? Po pobraniu niezbędnych plików i umieszczeniu ich w Twoim projekcie dopisz poniższy kod w znaczniku strony. W zaprezentowanym kodzie można zmieniać domyślną ścieżkę do plików CSS, częstotliwość dynamicznej adaptacji (czy ma być jednorazowa, czy przy każdej zmianie wymiarów okna) oraz podać pliki CSS stosowane dla poszczególnych zakresów szerokości:

Tutaj również wykorzystam ten sam kod HTML, który widzieliśmy już w pierwszym przykładzie, ale tuż przed zamykającym znacznikiem należy jeszcze dopisać funkcję wywołującą nasz skrypt:

58

Rozdział 3. • Tworzenie responsywnego menu

Na razie użyjemy stylów menu znanych już z poprzedniego przykładu: nav ul { list-style: none; text-align: center; padding: 0; } .menu-item a { display: block; border-top: 1px solid #CCC; padding: 3%; } .menu-item:last-child a { border-bottom: 1px solid #CCC; }

I to wszystko. Gotowe! Pozostało tylko dopasować kilka pomniejszych opcji, które poprawią naszą podstawową implementację. Nie obawiaj się eksperymentowania z różnymi opcjami. Domyślnie zdefiniowana jest animacja CSS3 trwająca 400 ms, która uruchamiana jest tuż przed automatycznym utworzeniem przycisku menu. Można też zdefiniować coś takiego:

Na poniższym rysunku można zobaczyć działanie wtyczki Responsive Nav. Na smartfonach zmienia ona style menu i prezentuje wygodny przycisk wywołujący to menu.

Wygląd przycisku wywołującego menu oraz pomarańczowe tło samego menu nie są ustawieniami domyślnymi. To tylko sugestia autora wtyczki zaprezentowana na jednej ze stron demonstracyjnych.

59

Responsive Web Design z jQuery

Menu Select Jedną z metod mocnego ograniczenia miejsca zajmowanego przez menu jest zastosowanie takiego rozwiązania, w którym wszystkie pozycje menu umieszczane są w znaczniku . Dzięki temu unika się różnych problemów z ułożeniem elementów i uzyskuje kod działający we wszystkich przeglądarkach. Niestety to rozwiązanie powoduje pewne problemy związane z użytecznością i dostępnością strony oraz z jej pozycjonowaniem w wyszukiwarkach. Na pierwszy rzut oka główny element nawigacyjny w postaci listy rozwijanej nie wygląda prawidłowo, ponieważ nie dopasowuje się do projektu całej strony. Poza tym użytkownik może wcale nie uznać, że lista rozwijana to menu strony.

Wtyczka TinyNav.js do biblioteki jQuery Wtyczka TinyNav.js (http://tinynav.viljamis.com/) doskonale nadaje się do przekształcania menu umieszczonych w elementach

lub
na listy rozwijane, które zajmują mało miejsca na ekranach smartfonów. Jeżeli użytkownik wybierze jedną z pozycji takiej listy, zostanie automatycznie przekierowany na odpowiednią stronę. Dzięki automatycznemu dodaniu właściwości selected="selected" możliwe jest też wybranie z listy aktualnie wyświetlanej strony.

Jak to zrobić? Ponownie wykorzystamy ten sam kod HTML, którego użyliśmy w pierwszym przykładzie. Po pobraniu wtyczki TinyNav należy dopisać poniższy kod do znacznika strony:

Poniższy kod należy również dopisać tuż przed zamykającym znacznikiem :

W poniższym kodzie CSS ukrywany jest nowy sposób nawigacji i ustalane są domyślne style menu wyświetlanego na tabletach i komputerach stacjonarnych. Oprócz tego definiujemy tu, że zmniejszone menu pojawiać się ma tylko na ekranach o szerokości mniejszej niż 767 pikseli (smartfony): /* style dla komputerów stacjonarnych */ .tinynav { display: none; } #site-nav { float: right;

60

Rozdział 3. • Tworzenie responsywnego menu

width: 80%; padding: 0; } #site-nav li { display: inline-block; margin: 0 2%; padding: 0; width: 15%; text-align: center; line-height: 1.5; } /* style dla urządzeń mobilnych */ @media screen and (max-width: 767px) { .tinynav { display: block; } #site-nav { display: none; } }

Wtyczka TinyNav udostępnia też kilka dodatkowych opcji, takich jak: możliwość wstawienia etykiety przed elementem

, automatyczne przypisanie pozycji odpowiadającej aktualnie oglądanej stronie atrybutu active (wspominałem już o tym wcześniej) albo zdefiniowanie początkowej wartości elementu select w przypadku, gdy nie wybrano wcześniej żadnej innej opcji. Poniżej przedstawiam sposób definiowania tych trzech opcji: $('#site-nav ul').tinyNav({ active: 'selected', label: 'Menu', header: 'Nawigacja' });

Ten rodzaj nawigacji na stronie można zaimplementować bez większych nakładów pracy. Na poniższym rysunku (przedstawionym na następnej stronie) widać dokładnie, że wtyczka wpływa na wygląd strony tylko wtedy, gdy wyświetlana jest ona na małych urządzeniach:

Footer-only Nawigacja typu footer-only przypomina rozwiązania typu footer anchor, ale różni się od nich brakiem odnośnika w nagłówku strony. Ten rodzaj menu należy stosować bardzo ostrożnie, ponieważ wielu użytkowników może nie znaleźć menu umieszczonego na samym końcu strony. Poza tym przewijanie całej strony po to, żeby dostać się do menu, może być trochę niewygodne. Ten rodzaj nawigacji nadaje się do stron z niewielką ilością treści i takich, na których przewijanie nie wymaga od użytkownika szczególnego wysiłku.

61

Responsive Web Design z jQuery

Jak to zrobić? Po prostu przenieś menu na sam dół dokumentu. Pamiętaj, że takie zmiany w kodzie powodują natychmiastową zmianę pozycji menu na wszystkich urządzeniach. Przed zastosowaniem tej techniki upewnij się, że Twoja strona nie jest zbyt długa, ponieważ większość użytkowników oczekuje, że menu strony będzie się znajdowało na jej górze.

Multi toggle Wzorzec Multi toggle bardzo przypomina menu typu Toggle, ponieważ tutaj również menu wysuwa się spod nagłówka strony. To rozwiązanie zostało jednak przygotowane do tworzenia złożonych systemów menu, w których istnieje przynajmniej jeden poziom zagnieżdżenia. Gdy użytkownik kliknie przycisk wywołujący menu, zostanie ono wysunięte ponad treść strony. Jeżeli teraz kliknie on jedną z głównych kategorii, to na ekranie pojawią się przypisane do niego elementy podmenu.

Jak to zrobić? Poniżej prezentuję kod HTML, którego użyjemy w tym przykładzie. W roli kontrolera stanu menu (otwarte lub zamknięte) wykorzystamy tu element , który nie będzie widoczny dla użytkownika. Później podam więcej szczegółów na temat działania tej techniki.

LOGO

☰ Menu

62

Rozdział 3. • Tworzenie responsywnego menu



Następny krok polega na dopasowaniu stylu menu. Wymaga to sporej ilości kodu, dlatego gorąco zachęcam do pobrania wszystkich przykładów dołączanych do tej książki. Wyjaśnię tu dwa miejsca w kodzie, które mogą być nie do końca zrozumiałe. Na początku pliku CSS zapisane są właściwości o wartościach "\0025Bc" (strzałka w dół) i "\0025C0" (strzałka powrotu), które powinny zostać narysowane jako strzałki. Na stronie powinno znajdować się również pole wyboru #toggle, ale poza jej widocznym obszarem: .after:after { content: " \0025Bc"; font-size: 0.5em; } .before:before { content: " \0025C0"; font-size: 0.5em; } .link-to-menu { display: block; position: absolute; right: 0; top: 0; z-index: 100; } #toggle { left: -9999px; position: absolute; top: -9999px; } #site-nav ul { left: 0;

63

Responsive Web Design z jQuery

list-style: none; position: absolute; right: 0; top: 4em; z-index: 10; } #site-nav a { display: block; height: 0; line-height: 0; overflow: hidden; text-decoration: none; transition: all 0.5s ease 0s; }

Oderwijmy się na chwilę od kodu CSS. Chciałbym teraz wyjaśnić pokrótce działanie pola wyboru #toggle dołączonego do podmenu. Gdy kliknięty zostanie odnośnik link-to-menu, to znacznik nadaje mu wysokość 3em. Poza tym musimy jeszcze przygotować styl powiększający wysokość odnośników, ponieważ biblioteka jQuery dołączy klasę open do elementów

zawierających w sobie elementy klasy submenu: #toggle:checked ~ nav #site-nav a { line-height: 3em; height: 3em; border-bottom: 1px solid #999; position: relative; z-index: 1; } #toggle:checked ~ nav #site-nav .submenu li, #toggle:checked ~ nav #site-nav .submenu a { height: 0; line-height: 0; transition: 0.5s; } #toggle:checked ~ nav #site-nav .submenu a { padding-left: 7%; background: #555; } #toggle:checked ~ nav #site-nav .submenu.open li, #toggle:checked ~ nav #site-nav .submenu.open a { height: 3em; line-height: 3em; }

Nie możemy też zapomnieć o konieczności dołączenia biblioteki jQuery w znaczniku strony:

Prawie na samym końcu dokumentu (tuż przed zamykającym znacznikiem ) trzeba jeszcze uruchomić poniższy skrypt, który zajmie się wstawieniem klasy open do samych podmenu:

Na poniższym rysunku można zobaczyć oczekiwany efekt naszych prac:

Toggle and slide Ten rodzaj menu podobny jest do menu Multi Toggle, jednak w tym przypadku podmenu nie jest przełączane, ale wysuwa się ono z lewej strony po kliknięciu odnośnika głównego. Dostępny jest też odnośnik powrotny ułatwiający użytkownikowi poruszanie się po menu. Ten efekt bardzo mi się podoba i na pewno mile zaskoczy użytkowników strony.

Jak to zrobić? Wykorzystamy ten sam kod HTML, którego użyliśmy już w przykładzie z menu typu Toggle (włącznie z wywołaniem biblioteki jQuery w znaczniku ). W kodzie CSS również wykorzystamy kod, którego używaliśmy już w przykładzie z menu typu Multi Toggle, ale na końcu pliku dopiszemy jeszcze poniższe style. Podstawową różnicą między menu typu Slide i Multi Toggle jest nowy znak strzałki umieszczany w podmenu (strzałka w prawo). Podmenu jest wyświetlane, ale poza obszarem widocznym: .after:after { content: " \0025B6"; font-size: 0.5em; }

65

Responsive Web Design z jQuery

.submenu { position: absolute; left: -100%; top: 0; height: 100%; overflow: hidden; width: 100%; transition: all 0.75s ease 0s; z-index: 10; } .submenu.open { left: 0; }

Poniższy rysunek przedstawia nasze menu tuż przed kliknięciem (i tuż po nim) pozycji Projekty (w tym przypadku implementacja dotyczy wyłącznie smartfonów):

Przy samym końcu struktury DOM (tuż przed zamykającym znacznikiem ) uruchomimy niemal taki sam skrypt jak w poprzednim przykładzie, ale uzupełnimy go o jedną dodatkową funkcję. Poniższy kod jest taki sam jak ten użyty w poprzednim przykładzie, w którym obsługiwał on kontrolkę wyświetlającą menu.

Menu off-canvas Jeżeli ktoś używał już aplikacji Facebooka na iPhonie albo dowolnej innej aplikacji wykorzystującej menu typu off-canvas, to z pewnością powie, że przypomina ono menu znane z typowych aplikacji komputerowych. Po kliknięciu przycisku wywołującego menu jego panel rozwija się, zasłaniając część użytecznej przestrzeni ekranu.

Wtyczka jPanelMenu do biblioteki jQuery Wtyczka jPanelMenu (http://jpanelmenu.com/) jest prostym skryptem JavaScript, który ukrywa wcześniej przygotowane menu i pokazuje je dopiero po kliknięciu specjalnego przycisku w nagłówku strony. Takie menu można uzupełnić kilkoma ciekawymi opcjami, takimi jak animacje z określonym czasem trwania i dodatkowymi efektami, skróty klawiszowe i kierunek, z którego ma się wysuwać menu. Za chwilę przedstawię przykłady prezentujące wszystkie te funkcje. Poniższy rysunek (przedstawiony na następnej stronie) jest tylko sugestią stylu menu zaimplementowanego na potrzeby smartfonów. Oczywiście dla tabletów i komputerów stacjonarnych zachowamy oryginalny wygląd menu:

Jak to zrobić? Zaczniemy od dołączenia stylów CSS w nagłówku dokumentu (znacznik ):

67

Responsive Web Design z jQuery

Następnie użyjemy niemal niezmienionego kodu HTML znanego z przykładu menu typu footer only, w którym całą zawartość menu przenieśliśmy na sam koniec dokumentu (poniżej stopki) i przygotowaliśmy w nagłówku strony odnośnik do tego menu.

☰ Menu

Po pobraniu wtyczki jPanelMenu dodaj poniższy kod wewnątrz znacznika :

W kolejnym kroku dopisz poniższy kod tuż przed zamykającym znacznikiem . Zauważ, że nasza wtyczka udostępnia wiele ciekawych opcji, takich jak definicja efektu przy pokazywaniu menu, kierunek i czas trwania tego efektu, skrót klawiszowy oraz kilka wywołań zwrotnych:

W tym menu nie ma obowiązku dodawania specjalnego kodu CSS, choć dobrze jest przygotować kilka reguł, żeby nasze menu ładnie się prezentowało.

Ćwiczenie 3. — dopasowywanie menu z wykorzystaniem rozwiązania Toggle Menu Po zapoznaniu się z ośmioma rodzajami responsywnych menu i sposobami ich implementowania możemy podjąć decyzję, żeby wyposażyć naszą przykładową stronę w menu typu Toggle. Jeżeli jesteś w trakcie tworzenia własnej witryny, to dobrze przeanalizuj wszystkie dostępne warianty, żeby wybrać rodzaj menu najlepiej dopasowany do Twojego projektu.

Podsumowanie W tym rozdziale dowiedzieliśmy się, w jakich sytuacjach lepiej sprawdza się menu wyświetlane na górze strony, a w jakich lepsze będzie to wyświetlane po lewej stronie. Poznaliśmy też osiem różnych rodzajów nawigacji tworzonych za pomocą stylów CSS i skryptów JavaScript. W następnym rozdziale zajmiemy się sposobami tworzenia responsywnego tekstu i responsywnej wielkości czcionki. Oprócz tego za pomocą CSS3 oraz trzech świetnych wtyczek języka JavaScript dopasujemy używaną na stronie rodzinę czcionek, dzięki czemu uzyskamy większe możliwości tworzenia nagłówków.

69

Responsive Web Design z jQuery

70

4 Projektowanie responsywnych tekstów Gdy mówimy o responsywnych nagłówkach, tak naprawdę mówimy o elastycznych tekstach. A zatem sztywne wielkości czcionek również powinny zostać zastąpione dynamicznymi. Różnica między takimi implementacjami wykonywanymi przed kilkoma laty a dzisiejszymi rozwiązaniami polega na tym, że dawniej rozważaliśmy tylko dwa sposoby prezentowania treści: na ekranie i na papierze. I choć czasy się zmieniają, to problemy z odpowiednim dopasowaniem tekstu pozostają nadal takie same. Powszechnie uważa się, że typografia jest podstawą naszych projektów i osią wszystkich stylów CSS, ponieważ głównym zadaniem stron internetowych jest przekazywanie użytkownikowi informacji będącej odpowiedzią na jego pytania. Dobrze jest zatem zrezygnować z tworzenia dziesięciu rodzajów nagłówków, a to oznacza, że trzeba dobrze zaplanować tych kilka, które znajdą się na naszej stronie. W tym rozdziale nauczymy się:  konwertować tekst na jednostki względne,  zmieniać odstępy w akapitach i elementach blokowych,  modyfikować rodzinę czcionek w celu uzyskania ładnych i responsywnych nagłówków,  automatycznie zarządzać rozmiarami czcionek.

Responsive Web Design z jQuery

Konwertowanie tekstu na jednostki względne Jedną z największych zalet użycia jednostek względnych jest efekt kaskadowy wywoływany w momencie, gdy użytkownik zmienia podstawową wielkość czcionki w przeglądarce. W takiej sytuacji wszystkie rozmiary czcionek zmieniają się proporcjonalnie. Dzisiaj niemal wszystkie przeglądarki mają domyślną wielkość elementu bazowego ustaloną na 16 pikseli. Wartość ta może zostać jednak zmieniona w ustawieniach przeglądarki, co pozwala użytkownikowi powiększyć tekst, żeby był łatwiejszy do odczytania. Zanim zaczniemy mówić o najczęściej stosowanych jednostkach miary, muszę opowiedzieć o dwóch szczególnych jednostkach, których popularność cały czas szybko wzrasta. Chodzi mi o jednostki vw (viewport width — szerokość widoku) i vh (viewport height — wysokość widoku). Jednostki odnoszące się do widoku strony nie są obsługiwane we wszystkich przeglądarkach, dlatego dobrze jest zajrzeć na strony http://www.w3.org/TR/css3-values/ lub http://caniuse.com/ viewport-units. Warto przyjrzeć się tym jednostkom, ponieważ ułatwiają one skalowanie wielkości czcionek w zależności od wielkości okna przeglądarki. Najpopularniejsze jednostki stosowane na stronach internetowych przedstawiać będę w kolejnych punktach.

Jednostka względna — procentowa Wartości procentowe wyrażane są względem elementu nadrzędnego, dlatego najczęściej stosuje się je do definiowania struktury strony, tak jak zrobiliśmy to w rozdziale 2. Nie ma jednak żadnych przeciwwskazań, żeby jednostki tej użyć też do zdefiniowania wielkości czcionki. Proszę przyjrzeć się poniższemu przykładowi: body { font-size: 100%; /* bazowe 16px /* } p { font-size: 87.5%; /* 14px ÷ 16 */ }

Część twórców stron definiuje wielkość czcionki w elemencie body na 62,5 procenta (10 pikseli), co ułatwia późniejsze obliczenia. W takiej sytuacji przypisanie elementom strony wielkości czcionki o wartości 150% spowoduje, że będą one miały wielkość 15 pikseli, natomiast wartość 190% odpowiadać będzie wielkości 19 pikseli itd. Metoda ta pozwala na łatwiejsze określenie wielkości czcionek na stronie, działa ona jednak tylko na pierwszym poziomie kaskady określającej wielkości czcionek.

72

Rozdział 4. • Projektowanie responsywnych tekstów

Jednostka względna — em Jednostka em powiązana jest z wyliczoną wielkością czcionki elementu nadrzędnego. W poniższym przykładzie chcemy zdefiniować w elemencie potomnym czcionkę o wielkości 20 pikseli: body { font-size: 1em; /* bazowe 16px /* } p { font-size: 1.25em; /* 20px ÷ 16 */ }

W sieci dostępna jest przydatna strona http://pxtoem.com, która ułatwia wykonywanie takich obliczeń. Poniższy rysunek wyjaśnia, jak używać tego narzędzia. W lewej kolumnie należy podać wielkość bazową czcionki, wówczas w środkowej kolumnie ukażą się wyniki obliczeń. W prawej kolumnie natomiast można dokonywać podobnych obliczeń dla wielkości czcionek spoza zakresu od 6 do 24 pikseli.

Trzeba też pamiętać, żeby podczas wykonywania konwersji jednostek obok ostatecznie obliczonej wartości zawsze dopisywać wartość w pikselach (mówiłem już o tym w rozdziale 2.). Mówię o tym jeszcze raz, ponieważ obsługa wielkości czcionek na stronie związana jest ze stosowaniem wielu kaskadowych stylów, czego przykładem może być poniższy rysunek:

73

Responsive Web Design z jQuery

Jednostka względna — rem Jednostka rem pochodzi ze specyfikacji CSS3 i jest skrótem od root em (bazowe em), czyli jest jednostką określaną względem głównego elementu dokumentu HTML. Oznacza to, że zmiana wielkości czcionki w elemencie spowoduje przeskalowanie czcionek względem elementu bazowego strony, a nie elementów nadrzędnych. To jedyna różnica w stosunku do jednostek em. Przyjrzyjmy się teraz, jak można wielkości z poprzednich przykładów przekształcić na jednostki rem: body { font-size: 1em; /* bazowe 16px /* } section, section li strong { font-size: 14px; /* definicja dla IE8 i wcześniejszych */ font-size: 0.875rem; /* 14px ÷ 16 */ } section li { font-size: 12px; /* definicja dla IE8 i wcześniejszych */ font-size: 0.750rem; /* 12px ÷ 16 */ }

Taki sposób działania może zaoszczędzić nam sporo pracy i ułatwić analizę kodu, jeżeli strona wymagać będzie większej ilości pustego miejsca (w zależności od gęstości prezentowanych treści). Spróbuj zaczynać projekty od przygotowania danych typografii wszystkich głównych elementów struktury, zanim jeszcze zostaną one zaprojektowane. Można to zrobić, tworząc dokument szablonu, w którym zapisane są wszystkie najważniejsze elementy HTML wraz z odpowiednim arkuszem stylów przygotowanym na potrzeby projektu witryny.

Poprawianie wymiarowania elementów za pomocą właściwości box-sizing Na poniższym rysunku zilustrowany został model znany pod nazwą box-model (model polowy), w którym określenie całkowitej szerokości elementu wymaga obliczeń uwzględniających jego obramowanie i dopełnienie. Model ten powoli przestaje być stosowany:

74

Rozdział 4. • Projektowanie responsywnych tekstów

W poniższym przykładzie przedstawiam sposób użycia modelu polowego do podzielenia dostępnej przestrzeni między dwa elementy div, z których każdy ma dopełnienie wielkości 5% oraz obramowanie o grubości 2 pikseli. W efekcie obliczenie szerokości tych elementów wcale nie jest proste: div.splitted { padding: 0 5%; border: 2px solid black; float: left; width: ?; /* wartość rzeczywista= 50% - 10% - 4px */ }

W specyfikacji CSS3 znalazła się właściwość box-sizing, której można przypisać wartość border-box, co oznacza, że wartość szerokości (właściwość width) obejmuje już w sobie wielkości dopełnienia i obramowania. Wprawdzie właściwość ta dobrze funkcjonuje już w ósmej wersji Internet Explorera, nie jest jednak obsługiwana w jego wcześniejszych wersjach. Jeżeli musisz zapewnić stronie obsługę tych dwóch przeglądarek, to możesz wykorzystać dodatek, który załata te braki. Jest on dostępny pod adresem https://github.com/Schepp/box-sizing-polyfill. Zobaczmy teraz, jak ta zmiana wpływa na obliczenia wykonywane w naszym przykładzie: div.splitted { padding: 0 5%; width: 50%; border: 2px solid black; float: left; }

Jak widać, teraz nie ma już problemów z obliczeniem szerokości elementu i przeanalizowaniem wielkości pustych przestrzeni oddzielających elementy na ekranie. Dodatkowo wiele osób definiuje wielkość dopełnienia za pomocą jednostek em, ponieważ pozwala to uniknąć części obliczeń związanych z proporcjami. div.splitted { padding: 0 0.5em; width: 50%;

75

Responsive Web Design z jQuery

border: 2px solid black; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Aktualnie część przeglądarek nadal wymaga stosowania podanych wyżej przedrostków, dlatego nie można ich pominąć. Poza tym w podobny sposób można definiować dopełnienie elementów w pionie, na przykład tak: div.splitted { padding-top: 1em; }

Dopasowywanie rodziny czcionek do potrzeb nagłówków responsywnych Odpowiednie czcionki pozwalają na przygotowanie dla użytkowników naprawdę fascynujących stron oraz zachowanie spójnego stylu całej witryny bez konieczności przygotowywania setek obrazków na potrzeby nagłówków. Czcionki trzeba wybierać naprawdę ostrożnie, ponieważ ich kształt wpływa na odbiór treści przez użytkowników. Źle dobrana czcionka może spowodować, że po przejrzeniu jednej lub dwóch stron użytkownik opuści witrynę.

Reguła CSS @font-face pozwala projektantom na wykorzystanie niestandardowych czcionek, które nie są zainstalowane na komputerach użytkowników, dzięki czemu umożliwia szybkie dopasowanie wyglądu nagłówków. Wielką zaletą zastosowania reguły @font-face jest to, że nie wymaga ona stosowania obrazków w nagłówkach, a jednocześnie zachowuje elastyczność niezbędną na stronach responsywnych. Reguła @font-face obsługiwana jest przez IE8 oraz wersje wcześniejsze, pod warunkiem że wykorzystywane są czcionki typu EOT. Poza tym Safari iOS 4.1 oraz wersje wcześniejsze obsługują wyłącznie czcionki SVG. W dalszej części tego rozdziału opowiem, jak można rozszerzyć obsługę czcionek w tych przeglądarkach.

Na stronie http://www.google.com/fonts można przejrzeć ogromną bibliotekę czcionek wraz z informacją o ich autorach. Zalecam przeczytać informacje licencyjne każdej czcionki przed jej użyciem, aby zyskać pewność, że można użyć jej komercyjnie.

76

Rozdział 4. • Projektowanie responsywnych tekstów

Podstawowym zadaniem użycia właściwości @font-face jest zdefiniowanie reguły stylu. Za pomocą właściwości font-family definiowana jest nazwa czcionki, której można użyć w dalszej części dokumentu, natomiast właściwość src określa miejsce, w którym czcionka ta jest przechowywana. Z kolei właściwość font-weight (nie trzeba jej używać w przypadku normalnych czcionek, ale jest niezbędna, jeżeli chcemy użyć czcionek pogrubionych lub cienkich) definiuje wagę czcionki. Przykład takiej reguły podaję poniżej: @font-face { font-family: "Kite One"; src: url(/fonts/KiteOne-Regular.ttf); }

Teraz można już użyć nowej czcionki, wykorzystując standardową składnię: p { }

font-family: "Kite One", Helvetica, Arial, sans-serif;

Istnieją jednak lepsze metody. Przyjrzyjmy się teraz sposobom użycia takich narzędzi, jak Font Squirrel, Fit Text, Slabtext, Lettering i Responsive Measure.

Narzędzie Font Squirrel do generowania czcionek Font Squirrel to świetne narzędzie pozwalające na przekształcenie dowolnej czcionki dla komputera stacjonarnego na wersję sprawdzającą się w sieci. Oprócz tego udostępniana jest usługa generowania prawidłowego kodu oraz plików na podstawie danych czcionki. I to wszystko całkowicie za darmo1! Na stronie http://www.fontsquirrel.com/tools/webfont-generator znajdziemy dodatkowe informacje o głównych funkcjach tego narzędzia, takie jak:  Font Squirrel nie wymaga dogłębnej znajomości języka CSS,  w trybie eksperta udostępnia dodatkowe opcje poprawiania szybkości ładowania strony,  wygenerowane pliki i kod działają również w starszych przeglądarkach,  wszystkie udostępniane zasoby są całkowicie darmowe.

Jak to zrobić? Na początek trzeba otworzyć stronę Font Squirrel i kliknąć przycisk Add fonts, a następnie wybrać czcionkę, którą chcemy użyć na własnej stronie i dla której mamy odpowiednią licencję. W kolejnym kroku dobrze jest na początek zaznaczyć opcję Basic (wersja prosta) i pobrać wygenerowane pliki. 1

Darmowa jest jedynie usługa. Pamiętaj, że każda czcionka ma swoją licencję, dlatego tak ważne jest jej przeczytanie przed zastosowaniem czcionki na swojej stronie.

77

Responsive Web Design z jQuery

Po rozpakowaniu zawartości pobranego pliku trzeba na początku pliku CSS dopisać poniższy kod, który pozwoli nam skorzystać z plików czcionek i użyć ich zależnie od sytuacji: @font-face{ font-family: 'kite_oneregular'; src: url('kiteone-regular-webfont.eot'); src: url('kiteone-regular-webfont.eot?#iefix') format('embedded-opentype'), url('kiteone-regular-webfont.woff') format('woff'), url('kiteone-regular-webfont.ttf') format('truetype'), url('kiteone-regular-webfont.svg#kite_oneregular) format('svg'); font-weight: normal; font-style: normal; }

Za każdym razem gdy będziemy chcieli wykorzystać nową czcionkę, wystarczy tylko podać jej nazwę zdefiniowaną w regule @font-face, na przykład tak jak poniżej: p { }

font-family: 'kite_oneregular', Helvetica, Arial, sans-serif;

A wracając do strony pobierania Font Squirrel, mamy też możliwość obrania tylko podzbioru znaków danej czcionki, co bardzo zmniejsza wielkość pliku. W tym celu należy zaznaczyć opcje Optimal lub Expert. W ramach testów trzy razy przygotowaliśmy tę samą czcionkę Kite One, za każdym razem wybierając inną opcję (Basic, Optimal i Expert). Wyniki tego eksperymentu pokazują, że wielkość pliku jest wprost proporcjonalna do liczby znaków zapisanych w pliku czcionki oraz liczby zawartych w nim dodatkowych zasobów. Ustawienie Basic nie zmienia liczby znaków w czcionce, ale już opcja Optimal ogranicza liczbę znaków do mniej więcej 256. W szczególnych przypadkach, w których czcionka Kite One miałaby mniej znaków, nie są wprowadzane żadne optymalizacje. Największy potencjał do zmniejszania plików uzyskujemy po wybraniu trybu Expert, zaznaczeniu opcji Basic Latin i ręcznemu podawaniu poszczególnych znaków. Spróbujmy teraz wygenerować czcionkę, wykorzystując tryb Expert narzędzia Font Squirrel: 1. Kliknij przycisk Add Fonts i wybierz plik czcionki, z którym chcesz pracować. 2. W sekcji Rendering usuń zaznaczenie z opcji Fix Vertical Metrics. 3. W sekcji Font Formats zaznacz opcję SVG, tak jak pokazano na poniższym rysunku. 4. W sekcji Subsetting wybierz pozycję Custom subsetting. 5. W sekcji Language zaznacz opcję Polish. 6. W sekcji Unicode Tables zaznacz opcję Basic Latin. W tym miejscu zakładam, że w tekstach używane będą wyłącznie znaki alfabetu polskiego. Jeżeli używasz innych języków, wybierz potrzebne w nich znaki.

78

Rozdział 4. • Projektowanie responsywnych tekstów

Czasami w tekstach bardzo ważne są takie znaki, jak cudzysłowy lub apostrofy, dlatego dobrze jest skopiować je i wkleić w polu Single Characters, tak jak na poniższym rysunku:

7. Skontroluj obraz wygenerowany w sekcji Subset Preview i w razie potrzeby wprowadź poprawki. 8. Po potwierdzeniu, że przesyłasz czcionkę, do której masz prawa, kliknij po prostu przycisk DOWNLOAD YOUR KIT.

79

Responsive Web Design z jQuery

Wtyczka FitText FitText jest popularną wtyczką do biblioteki jQuery, która elastycznie ustala wielkość czcionek. Jest narzędziem o ciągle rosnącej popularności, ponieważ bardzo ułatwia tworzenie elastycznych czcionek. Jego działanie polega na takim skalowaniu tekstu nagłówka, żeby wypełnił on całą szerokość elementu nadrzędnego. Jeżeli chcesz zobaczyć przykład działania tej wtyczki, żeby się przekonać, na jak wielką elastyczność ona pozwala, to zajrzyj na stronę samej wtyczki pod adresem http://fittextjs.com.

Jak to zrobić? Po pobraniu plików wtyczki z serwerów Github (http://github.com/davatron5000/FitText.js) do swojej strony HTML wstaw poniższy kod:

Nagłówek używający FitText

Teraz na samym końcu kodu HTML (przed zamykającym znacznikiem ) trzeba jeszcze dołączyć bibliotekę jQuery i wtyczkę Fittext. Na koniec należy jeszcze uruchomić kod wtyczki obsługującej nasz nagłówek:

Domyślnie wtyczka ustali wielkość czcionki na 1/10 szerokości elementu. Istnieją dwie metody zmiany tego ustawienia: skonfigurowanie mechanizmu kompresji lub zdefiniowanie minimalnego i maksymalnego rozmiaru. Jeżeli skorzystamy z kompresora, to musimy podać wartość kompresji. Na przykład wartość 1.2 spowoduje delikatniejsze zmiany wielkości tekstu, natomiast wartość 0.8 sprawi, że zmiany wielkości tekstu będą bardziej skokowe:

Możemy też zmodyfikować ten domyślny mechanizm kontroli wielkości tekstu, definiując jego minimalną i maksymalną wielkość. W ten sposób zyskujemy większą kontrolę niezbędną w sytuacjach, w których chcemy zachować hierarchię nagłówków, na przykład tak jak poniżej:

80

Rozdział 4. • Projektowanie responsywnych tekstów

Wtyczka SlabText SlabText jest wtyczką umożliwiającą tworzenie ślicznych i całkowicie responsywnych nagłówków. Dzięki niej każdy może bardzo łatwo przygotować robiące wrażenie nagłówki. Skrypt dzieli każdy nagłówek na wiersze, a następnie każdy z nich powiększa tak, żeby wypełnił przestrzeń dostępną w poziomie. Idealna liczba znaków w wierszu wyliczana jest automatycznie przez podzielenie dostępnej szerokości przez wielkość czcionki w pikselach. Poniżej wymieniam najważniejsze funkcje tej wtyczki:  Jest w pełni responsywna i przygotowana do współpracy z urządzeniami mobilnymi.  Opcja Color Control wybiera dla nagłówka kolor tła, tekstu oraz cienia.  Opcje z grupy Extra Options pozwalają na ustalenie dopełnienia i zdefiniowanie długości cienia. Z kolei opcja Image Overlay umożliwia załadowanie obrazka i umieszczenie go w tle nagłówka za pomocą właściwości CSS3.  Opcja Font Control pozwala wybrać czcionkę i ustalić wszystkie jej parametry.  Opcja Clonable tworzy dowolną liczbę klonów danej sekcji tekstu.  Wtyczka pozwala na ręczne złamanie wiersza.  Zminimalizowana wersja wtyczki zajmuje tylko 4 KB.  Nagłówki zajmujące sporo przestrzeni w poziomie lepiej zapełniają okno dowolnej przeglądarki.  Trzeba się upewnić, że skrypt zostanie wywołany dopiero po załadowaniu wszystkich czcionek z reguły @font-face. Kod wtyczki można pobrać pod adresem http://github.com/freqDec/slabText/ i od razu rozpocząć eksperymentowanie.

Jak to zrobić? Na początek trzeba dopisać do nagłówka header atrybut id, który później zostanie wykorzystany w skrypcie, a następnie tuż przed zamykającym znacznikiem dodać znacznik

81

Responsive Web Design z jQuery

Można też wyłączyć automatyczne łamanie tekstu i samodzielnie wprowadzić miejsca podziału, zmieniając tym samym przekaz dla naszych użytkowników:

Taki kod trzeba jeszcze połączyć z poniższym skryptem:

Na poniższym rysunku zobaczyć można obie wersje nagłówka. Pierwotną po lewej, a po prawej wersję po modyfikacjach:

Dokładniejszy opis wszystkich opcji można znaleźć pod adresem http://freqdec.github.io/ slabText/.

Lettering Wtyczka Lettering pozwala na uzyskanie pełnej kontroli nad każdą literą nagłówka. Opakowuje ona poszczególne znaki, słowa i wiersze, nadając im klasy i tworząc tym samym całkowicie zarządzany kod, który umożliwia szybki dostęp do każdego elementu nagłówka z poziomu pliku CSS. Jest to wtyczka do biblioteki jQuery, co bardzo ułatwia dopasowywanie odstępów między literami, nadawanie im specjalnego wyglądu itp. Istnieją dwie niesamowicie doskonale zaprojektowane strony, w których wiele pracy włożono w każdą literę nagłówka. Proszę spojrzeć na te przykłady dostępne pod adresami http://lost worldsfairs.com/moon/ i http://lostworldsfairs.com/eldorado/:

82

Rozdział 4. • Projektowanie responsywnych tekstów

Jak to zrobić? Po pobraniu pliku zip ze strony https://github.com/davatron5000/Lettering.js możemy rozpocząć eksperymentowanie od dodania poniższego kodu do nowej strony HTML. Użyty tutaj kod zostanie wykorzystany za chwilę:

Tytuł strony

83

Responsive Web Design z jQuery

Nie można zapomnieć o dodaniu w znaczniku odwołania do biblioteki jQuery i do wtyczki Lettering:

Na samym końcu pliku HTML (przed zamykającym znacznikiem ) trzeba jeszcze wywołać skrypt określający, na której klasie ma działać nasza wtyczka:

Przygotowany w ten sposób kod wygeneruje poniższą strukturę. Wyobraź sobie, że musisz to zapisać bez pomocy wtyczki:

T y t u ł s t r o n y

Tak przygotowanej strukturze można teraz nadawać style. Na przykład takie:

84

Rozdział 4. • Projektowanie responsywnych tekstów

Co więcej, jeżeli nagłówek powinien otrzymać osobne style dla każdego słowa (nie znaku), to można o tym poinformować wtyczkę, podając jej parametr "words", tak jak poniżej:

Można też pomyśleć o osobnych stylach dla poszczególnych wierszy nagłówka rozdzielanych znacznikiem
:

Tytuł strony
z długim tekstem

W stosunku do poprzedniego przykładu jedyna różnica polega na tym, że podajemy parametr "lines":

Teraz zapewne się zastanawiasz, jak wiele pracy trzeba włożyć w przygotowanie stylów, odmierzanie odległości i wyliczanie, o ile trzeba powiększyć czcionkę każdego elementu. Do tych prac doskonale przyda się narzędzie Kern.js.

Kern.js Kern.js jest narzędziem sieciowym doskonale uzupełniającym funkcje wtyczki Lettering.js, ponieważ udostępnia ono świetny interfejs pozwalający na przeciąganie elementów, dopasowywanie kerningu znaków, ustalanie wysokości wierszy i umiejscowienia liter. A po zakończeniu tych prac wystarczy skopiować wygenerowany kod CSS i użyć go w swoim arkuszu stylów.

Jak tego używać? Na dole strony http://www.kernjs.com/ znajdziesz odsyłacz drag to bookmarks bar to install. Przeciągnięcie go na pasek zakładek ułatwi później włączanie narzędzia na naszej stronie. Aby narzędzie to działało prawidłowo, do nagłówka naszej strony należy dołączyć bibliotekę jQuery w wersji 1.7.2 oraz pliki samej biblioteki Kern.js. Jej skrypt można pobrać na stronie https://github.com/bstro/kern.js.

Oto lista pięciu opcji, które pojawią się na górze strony, gdy tylko po jej otwarciu klikniemy znajdującą się w naszej przeglądarce zakładkę Kernjs.com:

85

Responsive Web Design z jQuery

 zmiana kerningu (poziomego odstępu między literami),  zmniejszenie lub zwiększenie rozmiaru czcionki,  dopasowanie wysokości wiersza (odstęp pionowy),  dowolne umiejscowienie liter,  obrót tekstu o pewien kąt. Wszystkie te opcje reprezentowane są za pomocą poniższych ikon:

Gdy tylko zakończysz prace nad nagłówkiem, kliknij przycisk z „fajką”, aby zapisać wszystkie ustawienia w postaci kodu gotowego do skopiowania na naszą stronę. Jeżeli na stronie masz kilka dopasowanych w ten sposób nagłówków, to musisz uważać, żeby kod jednego z nich nie wpływał na drugi. Aby ominąć ten problem, wystarczy elementom nagłówka przypisać specjalną klasę, tak jak w poniższym przykładzie:

Tytuł strony

Responsive Measure Responsive Measure to prosty skrypt, któremu można przekazać selektor (najlepiej wybierający element, w którym znajdzie się właściwa treść). Dzięki niemu wygenerowana zostanie idealna definicja wielkości czcionki pozwalająca na dopasowanie tekstu do elementu. Brzmi jak magia? W następnym podpunkcie opiszę sposób użycia tego skryptu i dopasowania go do naszych wymagań.

Jak to zrobić? Po pobraniu plików tego projektu ze strony https://github.com/jbrewer/Responsive-Measure/ wstaw poniższy kod do sekcji na samym początku dokumentu DOM:

Na końcu strony HTML (przed zamykającym znacznikiem ) trzeba jeszcze uruchomić skrypt wywołujący Responsive Measure. Zanim jednak do tego przystąpimy, muszę omówić dwie metody sterowania wielkością tekstu:  idealLineLength — Domyślnie ma wartość 66, ale możemy ją zmienić, określając tym samym liczbę znaków i spacji, które mają się zmieścić w jednym wierszu. Poza tym minimalna wielkość czcionki ustalona jest na 16 pikseli, natomiast maksymalna

86

Rozdział 4. • Projektowanie responsywnych tekstów

na 300 pikseli. Parametr sampleText ma pomagać przy obliczaniu liczby znaków o średniej szerokości znaku. Pamiętaj, że wiersze, w skład których wchodzi od 45 do 75 znaków, powszechnie uznaje się za najlepiej nadające się do czytania.

A oto wspomniany wcześniej kod wywołujący bibliotekę:

 minimumFontSize i maximumFontSize — Za pomocą tych parametrów można poprawić obsługę wielkości czcionek, na przykład definiując 13 pikseli jako minimum i 30 jako maksimum. Poza tym domyślna wartość parametru idealLineLength może wpływać na wyniki obliczeń. Jeżeli tak się stanie, możesz to poprawić, definiując własną wartość, podobnie jak zrobiliśmy to w poprzednim przykładzie. A poniżej przykład wykorzystania tych dwóch parametrów:

Ćwiczenie 4. — dopasowywanie nagłówka strony To ćwiczenie wykonamy w trzech krokach, przy czym kroki drugi i trzeci będą już tylko uzupełnieniem pierwszego: 1. Najpierw użyj narzędzia Font Squirrel, żeby przygotować sobie specjalną czcionkę. Następnie zastosuj ją w znaczniku

umieszczonym na Twojej stronie. Jeżeli nie wiesz, której czcionki użyć, to polecam wykorzystać czcionkę „Kite One” dostępną w serwisie Google Font.

87

Responsive Web Design z jQuery

2. Wykorzystaj wtyczkę Lettering, tak aby uzyskać pełną kontrolę nad każdą literą, słowem i wierszem nagłówka strony. Teraz zmień kolor pierwszej litery, zmieniając w pliku CSS wartość właściwości color dla klasy .char1. 3. Wywołaj narzędzie Kern.js, klikając jego zakładkę w przeglądarce. Następnie kliknij drugi przycisk na pasku narzędzi, wybierz pierwszą literę nagłówka i zwiększ wielkość jej czcionki. Teraz kliknij ostatni przycisk na pasku narzędzi i umieść wygenerowany kod w pliku CSS.

Podsumowanie W tym rozdziale poznaliśmy metody tworzenia responsywnego tekstu i wielkości czcionek. Poza tym poznaliśmy kilka sposobów zmieniania czcionki na stronie, wykorzystując do tego takie narzędzia, jak Font Squirrel, FitText, SlabText, Lettering i Responsive Measure. Wszystkie te rozwiązania pozwalają na uzyskanie kontroli nad tekstem, która jest niezbędna podczas przygotowywania responsywnej strony WWW. W następnym rozdziale mówić będziemy o obrazach oraz materiałach filmowych. Dowiemy się, jak można przekształcić je w responsywne media dopasowujące się do różnych urządzeń. Poza tym poznamy sposoby odtwarzania materiałów wideo za pomocą różnych odtwarzaczy i urządzeń.

88

5 Przygotowywanie obrazków i filmów Przygotowanie obrazków do użycia na responsywnych stronach WWW jest jednym z najczęściej dyskutowanych problemów, ponieważ konsorcjum W3C nie zaproponowało w tym zakresie żadnych reguł. W międzyczasie społeczność zdołała wypracować już kilka technik o różnorodnych zaletach, które pomagają radzić sobie z tym problemem. Ten rozdział rozpoczniemy od zapoznania się z podstawową metodą zmiany wymiarów obrazka. Tę technikę można bardzo łatwo zastosować w kodzie tworzonej strony, ale użytkowcy urządzeń mobilnych z pewnością oczekują lepszych efektów. Niestety prosta zmiana wymiarów obrazka nie działa tak dobrze na mniejszych urządzeniach, takich jak smartfony i tablety, ponieważ załadowanie na nich obrazka o wysokiej rozdzielczości zajmuje zbyt dużo czasu. Później przyjrzymy się więc zagadnieniom związanym z punktami zmiany (ang. breakpoints) przy obsłudze obrazków. Oprócz tego zwrócimy też uwagę na obsługę filmów, ponieważ znajdowały się one w kodzie naszych stron na długo przed pojawieniem się języka HTML5. Tutaj również musimy rozwiązać problemy związane z przekształcaniem sztywnych stron w responsywne. Dodatkowo pomówimy też o dostępnych wtyczkach biblioteki jQuery i sposobach ich wykorzystywania. Pozwalają one skrócić czas przygotowywania strony i jednocześnie poprawić jakość tworzonego interfejsu użytkownika. W tym rozdziale poznamy:  podstawową metodę zmiany wielkości obrazka za pomocą CSS,  powody stosowania punktów zmiany obrazków,  sposób działania znacznika obrazków,

Responsive Web Design z jQuery

 metody sterowania nastawami obrazków,  techniki używania punktów przeskoku obrazków we wtyczkach biblioteki jQuery,  sposoby tworzenia responsywnego tła za pomocą wtyczek biblioteki jQuery,  metody pracy z ekranami o wysokiej gęstości,  techniki przekształcania elementów filmowych w elementy responsywne.

Prosta zmiana wymiarów obrazka za pomocą CSS Za pomocą poniższego kodu można pozwolić obrazkowi na dowolną zmianę swojego wymiaru w zależności od tego, jakie wymiary będzie przyjmował jego element nadrzędny. Maksymalna szerokość została ustalona na 100 procent jego oryginalnego rozmiaru, natomiast wysokość ma dopasowywać się automatycznie w celu zachowania proporcji obrazka: img { max-width: 100%; height: auto; }

Technika ta będzie działała dobrze dopiero wtedy, gdy obrazek będzie na tyle duży, żeby wypełnić maksymalne oczekiwane wymiary elementu nadrzędnego. Niestety obrazki dopasowane do potrzeb komputerów stacjonarnych bywają zbyt duże, żeby przesłać je w internecie mobilnym. Jeżeli do powiększania obrazków JPG wykorzystujesz atrybuty max-width lub height, to w przeglądarkach IE7 i starszych zobaczysz najprawdopodobniej brzydko powiększone piksele. Problem ten można rozwiązać, stosując poniższy zapis: img { -ms-interpolation-mode: bicubic; } Opisany tu problem został rozwiązany w IE8, a w IE9 uznano go za nieistotny.

Stosowanie punktów zmiany obrazków Samodzielnie dopasowujące się obrazki to nie tylko ich automatyczne skalowanie na stronie. Do rozwiązania jest tu też wiele innych problemów. Podczas wstawiania obrazków na responsywne strony trzeba brać pod uwagę wiele zmiennych, takich jak:

90

Rozdział 5. • Przygotowywanie obrazków i filmów

 rozdzielczość ekranu,  przepustowość łącza,  szerokość okna przeglądarki. Zdefiniowanie najlepszego obrazka, jaki ma zostać przesłany do przeglądarki, może być uzależnione od każdej z tych zmiennych. Na tym właśnie polega problem. Na przykład znajomość wyłącznie rozdzielczości ekranu nie da nam żadnych informacji o tym, czy łącze, z którego korzysta użytkownik, nadaje się do przesyłania obrazków o wysokiej jakości. Jak w takiej sytuacji możemy na naszą stronę przygotować obrazek, który zostanie wyświetlony w zadowalającej jakości na dowolnym urządzeniu, bez jednoczesnego marnowania przepustowości łącza?

Jeżeli pracujemy z obrazkami bitmapowymi (nie wektorowymi, takimi jak SVG), to idealne rozwiązanie wydaje się całkiem proste: dla każdej z grup rozdzielczości przesyłać inny obrazek. W ten sposób każdy wariant obrazka byłby dobrze dopasowany do danego rodzaju urządzenia. Zazwyczaj urządzenia mają następujące wielkości ekranów:  480 pikseli — smartfony o standardowej rozdzielczości (najpierw-mobilne),  1024 piksele — iPhone z ekranem Retina (smartfony z ekranami o wysokiej gęstości), tablety i komputery stacjonarne o normalnej rozdzielczości,  1600 pikseli — iPad z ekranem Retina (tablety z ekranami o wysokiej gęstości) i komputery stacjonarne o wysokiej rozdzielczości. Istnieje kilka technik, za pomocą których próbowaliśmy już poradzić sobie z tym problemem i dostarczyć właściwy obrazek do odpowiedniego urządzenia. Każda z tych technik działa w nieco inny sposób, dlatego trzeba wybrać metodę najlepiej pasującą do wymagań tworzonego właśnie projektu. Za chwilę przyjrzymy się wszystkim tym technikom.

91

Responsive Web Design z jQuery

Jak działa znacznik picture? Konsorcjum W3C, wychodząc naprzeciw potrzebie dostarczenia użytkownikowi właściwego obrazka, nadal stara się poznać wszystkie aspekty tego problemu. Istnieje nieoficjalny szkic przygotowywanego rozwiązania, w którym definiowany jest znacznik picture pozwalający na podanie różnych źródeł obrazka umożliwiających lepsze dopasowanie go do urządzenia. Bez ustalenia standardu twórcy przeglądarek nie mogą przygotować ich do prawidłowego wyświetlania takich obrazków. Aktualnie społeczność twórców wykorzystuje CSS i JavaScript, żeby zrealizować to samo zadanie.

Oto definicja znacznika picture zapisana w dokumentach W3C: Ta specyfikacja udostępnia twórcom sposób zadeklarowania wielu źródeł jednego obrazka, a możliwość zastosowania zapytań o media pozwala na zdefiniowanie, która jego wersja ma się pojawiać w określonych warunkach. Pomyślano też o starszych przeglądarkach, w których pojawi się podstawowa wersja obrazka. Poniżej przedstawiam przykładowy sposób użycia znacznika picture:

Tekst dostępny dla wszystkich wersji obrazka

Zachęcam do zapoznania się z zaktualizowanym tekstem tej specyfikacji dostępnym pod adresem http://picture.responsiveimages.org/.

Kontrolowanie nastaw responsywnych obrazków W ostatnim czasie jest to często podnoszony temat. Autorzy stron powinni definiować różne źródła obrazków nie tylko w zależności od ich rozmiarów, ale także na podstawie swobodnego wyboru; powinni mieć możliwość odpowiedniego ustawienia każdej wersji. Takie postępowanie nazywane jest ustalaniem nastaw obrazków (ang. art direction). Pojęcie to postaram się wyjaśnić za pomocą przykładu. Jeżeli poniższy obrazek wyświetlany będzie na dużym ekranie, to sensowne wydaje się pokazanie zarówno pary w łodzi, jak i znajdującej się w tle rzeki. Takie tło prezentuje miejsce, w którym znajduje się para, ale nie wnosi

92

Rozdział 5. • Przygotowywanie obrazków i filmów

żadnej istotniejszej informacji. Zobaczmy teraz, co stanie się po przeskalowaniu tego obrazka tak, żeby pasował do małego ekranu. To zdecydowanie nie jest żadne ustalanie nastaw.

Przy takim pomniejszeniu ciężko nawet rozpoznać, kto siedzi w łodzi. Może jednak zamiast prostego zmniejszania obrazka zdecydujemy się wykadrować go tak, żeby pozbyć się tła i skupić na parze w łodzi. W efekcie otrzymamy obrazek, który zdecydowanie lepiej sprawdzi się na małych ekranach. Porównajmy teraz lewy obrazek (ustalanie nastaw) z prawym (proste skalowanie):

Biblioteka CSS — Focal Point Focal Point pozwala na skupienie się na najważniejszej części obrazka przed przystąpieniem do skalowania. W ten sposób pokazuje użytkownikowi smartfona główne elementy obrazu. A to wszystko bez użycia skryptów JavaScript i biblioteki jQuery. Za pomocą biblioteki Focal Point można zdefiniować obszar określający części obrazka, które powinny pojawić się nawet na ekranach o niższej rozdzielczości. Tak wyznaczone części będą widoczne niezależnie od tego, jak bardzo pomniejszać będziemy obrazek. Przedstawione poniżej nazwy klas pozwalają na wykadrowanie i przeskalowanie najważniejszych obszarów obrazka. Pamiętaj, że X w nazwach klas reprezentuje liczbę od 1 do 6:  left-X / right-X — Definiują liczbę jednostek, na których należy się skupiać w poziomie.  up-X / down-X — Definiują liczbę jednostek, na których należy się skupiać w pionie.

93

Responsive Web Design z jQuery

 portrait — Domyślnie obrazek ma klasę landscape, czyli układ poziomy. Jeżeli jednak wysokość obrazka jest większa od jego szerokości, to należy dodać też klasę portrait.

Jak to zrobić? Po pobraniu plików CSS spod adresu https://github.com/adamdbradley/focal-point w znaczniku swojej strony HTML wstaw poniższy kod:

Teraz można już podziwiać działanie dołączonych stylów, czego przykładem jest poniższy rysunek:

Zasada działania biblioteki Focal Point jest prosta. Wyobraź sobie siatkę o wielkości 12 × 12 pól ułożoną na obrazku:

Załóżmy teraz, że głowa mężczyzny jest najważniejszą częścią obrazka i to właśnie ją musimy zdefiniować jako punkt skupienia. Mimo że jego twarz znajduje się po prawej stronie obrazka, to podczas pomniejszania pozostanie ona głównym elementem obrazu. Aby zdefiniować punkt skupienia, wystarczy przypisać obrazkowi zaledwie dwie klasy. Dzięki temu można poziomą i pionową pozycję punktu skupienia umiejscowić na siatce, przy czym odmierzanie rozpoczyna się od jej centralnego punktu, tak jak na poniższym obrazku:

94

Rozdział 5. • Przygotowywanie obrazków i filmów

Poniższy kod umieszcza punkt skupienia na twarzy mężczyzny:

W tym przypadku punkt skupienia przesunięty został o trzy jednostki w górę i w lewo od środka obrazu. Każdy obrazek musi zostać objęty elementem div. Niezbędne jest też zastosowanie klasy focal-point.

Alternatywne rozwiązanie ze znacznikiem picture Wiemy już, że konsorcjum W3C pracuje nad jak najszybszym wprowadzeniem standardu znacznika opisującego obrazek, który umożliwiałby jego zaprezentowanie w sposób najwłaściwszy dla danego widoku strony. Problem ten naprawdę daje się we znaki twórcom stron, dlatego społeczność przygotowała już dwie wtyczki JavaScript, generujące podobny efekt i działające we wszystkich przeglądarkach. Wtyczki te nazywają się Foresight i Picturefill.

Foresight — wybieranie właściwego obrazka dla danej wielkości ekranu Wtyczka Foresight umożliwia stronie sprawdzenie, czy urządzenie użytkownika jest w stanie wyświetlić obrazki o wysokiej rozdzielczości (chodzi o ekrany typu Retina), i to jeszcze przed wysłaniem żądania do serwera.

95

Responsive Web Design z jQuery

Dodatkowo wtyczka sprawdza, czy urządzenie ma na tyle szybkie łącze internetowe, żeby umożliwiało ono przesłanie obrazków o wysokiej rozdzielczości. W zależności od rodzaju ekranu i szybkości łącza wybierany jest najlepiej dopasowany obrazek. Odpowiednio konfigurując atrybut src znacznika img i wykorzystując takie metody, jak szablony adresów URI albo wyszukiwanie i zmiana wartości w tych adresach, można przygotowywać żądania tak, żeby pobierały one warianty obrazka o różnych rozdzielczościach. W szczególności chodzi tu o hybrydową implementację nowej funkcji CSS o nazwie image-set(). Podstawowy format funkcji image-set() może składać się z jednego lub kilku wariantów definicji obrazków rozdzielanych znakiem przecinka. Każdy wariant obrazka definiowany jest za pomocą trzech parametrów:  Adres URL — Ma składnię podobną do parametru background-image:url().  Współczynnik powiększenia — Parametr współczynnika powiększenia używany jest jako mnożnik wymiarów obrazka stosowany do określania jego gęstości. Niektóre urządzenia mobilne mają współczynnik gęstości pikseli na poziomie 1,5 lub 2.  Przepustowość — Temu parametrowi można nadać wartość niskiej lub wysokiej przepustowości. Wtyczka wykonuje też szybki test szybkości dostępu do sieci, aby się upewnić, że urządzenie poradzi sobie z obrazkami o wysokiej rozdzielczości bez zmuszania użytkownika do oczekiwania na załadowanie ich przez powolne łącze.

Jak to zrobić? Niezbędne pliki można pobrać ze strony https://github.com/adamdbradley/foresight.js. Następnie w znaczniku strony należy dopisać poniższy kod:

Teraz możemy przyjrzeć się przedstawionemu poniżej rzeczywistemu przykładowi, który został przygotowany z zachowaniem koncepcji najpierw-mobilne: .fs-img { width:100%; font-family: 'image-set( url(-small|-small-2x) 2x high-bandwidth )'; display:none; }

Następnie definiujemy obrazki dla okien większych niż 600 pikseli oraz większych niż 800 pikseli: @media (min-width:600px) { .fs-img { font-family: 'image-set( url(-small|-medium), url(-small|-medium-2x) 2x high-bandwidth )';

96

Rozdział 5. • Przygotowywanie obrazków i filmów

} } @media (min-width:800px) { .fs-img { font-family: 'image-set( url(-small|-large), url(-small|-large-2x) 2x high-bandwidth )'; max-width:100%; } }

W przedstawionym kodzie wyróżniłem kilka słów, żeby lepiej wyjaśnić, jak działa ten mechanizm. W atrybucie src znacznika img kod wyszuka część nazwy i zastąpi ją inną. Następnie witryna poszuka zmienionej nazwy wśród swoich plików, sprawdzając, czy taki obrazek istnieje. A tak wygląda przygotowany odpowiednio znacznik img: Cały mechanizm będzie zmieniać przyrostek w nazwie pliku, który ma zostać przeskalowany. To dobrze, ponieważ ogranicza to liczbę modyfikacji kodu podczas tworzenia nowych responsywnych obrazków.

Jeżeli porównamy wagę poszczególnych wariantów obrazka z poniższego przykładu, to okaże się, że największy z nich ma wielkość 44 KB, średni ma już tylko 20 KB, a najmniejszy z nich zaledwie 12 KB. W przypadku jednego obrazka to nie jest wielka różnica, ale jeżeli ten sam mechanizm zastosujemy na całej stronie, to na pewno zredukujemy ilość niepotrzebnie przesyłanych danych.

97

Responsive Web Design z jQuery

Picturefill — rozwiązanie najbardziej przypominające znacznik picture Picturefill jest wtyczką w języku JavaScript obsługującą responsywne obrazki i w swoim działaniu bardzo zbliżoną do planowanego znacznika picture. Ta niewielka wtyczka zamiast znaczników picture lub img wykorzystuje znacznik span, dzięki czemu można ją bezpiecznie używać na naszych stronach. Wtyczka Picturefill obsługuje już funkcję podmiany obrazków na ich wersję HD (dla wyświetlaczy Retina). Poza tym poprawia ona również szybkość ładowania strony dzięki temu, że wybiera tylko jedną wersję obrazka właściwą dla danego ekranu, a nie pobiera pozostałych. Więcej informacji na jej temat można znaleźć pod adresem https://github.com/scottjehl/picturefill.

Jak to zrobić? Po pobraniu plików wtyczki wstaw w znaczniku swojej strony poniższy kod:

Poniżej prezentuję kod, który należy użyć w kodzie HTML strony. Zauważ, że trzeba tu podać adres źródłowy każdego obrazka wraz ze wszystkimi jego wariantami:

Być może w pewnych projektach takie rozwiązanie jest konieczne (pełna specyfikacja wszystkich wariantów obrazka umieszczona w kodzie HTML), ale trzeba pamiętać, że w przypadku gdy na stronie używanych będzie wiele różnych obrazków, pojawią się problemy ze skalowalnością tego rozwiązania. Nie wspominając już o problemach przy standardowej obsłudze witryny.

Tworzenie responsywnych obrazków tła za pomocą wtyczek jQuery Pozycjonowanie obrazków w tle responsywnych stron nie zawsze jest łatwym zadaniem, ponieważ jego prawidłowe umiejscowienie często uzależnione jest od innych prezentowanych treści.

98

Rozdział 5. • Przygotowywanie obrazków i filmów

Żeby lepiej zobrazować ten problem, pozwolę sobie przedstawić poniższy przykład:

Problem polega na tym, że czasami tak przygotowujemy treści, żeby tło pozostawało nieruchome, a ono powinno się zmieniać. Dostępne są dwie wtyczki, a mianowicie Anystretch i Backstretch, które bardzo ułatwiają pozycjonowanie tła na stronach.

Anystretch — łatwe rozciąganie tła Anystretch jest wtyczką biblioteki jQuery pozwalającą dodać dynamicznie rozciągane tło do całej strony albo do dowolnego elementu blokowego. Co ciekawe, Anystretch jest wariantem (ang. fork) wtyczki Backstretch. Obraz jest rozciągany tak, żeby dopasować go do strony lub elementu blokowego, a jego wymiary zmieniają się automatycznie wraz ze zmianami wymiarów okna przeglądarki. Dostępnych jest kilka opcji konfigurujących działanie wtyczki, takich jak pozycjonowanie w poziomie i w pionie, szybkość, pozycjonowanie elementu albo nazwy danych. Inną zaletą tej wtyczki jest to, że jeżeli po załadowaniu kodu Anystretch chcielibyśmy znów zmienić obrazek, to wystarczy wywołać wtyczkę jeszcze raz, podając jej nową ścieżkę. Prezentowanej wtyczki można używać w połączeniu z wtyczką Breakpoints.js (o której mówiłem już w rozdziale 2.), uzyskując w ten sposób możliwość podmiany obrazka tła i ponownego wywołania wtyczki Anystretch.

Jak to zrobić? Aby wyjaśnić zasadę działania wtyczki, po pobraniu plików ze strony https://github.com/dan millar/jquery-anystretch wykorzystamy poniższy kod:

99

Responsive Web Design z jQuery

główna treść

treści w stopce

W przedstawionym kodzie wyróżniłem dwa istotne słowa:  stretchMe — Ta klasa pozwala oznaczyć elementy, które będą obsługiwane przez wtyczkę.  data-stretch — Wartość tego atrybutu poinformuje wtyczkę, który obrazek ma zostać umieszczony w tle. Na samym dole struktury DOM (przed zamykającym znacznikiem ) będziemy musieli dodać kod biblioteki jQuery i wtyczki Anystretch. Potem trzeba jeszcze wywołać kod wtyczki dla wszystkich elementów zawierających klasę stretchMe (to tylko sugerowana nazwa).

A tak wygląda strona, na której użyto tej wtyczki dla jednego elementu div:

Wszystko pięknie, ale korzystając z tej metody, możemy przypisać to samo zachowanie do każdego responsywnego tła użytego na stronie. Innymi słowy, jeżeli chcemy zmienić charakterystykę dopasowania tła w innych elementach, to dla każdego z tych elementów musimy ponownie wywołać wtyczkę.

100

Rozdział 5. • Przygotowywanie obrazków i filmów

Jeżeli dla tego samego elementu metodę anystretch wywołamy dwukrotnie, to drugie wywołanie zastąpi dotychczasowy obrazek tła i zatrzyma działanie poprzedniej definicji.

Jeżeli spojrzymy na podany wcześniej kod HTML, to zauważymy, że została w nim użyta klasa div-home, którą można wykorzystać do zdefiniowania innego zestawu opcji. Na przykład: Parametr speed definiuje czas wejścia obrazka na stronę po jego pobraniu. Parametry positionX i positionY otrzymują domyślnie wartość center, ale wtyczka pozwala na ich modyfikację.

Backstretch — tworzenie responsywnego pokazu slajdów Backstretch jest wtyczką biblioteki jQuery pozwalającą na dodanie do dowolnego elementu strony dynamicznie zmieniającego się tła. Jest też podstawą, na której wyrosła wtyczka Anystretch. Od czasu tego podziału Backstretch ewoluowała i teraz pozwala na dynamiczną zmianę wielkości obrazów ułożonych w ramach pokazu slajdów. Wszystkie obrazki tła zostaną dopasowane do strony lub elementu, a ich wielkość będzie się automatycznie zmieniała wraz ze zmianami wielkości okna przeglądarki. Innym usprawnieniem jest wstępne pobieranie obrazków, które zostaną użyte dopiero po zakończeniu ładowania strony. W ten sposób użytkownicy nie muszą czekać długo na ładowanie każdego obrazka. Pliki wtyczki można pobrać pod adresem https://github.com/srobbin/jquery-backstretch.

Jak to zrobić? Na samym końcu dokumentu DOM (przed zamykającym znacznikiem ) należy dołączyć bibliotekę jQuery i wtyczkę Backstretch. W kolejnym kroku trzeba uruchomić skrypt przypinający wtyczkę do tła wybranych elementów:

101

Responsive Web Design z jQuery

Wynik działania tego kodu można zobaczyć na poniższym rysunku:

Domyślnie sposób ułożenia obrazka w tle (w poziomie i w pionie) ustalony jest na centrowanie, ponieważ jest to najczęściej wybierane rozwiązanie, ale w razie potrzeby można to ustawienie zmienić. Wśród innych obsługiwanych opcji można wymienić parametr fade ustalający czas pojawiania się obrazka albo parametr duration, który stosowany jest w pokazach slajdów do określenia czasu wyświetlania pojedynczego slajdu. Wtyczkę Backstretch można podłączyć do dowolnego elementu blokowego, choć domyślnie responsywne tło dołączane jest do elementu . Z tego powodu zamiast stosować podany wyżej kod, lepiej jest zdefiniować klasę, za pomocą której można dokładniej ukierunkować działanie wtyczki:

Jeżeli chcemy uruchomić pokaz slajdów, to wystarczy przekazać wtyczce tablicę z obrazkami i podać czas wyświetlania pojedynczego obrazka:

Sama wtyczka ma doskonałą dokumentację i udostępnia pełne API pozwalające na kontrolowanie pokazu slajdów. Wszystko to można znaleźć pod adresem https://github.com/srobbin/ jquery-backstretch#slideshow-api.

102

Rozdział 5. • Przygotowywanie obrazków i filmów

Obsługa ekranów o wysokiej gęstości Gęstość ekranu jest parametrem określającym liczbę pikseli znajdujących się na określonej powierzchni. Najczęściej stosowaną miarą jest tutaj PPI (pixels per inch), czyli liczba pikseli na cal. Firma Apple dla swoich wyświetlaczy o podwojonej gęstości przygotowała nawet marketingową nazwę Retina. Na oficjalnej stronie WWW firmy możemy przeczytać: Gęstość pikseli w wyświetlaczach Retina jest tak wielka, że Twoje oko nie dostrzeże już poszczególnych pikseli. Innymi słowy, wyświetlacze Retina mają na tyle wysoką gęstość, żeby uniknąć pikselizacji widocznej gołym okiem. Ponieważ wyświetlacze tego rodzaju zaczynają być coraz częściej stosowane, bardzo ważne jest przygotowanie takich stron WWW i aplikacji, które poradzą sobie z ich obsługą. Na poniższym rysunku porównuję piksele wyświetlacza Retina z pikselami ekranu o standardowej gęstości. W porównaniu z tradycyjnymi ekranami w wyświetlaczach Retina na tej samej przestrzeni znajduje się poczwórna liczba pikseli:

Słowo „podwójna” nie do końca pasuje do wszystkich urządzeń wyposażonych w ekrany o wysokiej gęstości. Aktualnie dostępne są ekrany o gęstościach powiększonych od 1,5 raza do 2,25 raza.

Jak to zrobić? Najważniejszą cechą obrazków dla ekranów Retina jest podwojenie wszystkich normalnych wartości. A zatem wykorzystując zapytania o media, możemy sprawdzić, czy przeglądarka obsługuje obrazki o wysokiej gęstości. Przyjrzyjmy się poniższemu przykładowi: /* normalny obrazek ma wymiary 100x100 pikseli */ span.bigicon-success { background: url(sprite.png) no-repeat -50px 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { span.bigicon-success {

103

Responsive Web Design z jQuery

background-image: url([email protected]); /* obrazek dla wyświetlaczy retina ma wymiary 200x200 pikseli */ background-size: 200px 200px; } }

Jeżeli przeglądarka obsługuje takie obrazki, to wyświetlona zostanie wersja obrazka dla ekranów Retina. Niestety, takie rozwiązanie uruchamia dwa żądania do serwera. Jedno wysyłane jest jeszcze przed kontrolą, a drugie pochodzi z zapytania o media. Sprawdźmy zatem, jak można wykonać tylko jedno żądanie, wykorzystując wtyczkę Foresight.

Jak to zrobić za pomocą wtyczki Foresight? Ta wtyczka ma funkcje wykrywania gęstości ekranu urządzenia, na którym została uruchomiona, i to jeszcze przed wyświetleniem obrazka. Proszę przyjrzeć się poniższemu przykładowi: .fs-img { font-family: 'image-set(url(-small | -small-2x) 2x high-bandwidth)'; }

W tym przykładzie przeglądarka sprawdza, któremu elementowi przypisano klasę fs-img, i przed wyświetleniem jakiegokolwiek obrazka (to domyślne zachowanie wtyczki) kontroluje możliwość obsługi obrazków o wysokiej gęstości. Oprócz tego może też sprawdzić, czy użytkownik dysponuje szybkim połączeniem z internetem. Proszę zauważyć, że przed wysłaniem żądania o przykładowy plik castle-small.jpg w jego nazwie odszukany zostanie przyrostek -small, który zostanie zastąpiony przyrostkiem -small-2x, a zatem żądanie będzie dotyczyło pliku castle-small-2x.jpg. Istnieje też sieciowe narzędzie ułatwiające obliczenie wielkości obrazka przygotowanego z myślą o ekranach Retina. Jest ono dostępne pod adresem http://teehanlax.com.s3.amazonaws.com/ files/teehanlax_density_converter.html.

Tworzenie responsywnych elementów filmowych Zanim zaczęliśmy tworzyć strony WWW w języku HTML5, możliwość wykorzystania materiałów filmowych ograniczana była przez konieczność obsługi wtyczki Adobe Flash Player. Na szczęście to ograniczenie już nas nie dotyczy, a to dzięki wysiłkom związanym z projektowaniem znacznika