Responsive Web Design

Transkrypt

1 Responsive Web Design Liczba użytkowników i funkcji urządzeń mobilnych wzrasta wykładniczo. Przeglądarki mobilne mogą teraz wyświetlać strony internetowe tak dobrze jak przeglądarki komputerów stacjonarnych, więc sporo ludzi przegląda strony internetowe na telefonach i tabletach. Projektanci zmuszeni są myśleć o nowych sposobach dostarczania stron dla użytkowników mobilnych; możemy zdecydowanie nie polegać na siatce statycznej, ponieważ rozmiary urządzeń mobilnych są zbyt różne. W 2010roku, Ethan Marcotte wymyślił sposób na tą sytuację,nazwaną Responsive Web Design [RWD], które stało się popularną praktyką projektowania stron internetowych celem dostarczania stron internetowych o różnych rozmiarach. Podstawowy RWD RWD zasadniczo pozwala witrynie reagować lub adaptować do różnych rozmiaru wyświetlaczy, mniejszych lub większych, bez konieczności określania specyficznej domeny/subdomeny dla ludzi używających urządzeń mobilnych. Wygląd i funkcjonalność witryny można utrzymać,aby mieć podobne doświadczenie przy różnego rozmiaru urządzeniach. Jest to możliwe przy użyciu meta znacznika viewport i zapytań mediów CSS Meta znacznik viewport i zapytania mediów CSS Witryna reagująca jest zbudowana głównie z dwóch elementów. Pierwszym składnikiem jest meta znacznik viewport. Znacznik ten jest umieszczony wewnątrz znacznika < head >i jest używany do sterowania skalą strony internetowej. Na przykład dodając meta znacznik viewport z initial-scale ustawionym na 1, spowodujemy,że strona internetowa będzie skalowana o 100 procent rozmiaru viewport po otwarciu go po raz pierwszy: <meta name="viewport" content="width=device-width, initial-scale=1"> Drugim elementem są zapytania mediów CSS, które określają style dla określonych rozmiarów viewport. Na przykład poniższy fragment kodu pokazuje jak można ukryć obrazy, kiedy rozmiar viewport jest między 321 a 480 screen and (min-width: 321px) and (max-width: 480px) { img { display: none; Ograniczenia Responsive Web Design W tym miejscu, RWD, nie jest całkiem perfekcyjny. istnieje kilka problemów do rozwiązania, w tym dopasowanie obrazu. Obecną praktyką dostosowania obrazu jest skalowanie go w taki sposób aby dopasować max-width viewport na 100% lub ewnetualie ukryć go z display : none kiedy obraz nie jest konieczny. Problem z tą praktyką polega na tym,że zmienia ona jedynie prezentację obrazu na powierzchni, podczas gdy rzeczywisty obraz w dokumencie HTML pozostaje nienaruszony. Oznacza to,że użytkownicy nadal będą pobierać obraz o takiej same rozdzielczości, o większym rozmiarze, niezależnie od rozmiaru urządzenia i rozmiaru pola widzenia, co spowoduje zmarnotrawienie zużycie pasma i może zaszkodzić wydajności strony na urządzeniu mobilnym Responsywny obraz z elementem obrazu

2 Ostatnio, World Wide Web Consortium (W3C),grupa nazwana Responsive Image Community Group, zaproponowała nowy element nazwany < picture > w celu rozwiązania problemu. Element < picture > umożliwia dostarczenie odpowiedniego rozmiaru obrazu i rozdzielczości w oparciu o konkretną sytuację. Spójrzmy na poniższy fragment kodu: <picture alt="responsive images"> <source src=big.jpg media="min-width:768px"> <source src=medium.jpg media="min-width:320px"> <source src=small.jpg> <img src=medium.jpg alt="responsive images"> </picture> Poprzedni fragment kodu dostarcza plik obrazu big.ipg o wysokiej rozdzielczości i prawdopodobnie o szerszej szerokości tylko wtedy gdy podgląd ma minimum 768 pikseli, natomiast plik obrazu medium.jpg o niższej rozdzielczości i rozmiarze zostanie dostarczony kiedy podgląd mam minimum 320 pikseli. Gdy te warunki nie zostaną spełnione, zostanie dostarczony mniejszy obraz small.jpg. Wreszcie, na dole listy mamy jeszcze jeden obraz z elementem < img >; jest dodatkowo wykorzystywany do tworzenia kopii obrazu dla przeglądarek, które nie wspierają elementu < picture >. Zobaczmy,jak możemy wykorzystać ten element w sytuacji, gdy skalowanie obrazu nie jest odpowiednim podejściem. Powiedzmy,że mamy bardzo szeroki obraz,taki jak panorama i chcemy użyć go jako nagłówka w naszej witrynie. Kiedy zobaczymy ten obraz na monitorze, najprawdopodobniej nie będzie żadnego problemu i obraz będzie widoczny. Jednak,kiedy oglądamy te obrazek w mniejszym podglądzie, obraz jest zbyt wąski a ludzie na zdjęciu ledwie widoczni, Jeśli na obrazie znajduje się tekst, czytanie będzie trudne. W takim przypadku bardziej rozsądne byłoby wyświetlenie różnych proporcji obrazu, niż skalowanie obrazu i używanie elementu < picture >. Wprowadzenie do struktury RWD Oczywiście,czy jesteś początkującym projektantem czy ekspertem, stworzenie elastycznej strony internetowej od podstaw może być skomplikowane. Jest tak prawdopodobnie ze względu na pewne niezbędne kwestie techniczne w RWD, takie jak określenie odpowiedniej liczby kolumn w siatce i obliczanie procentu szerokości każdej kolumny, określanie właściwego punktu przerwania i innych technikaliów, które zwykle pojawiają się na etapie rozwoju. Dlatego będziemy używać struktury/szkieletu, który sprawi,że wielce nam to pomoże. Dlaczego używać struktury? Oto kilka powodów, dla których korzystanie ze struktury jest dobrym wyborem: Oszczędność czasu: Jeśli zrobisz dobrze, użycie struktury może oczywiście oszczędzić wiele czasu. Struktura generalnie zawiera predefiniowane style i reguły, takie jak szerokość siatki, style przycisków, rozmiar czcionek, reset CSS i inne aspekty budowania strony internetowej. Więc nie musimy powtarzać tego samego procesu od początku ale po prostu postępujemy zgodnie z instrukcjami dla stosowania styli i znaczników Wspólnota i rozszerzenie : Popularne struktury najprawdopodobniej mają aktywną społeczność, która rozszerza funkcjonalności struktury. jquery UI Bootstrap jest być może dobrym tego przykładem; jest motyw jquery UI pasujący do wyglądu i motywu oryginalnego

3 motywu Bootstrap. Również Skeleton,ma rozszerzenie do motywów WordPressa; również Drupal Kompatybilność między przeglądarkami : To zadanie zapewnienia aby wyświetlenie strony internetowej w różnych przeglądarkach nie było bolesne. Ze strukturą, możemy zminimalizować ten problem, ponieważ programiści wykonali już tę pracę, nim framework został wydany. Został oto przetestowane w przeglądarkach ios. Android i Windows Phone 7. Dokumentacja: Dobry framework posiada swoją dokumentację. Dokumentacja będzie bardzo pomocna podczas pracy z zespołem. Istnieje wiele struktur, które można wybrać. ale te z którymi będziemy pracować to Skeleton, Bootstrap i Foundation. Spójrzmy. Skeleton Skeleton, jest minimalnym mechanizmem responsywnym; jeśli pracowałeś z frameworkiem 960.gs, Skeleton wyda Ci się znajomy. Skeleton ma 960 pikseli szerokości z 16 kolumnami w podstawowej siatce; jedyną różnicę jest to,że siatka jest teraz responsywna przez integrację z media queries CSS Bootstrap Bootstrap został pierwotnie stworzony przez Marka Otto i przeznaczony był do wewnętrznego stosowania w Twitterze. Krótka opowieść Bootstrap został potem uruchomiony jako bezpłatne oprogramowanie dla ludzi. We wczesnej wersji nie można było jeszcze uwzględnić tej funkcji; został on dodany w wersji 2, w odpowiedzi na rosnące zapotrzebowanie na RWD Bootstrap ma o wiele więcej funkcji niż Skeleton. Jest on wyposażony w stylizowane elementy interfejsu użytkownika powszechnie używanych interfejsów w witrynie, takie jak przyciski, nawigacja, podział stron i formularze. Poza tym, Bootstrap jest wspierany pewnymi niestandardowymi wtyczkami jquery, takimi jak tab, carousel, popover i modal box. Foundation Foundation została utworzona przez zespół ZURB, agencję projektującą produkty z siedzibą w Kalifornii. Podobnie jak w przypadku Bootstrap, Foundation jest nie tylko responsywną strukturą CSS; jest wyposażona w predefiniowane style dla wspólnego interfejsu użytkownika, takie jak przyciski, nawigacja i formularze. Oprócz tego jest wspierana prze pewne wtyczki jquery. Wady Korzystanie ze struktur powoduje pewne problemy, Oto najczęstsze frameworkami: problemy z Nadmierny kod: Ponieważ struktura jest szeroko stosowana, musi uwzględniać każdy scenariusz projektowania, a więc również dodatkowe style, które mogą nie być potrzebne w Twojej witrynie. Z pewnością można uporządkować style i usunąć je, ale ten proces w zależności od struktury może to zająć wiele czasu Krzywa uczenia : Za pierwszym razem prawdopodobnie będzie trzeba poświęcić trochę czasu aby dowiedzieć się jak działa framework. w tym badanie klas CSS, identyfikatora, nazw. i prawidłowego formatowania HTML. Ale to nastąpi prawdopodobnie tylko podczas pierwszej próby

4 Mniejsza elastyczność: Frameworki mają prawie zawsze wszystko skonfigurowane, w tym szerokość siatki, style przycisków i granice promienia, i są zgodne ze standardami programistów. Jeśli rzeczy nie działają tak jak chcemy, zmiana może potrwać wiele czasu, a jeśli nie zostanie wykonane poprawnie, może zniszczyć całą strukturę kodu Narzędzia wymagane do tworzenia witryn responsywnych Istnieje kilka narzędzi, których będziemy potrzebowali do budowy naszej strony. Potrzebujemy przeglądarek internetowych. edytorów kodu i responsywnych skryptozakładek dla testowania responsywnego projektu Przeglądarki internetowe Będziemy potrzebowali przeglądarki internetowej aby wyświetlić wynik naszej pracy. Możemy wypróbować przeglądarki dostępne na rynku, aby przekonać się,że nasza witryna będzie się wyświetlać poprawnie we wszystkich tych przeglądarkach Edytory Kodu Edytor kodu jest niezastąpionym narzędziem dla tworzenia witryny. Technicznie, można używać dowolnego edytora kodu, pod warunkiem,że poprawnie podświetla kod. OS Windows Edytory Kodu Notepad++ ( WebMatrix ( TextPad ( OS X TextWrangler ( textwrangler/) MacVim ( Linux Brackets ( Gedit ( Geany ( BlueFish ( Responsywne skryptozakładki Najlepiej jest przetestować strony internetowe responsywne na prawdziwych urządzeniach przenośnych. Ale jeśli budżet nie pozwala, można użyć narzędzia nazywanego responsywną skrytpozakłądką. Jest to rodzaj emulatora do testowania responsywnego projektu przez zmianąe wymiaru widocznego obszaru w przeglądarce. Jest wiele dostępnych skryptozakładek.oto niektóre z nich RWD demonstration ( Screenqueri.es ( Responsinator ( ResposnivePX (

5 Resizer ( Screen Fly ( Adobe Edge Inspect ( Jeśli używasz Firefox 15 lub wyższego, możesz użyć wbudowanej funkcji Tryb responsywny. Narzędzia - Tryb responsywny Krótkie wprowadzenie do preprocesorów CSS Jest jedna rzecz, którą musimy omówić przed rozpoczęciem prac nad projektami, mianowicie preprocesory CSS. Co to jest? Po prostu, preprocesor CSS rozszerza możliwości CSS. Przez użycie preprocesora CSS możemy tworzyć CSS w bardziej dynamiczny sposób. Preprocesory CSS pozwalają nam na użycie zmiennych i funkcji, jak w językach programowania takich jak JavaScript i PHP, do tworzenia stylów. Już dziś jest dostępnych preprocesorów CSS, takich jak LESS, Sass czy Stylus. My ograniczymy się do LESS i Sass Narzędzia kompilatora preprocesora CSS Preprocesory CSS,takie jak LESS czy Sass, są napisane w języku, którego przeglądarki nie rozpoznają. Musimy więc skompilować je w standardowej formie CSS, którą przeglądarki mogą odczytać i dostarczyć wyniki z kompilatora. LESS LESS jest preprocesorem CSS opartym o JavaScript, stworzonym przez Alexis Selliera. Jak wspomniano, LESS jest używany przez Bootstrap. Pozwala nam tworzyć style z niektórymi funkcjami programowania. Poniżej wymieniamy te, których będziemy używać: Reguły zagnieżdżania Zmienne Mieszanki Mixy parametryczne Operacje Reguły zagnieżdżania Tradycyjnie w CSS, kiedy musimy zastosować style dla elementów, powiedzmy dla elementu nav z class ustawiona na nav-primary, możemy zapisać style w następujący sposób:.nav-primary { background-color: #000; width: 100%;.nav-primary ul { padding: 0; margin: 0;.nav-primary li { display: inline;

6 .nav-primary li color: #fff;.nav-primary li a:hover { color: #ccc; Jak widać, powtarzamy selektor klas nadrzędnych,.nav-primary, za każdym razem, gdy stosujemy style do elementów znajdujących się pod nim. Z LESS możemy wyeliminować to powtarzanie i nieco uprościć ten kod przez zagnieżdżenie reguł CSS, jak pokazano w przykładzie:.nav-primary { background-color: #000; width: 100%; ul { padding: 0; margin: 0; li { display: inline; color: #fff; &:hover { color: #ccc; W tym kodzie nie ma nic ciekawego; właśnie napisaliśmy to w inny sposób, zagnieżdżając reguły stylu. Zmienne Zmienne w LESS, jak we wszystkich językach programowania, są przydatne do przechowywania stałej lub stałej wartości; ta wartość może być później przypisana do całego arkusza stylów. W LESS zmienna jest definiowana ze po którym występuje nazwa zmiennej. Nazwa zmiennej może być kombinacją liczb i liter. W poniższym przykładzie utworzymy kilka zmiennych LESS dla przechowania kolorów i przypisania zmiennych do reguł stylu aby przekazać #ffb400;

7 W regularnym CSS, poprzedni kod byłby skompilowany do następującego fragmentu kodu: color: #234fb4; background-color: #ffb400; Korzystanie ze zmiennych nie ogranicza się jednak do przechowywania kolorów, jak wykazano w poprzednim przykładzie. Możemy używać zmiennych do innych typów wartości, takich jak rozmiar promienia, na : 3px; Jedna z zalet stosowania zmiennych jest to,że w przypadku konieczności wprowadzenia zmian nie musimy przeszukiwać całego arkusza stylów; możemy po prostu zmienić zmienną. To z pewnością oszczędza czas. Mieszanki Mieszanki są jak zmienne; jednakże zamiast przechowywać pojedynczą wartość, możemy przechowywać zestaw właściwości CSS. Właściwości te mogą być później dziedziczone przez inne zestawy reguł CSS. Powiedzmy,że w arkuszu stylów znajdują się następujące reguły CSS:.links { -webkit- -mox- font-weight: bold;.box { -webkit- -mox- position: absolute; top: 0; left: 0;. -webkit- -mox- W poprzednim przykładzie, zadeklarowaliśmy border-radius w trzech różnych regułach CSS. Za każdym razem, kiedy deklarujemy go w różnych regułąch CSS, musismu dodać prefiksy dla wcześniejszych przeglądarek. W LESS, możemy dodać granicę promienia i dziedziczyć przez inne reguły CSS, w arkuszach stylów używających mieszanki. Mieszanka w LESS jest po

8 prostu zdefiniowana za pomocą selektora klasy, w tym przykadzie, tworzymy mieszankę nazwaną border-radius:.border-radius { -webkit- -moz- Potem wstawiamy.border-radius do innych reguł CSS dla przekazania tych samych właściwości :.links {.border-radius; font-weight: bold;.box {.border-radius; position: absolute; top: 0; left: 0;..border-radius; Mixy parametryczne Możemy rozszerzyć mieszanki o funkcje, lub w tym przypadku, oficjalnie nazwane : mixy parametryczne. Metoda ta pozwala nam dodawać argument lub zmienne i tworzyć konfigurowalne mixy. Zobaczmy używany tu przykład. Użyjemy tego ostatniegi. Ale tym razem nie przypiszemy stałej wartości; zamiast tego zastąpimy ją zmienną:.border-radius(@radius) { Teraz możemy wstawić tą mieszankę do innych zasad CSS i przypisać różne wartości dla każdego.border-radius(3px); font-weight: bold; div {.border-radius(10px); position: absolute; top: 0;

9 left: 0;.border-radius(12px); Kiedy kompilujemy to do regularnego CSS a, poprzedni kod LESSS byłby skonwertowany jak następuje: -webkit- -moz- font-weight: bold; div { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: absolute; top: 0; left: 0; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; Jak widać z przykładów, ta praktyka może być przydatna podczas pracy z właściwościami CSS3, eliminując konieczność wielokrotnego pisania prefiksów dostawcy. Operacje Możemy również wykonać proste operacje matematyczne z LESS, takie jak dodawanie, odejmowanie, dzielenie i mnożenie. Operacje mogą być przydatne w pewnych okolicznościach. W tym przykładzie obliczamy właściwą szerokość pudełka przez odjęcie wypełnienia tak aby mogło się zmieścić w pojemniku nadrzędnym. Najpierw definiujemy zmienną dla : 10px; Potem, określamy szerokość pola i odejmujemy od niego.box { width: 500px (@padding * 2);

10 Pamiętaj,że wypełnienie bierze dwie strony pudełka, albo prawo i lewo albo góra i dół, dlatego w width razy 2. W końcu, kiedy kompilujemy opeację LESS w regularnym CSS, przykładowy kod będzie wyglądał następująco:.box { padding: 10px; width: 480px; W innym przypadku, możemy zrobić to samo z właściwością height:.box { width: 500px (@padding * 2); height: 500px (@padding * 2); Sass (Syntactically Awesome Stylesheets Sass jest preprocesorem CSS opartym na Ruby, stworzonym przez Hamptona Catlina, Nathana Weizenbauma i Chria Eppsteina. Podobnie jak LESS Sass ma możliwość dodawania zmiennych, mieszanek i zagnieżdżonych reguł, choć z kilkoma różnicami. Przyjrzyjmy się każdej z nich Zmienne W Sass, zmienna jest definiowana ze znakiem $. Podobnie jak w naszym przykładzie z LESS, tu definiujemy podstawowy kolor w zmiennej Sass $primarycolor i przypisujemy ją do reguły stylu: $primarycolor: #234fb4; color: $primary; background-color: $primarycolor; Podobnie do LESS, kiedy kompilujemy ten kod w regularnym CSS, jest to konwertowane jak następuje: color: #234fb4; background-color: #234fb4; Mieszanki W Sass, mieszanka jest definiowana nieco inaczej niż LESS. Mieszanka w Sass jest definiowana Podobnie jak w poprzednim przykładzie w sekcji LESS, tu

11 definiujemy mieszankę dla promienia granicznego a potem przypisujemy go do innych border-radius { -webkit- border-radius; font-weight: bold; div border-radius; position: absolute; top: 0; left: border-radius; Ponadto, możemy również dodać argument do mieszanki Saas, podobnie jak zrobiliśmy to w LESS border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; Reguły zagnieżdżone Sass również pozwala nam na reguły zagnieżdżone, ale ta metoda idzie jeden krok dalej. W Sass, możemy zagnieżdżać pojedynczą właściwość. Pokażemy jak to zrobić. Przede wszystkim, w regularnym CSS czasami definiujemy style z ich indywidualnymi właściwościami : div { border-color: #ccc; border-style: solid; border-width: 5px; W Sass, możemy zagnieździć tą regułę w poniższy sposób: div { border: { color: #ccc; style: solid; width: 5px;

12 Dziedziczenie selektora Dziedziczenie selektora brzmi jak mieszanka, ale działa w inny sposób. Podczas gdy mieszanka dzieszi style do innych przypisanych selektorów, dziedziczenie selektora ostatecznie grupuje selektory, które dzielą określone style. W poniższym przykładzie mamy klasę.button, która definiuje ogólne style przycisku. padding: 5px 15px; color: #fff; border: 1px solid #000; Mamy też dwa typy przycisków, mianowicie Submit i Reset, a każdy z ich będzie zdefiniowany w klasie.submit i.reset, odpowiednio. Przyciski te mają style ogólne, z wyjątkiem koloru tła do przekazania ich różnych celów. W tym przypadku, możemu użyć dziedziczenia selektora przez przypisanie klasy.button do innych reguł, jak pokazano poniżej:.submit background-color: green;.reset background-color: red; W przeciwieństwie do metod mieszanki, które po prostu duplikują właściwości CSS do przypisanych reguł, dziedziczenie selektora, jak wspomniano, będzie grupowało selektory, które mają te same style z klasy.button. Poprzedni kod będzie konwertowany na poniższy, kiedy kompilujemy regularnym CSS..button,.submit,.reset { padding: 5px 15px; color: #fff; border: 1px solid #000;.submit { background-color: green;.reset { background-color: red;

13