Beez Templaten

Tak for dit bidrag: 

En template indeholder normalt mere, end du ser ved første blik.

Ordet 'template'er som regel forbundet med hjemmesidens synlige udseende. Men udover designet er templaten kendetegnet ved teknisk implementering. Den bestemmer, hvor indholdet er placeret i flowet af dokumenter, hvor og hvornår forskellige moduler kan aktiveres og deaktiveres, hvilke tilpassede fejlsider der skal vises og hvilken HTML struktur, der skal bruges.

Nogle brugere vil være bekendt med Beez templaten i Joomla! 1.5. Både beez_20 og beez5 er visuelt meget forskellige fra den tidligere versions design. Jeg brugte en neutral grå til designet i de elementære komponenter i templaten som f.eks. menuen for at få en løsning, der harmonerer med mange farver.

Selv dengang ville jeg udvikle en standard template, som var kompatibel, tilpasningsvenlig og nem at arbejde med. Jeg valgte farven lilla, fordi jeg håbede, at mange designere ville tage koden, modificere den og gøre den frit tilgængelig. Jeg havde håbet på et stort antal af nye gratis templates. Det er desværre ikke sket.

Jeg begik også den fejl, at jeg ikke kommunikerede klart nok ud, hvad det egentlige mål var. Outputtet var struktureret sådan, at næsten hvilket som helst design kunne implementeres på en simpel og ligefrem måde, med kun få ændringer i CSS. Jeg beholdt dette princip i nye versioner af Beez. Derudover er der flere tilgængelige JavaScript og i beez5 er der også lidt HTML5. Beez_20 kræver ikke template overrides. Layout tabeller er endelig ikke i brug mere i Joomla!. Det nye HTML-baserede output følger strukturen i den gamle Beez template.

CSS klassenavnene er blevet omdøbt og forenet for bedre forståelse. Det er en stor fordel for template designere. HTML outputtet fra Joomla! standarden er ren og velformet. Du behøver ikke at bruge template overrides mere for at lave ren, standard-kompatibel kode. De tekniske egenskaber er næsten ens i begge Beez tamplates. De er kun forskellige i deres grafisk design. Beez5 versionen er også designet til brug af HTML5.

De primære features 

  • Tilgængelighed
  • Konfigurerbare navigationsplaceringer 
  • WAI-ARIA Roles Landmark
  • Automatisk modulrepræsentation i tilgængelige tabs
  • Fade in og fade out af sammenfoldelige moduler 
  • Fade in og fade out af sammenfoldelige søjler 
  • I beez_ 20 kan du vælge mellem to formularer: naturlig eller menneskelig
  • I beez 5 kan du bruge HTML5

Generel tilgængelighed

For de fleste mennesker er internettet nu normen. Information fra hele verden er klar til at blive hentet ned - både dit lokale supermarkeds tilbud, offentlige kontorers åbningstider og telefonbogen kan du få adgang til via din egen computer. Du behøver ikke føre irriterende telefonsamtaler eller gå ned på biblioteket, du kan bare gå på nettet.
Men ikke alle får noget ud af denne udvikling. F.eks. har folk med fysiske eller psykiske handicap svært ved at deltage fuldt ud i samfundet, også selv om de kunne drage stor fordel af kommunikationsteknologien. Men de går ofte glip af dette pga. de barrierer, der spærrer deres adgang til information, eller gør det umuligt. Mange af disse barrierer kan overkommes, hvis tilbudene er designet derefter.

Lederne af netbutikker og banker, som tilbyder online bankvirksomhed, burde være opmærksomme på denne ret så store målgruppe.

Tilgængelige webdesigns sigter på at stille indhold og samspil på internettet til rådighed for alle brugergrupper og enheder, hvis muligt 

Ca. 8 % af den tyske befolkning har et fysisk handicap, som gør det svært for dem at få adgang til information via internettet. Sædvanligvis indentificeres ordet "tilgængelighed" i webdesign med Internet til blinde mennesker. Jeg vil lægge vægt på, at dette ikke er det hele - faktisk er det kun den mindste del. Jeg har ofte tænkt på, hvorfor det er sådan. Formentlig er det, fordi skærmen er blevet det klassiske symbol på computeren, og en person, der ikke kan se, kan heller ikke bruge en skærm. I mit daglige arbejde har jeg lagt mærke til, at blinde mennesker i Tyskland klarer sig meget bedre end dem, der har andre handicaps.

Er du blind, har du kun få procent tilbageværende syn i forhold til normalen. Antallet af blinde i Tyskland ligger mellem 150.000 og 200.000. Nogle af dem kan lige præcis tyde tekst via en bestemt tekststørrelse og tilpassede farve settings, mens andre er afhængige af akustisk information eller af at læse blindskrift.

Antallet af folk med alvorligt svækket syn er meget større.

Omkring en fjerdedel af befolkningen i den arbejdsdygtige alder klager over forskellige grader af ametropi. Procentdelen er meget højere hos de lidt ældre mennesker. Nogle af disse problemer kan afhjælpes ret godt med briller, mens andre kun oplever begrænsninger. Nogle øjensygdomme såsom grå eller grøn stær kan helbredes eller bedres via en operation. Andre sygdomme som retinitis pigmentosa og diabetisk retinopati fører til en stadig forværring af synet, indtil det til sidst forsvinder helt. Det visuelle felt i det såkaldte "tunnelsyn" er meget begrænset - sommetider ned til størrelsen på lidt under en 5-krone, som holdes i armslængde ud fra øjnene.

Omkring 10 % af den mandlige befolkning i den arbejdsdygtige alder har en mild form for farveblindhed - det betyder som regel, at de ikke kan kende forskel på nogle røde og grønne nuancer. Farveblindhed over for andre farver, total farveblindhed eller rød-grøn farveblindhed hos kvinder er meget sjælden.

En anden potentiel brugergruppe har problemer med den almindelige input teknologi - ikke alle kan bruge en mus eller et standard tastatur.

Der kan være mange grunde: arme eller fingre er måske lammede eller bevæger sig spontant og er svære at styre. Andre har måske ikke nogen arme og ingen hænder eller er lamme fra halsen og ned efter et slagtilfælde i den ene side. Så længe et menneske er i stand til at sende et kontrolleret binært signal - det berømte 0 eller 1 - kan han lære at betjene en computer og dens funktioner med passende software.

Der er ca. 60.000-100.000 mennesker i Tyskland med begrænset hørelse. Flere tusind af disse har haft vanskeligt ved at lære det tyske sprog, så de kender det kun på 4.-6. klasses niveau. Dette gør behovet for forståelig tekst indlysende for de fleste.

For at kommunikere med hinanden, men også for at modtage nyt eller sofistikeret indhold, foretrækker hørehæmmede at bruge tysk tegnsprog - det er sit eget idiom, uafhængigt af det talte sprog, baseret på et system af tegn og bevægelser.

Opmærksomhed

Ikke kun hørehæmmede surfer internettet, med eller uden at højtalerne er tændt! Det er f.eks. ikke nok kun at give akustiske advarsler - de skal altid følges af et klart visuelt varsel.

Jo mere internettet erobrer alle livets områder, jo mere tydelig bliver de situationsmæssige handicaps: langsomme tilkoblinger i hotellet, ukontrollerbare lysforhold i et bevægende tog, afkald på lyd på arbejdspladsen.

Alle folk får gavn af tilgængelige hjemmesider. Det handler ikke kun om at imødekomme alle behov til fulde, eller om hvilke offentlige insistutioner skal indvillige. Selv små skridt frem mod tilgængelighed kan forbedre en hjemmesides brugervenlighed.
Pga. dets høje udbredelse har Joomla! evnen til at få meget indflydelse. Med standard beez templaten er det nu relativt let at skabe hjemmesider, der er tilgængelige og brugervenlige for de fleste.

Som i beez 1.5 er alt det, der er nødvendigt for designet af tilgængelige templates også implementeret i beez_20 og beez5. De vigtigste er:

  • Adskillelse af indhold og layout
  • Semantisk logisk struktur
  • Anker links 
  • Tastatur navigering
  • Passende farvekontraster

Adskillelse af indhold og layout

Den første og vigtigste regel for udviklere er muligheden for total adskillelse af indhold og layout:

  • Ren HTML til indholdet 
  • Ingen unødvendige layout tabeller
  • Kun CSS formattering 
  • En logisk sematisk struktur
  • Anker links 

Den lineariserende indholds- og formatteringsmæssige CSS problemstilling er kun en af de vigtigste forudsætninger for nem tilgængelighed.

Hjælpe-teknologi har kun mulighed for at genbruge indholdet efter ønske, når den visuelle præsentation kan ignoreres totalt. At outsource præsentationen til style sheets giver f.eks. svagtseende brugere muligheden for at definere deres egne style sheets i deres browser og tilpasse siderne, så de passer til deres behov. En lineær præsentation af indhold og passende semantisk struktur er særlig vigtig for brugere med skærmlæsere.

Skærmlæsere forstår indholdet af en side fra top til bund, altså lineært. Brugen af mange layout tabeller hindrer linearisering.

Det er de færreste, der kan forestille sig, hvad der ligger bag udtrykket Semantic Web. Du forbinder det sikkert med undervisning i sprog, men det spiller også en særlig rolle, når du skal skrive indhold til internettet. F.eks. kan skærmlæsere tilbyde brugerne at hoppe fra overskrift til overskrift eller fra liste til liste, så de hurtigt får et overblik over dokumentet. Hvis et web-dokument ikke har nogen overskrifter/headere, kan denne funktion ikke bruges.

Den formelle struktur i et web-dokument skal generelt svare til indholdsstrukturen. Afhængigt af web-projektet kan valget af det rigtige heading-hierarki være noget af en udfordring.

I dag findes dette koncept ikke kun i templates, men også i hele Joomla!s standard output. I udviklingen af Joomla! 1.6 var dette en central del af udviklingsarbejdet. Det var både, fordi det gav bedre brugervenlighed i hjælpe-teknologi, men også fordi det havde en betydning for søgemaskineoptimering samt for bedre brugervenlighed i mobile enheder. Velstruktureret kode hjælper nemlig ikke kun handicappede til bedre at kunne navigere rundt på en hjemmeside - selv Google har det bedre med en velstruktureret side.

Anker links 

Lineær præsentation har en stor ulempe: Du skal måske rejse meget langt for at få adgang til "bagvedliggende" indholdsområder.
På skærmen findes et tre-søjlet layout, som lader en del områder begynde "ovenfra", og øjet kan hoppe lige til det, hvor det pga. visuelle hjælpemidler leder efter interessant information.

Hjælpen kommer i form af ankere. Ankere er non-visuelle modparter til det grafiske layout, idet de lader en bruger af lineære playback enheder identificere vigtige indholdsområder fra sidens start og med det samme hoppe til de steder, hvor han eller hun mener at kunne finde interessant information.

Rent praktisk betyder brugen af ankere, at du skal indsætte endnu en menu i toppen på hver side til intern navigation. I de fleste tilfælde vil det være nyttigt at skjule denne menu fra de grafiske layout. Det er irriterende for de seende brugere at klikke på et link, hvor der tilsyneladende ikke sker noget, fordi linkets mål allerede er synligt i viewporten.

Under alle omstændigheder skal "anker links menuen" ikke være for lang, og den skal være opbygget med omtanke, fordi den udvider sig og komplicerer sansestien pga. lineariseringen. Generelt er det tilrådeligt at tilbyde det primære indhold som det første "hop", så faste besøgende, som kender siden og benytter sig af navigationen, har den kortest mulige vej til deres bestemmelsessted.

Her bliver det klart, at især hjemmesider med komplekse indholdssider ikke kun har brug for et grafisk layout, men også et indholdsdesign, der har til mål at arrangere indholdet i en form, som ikke indeholder unødvendige barrierer for lineariserede brugere.

Eksempel:

<ul class="skiplinks">
  <li><a href="#main" class="u2">Skip to content</a></li>
  <li><a href="#nav" class="u2">Jump to main navigation and login</a></li>
</ul>

Farvevalg

Farvevalget er, især i tilgængelighedens kontekst, af stor vigtighed, fordi selv mennesker med farveblindhed skal kunne bruge din hjemmeside uden problemer.

Hvis du konverterer et layout til forskellige nuancer af grå, får du en ide om, hvad farveblinde mennesker kan se. Dog er sansningen meget individuel og afhænger af graden af ametropi. Mange farveblinde mennesker har lært at tolke det de nuancer de ser om til farver. De ved f.eks., at græs er grønt, og de kan identificere farven grøn ved at sammenligne græsset med andre nuancer af grøn.

Mere udbredt end den totale farveblindhed er den såkaldte rød-grønne farveblindhed. Pga. en genetisk fejl kan folk ikke kende forskel på rød og på grøn. Blandede farver, som indeholder rød og grøn, er slørede for dem.

Kontraster

Farver spiller også en vigtig rolle i forskellige andre typer af syns-handicap, ikke kun pga. farven selv, men også fordi en betydelig farvekontrast kan være til hjælp i brugen af en hjemmeside.

Både farverne på forgrund og baggrund i tekstelementer bør forme en klar kontrast, selv om det ikke er muligt at vælge farve og kontrast settings, som kan imødekomme alle krav. Sort tekst på hvid baggrund opnår maksimal farvekontrast. For at undgå en forstyrrende skær-effekt kan det være nyttigt med en lettere tonet baggrund. Nogle svagtseende mennesker vil have brug for meget stærke kontraster for at adskille de individuelle elementer af indholdet på en side fra hinanden. For dem er farvekombinationer såsom hvid tekst på en klar orange baggrund ikke tydelige nok. Andre stærke kontraster fungerer som stråling, så indholdet bliver svært at læse.

beez_20: Valg af design 

I Beez 2.0-templaten kan du vælge mellem personligt og naturligt design. Implementeringen af filerne nature.css og personal.css via template-parametrene såvel som strukturen på de brugte CSS-filer danner grundlaget for denne metode.

Figur 1: Vælg style

Der er to yderligere filer, som er ansvarlige for farvesammensætningen. Filerne position.css og layout.css er ansvarlige for den overordnede placering og afstand.

Hvis du gerne vil ændre farverne i templaten, kan du bare ændre filerne position.css og layout.css, som du ønsker det. Placeringen af indholdet er stadig det samme, så længe det er defineret i andre filer.

Alle style templates er stadig vilkårligt modificerbare og kan ændres af template udviklere, så de inkluderer ekstra templates. 
Kildekoden har jeg designet, så den kan tilbyde det maksimale antal af mulige kreative varianter, når man ændrer CSS filerne. På deres egen måde ligner Beez templates frameworks og sparer dig for en masse arbejde.

Navigationens placering 

Det kan være nødvendigt at placere navigationen før eller efter indholdet - enten af æstetiske grunde eller for at forbedre søgemaskinevenlighed og tilgængelighed. Begge versioner af Beez templaten lader dig vælge mellem to muligheder i backenden.

Figur 2: Vælg navigationens placering

Navigationen er visuelt og semantisk placeret før eller efter indholdet og formatteret via CSS.
Hvis du åbner index.php af beez_20 eller templaten, som du allerede har ændret, kan du finde følgende opgave i linje 27:

$navposition = $this->params->get('navposition');

Variablen $navposition er tilknyttet den valgte værdi i backenden. Variablen ekskluderer værdien til venstre (left) eller i midten (center). Left repræsenterer placeringen før indholdet, center står for placeringen efter indholdet.

Udtrykket center synes at være lidt forvirrende her, det ville være mere logisk at kalde det højre. Men afhængigt af hvordan du designer CSS'en, kan du placere navigationen i et tre-søjlet view i midten.

JavaScript og WAI ARIA

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) er en teknisk specifikation fra the Web Accessibility Initiative (http://en.wikipedia.org/wiki/Web_Accessibility_Initiative), som vil lette handicappedes deltagelse i nutidens stadig mere komplekse og interaktive webservices. Denne teknik er særligt nyttig, når det kommer til at designe dynamiske indholdspræsentationer og bruger interfaces. Teknikken er baseret på JavaScript, Ajax, HTML og CSS.

Især blinde mennesker mister ofte orienteringen, når de besøger en side, hvor indholdet pludselig bliver vist eller skjult. Mennesker, der er seende, kan opfatte dette via øjnene, mens blinde menneske kun kan forstå det, når fokus er placeret på det specifikke element.

At fokusere betyder bare at placere cursoren på det rigtige sted for at få adgang til det tilgængelige indhold.

I HTML og XHTML har vi ikke haft muligheden for at fokusere på alle elementer. Kun interaktive elementer såsom links, knapper eller input felter var fokuserbare. Dette har ændret sig med brugen af WAI ARIA og HTML5.

De brugte scripts i Beez templaten er afhængige af denne teknik for at gøre templaten mere tilgængelig for handicappede.

WAI ARIA - Landmark Roles: Førstehjælp til at orientere sig

Landmark Roles skal lette orienteringen på en hjemmeside ved at beskrive sideområder og deres eksakte funktion på siden. Navigationen har rollen navigation, søgningen har rollen search, det primære indhold har rollen main. Implementeringen er ret let. Elementet bliver kun udvidet til den passende rolle-attribut. På denne måde bliver brugerne af moderne skærmlæsere informeret om rollerne.

<div id="main" role="main">

Inde i Beez templaten bliver dette gjort automatisk via JavaScript (javascript/hide.js). Godkendelsen af Wai Aria teknologien er stadig ikke gået igennem, og med den direkte implementering i kildekolden ville en hjemmeside dumpe valideringstesten.

Et komplet overblik af landmark roles kan findes her http://www.w3.org/TR/wai-aria/roles#landmark_roles.

Hvis du senere bruger Beez templaten som basis for din egen template og ændrer strukturen på sideområderne, skal du også tilpasse manuskriptet derefter.

Sammenfaldende moduler og sidebars

Aktiveringen og deaktiveringen af bestemte områder kan være til hjælp for brugeren, særligt på sider med meget indhold. Begge Beez templates leverer to forskellige måder. For det første kan søjlen med ekstra information aktiveres og deaktiveres, men på den anden side kan modulerne sammenfoldes op til deres overskrifter.

Skjul søjle 

For at teste denne funktionalitet skal du placere et modul i søjlen til ekstra information. Modul positionerne position-6, position-8 og position-3 er til rådighed. Ligegyldigt om navigationen er placeret før eller efter indholdet, når søljen vises, vil et link dukke op lige over teksten "close info".

Figur 3: Skjul søjle

Ved at aktivere dette link bliver søjlen skjult, og linkteksten ændrer sig til "open info", og søjlen bliver genaktiveret med et klik.

Funktionaliteten er kontrolleret af JavaScript. Alle scripts,som er nævnt her, er baseret på det leverede Mootools JavaScript framework, som forenkler vores arbejde på mange områder.

Filen hide.js i JavaScript folderen i templaten er ansvarlig for at vise og skjule søjlen.

I index.php filen i templaten, omkring linje 194, vil du finde den nødvendige HTML kode.

<div id="close">
 <a href="#" onclick="auf('right')">
  <span id="bild">
   <?php echo JText::_('TPL_BEEZ2_TEXTRIGHTCLOSE'); ?>
  </span>
 </a>
</div>

Det tekstmæssige indhold i JavaScript variablerne er kontrolleret med Joomla! sprogstrenge.

Vis og skjul moduler

En af de største udfordringer ved at designe en hjemmeside er den klare struktur, der skal være i indholdet. Særligt på forsiden har du ofte brug for at placere forskellig informaion uden at overfylde siden.

Figur 4: beez-Slider

Begge Beez templates kan præsentere moduler i form af sliders.

Her er titlen på modulet det første output. Ved at klikke på plus-tegnet ved siden af overskriften får man modulet til at åbne sig, og dets indhold vil være synligt. Så vil plus-tegnet blive erstattet af et minus-tegn, og modulet kan foldes sammen igen ved at klikke på det. Selv med denne metode har jeg brugt WAU ARIA teknologien.

For at bruge modulerne som beskrevet skal de integreres i templaten ved at bruge følgende kommando

<jdoc:include type="modules" name="position-8" style="beezHide" headerLevel="3" state="0" />

Når du bruger style = "beezHide", vil alle moduler som er loaded i denne position blive vist som sliders. 

Du har måske lagt mærke til, at kommandoen inkluderer attributen "state", som kontrollerer, om modulet er ud- eller sammenfoldet.
Hvis du vælger værdien 0, er den lukket, når først den loader. Vælg så værdien 1, og den åbner sig som standard og kan lukkes igen af brugeren.

Faneblade

Præsentation af indhold i såkaldte faneblade bliver mere og mere populær. Joomla! tilbyder allerede moduler med denne funktion. Men ingen af disse moduler opfylder kravene til tilgængelighed.

Figur 5: Beez faneblade

Den integrerede løsning i Beez er baseret på WAI ARIA teknikker for at sikre tilgængelighed. For at repræsentere modulerne i faneblade er de integreret som følger:

<jdoc:include type="modules" name="position-5" style="beezTabs" headerLevel="2" id="1" />

Alle modulerne, som er placeret på position-5, er arrangeret automatisk i form af faneblade. Du kontrollerer HTML outputtet via Style beez tabs (faneblade). Brugen af attributten id = "3" er obligatorisk. Grunden til dette er de anvendte JavaScripts struktur. Forestil dig, at du vil have integrerede moduler til forskellige steder i templaten. JavaScript funktionen kræver unik information om hvilke faneblade, der skal åbnes og lukkes. Hvis denne information ikke er der, vil scriptet ikke virke, som det skal. Brug kun tal til ID'et på dette tidspunkt.

Juster størrelsen på skrifttypen

I top headeren på layoutet kan brugeren ændre skrifttypestørrelsen. Det tekniske grundlag for denne funktion kan findes i JavaScript filen templates/your_name/JavaScript/md_stylechanger.js. I index.php filen kan du inkludere en div container med id="fontsize".

Området er i første omgang tomt og vil blive fyldt dynamisk op med indhold via JavaScript. Hvis dine besøgende har deaktiveret JavaScript, kan de ikke bruge denne funktion.

Nogle vil spørge, hvorfor denne funktion stadig er nødvendig, især når enhver browser har en feature, der kan gøre skrifttypen større. Især for ældre mennesker er denne teknik dog ofte af stor vigtighed, da de fleste af dem er mere eller mindre svagtseende. Ydermere vil især ældre mennesker vide meget lidt om browsers-funktionalitet og lede efter en mere åbenlys måde at gøre det på.

beez5: brug HTML5

Beez5 templaten er ikke så forskellig fra beez_20, når man ser bort fra nogle designaspekter. De mange features er næsten ens.

Den eneste forskel: beez5 tillader brugen af HTML5. Hvis du kigger på template parametrene i beez5, kan du se, at du kan vælge mellem HTML5 og XHTML kode output. Dette er baseret på HTML5 template overrides, som du kan finde i HTML folderen i din template.

HTML5 leverer mange forskellige muligheder og vil bringe et stort antal ændringer og lettelser i fremtiden, men det er stadig ikke standard godkendt (marts 2011). Mange af de tilbudte muligheder er i øjeblikket ikke pålideligt anvendelige, mens andre kan bruges uden vanskeligheder.

En vigtig del, som allerede fungerer, er de nye strukturelle elementer. HTML4 og XHTML har en lav semantisk vægt. Dette er blevet lettere forbedret med HTML5.

apart from some design aspects. The features offered are largely identical.

Vi har nu en del praktiske elementer til at strukturere siden.

Med elementerne

  • header
  • footer
  • aside
  • nav

kan du strukturere en virkelig god side. 

Elementer såsom

  • section
  • article
  • hgroup

hjælper dig med at tilknytte større betydning til det faktiske indhold. 

HTML5 koden i Beez5 bruger kun elementer, som er pålidelige lige nu. Kun Internet Explorer Version 8 har som altid enkelte problemer.

Øverst på siden er der indsat et script, som integrerer de ukendte elementer i den eksisterende dokument-struktur.

<!--[if lt IE 9]>
<script type="text/JavaScript" src="<?php echo $this->baseurl ?>/ templates/beez5/JavaScript/html5.js"></script>
<![endif]-->

Grundlaget for integreringen af HTML5 i Joomla! er template overrides samt svaret på det udvalgte struktur-sprog via template parametrene i index.php. Fordi templaten tillader brugen af to forskellige struktur-sprog, skal du gribe denne mulighed an i index.php.

Altså: Konstruktionen af index.php er ret kompliceret, fordi det afhænger af det valgte struktur-sprog, om en anden HTML kode bliver genereret.
Begynd med at definere dokument-typen.

Når du åbner index.php i Beez5 templaten, kan du med det samme se, hvad jeg mener.

<?php if(!$templateparams->get('html5', 0)): ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><?php else: ?> 
<?php echo '<!DOCTYPE html>'; ?> 
<?php endif; ?>

Dette koncept er båret gennem hele siden, og HTML5 elementerne kan kun udgives, hvis HTML5 også blev valgt í backenden.

Hvis du senere vil bygge din egen template i HTML5, vil det være bedst at fjerne alle queries og XHTML elementer og sætte HTML5 koden direkte ind.