HTML5 i CSS3 - Dawid Mazur

Kup ebooka

54.00 zł
43.20 zł (43,20 zł najniższa cena z 30 dni)

-
Proszę czekać

1 Strony responsywne

Projektowanie stron internetowych to bardzo szeroki temat, do którego podejście w przeciągu ostatnich kilku lat zmieniło się diametralnie. Początkowo strony można było kojarzyć ze statycznym tekstem i zdjęciami, z czasem zaczęto jednak urozmaicać je różnymi elementami animowanymi. Obecnie na stronach www można umieścić również muzykę czy pliki wideo. Okazuje się jednak, że to za mało. Z chwilą, kiedy na rynku pojawiły się smartfony i tablety, tradycyjne strony internetowe przestały się sprawdzać w stu procentach.

Strona internetowa po wczytaniu do przeglądarki w urządzeniach mobilnych zdecydowanie traci na jakości. Często, aby coś przeczytać, musimy dany fragment strony powiększyć, co z kolei sprawia, że inny fragment nie jest widoczny. Przeglądanie takiej strony bywa irytujące i bardzo niewygodne. Aby rozwiązać ten problem, zaczęto tworzyć strony mobilne. Jednak ich wykonanie najczęściej łączy się z powieleniem całej witryny i zaprojektowaniem jej tylko z myślą o urządzeniach mobilnych. To natomiast wiąże się z dwukrotną aktualizacją strony www - pierwsza aktualizacja dotyczy oczywiście wersji witryny przeznaczonej dla komputerów, druga natomiast wersji zaprojektowanej dla urządzeń mobilnych. Jeżeli aktualizacja jest wykonywana stosunkowo rzadko, można próbować projektować tego typu strony.

O wiele lepszym rozwiązaniem jest Responsive Web Design, w skrócie zwane RWD. To technika projektowania stron, dzięki której uzyskujemy optymalne wyświetlanie treści witryny zarówno na monitorze komputera, laptopa, jak i na wyświetlaczach urządzeń mobilnych. Strona responsywna w porównaniu do tradycyjnej o wiele lepiej dopasowuje się do tych urządzeń, ponieważ już na etapie projektowania zakładamy różne rozdzielczości, w jakich w przyszłości będzie wyświetlana.

Zaletą stron responsywnych jest fakt, że tworząc strony dla różnych urządzeń, nie musimy powielać ich treści. Również aktualizacja treści wymaga od nas zmian tylko w jednym miejscu - nie wykonujemy aktualizacji osobno dla komputerów oraz smartfonów i tabletów. Podczas wczytywania strony do okna przeglądarki automatycznie sprawdzana jest rozdzielczość ekranu urządzenia, z którego korzystamy, po czym ładowane są style, które przeznaczyliśmy dla tej właśnie rozdzielczości. Dzięki takiemu rozwiązaniu mamy pewność, że tekst będzie czytelny, a grafiki nie będą większe niż szerokość ekranu.

Równie istotną sprawą jest nawigacja. Zastosowanie wielopoziomowej nawigacji w urządzeniach o stosunkowo niewielkich rozmiarach jest dość kłopotliwe dla użytkownika. Strony responsywne korzystają z bardzo prostej nawigacji, do której dostęp mamy z każdego miejsca witryny. Zazwyczaj, jeśli używamy smartfonu lub tabletu, widoczny jest niewielki przycisk menu. Wystarczy jedno stuknięcie w przycisk, aby menu zostało wyświetlone i abyśmy mogli wybrać w nim inną podstronę.