Co to jest projektowanie responsywne?

Jeszcze nie tak dawno projektanci nie musieli martwić się o wygląd stron internetowych na telefonach komórkowych i tabletach. Telefony nie były jeszcze zbyt praktyczne do przeglądania w Internecie, a przed iPadem tablety były bardziej nowością niż niezbędnym elementem.

Oczywiście wszystko to się zmieniło, a większość ekspertów technologicznych przewiduje, że w ciągu najbliższych kilku lat, prawdopodobnie prędzej niż później, przeglądanie mobilne wyprzedzi przeglądanie na komputerach stacjonarnych jako dominujący sposób przeglądania sieci.

Dzięki stale zmieniającej się gamie rozmiarów ekranów i urządzeń, w tym konsol do gier wideo i telewizorów internetowych, stare sposoby projektowania stron internetowych po prostu nie są już w stanie sprostać zadaniu. A gdy firmy zdają sobie sprawę z potrzeby optymalizacji korzystania z Internetu pod kątem użytkowników mobilnych, projektanci, którzy się nie dostosują, pozostaną w tyle.

Uwaga redaktora: Poniżej znajduje się wprowadzenie do projektowania responsywnego dla początkujących, które nie jest przeznaczone dla bardziej doświadczonych projektantów stron internetowych.

Główne elementy projektowania responsywnego

Tutaj wkracza Responsive Web Design, treść i/lub układ, który automatycznie dostosowuje się do rozmiaru ekranu, na którym jest oglądany. Najprościej rzecz ujmując, trzy podstawowe elementy Responsive Design to elastyczna siatka, elastyczne obrazy i zapytania o media, te ostatnie wprowadzone jako część CSS3. Więcej o nich za chwilę.

Elastyczne siatki

Elastyczne siatki to w zasadzie motywy i szablony, w których elementy projektu są ustawione w procentach, a nie w pikselach. Z procentami jako jednostką miary, oznacza to, że element zaprojektowany na 50% zawsze zajmie połowę ekranu, bez względu na to, jak duży lub mały jest ekran.

Elastyczne obrazy

W swoich najbardziej podstawowych, elastycznych obrazach nie może być łatwiej tworzyć, pisząc prostą regułę, która mówi:

 img { max-width: 100%; }

Zasadniczo oznacza to, że jeśli element jest większy niż jego kontener, reguła wymusza na nim dopasowanie do szerokości tego kontenera. A ponieważ nowoczesne przeglądarki proporcjonalnie zmieniają rozmiar obrazów, zachowany jest również współczynnik proporcji obrazu. Co więcej, reguła 100% może być również używana do prawie wszystkich innych elementów, takich jak osadzone filmy.

Zapytanie mediów

Od czasu wprowadzenia Media Types w CSS 2.1, arkusze stylów znacznie bardziej uwzględniają urządzenia mobilne i inne. Media Types zasadniczo umożliwiają stylizowanie na określone klasy urządzeń internetowych, w tym urządzenia przenośne, ekrany i telewizory. Jednak przy niewielkiej standaryzacji między urządzeniami i niewielkim wsparciu ze strony producentów urządzeń Media Types nigdy nie spełniły swojego potencjału.

Media Queries spełniają ten potencjał, a nawet więcej. Ale zamiast zajmować się typem urządzenia, tak jak robią to Media Types, Media Queries zamiast tego sprawdzają możliwości urządzenia.

Proste zapytanie o media może wyglądać tak:

Dwa składniki zapytania to typ nośnika, ustawiony jako ekran, a następnie samo zapytanie — (max-device-width: 480px) — które zasadniczo pyta, czy szerokość urządzenia wynosi 480 pikseli lub mniej. W takim przypadku urządzenie ładuje generic.css. Jeśli nie, łącze jest ignorowane, podobnie jak inne, do czasu zidentyfikowania prawidłowej rozdzielczości i załadowania odpowiedniego arkusza stylów.

Więcej niż tylko rozdzielczość

Jednak rozdzielczość nie jest bynajmniej jedynym elementem projektu, który można kontrolować za pomocą zapytań o media. Szerokość i wysokość okna przeglądarki, orientacja pozioma i pionowa, a nawet układ, to tylko niektóre z innych parametrów, które można ustawić.

Na przykład, jeśli zapytanie o media wykryje, że urządzenie jest smartfonem, projekt, który może się załadować, pokazując trzy kolumny z obszarem tekstowym i dwa pionowe paski boczne na ekranie komputera, może zostać załadowany na ekranie smartfona jako obszar tekstowy o pełnej szerokości z dwa paski boczne jako elementy poziome pod spodem.

Elastyczne nastawienie

Oczywiście kluczowym wymogiem dla elastycznego projektowania są projektanci z elastycznym nastawieniem do projektowania. Niestety, większość stron internetowych nadal nie jest tak przyjazna dla urządzeń mobilnych, głównie dlatego, że większość projektantów nadal zazwyczaj projektuje tylko na komputery stacjonarne za pomocą smartfonów i tabletów po namyśle. Niewielu projektantów podchodzi do projektowania z myślą o wielu platformach.

Chociaż włączanie zapytań o media do arkuszy stylów wymaga nauki, to przejście od projektowania z pikselami do projektowania z wykorzystaniem wartości procentowych powstrzymuje niektórych projektantów stron internetowych. W rzeczywistości jednak nie ma dużej różnicy w projektowaniu z procentami i jest to również łatwiejsze.

Rozważmy na przykład różnicę między przypisaniem szerokości 100% i 100 pikseli dwóm identycznym elementom. W jednym możesz mieć pewność, że element wypełni cały ekran, niezależnie od tego, czy jest to ekran komputera stacjonarnego, laptopa czy iPhone'a. Ale element o szerokości 100 pikseli byłby duży na 480-pikselowym ekranie iPhone'a, ale stosunkowo mały na ekranie komputera stacjonarnego o rozdzielczości 1600×900.

Responsywny projekt oznacza biznes

Dla firm główny powód wdrażania responsywnego projektowania jest oczywisty. Im łatwiej jest potencjalnym klientom nawigować i znajdować to, czego szukają, tym wyższy współczynnik konwersji. Jednak dla wielu projektantów projektowanie responsywne witryny biznesowej zwykle oznaczało po prostu zmniejszenie rozmiaru treści, aby zmieścić się na mniejszym ekranie. Każdy, kto spędzał czas na przewijaniu, powiększaniu i pomniejszaniu, aby znaleźć informacje, których szuka, wie, że miniaturowa wersja strony internetowej nie jest odpowiedzią.

Innym sposobem, w jaki firmy i projektanci zajęli się kwestią projektowania na urządzenia mobilne, było utworzenie oddzielnej witryny dla różnych urządzeń z automatycznymi przekierowaniami w zależności od urządzenia. Pozwala to zapewnić najlepszy interfejs, a także uniknąć powolnego ładowania spowodowanego przez JavaScript i duże obrazy.

Ale to podejście ma kilka wad. Z pewnością jednym z nich jest koszt tworzenia i utrzymywania wielu witryn oraz koordynowania treści w tych witrynach. I oczywiście jest jeszcze jedna nowa strona do zbudowania, gdy pojawi się nowe urządzenie. Na szczęście projektowanie responsywne, jeśli zostanie wykonane poprawnie, może rozwiązać prawie wszystkie problemy związane z projektowaniem na urządzenia mobilne.