Iedereen wil een mooie website. Een goede webdesigner weet wat de klant wil, maar niet alle designers houden rekening met de beperkingen die een webbrowser heeft. Daarom is het voor slicers, die de designs 'webklaar' maken, vaak een heuse opdracht om de prachtige lay-out van designers met zo weinig mogelijk opofferingen tot een 'prototype' uit te werken.

Slicen zal voor sommige lezers wel een vrij onbekende term zijn. Wikipedia omschrijft het alsvolgt:

Slicen is het bruikbaar maken van een lay-out.
Het slicen gebeurt door middel van het verdelen van een lay-out in kleine plaatjes zodat deze gebruikt kunnen worden op een webpagina. Dit gebeurt meestal met het programma Adobe Photoshop, maar dit is ook mogelijk met minder bekende fotobewerkingsprogramma's, zoals Fireworks. Wanneer de plaatjes gesliced zijn, oftewel verdeeld in kleine plaatjes, kunnen deze gebruikt worden in een lay-out. De plaatjes worden vervolgens op de webpagina gepositioneerd met CSS. Door de lay-out van een webpagina op deze manier in een website te verwerken, wordt de website snel geladen.

Wat volgt zijn enkele zaken waar de meeste slicers zich aan ergeren als ze een design webklaar moeten maken. Waar de designers volgens de slicers te weinig rekening mee houden of wat weinig meerwaarde maar veel meer werk met zich meebrengt.

Tools of the Trade

Photoshop en Fireworks zijn de standaard programma's die gebruikt worden door webdesigners als het aankomt op het ontwerpen van websites. Het gebeurt echter maar al te vaak dat er designs aangeleverd worden in Illustrator, CorelDraw, Publisher of zelfs de enkele creatieveling die zijn design skills in Powerpoint probeert bot te vieren. Voor slicers is het belangrijk dat ze een bestand aankrijgen dat klaar is voor het omzetten naar een website en ideaal daarvoor zijn bestandsformaten gebaseerd op bitmap (zoals PSD, layered PNG, ...) en niet vectorieel.

Drop shadows

Dropshadows is de ideale manier om diepte te creëren in je design, het probleem is meestal wel dat je om dropshadows te implementeren in een website transparantie (alpha channels) nodig hebt en dat is nu net iets waar Internet Explorer 6 geen kaas van heeft gegeten. Deze sterk verouderde browser ondersteunt geen alpha transparantie in PNG afbeeldingen met als gevolg dat je voor deze browsers een PNGFix moet toepassen wat vaak voor problemen en bugs zorgt. Zo kan het voorkomen dat anchor elementen niet klikbaar zijn boven een transparante layer.

Formulieren

Je kan met formulieren vaak heel mooie dingen, het enige probleem is dat de stijl van form elementen zeer erg afhankelijk is van het besturingssysteem van de browser en dat vaak een mooie form lay-out niet haalbaar is in alle browsers. Ideaal is dat de form elementen zelf zo weinig mogelijk van grafische opmaak voorzien worden maar dat het formulier zelf qua lay-out wordt opgesmukt en extra visuele elementen worden toegevoegd (icons, labels, fieldsets, widgets, ...). Vaak bereik je zo ook een mooi en toch niet al te standaard en saai resultaat.

Verticaal gecentreerde items

Vroeger waren verticaal gecentreerde elementen geen probleem, je kon zonder problemen in een table lay-out de valign property van een cell op 'middle' zetten. Maar aangezien table lay-outs niet meer van deze tijd zijn en tegenwoordig CSS de techniek is voor de lay-out van websites is het verticaal centreren van elementen een stuk moeilijker geworden en niet mogelijk zonder browserhacks.

Laattijdige aanpassingen van het ontwerp

Je bent na veel zweten en zwoegen eindelijk klaar en hebt het meesterwerk van je designer feilloos omgezet in een website prototype. Maar dan gaat de telefoon, men heeft zich bedacht en wil toch nog enkele kleine aanpassingen aan de lay-out doorvoeren. Vaak zijn het voor de designer maar kleine aanpassingen maar voor de slicers is het vaak gewoon deels opnieuw beginnen, een content blok breder of smaller maken is niet altijd erg voor de hand liggend als je al je images al tot op de pixel hebt uitgesneden. Vaak zijn het zulke kleine aanpassingen waardoor je veel tijd verliest.

What the layer?

Een design bestaat meestal uit enkele honderden photoshop layers. Maar waar moet je beginnen als er geen structuur is? Je kan het vergelijken met zoeken naar een speld in een hooiberg, je zal hem uiteindelijk wel vinden maar je verspilt hier enorm veel tijd mee. Niet alleen de hoeveelheid layers maar ook de benaming van layers (of het ontbreken daarvan) kan vaak tot veel verloren tijd leiden.

Bij Inventis maken we gebruik van layer groups en geven we elke layer een duidelijke naam om verschillende elementen van elkaar te onderscheiden waardoor je toch wel kostbare tijd kan winnen.

What to hover?

Hover effecten zijn elementen die maar al te vaak vergeten worden in een design. Regelmatig wordt er een menu uitgewerkt waarbij enkel de default status van een button in wordt weergegeven. Maar buttons hebben meerdere statussen zoals 'active', 'hover' en 'click' en die worden vaak niet in het design opgenomen en overgelaten aan de smaak van de slicer. Wij maken een aparte layer aan voor elke status van het menu. Zo verliest de slicer geen tijd met het zoeken naar de juiste effecten en is de designer tevreden met het eindresultaat.

Transparente afbeeldingen of achtergronden

Transparante afbeeldingen en achtergronden worden niet erg goed ondersteund in Internet Explorer 6, meerbepaald PNG alpha transparantie is niet aanwezig en moet opgevangen worden met extra css en/of javascript hacks. In designs die erg veel gebruik maken van grafische elementen die over mekaar liggen kan je echter niet zonder de alpha transparency van PNG's en zal je dus weer extra tijd moeten steken in het toepassen van PNGFix of andere oplossingen.

Conclusie

Zoals je ziet ondervinden slicers vaak frustraties aan kleine dingen die makkelijk te overkomen zijn als er vanaf het begin van het designproces mee rekening gehouden wordt.

In een reeks volgende blogposts zal ik jullie uitleg geven hoe je bovenstaande en andere browser related issues op een snelle en efficiënte manier kunt oplossen.

Laat zeker even een reactie achter, ik ben benieuwd welke nachtmerries jullie zoal hebben!