Blog

Responsive Web Design

Responsive Web Design – co to takiego?

Dzisiaj każda strona internetowa musi być dostosowana do urządzeń mobilnych. Już w 2011 r. sprzedano więcej urządzeń mobilnych niż komputerów stacjonarnych – liczba ta wciąż rośnie. Dzisiaj strona internetowa musi obsługiwać wiele różnych typów smartfonów i tabletów, a także być w stanie reagować na notebooki i komputery stacjonarne z monitorami o rozmiarach od 11 do 27 cali.

To już nie wystarczy, jeśli tylko opracowywano mobilne wersje strony internetowej dla specjalnej klasy urządzeń, takich jak iPhone.

Rozwiązanie nosi nazwę Responsive Webdesign (responsive web design RWD): zapytania o media służą do sprawdzania, jakiego rodzaju urządzenia używa użytkownik do połączenia się z witryną i jak duże jest okno przeglądarki.

Następnie otrzymuje dostosowany do jego wariantu wersję strony internetowej. Responsywne projektowanie stron internetowych wykorzystuje charakter dokumentów HTML. Zawsze masz możliwość dostosowania się do rozmiaru okna przeglądarki. Ta wielka zaleta była od dawna postrzegana jako wada, ponieważ wciąż rozwijany w świecie analogowym projekt, miał sztywne specyfikacje, które powinny mieć zastosowanie w Internecie.

Właśnie dlatego pokolenia programistów zaczęły umieszczać dokumenty HTML w ciasnym ramach kodu. To działało stosunkowo dobrze, o ile użytkownicy mieli ekran o podobnej wielkości. Wraz z pojawieniem się urządzeń mobilnych, HTML może teraz w pełni wykorzystać swoją zdolność reagowania na rozmiar okien przeglądarki. Obsługiwany jest kod HTML, rozszerzony o wiele klas i określany jako HTML5, z dodatkowymi funkcjami w CSS3 i JavaScript.

Wymagania projektowe znacznie się zwiększyły dzięki elastycznemu wyglądowi stron internetowych. Projektanci mają teraz za zadanie stworzenia spójnego wyglądu witryny na wszystkich ekranach. Ze względu na ogromną liczbę urządzeń i rozmiarów ekranu, projekt strony internetowej nie może już być traktowany jako osobny krok przed programowaniem. Dzisiaj wiele decyzji projektowych można podejmować tylko w trakcie procesu programowania, ponieważ dopiero w prototypie strony pojawiają się pewne problemy funkcjonalne i wizualizacyjne.

Jednak dzisiejsza strona internetowa nie tylko musi reagować na różne rozmiary ekranu, ale także na jakość połączenia internetowego. Ponieważ, aby prędkość ładowania stron internetowych na urządzeniach mobilnych pomimo dużej przepustowości była wysoka, na przykład pliki CSS i JavaScript muszą zostać podsumowane, a obrazy dostarczone w mniejszym wariancie. Obrazy są w inny sposób przenoszone w pełnym rozmiarze i wyświetlane przez smartfona jako małe.

Jednak strona internetowa musi również reagować na ekrany Retina o wysokiej rozdzielczości, które są w trakcie przechwytywania rynku komputerów stacjonarnych, i z kolei wyświetlają obrazy o znacznie większej rozdzielczości niż tradycyjne ekrany.

Implementacja witryny w Responsive Web Design wymaga ścisłej współpracy projektantów i programistów. Połączenie projektowania i programowania stanowi podstawę naszej pracy od samego początku.