Responsive design

Leseenheid

Moeilijkheidsgraad

3

We gaan een belangrijk onderwerp behandelen. Toekomstige sites zullen responsive, adaptive en fluid moeten zijn. Dit wil zeggen dat al naar gelang het scherm (smartphone, tablet, PC) je toch een aangename manier hebt om de inhoud te bekijken.

  • Responsive: de inhoud en figuren pasen zich procentueel aan. Blokken komen onder elkaar te staan als er plaatsgebrek is.
  • Adaptive: zorgt er voor dat er nieuwe objecten ontstaan bij plaatsgebrek. Bvb de horizontale menu wordt een verticale met nieuwe knoppen.
  • Fluid: krijg je als je met kolommen werkt. als er één kolom geen inhoud bevat, dan zal de buurkolom breder worden.

Zoals gewoonlijk werken we een case uit. ik heb deze keer gekozen voor een vergelijking van de drie belangrijkste CMS'sen: Drupal, Joomla en Wordpress. De inhoud komt van Wikipedia.

Maak volgend inhoudstype aan:

De weergave wordt met classes bepaald.

En geeft dit resultaat: (voor Drupal)

Als je dit test in het Danland thema, dan zal dit een teleurstelling worden. Danland is niet Responsive en Adaptive. Je zou via veel CSS dit kunnen aanpassen. waarom zouden we echter geen thema gebruiken die wel alle kwaliteiten in huis heeft.. Adative them vna Drupal is zo'n thema. Zowel responsive, adaptive. Fluid heb ik nog niet getest..  Er is ook een subthema bij. Drupallers komen met hun CSS niet graag aan het origineel thema en doen de wijzigingen in een subthema, dat bij upgrades buiten schot blijft. Wij hebben daar echter geen last van omdat we de CSS injector gebruiken. In deel 3 gaan we wel werken met subthema's..

Het Adatiptive theme is knap, maar is zo basic dat we het als basis gaan gebruiken voor een meer gebruiksvriendelijk thema 'SKY'. Zet dit thema actief voor het  CMS inhoudstype.

 

Bij de instellingen zie je één van de meest uitgebruide interfaces die ik ken voor Drupal thema's. Je ziet duidelijk de drie layouts met hun instellingen én ook (zeer belangrijk) Panels!

Er is ook een mogelijkheid om CSS toe te passen via deze gebruiksvriendelijke interface:

 

Als je vindt dat het lettertype te groot is:

Als je nu het SKY thema nu op je inhoud los laat, zie je ook het adaptive karakter. Er is een nieuwe knop menu bijgekomen.

Onze classes werken nu wel responsive:

Je kunt nu ook een view maken met panes (panelen).

De paneelvelden zie je zoals vroeger:

Er is echter een mogelijkheid bijgekomen bij de indeling:

Vanaf nu zullen je views er anders gaan uitzien. Je zet alles op de plaats die jij wilt én het is geschikt voor elk scherm.

Tenslotte kan je het zelfde doen met panelen. Zij hebben dezelfde keuzemogelijkheid.

Ik laat dit als oefening over aan jullie. Maak voor de full inhoud een paneelversie, volgens de nieuwe normen.