RESPONSYWNA STRONA INTERNETOWA

Sposoby, w jakie wchodzimy w interakcje ze stronami internetowymi stale się zmieniają i nadal będą się zmieniać. W prehistorycznych czasach Internetu większość ludzi korzystała z komputerów stacjonarnych, czekając kilka minut na włączenie się buczącego sprzętu, tracąc kolejnych kilka na połączenie się z siecią. Można uznać, że był to cały proces, który przypominał rytuał. Dopiero od niedawna niemal każdy ma natychmiastowy dostęp do szerokiej gamy urządzeń, w tym laptopów, tabletów i smartfonów.

To już nie jest jeden wielki gabarytowo 15-calowy monitor CRT, ale całe spektrum wyświetlaczy o różnych wielkościach i proporcjach. Spowodowało to rosnące zapotrzebowanie na responsywne projektowanie stron internetowych by na każdym dodatkowym ekranie strona www wyświetlała się co najmniej przyzwoicie.

W 2023 roku liczba użytkowników smartfonów na świecie wynosi 6,92 miliarda, co oznacza, że 85,82% światowej populacji posiada w kieszeni mały ekran. Przekłada się to na ponad 9000 różnych urządzeń, kilka przeglądarek i systemów operacyjnych. Z innych statystyk wynika także, że 57% użytkowników internetu uznało, że nie poleci firmy, która ma źle zaprojektowaną stronę internetową na urządzeniach mobilnych. Nie jest to zaskakujące, jeżeli weźmiemy pod uwagę, że w drugim kwartale 2022 roku urządzenia te wygenerowały 58,99% globalnego ruchu na stronach internetowych.

Przy tak ogromnych liczbach nie powinno dziwić, że optymalizacja stron internetowych pod kątem urządzeń mobilnych powinna być kluczowa dla każdego biznesu, niezależnie od branży gospodarki i rodzaju potencjalnego klienta. Ponadto 53,8% projektantów stron internetowych twierdzi, że „brak responsywności na wszystkich urządzeniach” jest głównym powodem przeprojektowania strony internetowej.

Czym jest responsywność stron internetowych?

Responsywne projektowanie stron www to podejście do projektowania, które zapewnia, że prezentowana strona wygląda dobrze i działa poprawnie na wszystkich urządzeniach, niezależnie od wielkości ekranu i posiadanego sprzętu. W tym przypadku nic nie dzieje się "samo" – to projektant musi wdrożyć konkretne rozwiązania w kodzie, które sprawią, że strona internetowa będzie płynnie zmieniała swój układ.

Responsywne projektowanie stron internetowych to obecnie standard, a wręcz wymóg, z dwóch podstawowych powodów:

1. Ponad 51% wejść na strony internetowe pochodzi ze smartfonów. Żaden przedsiębiorca czy właściciel strony nie może sobie pozwolić na stracenie połowy potencjalnych klientów.
2. Strona www bez responsywności jest "gorszego sortu" – jest gorzej traktowana przez Google, przez co zazwyczaj spada w otchłań zapomnienia na dalekie strony wyników wyszukiwania, do których nikt nie dotrze.

Kiedy ponad połowa potencjalnych gości korzysta z urządzenia mobilnego do przeglądania Internetu, nie można po prostu udostępnić im wyglądu strony www przeznaczonej na komputery stacjonarne i laptopy. Byłoby to trudne do odczytania i obsługi, a doświadczenia z przeglądania byłyby tragiczne. Dodajmy do tego fakt, że użytkownicy urządzeń mobilnych również stanowią większość wizyt w wyszukiwarkach oraz przede wszystkim social mediach. Dlatego też w ciągu kilku ostatnich lat rynek mobilny stał się jednym z najważniejszych kanałów reklamowych. Po pandemii wydatki na reklamę mobilną wzrosły o 4,8% do 91,52 miliarda dolarów. Także niezależnie od tego, czy zdecydujemy się reklamować w mediach społecznościowych, czy zastosujemy podejście organiczne, takie jak pozycjonowanie SEO, zdecydowana większość ruchu będzie pochodzić od użytkowników mobilnych.

Jeśli strona internetowa nie jest zoptymalizowana pod kątem urządzeń mobilnych, trudno będzie zmaksymalizować ROI (wskaźnika rentowności) z wykonywanych działań marketingowych. Innymi słowy, złe współczynniki konwersji doprowadzą do mniejszej liczby potencjalnych klientów i zmarnowanych wydatków na reklamę.

Czy strony oparte o WordPress są responsywne?

Odpowiedź na to pytanie zależy od jednego czynnika – stworzonego szablonu. System CMS WordPress to jedynie zaplecze, które pozwala na łatwiejsze zarządzanie stroną oraz jej funkcjami. Za cały kod, który widzi odwiedzający, odpowiedzialny jest szablon. Domyślny szablon WordPress, taki jak Twenty Twenty, jest responsywny, ale ponieważ jest to projekt jednokolumnowy, można nawet nie zdawać sobie z tego sprawy, przeglądając go na różnych ekranach. W przypadku innych szablonów WordPress, można sprawdzić, czy jest responsywny, porównując jego wygląd na różnych urządzeniach lub korzystając z narzędzi dla programistów wbudowanych w przeglądarki internetowe. Zazwyczaj jednak popularne i nowe szablony są dostosowane do poprawnego wyświetlania na różnych urządzeniach.

User Experience jest kluczowy dla internauty

W pojęciu User Experience (UX) poza estetyką, prędkością wczytywania i łatwością nawigowania strony internetowej, istotna jest także dostępność. Przeglądanie treści z dowolnego urządzenia, bez konieczności powiększania lub przewijania w poziomie sprawia, że poruszanie się po stronie internetowej jest czymś przyjemnym. Można więc powiedzieć, że responsywne projektowanie stron internetowych to podejście, które sugeruje, że napisany kod powinien reagować na zachowanie użytkownika i jego środowisko w oparciu o platformę, rozmiar i orientację ekranu.

Zasady, które należy zastosować podczas tworzenia responsywnych stron internetowych

Podczas projektowania strony www, konieczne jest wdrożenie wielu rozwiązań, które poprawią wspomniany wcześniej UX. Oczywiście nie są to wszystkie zasady, a jedynie te najważniejsze i najczęściej stosowane.

Podstawą projektowania responsywnego jest połączenie HTML i CSS – dwóch języków kontrolujących zawartość i układ strony w dowolnej przeglądarce internetowej. HTML kontroluje głównie strukturę, elementy i treść strony internetowej, natomiast CSS służy do stylowania i ustalania układu elementów umieszczonych na stronie za pomocą HTML. Kod CSS może zostać zawarty w sekcji <style> dokumentu HTML lub jako oddzielny plik arkusza stylów. To przede wszystkim dzięki stylom CSS projekt staje się responsywny, jeśli połączy się go z techniką zwaną Media Queries.

Używanie Media Queries

Jednym z podstawowych sposobów tworzenia responsywnej witryny internetowej jest użycie zapytań o media (Media Queries). Jest to rozwiązanie wdrażanie w kodzie CSS strony www, które pozwala określić warunki, jakie muszą zostać spełnione, by dany kod CSS został użyty na załadowanej stronie internetowej. Pojedynczy warunek to tzw. "breakpoint", w którym określamy przykładowo maksymalną wartość pikseli dla szerokości ekranu użytkownika. Jeżeli maksymalna wartość zostanie przekroczona, kod przestanie być wykorzystywany, pomagając tym samym odróżnić laptop od tabletu czy smartfona.

Dzięki breakpointom układ strony internetowej dostosuje się w określony przez projektanta sposób, aby zapewnić użytkownikom możliwie najlepszy widok, zmieniając m.in. rozmieszczenie elementów czy wielkość czcionki. Przykładowe breakpointy to 480 pikseli, 768 pikseli, 1024 pikseli i 1280 pikseli. Oczywiście nie sposób przystosować się do wszystkich możliwych rozmiarów ekranów i rozdzielczości, dlatego twórcy stron www zazwyczaj definiują dwa lub trzy breakpointy – na smartfon, tablet i komputer stacjonarny. Jeżeli posiadasz tablet i podczas przeglądania Internetu zauważyłeś kiedyś na stronie internetowej, że się coś rozjeżdża lub niepoprawnie wyświetla, elementy się nie mieszczą na ekranie lub są nieczytelne (albo odwrotnie – strona www wygląda jak na smartfonie) to znaczy, że dla danej strony internetowej nie zostały uwzględnione breakpointy dla wersji tabletowej. Użytkownicy tabletów to zazwyczaj najmniejsza grupa wizyt, dlatego też ze względu na oszczędności, firmy decydują się na wykorzystanie na tych urządzeniach wersji smartfonowej lub (co gorsza) desktopowej.

Oczywiście poza określaniem minimalnej lub maksymalnej rozdzielczości,  możemy skorzystać możemy także z innych warunków – chociażby takich, które sprawdzają czy trzymamy urządzenie pionowo czy poziomo.

Jeżeli korzystamy z gotowych frameworków, do breakpointów możemy odwołać się bezpośrednio w klasach elementów HTML. Takie możliwości ma chociażby Bootstrap, który jest jednym z pierwszych i najpopularniejszych responsywnych frameworków, dzięki czemu pomógł ustanowić projektowanie mobilne jako standard branżowy. W rezultacie wielu projektantów stron internetowych do dziś nadal przestrzega breakpointów szerokości ekranu ustalonych przez twórców Bootstrapa.

Kiedy należy dodać standardowy responsywny "punkt przerwania"? Typowe breakpointy dla stron internetowych to:

• Duże monitory stacjonarne
• Laptopy z małym ekranem
• Tablety
• Ekrany smartfonów
• Bardzo duże ekrany (np. telewizory)

Jak widać punkty przerwania nie są dodawane pod konkretne urządzenie, ale orientacyjną wielkość ekranu. Wraz z każdym nowym modelem smartfonu rozdzielczości i proporcji ekranu jest coraz więcej, a należy doliczyć do tego jeszcze takie wynalazki jak czytnik Kindle, czy różne Smart TV. W dziedzinie projektowania i tworzenia stron internetowych szybko dochodzimy do punktu, w którym nie jesteśmy w stanie nadążać za niekończącą się liczbą nowych rozdzielczości i urządzeń, a te powstają nieustannie. Dlatego też stworzenie strony internetowej pod każdą rozdzielczość i nowe urządzenie byłoby niemożliwe, a przynajmniej niepraktyczne.

Natomiast ogólnie można przyjąć, że dobrym zwyczajem jest dodawanie breakpointów, gdy treść wygląda na źle wyrównaną. To może dotyczyć nawet samego segmentu smartfonów – treść na najmniejszym iPhone SE będzie miała inną czytelność niż na dużym Samsungu Galaxy S24 Ultra, który ma prawie dwukrotnie większy ekran. Oczywiste jest więc, że w miarę zmniejszania się ekranu, treść i układ zacznie się zniekształcać, co może pogorszyć czytelność. Dodanie w takim przypadku dodatkowego breakpointa zapobiega takiej sytuacji.

Najlepsze praktyki dotyczące korzystania z breakpointów to:

• Projektowanie stron internetowych w pierwszej kolejności dla użytkowników mobilnych. Znacznie trudniej jest upchać (uprościć) stronę desktopową do wersji mobilnej, niż odwrotnie - stronę mobilną rozszerzyć na ekrany komputerów. Kiedy projekt jest przeznaczony przede wszystkim dla urządzeń mobilnych, programiści zajmują się tym, co jest najbardziej potrzebne, a następnie mogą wprowadzać dodatki odpowiadające preferencjom użytkowników komputerów stacjonarnych. Ponieważ tworzenie mobilnych stron www jest trudniejsze ze względu na mniejsze ekrany, projektanci już na początku muszą dokonywać trudnych wyborów, co oszczędza im później czasu. Dodatkowo, prędkość ładowania strony internetowej jest znacznie szybsza, gdy zaczyna się tworzenie od prostszego kodu CSS i mniejszej ilości zasobów. Stawianie priorytetu na wersję mobilną strony internetowej wymaga także mniej kodowania, ponieważ elementy na poziomie bloków, takie jak div, nagłówek lub sekcja, domyślnie wypełniają 100% elementu nadrzędnego. Dzięki temu większość treści automatycznie dopasuje się do ekranu urządzenia mobilnego. Nie należy zapominać także, że programiści i projektanci są zmuszeni wziąć pod uwagę różnice funkcjonalne występujące pomiędzy urządzeniami. Na przykład niektóre urządzenia traktują priorytetowo wyszukiwanie głosowe, podczas gdy inne lepiej radzą sobie z klawiaturą lub touchpadem.
• Dodawanie/usuwanie elementów w zależności od widoku. Responsywny projekt strony internetowej automatycznie rekonfiguruje wyświetlane elementy. Zazwyczaj wykorzystuje się jeden płynny układ, który pasuje do dowolnego rozmiaru ekranu mobilnego, jak i ekranu komputera. Warto jednak pamiętać, że rozbudowana strona www oznacza dużo elementów i treści. O ile w wersji desktop może to ładnie wyglądać, bo mamy duży i szeroki ekran, o tyle w wersji mobilnej elementy powinny układać się jeden pod drugim, co może skutkować bardzo długą stroną www z koniecznością żmudnego scrollowania. Należy wtedy zredukować chaos usuwając niepotrzebne elementy. Można to zrobić poprzez np. usunięcie wszystkiego, co rozprasza wzrok, wyeksponowanie elementów CTA (call to action) czy zredukowanie ilości zdjęć. Ukrywanie lub wyświetlanie elementów w określonych breakpointach jest istotne także przy menu nawigacyjnym. Widoczny w wersji desktop typowy pasek ze skrótami powinien być zastępowany przez tzw. "hamburger menu" na mniejszych ekranach.
• Dotyk to nie to samo co kursor. Większość urządzeń mobilnych (telefony i tablety) jest obecnie wyposażona w ekrany dotykowe. Niektóre laptopy również nadrabiają zaległości, oferując ekran dotykowy wraz z fizyczną klawiaturą. Z tego powodu wszystkie elementy w responsywnym projekcie strony internetowej powinny brać pod uwagę precyzję dotykania ekranu palcem. Jako że jest ona nieco mniejsza niż poruszanie się kursorem po ekranie, warto wszystkie wielkości skalibrować pod kątem obsługi za pomocą ekranów dotykowych. Każdy przycisk czy link musi być wystarczająco duży oraz łatwy do wykrycia i wybrania, tak aby można go było dotknąć opuszkiem palca. Odnośniki nie mogą być zbyt blisko siebie (np. jeden pod drugim), ponieważ użytkownik może przypadkiem dokonać złego wyboru – w końcu nasze palce są znacznie większe niż wskaźnik myszy. Pół biedy jeżeli odwiedzający przejdzie na złą podstronę, ale może także dojść do większych pomyłek — np. wybierze złą opcję dostawy w sklepie lub poprzestawia coś w ustawieniach aplikacji. Wyszukiwarka Google również zwraca na to uwagę i elementy klikalne znajdujące się zbyt blisko siebie wpływają negatywnie na SEO. Takich mikro-czynników jest znacznie więcej i każdy twórca stron internetowych powinien brać je pod uwagę.
• Nacisk na czytelność. Rozwijając powyższy punkt należy wspomnieć o czytelności strony internetowej na urządzeniu mobilnym. Poza usunięciem niepotrzebnych rozpraszaczy warto powiększyć nieco czcionkę i korzystać z jednej, szerokiej kolumny, jeżeli pojawia się tekst dłuższy niż kilka słów. Strony internetowe nie mają ładnie funkcjonującej możliwości łamania wyrazów i przenoszenia ich do następnej linii (jak w książkach), więc przy zbyt wąskim elemencie z tekstem może się okazać, że mamy po jednym wyrazie w linijce lub trzeba dotykać telefonu nosem by coś odczytać.

Używanie elastycznych layoutów

Struktura, układ oraz rozmieszczenie treści na stronie internetowej to podstawowe zadanie dla każdego projektanta. Pracę należy jednak pomnożyć przez dwa (lub trzy jeżeli planujemy wersję tabletową) ponieważ pomimo takiej samej zawartości, cały layout musi zostać zmieniony by pasował do aktualnie obsługiwanego ekranu. Wszystkie paski boczne czy elementy znajdujące się obok siebie powinny być przeniesione nad/pod inne elementy, ponieważ możemy doprowadzić do sytuacji, gdy dwie kolumny umieszczone obok siebie, świetnie wyglądające na komputerze, będą wyglądać na ściśnięte na małym wyświetlaczu smartfona — nie wspominając już o tym, że dłuższe wyrazy będą zajmować całą linijkę.

Używając modułów CSS, takich jak Flexbox czy Grid, będziemy mogli w łatwy sposób poradzić sobie z dostosowaniem układu do różnych urządzeń. Moduły te pomagają m.in. zdefiniować ilość wierszy i kolumn na siatce, rozmieścić i wyrównać zawartość w kontenerach, co w połączeniu z Media Queries nada stronie internetowej elastyczność i pozwoli na odpowiednie ułożenie elementów wzdłuż jednej osi (w poziomie lub w pionie).

W internecie można znaleźć mnóstwo poradników pomagających zrozumieć podstawy CSS Media Queries

Użyj elastycznych jednostek

Kolejną podstawową koncepcją w tworzeniu responsywnych stron internetowych są jednostki. Wcześniej strony internetowe opierały się na wartościach określanych w pikselach. Teraz jednak warto je budować na tak zwanej "płynnej siatce" (fluid grid). Zasadniczo płynna siatka ustawia elementy na stronie www proporcjonalnie do rozmiaru ekranu, na którym są wyświetlane. Zamiast tworzyć wszystko w jednym, konkretnym rozmiarze określonym w pikselach, elementy na płynnej siatce będą reagować i zmieniać rozmiar, aby dopasować się do obecnego ekranu.

Płynna siatka dzieli layout na kolumny, a wysokości i szerokości są skalowane, a nie zdefiniowane na stałe. Innymi słowy, proporcje tekstu i elementów zależą od wielkości ekranu. Płynna siatka pomaga również zachować spójność wizualną witryny na wielu urządzeniach. Zapewnia także większą kontrolę nad wyrównywaniem elementów oraz umożliwia szybsze podejmowanie decyzji związanych z projektem strony internetowej.

Istnieją różne jednostki, których można użyć do określenia rozmiaru np. kontenera lub czcionki. Chociaż mamy szeroki zakres jednostek do wyboru (takich jak rem, cm, px, cale i inne), można je ogólnie podzielić na dwa typy:

• Jednostki względne (relative): są to jednostki, których wartość zmienia się w zależności od rozmiaru ekranu. Ten rodzaj jednostki nie ma stałych wymiarów (jak np. piksele), ale można go łatwo rozszerzać lub kontrastować w zależności od rozmiaru urządzenia. Przykładami jednostek względnych jest procent, rem (rozmiar czcionki elementu głównego) lub em.
• Jednostki bezwzględnie (absolute): są to jednostki, których wartości pozostają takie same niezależnie od wielkości ekranu, a zajmowana przestrzeń zawsze pozostanie taka sama, czyli piksele, centymetry itp.

Oczywiście najlepszym rozwiązaniem dla responsywnej strony internetowej jest wybór jednostek, które  automatycznie rozszerzają się lub zmieniają rozmiar w zależności od rozmiaru ekranu lub zawartości. Typowym przykładem jest użycie wartości procentowej, gdy chcemy żeby dany element zawsze zajmował cały ekran (czyli 100% szerokości). W przypadku jednostki bezwzględnej (takiej jak piksele), możemy zdefiniować wielkość, która będzie wszędzie taka sama, niezależnie od rozmiaru ekranu.

Pozycja elementów CSS

Inną zasadą, która pomoże uzyskać w pełni responsywną stronę internetową, jest nadanie właściwości pozycji dla konkretnego elementu. Są to właściwości takie jak relative, absolute, static, sticky and fixed (czyli względne, bezwzględne, statyczne, lepkie i stałe). Ustalenie za ich pomocą pozycji w kodzie CSS pozwoli łatwo przenieść i ustawić różne elementy na ekranie, zmieniając ich wartości początkowe i pierwotne położenie. Dla przykładu, pozycja bezwzględna (absolute) ustawia element względem elementu nadrzędnego. Jeżeli więc element pozycjonowany znajduje się wewnątrz innego elementu, który ma właściwość inną niż statyczna, zostanie umieszczony względem tego właśnie elementu. Jeżeli takiego elementu nie ma, zostanie on umieszczony względem góry ekranu. Tym sposobem możemy "przykleić" jeden element do drugiego.

Prędkość wczytywania strony internetowej

Podczas tworzenia responsywnego projektu strony www, szybkość ładowania powinna mieć bardzo wysoki priorytet. Strony www ładujące się w 2 sekundy mają średni współczynnik odrzuceń na poziomie 9%, natomiast strony internetowe ładujące się w 5 sekund mają współczynnik odrzuceń na poziomie 38%. Im dłużej wczytuje się strona www, tym więcej potencjalnych klientów traci firma. Warto dodatkowo zaznaczyć, że prędkość jest także brana pod uwagę w trakcie ustalania pozycji strony www przez wyszukiwarkę Google. Dlatego podejście do responsywności nie może blokować ani opóźniać pierwszego renderowania strony internetowej bardziej, niż jest to konieczne.

Istnieje kilka sposobów na przyspieszenie wczytywania się strony www. Optymalizacja obrazów, implementacja buforowania, minifikacja kodu, używanie bardziej wydajnego układu CSS, unikanie blokowania renderowania w JavaScript i ulepszanie krytycznej ścieżki renderowania – wszystko to warto rozważyć. Można także spróbować wdrożyć Google AMP na swoich stronach mobilnych, ale według niektórych testów liczba potencjalnych klientów z urządzeń mobilnych spadła aż o 59%.

Przykłady narzędzi do sprawdzania responsywności

W trakcie pracy podczas testów, warto na bieżąco weryfikować responsywność strony internetowej. Najlepiej jest ją przetestować na wielu przeglądarkach i urządzeniach, jako że tylko w ten sposób można sprawdzić skuteczność projektowania responsywnego w rzeczywistych warunkach użytkowania. Jednak wiązałoby się to z dużą inwestycją i mało kto ma dostęp do wszystkich szerokości ekranu i proporcji, dlatego sprawdzenie na konkretnych rozmiarach ekranów czy strona www jest responsywna może być utrudnione.

Oto alternatywne sposoby na sprawdzenie czy strona internetowa jest dostosowana do urządzeń mobilnych:

• Test optymalizacji mobilnej Google, który umożliwia sprawdzenie dowolnego adresu URL pod kątem zgodności z urządzeniami mobilnymi. Oczywiście pobieranie wprowadzonego adresu zajmie trochę czasu i nie odzwierciedla szybkości ładowania strony internetowej.
• Narzędzia dla programistów – jest to funkcja wbudowana we wszystkie nowe przeglądarki. Użycie skrótu klawiaturowego (control + shift + I na komputerach z systemem Windows lub command + option + I na komputerach Mac) otwiera odpowiedni widok urządzenia. Tam można wybrać urządzenie mobilne lub tablet z kilku predefiniowanych ustawień lub wpisać własną rozdzielczość, na jakiej chcemy zobaczyć stronę internetową.
• Browserstack - bezpłatne narzędzie do sprawdzania responsywności online. Jest to jeden z najłatwiejszych sposobów uzyskania rzeczywistego widoku konkretnej witryny na rzeczywistych urządzeniach z unikalnymi rozmiarami ekranów. Umożliwia użytkownikom natychmiastowe przeprowadzanie responsywnych testów na popularnych typach urządzeń, takich jak smartfony, tablety (w tym Kindle) i komputery stacjonarne. Wystarczy wpisać adres URL konkretnej strony www, a zostanie ona załadowana na wielu urządzeniach. Następnie można wybrać sprzęt, na którym chcemy przeglądać podaną stronę internetową, zarówno w trybie pionowym jak i poziomym. Minusem jest brak możliwości wchodzenia w interakcję ze stroną www oraz niewielka liczba symulowanych urządzeń w darmowej wersji. Wersja płatna dodaje także możliwość testowania responsywności na różnych wersjach systemów operacyjnych i różnych przeglądarkach, jest też funkcja ograniczania przepustowości sieci do testowania wydajności stron internetowych przy słabym zasięgu lub wolnym połączeniu internetowym, a także testowanie geolokalizacji w celu sprawdzenia zachowania strony internetowej w konkretnej lokalizacji.

Metody opisane powyżej pomogą programistom lub zespołom w natychmiastowym testowaniu swoich witryn internetowych na urządzeniach o różnych rozmiarach ekranów. Co więcej, pomoże to także pracownikom kontroli jakości w debugowaniu problemów z renderowaniem, jakie potencjalnie mogą pojawić się na konkretnym urządzeniu lub przeglądarce. W ten sposób możemy sprawdzić między innymi czy układ strony internetowej dostosowuje się do prawidłowej liczby kolumn, czy treść dobrze pasuje do kontenerów na różnych ekranach oraz czy rozmiary czcionek pasują do każdej rozdzielczości.

BrowserStack to popularne narzędzie do weryfikacji responsywności

Podsumowanie

Powyższe przykłady i omówienia to tylko wierzchołek góry lodowej, jakim jest responsywne tworzenie stron internetowych. Internet już dawno wkroczył w nową erę projektowania i obecnie dostępnych jest znacznie więcej opcji, niż te opisane, a za kilka lat będzie ich jeszcze więcej. Zwłaszcza w dobie bezpłatnych frameworków, kompilatorów, CMSów i otwartych bibliotek stale ulepszanych przez społeczności. Nie warto ich dzielić na lepsze czy gorsze, ponieważ ważniejsze od tego jest zrozumienie jak sprawić, by projekt był dostosowany do potrzeb użytkownika. Dopiero dzięki temu będziemy w stanie dobrać odpowiednie narzędzia i metody. Warto także pamiętać, że responsywne projektowanie stron internetowych to jedynie koncepcja, która po prawidłowym wdrożeniu znacząco poprawia doświadczenie, ale nie zawsze dla każdego użytkownika, urządzenia i platformy. Będziemy musieli stale pracować nad poprawianiem responsywności z nowymi urządzeniami, rozdzielczościami i technologiami, aby w nadchodzących latach stale ulepszać doświadczenia użytkowników w miarę rozwoju technologii.