Rozwój Internetu i technologii znacząco przyspieszył przez ostatnią dekadę. Pierwsza strona internetowa powstała na początku lat 90. Ówczesna technologia z zakresu kodowania strony opierała się właściwie tylko na kodzie HTML (HyperText Markup Language), który opisuje strukturę wewnątrz strony internetowej. W 1996 roku firma W3C opracowała język, który pozwalał na opis formy wyświetlania stron WWW. Są to tzw. kaskadowe arkusze stylów CSS (Cascading Style Sheets).
Stworzenie CSS miało na celu rozdzielenie struktury wewnętrznej witryny od formy jej wyświetlania. Znacząco ułatwia on wprowadzanie zmian dokumentu. Co więcej pozwala także na zmianę w wyglądzie wizualnym stronu w zależności od urządzenia, na którym wyświetla się stronę. Kolejnym kamieniem milowym w rozwoju stron internetowych było pojawienie się na rynku urządzeń mobilnych – smartfonów, tabletów etc.
Strona internetowa – Responsive Web Design
W 2010, 20 lat po uruchomieniu pierwszej strony internetowej, po raz pierwszy zastosowano technikę projektowania Responsive Web Design. Głównym założeniem tej technologii było automatyczne dostosowanie witryny do rozmiaru okien przeglądarek, na których wyświetla się. W ten sposób utworzona strona internetowa jest uniwersalna – prawidłowo wyświetla się na dużych urządzeniach, jak i ekranach smartfonów czy tabletów. Do niedawna wymagano kodowania właściwie drugiej, lżejszej i mniejszej strony internetowej właśnie na urządzenia mobilne.
Działanie techniki RWD odbywa się za pomocą tzw. media queries. Określają one zakres działania kodu css w zależności od szerokości, wysokości lub koloru. Rozpoznają także rozdzielczość przeglądarki, przez co można zaadaptować konkretny arkusz stylu, dopasowany do jej wymiarów. Wszystkie te działania można wykonywać w jednym pliku, nie dzieląc go na osobne arkusze.
Przykładowe linijki z arkusza stylów:
width:100%;
}@media (min-width:768px) and (max-width:1024px){
img{
width: 75%;
}
}@media (min-width: 320px) and (max-width: 767px){
img{
width: 50%;
}
}
Wyobraźmy sobie obrazek, który ma określoną szerokość. Za pomocą powyższego kodu obrazek na urządzeniach powyżej 1024px wyświetli się 100% szerokością. Z kolei na urządzeniu poniżej 1024px, a powyżej 768px (rozdzielczość tabletowa) wyświetla się z 75% szerokością, a na urządzeniach mobilnych 50%.
Zasady tworzenia stron internetowych RWD
Żeby stworzyć właściwie responsywną stronę internetową we właściwy sposób powinno się zacząć od najmniejszego ekranu. Dlatego, że obecnie i tak co raz więcej użytkowników korzysta z telefonów i tabletów to oni generują ruch na stronach. Następnie należy właściwie ustalić priorytety treści. Tworząc stronę internetową musimy odpowiedzieć sobie na pytanie, co koniecznie musi się niej znaleźć niezależnie od rozdzielczości. Strona na urządzeniach mobilnych nie pomieści w sobie tylu elementów, co strona desktopowa. Stąd ta selekcja przed którą musi stanąć odpowiedzialny za projekt strony.
Kolejnym elementem na który zwraca się uwagę to dobra typografia czyli dobór czcionki oraz jej rozmiaru. Dobrze dobrana czcionka znacząco ułatwia czytanie tekstu na stronie. Trzeba więc dopracować wygląd i rozmiar fontu tak, żeby użytkownicy z łatwością mogli przeczytać wszystkie treści. Tworząc stronę internetową należy pamiętać również o szybkości wczytywania strony. Jest to wskaźnik, który informuje jak szybko wyświetli się zawartość strony internetowej – im szybsza witryna, tym lepsza. Google szybko zauważył problemy, z którymi borykają się użytkownicy smartfonów i tabletów. Wyszukiwarka lepiej pozycjonuje witryny, które wykorzystują technikę RWD lub stronę mobilną. Ma to na celu zachęcić właścicieli witryn internetowych do modyfikacji lub odświeżenia swoich stron internetowych.
Zalety RWD
- -Strony czytelne i przejrzyste niezależnie od rozdzielczości urządzenia;
- -Lepsze pozycjonowanie w Google;
-Jedna strona zamiast wersji standardowej i mobilnej;
Wady RWD
- -Wyższy koszt wykonania projektu strony z indywidualnym graficznym projektem;
- -Konieczność przeprowadzania testów na różnych urządzeniach (tutaj z pomocą przychodzą już przeglądarki, które umożliwiają podgląd strony na różnych rozdzielczościach);
- -Dłuższy czas wczytywania na mobilnych urządzeniach – mimo postawienia na minimalizm oraz niewielką liczbę grafik, urządzenie pobiera cały kod.
Zapraszamy również do zapoznania się z innym artykułem dot. responsywności: RESPONSYWNOŚĆ – CO TO ZNACZY?
