RWD – Responsive Web Design


Ninja świetnie sobie radzi w różnych okolicznościach.
Nasze strony dobrze się czują zarówno na komputerach stacjonarnych, jak i całej gamie coraz to popularniejszych urządzeń mobilnych.


Najłatwiej wyjaśnić czym jest RWD zaczynając od tego czym właściwie ono Nie jest.
Ciężko zrozumieć to pojęcie bez znajomości innych, wcześniejszych sposobów projektowania, oraz okoliczności, w których się narodziły.
Dlatego znajdziesz poniżej garść informacji o tym, jak projektowanie stron internetowych ewoluowało w czasie i jakie formy przybierało.

Krótki rys historyczny

Dawno, dawno temu, przed laptopami i mobilnymi gadżetami, był sobie świat, w którym większość użytkowników raczkującego internetu, oglądała strony internetowe na monitorach o rozdzielczości, rzadko przekraczającej 800x600px.
Stało się to początkowym standardem podczas projektowania stron internetowych. Przez pewien czas, gdy zaczęły pojawiać się monitory o wyższych rozdzielczościach i mieć coraz większy udział w rynku, strony ciągle były projektowane z myślą o użytkownikach starszych modeli.

Z czasem zmieniały się potrzeby i technologie, a wraz z nimi podejścia do projektowania. Przez długi czas głównym kierunkiem zmian były, coraz to większe rozdzielczości dostępnych wyświetlaczy. Aktualnie ten trend się trochę odwrócił, bo chociaż pojawiają się ciągle urządzenia o wyższych rozdzielczościach, jak choćby smart TV 4K, to coraz więcej wyświetleń globalnego internetu generują sprzęty mobilne o niższych rozdzielczościach i wymiarach.

Fixed Web Design

Pierwsze strony internetowe składały się głównie z tekstu, gdzieniegdzie poprzetykanego obrazkami. Dość szybko powstała potrzeba bardziej zaawansowanego połączenia go z elementami graficznymi w spójną całość. Tak postał Fixed Web Design – projektowanie stron pod z góry ustalone wymiary, gdzie treść merytoryczna miała ściśle określone miejsce, pośród graficznej obudowy. Był to w pewien sposób mały krok w tył, pod względem dostosowywania się stron do warunków wyświetlania. O ile sam tekst domyślnie od samego początku miał funkcjonalność łamania się w odpowiednich miejscach, w zależności od dostępnej szerokości, o tyle przy takim projektowaniu miejsce na niego jest ustalone na stałe.

Przy projektowaniu stron, od samego początku, po dziś dzień, najważniejszą rzeczą, do której trzeba się dostosować, jest dostępna szerokość. Długo witryny w Fixed Web Design były tworzone w wyżej wymienionej szerokości 800px. Przy pojawieniu się szerszych monitorów sprawa układu strony rozwiązywana była zwykle poprzez wyśrodkowanie w poziomie całej kompozycji i otoczenie jej jakimś neutralnym tłem (kolorem, bądź powtarzalnym wzorkiem).

Przez pewien czas to podejście było w pewien sposób „kompatybilne wstecznie” i sprawdzało się dobrze. Na nowszych, większych monitorach witryny przygotowane w ten sposób, co prawda nie wykorzystywały w pełni dostępnego miejsca, jednak dalszym ciągu pozostawały czytelne. Wraz z pojawieniem się i popularyzacją smartfonów oraz internetu mobilnego, trzeba było jednak raz na zawsze skończyć z tym standardem. Strony takie na smartfonach nie mieszczą się po prostu w dostępnej szerokości i aby je obejrzeć, należy się mocno nagimnastykować scrollując je, nie tylko w pionie, ale i na boki. Użytkownikowi mobilnemu musi strasznie zależeć na przeczytaniu informacji na stronie, aby nie wyłączył jej zaraz po załadowaniu.

Jako projektanci ze zgrozą, a jako użytkownicy z niecierpliwością, zauważamy, że na polskim rynku wciąż funkcjonują jeszcze strony przygotowane w stylu Fixed Design.

Fluid Web Design

Gdy na rynku dostępna była już szeroka gama monitorów o rożnych rozdzielczościach, a przeglądarki zostały wyposażone w bardziej zaawansowane opcje, projektanci zaczęli brać bardziej na poważnie kwestię zróżnicowania dostępnej przestrzeni w okienkach internautów. Strony stawały się bardziej elastyczne.

Robota wre | Projekt Ninja
Ta podstrona jeszcze nie jest gotowa… to się wkrótce zmieni.

Responsive Web Design

Treści płynnie napełniają wolą przestrzeń.

Skrócone opisy chowanie ozdobników

Alteracja treści

Zmiany progowe

Przeskoki układów 2kolumny 1 kolumna, zamiana bannerów czy innych elementów, zmiana wielkości fontów. Zmiana liczby bloków-boxów wyświetlających się w pojedynczym wierszu. Ukjrycie pewnych elementów na wersji mobilnej.