Blog

Czym są strony Responsywne???



2015-07-13 15:24 | Yapmen

Strony responsywne? Z czym to się je...?

Wraz ze wzrostem popularności urządzeń mobilnych, które mają różne rozmiary, rozdzielczości, a także możliwość zmiany orientacji ekranu pojawiła, się potrzeba projektowania stron internetowych, takich gdzie układ i wygląd automatycznie dostosowuje się do tych urządzeń, na których strona internetowa jest wyświetlana.

Pisane odrębnych witryn dla urządzeń przenośnych jest bardzo pracochłonną czynnością, dlatego wprowadzenie technik projektowania stron RWD, czyli Responsive Web Design znacznie przyśpieszyła i ułatwiła tworzenie stron internetowych programistom.

Przykład strony Responsywnej

Przykład strony responsywnej wykonanej przez SailCompany Brand NowoczesneStrony.com

 

Jeden adres strony dla wielu urządzeń...

Obrazek z napisem www

W przeszłości projektowanie stron mobilnych opierało się na budowie osobnych witryn osadzonych na dwóch różnych adresach URL. Często witryna mobilna osadzona była na subdomenie strony głównej. Dzięki technologii RWD, nie musimy mieć dwóch różnych adresów, dwóch różnych zasobów na tych stronach,  mamy za to tą samą treść, te same obrazy, które dostosowują się do rozdzielczości na jakiej są wyświetlane. Pozycjonowanie jednej witryny staje się zdecydowanie łatwiejsze oraz tańsze.

 

Trochę na temat spraw technicznych...

Obrazek pokazujący css

We wcześniejszych technologiach tworzenie stron responsywnych polegało na tworzeniu styli głównych dla całej strony oraz dodawaniu dodatkowych plików CSS z wersją na urządzenia mobilne lub do innych zastosowań. Za pomocą CSS2 Media Types definiowaliśmy, który plik za co jest odpowiedzialny. Strony responsywne na dzień dzisiejszy projektujemy za pomocą tzw. reguł CSS3 Media Queries. W CSS3 cały kod możemy(choć nie musimy) zdefiniowac w jednym pliku.

Media Queries w CSS3 rozpoznają  wielkość ekranu i wstawiają odpowiedni plik lub fragment kodu odpowiedzialnego za formatowanie strony. Poniżej przedstawię fragment kodu, za pomocą którego możemy zdefiniować jak przeglądarka będzie zachowywać dla szerokości 480 pikseli

   @media screen and (max-width: 480px) { 
     h1 {
       font-size: 9px;
     }
   }


Jeśli szerokość przeglądarki będzie mniejsza lub równa 480 pikseli wielkość czcionki nagłówka h1 będzie równa 9 pikseli.

Strony responsywne a Google...?

Logo Google

Google zdecydowanie wspiera tworzenie stron w oparciu o technologię RWD. Od 21 kwietnia 2015 roku Google oświadczyło, iż strony responsywne będą na uprzywilejowanej pozycji w wyszukiwarce w stosunku do stron nie stosującej tej technologii. W tym momencie tworzenie stron responsywnych nie jest dodatkiem, ale wręcz obowiązującym standardem. Dlatego też SailCompany Brand NowoczesneStrony.com nie pobiera dodatkowych opłat za użycie tych technik przy tworzeniu stron, sklepów czy innych aplikacji na przeglądarki.

Zalety i wady...

Plus i minus ikonka

Zalety stosowania stron responsywnych:

  • strony dostosowane do wszystkich urządzeń
  • jeden adres url
  • spójna nawigacja oraz dostęp do tych samych zasobów (teksty, obrazy itd.) niezależnie od urządzenia
  • uprzywilejowana pozycja w wyszukiwarce Google
  • mniejsze koszty oraz łatwość wdrożenia

Wady stosowania stron responsywnych:

  • wzrost transferu danych na urządzeniach mobilnych
  • niekompatybilność ze starszymi przeglądarkami mobilnymi
  • długi proces testowania rozwiązania