17 April 2008, geplaatst in XHTML door Davy
Johan (Wolfr) heeft het nieuwe design van zijn blog Wolf’s Little Store deze week gelanceerd. Vriend Dieter heeft hierop al zijn mening geventileerd. De conversaties over dat nieuwe design zijn jammer genoeg verspreid, maar ik wou toch nog even inpikken op een conversatie op Twitter gisterenavond.
Wolf zegt dat de inhoudtafel op de homepage tabulaire data is. Ik ben het daar niet helemaal mee eens.
Waaruit bestaat zijn homepage? Uit een overzicht van alle artikels die op zijn blog zijn gepost. Technisch gesproken kan je dat wel in tabelvorm gieten, maar volgens mij kan je het eleganter oplossen.
Zo ziet de huidige markup eruit:
<table cellspacing="0" cellpadding="0" id="grid">
<tr>
<td class="date"><p>April 16, 2008</p></td>
<td class="category">
<ul class="post-categories">
<li><a href="" title="" rel="category tag"></a></li>
</ul>
</td>
<td><h2><a href="" rel="bookmark" title=""></a></h2></td>
</tr>
</table>
Eerste bedenkingen:
- Waarom zou je de datum in
<p> tag plaatsen?
- Waarom categorieën in
<ul> als je maar 1 categorie telkens gaat gebruiken?
- Waarom een tabel?
Waarom geen tabel?
Wanneer ik de CSS uitschakel en ik de broncode lineair overloop, dan krijg ik nu:
- datum
- categorie
- titel
Dit voelt niet goed aan. De titel is belangrijker dan de datum en de categorie, en dus zou die eerst moeten komen.
Een andere bedenking die ik me maak is: hoe zal de homepage zal weergegeven worden op mobile devices. Tabelrendering lijkt me door de kleine schermen minder evident.
Daarom zou ik met deze oplossing op de proppen komen:
<ul id="articles">
<li>
<h2><a href="" rel="bookmark" title=""></a></h2>
<p class="meta">
On <span class="date">April 16, 2008</span> in
<a href="" rel="category tag">Category</a>
</p>
</li>
</ul>
Via negatieve text-indent, en absolute positionering van de date en link, kan je de woorden ‘on’ en ‘in’ verbergen op de frontend.
Je zou zelfs een <ol> (ordered list) kunnen gebruiken, omdat het kan beschouwd worden als een numerieke opsomming van de artikels.
Een andere mogelijkheid is via een definition list, waarbij er een relatie bestaat tussen de titel van het artikel en de meta data:
<dl id="articles">
<dt><h2><a href="" rel="bookmark" title=""></a></h2></dt>
<dd class="date">April 16, 2008</dd>
<dd class="category">
<a href="" title="" rel="category tag">inspiration</a>
</dd>
</dl>
Niet alleen wordt de markup compacter, ook wanneer je CSS uitschakelt, leest het iets natuurlijker.
Via CSS kan je dan uiteraard identiek dezelfde visuele tabel creëren.
In HTML kan je meestal een probleem op verschillende manieren benaderen. Het is alleen kwestie van alle opties te overwegen en uitmaken wat een goeie manier is en wat de betere manier.
Minimal design is 1 ding, minimale markup iets anders.
21 Maart 2008, geplaatst in Webdesign door Davy
Woensdag hebben we met het ganse Marlon team de 3de editie van de BeCommerce Awards bijgewoond. Omdat we wel trots zijn op De Kleine Zebra webshop hadden we die als case ingestuurd.
Verloren moeite zo bleek. Blijkbaar maken enkel de grote namen kans om een van de awards in de wacht te slepen:
Business-to-Business
Dell (Gold award)
Business-to-customer
- Club Med (Gold award)
- Brantano (Silver award)
- Neckermann (Bronze award)
Volgens de jury werd beoordeeld op gebruikersgemak, algemene indruk van de website, bestelprocedure en tweetaligheid. Alleen jammer dat de voorzitter van BeCommerce niet tweetalig bleek te zijn.
De hele award uitreiking verliep eigenlijk een beetje rommelig. Op geen enkel moment werden er screenshots van de winnaars getoond, zodat je dus geen beeld kon vormen van waarom die als winnaar uit de bus kwamen.
Ach ja, het zou me niet verbaasd hebben als die sites eerst gerangschikt werden volgens omzet en dat in grote mate de winnaars heeft bepaald. Op die manier kunnen ze natuurlijk, net zoals de vorige jaren, met grote namen naar buiten komen.
Sommige winnaars waren wel terecht, zoals Dell, maar de Dell site en het concept kan je moeilijk werk van eigen bodem beschouwen en dus hadden ze bij het Belgische label BeCommerce beter lokalere projecten beloond.
Het galadiner achteraf was ook niet al te speciaal. Gelukkig maar dat wij met onze bende er toch nog een leuke avond van gemaakt hebben.
18 December 2007, geplaatst in Webdesign door Davy
Vaak wagen printdesigners zich aan de wondere wereld van het webdesign. Alleen beseffen ze in de meeste gevallen niet de fundamentele verschillen tussen beide werelden. Bij printdesign zijn er bepaalde constanten. Een brochure, boek of magazine ziet er zo uit, met dat lettertype, die grootte en opmaak. Bij het web ligt dat anders: verschillende browsers, lettergroottes, schermresoluties,… Allemaal parameters waar je als designer weinig controle over hebt.
Dus vandaar deze tips, verzameld uit eigen frustraties bij het verwerken van enkele van die designs.
Webdesign is geen printdesign
Webdesign is een vak apart, en heeft zijn eigen karakteristieken. Het heeft dus geen enkele zin om een website eruit te laten zien als een boek, magazine, brochure of ander printproduct. Een website ziet er best van al uit als een website. Lijkt logisch, maar dat is blijkbaar al een eerste drempel voor printdesigners. Probeer er dus eerst achter te komen hoe goede websites er tegenwoordig uitzien en leer de beperkingen van HTML kennen.
Flash is passé
De printsector is toch wel eerder bekend om een vrij traag evoluerende sector te zijn. Hun technieken zijn de laatste jaren ook wel hevig gemoderniseerd, maar toch evolueert het veel minder snel dan de webdesignsector. Zo zweren nog veel printdesigners bij Flash intro’s, navigatie in Flash of zelfs volledige Flash websites.
Mijn ervaring is dat mensen zo snel mogelijk informatie willen. Ze willen geen complexe interfaces met animaties of spielereien. Vermijd elke barrière die mensen afschrikken, of verhinderen om snel hun doel te bereiken.
Flashnavigatie was misschien 5 jaar geleden trendy, maar de tijden zijn veranderd. Flash is ook tijdrovend wanneer je er navigaties of websites moet in ontwikkelen. Wat je in HTML op een 5-tal minuten kan, duurt in Flash misschien 5 uren.
Uiteraard is Flash wel voor andere toepassingen een uitstekende technologie, zoals multimediatoepassingen met video en audio, maar voor interactiviteit op websiteniveau kan je beter gebruik maken van webstandaarden zoals XHTML, CSS en Javascript.
Hou rekening met uitzonderingen
Zoals ik al zei in de inleiding moet je bij webdesign rekening houden met verschillende parameters. Je kan er dus niet van uitgaan dat wat je ontwerpt ook zo ervaren wordt door de eindgebruiker. Welke browser gebruiken ze? Gebruiken ze grotere lettergroottes voor een betere leesbaarheid? Bekijken ze de site op kleinere schermen van mobiele toestellen?
Het is een zeer abstracte wetenschap en je moet al die factoren kunnen incalculeren en proberen op te vangen. Het is dus onmogelijk om pixel perfecte designs te maken. Zeker vaste hoogtes voor tekstblokken zijn dus uit den boze.
Hou er rekening mee dat er vaak meer content op een site geplaatst wordt, dan je oorspronkelijk voorzien had.
Lettertypekeuze
Als je toch Flash gebruikt, dan zijn geschreefde en cursieve letters niet aanbevolen. Ze werken storend en zijn moeilijk leesbaar. Ook te dunne letters moet je zeker vermijden. Een bijkomend nadeel van Flash is dat de tekst niet kan vergroot worden, dus dan is de lettertypekeuze zeker belangrijk.
Voor HTML kan je geen speciale lettertypes gebruiken en dien je gebruik te maken van een van de standaardlettertypes. Voor kortere tekstelementen kan je eventueel wel van image replacement gebruik maken. Probeer in je designs ook de anti-aliasing van de letters uit te schakelen, omdat het dan een realistischere weergave geeft van het eindproduct.
Als je gebruik maakt van exotische lettertypes, zorg dan dat de lettertypes meegeleverd worden bij het design. Let er ook op dat ze niet alleen op Mac werken, want in de webwereld wordt in tegenstelling tot de printsector veel gebruik gemaakt van PC’s.
Het is ook niet nodig om exact dezelfde fonts te gebruiken in je offline campagnemateriaal als op de website. Zo kan je even goed in dezelfde stijl blijven met andere fonts.
Softwarepakketten
De verleiding is natuurlijk groot om in je vertrouwde softwarepakket te ontwerpen, wat in de meeste gevallen InDesign zal zijn. Toch kan je beter gebruik maken van programma’s als Photoshop, of eventueel Illustrator. Dat maakt het makkelijker voor diegene die je ontwerp moeten slicen, want webdesigners gebruiken praktisch nooit Indesign. Je kan wel exporteren naar PDF, maar dat is alles behalve praktisch en zeker geen perfect bronmateriaal.
Webformulieren
Formulieren hebben een vrij standaard uitzicht over de verschillende browsers. Kom dus niet op de proppen met mooi ogende, maar onuitvoerbare designs voor formulieren.
Voorbeelden van goede webformulieren kan je vinden in de Wufoo Form Template & CSS Design gallery.
Conclusie
Uiteraard wil ik printdesigners niet in een slecht daglicht plaatsen met dit artikel, maar het is opvallend dat ze vaak niet genoeg op de hoogte zijn van de beperkingen die wij dagelijks moeten omzeilen. Als iemand van jullie nog meer tips wil geven, of ervaringen wil delen, doe maar gerust.
6 December 2007, geplaatst in CSS door Davy
Firefox gebruikers weten vast en zeker dat bij het aanklikken van een link er een dotted border rond de link verschijnt.
Als je image-replacement toepast op een link, aan de hand van een negatieve text-indent (Phark methode), dan zie je zo’n border verschijnen over de hele negatieve breedte, zoals op volgende websites:
Dit is echter heel simpel te vermijden:
h1 a {
text-indent: -999em;
overflow: hidden;
}
De overflow: hidden; zorgt ervoor dat die border slechts beperkt blijft tot het gewenste klikbare gedeelte.