Studia Podyplomowe Grafika Komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.

Transkrypt

1 Ćwiczenia Responsive Web Design Praca własna dr inż. Robert Banasiak

2 Wprowadzenie Coraz więcej użytkowników korzysta z Internetu w urządzeniach mobilnych w celu przeglądania stron internetowych. Warto zadbać o użyteczność strony na urządzeniach przenośnych. Rozdzielczości urządzeń mobilnych Pierwszym krokiem do stworzenia responsywnej strony internetowej jest zastanowienie się nad rozdzielczościami wyświetlaczy urządzeń przenośnych, na których strona będzie prezentowana. W głównej mierze interesuje nas szerokość. Rozdzielczości ekranów urządzeń mobilnych jest sporo. Zestawienie najpopularniejszych z nich możemy znaleźć tutaj: Biorąc pod uwagę obecne trendy technologiczne szerokość naszej strony będzie przyjmować takie wartości dla poszczególnych urządzeń: 1050px (komputer) 950px (tablet poziomo) 750px (tablet pionowo) 450px (telefon poziomo) 300px (telefon pionowo) Layout strony Po ustaleniu wymiarów przejdźmy do stworzenia prostego layoutu strony. Postanowiliśmy, że nasz layout będzie wyglądał tak:

3 Nie jest on przypadkowy - zaplanowaliśmy go tak, aby w łatwy sposób można było dopasować go do urządzeń mobilnych o małej szerokości. Warto podkreślić, iż nie wszystkie strony da się zrobić jako responsywne (nie uda nam się przecież przenieść nagłówka na sam dół czy też stopki na samą górę). Warto więc dokładnie zaplanować swój layout, aby można było go swobodnie dopasowywać do poszczególnych szerokości. Nasz został zaplanowany, aby na urządzeniach z najmniejszą rozdzielczością nasza strona wyświetlała się w następujący sposób: Szkielet strony w HTML5 Wiemy jak ma wyglądać nasza strona, przejdźmy więc do programu Dreamweaver CS6 i zajmijmy się kodem HTML. Dla naszego layoutu szkielet wyglądać będzie w sposób następujący (dodaliśmy również zawartość naszej strony): <!DOCTYPE HTML> <html lang="pl"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>strona responsywna</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container">  <header> <img src="images/header.jpg" alt=""/> </header>  <aside> <nav> <ul> <li><a href="#">start</a></li> <li><a href="#">o firmie</a></li> <li><a href="#">oferta</a></li> <li><a href="#">galeria</a></li> <li><a href="#">kontakt</a></li> </ul> </nav> </aside>

4  <section id="main"> <h1>rwd tutorial</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum tempus mi, maximus volutpat urna sollicitudin vitae. Vivamus rutrum mi sit amet commodo rutrum. Suspendisse potenti. Sed a ullamcorper eros. Maecenas dapibus erat mi, a egestas ipsum cursus volutpat. Aliquam posuere mi at consectetur convallis. Cras vitae ligula eget leo ultrices hendrerit nec sed ex. Morbi at ipsum rhoncus, dictum elit in, consectetur lorem. Aliquam suscipit diam sit amet mauris luctus, a egestas magna pharetra. Donec laoreet viverra risus nec fermentum. Maecenas gravida lectus vel ante commodo bibendum. Donec ac pellentesque mi.</p> </section>  <footer> <p>footstep.pl 2013</p> </footer> </div> </body> </html> Z ważniejszych rzeczy do odnotowania w powyższym kodzie jest to, że arkusz stylów znajduje się w folderze pod nazwą 'css', obrazy znajdują się w folderze 'images' a także dodana została linijka: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> aby zdefiniować szerokość okna przeglądarki dla Media Queries. Formatowanie CSS3 Nasz szkielet jest gotowy, możemy teraz zająć się arkuszem styli CSS, aby nasza strona nabrała odpowiedniego wyglądu. My ustaliliśmy jej szerokość na 1050px tak więc nasz kod CSS wygląda tak: * {padding:0;margin:0; html {width:100%;height:100%; body {font-family:arial, Helvetica, Sans-serif;font-size:14px; line-height:1.5; font-weight:400; color:#434343; background:#fff;.container {width:1050px; margin:0 auto; header {margin:25px 0; header img {width:100%; aside {float:left;width:30%; margin:0 0 25px; aside nav ul {list-style:none; aside nav ul li {margin-bottom:1px; aside nav ul li a {display:block;text-decoration:none; color:#000; background:#ffc000; padding:8px 20px; aside nav ul li a:hover{background:#212121; color:#fff; #main {float:right;width:65%;margin:0 0 25px; footer {clear:both;color:#fff; background:#121212; padding:15px 0 15px 30px;

5 Teraz nasza strona wygląda tak: Można powiedzieć, że strona jest prawie gotowa. Nam jednak zależy na stronie responsywnej Responsywność strony Aby nasza strona stała się stroną responsywną musimy dodać do naszego arkusza CSS warunki Media Queries. Aby posługiwać się warunkami Media Queries musimy dowiedzieć się czym one są i jak działają. Przedstawmy przykładową linię kodu CSS zawierającą warunek Media all and (max-width: 800px) and (min-width: 600px) { /* style css */ W kodzie powyżej został podany warunek który definiuje, że wpisane w nawias klamrowy style będą aktywne tylko dla szerokości okna przeglądarki mniejszej niż 800px gdyż ustaliliśmy wartość maxwidth na 800px i dla szerokości okna przeglądarki większej niż 600px gdyż ustaliliśmy wartość minwidth na 600px. Tak więc wpisane style będą aktywne gdy szerokość okna przeglądarki będzie zawierała się w przedziale od 800px do 600px. Możemy również stosować taki all and (min-width: 600px) { /* style css */ W takim przypadku nie mamy górnej granicy czyli max-width i warunek będzie spełniany za każdym razem kiedy szerokość okna przeglądarki będzie większa niż 600px. Analogiczna sytuacja jest z all and (max-width: 800px) { /* style css */

6 W takim przypadku nie mamy dolnej granicy czyli min-width tak więc warunek będzie spełniany za każdym razem kiedy szerokość okna przeglądarki będzie mniejsza niż 800px. Teraz przejdźmy do ustalania warunków CSS Media Queries dla naszej strony. Najłatwiejszym sposobem jest rozpisanie sobie wszystkich naszych szerokości umieszczając je w warunkach Media Queries bez podawania wartości oraz usuwając skrajne screen and (min-width: px) { /* style dla 1050px screen and (max-width: px) and (min-width: px) { /* style dla 950px screen and (max-width: px) and (min-width: px) { /* style dla 750px screen and (max-width: px) and (min-width: px) { /* style dla 450px screen and (max-width: px) { /* style dla 300px */ Z pierwszego warunku odpowiadającego za wyświetlanie strony na komputerach usunęliśmy górną granicę 'max'. Tym samym ustaliliśmy że ten warunek będzie spełniany dla każdej szerokości większej niż ta którą zdefiniujemy. To samo dotyczy najmniejszego warunku. Tutaj usunęlismy wartość 'min' sprawiając, że warunek będzie spełniany dla każdej szerokości poniżej. 1050px (komputer) Mając przygotowany szkielet możemy zdefiniować wartości dla naszych warunków. Zacznijmy od największego czyli odpowiedzialnego za wyświetlanie strony na komputerach. Wiemy, że nasza strona w tym warunku ma mieć szerokość 1050px, musi więc wyświetlać się w oknie przeglądarki większym niż 1050px tak, aby nie pojawił się na dole poziomy pasek przewijania. Dodajmy jeszcze do naszej wartości 50px 'luzu' na pionowy pasek przeglądania otrzymując w ten sposób wartość 1100px, którą to zastosujemy w pierwszym screen and (min-width: 1100px) { /* style dla 1050px */ 950px (tablet orientacja pozioma) Czas na kolejny warunek. We wcześniejszym zdefiniowaliśmy wartość 1100px jako wartość 'min'. W tym warunku musimy przyjąć tę wartość jako wartość 'max' (aby zachować ciągłość przedziałów). Wartość 'min' określamy w taki sam sposób jak robiliśmy to w poprzednim warunku tak więc otrzymujemy 1000px (950px szerokość strony plus 50px screen and (max-width: 1100px) and (min-width: 1000px) { /* style dla 950px */

7 750px (tablet orientacja pionowa) Kolejny warunek. Sytuacja analogiczna do screen and (max-width: 1000px) and (min-width: 800px) { /* style dla 750px */ 450px (telefon orientacja screen and (max-width: 800px) and (min-width: 500px) { /* style dla 450px */ 300px (telefon orientacja pionowa) W tym przypadku nie mamy wartości 'min' tak więc przepisujemy tylko do wartości 'max' wartość 'min' z poprzedniego screen and (max-width: 500px) { /* style dla 300px */ Możemy teraz przejść do wpisywania w przygotowane warunki style CSS dla naszej screen and (min-width: 1100px) {.container {width:1050px; margin:0 screen and (max-width: 1100px) and (min-width: 1000px) {.container {width:950px; margin:0 screen and (max-width: 1000px) and (min-width: 800px) {.container {width:750px; margin:0 screen and (max-width: 800px) and (min-width: 500px) {.container {width:450px; margin:0 screen and (max-width: 500px) {.container {width:300px; margin:0 auto; Jak widzimy wartość atrybutu margin jest dla każdego warunku taka sama więc możemy wyciągnąć ją poza warunki aby nie powtarzać jej w każdym z nich:.container {margin:0 screen and (min-width: 1100px) {.container {width:1050px;

8 @media screen and (max-width: 1100px) and (min-width: 1000px) {.container screen and (max-width: 1000px) and (min-width: 800px) {.container screen and (max-width: 800px) and (min-width: 500px) {.container screen and (max-width: 500px) {.container {width:300px; Z uwagi na to ze na rynku istnieje jeszcze wiele urządzeń mobilnych również takich o wyświetlaczach z rozdzielczością mniejsza niż 300px dobrym rozwiązaniem będzie zamiana dla najmniejszego warunku wartości szerokości strony z podanej w pikselach na procentową. Zastosujmy więc szerokość 90% całej dostępnej szerokości (max-width: 500px) {.container {width:90%; W tym momencie nasza strona jest już responsywna, lecz przy małych rozdzielczościach staje się nieczytelna. Zróbmy jeszcze porządek w taki sposób, aby z układu dwukolumnowego powstał układ jedno kolumnowy, pamiętając oczywiście o pogrupowaniu odpowiednio powtarzających się (min-width: 1100px) {.container {width:1050px; aside {width:30%; #main (max-width: 1100px) and (min-width: 1000px) {.container {width:950px; aside {width:30%; #main (max-width: 1000px) and (min-width: 800px) {.container {width:750px; aside {width:30%; #main (max-width: 800px) and (min-width: 500px) {.container {width:450px; aside, #main (max-width: 500px) {.container {width:90%; aside, #main {width:100%;

9 Tym prostym sposobem udało nam się stworzyć w pełni responsywną stronę. Pamiętajmy jednak, że nie da się jednoznacznie sprecyzować tworzenia stron responsywnych. Na zajęciach skorzystaliśmy z Media Queries i przetestowaliśmy jedynie ich podstawowe działanie. Istnieją również inne sposoby uzyskania takiego samego efektu np. wykorzystując JavaScript. Nasza wcześniejsza wersja opierała się o stałe wartości pikselowe. Stosując takie rozwiązanie nasza strona dla określonych rozdzielczości przeglądarki ma przypisaną konkretną stałą szerokość. Jak najbardziej gwarantuje to poprawne wyświetlanie się strony, jednak istnieje ryzyko, że dla pewnych rozdzielczości mogą pojawić się po bokach strony puste przestrzenie. Nie jest to pożądane zarówno ze względów estetycznych, jak i ekonomicznych - nie ma potrzeby marnować dostępną przestrzeń na wyświetlaczu, skoro możemy wykorzystać ją w całości. Aby dokonać modyfikacji skupimy się jedynie na arkuszu styli CSS. Kod HTML pozostanie niezmieniony. Aby oprzeć naszą stronę o wartości procentowe musimy zmodyfikowac element '.container'..container {width:90%;max-width:1050px;margin:0 auto; Jak widać nadaliśmy mu szerokość na 90% dostępnej przestrzeni oraz ustaliliśmy jego maksymalną szerokość na 1050px. Następnym krokiem będzie modyfikacja naszych warunków Media Queries. Zdefiniowaliśmy już style dla naszego elementu '.container' pozostało nam tylko uporządkowanie układu kolumn na naszej stronie. We wcześniejszej wersji ustaliliśmy, że zmiana układu z dwukolunowego do jednokolumnowego ma następować przy szerokości przeglądarki 800px. W tym przypadku możemy skorzystać z takich warunków Media (min-width: 800px) { /* tutaj style powyżej 800px (max-width: 800px) { /* tutaj style poniżej 800px */ Zastosowanie takich warunków umożliwi nam zdefiniowanie stylów dla szerokości przeglądarki powyżej 800px oraz poniżej 800px. Uzupełnijmy nasze warunki o odpowiednie (min-width: 800px) { aside {width:30%; #main (max-width: 800px) { aside, #main {width:100%; Teraz cały nasz kod CSS powienien wyglądać teraz tak: * {padding:0;margin:0; html {width:100%;height:100%;

10 body {font-family:arial, Helvetica, Sans-serif;font-size:14px;line-height:1.5; font-weight:400;color:#434343;background:#fff;.container {width:90%;max-width:1050px;margin:0 auto; header {margin:25px 0; header img {width:100%; aside {float:left;margin:0 0 25px; aside nav ul {list-style:none; aside nav ul li {margin-bottom:1px; aside nav ul li a {display:block;textdecoration:none;color:#000;background:#ffc000;padding:8px 20px; aside nav ul li a:hover{background:#212121;color:#fff; #main {float:right;margin:0 0 25px; footer {clear:both;color:#fff;background:#121212;padding:15px 0 15px 30px;margin:0 0 (min-width: 800px) { aside {width:30%; #main (max-width: 800px) { aside, #main {width:100%; Jak widać takie rozwiązanie pozwoliło nam znacznie zmniejszyć zawartość arkusza CSS, a nasza strona wykorzystuje teraz znacznie większą cześć wyświetlacza przy mniejszych rozdzielczościach, przez co zyskuje na czytelności. W ramach pracy własnej zapraszam do opracowania własnej koncepcji serwisu opartego na szablonie responsywnym.