Responsive web design na przykładzie

Autor: Mateusz Czyżewski, Data: 06/04/2013

Wyrażenie, które jeszcze nie ma dobrego polskiego odpowiednika to w skrócie sposób projektowania strony internetowej, dynamicznie dostosowującej się do rozmiaru ekranu, na którym jest wyświetlana.

Jeszcze niedawno dla urządzeń mobilnych trzeba było przygotowywać osobną stronę – aktualnie wystarczy wykorzystać Media Queries i odpowiednio wszystko ostylować. W ten sposób jeden, odpowiednio przygotowany szablon będzie dobrze wyglądał na monitorze Full HD, laptopie, tablecie i telefonie komórkowym. Obecnie jest to najlepsza metoda (zalecana m.in. przez Google) tworzenia stron obsługiwanych przez różne typy urządzeń, pomimo pewnych wad, o których napiszę poniżej.

Wady

  • trzeba poświęcić więcej czasu na przygotowanie strony,
  • jest to trudniejsze niż przygotowanie kilku prostych szablonów,
  • większy rozmiar (wolniej się ładuje, mniejsza płynność działania – nadmiarowy kod, który nie jest wykorzystywany na danym urządzeniu),
  • starsze przeglądarki nie obsługują Media Queries.

Zalety

  • raz a porządnie – jeden szablon na wszystkie urządzenia – jednokrotna optymalizacja,
  • Google to lubi – treść nie jest powielana – dobre dla SEO,
  • łatwiejsza aktualizacja – zmiany wprowadzane tylko w jednym szablonie,
  • nie trzeba serwować różnym urządzeniom innych adresów URL (np. mobile.mojastrona.pl, tablet.mojastrona.pl itp.),
  • jest bajer – można podziwiać jak wszystko się dopasowuje i się tym chwalić 🙂

Jak zacząć?

Najpierw przykład szablonu – zobacz jak to działa tutaj: aquagreen. Żeby przetestować zmieniaj rozmiar przeglądarki internetowej lub wykorzystaj fajną opcję Firefoxa – “Widok responsywny” (skrót: CTRL+SHIFT+M).

Szablon można kupić w tym sklepie z szablonami za 12 zł.

Już wiecie jak to mniej więcej wygląda – teraz czas na fragmenty kodu, które pozwalają na uzyskanie takiego efektu.

Tworzenie responsywnego wyglądu

1. Metatag, który poinformuje przeglądarki mobilne, żeby nie skalowały strony:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Dzięki CSS3 możemy wykorzystać Media Queries. W nawiasach wpisujemy rozdzielczość, dla której będą wykorzystywane style:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* Początek CSS */
#main{
    border: 1px solid green;
}
@media (max-width: 767px) {
    /* Standardowy kod CSS */
    #main{
        border: 1px solid red;
    }
    /* Standardowy kod CSS */
}
 
@media (min-width:768px) and (max-width:979px){
    /* Standardowy kod CSS */
    #main{
        border: 1px solid blue;
    }
    /* Standardowy kod CSS */
}
/* Koniec CSS */

Powyższy kod spowoduje, że na ekranach o rozdzielczości do 767px element o id=”main” będzie miał czerwoną ramkę, na ekranach od 768px do 979px będzie miał ramkę niebieską, a na pozostałych ekranach (większych niż 979px) zobaczymy ramkę zieloną.

A teraz niespodzianka – jest wiele frameworków CSS, które ułatwią nam przygotowanie responsywnego szablonu. Najciekawsze to Twitter Bootstrap (wykorzystany przy szablonie AquaGreen), Foundation, Gumby, Skeleton i wiele innych. Warto się z nimi zapoznać, ponieważ bardzo ułatwiają i przyspieszają pracę.

Wpis gościnny.

Komentarze

  1. Kamil says:

    mnie denerwuje strasznie w całym RWD, że o wiele ciężej tworzy się szablony stron, teraz nie wystarczy tego poskładać już w programie graficznym, tylko trzeba się nieźle nadłubać..

Dodaj komentarz:

Kanal RSS - nowosci

Witaj!

Witaj na blogu poświęconym wszystkiemu, co wiąże się ze stronami www. Przeczytasz tutaj o procesie ich tworzenia, pozycjonowaniu, wymianie linków, zarabianiu w programach partnerskich itp.

Odnajdziesz tutaj szablony stworzone w języku HTML dostępne całkowicie za darmo.

Jednym z działów jest moje potrfolio, a więc zbiór najlepszych prac.

Polecam:

atrakcje turystyczne

wyjade.pl - atrakcje, szlaki, wydarzenia

Popularne szablony:

Szablon 4

Szablon 4

Szablon 1

Szablon 1

Szablon 8

Szablon 8

Szablon 5

Szablon 5

Copyright 2007 - 2009 by flankerds.com. Wszystkie prawa zastrzeżone.