Hoe werkt een WordPress responsive website met Bootstrap 4.5?

Steven     27.12.2020

Wat is een responsive website?

Een responsive website is een website die zich aanpast aan het apparaat waarmee de gebruiker jouw website bezoekt. Met andere woorden, de layout van de website past zich aan aan de afmetingen van het scherm van de bezoeker.

Deze website is een voorbeeld van een responsive website. Hieronder twee screenshots om aan te geven hoe de voorpagina eruit ziet op een mobiel toestel en op een laptop.

assistancy responsive website front phone
de voorpagina van assistancy.be getoond op een mobiel apparaat
assistancy responsive website front laptop
diezelfde voorpagina bekeken vanop een laptop

De inhoud van de website is (over het algemeen) identiek in beide versies. Het is de layout die verschilt. Het brede scherm (desktop) toont meerdere ‘blokken’ inhoud naast mekaar. Het smalle scherm (mobiel) toont diezelfde blokken onder mekaar.

Waarom een responsive website?

Meer dan 30% van alle online verkoop gebeurt op mobiele toestellen. Vroeger werden websites in de eerste plaats ontwikkeld voor computer-schermen. Vandaag de dag is het mobiel gebruik dominant! Met een responsive website toon je automatisch de juiste layout aan al je bezoekers: mobiel, tablet én desktop. Dit verhoogt drastisch de gebruikerservaring!

Mogelijks stoot je soms nog, via je telefoon of tablet, op een website waarbij je moet in- en uitzoomen om de tekst te kunnen lezen, of te navigeren via het menu. Niet zo handig dus…

Met welke techniek maak je een responsive website?

Sinds de komst van CSS3 is het mogelijk om de layout van de website te programmeren in functie van o.a. de breedte van het apparaat van de bezoeker. De responsive website is geboren.

De meest gebruikte manier van programmeren bestaat erin de scherm-breedte op te delen in kolommen. Op brede schermen worden de kolommen naast mekaar getoond, op smalle schermen komen ze onder mekaar te staan.

De breedte van de kolommen varieert bovendien in functie van het apparaat van de bezoeker. Vaak bestaat de basis uit een grid met 12 kolommen.

image
Bootstrap 4.5 standaard grid layout. De breedte van de responsive website varieert in functie van de breedte van het gebruikte apparaat.

Als voorbeeld nemen we de breedte van dit artikel. Op brede schermen (>960px) heeft de tekst een breedte van 8 kolommen (8/12de dus). Op kleinere schermen vult de tekst de ganse breedte van het scherm (12/12de). Dat gedrag bekomen we door de CSS klasse .col-lg-8 mee te geven.

Responsive website frameworks

Om het maken van responsive websites te vereenvoudigen, zijn er frameworks beschikbaar. Enkele populaire CSS-frameworks zijn (in volgorde):

  1. Tailwind
  2. Bootstrap
  3. Materialize
  4. Material Design Lite
  5. Bulma

Tailwind is een opkomend framework dat snel aan populariteit wint. In’t oog te houden dus 🙂

Dit artikel bespreekt responsive websites verder op basis van Bootstrap 4.5.

Een eigen thema of (gratis) WordPress Bootstrap thema?

Via WordPress.org zijn er thema’s beschikbaar die gebaseerd zijn op Bootstrap. Een voorbeeld is het WP Bootstrap Starter thema. Deze thema’s hebben niet de uitgebreide mogelijkheden die we hieronder bespreken.

Het gebruik van Sass om de Bootstrap variabelen te overschrijven biedt de grootste modulariteit om een responsive website op maat te maken. Dit is niet mogelijk met standaard thema’s.

Steven

Bovendien gebruiken sommige thema’s niet de laatste versie van Bootstrap, waardoor je nieuwe features mist (of erger, bugs download!).

Voor een update van de Bootstrap versie ben je dan weer afhankelijk van de thema ontwikkelaar.

Bootstrap 4.5

Bootstrap 4 is een toolkit van componenten, oorspronkelijk ontwikkeld door de ontwikkelaars van Twitter. De toolkit laat toe om op een gestandaardiseerde manier inhoud toe te voegen op je website, en die vervolgens responsive te presenteren aan je bezoekers.

Naast het responsive framework biedt de toolkit ook een heel scala aan standaard componenten aan: knoppen, dropdowns, alerts, formulieren, navigatie-elementen, …

Op het moment van schrijven is de beta versie van Bootstrap 5 beschikbaar. Wij wachten op de officiële release alvorens daarmee aan de slag te gaan 🙂

Met welke browsers werkt Bootstrap samen?

Wel, kort gezegd: met alle moderne browsers, zowel mobiel als op desktop:

Mobile OSChromeFirefoxSafariAndroid Browser & WebViewMicrosoft Edge
AndroidSupportedSupportedN/AAndroid v5.0+ supportedSupported
iOSSupportedSupportedSupportedN/ASupported
Windows 10 MobileN/AN/AN/AN/ASupported
Alle recente mobiele browsers zijn ondersteund
DesktopChromeFirefoxInternet ExplorerMicrosoft EdgeOperaSafari
MacSupportedSupportedN/AN/ASupportedSupported
WindowsSupportedSupportedSupported, IE10+SupportedSupportedNot supported
Alle moderne browsers zijn ondersteund. Internet Explorer 9 is dat niet, net zoals Safari op Windows.

Veruit de meest gebruikte browser is Chrome, met een marktaandeel van > 68%. De tijd van Internet Explorer is definitief voorbij. En ken jij iemand die de Safari browser gebruikt op Windows?

De toolkit biedt hiermee ook zekerheid aan de maker van de responsive website: bij ontwikkeling van de responsive website in één browser, weet je dat die automatisch ook in de andere browsers er identiek uitziet.

Hoe kan je Bootstrap gebruiken in een eigen WordPress thema

Een beknopt stappenplan om Bootstrap te gebruiken in een WordPress responsive website:

  1. Installeer bootstrap (wij gebruiken de Node package manager)
npm install bootstrap
  1. Laad de Bootstrap bestanden (css + js) in je WordPress functions.php bestand:
/**
 * Enqueue scripts and styles.
 */
function assistancy_starter_scripts() {
  // load css
  wp_enqueue_style('assistancy-style', get_stylesheet_directory_uri().'/css/style.min.css');
    
  // load bootstrap js
  wp_deregister_script('jquery');
  
  wp_register_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', array(), '', true  );
  wp_enqueue_script('jquery');
  wp_enqueue_script('assistancy-starter-popper', get_template_directory_uri() . '/js/popper.min.js', array(), '', true );
  wp_enqueue_script('assistancy-starter-bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'assistancy_starter_scripts' );
  1. Laad in de stylesheet de eigen $variables en vervolgens de toolkit bestanden:
// variables
@import "variables";
// typography
@import "typography";
//bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
// mixins
@import "mixins";

We maken gebruik van Sass (Syntactically Awesome Style Sheets) om de toolkit volledig aan te passsen aan jouw wensen.

Bemerk dat de volgorde van de import statements belangrijk is. Eerst laden we aangepaste $variables, waarna Bootstrap deze overal gebruikt.

Een responsive website op maat

Bootstrap komt met standaard instellingen, die je allemaal kan overschrijven. Dit maakt een snelle implementatie mogelijk, en laat toe om te werken met standaard componenten, geheel aangepast volgens jouw wensen.

Alle instellingen zijn overschrijfbaar via variabelen (zie https://github.com)

Kleuren aanpassen?

Overschrijf de $primary variable met de nieuwe kleur. Bootstrap past automatisch overal de hoofdkleur aan: achtergronden, tekstkleuren, kaders, etc… Bootstrap selecteert daarnaast, in functie van de contrast ratio, de beste tekstkleur voor elke achtergrond.

Maak je een knop met donkere achtergrond, dan zal de tekst automatisch in een lichte kleur komen. En vice versa… handig, toch?

image 1
Contrast ratio: de tekstkleur afstemmen op de achtergrondkleur verbetert de leesbaarheid.

De bibliotheek biedt standaard componenten om de inhoud visueel heel aantrekkelijk te presenteren. Dit gaat over visuele ruimtes tussen componenten, kleurschema’s, manieren om inhoud te accentueren, en nog veel meer!

Je kan zelfs extra kleuren toevoegen in de ‘kleuren-map’:

/* VARIABLES */
$theme-colors: ( 
  primary: #25408f, 
  secondary: #8f5325,
  success: #3e8d63, 
  info: #13101c, 
  warning: #bc7d2b, 
  danger: #d62518,
  light: #f8f9fa,
  dark: #343a40,
  facebook: #3b5998,
  twitter: #55acee,
  linkedin: #007bb5,
  gmail: #dd5347,
  whatsapp: #12af0a
);

Ben je nog op zoek naar kleur-inspiratie? Colormind biedt een handige tool om sets van kleuren te genereren. Je kan één of meerdere kleuren ‘vastzetten’ en vervolgens kleurpallets genereren naar jouw smaak.

Responsive grid aanpassen

Een grid van 12 kolommen biedt heel wat voordelen, maar ook enkele beperkingen. Stel dat jouw zaak 5 peilers heeft, en die elk naast mekaar wil voorstellen. 12 is niet deelbaar door 5, een kolom met breedte 1/5 maken, dat lukt dus niet. Tja… dan zitten we vast?

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:                12 !default;
$grid-gutter-width:           30px !default;
$grid-row-columns:            6 !default;

Via de $grid variabelen kunnen we het totaal aantal kolommen aanpassen. Je kan bv naar een systeem van 15 kolommen gaan, en vervolgens elk van jouw 5 peilers voorstellen met een kolom-breedte van 3.

Wanneer je er verder over nadenkt zal je altijd wel één of meerdere beperkingen vinden van zo’n kolom systeem. De ideale wereld bestaat nu éénmaal niet.

Defaults voor standaard elementen aanpassen

Hoofdingen en paragrafen zijn standaard voorzien van ruimte onderaan, waardoor de layout natuurlijk oogt en de tekst aangenaam leest. Eenzelfde standaard layout is voorzien voor tabellen, formulieren, lijsten en afbeeldingen.

Heb ik al gezegd dat je ook al deze instellingen kan wijzigen volgens jouw smaak en voorkeur? Bovendien wijzig je die op één centrale plaats, wat zorgt voor een consistente layout doorheen de hele responsive website.

Bootstrap biedt ook ondersteuning aan responsive font sizes: de grootte van de letters schaalt mee met de breedte van het scherm!

Een responsive navigatiebalk

Je bent er ondertussen al aan gewoon waarschijnlijk: op mobiele toestellen zit de navigatie-balk verborgen onder een knop. Op schermen met kleiner formaat is de beschikbare ruimte immers extra kostbaar.

image 2

Trefwoorden klik voor meer info

bootstrap responsive website wordpress

Laat een reactie achter

Lees ook

Pals dakwerken en sanitair

Pals dakwerken en sanitair

Pals is een familiebedrijf gespecialiseerd in dakwerken en sanitair. Hun specialiteit zijn zinken daken en leien.

Lees meer

De Appelboom - logopedie, orthopedagogie en ergotherapie in Berlaar

De Appelboom – logopedie, ergotherapie en orthopedagogie

De Appelboom is een praktijk voor logopedie, ergotherapie en orthopedagogie in Berlaar. Gespecialiseerd in therapie, coaching en vorming.

Lees meer

Widopedia - Wido Bourel

Widopedia – Frans-Vlaanderen, de Nederlanden en Europa

Een webstek over de geschiedenis van Frans-Vlaanderen, de Nederlanden en Europa. Wido gebruikt de website ook om zijn boeken aan te kondigen.

Lees meer