Strony responsywne są nowością jeżeli chodzi o strony przeznaczone dla urządzeń mobilnych. Tworzenie stron określonych mianem responsywnych daje nam bardzo dużą elastyczność i wiele możliwości. Strony responsywne same dostosowują się do rozdzielczości urządzenia, na którym są przeglądane, niezależnie czy jest to PC, urządzenie mobilne czy telewizor. Strony przystosowane do telefonów Od czasu pojawienia się systemu Android oraz telefonów komórkowych, użytkownicy mobilni stanowią bardzo duży procent odwiedzających. Napisanie strony, która nie jest przystosowania do telefonów jest w dzisiejszych czasach nieodpowiedzialne. Ryzykując w ten sposób musimy liczyć się z faktem stracenia dużej liczby potencjalnych odbiorców i klientów. Nie będę się rozpisywał za wiele na temat stron mobilnych, ponieważ napisałem już o tym artykuł mobilna wersja strony na telefon. W poprzednim artykule omawiam rozwiązanie, polegające na tworzeniu stron mobilnych w tradycyjny sposób. Zwykle polegało to na przygotowaniu drugiej wersji serwisu, i podmienianiu w zależności od wykrytego systemu. Czasem podmieniany był cały szablon a w innych wypadkach przekierowanie na inną domenę serwisu. Czym jest strona responsywna? Obecnie jedynym słusznym rozwiązaniem jest wdrożenie strony responsywnej. Strona responsywna to po prostu responsywny szablon. Strona responsywna lub ang. responsible web design (RWD) to strona, która dopasowuje swoją szerokość i układ elementów do rozdzielczości na jakiej jest wyświetlana. Bardzo dobrze współpracują z flat design aczkolwiek nie jest zasadą ich łączenie. Strony responsywne narodziły się od wersji CSS3 (arkusza stylów w wersji 3) ponieważ mocno rozbudowano możliwości Media Queries. Został on wtedy poszerzone o nowe możliwości min-width oraz max-width, dzięki którym możliwe jest rozpoznawanie rozdzielczości okna użytkownika. W zależności od wykrytych rozdzielczości, wczytujemy różne arkusze stylów, które tę samą strukturę HTML wyświetlają w całkiem inny sposób. Niektóre elementy są przesuwane, niektóre (te mniej ważne) całkowicie znikają. Jak wspomniałem, koncepcja stron responsywnych oraz flat design narodziły się prawie równocześnie i są często łączone. Flat design koncepcja projektowania szablonów stron, której głównym założeniem jest Karol Trybulec p-programowanie.pl 1
prostota. Elementy strony są kwadratowe lub prostokątne, nie występują Cienie ani dodatkowe ozdoby. Strona jest uproszczona do maksimum, co przekłada się na większą czytelność i przejrzystość szablonu. Najważniejsze zalety stron responsywnych to: brak konieczności aktualizacji treści w dwóch różnych miejscach (istnieje tylko jedna wersja serwisu) brak zamieszania z przekierowaniem domen, przełączaniem szablonów oraz detekcją urządzeń nie trzeba się martwić o duplicate-content jest to sposób oficjalnie rekomendowany przez Google dostosowuje się nie tylko do różnych urządzeń, ale także do różnych rozdzielczości ekranu (jest najbardziej elastycznym rozwiązaniem) Jeżeli składasz zamówienie na stronę to strona responsywna będzie kosztować Cię więcej. Jeżeli wykonasz ją sam, wszystko będziesz miał za darmo. O stronach responsywnych można przeczytać wiele innych informacji koniec lania wody. Tworzenie strony responsywnej Niezależnie czy chcesz zrobić stronę responsywną od początku, czy chcesz przerobić stary szablon na szablon responsywny, musisz wiedzieć o kilku najważniejszych rzeczach. Pierwszym krokiem zawsze jest dodanie odpowiednich meta-tagów. Zapewniają one poprawne wyświetlanie strony na urządzaniach mobilnych, m.in. zapobiegają skalowaniu. 1 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Meta-tag viewport zapewnia poprawne dostosowanie szerokości oraz brak powiększenia. Jeżeli zapomnisz go umieścić, strona będzie prezentować się źle. Kolejnym najważniejszym krokiem jest zaplanowanie kompozycji szablonu. Musisz zdecydować jakie elementy mają być wyświetlane na pełnej rozdzielczości, a jakie na telefonie. W standardowej konfiguracji, na pełnej rozdzielczości wyświetlana jest część główna strony oraz boczne menu, co daje razem dwie kolumny. Oczywiście niektóre strony mogą wcale nie mieć menu, lub mieć aż 2 boczne kolumny + środkowa będąca treścią strony. Musisz mieć świadomość, że każda strona dopasowana do urządzań mobilnych musi być zbudowana na jednej kolumnie. Jedna kolumna jest jedynym rozwiązaniem, jakie zapewnia nam poprawne skalowanie. Kiedy szablon ma jedną kolumnę, ustawiamy jego Karol Trybulec p-programowanie.pl 2
szerokość na width:100%, dzięki temu szerokość kolumny dopasuje się do ekranu niezależnie od jego wielkości. Takiej samej zasady trzymam się na tym blogu. Wdrożyłem proste rozwiązanie szablonu responsywnego. W pełnej okazałości strona posiada 2 kolumny, po zmianie wielkości okna cała prawa kolumna menu znika. Wiąże się to oczywiście z ukryciem niektórych informacji ale nie ma innego wyjścia. Musisz przemyśleć, jakie informacje zostaną ukryte dla użytkowników urządzeń mobilnych. Ja telefonom wyświetlam tylko logo + menu + treść strony. Znika ankieta, wtyczka facebooka, linki oraz informacje o autorze. Niestety na ekranie 320 480 nie zmieścimy tyle co na 1280 600. Gdybym się uparł, mógłbym zmieścić jeszcze jeden moduł w układzie jednej kolumny, nad menu lub pod menu, jednak nie są to informacje niezbędne więc nic nie stoi na przeszkodzie aby je ukryć. Jeżeli zastanowisz się nad kompozycją, czas wziąć się za arkusz stylów. 1 2 3 4 5 6 7 8 9 /*najwieksza rozdzielczosc laptopów*/ @media only screen and (max-width: 1000px) { #prawe_menu { display: block; } } /*średni telefon lub IPad*/ @media only screen and (max-width: 680px) { #prawe_menu { display: none; } } Jak widzisz są tu tylko dwie reguły Media queries. To ile ich dodasz zależy od Twojego serwisu. Umieszczenie tego kodu w arkuszu stylów powoduje, że dla urządzeń z szerokością ekranu w granicach 1-680px prawe menu znika, natomiast dla urządzeń z rozdzielczością większą niż 680px menu się pojawia. Osobiście na blogu stosuję 3 takie reguły i więcej mi nie potrzeba, używam flat design więc blog posiada mało elementów. Rozbudowane serwisy posiadają po 5-7 reguł, które znacząco zmieniają wygląd strony nawet przy nieznacznych zmianach rozdzielczości. Istnieje ważna zasada podczas planowania kompozycji. Możesz a nawet musisz ukrywać odpowiednie elementy na mniejszych rozdzielczościach używając display: none. Nie wolno natomiast utworzyć dwóch osobnych menu, jednego dla telefonów drugiego dla komputerów. Nie można pokazywać ich i ukrywać w zależności od wykrytej rozdzielczości. Jest to powielanie treści, przez co strona może być nieciekawa dla wyszukiwarki, a w ekstremalnym wypadku grozi banem duplicate-content. Na stronie muszą znajdować się pojedyncze elementy, a ich położeniem sterujemy za pomocą arkusza stylów. Karol Trybulec p-programowanie.pl 3
Responsywne menu Budowa responsywnego menu nie należy do najłatwiejszych i wymaga dużo pracy. Menu responsywne charakteryzuje się tym, że zawsze jest poziome i rozwija się dopiero po kliknięciu. Należy wykonać je w CSS oraz JQuery. Ja skorzystałem z gotowej wtyczki o nazwie SlickNav, zamienia ona moje poziome menu na responsywne menu. Ja podaję tylko nazwę dla kontenera wyjściowego #menu2, do którego zostanie przekonwertowane menu główne. Efekt jest następujący: Nie musisz używać systemu WordPress aby użyć skryptu SlickNav. SlickNav jest profesjonalnym i dobrze wykonanym narzędziem. Korzystają z niego strony osób prywatnych jak i firm. Skrypt ten jest na tyle popularny, że bardzo często spotykamy go w płatnych szablonach. Dodatkową zaletą jest to, że SlickNav jest całkowicie darmowy także na stronach komercyjnych. Przerobienie menu na menu responsywne to dwie linijki kodu. Jedynym warunkiem do użycia tego skryptu jest posiadanie menu zbudowanego w hierarchii ul li. Obrazki Ważnym aspektem, na który należy zwrócić szczególną uwagę są obrazki. W szablonie Karol Trybulec p-programowanie.pl 4
responsywnym obrazki muszą się automatycznie skalować wraz z szerokością strony. Aby osiągnąć taki efekt, można dodać do arkusza stylów takie globalne ustawienie dla obrazków: 1 img{ 2 max-width: 100%; 3 height:auto; 4 width:auto; 5 } Oczywiście reguła sprawdzi się tylko dla obrazków będących statyczną częścią treści strony np. zdjęć w artykule strony. Elementy graficzne szablonu Jeżeli korzystasz z koncepcji flat-design a więc uproszczenia strony do minimum budowa szablonu nie będzie skomplikowana. Tak jak w przypadku obrazków, szerokość elementów graficznych (np. logo lub tytuł menu) powinna być podana w wartościach procentowych. Jeżeli nie jest możliwe ustalenie wartości procentowych, należy ustawić wartości procentowe dla pojemnika będącego rodzicem, a następnie podmieniać element graficzny (np. logo) na mniejsze gdy braknie na nie miejsca w zależności od wykrytej rozdzielczości. Tworząc szablon responsywny możemy ustalać wysokość elementów graficznych stosując bezwzględną jednostkę px. Wynika to z faktu, że strona zbudowana na jednej kolumnie, musi dostosować się do urządzenia poziomo, pionowo nigdy miejsca nam nie braknie. Strony ze skomplikowaną szatą graficzną Jeżeli jesteś właścicielem jakiejś firmy, ze skomplikowanym motywem graficznym (np. restauracje), niezbędna podczas przeróbki będzie pomoc grafika, który wykonywał szablon strony. W takim wypadku przeważnie dla większości elementów graficznych nie można ustalić szerokości procentowej, ponieważ w przypadku zmiany rozmiaru okna grafika będzie niewyraźna (skalowanie). Niestety, w takim konkretnym przypadku, wszystkie elementy graficzne trzeba ukrywać i zastąpywać mniejszymi odpowiednikami. Rozmiary elementów i czcionek W szablonie responsywnym powinniśmy używać jednostek procentowych. Priorytetem jest Karol Trybulec p-programowanie.pl 5
nadanie procentowej szerokości, aby mogła się zmieniać wraz ze zmianą rozdzielczości. Nie powinniśmy ustalać sztywnych rozmiarów wszelkich obrazków, one także powinny skalować się razem z szablonem. Wartości stałe powinniśmy natomiast nadawać czcionkom, trudno przewidzieć jak będzie wyglądać czcionka, której rozmiar zależny jest od innych elementów. Ja na blogu stosuję rozmiar 15-16px i jest to jednostka stała. Czcionki dla komputerów PC są średnio o 1-2px większe niż czcionki dla urządzeń mobilnych. Testowanie strony responsywnej Bardzo dobry dodatek do testowania naszego szablonu udostępnia najnowsza wersja przeglądarki Firefox. Pozwala ona z opcji włączyć Narzędzia dla twórców witryn > Widok responsywny. Dzięki temu możemy podglądać stronę w różnych zestawieniach rozdzielczości: Prosty szablon responsywny Nie przeczę, że zbudowanie zaawansowanej strony w sposób responsywny może być trudne i czasochłonne. Jednak prosty szablon na potrzeby bloga, każdy da radę zrobić samodzielnie. Przykładem jestem ja ponieważ dałem radę najpierw napisać dla siebie szablon w koncepcji flat design, a po kilku miesiącach przerobić go na szablon responsywny. Pokażę Ci jak Karol Trybulec p-programowanie.pl 6
łatwo stworzyć prosty responsywny szablon. Na potrzeby artykułu stworzyłem mało skomplikowany szkielet szablonu. Jego kod HTML jest następujący: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"w> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>szablon responsywny!</title> </head> <body> <div id="header"> <div id="logo"><h1>logo strony</h1></div> </div> <div id="wrapper"> <div id="content">lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est.<br><br> Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.</div> <div id="menu"> <h5>menu główne</h5> <ul> <li><a href="#">strona główna</a></li> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> </ul> </div> </div> </body> </html> Posiada też kod CSS: Karol Trybulec p-programowanie.pl 7
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* ogólne ------------------ */ * {margin:0px; padding: 0px;} body { font: 16px Verdana; line-height:1.6; background: #EDE6DE; } #wrapper { width:90%; overflow:hidden; margin: auto; } a {color: #354458;} /* logo ------------ */ #header { height:100px; background: #354458; margin: 10px ; } #header h1 {padding: 20px; color: #E9E0D6;} /* tresc ------------ */ #content { width:75%; background: #EB7260; float:left; padding:1%; overflow:hidden; } /* menu ------------ */ #menu { background: #548BC2; width:20%; float:right; padding:1%; overflow:hidden; } #menu h5 {padding:3px 3px 15px 3px; font-size:14px;} #menu ul li {list-style-type:none; padding: 10px;} Szablon na na wszystkich rozdzielczościach wygląda tak samo. Jedyną jego zaletą jest szerokość wyrażona w procentach, więc dostosowuje się do szerokości okna przeglądarki. Oto efekt: Nie ma co analizować kodu ponieważ jest to podstawowy szkielet szablonu, najprostszy jaki mógł powstać. W kodzie HTML #content znajduje się wcześniej niż #menu. Z jednej strony jest to lepsze rozwiązanie ze względu na SEO, z drugiej gorsze jeżeli będziemy brać pod uwagę np. osoby niepełnosprawne. Chceby aby szablon był responsywny i aby prawe menu przesuwało się na górę i zamieniało w menu poziome. W tym celu musimy dodać do arkusza stylów znacznik media queries zmieniający kod CSS poniżej określonej rozdzielczości. Ja użyję rozdzielczości Karol Trybulec p-programowanie.pl 8
progowej 900px. Aby menu przeskoczyło na górę, trzeba nadać mu atrybut position: absolute. To przez to, że w kodzie HTML menu jest w kodzie jako drugie. Skoro będzie to menu poziome, należy ustawić jego szerokość na width: 100%. Należy także zwiększyć szerokość treści strony, ponieważ obecnie zajmuje ona tylko 75%. Po przeskoczeniu menu powinna zajmować width: 98%. Aby linki w menu układały się poziomo wystarczy zmienić im atrybut display i ustawić go na inline. To już wszystko. Ostatnim zabiegiem kosmetycznym jest ukrycie napisu Menu główne oraz dodanie poziomych kresek po każdym elemencie menu. Cały opisany kod wygląda następująco: 1 @media only screen and (max-width: 900px) { 2 #menu {width:88%; position:absolute; height:30px;} 3 #menu h5 {display: none;} 4 #menu ul li {display: inline; } 5 #menu ul li:after {content: " ";} 6 #content {width: 98%;position:relative; top: 30px;margin-top:5%;} 7 } Dodaję go na końcu arkusza stylów, szablonu zaprezentowanego wyżej. Oto efekt podczas zmiany wielkości okna: Karol Trybulec p-programowanie.pl 9
Mimo, że dodałem tylko jeden element media queries zmieniający orientację menu, szablon będzie poprawnie wyświetlany na wszystkich urządzeniach mobilnych oraz na wszystkich rozdzielczościach. W kodzie CSS brakuje skalowania obrazków, jednak te nie zostały użyte w przykładzie. Myślę, że tworzenie stron w sposób responsywny to nie dodatkowa umiejętność i nowa technologia dla bogatych, tylko standard, którego trzeba się trzymać podczas Karol Trybulec p-programowanie.pl 10
projektowania strony lub bloga. Jak widzisz, prosty zabieg dopasowania strony do rozdzielczości, wymaga tylko kilku dodatkowych linijek. Przykład szablonu zaprezentowanego w artykule możesz zobaczyć klikając w link www.p-programowanie.pl/pliki/responsywny Karol Trybulec p-programowanie.pl 11