Responsive design

Responsive design
Polecane artykuły
JavaScript Java Złośliwe oprogramowanie Webmaster HTML Aktualizacja oprogramowania ASP.NET Deep Web Big data

Responsive design (responsywne projektowanie stron) - jest to podejście do projektowania stron, dzięki czemu ich wygląd i układ mógł automatycznie dostosowywać się do różnych urządzeń mobilnych (np. smartfony lub tablety) i rozmiarów ekranów lub okien przeglądarek. Charakterystyczna dla takiej strony jest jej uniwersalność.

Potrzeba powstania responsive design

W wyniku rozwijającej się technologii w ostatnich latach na rynku ukazało się mnóstwo nowoczesnych urządzeń mobilnych z dostępem do Internetu. Technicznie żadne urządzenie nie ma problemu z wyświetleniem stron internetowych lecz występują problemy wykorzystania ich funkcjonalności w przypadku urządzeń z małymi ekranami. Pierwotnie strony internetowe były tworzone dla przeglądarek o stałych wymiarach, dla ekranów o sporej rozdzielczości. W przypadku wyświetlenia takiej strony na ekranie o małych wymiarach ekranu wystąpi tzw. efekt miniaturyzacji elementów. Wtedy użytkownik musi samodzielnie je powiększyć. Aby rozwiązać ten problem powstało responsywne projektowanie stron internetowych.

Istota responsive design

Responsywna strona to strona wykorzystująca elastyczne podejście. Generowany jest taki sam kod dla identycznego adresu URL, niezależnie od urządzenia, z którego się korzysta, lecz obraz generowany jest “elastycznie” - odpowiednio do rozdzielczości. Charakterystyczne dla tej metody jest związanie z minimalną liczbą tzw. front-endów dla każdego urządzenia mobilnego.
Celem responsive design jest zagwarantowanie użytkownikowi wygodnego odczytu strony, nie zważając na wymiary ekranu urządzenia mobilnego, z którego korzysta czy rodzaju przeglądarki. Gwarancją przeglądania responsywnej strony na każdym monitorze jest swobodne poruszanie się po stronie oraz dostępność jej funkcjonalności (wraz z udostępnionymi odnośnikami). Zapewnia się również czytelność tekstów i grafik, wraz z ich całkowitą widocznością - są automatycznie dopasowywane do rozmiarów wyświetlacza urządzenia. Przyjmuje się, że podczas procesu projektowania całkowicie praktycznej strony, najpierw powinno się zająć wersją mobilną, a następnie stworzyć desktopową stronę. W ramach tego rozwiązania na początku tworzenia powinno się zaplanować zawartość strony wraz z jej funkcjonalnością.

Ujmowane aspekty

W swojej publikacji Turek T. ujmuje, iż responsywne projektowanie powinno zwracać uwagę na zawieranie różnych aspektów (wizualizacyjne, ergonomiczne, techniczne czy organizacyjne). Najważniejsze aspekty to:

• sposób wyświetlania - treść i menu powinny wyświetlać się zgodnie z zainteresowaniami użytkownika,
• wizualny podział strony - dopasowanie liczby kolumn do wielkości ekranu urządzenia, na którym użytkownik wyświetla stronę,
• dostosowanie do ekranu dotykowego - aby użytkownik łatwo poruszał po stronie, za pomocą linków, menu i przycisków powinny one być odpowiednio powiększone, podobnie jak odległości między linijkami (ogranicza to przypadkowe kliknięcie złej opcji i niechciane przekierowanie dalej na stronie),
• wyświetlanie obrazów i filmów - multimedia szybko powinny zmieniać rozmiar, dostosowując się do rozdzielczości ekranu,
• reguły CSS3 - zaleca się stosowanie tych reguł, aby skalować moduły i zdjęcia na wyświetlaczu,
• formatowanie tekstu - należy dopasować rozmiar czcionki oraz ustalić odpowiednie przerwy między wierszami dla przejrzystości strony i przyjemności czytania użytkownika.

Turek T. opisuje również odpowiednik responsive design, czyli “projektowanie dedykowanych aplikacji mobilnych”. Zamiast przeglądarki jest uruchamiana taka aplikacja, zawierająca ograniczony zbiór funkcji. Dodatkowo zostaje przystosowana do użytkowania za pomocą ekranu z dotykowym panelem. Najczęściej wykorzystywane są przez większość systemów e-bankowości oraz umożliwiają prenumerowanie czasopism, jak również realizowanie mobilnych zakupów.

Ocena responsywności stron

Istnieją powszechnie dostępne w sieci narzędzia, służące ocenie responsywności stron internetowych. Odszukać można je wpisując frazę “website responsive test” w wyszukiwarce. Ich działanie opiera się o wyświetlanie ramek w rozmiarach, które ukazują wiele rozdzielczości dla zróżnicowanych urządzeń. Analiza natomiast jest subiektywną oceną poprawności, z jaką gotowe ramki są wyświetlane w danej witrynie. Testów można dokonać dla takich systemów operacyjnych, jak na przykład Microsoft Windows, Apple MAC OS czy Google Android. Najczęściej pojawiające się problemy przy ocenie responsywności witryn to:

• zbyt mała czcionka
• gęste rozmieszczenie linków
• niedopasowanie szerokości treści do ekranu
• brak ustawienia okna roboczego urządzenia mobilnego
• użyte wtyczki są niezgodne

Występowanie wyżej wymienionych problemów świadczy o niedostosowaniu stron internetowych do urządzeń, na których są wyświetlane.

Wzrost wydajności witryn

Poprawa wydajności stron internetowych i szybkość ich pobierania jest istotne dla optymalizowania stron zaprojektowanych metodą responsive design. Ochim H. i Pańczyk B. w swojej publikacji wymieniają i omawiają 6 działań dążących do polepszenia mobilności witryn. Są to:

1. "Minimalizacja liczby żądań HTTP
2. Konsolidacja i minimalizacja zasobów
3. Optymalizacja plików graficznych techniką Image Sprites
4. Warunkowe wczytywanie zawartości
5. Lokalizacja zasobów strony na różnych serwerach
6. Wykorzystanie sieci dostarczania treści (ang. Content Delivery Network - CDN)”

Bibliografia

• Janke P. (2016) Analiza responsywności wybranych platform usług elektronicznych administracji publicznej w Polsce, "Zeszyty Naukowe. Organizacja i Zarządzanie / Politechnika Śląska", z. 89, s. 177-187
• Ochim H., Pańczyk B. (2016) RWD jako narzędzie optymalizacji stron internetowych, "Informatyka, Automatyka, Pomiary w Gospodarce i Ochronie Środowiska", nr 4, s. 81-86
• Peterson C. (2014) Learning Responsive Web Design. A Beginner's Guide, O'Reilly Media
• Turek T. (2015) Analiza wykorzystania techniki Responsive Web Design w projektowaniu serwisów www na przykładzie uczelni wyższych, "Zeszyty Naukowe Uniwersytetu Szczecińskiego. Ekonomiczne Problemy Usług", nr 117 Wirtualizacja gospodarki - spojrzenie interdyscyplinarne, s. 787-796

Przypisy

Autor: Angelika Trólka