Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00079 005634 10194837 na godz. na dobę w sumie
Responsywne strony WWW. Technologia na start! - ebook/pdf
Responsywne strony WWW. Technologia na start! - ebook/pdf
Autor: , Liczba stron: 152
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-9243-9 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> funkcjonalność stron
Porównaj ceny (książka, ebook (-20%), audiobook).

Strony WWW dla każdego urządzenia!

Responsywne strony WWW potrafią dopasowywać się do rozmiaru ekranu użytkownika. Niezależnie od tego, czy korzysta on ze stacjonarnego komputera z dużym monitorem, laptopa czy smartfona, zawsze może bez utraty kluczowej zawartości przeglądać ulubione witryny. Responsywność była do niedawna tylko dodatkiem do tworzonych stron — miała po prostu miło zaskoczyć klientów. Obecnie to standard usług WWW.

Z tej unikalnej książki dowiesz się, jak sprawnie tworzyć responsywne serwisy. Nauczysz się stosować płynne siatki oraz korzystać z tych gotowych: 960 Grid System, 320 and Up oraz Bootstrap. Zrozumiesz, w jaki sposób działają responsywne strony, które nie tylko dostosowują swój układ do rozmiaru ekranu, lecz także adaptują dostarczane materiały multimedialne, głównie zdjęcia. W kolejnych rozdziałach znajdziesz obszerne omówienie tych zagadnień. W końcu dowiesz się, jak stworzyć własny elastyczny szablon oraz jakie są dostępne gotowe rozwiązania. Ta książka jest obowiązkową lekturą każdego dewelopera stron WWW, który chce być na czasie oraz korzystać z dobrodziejstw responsywnych stron!

Dzięki tej książce:

Obowiązkowa lektura każdego dewelopera stron WWW!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Jump Start Responsive Web Design Tłumaczenie: Piotr Rajca ISBN: 978-83-246-9237-8 © 2014 Helion S.A. Authorized Polish translation of the English edition of Jump Start Responsive Web Design, ISBN 9780987332165 © 2013 SitePoint Pty. Ltd. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/reswww.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/reswww Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci Wst(cid:218)p ....................................................................................9 Kto powinien si(cid:218)gn(cid:200)(cid:202) po t(cid:218) ksi(cid:200)(cid:285)k(cid:218) ............................................................... 9 Zastosowane konwencje ............................................................................... 9 Przyk(cid:239)adowe kody .................................................................................... 9 Wskazówki, uwagi i ostrze(cid:285)enia ............................................................ 10 Materia(cid:239)y uzupe(cid:239)niaj(cid:200)ce ............................................................................... 11 Podzi(cid:218)kowania ............................................................................................ 12 Rozdzia(cid:239) 1. Zapewnianie responsywno(cid:258)ci .............................................13 Napisz raz i uruchom ................................................................................... 14 Filary projektowania responsywnych stron WWW ....................................... 16 Dostosuj lub zacznij od nowa ...................................................................... 21 Sami stanowimy przyk(cid:239)ad ............................................................................ 21 Okre(cid:258)lanie struktury zawarto(cid:258)ci/bloków ................................................. 24 Upraszczanie stylów CSS ........................................................................ 25 Zmiany w semantyce kodu ..................................................................... 26 Przedstawienie projektowania z my(cid:258)l(cid:200) o urz(cid:200)dzeniach mobilnych ............... 28 W potrzebie dobry b(cid:218)dzie dowolny obszar prezentacyjny ............................ 30 Reagowanie na metodologi(cid:218) RWD .............................................................. 32 Rozdzia(cid:239) 2. P(cid:239)ynne siatki .......................................................................33 Rola p(cid:239)ynnych siatek .................................................................................... 34 Tworzenie w(cid:239)asnego rozwi(cid:200)zania ................................................................ 38 P(cid:239)ynna typografia .................................................................................. 39 Ujawnianie domy(cid:258)lnych wielko(cid:258)ci czcionek ............................................ 41 Wykorzystanie jednostek wzgl(cid:218)dnych w uk(cid:239)adach stron ......................... 43 Samodzielne tworzenie p(cid:239)ynnej siatki ..................................................... 46 Dodawanie z(cid:239)otej proporcji .................................................................... 47 Gotowe systemy siatek .......................................................................... 50 Zastosowanie systemu Bootstrap ................................................................. 58 Rozwi(cid:200)zania responsywne ........................................................................... 65 Rozdzia(cid:239) 3. Obrazy adaptacyjne ............................................................67 Adaptacyjne arkusze stylów CSS .................................................................. 68 Obrazy adaptacyjne obs(cid:239)ugiwane skryptowo ............................................... 70 Adaptacyjne rozwi(cid:200)zanie w j(cid:218)zyku HTML5 .................................................. 72 W3C wybiera atrybut srcset ................................................................... 74 Brakuj(cid:200)cy element picture ...................................................................... 78 Adaptacja przyk(cid:239)adowej strony .................................................................... 79 Zrozumie(cid:202) sytuacj(cid:218) ...................................................................................... 83 Kup książkęPoleć książkę 6 Responsywne strony WWW Rozdzia(cid:239) 4. Zrozumie(cid:202) zapytania medialne ...........................................85 Poznawanie mo(cid:285)liwo(cid:258)ci zapyta(cid:241) medialnych ............................................... 87 Obs(cid:239)uga cech ......................................................................................... 90 Zapytania medialne w dzia(cid:239)aniu .................................................................. 92 Dodawanie punktów granicznych ........................................................ 100 Sprosta(cid:202) zadaniu ....................................................................................... 106 Rozdzia(cid:239) 5. Responsywna tre(cid:258)(cid:202) ...........................................................107 Strukturyzacja nas wyzwoli ........................................................................ 109 Struktura dokumentu ........................................................................... 109 Metadane ............................................................................................ 112 Tre(cid:258)ci wspomagaj(cid:200)ce ........................................................................... 115 Techniczne sposoby tworzenia responsywnych tre(cid:258)ci ................................. 116 Usuwanie tre(cid:258)ci o nieodpowiednim kontek(cid:258)cie .................................... 116 Dynamiczne wczytywanie na podstawie kontekstu .............................. 117 Wra(cid:285)enia zale(cid:285)ne od platform ................................................................... 119 Decyzje dotycz(cid:200)ce domeny .................................................................. 120 Trasowanie przegl(cid:200)darek ..................................................................... 121 Trasowanie szablonów ........................................................................ 123 Okre(cid:258)lanie, jak daleko mo(cid:285)na si(cid:218) posun(cid:200)(cid:202) ................................................. 124 Dostosowanie ........................................................................................... 126 Rozdzia(cid:239) 6. Responsywny szablon .......................................................129 Tworzenie prostego szablonu strony WWW ............................................... 130 Gotowe szablony ....................................................................................... 130 HTML5 Boilerplate ............................................................................... 131 Bootstrap ............................................................................................. 132 Foundation .......................................................................................... 132 Skeleton .............................................................................................. 133 Semantic Grid System .......................................................................... 133 320 and Up ......................................................................................... 134 Tworzenie w(cid:239)asnego szablonu ................................................................... 134 Struktura katalogów oraz podstawowe pliki ........................................ 134 Neutralizacja i normalizacja ................................................................. 138 Podstawowe biblioteki ........................................................................ 139 Bazowy arkusz stylów .......................................................................... 141 Przygotowywanie pod k(cid:200)tem wielokrotnego stosowania ........................... 142 Preprocesory CSS ................................................................................. 143 Zarz(cid:200)dzanie skryptami ......................................................................... 146 Przygotowanie do u(cid:285)ycia i udost(cid:218)pnianie ............................................ 147 Kiedy wszystko b(cid:218)dzie ju(cid:285) gotowe… ......................................................... 147 Odpowiadaj na potrzeby ........................................................................... 148 Skorowidz .........................................................................149 Kup książkęPoleć książkę Rozdzia(cid:239) Zrozumie(cid:202) zapytania medialne Zapytania medialne są trzecim filarem metodologii RWD i stanowią rozszerzenie języka HTML5 pozwalające, by na dostarczanie arkuszy CSS do konkretnego urządzenia miały wpływ cechy jego ekranu, zgodnie z definicją zawartą w specyfikacji modułu CSS31. Inny- mi słowy: istnieje możliwość wykrycia, że strona jest wyświetlana na urządzeniu przeno- śnym z ekranem o szerokości 320 pikseli i działającym w układzie poziomym, i dostarczenia do niej innego arkusza stylów niż do tej samej strony wyświetlanej na komputerze stacjo- narnym z ekranem o obszarze prezentacyjnym o szerokości 1024 pikseli. Tradycyjnie róż- nice w stylach ograniczałyby się jedynie do innego układu, tła oraz obrazów, jednak w rze- czywistości istnieje możliwość dostarczenia całkowicie odrębnego zestawu stylów. Arkusze stylów określane na podstawie zapytań medialnych mogą być podawane na trzy sposoby, podobnie jak w przypadku typów mediów. Po pierwsze, przy użyciu elementu link języków HTML i XHTML: link rel= stylesheet type= text/css media= all and (color) href= /style.css Po drugie, przy użyciu kodu XML: ?xml-stylesheet media= all and (color) rel= stylesheet href= /style.css ? Ostatnim sposobem jest użycie reguł @import w arkuszach stylów: @import url( /style.css ) all and (color); 1 http://www.w3.org/TR/css3-mediaqueries/. Kup książkęPoleć książkę 86 Responsywne strony WWW lub reguł @media: @media all and (color) { /* jeden lub kilka zestawów reguł... */ } Także w tym przypadku metodologia RWD udostępnia nam narzędzia do tworzenia pro- stych rozwiązań umożliwiających budowanie niezawodnych układów. Zapewnia również możliwość skoncentrowania uwagi na treści i na zachęceniu użytkowników do ponowne- go skorzystania z aplikacji. Jak wyraźnie widać na rysunku 4.1, nowoczesne urządzenia mają bardzo różne możliwości oraz wymagania związane z wykorzystywanymi materiałami i stylami. Na szczęście skład- nia zapytań medialnych jest bardzo prosta, jak również powszechnie obsługiwana i stoso- wana — w rzeczywistości pojawiła się już w każdym rozdziale tej książki! Rysunek 4.1. Ró(cid:285)ne obrazy na docelowych urz(cid:200)dzeniach Zazwyczaj staramy się ograniczać style CSS dostarczane do każdego z urządzeń docelowych. Zaczynając od stylów używanych zawsze, dochodzimy do tych, które są przeznaczone dla konkretnych urządzeń. Niemniej jednak nie tylko same style są dostosowywane do urzą- dzeń — to samo dotyczy także materiałów używanych i dostarczanych przez te style. Ry- sunek 4.2 pokazuje, że jeśli do naszego urządzenia z ekranem o szerokości 320 pikseli (po- kazanego na rysunku 4.1) przekażemy tło o szerokości 1920 pikseli, to wyślemy do niego obraz 14 razy większy niż to konieczne. Takiego niepotrzebnego marnowania przepusto- wości i obciążenia aplikacji można całkiem łatwo uniknąć. Kup książkęPoleć książkę ZROZUMIE(cid:109) ZAPYTANIA MEDIALNE 87 Rysunek 4.2. Nasz ma(cid:239)y obraz mie(cid:258)ci si(cid:218) w du(cid:285)ym obrazie oko(cid:239)o 14 razy Przyjrzyjmy się zapytaniu medialnemu stworzonemu z myślą o telefonie iPhone 5: @media only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) { /* tylko dla iPhone’a 5... przynajmniej na razie */ } Teraz przynajmniej składnia ta nie wygląda już zupełnie obco. Cechę device-width widzieli- śmy już w elemencie meta viewport, a device-pixel-ratio — w adaptacyjnych obrazach tworzonych przy użyciu elementu picture. Gdyby tego było mało, zapytania medialne są kuzynami typów mediów wprowadzonych w maju 1998 roku jako jeden z elementów reko- mendacji CSS 2.02. Poznawanie mo(cid:285)liwo(cid:258)ci zapyta(cid:241) medialnych Zapytania medialne zapewniają całkiem sporo możliwości, nawet jeśli będziemy się posłu- giwali wyłącznie cechą device-width. Trzeba jednak pamiętać o tym, że można sprawdzać także inne cechy, a nie jedynie szerokość ekranu urządzenia. Obecnie specyfikacja3 wymienia 2 http://www.w3.org/TR/2008/REC-CSS2-20080411/. 3 http://www.w3.org/TR/css3-mediaqueries/#contents. Kup książkęPoleć książkę 88 Responsywne strony WWW 13 takich cech: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan oraz grid. Mogą one, z wyjątkiem orientation, scan oraz grid, być także poprzedzane prefiksami min- oraz max-. Poziom kontroli, jaki zapewniają nam zapytania medialne, jest inspirujący, choć jed- nocześnie budzi respekt! Jeśli wciąż jesteśmy pełni szacunku dla liczby możliwości, jakie na nas czekają, to musimy zdać sobie sprawę z tego, że zapytania medialne są kontrolowane przez CSS, a twórcy prze- glądarek mogą dodawać do tej listy nowe możliwości, poprzedzając je odpowiednimi pre- fiksami — przykładem jest cecha -webkit-device-min-pixel-ratio stanowiąca dodatek wprowadzony przez firmę Apple i umożliwiająca tworzenie stylów przeznaczonych dla urządzeń z ekranami Retina. Trzeba także pamiętać, że oprócz prefiksu -webkit- jest także wiele innych, których można używać. Oto kilka przykładów: @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and (min—moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and (min-device-pixel-ratio: 2) and (min-width: 320px) { /* style dla małych ekranów Retina lub AMOLED */ } Podobnie jak w przypadku standardowych prefiksów przeglądarek, także i tutaj ostatnia właściwość nie ma żadnego prefiksu — została ona podana w nadziei, że kiedyś prefiksy te nie będą potrzebne i do określenia docelowej grupy urządzeń wystarczy sama właściwość. Dawno już minęły czasy, gdy rozwiązaniem wszelkich problemów było używanie typu handheld. Obecnie trzeba uwzględniać i stosować wszystkie możliwe sposoby określania urządzeń docelowych oraz uważnie planować budżet dostępny na stworzenie projektu i sa- mej aplikacji. Zważywszy na ciągłą tendencję do stosowania przesadnie szczegółowych zapytań medialnych, analiza ta staje się coraz to bardziej złożona i trudna. Równocześnie z wprowadzeniem na rynek telefonu iPhone 5 z systemem iOS6 pojawiła się nowa grupa urządzeń, których ekrany mają dodatkowe 176 pikseli wysokości. Jednak jest raczej mało prawdopodobne, byśmy starali się tworzyć style przeznaczone dla tych urządzeń, stosując zapytania max-device-height: 960px. W takim przypadku pominęlibyśmy bowiem wszyst- kie telefony iPhone 5S. Przyjrzyjmy się przykładowi przedstawionemu na rysunku 4.3. To prawda, że dziś możemy odróżniać telefony iPhone 5 od ich poprzedników, używając w tym celu cechy device-height, jednak trzeba by też uwzględnić zagrożenie, że stopka, tak skrupulatnie umieszczona na samym dole ekranu iPhone’a 4S i wcześniejszych modeli tego telefonu, teraz znajdzie się 176 pikseli powyżej dolnej krawędzi ekranu. Oprócz tego skoro iPhone 5 zyskał dodatkowe 176 pikseli wysokości ekranu, to czego możemy oczekiwać po jego kolejnej generacji? Albo po jej następcach? Trzeba wciąż pamiętać o tym, co jest Kup książkęPoleć książkę ZROZUMIE(cid:109) ZAPYTANIA MEDIALNE 89 Rysunek 4.3. Porównanie wielko(cid:258)ci ekranów telefonów iPhone 4 oraz iPhone 5 naszym celem — zaufanie, że nasze style będą działać na wszystkich urządzeniach: zarów- no tych obecnych, jak i przyszłych, i to bez konieczności przepisywania kodu dla każdej nowej wielkości ekranów. W takim razie warto rzucić okiem na składnię używaną do wybierania różnych cech. Lista zapytań medialnych jest łańcuchem znaków, którego fragmenty są od siebie oddzielone przecinkami i który zawiera serię zapytań medialnych precyzyjnie określających cechy do- celowego urządzenia: link rel= stylesheet media= screen and (color), projection and (color) rel= stylesheet href= example.css Jeśli przynajmniej jedno zapytanie umieszczone na tej liście będzie prawdziwe, to przyj- muje się, że cała lista będzie prawdziwa, a wszystkie spełnione cechy zostaną uwzględnio- ne. Na przykład jeśli na liście takiej jak screen and (color), projection and (color) zapytanie screen and (color) będzie prawdziwe, to także cała lista zostanie uznana za prawdziwą. Przecinki oddzielające poszczególne zapytania medialne odpowiadają logicznej alternaty- wie (OR), a każde zapytanie może używać słowa kluczowego AND reprezentującego logiczną koniunkcję. Aby zapytanie z logiczną alternatywą zostało spełnione, musi być dostępna którakolwiek z wymienionych cech, natomiast w przypadku użycia logicznej koniunkcji muszą być dostępne wszystkie wymienione cechy. Poprzednie zapytanie zadziała w sytuacji, gdy aplikacja zostanie uruchomiona na ekranie lub projektorze zdolnym do wyświetlania obrazów w kolorze. Jeśli używane urządzenie spełnia te kryteria, to zostanie zastosowany arkusz stylów podany w elemencie link. Kup książkęPoleć książkę 90 Responsywne strony WWW Aby odrzucić wybraną cechę, należy użyć słowa kluczowego not. Na przykład poniższe za- pytanie zadziała na telefonach iPhone, lecz jedynie na tych, które NIE są wyposażone w ekra- ny Retina; innymi słowy: zadziała na iPhonie 3, lecz nie na iPhonie 5: @media only screen (min-device-width: 640px) and not (-webkit-min-device-pixel-ratio: 2) { /* style dla urządzeń z ekranami o niskiej gęstości */ } Ogólnie rzecz biorąc, składnia zapytań medialnych jest bardzo prosta, czytelna i można ją łatwo zrozumieć, trzeba tylko uważać na te niejawne logiczne alternatywy. Gdyby W3C oraz WHATWG zdecydowały się na przyjęcie elementu picture, a nie atrybutu srcset, to dodatkowe możliwości zastosowania, jakie zyskałyby zapytania medialne, sprawiłyby, że ich poznawanie byłoby jeszcze bardziej warte zachodu. Obs(cid:239)uga cech Z powodzeniem można wiele osiągnąć, stosując wyłącznie zapytania medialne testujące cechy związane z wymiarami ekranów — width, height, device-width oraz device-height. Zapewniają one dwojakie korzyści: są łatwe do zrozumienia i powszechnie obsługiwane przez przeglądarki. Oczywiście łatwo je zrozumieć, jeśli tylko będziemy pamiętać, że width określa szerokość przeglądarki, a device-width — szerokość ekranu zgłaszaną przez urzą- dzenie (rysunek 4.4). Rysunek 4.4. Porównanie cech width oraz device-width Przyjrzyjmy się także pozostałym dostępnym cechom, aby zorientować się, jak można by ich używać. Kup książkęPoleć książkę ZROZUMIE(cid:109) ZAPYTANIA MEDIALNE 91 orientation określenie układu, w jakim działa urządzenie, pozwala na podanie wartości portrait (układ pionowy) lub landscape (układ poziomy) aspect-ratio akceptuje takie wartości, jak 16:9 lub 4:3 resolution scan grid monochrome color color-index określa rozdzielczość wyrażoną jako liczba punktów na cal (DPI — Dots Per Inch) lub liczba punktów na centymetr (DPCM — Dots Per Centimetre) typ ekranów pozwalający na stosowanie stylów przeznaczonych dla odbior- ników telewizyjnych używających skanowania progresywnego odpowiada ekranom Teletype lub urządzeniom używającym tylko jednej czcionki sprawdza liczbę pikseli na piksel w monochromatycznym buforze ramki; w przypadku wartości 0 warunek jest uznawany za niespełniony sprawdza liczbę bitów reprezentujących kolor; w przypadku wartości 0 wa- runek jest uznawany za niespełniony sprawdza liczbę komórek w tablicy kolorów używanej na danym urządze- niu; w przypadku wartości 0 warunek jest uznawany za niespełniony Aby dokładnie opanować te cechy, trzeba szczegółowo poznać proporcje ekranu urządze- nia, jego rozdzielczość, układ, w jakim w tej chwili działa, oraz to, czy jest w stanie wyświe- tlać kolory. Są to zagadnienia doskonale znane osobom, które tworzyły grafiki na potrzeby stron WWW. Także w tym przypadku znów znaleźliśmy się na dobrze znanym gruncie, gdyż specyfikacja HTML5 posługuje się tymi wszystkimi terminami4, opisując standard ję- zyka. Dzięki temu krzywa trudności nauki zapytań medialnych jest znacznie łagodniejsza. Co si(cid:218) sta(cid:239)o z typami mediów? Koniecznie trzeba pami(cid:218)ta(cid:202), (cid:285)e cho(cid:202) w tej ksi(cid:200)(cid:285)ce interesuj(cid:200) nas zagadnienia tworzenia respon- sywnych stron WWW, to jednak s(cid:200) tak(cid:285)e inne czynniki, które mog(cid:200) (i powinny) mie(cid:202) wp(cid:239)yw na nasze aplikacje. Sam fakt stosowania metodologii RWD nie oznacza, (cid:285)e mamy nie zwraca(cid:202) uwagi na zapewnianie wysokiej dost(cid:218)pno(cid:258)ci stron, na tworzenie ró(cid:285)nych wersji j(cid:218)zykowych wi- tryny czy te(cid:285) zapomina(cid:202) o sprawdzeniu, jak b(cid:218)dzie si(cid:218) ona prezentowa(cid:202) na ekranach, które nie s(cid:200) zazwyczaj u(cid:285)ywane do przegl(cid:200)dania stron WWW. W efekcie wykorzystywane zapytania medialne b(cid:218)d(cid:200) zwykle u(cid:285)ywa(cid:202) typu screen, cho(cid:202) trzeba pami(cid:218)ta(cid:202), (cid:285)e s(cid:200) tak(cid:285)e inne mo(cid:285)liwo(cid:258)ci5! Wprawdzie obsługa poszczególnych cech może być różna, ale nawet te, które nie są zwią- zane z wymiarami, mogą być z powodzeniem używane, gdyż stosowana terminologia jest oczywista w przemyśle, do którego jest skierowana. Nie szkodzi, że cechy scan oraz grid 4 https://developer.mozilla.org/en/docs/CSS/Media_queries. 5 http://dev.w3.org/csswg/css3-mediaqueries/#background. Kup książkęPoleć książkę 92 Responsywne strony WWW mogą nie być dobrze znane projektantom tworzącym strony przeznaczone dla komputerów stacjonarnych, są one bowiem dedykowane dla innych urządzeń i będą doskonale znane osobom tworzącym rozwiązania zaprojektowane właśnie dla nich. Na przykład jeśli nasza praca jest związana z tworzeniem aplikacji prezentowanych na odbiornikach telewizyjnych, to będziemy doskonale wiedzieli, czego dotyczy cecha scan oraz czym jest skanowanie pro- gresywne6. Używanie zapytań medialnych oraz list zapytań jest najlepszym sposobem zrozumienia, jak należy się nimi posługiwać, zatem przejdźmy do ćwiczeń praktycznych. Zapytania medialne w dzia(cid:239)aniu Strona Web Directions South (WDS), która wielokrotnie pojawiała się jako przykład w tej książce, od samego początku istnienia używała pewnych zapytań medialnych. Rysunek 4.5 przedstawia nagłówkowe grafiki, używane w przeglądarkach mających więcej oraz mniej niż 800 pikseli szerokości. Rysunek 4.5. Obrazy o wymiarach 1565×690 oraz 800×650 pikseli udost(cid:218)pniane przy wykorzystaniu zapyta(cid:241) medialnych Grafiki te gwarantują, że witryna będzie mieć spójny wygląd, a co ważniejsze, że przeglą- darki będą pobierać możliwie jak najmniej danych. A co jest naszym celem? Spójrzmy na rysunek 4.6. 6 http://pl.wikipedia.org/wiki/Skanowanie_progresywne. Kup książkęPoleć książkę ZROZUMIE(cid:109) ZAPYTANIA MEDIALNE 93 Rysunek 4.6. Nasz cel: stopka witryny WDS w przegl(cid:200)darkach o szeroko(cid:258)ci 1440, 960, 800 oraz 480 pikseli Na witrynie Web Directions South zapytania medialne są stosowane przy wykorzystaniu kombinacji elementów link oraz arkuszy CSS. Rozwiązanie to zapewnia, że pierwszą loka- lizacją, w której rozpoczyna się określanie stylów CSS, jest sekcja head dokumentu, czyli miejsce, gdzie tradycyjnie już są umieszczane odwołania do plików CSS. Na razie wszystkie te odwołania umieścimy w komentarzach: rozdzial04/wds/index.html (fragment) !-- link rel= stylesheet media= all and (max-width: 800px) href= stylesheets/799max.min.css -- !-- link rel= stylesheet media= all and (min-width: 800px) href= stylesheets/800plus.min.css -- !-- link rel= stylesheet media= all and (min-width: 800px) href= stylesheets/panels.min.css -- Jednym z zagadnień, o których należy pamiętać, stosując tę metodę, jest to, że przeglądar- ka będzie pobierać nawet te arkusze stylów, w których warunki określane przez zapytania medialne nie zostały spełnione7. Arkusze te nie zostaną jednak zastosowane, a przeglądar- ka nie pobierze żadnych zasobów, które są w nich używane. Niemniej jednak same arkusze stylów zostaną pobrane, będą zatem mieć wpływ na wydajność działania aplikacji oraz zużycie przepustowości. 7 http://scottjehl.github.com/CSS-Download-Tests/. Kup książkęPoleć książkę 94 Responsywne strony WWW Mamy właśnie zamiar usunąć z naszej przykładowej strony wszystkie używane na niej ar- kusze stylów — jest to rozwiązanie dosyć radykalne, jednak ułatwi nam zmianę struktury stylów. Skoro zapytania medialne używane na produkcyjnej witrynie Web Directions South są umieszczone w nagłówku strony, a dla przeglądarek o mniejszej szerokości wykorzy- stywana jest po prostu właściwość display: none, skoncentrujemy się na sekcji sponsorów umieszczonej w stopce strony. Później wrócimy do usuniętych arkuszy CSS, by odszukać początkowe style określające postać sekcji sponsorów i nie tylko. Chcemy jedynie zmienić strukturę stylów, a nie opracowywać je od nowa. rozdzial04/wds/index.html (fragment) link rel= stylesheet href= stylesheets/reset.css link rel= stylesheet href= stylesheets/sheet.css link rel= stylesheet href= stylesheets/query.css Zapytania medialne wykorzystamy w pliku query.css, w pliku z domyślnymi stylami sheet.css, jak również w ostatnim arkuszu stylów reset.css. Dzięki temu wprowadzimy możliwie naj- mniej zmian w pliku HTML i spróbujemy ułatwić utrzymanie witryny dzięki zastosowaniu sensownych nazw plików. Więcej informacji na temat ostatniego z używanych plików CSS można znaleźć w rozdziale 6., w punkcie „Neutralizacja i normalizacja”, dlatego też w tym rozdziale skoncentrujemy się na stylach umieszczonych w dwóch pierwszych plikach. Jak wiadomo, połączenie zapytań medialnych z domyślnym stylem oznacza, że w efekcie zupełnie za darmo uzyskujemy w naszym domyślnym stylu dodatkowy punkt graniczny (ang. breakpoint). Używamy dwunastu stylów wykorzystujących w selektorze identyfikator sponsors, na szczęście w celu zastosowania zapytań medialnych będziemy musieli zmody- fikować tylko dwa z nich. #sponsors { margin: 2em auto 0 auto; width: 800px; } #sponsors ul li { background-color: #FFF; display: inline-block; float: left; height: auto; margin: 0 0 1.7em 0; min-height: 120px; vertical-align: top; width: 30 ; } W tych dwóch stylach interesować nas będą wyłącznie deklaracje związane z właściwościa- mi width oraz margin, gdyż to właśnie one mają wyznaczać punkty graniczne naszego re- sponsywnego układu: Kup książkęPoleć książkę ZROZUMIE(cid:109) ZAPYTANIA MEDIALNE 95 #sponsors { margin: 2em auto 0 auto; width: 800px; } #sponsors ul li { ... margin: 0 0 1.7em 0; ... width: 30 ; } W pierwszej kolejności zmienimy dotychczasowe style określające postać elementów stop- ki, zgodnie z założeniem, by najpierw tworzyć rozwiązanie przeznaczone dla urządzeń mo- bilnych. Efekt tych zmian przedstawia rysunek 4.7. Rysunek 4.7. Stopka strony wy(cid:258)wietlona w przegl(cid:200)darce o szeroko(cid:258)ci 480 pikseli rozdzial04/wds/stylesheets/sheet.css (fragment) #sponsors { margin: 2em auto 0 auto; width: 480px; } #sponsors ul li { ... margin: 0 5px 1.7em 5px; ... width: 470px; } Jesteśmy na dobrej drodze. Naszym pierwszym zadaniem jest określenie elementu #sponsors w taki sposób, by w razie wyświetlenia strony na urządzeniu mobilnym zawsze miał on 480 Kup książkęPoleć książkę 96 Responsywne strony WWW pikseli szerokości. Właśnie z tego powodu podaliśmy stałe wymiary szerokości oraz mar- ginesów elementów li. Zastosujemy responsywne rozwiązanie, określając punkty gra- niczne, jednak teraz uzyskamy pewność, że w naszym domyślnym stylu elementy zawsze bę- dą miały stałą szerokość, a stała szerokość oznacza, że przeglądarka pozycjonując takie elementy, będzie miała łatwiejsze zadanie. Po wprowadzeniu powyższych zmian w pliku she- et.css zajmiemy się dodaniem do arkusza query.css pierwszego punktu granicznego: rozdzial04/wds/stylesheets/query.css (fragment) @media only screen and (min-width: 480px) and (max-width: 960px) { #sponsors { max-width: 960px; width: 100 ; } #sponsors ul li { margin: 0 0.4 1em 0.8 ; width: 31.5 ; } } Ze względu na to, że do określenia docelowej grupy urządzeń w zapytaniu medialnym uży- liśmy składni @media, dwa selektory zostały odpowiednio wcięte i zagnieżdżone wewnątrz reguły @media. Lista zapytań rozpoczyna się od only screen and, a następnie określa cechy docelowej grupy urządzeń: min-width: 480px oraz max-width: 960px. Uzyskane efekty przedstawia rysunek 4.8. Rysunek 4.8. Stopka strony wy(cid:258)wietlona w przegl(cid:200)darce o szeroko(cid:258)ci 960 pikseli To jest nasz średni punkt graniczny. Będziemy mieli rację, sądząc, że można by pominąć określenie typu mediów oraz cechy min-width i pomimo to uzyskać takie same rezultaty, jednak podanie obu tych cech znacznie ułatwi nam zrozumienie działania punktu granicz- Kup książkęPoleć książkę nego w przyszłości, kiedy będziemy chcieli poprawić lub zmodyfikować style. Powyższą listę zapytań można by skrócić do następującej postaci: ZROZUMIE(cid:109) ZAPYTANIA MEDIALNE 97 @media (max-width: 960px) { ... } Jednak zaleta, jaką jest skrócona postać zapisu, staje się wadą, gdy spojrzymy na powyższy kod pod kątem łatwości utrzymania i modyfikacji. Nieco bardziej rozbudowana forma jest jednocześnie bardziej korzystna: #sponsors { max-width: 960px; width: 100 ; } #sponsors ul li { margin: 0 0.4 1em 0.8 ; width: 31.5 ; } Same deklaracje są zwyczajnym, niezawodnym kodem CSS. Nie ma potrzeby modyfiko- wania właściwości margin w elemencie zawierającym logo sponsorów, dlatego też w arku- szu nie ma deklaracji z tą właściwością; zamiast niej dodaliśmy deklarację max-width: 960px, a właściwości width przypisaliśmy wartość 100 . Jak wiemy z wcześniejszych rozważań dotyczących siatek, takie rozwiązanie sprawia, że element staje się płynny i na wszystkich ekranach o szerokości pomiędzy 480 i 960 pikseli stopka będzie zajmowała całą dostępną szerokość. Aby wykorzystać ten fakt, zapewnimy także responsywność elementów li — w tym celu określimy ich szerokość, używając wartości procentowych, i trochę się z nimi pobawimy, by zmaksymalizować uzyskiwany efekt. Chcemy, by elementy były możliwie jak najszersze, a jednocześnie by nie pojawiały się błędy zaokrągleń opisane w rozdziale 2., w uwadze „Diabeł tkwi w szczegółach”. Jeśli zsumujemy szerokość elementu oraz wielkości jego po- ziomych marginesów, to uzyskamy 31,5 + 0,4 + 0,8 = 32,7 procent. Dysponujemy zatem „buforem bezpieczeństwa” o szerokości 0,3 procent, który umożliwi nam zniwelowanie ewentualnych różnic w zaokrągleniach w różnych przeglądarkach. Koniecznie trzeba pa- miętać, że — z wyjątkiem czytelników tej książki oraz naszego zespołu — mało kto będzie próbował modyfikować szerokość okna przeglądarki, by sprawdzić, jak zmieni się wtedy układ strony. Większość osób zadowoli się wysiłkami, które podjęliśmy, by zapewnić, że wyświetlana strona będzie możliwie najlepsza. Na przykład gdyby ktoś powiększył okno przeglądarki, nadając mu szerokość przekracza- jącą 960 pikseli (co pokazuje rysunek 4.9), to zostałby zastosowany ostatni z trzech określo- nych przez nas punktów granicznych. Kup książkęPoleć książkę 98 Responsywne strony WWW Rysunek 4.9. Stopka wy(cid:258)wietlona w przegl(cid:200)darce o szeroko(cid:258)ci 1024 pikseli rozdzial04/wds/stylesheets/query.css (fragment) @media only screen and (min-width: 960px) { #sponsors { max-width: 1280px; width: 100 ; } #sponsors ul li { margin: 0 0.5 1em 0.6 ; width: 23.5 ; } } Także w tym przypadku zastosowane style zapewniają elastyczność układu i elementów, choć pojawiły się w nich pewne korzystne różnice. Przede wszystkim zamiast nadawać ele- mentowi sponsors szerokość odpowiadającą maksymalnej szerokości naszego punktu gra- nicznego, nadaliśmy mu stałą szerokość 1280 pikseli. Oznacza to, że jeśli szerokość okna przeglądarki nie przekroczy 1280 pikseli, element sponsors będzie zajmował całą dostępną szerokość strony. Kiedy jednak okno przeglądarki przekroczy 1280 pikseli szerokości, to szerokość elementu sponsors nie będzie się dalej powiększać, a marginesy określone w pli- ku sheet.css spowodują, że zostanie on wyśrodkowany (jak pokazaliśmy na rysunku 4.10). Druga zmiana polega na tym, że zrezygnowaliśmy z wyświetlania trzech sponsorów w jed- nym wierszu na rzecz wyświetlania czterech, choć wciąż korzystamy z tego samego respon- sywnego rozwiązania. Sumaryczna szerokość elementu wynosi 23,5 + 0,5 + 0,6 = 24,6 procent, co daje nam bufor bezpieczeństwa wielkości 0,4 procent. Nieliczni spośród użytkowników, którzy zdecydują się na zmianę szerokości okna przeglądarki, będą mieli okazję zauważyć, że nasz układ zmienia się dynamicznie od jednej kolumny z logo sponsorów, poprzez trzy kolumny aż do czterech kolumn w oknach o największej szerokości. W ten sposób wszyscy są zadowoleni — sponsorzy, gdyż przeznaczamy na prezentację ich logo maksymalny obszar ekranu, i użytkownicy, dlatego że niezależnie od szerokości okna przeglądarki, czytelnie prezentowane logo stanowią doskonały obiekt zainteresowania. Kup książkęPoleć książkę ZROZUMIE(cid:109) ZAPYTANIA MEDIALNE 99 Rysunek 4.10. Stopka wy(cid:258)wietlona w przegl(cid:200)darce o szeroko(cid:258)ci 1440 pikseli Dzięki zdecydowaniu się na wykorzystanie kombinacji punktów granicznych oraz płynne- go układu strony udało się nam zoptymalizować jej interfejs pod kątem możliwie najwięk- szej liczby czynników. Udało nam się również spełnić oczekiwania zarówno sponsorów, jak i użytkowników, a zastosowane rozwiązanie korzystające z metodologii RWD zapew- nia także tę zaletę, że nie musimy projektować odrębnych układów dla każdego z istnieją- cych ekranów. Choć punkty graniczne mogą się wydawać sposobem na to, by projektanci ponownie odzyskali kontrolę nad układem na niebezpiecznym gruncie bezustannie roz- wijanych urządzeń, zdecydowaliśmy się w pełni wykorzystać ich możliwości, a nie jedynie ograniczyć się do serii stałych układów strony. Skoro dotarliśmy już do tego miejsca, to zanim nasze modyfikacje będą gotowe do wdro- żenia na produkcyjnej witrynie, zostaje nam do zrobienia jeszcze jedna rzecz. Okazuje się, że choć dzięki zapytaniom medialnym nasza witryna może się podobać tak szerokiemu gro- nu użytkowników, to jednak istnieje pewna grupa, która jest traktowana po macoszemu. Jeśli użytkownicy wciąż korzystają z przeglądarki Internet Explorer w wersji wcześniejszej niż dziewiąta, to nie będą mogli skorzystać z efektów zastosowania zapytań medialnych, ponieważ obsługa wybranych możliwości CSS38 została dodana dopiero w przeglądarce IE9. Jak sobie poradzić z tym problemem? Oczywiście możemy zachęcać naszych użytkowników do zainstalowania nowszej wersji przeglądarki, jednak gdyby to było możliwe, zapewne już by to zrobili. Moglibyśmy uzupełnić możliwości przeglądarki, stosując rozwiązanie skryptowe, takie jak skrypt Respond.js9 Scotta Jehla, zapewniający możliwość stosowania zapytań medialnych testujących minimalną i maksymalną szerokość nawet w starszych przeglądarkach. Oczywi- stą wadą takiego rozwiązania jest dodatkowe wydłużenie czasu pobierania stron w przeglą- darkach, które i tak nie należą do najszybszych. Zważywszy na to, że biblioteka Modernizr 8 http://caniuse.com/css-mediaqueries. 9 https://github.com/scottjehl/Respond. Kup książkęPoleć książkę 100 Responsywne strony WWW zaczynając od wersji 2.5, zrezygnowała z użycia skryptu Respond.js, także i my zrezygnuje- my z niego na rzecz innego rozwiązania. Nasze rozwiązanie opiera się na pomyśle, że starsze wersje przeglądarki Internet Explorer mogą działać wyłącznie na komputerach stacjonarnych i laptopach. Możemy zatem skorzy- stać z komentarzy warunkowych Internet Explorera, by zastosować w tych przeglądarkach układy o stałej szerokości i wykorzystać ich zalety: rozdzial04/wds/index.html (fragment) !--[if lt IE 9] link rel= stylesheet type= text/css href= stylesheets/ielt9.css ![endif]-- A to zawartość arkusza stylów: #sponsors { width: 960px; } #sponsors ul { padding-left: 3px; } #sponsors ul li { margin: 0 6px 15px 6px; width: 302px; } rozdzial04/wds/stylesheets/ielt9.css (fragment) Style zastosowane w tych przeglądarkach opierają się na płynnym układzie o szerokości 960 pikseli, choć sam układ został zmodyfikowany tak, by miał stałą szerokość. W tym celu usunęliśmy wartości procentowe w szerokościach i marginesach, zastępując je konkretny- mi wielkościami podanymi w pikselach. Odpowiada to możliwościom tych starszych prze- glądarek (na przykład Internet Explorera przedstawionego na rysunku 4.11), zatem dostar- czamy ich użytkownikom stronę o najlepszej postaci, jaką jesteśmy w stanie przygotować. Reagujemy na możliwości, jakimi dysponuje użytkownik, a w tym przypadku reakcja ta po- lega na wybraniu układu o stałej szerokości. Dodawanie punktów granicznych Zgodnie z informacjami opublikowanymi na witrynie Responsive Images Community Group10, punkt graniczny jest logicznym odzwierciedleniem cech medium, które aktualizu- je style używane na stronie: „Pojedynczy punkt graniczny reprezentuje regułę (lub grupę 10 http://usecases.responsiveimages.org/#design-breakpoints. Kup książkęPoleć książkę ZROZUMIE(cid:109) ZAPYTANIA MEDIALNE 101 Rysunek 4.11. Stopka naszej witryny wy(cid:258)wietlona w starej przegl(cid:200)darce Internet Explorer reguł) określającą punkt, w którym zawartość danego zapytania medialnego zostaje zasto- sowana w układzie strony”. Mimo że nie jest to oficjalna specyfikacja, zrozumienie jej wcale nie jest proste. Najszybciej będziemy w stanie pojąć, o co w tym chodzi, jeśli wyobrazimy sobie punkty graniczne jako miejsca, w których nasz projekt ulega zmianie. Jeszcze raz wróćmy do przy- kładu witryny Web Directions South. Jak widać na rysunku 4.12, gdy szerokość okna prze- glądarki zmniejszy się do 960 pikseli, czterokolumnowy układ strony ulega zmianie — punkt graniczny zostaje przekroczony, a strona zaczyna korzystać z układu trójkolumnowego. Rysunek 4.12. W momencie przekroczenia punktu granicznego i zmniejszenia szeroko(cid:258)ci do 960 pikseli uk(cid:239)ad czterokolumnowy zostaje zast(cid:200)piony uk(cid:239)adem trójkolumnowym Oczywiście w tym przypadku używana jest tylko jedna reguła, jednak dodawanie kolejnych punktów granicznych nie sprawia, że stają się one trudniejsze do zrozumienia — powięk- sza tylko ich liczbę. Poza tym może nasza witryna będzie używała znacznie więcej stylów Kup książkęPoleć książkę 102 Responsywne strony WWW przeznaczonych dla konkretnych urządzeń niż tylko jeden? Wprost przeciwnie! Nawet jeśli ograniczymy się wyłącznie do sprawdzania szerokości, może nas kusić, by zastosować aż sześć punktów granicznych: 320px, 480px, 600px, 768px, 1024px oraz 1280px. Korzystając wyłącznie z tych punktów, bylibyśmy w stanie obsłużyć szeroką gamę urządzeń, posługując się przy tym obecnie używanymi, standardowymi szerokościami (wyrażonymi w pikselach). 320px 480px 600px urządzenia mobilne działające w układzie pionowym urządzenia mobilne działające w układzie poziomym małe tablety 768px 1024px 1280px i więcej tablety działające w układzie pionowym tablety działające w układzie pionowym, netbooki, komputery stacjonarne duże komputery stacjonarne A zatem gdybyśmy chcieli wykorzystać wszystkie te szerokości, nasze elementy link mo- głyby mieć następującą postać: link rel= stylesheet media= only screen and (max-device-width: 320px) href= tiny.css link rel= stylesheet media= only screen and (max-device-width: 480px) href= small.css link rel= stylesheet media= only screen and (max-device-width: 960px) href= medium.css link rel= stylesheet media= only screen and (max-device-width: 1024px) href= large.css link rel= stylesheet media= only screen and (min-device-width: 1280px) href= extralarge.css Dobór odpowiednich punktów granicznych może być trudny: jeśli wybierzemy ich zbyt wiele, to utrzymanie witryny mogłoby się stać zbyt kłopotliwe, z kolei jeśli wybierzemy ich zbyt mało, to w efekcie strona nie będzie wyglądać dostatecznie dobrze na urządzeniach, których nie uwzględnialiśmy podczas projektowania. Jako absolutne minimum należy sto- sować dwa punkty graniczne: mały (przeznaczony dla wszystkich urządzeń poniżej 480 pikseli szerokości) oraz duży (dla wszystkich pozostałych przypadków). Właśnie takie po- stępowanie jest przykładem projektowania z myślą o urządzeniach mobilnych. Kiedy już uda się nam dopracować te dwa układy, pozostaje pytanie: co zrobić z większymi ekranami? Przekonajmy się, w jaki sposób podzieliliśmy je na średnie, duże i bardzo duże. Układ dla ekranów średnich obejmuje zakres szerokości od 480 do 960 pikseli — jego gór- ną granicę znamy z wcześniejszych rozważań dotyczących siatek. W dużym stopniu układ Kup książkęPoleć książkę ZROZUMIE(cid:109) ZAPYTANIA MEDIALNE 103 ten będzie używany w przeglądarkach, które nie działają w trybie pełnoekranowym, jak rów- nież na wielu urządzeniach przenośnych, zwłaszcza tabletach, takich jak iPady lub urządze- nia Kindle. W tych przypadkach niezwykle pomocny okazuje się element meta viewport, pozwalający dostosować układ o szerokości 960 pikseli do pracy na urządzeniach o mniej- szych ekranach, takich jak iPady działające w układzie pionowym, których ekran ma szero- kość 768 pikseli: meta name= viewport content= width=device-width, initial-scale=1.0 Kolejny, duży punkt graniczny obejmuje większość komputerów stacjonarnych, laptopów oraz tablety działające w układzie poziomym. Zaczyna się on na 960 pikselach szerokości, a kończy na 1280 pikselach. W ten sposób ostatni punkt graniczny — bardzo duży — obej- muje szerokości powyżej 1280 pikseli. Do tej kategorii zaliczają się nowoczesne monitory komputerów stacjonarnych o wielkości powyżej 20 cali, wysokiej klasy laptopy o szerokich ekranach i najnowsze tablety. Te trzy punkty graniczne definiowane przy użyciu zapytań medialnych, w połączeniu z czwartym punktem korzystającym z domyślnych stylów przeznaczonych dla urządzeń mobilnych, wyznaczają cztery grupy ekranów zilustrowane na rysunku 4.13. Zapewniają one solidną obsługę niemal wszystkich naszych użytkowników. Rysunek 4.13. Nasze cztery punkty graniczne i urz(cid:200)dzenia, z my(cid:258)l(cid:200) o których by(cid:239)y tworzone Kup książkęPoleć książkę 104 Responsywne strony WWW Powyżej tej granicy przekraczamy punkt malejących dochodów i stajemy wobec problemu określenia równowagi pomiędzy kosztami a zyskami z inwestycji, jakim jest dodawanie ko- lejnych punktów granicznych. Moglibyśmy dodać kolejny, bardzo mały punkt graniczny dla ekranów o szerokości poniżej 320 pikseli, lub jeszcze jeden punkt — pośredni dla szero- kości 768 pikseli, który pozwoliłby dostosować witrynę do potrzeb siedmiocalowych table- tów. Jednak w związku z wykorzystywaniem w tabletach ekranów o coraz większej gęstości i coraz większych możliwościach tworzenie tak szczegółowych punktów granicznych je- dynie zwiększyłoby nakłady pracy konieczne do utrzymania witryny, nie dając w zamian dużych korzyści. Niemniej jednak jeśli tworzone aplikacje są przeznaczone dla bardzo sze- rokiego grona użytkowników urządzeń mobilnych (wśród których mogą się także znaleźć posiadacze urządzeń starych lub o gorszej specyfikacji), to wykorzystanie tych dwóch do- datkowych punktów granicznych (bardzo małego i pośredniego) może być uzasadnione. Dobór punktów granicznych Należy dokładnie określić docelową grupę urządzeń, z myślą o których będziemy tworzyć naszą aplikację, i oszacować, czy zyski wynikające ze sposobu, w jaki użytkownicy będą z niej korzystać, pozwolą zrównoważyć koszty. To bardzo ważne, nawet jeśli zdecydujemy się używać tylko paru punktów granicznych lub jakiejś kombinacji pięciu punktów wymie- nionych powyżej: bardzo małego, małego, średniego, dużego i bardzo dużego. Dokładna analiza opłacalności staje się jeszcze ważniejsza, gdy zdecydujemy się porzucić bezpieczeństwo, jakie dają nam punkty graniczne, i w jeszcze większym stopniu dostoso- wać naszą aplikację do konkretnych urządzeń. W bardzo wielu, lub nawet w przeważającej większości przypadków wykorzystanie trzech spośród pięciu wymienionych wcześniej punktów granicznych zapewni nam dostatecznie duży zakres obsługi użytkowników. Nie oznacza to jednak, że zastosowanie bardziej szcze- gółowego rozwiązania nie gwarantuje naszej aplikacji korzyści. Przyjrzyjmy się zatem so- lidnemu zestawowi zapytań medialnych, który będzie w stanie zapewnić obsługę szerokiego zakresu urządzeń, i to nawet bez zbytniego angażowania się w obsługę urządzeń z ekrana- mi Retina i AMOLED. Opracowanie stylów i zaprojektowanie układów strony dla każdego z przedstawionych poniżej 12 punktów granicznych okazałoby się zadaniem tytanicznym, a ich późniejsze utrzymanie byłoby równie onieśmielające: /* NIEWIELKIE TELEFONY Z SYSTEMEM ANDROID, TELEFONY SPECJALISTYCZNE – UKŁAD POZIOMY */ @media only screen and (max-width: 240px) { ... } /* SMARTFONY – UKŁAD PIONOWY I POZIOMY */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px), only screen and (min-width: 320px) and (max-width: 480px) { ... } Kup książkęPoleć książkę ZROZUMIE(cid:109) ZAPYTANIA MEDIALNE 105 /* SMARTFONY – UKŁAD POZIOMY */ @media only screen and (min-width: 321px) { ... } /* SMARTFONY – UKŁAD PIONOWY */ @media only screen and (max-width: 320px) { ... } /* IPADY, TABLETY – UKŁAD PIONOWY I POZIOMY */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (min-width: 768px) and (max-width: 1024px) { ... } /* IPADY, TABLETY – UKŁAD POZIOMY */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { ... } /* IPADY, TABLETY – UKŁAD PIONOWY */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { ... } /* TABLETY, KOMPUTERY STACJONARNE I LAPTOPY */ @media only screen and (min-width: 960px) { ... } /* KOMPUTERY STACJONARNE I LAPTOPY */ @media only screen and (min-width: 1024px) { ... } /* KOMPUTERY STACJONARNE I LAPTOPY */ @media only screen and (min-width: 1224px) { ... } /* DUŻE EKRANY */ @media only screen and (min-width: 1824px) { ... } /* EKRANY RETINA I AMOLED */ @ media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { ... } Kup książkęPoleć książkę 106 Responsywne strony WWW Zastosowanie powyższych punktów granicznych zapewniłoby naszemu zespołowi zajęcie na czas dłuższy, a poza tym stanowiłoby całkiem poważne wyzwanie. Znacznie lepszym roz- wiązaniem byłoby wykorzystanie mniejszej liczby punktów i aktywne poszukiwanie tych, które można by uznać za przestarzałe i odrzucić, gdyż koszty ich utrzymania byłyby więk- sze od zysków. Gdyby się okazało, że wymienione wcześniej punkty graniczne nie spełnia- ją naszych oczekiwań i potrzeb, to nic nie stoi na przeszkodzie, by wybrać inny podzbiór wymienionych 12 punktów. Jeśli koncentrujemy się na rynku urządzeń mobilnych, to prawdopodobnie moglibyśmy do- kładniej określić zestaw niezbędnych punktów granicznych, jednak ograniczenie ich liczby jest równie ważne jak używanie składni zapytań medialnych. Istnieje tylko jedna żelazna reguła dotycząca liczby stosowanych punktów granicznych — zaleca ona, by przestać do- dawać kolejne, gdy tylko zadowoli nas liczba użytkowników aplikacji. Sprosta(cid:202) zadaniu Spośród wszystkich technicznych filarów metodologii RWD zapytania medialne są najbar- dziej rozpowszechnione i najlepiej obsługiwane. Co więcej, z punktu widzenia projektowa- nia aplikacji zapewniają one rozsądne zyski z poniesionych nakładów i możliwość użycia nawet w już istniejących aplikacjach w celu poprawienia ich atrakcyjności. Choć faktycznie obsługa zapytań medialnych w starszych przeglądarkach jest raczej kiepska, należy pamiętać, że przeglądarki te są stosowane w coraz to mniejszym gronie użytkowni- ków komputerów stacjonarnych. Zapytania medialne są oparte na CSS i mogą być używane w przeglądarkach obsługujących tę technologię, dlatego eksperymenty przeprowadzane przez twórców przeglądarek dopro- wadziły do uzyskania takiego poziomu kontroli, który wyraźnie pokazuje ogromne możli- wości, jakie daje stosowanie prefiksów przeglądarek. Oczywiście taki poziom kontroli sprawia, że trudno jest uniknąć pokusy zastosowania zapytań medialnych w celu dodawania coraz to nowych punktów granicznych. Jednak opierając się pędowi do nadużywania punktów gra- nicznych i stosując wybrane punkty w stałych układach, projektanci mogą uzyskać możli- wości tworzenia fantastycznych rozwiązań zaprojektowanych pod kątem użytkowników. Sami będziemy sobie wdzięczni, jeśli opanujemy chęć nadużywania punktów granicznych i skupimy się na wykorzystaniu tylko wybranych spośród nich. Dzięki temu łatwiej będzie zarządzać stosowanymi zapytaniami medialnymi i skoncentrować się na tworzeniu wspa- niałych stron dla tych punktów granicznych, których zdecydowaliśmy się użyć. Kup książkęPoleć książkę Skorowidz 320 and Up, 29, 50, 53, 56, 57, 134 960 Grid System, 50, 51, 133 960.gs, 17 adres URI, 120 A B Balsamiq, 50 biblioteka Modernizr, Patrz: Modernizr wersja, 146 boilerplate, Patrz: szablon Bootstrap, 50, 52, 53, 58, 63, 132, 139 Bootswatch, 53 Boulton Mark, 54, 108 Bower, 146 C Chrome, 30, 68 Chrome Frame, 131 Clarke Andy, 57, 134 CSS, 17, 24, 58, 68, 85 image-set, 68, 70 na podstawie zapytań medialnych, 85 neutralizacja, 134, 138, 139 normalizacja, 138 preprocesor, 143 reguła @import, 85 upraszczanie, 25 CSS reset, Patrz: CSS neutralizacja czcionka, 38 skalowanie, 39 wielkość domyślna, 41, 42 względna, 39, 40 D DOM, 24, 51, 143 domena, 120 E ekran AMOLED, 67, 104 bardzo duży, 102, 103 cechy, 87, 90 duży, 102, 103 Retina, 67, 68, 88, 104 rozdzielczość, 13, 18, 38, 90 powiększona, 18, 67, 68, 69 średni, 102 telewizora, 13, 91 wymiar, 13, 18, 30, 33, 38, 74, 90 element article, 24 aside, 73 body, 41 div, 26, 71 img, 71, 75, 78 atrybut srcset, 74, 75, 76, 77, 79, 90 li, 97 link, 85 meta viewport, 15, 30, 87, 103 nav, 73 picture, 71, 73, 74, 78, 87, 90 section, 24, 73 source, 71, 78 video, 78 F Firefox, 68 Fireworks, 50 Flash, 116, 117, 135 fluid grid, Patrz: siatka płynna Foundation, 132 funkcja image-set, 68, 70 G Density-Independent Pixels, Patrz: DIP DIP, 69 Django, 123 GitHub, 52 Google TV, 14 Gridset, 50, 54, 55 Kup książkęPoleć książkę 150 Responsywne strony WWW H H5BP, 131, 139, 141 Hickson Ian, 74 HTML, 17 HTML5, 18, 19, 72, 73 standard, 24, 76 wideo, 117 HTML5 Boilerplate, 56, 131, 139, 141 HTML5 Mobile Boilerplate, 131 HTML5 Rocks, 18 I Initializr, 131 interfejs graficzny WYSIWYG, 55 JavaScript, 29, 121, 142 zarządzanie, 146 jednostki em, 40 punkt, 41 rem, 40 względne, 39, 40 Jehl Scott, 70, 99 język PHP, 124 jQuery, 142, 146 J K klasa, 24 komentarz warunkowy, 29 krój pisma, Patrz: czcionka, typografia L Lawson Bruce, 73 lazy loading, Patrz: wczytywanie leniwe LESS, 143 logika biznesowa, 124 M Marcotte Ethan, 14, 15, 38 Mayerweb Reset, 139 media query, Patrz: zapytanie medialne menedżer pakietów, 146 metadane, 109, 112, 113, 114, 116, 134 metaprogramowanie, 143 Microjs, 146 mobile-first design, Patrz: projektowanie na urządzenie mobilne Modernizr, 29, 99, 141, 146 MooTools, 142 N neutralizacja, 134, 138, 139 normalizacja, 138 normalize.css, 139 O O’Connor Ted, 74 obraz adaptacyjny, Patrz: obraz responsywny responsywny, 14, 15, 16, 18, 32, 67, 72, 79 lista łańcuchów, 74 obsługiwany skryptowo, 70 źródło, 18, 72, 74, 75, 76 odbiornik telewizyjny, Patrz: ekran telewizora Omnigraffle, 50 Opera, 68 osoba niedowidząca, 40 P Photoshop, 50 PHP, 124 Picturefill, 70, 72, 79 piksel niezależny od gęstości, 69 plik .gitignore, 135 .htaccess, 134 base.css, 139 CONTRIBUTING, 135 crossdomain.xml, 135 Gemfile, 135 humans.txt, 135 konfiguracyjny, 134 LICENSE, 135 package.json, 135 readme, 135 requirements.txt, 135 robots.txt, 134 zależności, 135 Kup książkęPoleć książkę SKOROWIDZ 151 preprocesor CSS, 143 preprocessing, Patrz: przetwarzanie wstępne projektowanie na urządzenie mobilne, 28, 29, 56, Patrz też: urządzenie mobilne responsywnych stron WWW, Patrz: RWD Prototype, 142 przeglądarka Chrome, Patrz: Chrome domyślna wielkość czcionki, 41, 42 prefiks, 68, 88 różnice zaokrągleń, 37 Safari, Patrz: Safari statystyki, 30 trasowanie, 121 przetwarzanie wstępne, 143, 144 punkt graniczny, 100, 101, 102, 103 dobór, 104 R RC, Patrz: treść dynamiczna reguła @import, 85 Respond.js, 29, 56, 99 responsive content, Patrz: treść dynamiczna Responsive Images Community Group, Patrz: RICG responsive web design, Patrz: RWD RICG, 73, 76, 78, 79 Ruby on Rails, 124 RWD, 13, 120 metodologia, 13, 14, 15, 16, 20, 23, 28, 32, 34, 67, 85 S Safari, 30, 68 Sass/SCSS, 143, 144 SCL, 118, 119 Selective Content Loading, Patrz: SCL selektor, 26 Semantic Grid System, 133 siatka płynna, 14, 15, 16, 21, 32, 33, 34, 38, 65 system, 50 tworzenie, 46, 47 złota proporcja, 48, 49 Silverlight, 135 Siri, 14 Skeleton, 133 skrypt JavaScript, Patrz: JavaScript Picturefill, 70, 72, 79 polyfill, 70, 72 srcset-polyfill, 79 Smith Nathan, 50 Smus Boris, 79 sterowanie głosem, 14 struktura, 109, 110, 112 dokumentu, 109 hierarchia, 111 supporting content, Patrz: treść wspomagająca system kontroli wersji, 135 zarządzania treścią, 116 szablon, 129 gotowy, 130, 132, 133 trasowanie, 123, 124 tworzenie, 130, 134, 142 udostępnianie, 147 T tablet, 13, 103, 119 technologia Siri, Patrz: Siri TLDRLegal, 147 treść dynamiczna, 16, 20, 21, 27, 32, 107, 124, 125, 126 tworzenie, 116 usuwanie, 116 wczytywanie, Patrz: wczytytwanie elastyczna, Patrz: treść dynamiczna multimedialna, 115 wspomagająca, 109, 115 Twitter, 52, 107 typografia, 17 płynna, 38, 39, 40 punkt, 41 U układ płynny, 16 urządzenie HiDPI, 67 mobilne, 13, 15, 28, 33, 103, 106, 107, 119, 131, 134 w układzie pionowym, 13, 30 Kup książkęPoleć książkę 152 Responsywne strony WWW W W3C, 73, 76 wczytywanie, 117 leniwe, 118 selektywne, Patrz: SCL WHATWG, 73, 74, 79 wideo, 117 WrapBootstrap, 53 wyszukiwarka, 51 wzorzec MVC, 124 Y YUI, 142 Z zapytanie medialne, 14, 15, 16, 19, 21, 29, 32, 85, 87, 92, 106, 121 IE, 29 testujące wymiar ekranów, 90, 99 Zepto, 142 złota proporcja, 48, 49 (cid:191) żądanie XHR, 118, 119 XMLHttpRequest, 118 Kup książkęPoleć książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Responsywne strony WWW. Technologia na start!
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: