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!

Pozostaw odpowiedź Tomasz Wydra Anuluj pisanie odpowiedzi

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