| Door: Robert Roose. | Categorie: Algemeen.

10 joomla design & development tips

Websites maken met joomla is een vak apart. Als je een gewone HTML website maakt zonder joomla is HTML en CSS kennis voldoende. Als je echter een joomla website gaat ontwerpen en bouwen is het noodzakelijk om ook kennis van joomla te hebben. Deze kennis voorkomt een hoop kopzorgen bij het ontwerpen en het omzetten van het ontwerp in een werkende joomla website.

Om je alvast op weg te helpen bespreek ik hieronder tien punten die belangrijk zijn in het proces. De eerste vijf punten hebben voornamelijk betrekking op het ontwerpen (of designen) en bij de laatste vijf punten ligt de focus voornamelijk op het bouwen (de development) van de website.

Design

1. Indeling van een content item

Joomla genereert codes waarmee het een artikel of meerdere artikelen laat zien. Het is mogelijk om deze code helemaal naar eigen smaak aan te passen met template overrides, maar dit is erg complex. Bovendien is dit niet persé nodig, omdat de manier waarop joomla de artikelen laat zien goed genoeg is. Hieronder een afbeelding waarop te zien is welke onderdelen gegenereerd worden en hoe deze geplaatst worden door joomla.

Indeling van een Content Item

Zoals je kunt zien begint het met een component- en/of contentheading. Daarnaast worden de email, pdf en print icoontjes geplaatst. Onder de contentheading wordt de de datum getoond en daaronder de naam van de auteur. Daar weer onder wordt de intro en (eventueel) de rest van artikel getoond. Als je dus een pagina gaat ontwerpen voor joomla is het verstandig om deze indeling aan te houden. De print en email icoontjes onderaan het content item plaatsen is wel mogelijk, maar lastig te realiseren (door middel van de eerdergenoemde template override).

2. Pathway

Een fout die vaak gemaakt wordt is dat de Pathway (een kruimelpad module die aangeeft waar de gebruiker zich bevindt binnen de website) onder de titel van een content item geplaatst wordt. Dit is binnen joomla niet mogelijk. Zoals we in punt 1 gezien hebben genereert joomla een tabel waarin het content item geladen wordt. Het is niet mogelijk om daar willekeurig tussendoor modules in te laden. Zorg er dus voor dat het Pathway altijd op een vrije plek staat. Zie hieronder de afbeeldingen met een goed en een slecht voorbeeld van de plaatsing van een pathway.

Goed voorbeeld van een pathway.Fout voorbeeld van een pathway.

3. Active Menu

In het ingebouwde menu systeem van joomla is het mogelijk om de 'Full Active Highligting' aan te zetten. Dit zorgt ervoor dat het menu item dat door de gebruiker geselecteerd wordt een extra CSS klasse mee krijgt. Het geeft de webbouwer de mogelijkheid om het actieve menu item een andere styling te geven, bijvoorbeeld dikgedrukt. Let goed op hoe je dit in het ontwerp gebruikt. Op de afbeelding hieronder zie je een menu met daaronder een submenu. Zodra de gebruiker een keuze maakt uit één van de menu items wordt deze anders gestyled, omdat het een actief menu item betreft. Wanneer de gebruiker vervolgens een keuze maakt uit het submenu, verdwijnt de styling van het bovenste menu. Dit is voor joomla logisch omdat het bovenste menu item niet meer actief is, maar het menu item in het submenu wel. En hoewel dit voor joomla heel logisch is, is het dit voor gebruikers niet. Zij verwachten dat het bovenste menu item nog steeds actief is omdat ze nog binnen die 'categorie' zitten. Het actieve menu aspect kan erg handig zijn, maar als ontwerper is het belangrijk om op de hoogte te zijn van de consequenties wanneer je het gebruikt in je ontwerp.

Wat er in de onderstaande afbeelding gebeurt kan niet binnen joomla. Zowel het bovenste als het onderste menu item zijn namelijk actief.

Active menu voorbeeld dat niet mogelijk is.

4. Scrollbars

Gebruik geen scrollbars in je ontwerp. Zo simpel is het. Het heeft geen zin om met joomla scrollbars te genereren. Natuurlijk is het mogelijk, maar het is omslachtig en voegt meestal niks toe aan een website. Ik heb het hier over scrollbars binnen in artikelen. Hieronder een voorbeeld van hoe het NIET moet.

Gebruik geen scrollbars in het ontwerp.

5. Vergeten design elementen.

Joomla (en websites in het algemeen) hebben bepaalde elementen die op elke site terugkeren. Zorg er dus voor dat deze ook in het ontwerp zitten. Het kan veel verwarring, tijd en geld besparen als in het ontwerp al duidelijk is hoe de elementen eruit gaan zien. Design elementen die vaak vergeten worden:

  • 'Read more...' of 'Lees verder...' knop/link. Deze komt bij een standaard joomla installatie vaak voor.
  • Footer. In een Footer worden meestal links geplaatst naar onderwerpen zoals een privacy statement, disclaimer of een copyright regel.
  • Favicon. De favicon is het icoontje dat je rechts van de adresbalk ziet. Het icoontje is ook zichtbaar als je de website opslaat als favoriet. Als je deze niet aanpast, zie je het joomla logo als standaard favicon. Dat is op zich niet erg, maar staat ook niet heel sjiek.
  • Standaard Web elementen. Denk hier bijvoorbeeld aan het H1 tot en met H5 element, een link en een link hover (voor als de gebruiker over de link heen gaat), een (un)ordered list, een afbeelding, een paragraaf en een blockquote.

Development

6. Web Safe Fonts

Bij het ontwerpen van een website ben je gebonden aan een beperkt aantal lettertypes. Dit komt omdat de lettertypes die gebruikt worden in het ontwerp, ook geïnstalleerd moeten zijn op de computer van de bezoeker van de website. Je kunt er vanuit gaan dat deze computer sowieso de volgende lettertypes geïnstalleerd heeft: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS en Verdana. Dit zijn de zogenaamde Web Safe Fonts. Het is aan te raden om voor grote stukken tekst één van deze lettertypes te gebruiken.

Voor headings is het ook mogelijk om lettertypes te gebruiken die niet Web Safe zijn. Hiervoor kun je technieken gebruiken die de lettertypes omzetten naar Flash Elementen, zodat elke gebruiker (die Flash geïnstalleerd heeft) het lettertype kan zien. Mijn voorkeur gaat uit naar Cufón. Deze is gemakkelijk te gebruiken en simpel te implementeren binnen een joomla website.

7. Sticky Footer

Een Sticky Footer is een Footer die altijd aan de onderkant van de website geplakt zit, vandaar ook de benaming 'Sticky' Footer. Ongeacht hoe lang (of kort) de pagina is, de footer zit altijd aan de onderkant. Dit is niet alleen esthetisch gezien mooier, maar ook voor de gebruiker handiger omdat hij of zij altijd weet waar de footer zit. Deze zal niet gaan zweven wanneer een pagina kort is, terwijl het beeldscherm van de gebruiker langer is. Persoonlijk maak ik altijd gebruik van de Sticky Footer techniek van Ryan Fait. Recht toe recht aan en gemakkelijk te implementeren.

8. Vergeet IE6

IE6 (Internet Explorer) is nu al meer dan tien jaar oud. Met de komst van Internet Explorer 8 en de aankondiging van Internet Explorer 9 is het tijd om afscheid te nemen van Internet Explorer 6. Deze zwaar verouderde internetbrowser van Microsoft geeft webbouwers flink veel kopzorgen omdat de rendering engine (de manier waarop HTML en CSS omgezet wordt naar een website) op sommige punten niet klopt. Dezelfde HTML en CSS kan er in IE6 totaal anders uitzien dan IE7, Firefox, Opera of Safari. IE6 ondersteunt ook geen PNG transparantie. Daarbij loopt het marktaandeel van IE6 snel terug. Door middel van deze plugin is het mogelijk om bezoekers met IE6 duidelijk te maken dat het tijd is voor upgrade.

IE6 waarschuwing

9. PNG Fix

Kun je niet uit onder een optimalisatie van je website voor IE6? En wil je graag gebruik maken van PNG bestanden? Dan biedt deze PNG Fix de uitkomst. Hierdoor is het namelijk mogelijk om PNG bestanden te gebruiken die ook voor IE6 werken. De plugin werkt niet in alle gevallen optimaal, dus het blijft behelpen.

10. Cross browser testing

Het testen van een website op verschillende internet browsers is een groot struikelblok. Hieronder een overzicht van enkele oplossingen:

  • IETester.Een standalone aplicatie waarmee de website getest kan worden in IE5, IE6, IE7 en IE8.
  • //browsershots.org. Hiermee krijg je screenshots te zien van jouw website in tientallen verschillende browsers.
  • Windows Virtual PC. Dit geeft je de mogelijkheid om een virtuele Windows XP omgeving met IE6 te creëren op een Windows 7 machine.

Elke oplossing heeft zijn voor- en nadelen. Zelf maak ik gebruik van IETester om snel te kunnen zien of er iets mis is. Als ik dieper in het probleem moet duiken maak ik meestal gebruik van de Windows Virtual PC, omdat ik dan de Internet Explorer Toolbar in IE6 kan gebruiken. Hiermee los je gemakkelijker problemen op.

Conclusie

De tien besproken punten hierboven zijn slecht een klein onderdeel van het gehele proces. Mocht je nog vragen hebben over deze tips, aarzel dan niet om deze in het commentaar stellen!

{loadposition robertroose}