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.

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…

Mobile percentage of website traffic 2020 | Statista

Mobile accounts for approximately half of web traffic worldwide.

https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/

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.

Using media queries – CSS: Cascading Style Sheets | MDN

Media queries are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#width

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.

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 🙂

Tailwind CSS

https://tailwindcss.com/

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

Bootstrap 4.5

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

https://getbootstrap.com/docs/4.5/getting-started/introduction/

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 🙂

Bootstrap 5 Beta 1

With our first beta release of Bootstrap 5, we’re calling it on new features and breaking changes. From here on out, we’re only fine-tuning features, bugs, and documentation on our way to a stable v5 release. Woohoo!

https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/

Met welke browsers werkt Bootstrap samen?

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

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

2. 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' );

3. 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.

Sass: Syntactically Awesome Style Sheets

https://sass-lang.com/

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?

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.

Colormind – Bootstrap UI colors

Generate color palettes with deep learning – intelligent color scheme suggestions from your selected colors

http://colormind.io/bootstrap/

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.

Onze services: website maken, webapplicaties, engineering & bijles

Onze services: we maken websites en webapplicaties. We geven advies rond IT en engineering. En we geven bijles wiskunde en fysica!

https://www.assistancy.be/wat-we-doen