Aanwezigen: Caroline B., Alex DW., Manu A., Ronny W., Koen R., Ludo, Herman, Luc DM, Luc O., Amelia H., Peter H., Maya D., G.v.KEssel, Marie-Thérèse W., Rob

Op aanvraag van bezoekers hadden we CSS als onderwerp voor deze bijeenkomst gepland.
We konden hier een bekend Joomla!-kenner voor strikken: Mindert Aardema, bij velen geliefd voor zijn instructievideo's en zijn vele tips & tricks voor Joomla.

CSS-Grid

Omdat Joomla 4 CSS-grids gaat ondersteunen, hebben we ons hierop gefocust. Het is een redelijk jonge methode die toelaat om je webpagina in te delen in blokken, om de pagina-layout te beheren, uiteraard op een responsieve manier.
In tegenstelling met Bootstrap kan je met het Grid-systeem wel je eigen klasses in de HTML-code gebruiken. Aan jou klasses wijs je dan in je CSS-bestand de eigenschappen toe die typisch zijn aan Grid. Dus veel duidelijker en beheersbaarder dan met Bootstrap waarbij je ook nog eens het Bootstrap-framework moet inladen (wat het opladen van je webpagina vertraagt).
Geen paniek voor je huidige site: Joomla 4 zal Bootstrap blijven ondersteunen. Dus je template mag verder met bootstrap werken.

Met het Grid-systeem bepaal je in feite een rooster = een tabel van rijen en kolommen.. Maar bij de eerste kennismaking is het toch even wennen omdat de nummers niet verwijzen naar de kolommen maar naar de kolomlijnen zoals je in bijgevoegde PowerPoint kunt zien a.h.v. de "grid-start". In het voorbeeld van de header zie je 3 kolommen gedefinieerd maar als grid-column-end = 4 (voor 3 kolommen zijn er inderdaad 4 kolomlijnen).

Geneste grids zijn zeer goed mogelijk.

En wat met Flexbox? Dit is eerder van toepassing op een kleiner niveau, bijvoorbeeld het positioneren van een element (section, tabel, … ) in een artikel.

Bekijk de volledige inhoud van zijn presentatie.

Andere lectuur over Grids:

Mindert Aardema & Joomla: https://netspecialist.nl/joomla

Groepsgesprek

In de overgebleven tijd stelde Mindert meerdere algemene vragen aan het publiek. welke tot enige discussie en uitwisseling van ideeën en visies leidden.

Zo vroeg Mindert aan het publiek "Wat is het belangrijkste van je site?". Veel antwoorden waren gericht op user-satisfaction (de surfer moet vinden op de site wat hij zocht), de site moet te vinden zijn door een Googelende surfer (SEO), maar niemand was zo zakelijk als Mindert om aan "conversie" te denken.

Mindert wijst ons er op dat meerdere apps en sites meer en meer op elkaar beginnen te gelijken. Daar is een groot voordeel bij: de gebruikers vinden er sneller hun weg in. De goed doordachte design- en ontwerp-richtlijnen van Google Material Design hebben hiertoe sterk bijgedragen.  

Verwaarloos niet hoe het slim toepassen van (kleine) psychologische kennis de conversie en/of de gebruikerservaring van je site-bezoekers kan verhogen. Enkele voorbeelden.
De sterkste emoties zijn plezier en pijn waarbij deze laatste de sterkste prikkel is. Maak daarvan gebruik in je boodschap.
Mensen kunnen iets dat in hun ooghoek opduikt moeilijk negeren. Zo ondervond Mindert dat inschrijvingen op zijn nieuwsbrief verdubbelden door een inschrijvingsmodule na x seconden (rechtsonder de pagina) te voorschijn laten komen. Een inschuivende module werkt beter dan een pop-up.
Een foto van een persoon die kijkt naar de knop of link waarop je hoopt dat de surfer klikt, is veel efficiënter dan wanneer de persoon op de foto rechtuit naar de surfer kijkt.
Beweging trekt onze aandacht. Maar door de vele slechte toepassingen zijn de sucring winnen.
(n.v.d.r. FrankWatching organiseert zelfs een cursus over "neuromarketing").

Een goed idee is om ideeën uit te proberen via A/B-testen. Wat zijn A/B-testen? Een voorbeeld: je twijfelt of je voor een link naar een belangrijk document het best een link-met-tekst zou gebruiken (optie "A") of het beter werkt via een knop (optie "B"). In A/B tests zal je de 2 mogelijkheden op je site toepassen zodanig dat N surfers de link zien en dat een ander publiek (liefst een gelijkaardig aantal) de andere knop zien (A/B wisseling bij voorkeur afwisselend zodat tijdstip geen rol speelt). Als blijkt dat de knop het best werkt, dan kan een volgende A/B test uitvoeren waarbij je een variatie in grootte en/of kleur van de knop uitprobeert. Alzo kan je gradueel werken naar de meest efficiënte site.

Dr. Joomla

Luc wil data van het weer in een site weergeven. Het ophalen van de data lukt best, maar hoe moet hij die dan oppakken om in de site weer te geven? Er zullen allicht meerdere extensies zijn die tabel-gegevens kunnen weergeven ( https://extensions.joomla.org/category/news-display/tables-a-lists/ ). Misschien moeten voor sommige extensies de gegevens in de dtabase zittne maar met een cron-job kan je de gegevens ophalen om ze daarna in je database te importeren.

Alex gebruikt een template waar de injectie van Google Analytics per template-stijl zou moeten gebeuren. Dit lijkt voor de meesten van het publiek ongebruikelijk omdat ongeacht de stijl van eht templaat het Google Analytics steeds hetzelfde is (dus op template-niveuar gedefinieerd zou moeten zijn. Maar soit. Hoe weet je dat je G.A. goed geïmplementeerd is? Definieer je G.A. in je templaat(stijlen) en surf dan naar een pagina die die templaat(stijl) gebruikt en kijk dan in de bron-code of G.A. éénmaal aangeroepen wordt.

Alex heeft meerdere sites met domeinen-namen als dev01.be, dev02,be dev03.be etc. Kan hij daarvoor één Wildcard SSL Certificaat gebruiken?
Neen, de wildcard is enkel van toepassing op subdomeinen, dus zou deze wel toepasbaar op sites 1.dev.be, 2.dev.be, 3.dev.be of xyz.dev.be dus steeds hetzelfde domein dev.be terwijl de wildcard enkel op de onderliggende map van toepassing is.