Rodzaje responsywnych stron internetowych

Czym są responsywne strony internetowe pisaliśmy już tutaj. W tym artykule opiszemy, jakie rodzaje responsywności wyróżniamy, czym się od siebie różnią i jakie są ich wady i zalety.

Istnieją dwa główne rodzaje stron wykonanych w technice RWD. Są to projekty:

• oparte na siatce (tzw. grid)
• płynne (fluid)

Responsywne strony internetowe oparte na siatce (gridzie)

RWD grid to siatka dzieląca szerokość strony na określoną liczbę kolumn (zazwyczaj 12, 16 lub 24) wraz z odstępami między nimi. Mając taką siatkę możemy poszczególnym elementom strony internetowej nadać szerokość wyrażoną nie w pikselach, czy procentach, ale właśnie w ilości kolumn na które mają nachodzić. Przykładowo, mając siatkę 12-kolumnową, gdy chcemy, aby na stronie mieściły się obok siebie 3 jednakowo szerokie elementy (przykładowo kafelki), wystarczy że umieścimy je w jednym rzędzie i każdemu z nich nadamy szerokość 4 kolumn.

Przykład rozmieszczenia elementów o różnych szerokościach na siatce:

Co istotne, grid dopasowuje się do rozmiaru okna. Co to oznacza? Każda siatka ma określone szerokości kolumn i odstępów dla każdego ze zdefiniowanych przedziałów szerokości ekranu (tzw. breaking points). Przykładowo, jeden z najpojpularniejszych gridów RWD dostępny we frameworku Twitter Bootstrap dla okna o szerokości powyżej 1200px ma kolumny o szerokości 70px, a odstępy 30px. Gdy zaś przeglądamy stronę na tablecie (o szerokości okna między 768px a 979px), kolumna zwęża się do 42px, a odstępy do 20px.

Ciekawa rzecz dzieje się, gdy stronę wyświetlamy w oknie tak wąskim, że upchanie 12 elementów obok siebie sprawia, że stają się one zbyt małe, by były użyteczne. Tak dzieje się w przypadku większości dzisiejszych smartfonów. Wtedy to sposób wyświetlania ulega zmianie i rzędzie pozostaje jedna płynna kolumna wypełniająca całą szerokość okna. Dzięki temu elementy są dobrze widoczne na smartfonach i - co istotne - łatwo trafić w nie palcem.

Ekran o szerokości 1170px:

Ekran o szerokości 410px:

Przykład strony wykonanej przez nas z wykorzystaniem gridu Bootstrapa: http://www.oknoplast-olesnica.pl/

Fluid Responsive Web Design

Płynność oznacza tutaj, że strona rozciąga się do pełnej szerokości okna. Podobne działanie obserwujemy na małych ekranach w stronach opartych na siatce, gdy zamiast 12 kolumn mamy jedną. Tutaj jest to jednak zastosowane do całej strony poprzez nadanie poszczególnym elementom szerokości wyrażanych w procentach. Całe okno (tzw. viewport) ma szerokość 100% i względem niego mierzone są wszystkie elementy strony internetowej. Zmienia się to płynnie przy zmianie szerokości okna, co można przetestować "na żywo" przeciągając krawędź okna i mniejszając jego szerokość.

Przykład zastosowania przez nas takiej techniki wykonania strony www można zaobserwować tutaj: http://www.gettax.pl

Istnieją także rozwiązania mieszane. Takie połączenie projektowania płynnego z gridem polega to na tym, że korzystając z siatki, szerokości kolumn ustalamy nie w pikselach, a w procentach.

Co wybrać?

Wykorzystanie siatki do budowy responsywnej strony internetowej bardzo przyspiesza prace wdrożeniowe. Korzysta się przy tym zazwyczaj z gotowych rozwiązań (tw internecie można spotkać nawet generatory siatek). Nie da się jednak ukryć, że wykorzystanie siatki ogranicza nieco możliwości projektanta, który już na etapie szkicu strony musi mieć na uwadze, że wszystkie elementy muszą pasować do siatki. Takich ograniczeń nie nakłada na webdesignera wykorzystanie techniki płynnej. Każdy element może być dowolnie skalowany. Wymaga to jednak zazwyczaj większych nakładów pracy przy kodowaniu takiej strony www. Dlatego w interclick.pl najczęściej korzystamy z rozwiązań mieszanych pozwalających połączyć zalety obu rozwiązań.

Skorzystaj z zalet Responsive Web Design już dziś!

Czy Twoja firma jest gotowa na krok naprzód i wdrożenie profesjonalnej responsywnej strony internetowej zwiększając prestiż marki i ułatwiając dostęp klientom do porządanych informacji? Jeśli tak, skontaktuj się z nami!