Wanneer we websites ontwerpen en plannen hoe de inhoud van die sites wordt weergegeven, doen we dit vaak met een ideale situatie in gedachten. Koppen en tekstgebieden worden verondersteld bepaalde lengten te hebben, terwijl de afbeeldingen die bij die tekst horen, zijn ontworpen om te worden weergegeven in dimensies die hen in staat stellen te werken zoals bedoeld in het totale ontwerp. Zelfs als deze elementen enigszins vloeiend zijn als onderdeel van een responsieve website-build (wat ze zouden moeten zijn), zal er een grens zijn aan hoe flexibel ze kunnen zijn.
Als u een website implementeert op een CMS (content management system) en klanten in staat stelt die site te beheren en nieuwe content toe te voegen in de loop van de tijd, zullen de limieten waarvoor u hebt ontworpen, absoluut op de proef worden gesteld. Vertrouw erop dat uw klanten manieren zullen vinden om de website te veranderen waarvan u nooit had gedroomd dat ze die zouden doen. Als je geen rekening hebt gehouden met situaties buiten de ideale omgevingen waarmee je in je ontwerpproces hebt gewerkt, zou de lay-out van die site ernstig in gevaar kunnen komen. Daarom is het vooral belangrijk dat u de hele website-inhoud en de aspecten van de lay-out van de site test voordat u die site start. Hier zijn enkele tips voor hoe u dit kunt doen.
Beeldformaten testen
De meest voorkomende manier waarop mensen de lay-out van hun website doorbreken, is ongetwijfeld het toevoegen van afbeeldingen van ongepaste grootte (dit is ook de manier waarop ze een negatieve invloed hebben op de algehele prestaties van een site en leiden tot trage downloadsnelheden). Dit omvat afbeeldingen die te groot zijn, evenals afbeeldingen die te klein zijn om te werken zoals bedoeld in uw website.
Zelfs als u CSS gebruikt om de grootte van deze afbeeldingen in uw lay-out te forceren, zullen afbeeldingen die helemaal niet overeenstemmen met uw oorspronkelijke specificaties voor de site, problemen veroorzaken. Als de afmetingen van een afbeelding niet correct zijn, kan uw CSS dat beeld dwingen om weer te geven met de juiste breedte en hoogte, maar de afbeelding zelf en de beeldverhouding kunnen vervormd zijn. Dat zal zeker een negatief effect hebben op de uitstraling van uw site, aangezien een te klein beeld "opgeblazen" zal worden en kwaliteit zal verliezen. Een afbeelding die te groot is en kleiner is gemaakt met CSS, ziet er goed uit en behoudt de kwaliteit, maar de bestandsgrootte kan onredelijk groot zijn voor hoe deze wordt gebruikt.
Zorg ervoor dat u bij het testen van uw website afbeeldingen toevoegt die buiten de door u beoogde scope vallen. Voeg CSS en responsieve beeldtechnieken toe die deze uitdagingen aanpakken door het formaat van de afbeelding aan te passen of, in het geval van een onjuiste beeldverhouding, ook te overwegen om zoiets als de CSS-klemproperty te gebruiken om de afbeelding bij te knippen.
Andere media testen
Behalve afbeeldingen, test u ook andere media zoals video's op uw site en bekijkt u hoe die elementen in uw opmaak verschijnen met verschillende waarden voor formaat en beeldverhouding. Overweeg nogmaals de responsieve aard van uw site en hoe deze zal werken voor verschillende apparaat- en schermformaten.
Teksten van teksten testen
Na afbeeldingen is het volgende websitegebied dat de meeste problemen veroorzaakt met live websites die door niet-webprofessionals worden beheerd, tekstkoppen. Dit zijn de (zogenaamd) korte tekstregels die vaak de inhoud van een pagina of een sectie op die pagina beginnen. De tekst boven deze paragraaf met de tekst 'Teksten testen' is daar een voorbeeld van.
Als u een site heeft ontworpen die geschikt is voor een rubriek zoals deze:
"Teksten voor tekst testen"
Maar uw klant gebruikt de CMS om een artikel toe te voegen met een kop als volgt:
"Teksten van teksten testen op verschillende webpagina's, allemaal met vereisten voor verschillende formaten en gebruikersbehoeften"
Dan kan uw lay-out niet in staat zijn om al die extra tekst netjes op te bergen. Net zoals je zou moeten testen, test je afbeeldingen en media door items toe te voegen die ver buiten de formaten vallen waarvoor je initieel hebt ontworpen, dus moet je dat doen met tekstkoppen om ervoor te zorgen dat ze flexibel genoeg zijn om zelfs ultra-lange lijnen zoals de één hierboven.
Teksten in tekst testen
Blijf op het onderwerp van de tekst, u zult ook verschillende tekstlengtes willen testen voor de hoofdinhoud op pagina's. Dit omvat tekst die heel, heel lang is en tekst die heel, heel kort is - wat eigenlijk het probleem kan zijn dat veel paginalay-outs veroorzaakt.
Omdat webpagina's van nature groter worden in verhouding tot de hoogte van de tekst die ze bevatten, worden pagina's met veel tekst meestal alleen in de gewenste hoogte geschaald. Tenzij u de hoogte van de pagina hebt beperkt (die u zou niet doe als je wilt dat je pagina flexibel is), dan mag extra tekst geen probleem vormen. Te weinig tekst is een ander probleem - en het is er een die veel ontwerpers vergeten te testen in hun ontwerpproces.
Te weinig tekst kan een pagina onvolledig of zelfs verbroken laten, dus zorg ervoor dat uw pagina-inhoud wordt geschaald om te zien wat er in die instanties gebeurt en voer de nodige aanpassingen door in de CSS van uw site om die situaties te verwerken.
Zoom testen op pagina
Mensen met een oogproblemen kunnen de Page Zoom-functie van een webbrowser gebruiken om de grootte van uw webpagina te vergroten. Als iemand een aanzienlijk deel inzoomt, kan uw lay-out breken. Dit is een van de redenen waarom u misschien EM's wilt gebruiken als meeteenheid voor de lettergroottes van uw website en voor uw mediaquery's. Omdat EM's een relatieve maateenheid zijn (op basis van de standaardtekstgrootte van die browser), zijn ze meer bevorderlijk voor soepele, flexibele websitelay-outs.
Test uw website op paginazoom en stop niet alleen op een of twee zoomniveaus.Zoom uw site op en neer op verschillende niveaus om ervoor te zorgen dat uw pagina's reageren zoals bedoeld.
Vergeet de downloadsnelheid en prestaties niet
Terwijl u test op de indelingsimplicaties van klantbeslissingen, vergeet dan niet om ook aandacht te besteden aan de impact die die beslissingen hebben op de prestaties van een site. De afbeeldingen en inhoud die deze clients toevoegen, kunnen de downloadsnelheid van een site belemmeren en de algemene bruikbaarheid van de site ernstig aantasten. Plan de impact van deze toevoegingen en werk mee aan het ontwikkelingsproces om deze effecten te minimaliseren.
Als uw website wordt gebouwd met een prestatiebudget, deelt u deze informatie met uw klanten en laat u zien hoe u een webpagina kunt testen op prestatiestatistieken. Leg hen uit hoe belangrijk het is om deze vastgestelde drempels voor paginaformaat en downloadsnelheid te handhaven en laat hen zien hoe de toevoegingen die ze maken de site als geheel kunnen beïnvloeden. Neem de tijd om ze te trainen om de site goed te laten werken en er goed uit te zien. Over het onderwerp van training …
Clienttraining is essentieel
Het is belangrijk om de afbeeldingen, tekst en andere pagina-elementen van uw site te testen en stijlen te maken die verantwoordelijk zijn voor extreme gevallen, maar dat is nooit een vervanging voor clienttraining. Uw werk om een site te beveiligen moet een aanvulling zijn op de tijd die u besteedt aan het trainen van uw klanten hoe zij op een effectieve manier voor hun site kunnen zorgen en beheren. Uiteindelijk zal een goed opgeleide klant die zijn verantwoordelijkheden begrijpt en de impact van de beslissingen die hij op een site neemt, van onschatbare waarde zijn voor uw inspanningen om die site te laten werken en er op zijn best uit te zien.