DTP (Desktop Publishing)

Responsywność (ang. responsiveness) to zdolność strony internetowej lub aplikacji do automatycznego dostosowywania układu, rozmiarów elementów i funkcjonalności do różnych rozmiarów ekranów i urządzeń (np. komputerów, tabletów, smartfonów).

Kluczowe cechy responsywności:

1. Płynny układ (fluid layout) – elementy skalują się proporcjonalnie do szerokości ekranu (np. używając jednostek '%’, 'vw’, 'rem’ zamiast sztywnych 'px’).
2. Media queries – zapytania CSS, które pozwalają zastosować różne style w zależności od rozdzielczości, orientacji ekranu (pion/poziom) czy typu urządzenia.
3. Elastyczne obrazy i multimedia – np. ustawienie 'max-width: 100%’, aby nie wychodziły poza ekran.
4. Dostosowana nawigacja – np. zamiana menu na przycisk „hamburger” na małych ekranach.

Dlaczego responsywność jest ważna?

• Użytkownicy – wygoda przeglądania na dowolnym urządzeniu.
• SEO – Google faworyzuje strony responsywne w wynikach wyszukiwania.
• Koszt i czas – jedna wersja strony zamiast osobnych dla desktopu i mobile.

Przykład:

Na desktopie strona wyświetla 3 kolumny, na tablecie – 2, a na smartfonie – 1 kolumnę z pionowym przewijaniem.