Responsywny układ

Responsywne (web)design to oparte na formacie HTML zasady projektowania, które umożliwiają przejrzyste i przyjazne dla użytkownika wyświetlanie stron internetowych lub dokumentów na używanych urządzeniach końcowych. Wyświetlanie reaguje lub „odpowiada” na właściwości smartfona lub tabletu i elastycznie dostosowuje się pod względem układu, formatowania i pozycjonowania. W centrum uwagi znajduje się wiele i różnorodność mobilnych urządzeń końcowych, dlatego mówi się również o „optymalizacji mobilnej”. Pod hasłem „mobile first” w dużej mierze zastąpiło to historycznie wykształconą priorytetyzację wyświetlania na desktopach. Charakterystyczne elementy responsywnego designu to:

Formatowanie tekstu w obrębie dostępnej szerokości ekranu (lub czynnika powiększenia, orientacji ekranu, rozdzielczości itp.), tak aby nie było konieczne przewijanie poziome.

Przemieszczanie elementów treści, tak aby na przykład kolumny były układane jedna pod drugą, gdy dostępna przestrzeń dla układu wielokolumnowego zostanie przekroczona.

Stopniowe skalowanie lub ukrywanie elementów graficznych, gdy zapotrzebowanie na miejsce przekroczy określony poziom.

Te dostosowania responsywnego designu są wyzwalane, gdy przekroczona zostanie określona szerokość ekranu, zwana punktem przerwania (breakpoint). W przeciwieństwie do tego, płynny układ (fluid layout) nie zna stałych punktów przerwania, lecz wypełnia dostępne miejsce w zdefiniowanej proporcji procentowej do rozmiaru ekranu „płynnie”.

Czytaj więcej
Więcej informacji o formatach wyjściowych Serie M/
Z Serie M/

Dokumenty w responsywnym designie

Podstawą techniczną dla dynamicznego, niezwiązanego ze stroną HTML jest oznaczenie dokumentów informacjami strukturalnymi, takimi jak akapit, nagłówek, grafika itp. Serie M/ automatycznie wyposaża dokumenty w te metadane. To „tagowanie” jest kluczowe, aby zachować podstawową strukturę dokumentu HTML – gdzie zaczyna się nowy akapit, gdzie znajduje się kolejna kolumna, gdzie jest nagłówek, tabela itp. Również dostępne dokumenty w formacie PDF/UA opierają się na tym tagowaniu, które zapewnia, że np. czytniki ekranu na podstawie informacji strukturalnych rozpoznają właściwą sekwencję czytania kolumn/sekcji.

Dzięki Serie M/ łatwo jest tworzyć niezwiązane ze stroną dokumenty HTML w responsywnym układzie. Projektant szablonów definiuje w graficznym edytorze różne widoki, np. dla orientacji pionowej i poziomej, i przypisuje im punkty przerwania, przy których ma nastąpić zmiana układu – gotowe, resztę automatycznie wykonuje renderer HTML dla wszystkich szablonów.

Dynamiczne dokumenty

Dynamika i użyteczność dokumentów HTML w responsywnym designie mogą być jeszcze zwiększone. Dzięki technologii kaskadowych arkuszy stylów (CSS) można dynamicznie i interaktywnie zmieniać układ i pozycjonowanie elementów treści. Poniższy przykład oparty jest na responsywnym dokumencie HTML stworzonym z Serie M/, który został uzupełniony o przygotowane arkusze stylów CSS. Dzięki temu można na przykład

  • Pokaż i ukryj szczegóły,
  • skupić się na konkretnych osobach lub tematach,
  • lub wybrać między różnymi stylami wyświetlania grafiki (wykres słupkowy vs. wykres kołowy).
Przykład HTML

Pokrewne tematy

Inne formaty wyjściowe

Mehr Lesen

Zarządzanie wyjściem w Omnichannel z M/OMS

Mehr Lesen

Usługa oddzwaniania w przypadku pytań

  • To pole jest używane do walidacji i powinno pozostać niezmienione.
Christel Heusler