You are viewing an old version of my website. Its contents may not be accurate anymore.
It is still here for archival reasons. Here's the latest and up-to-date version.

 
 

Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving

view comments

Links op Twitter

14 Jan 2011

Zoals elke zichzelf respecterende geek ben ik sinds een paar jaar lid van Twitter. Als zelfstandig webdesigner kan ik nu eenmaal niet naar de koffiemachine snellen om wat bij te praten met collega’s. En dan schiet Twitter te hulp: ik vind er mijn dagelijkse dosis virtuele small talk over het designnieuws van de dag.

Wellicht wist je ‘t al: op Twitter kan je berichten plaatsen die uit maximaal 140 tekens bestaan. Wie je volgt, krijgt die dan te zien. Net zoals ik ook de tweets kan lezen van de mensen die ik volg. Het is een fantastische vrije nieuwsdienst.

Maar het is niet allemaal koek en ei. Als ik even mijn twitterstream op en af ga, dan staat er in bijna de helft van alle tweets wel een link naar één of andere opmerkelijke webpagina. Vaak zitten daar interessante dingen tussen (tenminste als je boeiende mensen volgt) maar soms verwijzen die ook wel eens naar de meest onzinnige crap.

Bij een goed ontworpen url in de zin van
http://www.fait-divers.be/cultuur/zang/nieuwe-single-eddy-wally weet je natuurlijk al op voorhand of die webpagina de moeite van het klikken waard is.

Maar niet zo op Twitter. Twittergebruikers hebben de gewoonte hun links door een url-shortener te sleuren: software die een lange url inkort. Zo hebben ze naast de url ook nog plaats om een begeleidende opmerking te schrijven. Bovenstaande link zou er dan zo kunnen uitzien: http://bit.ly/h6p2up. Maar die verkorte urls vertellen me helemaal niets over wat er daar te lezen valt.

Semantisch is anders

En dat is het punt waarover ik het wilde hebben: Twitter zou urls niet mogen laten meetellen in hun tekenlimiet. Alleen dan raken we verlost van die helse url shorteners. Een goedgevormde url vertelt me wat er op die pagina te lezen is. Een url in de zin van http://bit.ly/h6p2up is, met licht gevoel voor overdrijving, de dood van alles waar het semantische web over gaat.

Een meer wetenswaardige post scriptum: Kyle Neath heeft een uitstekend artikel geschreven over url design, op een mooie beschrijvende url: http://warpspire.com/posts/url-design/

4 reacties


view comments

Scrollen in het oneindige

11 Nov 2009

Een paar jaar terug was ik onder de indruk van de manier waarop Google voor Google Reader de klassieke vorm van paginering had herdacht en zelfs onnodig gemaakt.

Hieronder zie je een voorbeeld van een klassieke paginering: op de pagina zie je enkel de eerste items. Wil je meer items zien, dan moet je doorklikken naar de volgende pagina.

screenshot klassieke paginering van readernaut.com

Google Reader gebruikt geen paginering maar maakt gebruik van de scrollbar: wil je meer items zien, dan scroll je gewoon naar onder. Als de scrollbar beneden is, worden nieuwe items aan de pagina toegevoegd.

screenshot google reader

Het is een geniaal eenvoudige oplossing die erg intuïtief werkt en die voor iedereen meteen ook duidelijk is.

Wat goed is, krijgt navolging

Googles vernuftige oplossing heeft sindsdien uiteraard navolging gekregen. Recent nog door Haystack bijvoorbeeld, de nieuwe jobsite van 37signals. Als je er naar beneden scrollt, dan worden nieuwe portfolio’s ingeladen op de pagina. Hoe meer je dus scrollt, hoe langer de pagina wordt. Probeer het maar eens.

screenshot haystack 37signals

Scrollen in het ijle

Maar op de Haystack website lijkt het scrollmechanisme me minder logisch. Als je op zoek bent naar een webdesignbureau uit België, dan ga je waarschijnlijk alle portfolio’s willen afschuimen uit België om zo een juiste keuze te kunnen maken. Je begint dus te scrollen en er komen telkens portfolio’s bij. Dat werkt handig.

Maar na een tijdje ga je je echt wel afvragen hoeveel portfolio’s er nog volgen. Op de Haystack pagina is nergens te zien hoeveel scrollwerk je nog zal hebben om alle portfolio’s uit België te kunnen zien. En dus ben je maar een beetje aan het scrollen in het oneindige.

Bij een klassieke (en goedgebouwde) paginering heb je altijd een idee van hoeveel items er nog volgen. Is er geen paginering dan kan je vaak uit de lengte van de scrollbar afleiden hoe lang de pagina is en dus hoeveel items er waarschijnlijk nog gaan volgen. Maar op de Haystack manier blijft het gissen.

Een oplossing

Een simpele aanduiding van hoeveel portfolio’s nog volgen, zou volgens mij helemaal niet misstaan om het systeem een pak gebruiksvriendelijker te maken. Da’s trouwens ook wat Google Reader doet.

1 reacties


view comments

De Helvetica’s van het internet

29 May 2009

Arial, Verdana en Georgia: het zijn de Helvetica’s van het internet. Overgebruikt, onopvallend en leeggezogen van elke connotatie. Waarom vallen webdesigners altijd terug op deze 3 klassieke lettertypes? Het antwoord is helemaal niet spannend: het zijn de enige fonts die op nagenoeg elke computer geïnstalleerd zijn. En dus is de kans enorm groot dat jij ook deze tekst in Arial ziet, en de titels in Georgia.

Maar als we de aankondiging op de nieuwe Typekit website mogen geloven, dan staan we aan de vooravond van een typografische webrevolutie. Typekit, een online fontbibliotheek, zal het technisch en legaal mogelijk maken om als ontwerper webteksten in een arsenaal aan kwaliteitslettertypes te zetten. De bezoeker krijgt dan steevast het juiste lettertype te zien. Hoe het allemaal in zijn werk zal gaan, kan je lezen op de Typekit blog.

Hoera! Eindelijk zullen ook websites net als boeken, tijdschriften en affiches in prachtige letters verschijnen. Niet via onhandige javascript- of flashtrucjes, maar dankzij het eenvoudige @font-face css-principe. Ik kijk uit naar zoveel moois. Lettervormen die iets vertellen over de inhoud van de website, die een gevoel kunnen versterken en die bijdragen tot een betere ervaring van het internet.

Alleen vrees ik ook de keerzijde van de medaille. Hoelang zal de experimentale fase duren waarin blogs en websites van hobbyisten in de meest onleesbare lettertypes gezet zullen worden? Een Impact voor leestekst en een goedgekozen Comic Sans – dat is toch schoon meneer – voor de invulvelden?

Hoewel Arial, Verdana en Georgia al lang niet meer tot de verbeelding spreken, één ding moeten we ze wel toegeven: ze zijn verdomd goed leesbaar op schermen. Ze leggen de nadruk op de tekst en de inhoud en daar gaat het in de meeste gevallen om.

Het wordt een uitdaging voor iedereen om op een goede manier met de nieuwe mogelijkheden om te gaan. Komt er ooit een dag waarop we met weemoed terugblikken op het oude driefontsinternet?

4 reacties


view comments

Over titels en witruimte

3 May 2009

Op het web is het vaak wat behelpen wanneer het op typografie aankomt. Letters en teksten worden door de verschillende browsers en platformen anders weergegeven. En zowat elke tekst is dan nog eens vrij updatebaar door de webmaster. Als ontwerper is het dan ook moeilijk om webtekst voor elke eindgebruiker met zekerheid mooi vorm te geven.

Neem nu even de titel van dit heel eenvoudig ontwerp voor een nieuwspagina:

mooi gezette titel

De titel ziet er goed uit. Maar wat als een klant via het contentmanagementsysteem van zijn site een langere titel ingeeft? Dan kan er wel eens een typografisch probleempje optreden:

slecht gezette titel

Zoals je ziet verschuift het laatste woord van de titel naar een nieuwe regel. Omdat dat laatste woord heel kort is, bestaat die regel uit teveel witruimte. De titel staat daardoor helemaal niet meer mooi en is minder makkelijk te lezen.

Een oplossing

Shaun Inman schreef al in 2006 een makkelijk te implementeren php-functie die het probleem gedeeltelijk oplost door een harde spatie (non-breaking space) tussen de laatste twee woorden van de titel te plaatsen. Die zorgt er voor dat die twee altijd op dezelfde regel blijven. Het resultaat zie je hieronder:

zelfde titel maar goed gezet

Ongetwijfeld veel beter. Alleen kan het in bepaalde gevallen ook minder goede resultaten opleveren. Als het laatste woord lang genoeg is zoals in het voorbeeld hieronder, dan is het soms niet nodig om de harde spatie te gebruiken die je in het voorbeeld ziet toegepast:

probleempje met widont code

Uiteraard is die laatste titel niet per sé slecht gezet, maar ik hou niet zo van de vele witruimte op beide regels. Ook de volgende situaties komen wel eens voor:

groot probleem met widont code

In dit laatste voorbeeld is de tweede regel langer dan de eerste regel en dat is natuurlijk best helemaal te vermijden: het lijken twee titels te zijn, of een titel en een onderschrift.

Een aanpassing

Eén van mijn laatste projecten was het ontwerpen en ontwikkelen van een nieuwswebsite waar dagelijks meerdere artikels gepost worden. Omdat ik vrij veel met een van de bovenstaande titelproblemen te kampen had, heb ik een kleine en eenvoudige aanpassing aan Inmans php-functie toegevoegd.

Ze laat me toe om een parameter op te geven: bestaat het laatste woord uit minder dan x-aantal tekens dan wordt er automatisch een harde spatie tussen het laatste en het voorlaatste woord geplaatst. Is het laatste woord een lang woord dan kan het dus eventueel alleen op de laatste regel staan.

mooi gezette titel met nice rags code

Ik heb het gevoel dat dit in de meeste gevallen een mooier gezette titel oplevert. Het aantal tekens kan ik hoger instellen wanneer de kop veel ruimte in de breedte inneemt en lager wanneer de titel in een smalle ruimte gezet is.

Wil je het zelf eens proberen op je website? Download gerust de php-functie of de ExpressionEngine plugin. Extra suggesties of aanpassingen zijn trouwens meer dan welkom.

2 reacties


view comments

Een kleine suggestie voor Safari 4

11 Mar 2009

Apple heeft vorige week een publieke bètaversie van Safari 4 op de wereld losgelaten. En dus veert de wereld van webdesigners, vormgevers en Macgebruikers even op.

Onderwerp van discussie is vooral de vernieuwde plaatsing van de tabs zoals je in de screenshot hieronder kan zien. Maar daar ga ik het niet over hebben gezien er al voldoende inkt over is gevloeid.

Tabs in Safari 4

Wachtwoordbeheer

Ik wil wel even een ander onderdeel van de browser uitlichten: dat van het wachtwoordbeheer. Als je net als mezelf door de jaren heen al heel wat online identiteiten hebt verzameld, dan is het een zegen wanneer de browser die gebruikersnaam-wachtwoordcombinatie voor je bijhoudt. Maar de manier waarop Safari dat doet stoort me een beetje.

Stel je het volgende voor: je surft naar een forum waar je een nieuw onderwerp wil starten. Aanmelden is daarvoor noodzakelijk maar het forum heb je al een tijdje niet meer bezocht en dus is het even gissen naar de gebruikersnaam en het wachtwoord waarmee je je indertijd op deze website registreerde.

Je vult in wat je denkt dat juist is en klikt op de Inloggen knop. Hierop stelt Safari je voor je gebruikersnaam-wachtwoordcombinatie te bewaren. Op zich behulpzaam natuurlijk, alleen weet je niet of je ingevulde gegevens wel correct zijn. Safari heeft nu eenmaal de vervelende eigenschap om het loginverzoek pas te verzenden nadat je een antwoord hebt gegeven op zijn prangende vraag. Nu zijn er twee mogelijke verwenselijke scenario’s:

1. Je twijfelt en kiest voor Niet bewaren
Het loginverzoek wordt verzonden naar de website. Je kan inloggen dus de gegevens blijken correct te zijn. Uitstekend nieuws. Alleen heeft Safari je logingegevens uiteraard niet bewaard. Bij het volgende forumbezoek word je dus met hetzelfde probleem geconfronteerd.

2. Je twijfelt maar kiest toch voor Bewaren
Het loginverzoek wordt verzonden maar blijkt fout te zijn. Vervelend want als je wegsurft dan houdt Safari nu wel de foutieve logingegevens bij. Als je volgende week opnieuw op deze website terechtkomt dan staat daar mooi de verkeerde gebruikersnaam-paswoordcombinatie ingevuld voor je.

Toegegeven: je kan die bewaarde gegevens wissen of aanpassen via het voorkeurenmenu van Safari, maar wie houdt zich daar echt mee bezig?

Firefox

De meest elegante oplossing bestaat al een tijdje in Firefox: wanneer je op de Inloggen knop drukt dan wordt het loginverzoek meteen verzonden naar de website. Ondertussen verschijnt bovenaan een balkje dat je vraagt of je de zopas ingevoerde gebruikersnaam-wachtwoordcombinatie wil bewaren.

firefox paswoordbeheer

Als het inloggen succesvol blijkt dan kan je gewoon op Onthouden klikken. En anders klik je op Nooit voor deze website of Niet nu natuurlijk. Eenvoudig maar duidelijk én gebruiksvriendelijk.

Laten dat nu net twee begrippen zijn die Safari hoog in het vaandel draagt.

0 reacties


view comments

Waarschuw je Internet Explorer 6 gebruikers

22 Feb 2009

Een groeiend aantal drukbezochte Noorse websites raadt sinds kort alle Internet Explorer 6 gebruikers aan te upgraden naar een moderne browser. Ze doen dat via een duidelijke waarschuwing die enkel die — weliswaar slinkende — groep gebruikers treft.

Now we’re talking! Internet Explorer 6 kwam op de markt in augustus 2001. In internettermen is dat een eeuwigheid geleden. De browser is hopeloos verouderd, maakt gebruikers kwetsbaar voor allerhande digitale rotzooi en neemt een serieus loopje met webstandaarden. Het web zonder IE6 zou om vele redenen een betere plaats zijn.

Vandaar een oproep aan mijn collega webdesigners: laat ons de Belgische Internet Explorer 6 gebruikers van hetzelfde laken een pak geven via een upgradeboodschap op zoveel mogelijk Belgische websites. Upgraden naar een nieuwere versie van hun browser kunnen ze gratis en ze hebben er alleen maar gewin mee.

Code voor een upgradeboodschap

Hoe toon je een boodschap enkel aan gebruikers van IE6 of lager? Het kan eenvoudig via een zogenaamde conditional comment. Alles wat tussen de code in vierkante haken staat is alleen voor het oog van die surfers zichtbaar:

<!--[if lte IE 6]>
  <
div id="ie6waarschuwing">
    <
h4>Een belangrijke waarschuwing</h4>
    <
p>Je gebruikt momenteel een erg oud programma (of <em>browser</em>) om deze website te bezoeken
Het is voor je eigen veiligheid en gebruiksgemak raadzaam je browser te upgraden of een nieuwe browser te installeren
De laatste nieuwe versie van Internet Explorer kan je gratis installeren via <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">deze pagina op de Microsoft website</a>. 
Daarnaast kan je er ook voor opteren een gratis en uitstekend alternatief voor Internet Explorer te installeren: <a href="http://www.mozilla.com/firefox/">Firefox</a>, <a href="http://www.opera.com/">Opera</aof <a href="http://www.apple.com/safari/">Safari</abijvoorbeeldZeker doen!</p>
  </
div>
<!
[endif]--> 

Zoals je ziet werd het blokje code in een div geplaatst en daardoor is het makkelijk vorm te geven via css.

ie6 waarschuwing

Verspreid de boodschap!

Hoe meer sites zo’n boodschap laten zien hoe hoger het effect natuurlijk. Dus bloggers start het bloggen, twitteraars start het twitteren en ontwikkelaars start het coderen. Via Wolfr’s oorspronkelijke Goodbye IE6 blogpost kwamen we te weten dat webdesigners en/of bloggers Netlash, Lensco.be, Audience, MouseOver, Norio, Cubus en Ardville alvast meedoen. Hopelijk breidt de lijst snel uit. Laat zeker iets weten als je mee doet!

En euh… ben je zelf één van die 20% surfende Belgen die in een hoekje achter een kamerplant wel eens durft te surfen met een archaïsche browser uit het stenen internettijdperk? Dan weet je wat je te doen staat: hier is de link met upgradeinformatie. Of je kan natuurlijk één van de vele gratis en uitstekende alternatieven uitproberen.

5 reacties


view comments

Het schuifregister: de scrollbar als leidraad

13 Jan 2009

Elke dag opnieuw word ik via mijn RSS-lezer overstelpt door interessante artikels en blogs op het internet. De meeste daarvan skim ik heel snel en oppervlakkig. Maar als ik een artikel echt aandachtig wil lezen, dan maakt mijn oog eerst even een snelle sprong naar de schuifbalk. Die geeft me een idee over de lengte van het artikel. Het is de lengte van de tekst en mijn beschikbare vrije tijd die me helpen beslissen of ik het artikel meteen ga lezen of zal bookmarken onder ‘interessant’ om er later op terug te komen.

Geen goede waardemeter

Maar uit de hoogte van de schuifbalk is niet altijd even makkelijk af te leiden uit hoeveel tekst een blogpost bestaat. Een schuifbalk laat je scrollen tot het einde van een webpagina en dat is doorgaans een stukje verder dan het einde van de blogpost. Denk maar aan die blogs waar lezersreacties te zien zijn onderaan elke blogpost. Hoe meer reacties, hoe onjuister de verhouding tussen de lengte van de blogpost en de hoogte van de scrollbar.

Een schuifbalk moet schuiven

De schuifbalk is dus op zich geen goede waardemeter voor de lengte van de tekst. Geen verwijt aan het adres van de scrollbalk natuurlijk want die is in de eerste plaats ontworpen om te scrollen, en daar is ze ook verdomd goed in. In het licht van gebruiksvriendelijkheid en goed ontwerp zou het trouwens verkeerd zijn om de schuifbalk andere functies te gaan toedichten. Dat zou enkel leiden tot verwarring.

Mag het iets meer zijn?

Maar dat wil niet zeggen dat we haar huidige vorm en functie niet mogen versterken. In de Chrome browser heeft Google een vernuftig idee geïmplementeerd: als je een zoekactie start dan toont Chrome je aan de hand van markeringen in zijn schuifbalk waar die zoekterm voorkomt op de huidige pagina.

screenshot van Chromes scrollbar tijdens het zoeken

Het werkt verbazend intuïtief en de schuifbalk wordt er zeker niet minder gebruiksvriendelijk op. De gele streepjes versterken enkel de oorspronkelijke functie van de schuifbalk: navigeren naar een onzichtbaar stuk van de huidige webpagina. Waar je vroeger in het ongewisse verschoof, weet je nu perfect waar je het balkje naar toe moet schuiven.

Webdesigners

Als webdesigners hebben we natuurlijk - en gelukkig maar - geen controle over de schuifbalk zelf, maar Google Chrome heeft me wel aan het denken gezet. Ik ben heus niet de enige die graag het overzicht behoudt wanneer ik op een website kom en ik kan me inbeelden dat veel mensen gebruik maken van de schuifbalk om te zien hoe lang een tekst is vooraleer ze die beginnen te lezen. Of om snel een overzicht te krijgen van de volledige webpagina.

Digitaal duimregister

Misschien kunnen we net naast de schuifbalk markeringen aanbrengen die aanduiden waar zich de kernelementen van een webpagina bevinden: de blogpost en de reacties, of de hoofdstukken van een verhaal. Hieronder vind je een hele eenvoudige schets van het idee - een soort van online duimregister.

schets van het schuifregister

Door de schuifbalk te verplaatsen naar de markeringen kom je meteen op het juiste stuk van de webpagina terecht. De markeringen zelf zijn uiteraard altijd onbeweeglijk en zichtbaar, het maakt niet uit of je je bovenaan of onderaan de webpagina bevindt.

Over de technische uitwerking heb ik nog niet nagedacht maar als het mogelijk is, dan zal dat waarschijnlijk via een combinatie van absolute positionering en javascript zijn. Ik ben er wel van overtuigd dat dit schuifregister een hulp kan zijn voor vele online lezers. Vooral zij die op zoek zijn naar het soort van overzicht dat van nature wel vaker aanwezig is in de traditionele gedrukte media: boeken, kranten en tijdschriften.

2 reacties


Over logo TheHotSeat 

foto Thomas Byttebier pijltje TheHotSeat is Thomas Byttebier, freelance webdesigner en user interface designer.
Op deze website blog ik over alles wat met webdesign en digitale vormgeving te maken heeft. Meer informatie over mij. @bytte op Twitter.

RSS Feed TheHotSeatLaatste blog posts

Laatste reacties

Categorieën

AlleExpressionEngineiPhoneTransistorMarketingSEOOntwerpTypografieOntwikkelingjQueryPHPZend FrameworkOpiniesOverigePhotoshopWebomgeving