Budowa szablonów stron RWD

Kiedy mieliśmy do czynienia tylko i wyłącznie z komputerami stacjonarnymi do tworzenia stron można było podejść dosyć konwencjonalnie, wykorzystując do tego tylko i wyłącznie proste narzędzia i techniki. Obecnie jednak korzystamy z internetu na różnego typu urządzeniach takich jak np. komputer, tablet, smartphone i z tego wynikają pewne konsekwencje. W tym miejscu warto bliżej przyjrzeć się temu czym jest RWD.

Co to jest RWD?

RWD (skrót od angielskiego Responsive Web Design) jest metodą projektowania stron internetowych w taki sposób, aby można z nich było korzystać na różnego typu urządzeniach zarówno w przeglądarkach komputerów stacjonarnych, jak i na smartphonie czy tablecie. Dzięki technice tej jesteśmy w stanie stworzyć stronę uniwersalną, którą docelowo będzie można przeglądać na ekranach wszystkich wspomnianych urządzeń. W konsekwencji osoby korzystające z danej strony mogą się po niej swobodnie poruszać bez względu na to, z jakiego urządzenia korzystają.

Jak to działa?

Do projektowania RWD wykorzystywane są reguły CSS3 Media Queries. To za ich pomocą tworzymy stronę internetową, która automatycznie dopasowuje się do urządzenia, w którym będzie wyświetlana. Do niedawna tworzenie różnorodnych stylów CSS opierało się przede wszystkim na projektowaniu stylów głównych. W tej chwili mamy do czynienia z znacznie bardziej zaawansowanymi technikami, dzięki którym można tworzyć strony w wersji do druku, do przeglądania czy nawet strony tworzone z myślą o specjalnych typach urządzeń (przykładowo służące do czytania brajlem).

Najistotniejszym zadaniem z uwagi na różnorodność urządzeń jest jednak w tej chwili to, aby tworzyć style CSS dotowane do wymiaru oraz ustawienia ekranu. Docelowo najważniejsze jest bowiem to, aby dopasowywały się one do rozdzielczości ekranu oraz jego orientacji. W związku z tym, że jest to kwestią priorytetową strony muszą być projektowane z myślą o konkretnych rozdzielczościach. W głównych plikach CCS powinny więc znajdować się deklaracje, które odpowiadają za zmianę parametrów strony, tak aby była ona elastyczna i dostosowywała się do różnego typu urządzeń.

Jak łatwo zauważyć determinantą jest tutaj w dużej mierze właśnie rozdzielczość. Z tego powodu tak ważne jest zdefiniowanie właściwości CSS, dzięki którym wygląd strony będzie dostosowany do rozdzielczości (konieczne jest wyznaczenie granicznych). W związku z tym breaking points muszą być dostosowane do rozdzielczości typowej dla różnego typu urządzeń. Poza urządzeniami typowymi i popularnymi takimi jak laptop, komputer i tablet nie można zapominać tu przykładowo o urządzeniach o bardzo wysokiej rozdzielczości. Należy także pamiętać o możliwej zmianie orientacji urządzenia – poziomej lub pionowej. W rezultacie kiedy staramy się dostosować stronę do jakiegoś mniejszego urządzenia jak np. smartfon możemy zrezygnować z danej ilości haseł w danym wierszu, ukryć niektóre banery czy też zdecydować się na zastąpienie niektórych linków zewnętrznych buttonami. Wszystkie te zabiegi wykorzystywane są po to, żeby użytkownik mógł w prosty i sprawny sposób poruszać się po danej stronie.

Jak to wygląda w praktyce?

Jak już zostało wspomniane do obsługiwania techniki Responsive Web Design wykorzystuje się tzw. Media Queries. To dzięki nim możliwe jest określenie wielkości przeglądarki i wykorzystania właściwych języków czyli tzw. arkuszy stylów, dzięki który możliwe jest prawidłowe wyświetlanie się strony. Można wykorzystać cały taki arkusz lub też tylko jego część. Można także skorzystać z odpowiednich skryptów JavaScript.

Koniecznym elementem języka HTML (dla niewtajemniczonych jest to specjalistyczny język, służący do tworzenia stron internetowych) jest umieszczenie w sekcji HEAD fragmentu o następującej treści:

<meta name=”viewport” content=”width=devicewidth” /> 

Możliwe jest również wstawienie całego arkuszu stylu. Musimy wtedy określić w jakim typie przeglądarki będzie w stanie pracować dany arkusz. Możemy określić jego minimalną wysokość, szerokość lub też określić, że będzie ona stanie pracować tylko wówczas, kiedy jego rozdzielczość będzie przykładowo mieściła się w zakresie 480pikseli.

Jeżeli w danym przypadku nie ma konieczności dzielenia stylów na arkusze, to jesteśmy w stanie zrobić wszystko w jednym pliku. Wykorzystujemy do tego Media Queries. Dzięki temu jeśli zostania zachowana deklarowana rozdzielczość, to automatycznie zostaną wykorzystane wszystkie pozostałe komendy.

Korzyści wynikające z zastosowania RWD

W dzisiejszej dobie, kiedy internet stał się praktycznie wszechobecny i kiedy korzystamy z niego na różnego typu urządzeniach, technika taka jak Responsive Web Design jest niezwykle pomocna i przydatna. Dzięki niej powstają szablony stron gotowe do użytku na każdego typu urządzeniu. Nie ma więc konieczności korzystania z osobnych wersji witryn dla urządzeń stacjonarnych i mobilnych. To przekłada się na szybsze i prostsze tworzenie bardziej elastycznych stron jak również na wygodę ich użytkowania.

 pobrane (1) Przygotował: Jakub Ostrowski
Artykuł został przygotowany przez firmę Pro-position specjalizującą się w search marketingu (kampaniach SEO oraz Google AdWords). W razie pytań zapraszamy do kontaktu poprzez formularz na stronie www.pro-position.pl.
2 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *