Strony Responsywne - Czym są i jak działaja?

Strony responsywne - czym są i jak działaja ?
Bardzo często w internecie można się spotkać z określeniem "Strony Responsywny" albo "Responsywne strony internetowe" czy po prostu RWD (Responsive Web Design) nie każdy do końca wie co to tak naprawdę jest i na jakiej zasadzie działają. Postaram się wam trochę o stronach responsywnych opowiedzieć.

Strony responsywne a strony mobilne

Zacznijmy jednak od stron mobilnych żeby dodać trochę historii, strony mobilne były to zazwyczaj specjalnie tworzone "mini strony" które były tworzone tylko i wyłącznie na potrzeby urządzeń mobilnych i tylko z tych urządzeń miały być przeglądane niestety taka mobilna strona internetowa wymagała osobnej aktualizacji, jeżeli chcieliśmy zaktualizować dział "O Nas" musieliśmy go zaktualizować na naszej głównej stronie jak również na mini stronie pod urządzenia mobilne co było oczywiście dość uciążliwe dla osób zarządzających tymi stronami.

Wraz z wprowadzeniem CSS 3 rozbudowano również funkcjonalność Media Querys co teraz pozwalało na większą kontrole nad strona internetowa i tworzenie responsywnych stron internetowych zależnie od szerokości przeglądarki na danym urządzeniu za pomocą Media Querys w kodzie CSS.

Jednak żeby skutecznie móc to robić należało ustalić jakieś standardy które by pomogły w lepszym dzieleniu strony na kolumny i tu do gry wchodzi framework 960.gs.

960.gs Grid System

Grid System (system siatek na potrzeby tworzenia stron internetowych) np 960.gs.więcej o nim możecie poczytać tu:
960.gs

960.gs czyli 960 Grid system powstał po to by ustanowić pewne normy w trakcie tworzenia stron internetowych, ustalono podstawową szerokość na 960 px gdyż była łatwo podzielna na 12 i 16 kolumn o równych szerokościach, jak również cała strona wyświetlała się poprawnie na rozdzielczości 1024 x 768.

Podział strony na 12 kolumn każda o szerokości na 60px z marginesem 10px po lewej i prawej stronie łącznie dawało nam 80px X 12 kolumn = 960px.

Dzięki tym standardom ustanowiony bardzo prosty framework jeżeli chcieliśmy by podzielić stronę na pół wystarczyło napisać:
 

<div class="container_12">
     <div class="grid_6">
          <h1>Kolumna pierwsza</h1>
     </div>
     <div class="grid-6">
          <h1>Kolumna druga</h1>
     </div>
</div>

W kodzie CSS który jest dostarczany razem z 960.gs wygląda to tak:

/************************************************
Urywek kodu CSS z 960_12_col.css
***********************************************/

/* `Container
----------------------------------------------------------------------------------------------------*/

.container_12 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.container_12 .grid_6 {
  width: 460px;
}

Czyli tak w skrócie jest przygotowany plik CSS, który już ma potworzone klasy, które wystarczy że dodamy do odpowiednich znaczników div w naszym kodzie by np podzielić stronę internetową na pół jak w przykładzie powyżej.

CSS Framework 960.gs oprócz gotowych plików CSS posiada również gotowe szablony pod różne programy graficzne w tym do Photoshop'a projektując strony internetowe bierzemy taki szablon i na podstawie niego i kolumn w nim zawartych projektujemy stronę co znacznie przyspiesza stworzenie strony internetowej.

960.gs a strony responsywne i Bootstrap

Jaki związek ma 960.gs do stron responsywnych a tym samym do Bootstrap'a ? Bootstrap też jest frameworkiem dużo nowszym, responsywnym wykorzystującym media query ale ogólnie działa na bardzo podobnej zasadzie też ma predefiniowane klasy które wystarczy dodać do znaczników div by osiągnąć taki układ strony internetowej jaki potrzebujemy ale dodatkowo są te klasy podzielone nie tylko na szerokość jaką reprezentują ale również na typ szerokości ekranu z jakich są przeglądane dzięki temu jeden DIV może mieć szerokość.

Przykładowo wykorzystując klasę CSS: .col-md-6 nasz DIV będzie miał taką szerokość na urządzeniach z szerokością ekranu mniejszą jak 970px czyli wszelkiego rodzaju smartfony i tablety.

Jak się tworzy strony responsywne w oparciu o Bootstrapa ?

parę przykładów na podstawie kodu Bootstrapa 3.0 któy możecie sciągnąć tu:
Bootstrap 3

Tworzymy następujący plik CSS:
 

/*************************************************
W tym miejscu wpisujemy nasz kod CSS dla smartfonów 
*************************************************/

H1 { color:red; }

@media (max-width: 768px) { 
/*************************************************
W tym miejscu wpisujemy nasz kod CSS dla tabletów
*************************************************/
H1 { color:blue; }
}


@media (min-width: 768px) and (max-width: 992px) { 

/*************************************************
W tym miejscu wpisujemy nasz kod CSS dla małych monitorów
*************************************************/
H1 { color:green; }
}
@media (min-width: 993px) and (max-width: 1199px) { 

/*************************************************
W tym miejscu wpisujemy nasz kod CSS dla średnich monitorów
*************************************************/
H1 { color:black; }
}


@media (min-width: 1200px) { 
/*************************************************
W tym miejscu wpisujemy nasz kod CSS dla dużych monitorów
*************************************************/
H1 { color:yellow; }
}

Strony responsywne a pozycjonowanie strony w Google

Dla dla Google bardzo ważnym czynnikiem jest czy twoja strona internetowa poprawnie się wyświetla na urządzeniach mobilnych ponieważ bardzo dużo osób właśnie wyszukuje stron i informacji z smartfonów czy tabletów jest to kolejny bardzo dobry powód dla którego twoja strona internetowa powinna być responsywna.

Podsumowanie

Na chwilę obecną responsywne strony internetowe to przyszłość internetu z dnia na dzień rośnie liczba różnego rodzaju urządzeń mobilnych od smartfonów po tablety twoja strona internetowa nie może pozostawać w tyle musi działać poprawnie na każdym rodzaju urządzenia dlatego mam nadzieje ze ten artykuł trochę wyjaśnił to czym strony responsywne są i na jakiej zasadzie działają jak również to dlaczego już dziś ich potrzebujecie.

Jeżeli spodobał się wam ten artykuł to zapraszam do polubienia i udostępnienie na Facebook'u jak również jeżeli chcielibyście przeczytać o tym jak stworzyć strony responsywne krok po kroku w oparciu o Bootstrapa dajcie mi znać w komentarzach im większe zainteresowanie tym większa szansa że taki poradnik krok po kroku powstanie.