Responsive Web Design

Responsive Web Design, czyli responsywne projektowanie stron internetowych, zakłada, że wszystkie treści umieszczone na stronie oraz ich układ, bez dodatkowych działań ze strony użytkownika będzie dostosowywał się do rozmiaru okna przeglądarki niezależnie od wielkości wyświetlacza urządzenia (desktop, laptop, tablet, smartfon). Z punktu widzenia użytkownika docelowego RWD jest szczególnie istotnym aspektem założeniem projektu strony internetowej – każdego roku przybywa użytkowników korzystających z treści dostępnych w Internecie przy pomocy urządzeń mobilnych.

Fluid Grid Systems

Relacje (odstępy, wielkość, hierarchie) pomiędzy poszczególnymi elementami umieszczonymi na stronie określane są w sposób względny, zależny od dwóch zmiennych: rozmiaru docelowego oraz kontekstu wyświetlania (wymiary na konkretnym urządzeniu). W przypadku “sztywnej siatki” treści projektowane są z myślą o określonym docelowym rozmiarze wyświetlacza. Oznacza to, że widok stworzony z myślą o standardowej szerokości strony 1440px, na urządzeniach o mniejszej szerokości (np. na smartfonie) będzie wychodził poza krawędzie wyświetlacza, czyli nie będzie bezpośrednio dostępny dla użytkownika.

Fluid Image

Czyli najprościej dostosowywanie elementów graficznych do określonej wielkości. Przeglądarka internetowa dostaje informację o sposobie, w jaki obraz ma być skalowany, aby dostosować go do różnych urządzeń. Dzięki takiemu rozwiązaniu, obrazy chronione są przed nadmiernym rozciągnięciem.

Media Queries

Pozwalają na określenie w jaki sposób wyświetlać stronę internetową na danym urządzeniu. Jest to swojego rodzaju zapytanie pomagają określić, po spełnieniu jakich warunków układ strony ma być zmieniony i w jaki konkretnie sposób.

• zwiększenie ruchu na urządzeniach mobilnych,
• lepsze wrażenia podczas przeglądania stron internetowych (komfort użytkownika),
• szybciej działająca strona,
• wyższy współczynnik konwersji,
• stosunkowo łatwe zarządzanie stroną i treściami (oszczędność czasu i pieniędzy),
• obniżone nakłady związane z utrzymaniem/ bieżącym utrzymaniem serwisu,
• zwiększony Mobile SEO Performance,
• ułatwiona analityka.

• kontoselfie.sgb.pl
• sgbmobile.sgb.pl
• skrzypinska.pl

• smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
• mbridge.pl/blog/responsywna-strona-internetowa-rwd-czyli-jaka/
• pl.wikipedia.org/wiki/Responsive_web_design
• w3schools.com/html/html_responsive.asp
• keycdn.com/blog/benefits-of-responsive-web-design
• thestory.is/pl/journal/responsive-web-design