DesignMagazyn

Design

Responsive Web Design

Opublikowane dnia .

Responsive Web Design

Wstęp

Design

Responsive Web Design

Opublikowane dnia .
Idea Responsive Web Design opiera się na tym, że strona internetowa powinna automatycznie dostosować swój wygląd w zależności od wielkości ekranu urządzenia na którym jest otwierana.

W 2007 roku Apple zaprezentowało światu iPhon’a i spowodowało prawdziwą rewolucję na ryku urządzeń mobilnych. Oczywiście firma z Cupetrino nie wynalazła smartfonów, jednak udało się jej skutecznie wprowadzić mobilny internet do powszechnego użytku.

Wraz ze wzrostem popularności dostępu do internetu przez urządzenia mobilne wzrastała również presja na twórców stron internetowych, aby przygotowywać dedykowane wersje mobilne serwisów lub tworzyć dedykowane aplikacje mobilne.

W obecnej chwili na rynku są tysiące urządzeń o różnych wymiarach, rozdzielczościach oraz proporcjach ekranu. Przygotowanie więc pojedynczej wersji mobilnej oraz dedykowanej aplikacji mobilnej mogą nie wystarczyć.

Nowe technologie, nowa filozofia

Idea Responsive Web Design opiera się na tym, że strona internetowa powinna automatycznie dostosować swój wygląd w zależności od wielkości ekranu urządzenia na którym jest otwierana. Dzięki zastosowaniu tej technologii użytkownik zawsze otrzymuje wygodną w korzystaniu stronę niezależnie od tego, na jakim urządzeniu ją otwiera.

Termin „Responsive Web Design” zaproponował designer i deweloper z Bostonu Ethan Marcotte . Swoje pomysły oraz całą filozofię i metody tworzenia stron opisał w 2011 roku w swojej książce o bardzo oryginalnym tytule: Responsive web design”.
Od tego momentu RWD stało się jednym z popularniejszych trendów w web designie.

Jak to zrobić? Całkiem prosto.

Strony wykorzystujące Responsive Web Design zazwyczaj projektuje się w oparciu o grid o zmiennej szerokości kolumn. Efekt skalowania strony w uzyskuję się odpowiednio zmieniając szerokość kolumn i marginesy kolumn oraz zmieniając wielkość poszczególnych elementów. Wykorzystujemy do tego opcje Media Queries dodaną w CSS3. Media Query Pozwala nam ona określić z jakim typem ekranu oraz rozdzielczością mamy do czynienia. Działa to na zasadzie wyrażenia warunkowego. Jeżeli nasza rozdzielczość mieści się w podanych parametrach to wczytywane są odpowiednie style.

Patrząc na przykład poniżej, style zawarte w klamrze wczytają się dla ekranów o szerokości od 786 px do 979px czyli dla przeciętnej rozdzielczości tabletu w położeniu pionowym.

@media (min-width: 768px) and (max-width: 979px) {
/* — style dla tabletów — */
}

Bardziej szczegółowe informacje o media query znajdziecie w specyfikacji W3C

Oprócz Media query w responsive web design stosuje się również odpowiednie skrypty jQuery, które służą do skalowania zdjęć oraz innych elementów strony.

Z czego korzystać

Jak zacząć z Responsive web design? Najlpepiej od sprawdzenia w google. Mimo, iż jest to w miarę nowy pomysł to w internecie można juz znaleźć mnóstwo darmowych poradników, gotowych gridów lub szablonów wordpressa i joomle.

Osobiście mogę polecić dwa rozwiązania z których korzystałem:
cssgrid.net – Gotowy grid złożony z 12 kolumn o szerokości 1140px, idealnie sprawdza się dla ekranów o szerokości 1280 px czyli jednej z popularniejszych rozdzielczości stosowanej w laptopach.
gridpak.com – generator online do tworzenia gridów
Bootstrap – Jest to framework do tworzenia front endu stworzony przez programistów z Twittera. Nie jest to rozwiązanie tylko do Responsive web design, ale do kompleksowego tworzenia strony. Zawiera w sobie bardzo dobrze przygotowany płynny grid.

Czy warto?

Czy warto przerabiać lub projektować swoją stronę z wykorzystaniem Responsive Web Design? Każdy musi zdecydować sam, ja na koniec podam jeszcze kilka ważnych zalet:

  • jest to prosty sposób na dobrze wyglądającą wersję mobilną strony
  • implementacja nie jest skomplikowana i można ją bez problemu wdrożyć nawet na istniejącej już stronie
  • korzystając z rwd mamy jedną stronę na wszystkie platformy, czyli w przypadku wprowadzenia modyfikacji robimy to tylko w jednym projekcie
  • technologia jest nowa, ale oparta o dobrze znane i używane od dłuższego czasu standardy, więc do wdrożenia Responsive Web design niekonieczne jest zatrudnianie nowych specjalistów
  • jest to bardzo „świeże” technologicznie podejście do projektowania stron www, na dodatek wykorzystujące nowe możliwości jakie oferuje css3 i html5.

Koncepcja Responsive Web Design bardzo mi się spodobała jak tylko się o niej dowiedziałem. Staram się wszystkim polecać i reklamować tą technologię, ponieważ jest to bardzo przyszłościowe podejście oraz posiada same zalety. W tej chwili pracuję właśnie na przerobieniem mojego portfolio, bloga oraz niektórych stron moich klientów na tę technologię.

Zdjęcia w artykule pochodzą z serwisu Fotolia

profile

Jan Szpakowski

http://www.janszpakowski.pl

UX / UI Designer który po godzinach lubi projektować logotypy. Uwielbia minimalizm, kreatywny branding, komiksy i science fiction. Jego mottem jest: simple is the best.

Zobacz komentarze (8) ...