Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving
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.
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.
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.
Categorieën: Ontwerp, Opinies, Webomgeving,
Een handvol uitstekende concertposters
8 dec 2008•Aesthetic Apparatus is al jarenlang een van mijn favorieten wanneer het op vormgeving, typografie en zeefdrukwerk aankomt. Vooral tussen hun concertposters zitten enkele pareltjes.
Nu hebben ze blijkbaar ook een reeks gigantisch grote affiches ontworpen voor het Belgische Stella Artois. De affiches werden opgehangen in de Londense metro. Hier is een voorsmaakje.
Tientallen meer voorbeelden van affiches en ander grafisch werk vind je op de website van het Amerikaanse Aesthetic Apparatus. Ongetwijfeld een grote inspiratiebron voor velen.
Categorieën: Ontwerp, Typografie,
Zwarte tekst op een witte achtergrond
2 nov 2008•Als je even snel honderden jaren boekdrukkunst en typografie overloopt, dan merk je gauw dat het gros van de gedrukte boeken bestaat uit zwarte tekst op wit papier. Dat duidelijke contrast tussen de letterkleur en de achtergrondkleur zorgt er natuurlijk voor dat we aangenaam kunnen lezen.
Ook de letterkleur van tekst die op schermen gelezen wordt, contrasteert best sterk met de achtergrondkleur om makkelijk leesbaar te zijn. Maar is zwarte tekst op een witte achtergrond ook hier de heilige graal? Mogen we met andere woorden deze typografische waarheid van honderden jaren boekdrukkunst zomaar overnemen op het web? Als we de websites van het gros van de Belgische kranten bekijken, dan lijkt dat zo te zijn.
DE PROEF OP DE SOM
Maar laat ons toch maar even op onderzoek uitgaan. Hier vind je een webpagina waarop tweemaal dezelfde tekst te lezen is. Aan de linkerkant zie je zwarte tekst (#000 voor de techneuten onder ons) op een witte achtergrond, aan de rechterkant donkergrijze tekst (#444) op een witte achtergrond. Welke vind jij het aangenaamst lezen?
Mijn gevoel neigt alvast naar de rechterkant. In het linker stuk lijkt het contrast tussen letter en achtergrond té drastisch. De rechter tekst staat zachter en leest naar mijn mening een stuk comfortabeler.
WAAR ZIT DAN HET VERSCHIL?
Wat in de wereld van drukwerk een bewezen waarheid is, lijkt op het web niet te werken. Een wit blad papier kan je nu eenmaal niet vergelijken met een wit vlak op een computerscherm. Als je even de gordijnen dicht doet en het licht uitlaat dan snap je wel wat ik bedoel: een scherm straalt licht uit; opdringerig licht.
Dat licht zorgt er voor dat het contrast tussen schermwit en schermzwart groter is dan dat tussen papierwit en drukzwart. En téveel contrast blijkt de leesbaarheid niet te bevorderen.
Conclusie
Webteksten laten we best niet té fel laten contrasteren met de achtergrond. We kiezen dus beter voor grijs-wit ten nadele van zwart-wit. Uiteraard werkt om het even welke andere kleurcombinatie die een aanvaardbaar contrast oplevert even goed. Hier zijn enkele goede online voorbeelden in verschillende kleurcombinaties. Ook eervolle vermeldingen voor onder andere deze Belgische dagbladen: De TIjd, Het Belang Van Limburg en Le Soir.
Niet geheel terzijde: alles hangt natuurlijk in grote mate af van de lichtomstandigheden van zowel het scherm (de meeste schermen kan je dimmen) als de omgeving. Als de zon op je scherm invalt, dan lijkt een zwart-wit scenario altijd beter leesbaar dan wanneer je in het donker op je computerscherm staart.
Wat vertelt jouw gevoel en je persoonlijke leeservaring op het web over deze typografische kwestie? Ik hoor graag je mening.
Categorieën: Ontwerp, Typografie, Opinies, Webomgeving,
Een stijlvol zoekformulier met xhtml en css
23 sep 2008•Toen ik aan deze website werkte, wilde ik een zoekfunctie die qua ontwerp mooi aansloot bij de rest van de hoofding. Het resultaat kan je zien in de rechter bovenhoek. In deze blogpost kan je lezen hoe de zoekfunctie vormgegeven werd met html en css.
De zoekfunctie is uiteraard een html formulier en daar zit nu net het addertje onder het gras: elke browser heeft zo zijn eigen manier om knoppen en tekstveldjes weer te geven.
Omdat ik het uitzicht van de zoekfunctie in alle grote hedendaagse browsers identiek wilde, heb ik de knop en het tekstveldje vervangen door een afbeelding. Beeldjes worden door elke browser wel identiek weergegeven natuurlijk.
Hieronder vind je de xhtml. Je zal zien dat die vrij eenvoudig is en enkel de basiselementen bevat voor een standaard zoekformulier. Beweeg je muis over het gele vlak om de volledige code te zien:
<div id="omgeving">
<div id="search_box">
<form method="post" action="#">
<fieldset>
<input type="text" id="keywords" name="keywords" />
<input type="image" src="zoeken-knop.gif" id="submit" alt="Zoeken" title="Zoeken" />
</fieldset>
</form>
</div>
</div>
De buitenste div (‘omgeving’) zorgt straks voor de donkere achtergrond. De submitknop vervangen we zoals je nu al kan zien door een beeldje (zoeken-knop.gif). De bovenstaande htmlcode ziet er zo uit in Firefox:
Niet erg verrassend natuurlijk. De kern van de vormgeving zit in de css. Om de ruimte voor en na het formulier en de fieldset te doen verdwijnen zette ik de padding van die elementen eerst op 0.
form, fieldset {
padding: 0;
}
De donkere fijne rand die je rondom het formulier ziet is altijd zichtbaar bij een fieldset maar is eenvoudig te verwijderen:
form, fieldset {
padding: 0;
border: 0;
}
De rand en de witruimte rondom de fieldset en het formulier zijn nu verdwenen. Vervelend is wel nog dat op Mac tekstveldjes omrand worden met een blauwe lijn wanneer je ze aanklikt:
Dit effect past niet in de huidige vormgeving van de website. Gelukkig kunnen we het snel verwijderen: (Weet wat je doet! Zie lezersreacties op dit artikel.)
input {
outline: 0;
}
Het donkere vlak waarin het zoekformulier zit is vormgegeven met hele eenvoudige css:
div#omgeving {
background-color: #333;
height: 80px;
width: 400px;
padding: 30px 0 0 40px;
}
Dit leverde me het volgende resultaat op:
Het tekstvakje zelf moet natuurlijk nog aangepast worden. Het ziet er veel te wit uit en heeft een lelijke rand die dan nog eens verschilt van browser tot browser. Mijn eerste idee was om het tekstveldje zelf via css te gaan stylen, maar op die manier kreeg ik het beeldje van het vergrootglas nooit in het tekstveld zelf. Daarbij kwam dat er nog altijd veel verschillen merkbaar waren tussen de verschillende browsers. Daarom heb ik de volledige zoekfunctie in een div gestopt en aan die div een achtergrondafbeelding meegegeven:
div#search_box {
width: 146px;
height: 22px;
background: url(zoeken-achtergrond.gif);
margin: 0;
}
Hieronder zie je het resultaat. Omdat de search_box niet breed genoeg is om zowel het invulveld als de submitknop weer te geven, springt de submitknop naar een volgende regel.
Ik moest het invulveld dus kleiner maken. Via de background en border properties zorgde ik er ook voor dat de witte achtergrond en de randen weg zijn. Het invulveld is er nu nog wel samen met al zijn functionaliteit, maar is eigenlijk onzichtbaar geworden.
div#search_box #keywords {
width: 110px;
background: none;
border: none;
}
Dit is nu ons resultaat:
Door de submitknop wat css mee te geven kon ik die ook op z’n plaats doen springen. De float zorgt er voor dat de knop naast het invulveld kan blijven staan.
div#search_box #submit {
float: right;
margin: 5px 9px 0 0;
width: 15px;
height: 14px;
}
Zo ziet het formulier er nu uit wanneer er een zoekterm ingegeven wordt:
Het formulier ziet er nu goed uit, alleen staat de tekst daar nog een beetje te zweven. Die moet nog een aantal pixels opgeschoven worden om mooi uitgelijnd te zijn met de submitknop en het invulveld. Ook mag het corps wat groter. Door hier ook een float mee te geven blijven de twee elementen mooi naast elkaar staan en mogen ze indien nodig mekaar een beetje overlappen.
div#search_box #keywords {
float: left;
padding: 0;
margin: 3px 0 0 6px;
width: 110px;
background: none;
border: none;
font-size: .8em;
}
En dan is dit ons resultaat! Ik was er best tevreden mee en het ziet er identiek uit op Internet Explorer 7 (Windows), Firefox 3 (Windows en Mac), Safari 3 (Windows en Mac), Chrome 1 (Windows) en Opera 9 (Windows):
Alle grote browsers geven het formulier dus identiek weer… behalve Internet Explorer 6 (Win) natuurlijk. Die is nu eenmaal altijd de boosdoener. IE6 geeft het formulier zo weer:
De search_box div lijkt te hoog te zijn waardoor IE6 het achtergrondbeeldje herhaalt. Dit is eenvoudig op te lossen door ‘no-repeat’ aan de background mee te geven:
div#search_box {
width: 146px;
height: 22px;
background: url(zoeken-achtergrond.gif) no-repeat top left;
margin: 0;
}
Het formulier ziet er niet alleen goed uit, het blijft ook heel functioneel en gebruiksvriendelijk. Hier kan je het formulier in actie zien, in de broncode vind je nog eens alle code op een rijtje.
Categorieën: Ontwerp, Ontwikkeling,
Chrome: wat telt is het web, niet de browser
13 sep 2008•Als je het multimediawereldje een beetje volgt, dan weet je het ongetwijfeld al: Google heeft vorige week zijn eigen browser op de wereld losgelaten. Het programma heet Google Chrome en is gratis beschikbaar.
Ik hou van het minimalistische ontwerp van Chrome. Als je surft op het web, dan zijn de webpagina’s belangrijk en niet de browser waarmee je surft. En hoe minder toeters en bellen er aanwezig zijn, des te gebruiksvriendelijker het programma is.
Hoewel Chrome op zich een vrij klassieke browser is, merk je toch al snel dat Google enkele basisfuncties van een browser heruitgevonden heeft. De meeste daarvan zijn gericht op gebruiksvriendelijkheid. En maar goed ook. Hier zijn alvast drie kenmerken van het programma die ik in dat opzicht opvallend vind.
1. De statusbalk
De statusbalk pikt in de meeste browsers een tiental pixels van je schermruimte in. Dat is vrij opdringering als je bedenkt dat er eigenlijk maar op twee momenten belangrijke informatie in te zien is: wanneer je met je muis over een link beweegt en wanneer je een nieuwe webpagina inlaadt.
In het eerste geval toont de statusbalk je de url waarheen je doorverwezen wordt als je op de link klikt. In het andere geval kan je zien of de webpagina volledig geladen is of niet, en of er überhaupt browseractiviteit is. (Dat is in vele gevallen interessant: soms klik je op een link of een knop en lijkt het alsof er niets gebeurt. In de statusbalk van de browser kan je zien of dat wel degelijk zo is.)
Chrome heeft geen statusbalk. Alleen in de twee bovenstaande gevallen verschijnt en verdwijnt ze automatisch. Ze is er dus enkel wanneer je ze nodig hebt. Op die manier is er meer plaats voor wat echt telt: de website.
2. De adresbalk
Chrome werkt heel functioneel en intuïtief. Een voorbeeldje: de meeste browsers hebben bovenaan een adresbalk en een zoekbalk. In de adresbalk vul je een url in en in de zoekbalk een zoekterm om op het internet naar websites te gaan zoeken. De afbeelding hieronder demonstreert dat: een screenshot van Internet Explorer 7. (Let ook op al die verwarrende knoppen, balken en opties. In vergelijking met IE7 is Chrome grafisch wel tien keer duidelijker!)
In Chrome is de adresbalk tegelijk de zoekbalk. Typ “fietswinkel gent” in en je krijgt meteen de Google zoekresultaten te zien. Typ “gent.be” in en je komt meteen op de website terecht van stad Gent. Minder balken en knoppen betekent minder verwarring.
3. Popupvensters
Zowat alle browsers hebben een ingebouwde functie die vervelende reclame en popups automatisch tegenhoudt. Fantastisch natuurlijk, maar niet elke popup is slecht en op die manier krijgen we nooit de popupvensters te zien die we misschien wel willen zien.
Als Chrome een popup blokkeert, dan verschijnt er onderaan een balkje met de titel van de popuppagina. Je kan het kleinood vastnemen en verslepen om de popup te zien te krijgen. De gebruiker beslist dus of hij een popup wil zien of niet, en niet de browser.
Google Chrome legt dus duidelijk de nadruk op gebruiksvriendelijkheid met een intuïtief minimalistisch ontwerp. Heb jij Google Chrome al eens uitgetest? Wat zijn jouw bevindingen?
Categorieën: Ontwerp, Opinies, Webomgeving,
Een staaltje van goed ontwerp
26 aug 2008•Tijdens het ontwerpen en ontwikkelen van websites staat één begrip altijd centraal: gebruiksvriendelijkheid. Op een ideale website weet zowel de grootste internaut als de onwetendste digibeet altijd wat hem te doen staat. De gebruiker moet in een oogopslag weten waar hij de voor hem relevante informatie kan terugvinden.
In die zin kan het als webontwikkelaar gevaarlijk zijn om nieuwe technologieën te implementeren op een website. Wat niet gekend is, zorgt snel voor verwarring. Tenzij het zó intuïtief werkt natuurlijk, dat je meteen snapt wat je te doen staat.
Sinds enige tijd heeft Apple interessante functionaliteit aan de zoekfunctie van zijn website toegevoegd. Wanneer je de eerste letters van een zoekterm ingeeft, verschijnt vrijwel meteen een overzichtelijk menu met zoekresultaten. Allemaal in een heel mooie vormgeving die het gebruiksgemak ondersteunt.
De kracht van het systeem zit vooral in de kleine dingen. Zo werkt de zoekfunctie ook nog op de oude manier. Dat is belangrijk, want stel dat je als gebruiker niet echt snapt wat daar aan de hand is, dan kan je de nieuwe functionaliteit gewoon negeren. Je typt net als vroeger je zoekterm in en drukt op enter om doorverwezen te worden naar een zoekresultatenpagina.
De gebruiker die de analogie met de alombekende html-keuzelijst doorziet, zal ook aangenaam verrast zijn: je kan het nieuwe zoekmenu op dezelfde manier besturen als een html-keuzelijst, met je muis of via de pijltjestoetsen van je klavier.
Een staaltje van goed interfaceontwerp dus: de gebruiker snapt zonder bijkomende uitleg meteen wat van hem verwacht wordt. Trouwens, goede vormgeving krijgt altijd navolging: sinds enkele dagen is dezelfde zoekfunctionaliteit toegevoegd aan de website van Adobe, weliswaar voorlopig nog alleen op de Engelstalige versie.
Ere wie ere toekomt
Als ik het goed voorheb, dan was Google Suggest een van de eerste webpagina’s waarop de live keuzelijst in het zoekveldje geïntegreerd was. Typ een zoekterm en je kan het nog altijd in werking zien. Googles versie is een stukje primitiever, maar was in die tijd (2006 dacht ik) heel vernieuwend en ophefmakend.
Na Google zag je hier en daar al een zogenaamde ‘ajax livesearch’ (vergeef me het jargon) opduiken, maar geen enkele was in mijn ogen zo goed uitgewerkt als die van Apple.
Categorieën: Ontwerp, Opinies, Webomgeving,
OptiPNG: een korte handleiding
14 aug 2008•Zoals in mijn vorige blogpost verteld, is Photoshop niet altijd ideaal wanneer je png-afbeeldingen wil optimaliseren voor het web. Toen ik aan de TheHotSeat-website werkte leverde OptiPNG in dat opzicht verbazingwekkende resultaten op. Het tooltje slaagde erin de Photoshop-png-bestanden gemiddeld zo’n 10% ‘lichter’ te maken. En dat zonder zichtbaar kwaliteitsverlies.
OptiPNG is een opensourceprogramma dat je gratis kan downloaden en gebruiken. Het is beschikbaar voor PC, Linux en Mac. De versie die ik in deze handleiding demonstreer, is de Mac 0.6-versie. Werk je niet op Mac, dan kan je met wat creativiteit en gezond verstand mijn uitleg zeker ook volgen op het platform dat jij gebruikt.
OptiPNG installeren
Na het downloaden en unzippen/untarren (gewoon dubbelklikken, je Mac doet de rest) krijg je de OptiPNG-bronbestanden in een mapje genaamd ‘optipng-0.6’ op je computer, waarschijnlijk in je ‘downloads’-map. Blader naar je ‘Programma’s’ > ‘Hulpprogramma’s’-map en start Terminal op. We gaan OptiPNG jammer genoeg moeten installeren en bedienen via Terminal omdat er geen GUI voorhanden is. Maar vrees niet, het is vrij eenvoudig.
In Terminal blader je eerst naar het OptiPNG source-mapje op je harde schijf via het commando:
cd downloads/optipng-0.6/src/
Start dan het makebestand uit de scripts map:
make -f scripts/gcc.mak
Als je niet voldoende rechten hebt, dan krijg je waarschijnlijk een foutmelding te zien. Probeer dan:
sudo make -f scripts/gcc.mak
en geef daarna je OSX-wachtwoord in.
Daarna installeer je het programma via hetzelfde makebestand:
make -f scripts/gcc.mak install
OptiPNG gebruiken
Om een png-bestand te comprimeren kan je gebruik maken van het ‘cd’-commando in Terminal om te bladeren naar het mapje waar het png-beeldje zich bevindt, bijvoorbeeld:
cd downloads/png-beeldjes/
Vervolgens laat je OptiPNG zijn werk doen:
optipng Afbeelding1.png
OptiPNG probeert nu tientallen png-compressiemethodes uit. De methode die het kleinste png-beeldje oplevert, zal uiteindelijk ook toegepast worden op je bronbestand (Afbeelding1.png in het voorbeeld hierboven). Het geoptimaliseerde bestand zal het oorspronkelijke bronbestand overschrijven. Wil je liever een back-up van je bronbestand? Gebruik dan:
optipng -k bestand1.png
Voilà, zo eenvoudig is het. Je kan OptiPNG trouwens ook gebruiken om gif-, tiff-, bmp- of pnm-bestanden om te zetten naar png. Voor meer compressieopties raad ik je aan de OptiPNG-handleiding eens na te kijken. Zo kan je bijvoorbeeld ook kiezen voor simulaties, interliniëringopties instellen, het kleurenpalet beheren of het niveau van compressie instellen.
Over 
TheHotSeat is Thomas Byttebier, freelance webontwikkelaar en grafisch ontwerper.
Op deze website blog ik over alles wat met webdesign en digitale vormgeving te maken heeft. Meer informatie over mij.
RSS Feed TheHotSeatLaatste blog posts
- Upgraden naar ExpressionEngine 2.0
- Hoe het ontwerp van Transistor tot stand kwam
- Transistor: radio op de iPhone
- Over HTML5
- Scrollen in het oneindige
Laatste reacties
- Hendrik op Upgraden naar ExpressionEngine…
- Thomas Byttebier op Hoe het ontwerp van Transistor…
- Thomas Byttebier op Upgraden naar ExpressionEngine…
- Kevin op Upgraden naar ExpressionEngine…
- Frederik Severijns op Hoe het ontwerp van Transistor…
Categorieën
Alle • ExpressionEngine • iPhone • Transistor • Marketing • SEO • Ontwerp • Typografie • Ontwikkeling • jQuery • PHP • Zend Framework • Opinies • Overige • Photoshop • Webomgeving