Responsywność (Responsive Web Design) to podejście, w którym ta sama strona automatycznie dopasowuje układ, obrazy i typografię do rozmiaru ekranu urządzenia, od telefonu po duży monitor.
Z czego się składa?
- elastyczne siatki (Flexbox, CSS Grid),
- zapytania o media (
@media) dostosowujące układ do szerokości, - obrazy responsywne (
srcset,sizes), - poprawna deklaracja viewport.
Responsywność a SEO
Google zaleca strony responsywne, bo mają jeden adres i jeden kod HTML dla wszystkich urządzeń, co upraszcza indeksowanie i jest zgodne z mobile-first indexing.
Elastyczna siatka, obrazy i punkty graniczne
Strona responsywna opiera się na trzech elementach: elastycznych układach z jednostkami względnymi i siatką Flexbox lub Grid, skalowalnych obrazach (max-width: 100%, srcset) oraz zapytaniach o media, które zmieniają styl w punktach granicznych. Określenie i podejście spopularyzował Ethan Marcotte w 2010 roku. Punkty graniczne wybiera się tam, gdzie treść przestaje dobrze wyglądać, a nie pod konkretne modele telefonów.
Do testów użyj trybu urządzeń w DevTools i przynajmniej jednego prawdziwego telefonu, bo emulacja nie odtworzy wszystkiego, np. dotyku i wydajności.
Jakie szerokości testować?
Zacznij od ok. 360–400 px (telefony), 768 px (tablety) i 1280 px i więcej (komputery), ale pozwól układowi dopasowywać się płynnie, a nie tylko w punktach przełamania.