Jedną z inicjatyw Drupala 8 jest utworzenie mechanizmu serwowania stron mobilnych za pomocą tzw. Responsive Design. Jest to technologia pozwalająca na różnicowanie stylów css aplikowanych do strony dzięki Media Queries (czyli prostym regułom definiującym np. maksymalną oraz minimalną rozdzielczość czy typ urządzenia). Dzięki temu otrzymujemy jedną strukturę HTML dla wszystkich urządzeń, co niewątpliwie jest tańsze i prostsze w wytworzeniu – to sama przeglądarka wybiera, jakie style załadować.
Jak zwykle i jak w każdym podejściu są wady i zalety. Oczywistymi wadami jest serwowanie dużo ważących stron urządzeniom mobilnym (korzystającym zazwyczaj z wolniejszego internetu) oraz niektóre problematyczne elementy, jak np. tabele, przy których jest nieco zabawy (zwłaszcza w kontekście cmsów, gdzie na wstępie mamy narzuconą strukturę i czasem ciężko je zmusić do współdziałania).

Ideę podejścia do tabel reponsywnych opisał już na swoim blogu Piotr Cichosz (shpyo), także zainteresowanych zapraszam do jego dobrze opracowanego wpisu.

Drupal 8 wyszedł z podobnego założenia – należy dostarczyć użytkownikom odpowiednich klas, dzięki którym będą mogli poukrywać na mniejszych monitorach mniej istotne elementy.

Implementacja


// Build the sortable table header.
  $header = array(
    'title' => array(
      'data' => t('Title'),
      'field' => 'n.title',
    ),
    'type' => array(
      'data' => t('Content type'),
      'field' => 'n.type',
      'class' => array(RESPONSIVE_PRIORITY_MEDIUM),
    ),
    'author' => array(
      'data' => t('Author'),
      'class' => array(RESPONSIVE_PRIORITY_LOW),
    ),
    'status' => array(
      'data' => t('Status'),
      'field' => 'n.status',
    ),
    'changed' => array(
      'data' => t('Updated'),
      'field' => 'n.changed',
      'sort' => 'desc',
      'class' => array(RESPONSIVE_PRIORITY_LOW)
    ,)
  ); 

Powyższy kod pochodzi z panelu zarządzania node'ami (admin/content) z pliku node.admin.inc.

Drupal 8 dostarcza dwóch stałych:

  • RESPONSIVE_PRIORITY_MEDIUM – nadaje klasę priority-medium
  • RESPONSIVE_PRIORITY_LOW – nadaje klasę priority-low

Dzięki temu za pomocą CSS + Media Queries + display: none; możemy w prosty sposób ukryć niektóre mniej istotne elementy na urządzeniach o niższej rozdzielczości.

Przykład CSS:

/**
* Responsive tables.
*/
@media screen and (max-width:28.125em) { /* 450px */
  th.helpful,
  td.helpful,
  th.priority-medium,
  td.priority-medium {
    display: none;
  }
}
@media screen and (max-width:45em) { /* 720px */
  th.helpful,
  td.helpful {
    display: none;
  }
} 

Ponadto Drupal 8 dostarcza mechanizmu pozwalającego wyświetlić na żądanie wszystkie kolumny niezależnie od użytej rozdzielczości urządzenia (w formie buttona). Dzięki takiemu podejściu nawet jeśli źle oszacujemy jakie informacje mogą być dla naszych użytkowników ważne są oni w stanie bez żadnych problemów zobaczyć interesujące ich elementy.

Dodaj komentarz