Zoals we allemaal weten, zijn er altijd twee kanten van elk website-ontwerp. De visuele kant die alle gebruikers zien met alle grafische elementen, knoppen, afbeeldingen en de kant erachter, dat is de code die verantwoordelijk is voor de functionaliteit van de website. Hoe de balans te bereiken?
De activerende kant bevat niet slechts één type code, maar omvat verschillende. Allereerst is het HTML-code, die een raamwerk creëert waarin CSS (Cascading Style Sheets) of programmeertalen zoals PHP kunnen worden ingebed. Met andere woorden HTML wordt gebruikt om de inhoud op de pagina te structureren, terwijl CSS het mogelijk maakt om de inhoud en de stijl van uw website afzonderlijk te behandelen en programmeertalen geven instructies door aan de computer.
HTML zelf zorgt niet voor effecten als dropdownmenu’s of carrousels. Er is een code die uitdrukkelijk is gewijd aan de gebruikersinterface, terwijl andere code wordt gebruikt om gegevens te verwerken en verbinding te maken met de database. De ‘presentatielaag’ verwijst zowel naar de grafische interface als naar de code die het aanstuurt, inclusief de code die interactieve elementen bestuurt, zoals drop-down menu’s.
Presentatiecode omvat:
- HTML en HTML 5
- CSS
- Scripttalen zoals JavaScript, jQuery en Ajax.
Meestal worden al die talen vakkundig met elkaar verweven om een visueel aantrekkelijk en zeer functioneel website-ontwerp te creëren.
1. Multimedia-interface maken
Geanimeerd en meeslepend ontwerp wordt bereikt door het gebruik van Adobe Flash of een combinatie van HTML, CSS en andere scripttalen met elkaar vermengd.
Jarenlang had Adobe Flash de leiding, maar het begon te veranderen. Met de ontwikkeling van HTML 5 en CSS zijn we tegenwoordig in staat om veel van de interactieve en animatie-effecten steeds meer te repliceren.
HTML 5, de meest recente editie van HTML, heeft een enorme stap voorwaarts gemaakt op het gebied van ontwerpmogelijkheden voor presentatielagen. Het biedt een verbeterde toolkit van elementen en eigenschappen en erkent de manier waarop ontwerpers werken en bepaalde elementen gebruiken. Het stelt ontwerpers bijvoorbeeld in staat om een navigatiegroep te definiëren met het nieuwe ‘nav’ in plaats van het eerder gebruikte ‘div’-element. De ondersteuningsfuncties voor animatie en interactieontwerp van HTML5 zijn ook indrukwekkend verbeterd, en het feit dat HTML5 wordt ondersteund in mobiele browsers zoals Apple’s Safari, heeft de mogelijkheden voor webontwerp geopend.
Een paar woorden over Adobe Flash
Flash is een animatie en interactieve technologie die het mogelijk maakt om een zeer meeslepende interface te creëren. Wat betreft de implementatie van het Flash-element in het ontwerp van websites, is het proces vrij eenvoudig. De component die in Adobe Flash is ontwikkeld, wordt geëxporteerd als een op zichzelf staand .swf-bestand en op precies dezelfde manier als een afbeelding wordt het .swf-bestand ingesloten in een HTML-pagina. Het .swf-bestand kan een klein deel van de pagina zijn of letterlijk de hele interface. Opgemerkt moet worden dat gebruikers de Flash-speler in hun browser moeten hebben geïnstalleerd om een pagina met een .swf-component te kunnen bekijken.
Ondanks de mogelijkheid om een indrukwekkende gebruikerservaring te creëren, heeft het gebruik van Flash enkele nadelen. De belangrijkste is het feit dat het mobiele platform van Apple simpelweg geen Flash-bestanden ondersteunt. Daarom moet de in Flash gemaakte website een alternatieve versie van de site bieden voor (Apple) mobiele kijkers (uiteraard alleen als de markt voor hen belangrijk genoeg is). De uitnodiging voor de gebruiker om de nieuwste versie van de Flash-speler op de iPhone te downloaden is een irrelevante knop, want zelfs als ze Flash zouden downloaden, zou de site nog steeds niet toegankelijk zijn.
HTML5 – Flash-alternatief
Zoals eerder vermeld, maakt de combinatie van HTML 5, CSS en jQuery-code het nu mogelijk om geanimeerde websites te reproduceren die alleen in Flash mogelijk waren. Met het ‘canvas’-element is het nu veel gemakkelijker dan ooit om een rijke en geanimeerde gebruikersinterface te ontwerpen. De meeste moderne desktop- en mobiele browsers ondersteunen de HTML5-standaard, wat het mogelijk maakt om een ontwerp te maken dat op een groot aantal platforms werkt.
1.1 DHTML, JavaScript, jQuery en Ajax
Houd er rekening mee dat HTML slechts een structuur vormt voor een inhoud. Scripttalen zoals JavaScript, Ajax en jQuery die het gedrag van gebruikersinterface-elementen en inhoud die op een pagina wordt weergegeven, bepalen, zijn in die structuur verweven.
JavaScript is een dynamische scripttaal die in staat is tot complexe animatie- en interactie-effecten, zoals het maken van een vervolgkeuzemenu of een uitbreidende vensterlaag. Het maakt het mogelijk om met de gebruiker te communiceren, de browser te besturen en de weergegeven webpagina-inhoud te wijzigen. Wanneer JavaScript in HTML wordt geïmplementeerd, wordt de HTML ‘DHTML’ genoemd. Dynamische HTML (DHTML) maakt het mogelijk om interessante interactieve componenten en animaties te maken.
jQuery is een vereenvoudigde vorm van JavaScript die zich richt op de veelgebruikte interacties tussen JavaScript en HTML. Het is ontworpen om het navigeren op een webpagina te vergemakkelijken. jQuery is gratis, open-source software en is online beschikbaar. U kunt kant-en-klare scripts naar uw webpagina’s kopiëren en plakken en ze aanpassen aan uw doeleinden. Met jQuery kunt u animatie- en interactieontwerpeffecten maken met veel minder code dan nodig zou zijn met JavaScript.
Voorbeelden van jQuery-effecten:
- Uitvouwen en inklappen volgens vensters
- Rotatie van carrouselafbeelding
- Afbeelding zoomen bij rollover etc.
Ajax (Asynchrone JavaScript en XML) laat gegevensverwerking toe, zoals het verzenden of ophalen van gegevens op de achtergrond (asynchroon) zonder de weergave of het gedrag van de webpagina te verstoren. Daarom is het niet nodig om de pagina opnieuw te laden of op een “update”-knop te klikken en gegevens op de pagina kunnen automatisch worden vernieuwd/geüpdatet.
1.2 Geavanceerde grafische CSS-effecten
Om een grafisch element te maken, bijvoorbeeld een knop, vertrouwden we vroeger op bitmapafbeeldingen zoals jpeg of gif. Ze verhogen niet alleen de laadtijd van de webpagina, maar ze moeten ook worden gemaakt door ontwerpers die bekend zijn met software zoals Photoshop, en dan moeten ze elke keer dat u het uiterlijk van de site wilt veranderen met de hand worden gewijzigd.
Tegenwoordig biedt CSS steeds meer stilistische controle over het uiterlijk van elementen. Het is nu mogelijk om eenvoudig door middel van code gradaties, afgeronde hoeken, reflecties en zachte slagschaduwen toe te voegen aan tekst en elementen.
Er zijn nogal wat handige CSS-besturingselementen voor grafische stijl die we kunnen implementeren om het gebruik van bitmapafbeeldingen bij het bouwen van een gebruikersinterface te vermijden.
De voordelen van het gebruik van CSS voor onze gebruikersinterface zijn onder meer:
- Snellere downloadtijden – CSS-code wordt slechts één keer geschreven en kan als stijl worden toegepast op elk grafisch of tekstelement;
- Schaalbaar ontwerp – CSS-code stelt u in staat schaalbare attributen toe te passen op lettertypen en elementen;
- Eenvoudig onderhoud – Om de grootte, kleur en visuele effecten van een knop, tekst of ontwerpelement te wijzigen, wijzigen we eenvoudig de waarden in de CSS-code en de wijziging wordt toegepast op alle elementen die aan de specifieke stijl zijn toegewezen;
- Toegankelijkheid – in CSS gebruiken we echte tekst voor onze knoppen en interface-elementen, en deze zijn getagd en geïdentificeerd op een manier die schermlezers kunnen verwerken en vertalen voor gebruikers die op dergelijke apparaten vertrouwen.
1.3 Reagerend ontwerp
De meest recente trend in website design is ‘responsive design’. Het is een benadering die gericht is op het creëren van websites op een manier die een optimale kijkervaring biedt, gemakkelijk te lezen en te navigeren is op het brede scala aan apparaten. Wanneer de gebruiker de grootte van zijn browservenster wijzigt, wordt de webpagina onmiddellijk bijgewerkt om optimaal te worden weergegeven in de ‘viewport’-grootte. View port is een nieuwe term die ontwerpers gebruiken om niet alleen verschillende desktopbrowserformaten aan te duiden, maar ook mobiele apparaten die allemaal verschillende vaste schermformaten hebben.
Responsief ontwerp is mogelijk dankzij het ‘mediaquery’-gedeelte van de CSS3-specificatie. Het herkent de grootte van de browser en vertelt de pagina om het juiste stijlblad te laden, bijvoorbeeld ‘widescreen.css’ of ‘mobilescreen.css’. Het is mogelijk omdat verschillende stylesheets verschillende lay-outsystemen, lettergroottes en instellingen voor beeldoptimalisatie bevatten.
De last but not least is het krijgen van creatieve ideeën voor de gebruikersinterface. Er zijn genoeg inspiraties online. Het is raadzaam om goede ontwerppraktijken te analyseren, ze op te splitsen tot de essentie en te kijken hoe sommige ervan kunnen worden aangepast voor toepassing in ons eigen vakgebied.