Rozwinięcie z angielskiego Responsive Web Design, w wolnym tłumaczeniu „design responsywny”, który oznacza tak zaprojektowaną stronę, aby automatycznie dopasowała się do ekranu urządzenia, na którym jest wyświetlana. W praktyce strony projektuje się w dwóch wersjach – zarówno na Desktop, jak i na Mobile (jedna – powyżej, a druga – poniżej określonej rozdzielczości).
Jeśli chcesz sprawdzić, czy strona jest responsywna, wystarczy (na desktopie, czyli ekranie dużego monitora) zmniejszać okienko przeglądarki aż do postaci ekranu telefonu – w pewnym momencie powinna przejść ona na projekt RWD.
Desktop
Wersja desktopowa strony www to nic innego jak widok strony na ekranach monitorów niezależnych i laptopów.
Przy projektowaniu i kodowaniu strony www należy wziąć pod uwagę to, jak strona będzie się zachowywała na różnych rozdzielczościach ekranu. Najpopularniejsze rozdzielczości w Polsce w 2019 roku to Full HD1920px x 1080px oraz zaraz za nią rozdzielczość przemysłowych monitorów 1366x768px.
Mobile
Wersja mobilna strony www to widok strony na urządzeniach mniejszych niż laptopy czy monitory niezależne – tablety i telefony. Jeśli chodzi o rozdzielczość, dla której powinien być przygotowany projekt strony na wersji mobile to stale i niezmiennie od kilku lat jest to 360x 640px (Źródło http://ranking.gemius.com/pl/).
Należy zwrócić także uwagę na zmianę layoutu w zależności od wysokości (nie tylko szerokości) urządzenia czy orientacji ekranu (pionowa lub pozioma). Na urządzenia mobilne poszczególne elementy projektu powinny być zaplanowane w zupełnie inny sposób niż na desktop.
Ze względu na to, iż aktualnie 70% użytkowników przegląda strony na urządzeniach mobilnych, są one projektowane wg zasady mobile first, a dopiero później pod ekrany monitorów (desktop).
Jak łatwo się zorientować projekt na wersję mobile jest dużo węższy i niższy, zatem należy tak przemyśleć układ strony i jej zawartość, aby użytkownik na desktopie oraz na urządzeniu mobilnym mógł w tak samo łatwy sposób szybko znaleźć interesującą go informację.