Verslag bijeenkomst 12 mei 2014: Responsive templates bij JUG Utrecht

Dit was met meer dan twintig deelnemers een van de drukste avonden van het jaar voor JUG Utrecht.

Laatste Joomla! versies

• Joomla! 1.5.26 (niet meer gebruiken voor nieuwe websites)
• Joomla! 2.5.20
• Joomla! 3.3.0 (er is ook een 3.2.4 voor PHP-versies ouder dan 5.3.10; als jouw site op zo’n oude PHP draait, check dan bij je hoster of dat ook anders kan)

Extensies

• Akeeba Backup 3.11.0; daarvoor heb je wel PHP 5.3.4 of nieuwer nodig
• Admin Tools 3.0.0 daarvoor heb je wel PHP 5.3.4 of nieuwer nodig
• JCE 2.3.4.4

Ontwikkelingen Joomla!

Short Term Support en Long Term Support. Dat waren de uitgangspunten bij het ontwikkelen van nieuwe Joomla!-versies, waarbij de .5 altijd de LTS-versie was. Inmiddels heeft het Joomla-team de begrippen STS en LTS losgelaten. Dat geeft meer flexibiliteit en de mogelijkheid om aanvullende releases op een grote release uit te geven.

Nieuwe versies beschikbaar:

• 22 april 2014: Joomla! 3.3
• 15 juli 2014: Joomla! 3.4
• oktober 2014: Joomla! 3.5
• januari 2015: Joomla! 3.6

Meer info op www.joomlacommunity.nl

Responsive templates inleiding

25% van het totale internetverkeer komt nu al van een mobiel apparaat, en die groei gaat nog steeds door. Je moet dus bij het bouwen van je site rekening houden met andere apparaten, van klein (smartphone) tot groot (smart TV). Responsive templates passen de weergave automatisch aan aan de schermgrootte, waardoor je website op alle formaten goed te zien is.

Voordelen:

• minder zoomen / scrollen van links naar rechts
• snellere laadtijd afhankelijk van inrichting
• eenvoudige navigatie
• optimale gebruikservaring, boodschap komt beter over bij bezoeker
• je gaat met je tijd mee – en met je potentiële klant

Maar moet elke website nou meteen responsive worden? Er zijn namelijk ook nadelen

• beperkingen in de layout
• geen controle op de weergave op alle devices
• extensies zijn vaak nog niet responsive

Je hebt verschillende keuzes:

• één website maken voor alle devices
• een aparte mobiele site maken
• en/of een app erbij

En maak je je site (alleen) responsive of (ook) adaptive? De informatiebehoefte en het informatiegedrag verschillen nogal als je thuis op desktop/smart TV zit te kijken, of onderweg op iPad of smartphone. Bij een adaptive site hou je rekening met waar, wanneer en de manier waarop een apparaat wordt gebruikt.

Presentatie responsive templates door Frits Jongbloets

In het pre-responsive tijdperk hadden we sites met vaste layouts. Ontwerpers bepaalden dat het pixel-perfect getoond moest worden op elke computer.

Jarenlang werden de schermen alleen maar groter, nu worden ze groter én kleiner. En op een klein scherm wordt informatie al snel onleesbaar.

Definitie van responsive webdesign volgens Wikipedia: “een benadering van webdesign waarbij de web developer streeft naar een optimale webervaring voor een breed scala aan apparaten (van desktop computerschermen tot mobiele telefoons). Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface” (meer hier: //nl.wikipedia.org/wiki/Responsive_webdesign)

Afmetingen van elementen worden niet meer ingesteld in absolute pixels, maar in relatieve eenheden: een percentage van de afmetingen van het element of van het zichtbare deel van de browser. Met breakpoints, een soort grenspalen, baken je het af. Als het zichtbare deel groter is dan … pixels, moet je dit doen; is het kleiner, dan doe je iets anders. Een voorbeeld:

Voorbeeld: > 992 menu volledig horizontaal getoond

< 992 horizontale menu opgeklapt (hamburgermenu)

Bootstrap neemt ongeveer de afmetingen van de verschillende apparaten als uitgangspunt. Hier vind je meer informatie over hoe het bootstrap grid werkt: //getbootstrap.com/css/#grid

Van	Tot	Apparaat
1	768	XS devices, mobieltjes
768	992	Kleine devices, tablets (staand)
992	1200	Medium devices, desktops, laptops, tablets (liggend)
1200	…	Grote devices, desktops

In de css zie je die breakpoints terug in de mediaqueries (die beginnen met @media). Je kunt zelf ook mediaqueries gebruiken om css-regels op te stellen die aansluiten bij de breakpoints.

Wat is Bootstrap

• framework is een stelsel van definities
• gaan over van alles, zoals:
• grid met 12 kolommen voor pagina-indeling
• classes voor buttons
• pakket van html, css, javascript
• ontwikkeld door twitter
• open source
• onafhankelijk van type website of cms
• door joomla ondersteund in backend en frontend

Er zijn ook andere frameworks. Joomla-project heeft Bootstrap stevig omarmd dus kiezen voor een Bootstrap-gebaseerde template is wel slim. Commerciële template-ontwikkelaars integreren bootstrap in hun eigen framework.

Bootstrap 3 heeft maar heel beperkte browsersupport, daarom wordt 2 wat langer gebruikt.

Wat betekent dat voor het creatieve design? De lijn dat het speels en beeldend moet is niet handig in een responsive template. Alles moet kunnen schalen, verschuiven of uitgezet worden. Dus de opzet wordt strakker (en gelijkvormiger).

De extensies moeten ook geschikt zijn voor responsive weergave; over het algemeen zijn die voor 3.x het wel. Voor 2.5 is dat minder zeker. En soms is het niet erg als een extensie niet responsive is.

Responsive data

Je kunt via mediaqueries zeggen dat een module niet getoond moet worden, maar dan wordt hij nog steeds wel geladen. Je kunt er ook voor kiezen om de module helemaal niet aan te roepen, met behulp van NoNumber Advanced Module Manager of de User Agent Detector plugin.

Deel 2: Frits' ervaringen

In het non-responsive tijdperk maakt Frits zelf templates met wat kennis met html, css, en een paar brokjes (Joomla-specifieke) php. Voor responsive templates wilde hij niet alles helemaal zelf uitzoeken, dus ging hij op zoek naar een bootstrap template die hij zou kunnen aanpassen. Hij kwam uit op de Joostrap Base Template. Die had goede ondersteuning, je kon makkelijk overriden (via custom.css), hij heeft er een aantal sites mee opgeleverd en trucs bedacht voor het aanpassen van index.php.

Maar die template begon gebreken te vertonen. Er schijnt binnenkort een update te komen die alles zou moeten oplossen.

Wat Frits zelf heeft aangepast:

Deze template gooit bij een kleiner scherm alles onder elkaar, en zet dan de linker kolom boven de content. Dat is niet de bedoeling.

Frits heeft de User Agent Detector plugin gebruikt om het apparaat te herkennen. In de index.php heeft hij een scriptje bovenin gezet dat de output van de plugin inleest. Daarna heeft hij de modulepositie van aangepaste code voorzien: laat deze module niet zien op een mobieltje. En stond er links iets dat we wel willen zien, zet dat dan ergens anders neer.

Voor de tablet (omslagpunt 992 pixels) heeft hij aangepaste mediaqueries gemaakt om de modules al dan niet te tonen:

@media(max-width:992px) {
.module.left {
display:none;
}
}

Hetzelfde doe je dan met min-width voor de andere module

In dit geval wordt de module dus wel geladen, maar niet getoond.

Met zo'n trucje kun je dus dingen aanpassen en onderdrukken.

Frits gebruikt dus de User Agent Detector om hele modules te laten verdwijnen. Je kunt dat ook met Advanced Module Manager doen, de naam zegt het al, dat is een extensie waarmee je veel meer kunt met je modules. Daarmee kun je onder ‘toewijzingen’ van alles kiezen: browsers, maar ook tijdstippen waarop een module getoond moet worden.

Menu

Essentieel bij het werken met responsive: hoe klapt het menu op en hoe verplaatsen de kolommen zich van naast naar onder elkaar?

Frits was niet tevreden over de menumodule van Joostrap-zelf. Hij werd getipt op de DJ-Menumodule. Die roept het selectiemechanisme van het apparaat aan. Minder mooi, maar het werkt wel. Er is ook een template van Joostrap, Cleanliness, die een voorschuifmenu maakt van de gewone Joomla core menumodule. Het kan dus op allerlei mogelijke manieren.

Tip voor het menu: ingeklapt zie je alleen nog drie streepjes. Nog niet iedereen is daaraan gewend. Je kunt er voor de volledigheid nog “menu” naast zetten.

Andere opties

Je kunt ook een andere template kiezen. Jasper Dik (die ooit bij ons een presentatie gaf), is bezig met het ontwikkelen van een template. Er is ook een blank bootstrap template van Alexander Schmidt die je zelf moet vullen. Het basiswerk wordt op een prachtige manier ingeladen en gooit alle overbodigheid eruit. Het is een mooie basis maar je moet hem wel helemaal zelf bouwen. Joris is nu aan het proberen de goede code van Joostrap in deze blank template te verwerken. Is nog niet af maar hij is met de dag hoopvoller. Het grootste probleem waar hij telkens tegenaan loopt: de menu’s.

Hoe ziet mijn site eruit?

Checken of een website responsive is kan heel simpel met www.responsinator.com. Maar… dat is een simulator die alleen uitgaat van afmetingen, niet van de verschillende devices. Als je je site op verschillende apparaten wilt zien, zul je ’m op al die apparaten moeten checken.

Download hier de presentatie van Frits Jongbloed.

Dr Joomla! responsive

Vraag: Heeft het zoomniveau ook nog invloed op de schaalbaarheid? Bij zoomen gaat de template mee.

Vraag: is er een agenda-extensie die geschikt is voor responsive, waar je plaatjes kunt gebruiken, die er ook nog eens mooi uitziet? Ja: RSEvents Pro.

Dr Joomla! algemeen

Vraag: ik was met een beetje Javascript en bootstrap aan het klussen. Ik heb JCE editor maar in de code maakt die er een zooitje van, plakt alles achter elkaar. Is er een betere editor?

Antwoord: er is echt geen betere dan JCE. Je kunt het helemaal naar jouw wensen configureren en je kunt profielen aanmaken voor gebruikersgroepen. Die profielen kun je ook nog eens exporteren en in andere sites weer importeren, zodat je voor al je sites dezelfde groepen kunt definiëren. Dus blijf bij JCE J.

Vraag: ik heb JDB export aangeschaft. Volgende keer gaat het over importeren en exporteren van je database. Is dit toevallig de extensie waar het over gaat?

Antwoord: Het gaat wel over importeren en exporteren maar waarmee, dat weten we nog niet.

Vraag: als ik in de backend wil inloggen vraagt hij eerst om een ftp inlogcode. Waarom is dat?

Antwoord (na enig googlen): Dat heeft je hoster gedaan om de boeven buiten te houden.

Tip: XAMPP heeft tegenwoordig Bitnami waarmee Joomla! 3.3 meteen geïnstalleerd wordt, zonder problemen. Heel handig.