Responsive web design na przykładzie
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:
2. Dzięki CSS3 możemy wykorzystać Media Queries. W nawiasach wpisujemy rozdzielczość, dla której będą wykorzystywane style:
/* 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.
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ć..