Responsive templates voor Joomla Een ervaringsverhaal
0. Inleiding Even voorstellen Frits Jongbloets Maak websites met Joomla sinds 2008 Bedrijf: Studio De Oorzaak Website: www.oorzaak.nl
0. Inleiding Deze presenta4e 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.
0. Inleiding Opbouw 0. Inleiding 1. Responsive templates, algemeen 2. Eigen ervaringen met responsive templates 3. Hoe verder na deze ervaringen
Deel 1. Responsive templates, algemeen
1. Responsive templates, algemeen Het pre- responsive 4jdperk 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
1. Responsive templates, algemeen Apparaten met kleine schermen 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.
1. Responsive templates, algemeen Oplossing: responsive design Presenta4e Responsive templates, Frits Jongbloets, Studio De Oorzaak, JUG030, 12 mei 2014, oorzaak@oorzaak.nl
1. Responsive templates, algemeen Wat is responsive design 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
1. Responsive templates, algemeen Flexibele grids en ayeeldingen 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.
1. Responsive templates, algemeen Breakpoints 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.
1. Responsive templates, algemeen Breakpoints, voorbeeld Een breakpoint in het Bootstrap framework voor responsive templates: > 992 pixels: het horizontale menu wordt volledig getoond. < 992 pixels: het horizontale menu wordt opgeklapt.
1. Responsive templates, algemeen Breakpoints, voorbeeld 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.
1. Responsive templates, algemeen Media Queries 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;!!!!!}!!}!
1. Responsive templates, algemeen Bootstrap 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
1. Responsive templates, algemeen Bootstrap css voorbeeld Bron: hfp://getbootstrap.com/css/#bufons
1. Responsive templates, algemeen Andere frameworks 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
1. Responsive templates, algemeen Impact voor het (crea4eve) design 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. Presenta4e Responsive templates, Frits Jongbloets, Studio De Oorzaak, JUG030, 12 mei 2014, oorzaak@oorzaak.nl
1. Responsive templates, algemeen Joomla extensies 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).
1. Responsive templates, algemeen Responsive data 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
2. Eigen ervaringen met responsive templates De overstap 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.
2. Eigen ervaringen met responsive templates Dus wat zocht ik 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.
2. Eigen ervaringen met responsive templates Joostrap Base template 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
2. Eigen ervaringen met responsive templates Helaas 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.
2. Eigen ervaringen met responsive templates Maar 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.
2. Eigen ervaringen met responsive templates Voorbeeldwebsite hfp://tsskk.oorzaak- develop.nl Deze site is in ontwikkeling en vervangt binnenkort de site: hfp://www.tussenkunstenkonfituur.be Presenta4e Responsive templates, Frits Jongbloets, Studio De Oorzaak, JUG030, 12 mei 2014, oorzaak@oorzaak.nl
2. Eigen ervaringen met responsive templates Op tablet en smartphone
2. Eigen ervaringen met responsive templates Menu en schuivende kolommen 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.
2. Eigen ervaringen met responsive templates Menu met Joostrap menu module
2. Eigen ervaringen met responsive templates Idem op smartphone
2. Eigen ervaringen met responsive templates DJ- Menu module 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
2. Eigen ervaringen met responsive templates DJ- Menu module in werking Dit menu roept na openklikken via een Select element het na4ve selec4emechanisme van het apparaat aan.
2. Eigen ervaringen met responsive templates Off- canvas menu 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
2. Eigen ervaringen met responsive templates Kolomindeling Terug naar de voorbeeldsite met Joostrap Base template. De basisindeling in kolommen is in grote lijnen: (bij een viewport > 992 px)
2. Eigen ervaringen met responsive templates Kolomindeling op kleine schermen 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)
2. Eigen ervaringen met responsive templates Kolomindeling aangepast Aangepaste volgorde: de inhoud van de linkerkolom komt nu onderaan de rechterkolom te staan. (bij een viewport < 992 px)
2. Eigen ervaringen met responsive templates Kolomindeling aangepast Aangepaste volgorde: de inhoud van de linkerkolom komt nu onderaan die van de rechterkolom te staan. (bij een viewport < 992 px)
2. Eigen ervaringen met responsive templates User agent plugin 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.
2. Eigen ervaringen met responsive templates Code in de index.php 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.
2. Eigen ervaringen met responsive templates Code in de index.php aangepast, 1 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');?>
2. Eigen ervaringen met responsive templates Code in de index.php aangepast, 2 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;?>
2. Eigen ervaringen met responsive templates Code in de css aangepast 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?
3. Hoe verder na deze ervaringen Welke basis voor mijn templates 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.
3. Hoe verder na deze ervaringen WAT ZOUDEN JULLIE DOEN?