Een onconventionele gids voor responsive design

Een onconventionele gids voor responsive design

Hoe wordt een responsive design gemaakt?

In vorige artikelen schreven we over het kiezen van onderwerpen en trefwoorden voor publicaties, en de optimale frequentie om content te publiceren.

We vertellen nu over hulpmiddelen waarmee je content zichtbaar maakt op het internet.

Bijna iedereen gebruikt tegenwoordig een Content Management Systeem (CMS). InstantPublishing heeft een voorkeur voor het WordPress CMS, in combinatie met de Spokal Inbound Marketing plug-in. Het woord CMS zegt al waar het over gaat.  Je gaat content managen. Zie het als een tekstverwerker waarmee je online stukjes schrijft. Het is niet de beste tekstverwerker, maar je krijgt op alle fronten hulp bij het publiceren en beheren (managen) van je content. Je bent het ene nog aan het schrijven, terwijl je het andere al aan de lezers wilt tonen. Je CMS doet dit redactionele beheer.

Dit artikel vertelt over het proces als je content klaar is voor publicatie. De publicatie van artikelen met een responsive design vormgeving. We noemen dit: content delivery. Dit is ook een onderdeel van je CMS. Na het typen van je letters helpt een CMS met de opmaak van de tekst, en de complete vormgeving van je website: je huisstijl. 

Big deal”, denk je dan: “als ik iets zie, dan ziet de rest van de wereld het toch ook?”. En je zat dus alles in te typen en te bekijken op je desktop computer …

Er is iets belangrijks gebeurd de afgelopen jaren. De wereld kijkt nu meer met mobiele apparaten naar websites dan met desktop computers. De helft van de zoekopdrachten in de hele wereld komt van mobiele apparaten (dus ook de zoekresultaten worden mobiel bekeken). Driekwart van alle Facebook gebruikers kijkt mobiel. En nog erger: Google beloont websites die geschikt zijn voor mobiele apparaten met een hogere Pagerank. 

Dus het wordt tijd voor een responsive design in je CMS en SEO strategie.

Is jouw website geschikt voor mobiele apparaten? 

Als dat niet zo is, dan volgt een nog veel belangrijker vraag: Hoe maak je jouw website geschikt voor mobiel? Ga je dit aan je website leverancier vragen, of lees je eerst nog een paar alinea’s verder?

Wist je dat jouw website mobiel geschikt gemaakt kan worden door in je HTML slechts 5 responsive design commando’s toe te voegen?

Web design is responsive design

Web design is responsive design.

Dat valt mee hè? Als je wil weten hoe dat werkt  (zonder het je webbouwer te vragen in ruil voor de rekening) dan is het verstandig nu verder te lezen. Voor de duidelijkheid: in het buitenland kost het omzetten van een statische website naar een mobiele website met responsive design: $60. So, read on.

Jij en de techniek …

We leggen deze technische zaken uit door zo simpel mogelijk te vertellen hoe het internet onder de motorkap werkt. Simpel.

Alsjeblieft, begrijpelijk internet

Alsjeblieft, begrijpelijk internet.

Dus, we gaan je in Jip en Janneke taal uitleggen:

  • Hoe responsive design in een mobiele website werkt
  • Hoe jij zonder hoge kosten je (bestaande) website mobile ready kan krijgen

Het woordenboek

Het niet de bedoeling dat je nu de weg kwijt raakt met termen waar je geen bal van snapt. We leggen kort uit wat de begrippen responsive– en adaptive design betekenen. En wat het verschil is tussen een native App en een mobiele website.

Daarna komen de 5 belangrijkste commando’s voor responsive design aan bod.

Een native App is een programma dat je uit een App store download op je mobiel. Alle code voor de vormgeving en rekenwerk wordt in één keer naar je toestel overgezet, en wanneer je de App gebruikt, dan haalt deze uitsluitend gegevens (data) op van een server. Een native App voor de weersverwachting heeft iconen van zonnetjes en regenwolken op je mobiel in de App staan, maar de gegevens voor het actuele weer haalt hij van een server. De combinatie toont vandaag een zonnetje en morgen een regenwolk.

Een mobiele website kan er uitzien als een native App, maar het is meestal een normale website die je op je desktop computer ziet, en ook aangepast aan een mobiel apparaat waarmee je kijkt. Je ziet de pagina’s op het mobiele apparaat in een webbrowser, en niet in een apart programma (de App). Alle code en data staan op één server, die pagina voor pagina de hele bups naar je mobiel stuurt. 

Het mooie van deze techniek is dat je met kleine aanpassingen in een bestaande website alles in verschillende groottes op verschillende apparaten kan zien. 

We noemen je website dan: responsive. Aangepast aan de ruimte en mogelijkheden van een groot of klein scherm.

Een mobiele website is responsive (maakt optimaal gebruik van beschikbare ruimte) wanneer de vormgeving dynamisch wordt aanpast aan de ruimte die beschikbaar is op verschillende schermen. 

Die beschikbare ruimte verschil enorm.

Responsive design

Responsive design.

Een website is daarnaast adaptive (met aangepaste functionaliteit) als stukjes functionaliteit zich op het ene scherm anders gedragen dan op het andere scherm. Bijvoorbeeld: een menu is in een gewone website 9 van de 10 keer een brede balk bovenaan, die niet past in het kleine scherm van een mobiel. Op dat moment wordt de vormgeving en de bediening van het menu automatisch aangepast naar bijvoorbeeld een dropdown box. Zo is adaptive design dus een onderdeel van responsive design.

Probeer je eigen website eens in verschillende vormen te bedienen op: http://www.jamus.co.uk/demos/rwd-demonstrations/

Let op: het is in een mobiele view niet de bedoeling dat onderaan het scherm een horizontale scrollbalk verschijnt (waarmee je moet “swipen”). Alles moet verticaal, in de diepte worden getoond, zodat alle content op een mobiel apparaat met een beweging van boven naar onder wordt getoond (we noemen dit “scrollen”). Ook in-en uit zoomen van schermen is ongewenst (we noemen dit “pinchen”).

Mobiel presenteren gebruikt dus wel scrollen en niet swipen en pinchen.

Verschillende schermen?

Mobiele websites moeten zich grofweg aanpassen aan 5 verschillende schermgroottes:

  • Desktop
  • Tablet in portrait (gewoon) en landscape (op z’n kant)
  • Telefoon in portrait (gewoon) en landscape (op z’n kant)

Verschillende soorten schermen

Verschillende soorten schermen.

Iedere pagina in een website heeft een opbouw van vlakken met daarin verschillende stukken content.

Content vlakken

Content vlakken.

De vlakken passen wel of niet in één keer op het scherm waarmee je naar de website kijkt. De vlakken die niet in de breedte passen, worden later door onze 5 commando’s naar de diepte gestuurd. Menu’s die niet in de breedte passen transformeren zich met de commando’s tot andere bedieningselementen.

Scherm simulatie

Als je een responsive website op een desktop computer bekijkt, dan kan het gedrag van bewegende delen worden gesimuleerd door met je muis rechts onderin de webbrowser groter of kleiner te maken. Het is alsof je live de gewenste 5 verschillende schermgroottes na-aapt, en dan de 5 commando’s voor responsive design hun werk ziet doen.

Probeer het eens op: http://getbootstrap.com/examples/grid/

Desktop screen

Desktop screen.

Bootstrap

De kunst van responsive design is te denken in de diepte en niet in de breedte. Hiervoor moeten delen van het scherm zichzelf aanpassen. Iedereen kijk ten slotte met verschillende apparaten naar dezelfde website. Als je ook nog eens met één en dezelfde opmaakcode alle verschillende schermgroottes wilt bedienen, dan moet er dus iets gebeuren met commando’s die weten “waarmee gekeken wordt” en daarna de presentatie van onderdelen “daaraan aanpassen“.

Als naar “mijn website” wordt gekeken met een telefoon, dan gedraagt hij zich “x“, maar als naar “mijn website” wordt gekeken met een tablet, dan gedraagt hij zich “y“.

De taal (gemaakt door Twitter) waarmee dit gebeurt heet: Bootstrap. Dit wordt in je HTML gemixt.

Bootstrap is niet het enige responsive design hulpmiddel, maar wel een belangrijke en duidelijk uit te leggen.

Bootstrap (en HTML) hebben een simpele basiseigenschap voor een blok content. Een <div> is een commando waarin tekst kan worden geplaatst dat zich over meerdere regels kan verspreiden, al naar gelang de beschikbare ruimte.

Ruimte voor 19 woorden op 2 regels (meer in de breedte)

Ruimte voor 19 woorden op 2 regels (meer in de breedte).

Ruimte voor dezelfde 19 woorden met minder breedte op 5 regels (meer in de diepte)

Ruimte voor dezelfde 19 woorden met minder breedte op 5 regels (meer in de diepte).

Daarna komt het gedrag van meerdere blokken content in de beschikbare ruimte aan de orde. Wat zie je in één klap op het scherm, en wat is er met zo min mogelijk menselijke handeling verder in beeld te krijgen?

De Bootstrap responsive design principes

Bootstrap voegt een aantal belangrijke onderdelen aan een schermcompositie toe.

De basis is een grid van 12 kolommen, dat bijvoorbeeld kan worden verdeeld in:

  • 3 kolommen van 4
  • of 4 kolommen van 3
  • of 2 van 6
  • of één van 4 en één van 8

Bootstrap grid

Bootstrap grid.

Bootstrap herkent daarna met welk apparaat en welke schermstand (portrait of landscape) een bezoeker naar de website kijkt. Dat kan extra small (xs) zijn voor telefoons, small (sm) voor tablets, medium (md) en large (lg) voor landscape tablets en desktops. Deze waardes zijn tot op pixel grootte in te stellen.

In de Bootstrap definitie van een viewport komen deze twee onderdelen (waarmee wordt gekeken en hoe moet de vormgeving zich dan aanpassen) bij elkaar. Bijvoorbeeld door de definitie van een div: col-xs-6

<div class=”row”>

   <div class=”col-md-6“>Tekstblok 1</div>

  <div class=”col-md-6“>Tekstblok 2</div>

</div>

Dit betekent: Als er met een medium size of groter apparaat wordt gekeken, dan tonen we 2 kolommen op het scherm.

Je kunt ook meerdere viewport definities aan dezelfde <div> geven: “col-xs-6 col-md-12

<div class=”row”>

  <div class=”col-xs-6 col-md-12″>Tekstblok 1</div>

  <div class=”col-xs-6 col-md-12″>Tekstblok 2</div>

</div>

Dit betekent: Als er met een extra small size of groter apparaat wordt gekeken, dan zijn er 2 kolommen, maar vanaf medium size worden het 2 regels in de volle breedte onder elkaar.

Kleinere schermen tonen 2 kolommen naast elkaar

Kleinere schermen tonen 2 kolommen naast elkaar.

Grotere schermen tonen 1 kolom breed en 2 onder elkaar

Grotere schermen tonen 1 kolom breed en 2 onder elkaar.

Met dit ene commando kunnen voor alle blokken op een scherm eindeloze variaties worden gemaakt. Door speciale commando’s toe te voegen, zoals sortering of het gebruik van offsets, kunnen de meest vreemde patronen worden gemaakt.

Dus met één commando (div class=”col-*-*”) kan de hele compositie van een scherm worden aangepast voor verschillende schermgroottes. Dit is de helft van het toverwoord: responsive design. Fijn dat je tot zover hebt gelezen, maar er komt nog een toevoeging. We hadden immers 5 commando’s.

Menu’s door adaptive design

Zoals we al zeiden, menu’s zijn in websites meestal horizontaal georiënteerd. Als dat niet past dan moeten de onderdelen niet alleen in de diepte worden gezet, maar (om te voorkomen dat voortdurend ruimte wordt verspild) klapt het menu alleen open als er met een expliciete handeling van een gebruiker op een knop wordt gedrukt.

Voor telefoons wordt de website dan adaptive: “het menu gaat zich anders gedragen”, namelijk: “toon jezelf op het kleinste scherm alleen wanneer de gebruiker dat expliciet kenbaar maakt door op een knop te drukken”.

Een horizontaal menu op desktop

Een horizontaal menu op desktop.

Hetzelfde menu verticaal op een telefoon (maar verspilt veel ruimte)

Hetzelfde menu verticaal op een telefoon (maar verspilt veel ruimte).

Adaptive design toont een aangepaste navigatie

Een menu is in HTML eigenlijk niet meer dan een lijst (ul) met een link (a href) in de lijstelementen (li).

<ul>

<li><a href=”#ga-ergens-heen”>Menu 1, een link<a></li>

<li><a href=”#ga-ergens-heen”>Menu 2, een link<a></li>

</ul>

Het begin van een menu in Bootstrap

Het begin van een menu in Bootstrap.

Door met responsive en adaptive design aan de lijst het commando <ul class=”nav navbar-nav“> toe te voegen, gedragen de links zich in Bootstrap volautomatisch als horizontaal menu. En ook volautomatisch als verticaal menu op kleine schermen.

Door in de navbar-header (de ruimte naast de menu-onderdelen) een button to te voegen voor het uitklappen van het menu, gaat de navbar zoals we dat noemen “toggelen”. Het magische woord: navbar-collapse zorgt dan automatisch dat het menu op een telefoon inklapt en klaar is om de gebruiker op de knop te laten klikken en daarmee het menu te tonen. We willen immers door het ruimtegebrek op kleine schermen niet de hele tijd een menu in beeld hebben. Het zou zonde van de ruimte zijn en de gebruiker moet veel eerder “scrollen” om de overige, relevante content te zien.

Het menu klapt in of uit als er op de knop geklikt wordt (data-toggle collapse) en wat in een uitgeklapte toestand wordt getoond is dan de data-target= “die eerder gemaakte verticale lijst van ul elementen”.

Dit is dus adaptive design met de laatste 4 commando’s van de 5 die we hebben genoemd.

Een opgemaakt menu in Bootstrap

Een opgemaakt menu in Bootstrap.

Een automatisch ingeklapt menu in Bootstrap met een “toggle” knop

Een automatisch ingeklapt menu in Bootstrap met een “toggle” knop.

Een uitgeklapt menu in Bootstrap met een “toggle” knop

Een uitgeklapt menu in Bootstrap met een “toggle” knop.

Meer adaptive design

Ik was laatst te gast bij een van de grootste Leasemaatschappijen van Nederland. Tijdens het wachten op mijn afspraak zat ik aan een tafel met 10 iPads en voorgeprogrammeerde links naar de responsive design sites van deze organisatie.

Je kan je voorstellen dat het kiezen van een auto met vele mogelijke opties grote eisen stelt aan het bedieningsgemak op een iPad. De sites waren inderdaad responsive, maar er is een verschil of je een checkbox met een muis aanvinkt of met je vinger bedient. Een muis klikt via het puntje van je cursor met 1 pixel in een checkbox, maar een gemiddelde vinger heeft er 45 tot 57 pixels voor nodig. Je ziet niet wat je doet, want je vinger bedekt een hele box, en het is al helemaal niet duidelijk of je het element goed raakt voor de “aan”- of “uit” stand.

Dit is het moment waarop het mobiele gebruik van formulieren vraagt om een aanpassing met touch designed interface elementen. Ik heb de bediening van tientallen knoppen en checkboxen geprobeerd, maar ik kreeg een heel andere auto dan ik wilde. Het werd meer een spel of ik in een keer iets “aan” of “uit” kreeg.

In het gesprek met mijn gastheer vertelde hij trots dat de websites designprijzen hadden gewonnen. Ik vertelde mijn avontuur en gaf hem de tip om op zijn iPad de formulieren van jQuery Mobile te proberen.

Als je deze interface elementen gebruikt in een responsive website dan wordt het ook hier, net als bij aangepaste menu’s, een adaptive website.

Nu begrijp je Bootestrap responsive en adaptive design

Met 5 simpele Bootstrap commando’s hebben we laten zien dat het aanpassen van een platte website naar een responsive- en adaptive design eenvoudig te doen is. De commando’s zijn: 

  1. col-md-4 en variaties
  2. navbar-nav
  3. navbar-header

navbar-header heeft een button voor:

  1. data-toggle
  2. navbar-collapse

Jij hoeft dit soort gekkigheid natuurlijk niet zelf te programmeren, maar als je dit artikel begrijpt, dan maakt niemand je bang dat het moeilijk is om je website op alle apparaten goed zichtbaar te maken. Dan zeg jij wijselijk: “Dude, gebruik de 5 Bootstrap commando’s, kee?”.

Mocht je meer voorbeelden willen zien, dan kan je kijken op: http://getbootstrap.com/components/

Wat heeft dit te maken met Inbound Marketing?

Het lijkt alsof dit artikel is bedoeld om een potje technische spierballen te tonen. Nee! Sorry … Nee!

Inbound Marketing gaat over een nieuwe techniek om de relatie met je publiek optimaal te benutten. Daarbij is van essentieel belang dat je onder alle omstandigheden content duidelijk presenteert. Hoe kan je verwachten dat artikelen worden gelezen als je niet eens garandeert dat het op alle moderne schermen met verschillende groottes het best wordt gepresenteerd?

Responsive design en Inbound Marketing: “just good friends”.

Wat als je dit gelezen hebt?

In onze communicatie gaat het om twee dingen:

  1. We hebben meer van dit soort artikelen en raden aan de volgende te lezen. We vertellen welke publicatie onderwerpen je kunt kiezen en hoe je de trefwoorden eenvoudig kan onderzoeken met Google Adwords.
  2. Daarnaast verschijnen er na het lezen van artikelen zogenaamde “call to action” formulieren. Als je inschrijft in het formulier “Wil je meer weten over Inbound Marketing?” dan houden we je met emails op de hoogte  over nieuwe publicaties.




Leave a Comment