Responsive)templatesvoor) Joomla) · 2016. 12. 8. · Responsive)templatesvoor) Joomla)...

Responsive templates voor Joomla

Een ervaringsverhaal

Presenta4e Responsive templates, Frits Jongbloets, Studio De Oorzaak, JUG030, 12 mei 2014, [email protected]

Even voorstellen 0. Inleiding


§ Frits Jongbloets § Maak websites met Joomla sinds 2008

§ Bedrijf: Studio De Oorzaak § Website: www.oorzaak.nl

Deze presenta4e 0. Inleiding


§ Ik zou mijn goede ervaringen een commercieel verkrijgbare responsive basis-‐template voor Joomla delen met de JUG030 groep. § Nadat ik dit had afgesproken, kwamen daar wat minder goede ervaringen bij… § Het wordt nu meer het “delen van ervaringen”. § Hopelijk toch nuXg en aanknopingspunt voor discussie. § Het tonen van smartphone en tablet simula4es is niet al4jd betrouwbaar en wordt aangevuld met schermaYeeldingen.

Opbouw 0. Inleiding


0. Inleiding 1. Responsive templates, algemeen 2. Eigen ervaringen met responsive templates 3. Hoe verder na deze ervaringen

Deel 1. Responsive templates,

algemeen


Het pre-‐responsive 4jdperk 1. Responsive templates, algemeen


§ Vaste layout van de site; § Ontwerpers streefden naar pixel-‐perfec4e; § Ontwerp werd op elke computer hetzelfde getoond (hopelijk) Zelf Joomla templates maken met wat kennis van: § html, § css § en een paar brokjes php / Joomla specifieke php Lange 4jd was de trend: steeds grotere beeldschermen

Apparaten met kleine schermen 1. Responsive templates, algemeen


Een niet-‐responsive layout wordt propor4oneel verkleind om in het scherm te passen: § De meeste sites zijn dan niet meer leesbaar; § Inzoomen is mogelijk maar daardoor raak je het overzicht over de pagina kwijt.

Oplossing: responsive design 1. Responsive templates, algemeen


Wat is responsive design 1. Responsive templates, algemeen


Responsive webdesign is een benadering van webdesign waarbij de web developer streee naar een op4male webervaring voor een breed scala aan apparaten (van desktop computerschermen tot mobiele telefoons). Het ontwerp van een responsive website schaalt mee met de afme4ngen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface. Pionier en bedenker van de term: Ethan Marcofe (rond 2010). Bron: hfp://nl.wikipedia.org/wiki/Responsive_webdesign

Flexibele grids en aYeeldingen 1. Responsive templates, algemeen


Afme4ngen van elementen in rela4eve eenheden instellen: § percentages § em's (= current font size) § Dus NIET in pixels Elementen schalen naar een percentage van: § de afme4ngen het element waarin ze zich bevinden, of § het zichtbare gedeelte van de browser (de viewport). AYeeldingen worden rela4ef geschaald, zodat ze hun breedte / hoogte verhouding gehouden.

Breakpoints 1. Responsive templates, algemeen


Grenspalen binnen de systema4ek van een responsive template. Als de breedte van de viewport groter is dan een bepaald breakpoint, dan wordt de template anders getoond dan als de breedte kleiner is.

Breakpoints, voorbeeld 1. Responsive templates, algemeen


Een breakpoint in het Bootstrap framework voor responsive templates: > 992 pixels: het horizontale menu wordt volledig getoond. < 992 pixels: het horizontale menu wordt opgeklapt.

Breakpoints, voorbeeld 1. Responsive templates, algemeen


Voorbeeld van complete set breakpoints: Bootstrap V3 Bootstrap neemt dus (ongeveer) de afme4ngen van de verschillende apparaten als uitgangspunt voor de breakpoints. Bron: hfp://getbootstrap.com/css/#grid Maar: het breakpoint van 992 pixels ligt op veel tablets tussen de portrait en de landscape rich4ng. Binnen één apparaat kun je dus net aan de ene kant of net aan de andere kant van dit belangrijke breakpoint zifen.

Media Queries 1. Responsive templates, algemeen


De breakpoints zie je o.a. terug in de css. Door middel van media queries in de css kun je zelf ook css regels opstellen die aansluiten bij de breakpoints. Voorbeeld: @media(max-width:992px){!!.module.twitter{!! !/* hide this module on smaller viewports */!! !display:none; ! !!! !}!!}!

Bootstrap 1. Responsive templates, algemeen


§ Framework = een stelsel van defini4es § Deze defini4es gaan over van alles, bijv.: § een grid met 12 kolommen voor de pagina-‐indeling; § classes voor bufons in bepaalde s4jlen; § Een pakket van html, css, Javascript (en nog wat) § Ontwikkeld door Twifer. § Open source; § Onarankelijk van het type website of cms; § Door Joomla ondersteund in back end en front end. Bron: hfp://getbootstrap.com

Bootstrap css voorbeeld 1. Responsive templates, algemeen


Bron: hfp://getbootstrap.com/css/#bufons

Andere frameworks 1. Responsive templates, algemeen


Enkele andere frameworks voor responsive design zijn: § Founda4on § Skeleton § HTML5 Boilerplate Echter het Joomla project heee Bootstrap stevig omarmd, dus is het voor ons het meest zinvol om te kiezen voor Bootstrap. Ook commerciële Joomla template-‐ontwikkelaars integreren Bootstrap in hun eigen (oorspronkelijk pre-‐responsive) frameworks, bijv. het T3 framework van JoomlArt.

Impact voor het (crea4eve) design

Impact voor het (crea4eve) design 1. Responsive templates, algemeen


Pre-‐responsive designs waren soms erg speels en beeldend. Realisa4e vereiste moduleposi4es overal in de template. Mijn ervaring: niet handig in een responsive template. Alles moet kunnen schalen, verschuiven of uitgezet kunnen worden. Ik zie hierdoor een trend naar een strakkere opzet en daardoor misschien ook meer gelijkvormigheid. Design uitdagingen zifen meer in elementen als kleurgebruik of keuze van aYeeldingen.

Joomla extensies 1. Responsive templates, algemeen


§ Extensies moeten ook geschikt zijn voor responsive weergave. § En dus bijv. rela4eve (procentuele) afme4ngen hanteren in plaats van vaste afme4ngen in pixels. § Extensies voor Joomla 3 zullen hier vrijwel al4jd aan voldoen. § Voor Joomla 2.5 is dat minder zeker. Voor sommige types extensies is het wellicht kri4scher dan voor andere (bijv. een image slide show versus een Twifer feed).

Responsive data 1. Responsive templates, algemeen


§ Responsive design: vaak minder modules op kleine schermen. § Info is vaak aanvullend, bijv. Twifer feed. § Dus worden module dan vaak verborgen (zie media query). § Maar: de data wordt nog steeds geladen. § En dat via een (vaak minder goede) mobiele verbinding. Beter is het om de module dan echt niet te tonen. Middelen hiervoor zijn bijv.: § NoNumber Advanced Modules Manager § User Agent Detector plugin van René Kreijveld (Komen we op terug in deel 2)

Deel 2. Eigen ervaringen met responsive templates


De overstap 2. Eigen ervaringen met responsive templates


Ik heb zelf non-‐responsive Joomla templates gemaakt § “from scratch”, met behulp van: § html, § css, § en een paar brokjes php / Joomla specifieke php Responsive design legde de lat echter een stuk hoger. En ik had niet genoeg 4jd om me in alle details te verdiepen. Maar wilde ook niet voor elk project een bestaande template zoeken / kopen.

Dus wat zocht ik 2. Eigen ervaringen met responsive templates


§ Eén bestaande, (commercieel) verkrijgbare template; § Die werkt op basis van Bootstrap; § En voldoende ruimte biedt om de vormgeving aan te passen. § Die ik voor nieuwe projecten kon aanpassen en hergebruiken; § Waarover ik veel kennis zou opbouwen; § En waarvoor ik eenn eigen bibliotheekje van trucjes (code snippets) zou opbouwen om steeds hem snel aan te kunnen passen.

Joostrap Base template 2. Eigen ervaringen met responsive templates


hfp://www.joostrap.com/joomla-‐templates/bootstrap-‐v3-‐templates/190-‐base-‐template

§ Goede ondersteuning van leverancier Joostrap; § Overrides op de standaard css van Bootstrap heel makkelijk via bestand custom.css; § Heb aantal sites mee opgeleverd (template versie 3.0.3) § Enkele trucjes ontwikkeld voor aanpassen index.php bestand

Helaas 2. Eigen ervaringen met responsive templates


§ Op sommige sites probleem met menu weergave op iPad. § Advies van Joostrap: nieuwe versie 3.1.0 van de template gebruiken. § Die bevafe echter nog meer problemen. § En de support kwam er ook niet meer uit… § Er werd (en wordt nog steeds) verwezen naar een update die alles zal oplossen en binnenkort uitkomt.

Maar… 2. Eigen ervaringen met responsive templates


§ Wil toch laten zien wat ik met deze template heb gedaan; § Misschien niet leferlijk over te nemen § Maar misschien wel ter inspira4e § In slot van de presenta4e kom ik terug op “hoe nu verder”.

Voorbeeldwebsite 2. Eigen ervaringen met responsive templates


hfp://tsskk.oorzaak-‐develop.nl Deze site is in ontwikkeling en vervangt binnenkort de site: hfp://www.tussenkunstenkonfituur.be

Op tablet en smartphone 2. Eigen ervaringen met responsive templates


Menu en schuivende kolommen 2. Eigen ervaringen met responsive templates


Essen4ële punten bij het werken met een responsive template: § Hoe klapt het menu op § Hoe verplaatsen de kolommen zich van naast elkaar naar boven elkaar

Aangezien de voorbeeldwebsite maar één menu oplossing heee, laat ik ook een paar voorbeelden zien van andere sites.

Menu met Joostrap menu module 2. Eigen ervaringen met responsive templates

Idem op smartphone 2. Eigen ervaringen met responsive templates


DJ-‐Menu module 2. Eigen ervaringen met responsive templates


Op een andere site moest ik dus uitwijken naar een andere menu module, met dezelfde template… Module: hfp://extensions.joomla.org/extensions/structure-‐a-‐naviga4on/menu-‐systems/drop-‐a-‐tab-‐menus/16232 Voorbeeldsite: hfp://www.orde-‐der-‐verdraagzamen.nl

DJ-‐Menu module in werking 2. Eigen ervaringen met responsive templates


Dit menu roept na openklikken via een Select element het na4ve selec4emechanisme van het apparaat aan.

Off-‐canvas menu 2. Eigen ervaringen met responsive templates


Zo ziet het Joomla core menu eruit in de Cleanliness template van Joostrap hfp://www.joostrap.com/joomla-‐templates/bootstrap-‐v3-‐templates/208-‐cleanliness-‐template

Kolomindeling 2. Eigen ervaringen met responsive templates


Terug naar de voorbeeldsite met Joostrap Base template. De basisindeling in kolommen is in grote lijnen: (bij een viewport > 992 px)

Kolomindeling op kleine schermen 2. Eigen ervaringen met responsive templates


Bij het “in elkaar schuiven” van de kolommen worden ze boven elkaar geplaatst in plaats van naast elkaar. Standaard wordt daarbij de linkerkolom boven de content geplaatst. Dat is niet al4jd wat je wilt. (bij een viewport < 992 px)

Kolomindeling aangepast 2. Eigen ervaringen met responsive templates


Aangepaste volgorde: de inhoud van de linkerkolom komt nu onderaan de rechterkolom te staan. (bij een viewport < 992 px)

Kolomindeling aangepast 2. Eigen ervaringen met responsive templates


Aangepaste volgorde: de inhoud van de linkerkolom komt nu onderaan die van de rechterkolom te staan. (bij een viewport < 992 px)

User agent plugin 2. Eigen ervaringen met responsive templates


Om de kolommen aan te passen gebruik ik een plugin plus wat eigen php code in de index.php De plugin is gemaakt door René Kreijveld, ik heb hem al eerder aangeprezen bij JUG030. hfps://github.com/renekreijveld/UserAgentDetector De plugin herkent wat voor apparaat de gebruiker heee, hij onderscheidt: § desktop (alle “gewone” computers, dus ook laptops); § tablet; § mobile (smartphone). Vanwege het breakpoint van 992px op tablets gebruik ik daarnaast een paar media queries.

Code in de index.php 2. Eigen ervaringen met responsive templates


Standaard-‐code in de template, in dit geval rond module posi4e Below-‐content: <?php if ($this-‐>countModules('below-‐content')): ?>

<div id="below-‐content"> <jdoc:include type="modules" name="below-‐content" style="standard" /> </div>

<?php endif; ?> Dit betekent dat de div met id ‘below-‐content’ getoond wordt als er modules ac4ef zijn in de module posi4e met dezelfde naam. Het betekent dus ook dat de div niet aanwezig is in de template html als er geen modules aanwezig zijn.

Code in de index.php aangepast, 1 2. Eigen ervaringen met responsive templates


Bovenin in de.php de output van de plugin inlezen: <?php // recognize device type, added by Studio De Oorzaak // requires the User Agent Detector plugin by René Kreijveld $session = JFactory::getSession(); $ualayout = $session-‐>get('ualayout'); ?>

Code in de index.php aangepast, 2 2. Eigen ervaringen met responsive templates


Aangepaste code van de module posi4e “Lee” (linkerkolom): <?php if ($this-‐>countModules('lee') and ($ualayout != 'mobile') ) : // added by Studio De Oorzaak ?>

<div class=”lee”> <jdoc:include type="modules" name="lee" style="standard" /> </div>

<?php endif; ?> Aangepaste code, toegevoegd onderaan de module posi4e Rechterkolom: <?php if ($this-‐>countModules('lee') and ($ualayout == 'tablet' OR $ualayout == 'mobile') ) : // added by Studio De Oorzaak ?>

<div class=”lee-‐to-‐right”> <jdoc:include type="modules" name="lee-‐to-‐right" style="standard" /> </div>

<?php endif; ?>

Code in de css aangepast 2. Eigen ervaringen met responsive templates


Omdat het omslagpunt van 992px midden in het bereik van de tablets zit, worden op tablets beide posi4es getoond en mbv. Media queries wordt de juiste onzichtbaar gemaakt. @media(max-‐width:992px){

.module.lee { /* hide on smaller viewports */ display:none; } }

@media(min-‐width:992px){

.module.lee-‐to-‐right{ /* hide on wider viewports */ display:none; } }

3. Tot besluit Hoe verder na deze ervaringen?


Welke basis voor mijn templates 3. Hoe verder na deze ervaringen


Toch bij Joostrap blijven? § Heb al in geïnvesteerd. § Oudere versie van Joostrap Base template, evt. met specifieke menu module; § Andere Joostrap template, bijv. Cleanliness § Zelf “best of” samenstellen uit bestaande Joostrap templates. Compleet andere template leverancier kiezen? Welke? § NB. Universal Playground, Jasper Dik, ooit ook bezoeker JUG030, woont nu in Zweden, zou bezig zijn met een aanbod. Of zelf iets samenstellen uit andere bronnen? Bootstrap is immers niet Joomla gebonden. § Joris Lange, ook JUG030, is hiermee bezig.

WAT ZOUDEN JULLIE DOEN? 3. Hoe verder na deze ervaringen


Responsive)templatesvoor) Joomla) · 2016. 12. 8. · Responsive)templatesvoor) Joomla)...

Documents

Transcript of Responsive)templatesvoor) Joomla) · 2016. 12. 8. · Responsive)templatesvoor) Joomla)...