Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving
Hou de foto’s op je website haarscherp
22 okt 2008•Heb je ooit al eens een foto moeten verkleinen om die op een website te plaatsen? Misschien heb je dan gemerkt dat de verkleinde foto er plots een stuk onscherper uitziet. Het is een veelvoorkomende kwestie die vrij eenvoudig te verhelpen is.
Het probleem
Om te verkleinen ga je het dialoogvenstertje ‘Afbeeldingsgrootte’ (Image size) oproepen. Je wijzigt daarna de pixelafmetingen en klaar is kees. Van een foto als deze, bekom je dan een resultaat als dit:
Ziet er goed uit? Het kan beter! Zeker als je het origineel bekijkt dan valt op dat de letters een stuk waziger zijn. Dat komt omdat Photoshop tijdens het verkleinen niet echt rekening heeft gehouden met de randen die in je foto voorkomen. Nu is het net het randcontrast in je foto die de scherpte gaat bepalen.
De oplossing
Gelukkig kunnen we Photoshop op een andere manier de foto laten verkleinen. Als je even terugkeert naar het dialoogvenstertje ‘Afbeeldingsgrootte’ (Image size) dan zal je zien dat je onderaan het berekeningsalgorithme van Photoshop kan wijzigen bij ‘Nieuwe beeldpixels berekenen’. Als je wil verkleinen dan kies je hier best voor de optie ‘Bicubisch scherper (meest geschikt voor reductie)’.
Het resultaat
Het resultaat van de nieuwe verkleining kan je hieronder zien. De foto is stukken scherper en ziet er naar mijn mening veel beter uit. (Een snelle vergelijking.)
Opslaan voor web en apparaten
De meeste webdesigners gaan hun foto’s verkleinen in het dialoogvenster ‘Opslaan voor web en apparaten’ (Save for web and devices). Ook hier kan je het algorithme dat Photoshop gebruikt tijdens de verkleining gaan instellen op ‘bicubisch scherper’. De screenshot hieronder demonstreert dat:
Te scherp?
Vind je dat je foto er nu te scherp uitziet? Verklein dan op de oude manier (met het standaard ingestelde bicubisch algorithme), en ga net voor het opslaan je foto nog even verscherpen via ‘Filter > Verscherpen > Slim verscherpen’ (Filter > Sharpen > Smart sharpen). Nu heb je de hoeveelheid verscherping helemaal zelf in de hand.
Categorieën: Photoshop,
Suf surfen op zondag
19 okt 2008•Heb web spuwt een onafgebroken stroom van informatie onze kant uit. Vaak is het pompen of verzuipen. Hier is een korte selectie van wat ik in de afgelopen week hoogst interessant vond.
Online productvideo’s
Vooreerst even als aanvulling op mijn post over online productvideo’s: Soundcloud heeft naast een mooi logo ook een mooie productvideo online gezet. Je kan het filmpje niet missen op hun homepage. De video van Silverback (onderaan de pagina) lijkt dan weer een stuk minder interessant. De video duurt te lang en is helemaal niet to the point.
Verder over video
Eric Velleman van Accessbility heeft het in dit artikel over hoe je video op een toegankelijke manier op je website kan plaatsen. Helemaal bovenaan het artikel kan je een voorbeeldvideo zien van de Nederlandse spoorwegmaatschappij NS, inclusief captions en audiobeschrijving voor blinden en doven. (Via)
Ode aan Josef Müller-Brockmann
Via Wilson Miners blog kwam ik terecht op een Flickr set met posters van de uitstekende Zwitserse ontwerper Josef Müller-Brockmann. Gewapend met Helvetica, eenvoudige vormen en een bijzonder goed oog voor evenwicht en spatiëring was Müller-Brockmann één van de voorvechters van een gridgebruik in de grafische vormgeving.
Wat als je sterft?
Josef Müller-Brockmann overleed helaas in de vorige eeuw. En over doden gesproken: Tech Rader heeft in de afgelopen week een opmerkelijk artikel online geplaatst (in het Engels weliswaar). Het geeft antwoorden op de vraag wat er gebeurt met je ‘online profiel’ als je sterft. Waar gaan je websiteprofielen, blogcommentaren, websites en foto’s naar toe?
Rotis FF
Sander Baumann breide dinsdag een vervolg aan zijn interessante Font Series, een reeks blogposts waarin de specialist in bewegwijzering foto’s post van gevonden typografie. Deze keer laat Baumann foto’s zien van de Rotis Font Family. Een aanrader.
Categorieën: Webomgeving,
Online productvideo’s: tips en voorbeelden
15 okt 2008•Video op het web is hot. YouTube maakte het medium enkele jaren geleden ongemeen populair en is tot op de dag van vandaag een van de meest bezochte websites wereldwijd.
Maar ook steeds meer bedrijven gebruiken videofilmpjes om hun producten online voor te stellen. Op het Belgische internet is er nog niets van te merken, maar in Noord-Amerika is het een duidelijke trend. Vooral softwarefirma’s lijken ervoor te vallen.
Hieronder zie je een still uit een promotiefilmpje voor de iPod Touch van Apple, waarin een vriendelijke dame je kernachtig alle uitleg verschaft over het toestel.
Hoewel de meeste van die filmpjes vaak eenvoudig in elkaar zitten, zijn ze heel effectief. In een mum van tijd kunnen ze een potentiële klant overtuigen van de kracht van het aangeboden product. De klant zelf kan zien hoe het product werkt en aanvoelt, en hoeft daar niet eens zijn stoel voor uit.
Hieronder vind je enkele bijkomende voorbeelden samen met wat tips voor de ondernemers onder jullie die een testrit op hun eigen website wel zien zitten.
1. Hou het kort en krachtig
De aandacht van bezoekers verslapt snel. Grijp ze dus bij de keel voor ze wegklikken. Lange inleidingen en uitweidingen zijn uit den boze. Kom meteen ter zake. Niet alles over je product moet aan bod komen, enkel de echte verkoopsargumenten die twijfelaars over de streep kunnen trekken.
Hoewel Apples iPod Touchfilmpje (screenshot hierboven) professioneel overkomt, duurt het volgens mij té lang om de aandacht vast te houden.
In dat opzicht levert Vara Software beter werk. Op de productpagina van ScreenFlow krijg je een uitstekend introductiefilmpje te zien. In een minuutje tijd krijg je van de presentator alle belangrijke productinformatie te horen en kan je je een idee vormen van hoe de software werkt.
2. Zorg voor een alternatief voor je filmpje
Campaign Monitor (screenshot hieronder) overloopt gevat de belangrijkste kenmerken van zijn software meteen op de homepagina aan de hand van tekst en foto’s. Daarnaast vind je een link naar een introductievideo als aanvulling op de tekstuele presentatie van het product. Niet iedereen wil jouw video zien, zorg dan ook altijd voor een alternatief.
3. Niet te opdringerig als het even kan
Laat je bezoekers zelf beslissen of ze je filmpje willen zien of niet. Start daarom de beelden niet automatisch wanneer je webpagina geladen wordt maar voorzie een duidelijke knop: ‘Bekijk het voorstellingsfilmpje’. Dat is ook wat DropBox heeft gedaan, zoals je kan zien in onderstaande screenshot. Nu kan de bezoeker zich voorbereiden op dat filmpje: volume aanpassen, radio wat stiller, even checken of de baas niet in de buurt is…
4. Integreer het filmpje in je bestaande website
37signals toont helemaal bovenaan op de introductiepagina van hun product HighRise (screenshot hieronder) een foto van de werkruimte van het programma. Die foto verandert in een filmpje wanneer je erop klikt. Lekker makkelijk.
5. Verzacht de downloadtijd
Maar bovenstaande integratie heeft ook nog een ander niet te onderschatten voordeel op het vlak van gebruiksvriendelijkheid: je geeft je bezoeker iets te lezen terwijl het filmpje laadt. Ook tijdens minder interessante videopassages valt er altijd wat op te pikken van de tekst rondom het filmpje.
Ook Vara Software past die techniek toe, bewust of onbewust. Onder hun ScreenFlowfilmpje kan je wat bijkomende informatie over het programma lezen. Zo ben je minder snel geneigd weg te klikken terwijl het filmpje laadt.
Wat zijn jullie ervaringen met productvideo’s op het web. Kijk je ernaar of vind je ze overbodig? Vind je het een vervelende trend of net heel bruikbaar? Zou je het overwegen zo’n filmpje op je eigen website te plaatsen? Ik ben benieuwd naar jullie reacties!
Categorieën: Marketing, Opinies, Webomgeving,
Tien tips om hoog te scoren op Google
8 okt 2008•Iedereen wil zijn eigen website hoog zien staan tussen de zoekresultaten van Google. En terecht natuurlijk. Het heeft geen zin om tijd en geld te investeren in een website die niet gevonden wordt. Googles zoekmachine is vaak de poort tot online succes.
Hier zijn tien tips om hoog te scoren op de koning der zoekmachines. Het zijn eenvoudig toe te passen regels die deels gefundeerd zijn op mijn eigen ondervinding, deels door mensen van Google zelf zijn bevestigd. Succes gegarandeerd dus.
1. Ken je eigen zoektermen
Ga op zoek naar de zoektermen die mensen ingeven wanneer ze jouw website of jouw organisatie willen vinden. Als je een tandartspraktijk runt, weet dan dat de meeste mensen zoeken naar een ‘tandarts in gent’ en niet zozeer naar een ‘tandheelkundige in gent’.
2. Gebruik die zoektermen op je website
Dit is ongetwijfeld het meest essentiële punt: zorg er voor dat die belangrijkste zoektermen als tekst op je website voorkomen. Het staat best wel chique om uit te pakken als een tandheelkundige, maar Jan met de pet zoekt naar een tandarts, dus vooral dat woord moet op de belangrijkste plaatsen van je website te vinden zijn. Gebruik niet enkel vakjargon als je website ook door niet-ingewijden gevonden moet worden.
3. Gebruik html-tags correct
Google ziet je website niet zoals jij je website ziet. Googles robot leest enkel de code achter jouw website. Dus is het belangrijk dat je de html-code van je website goed opbouwt en de html-tags gebruikt waarvoor ze oorspronkelijk bedoeld zijn.
Als je even je html-handboekje erbij haalt dan zal je snel merken dat er een volgorde van belangrijkheid in de html-tags zit: eerst de title tag, dan de header tags (h1, h2, h3…) enzovoort. Het is op basis van die volgorde dat ook Google kan ontdekken welke woorden de belangrijkste zijn van jouw website.
Ook de description metatag is belangrijk: het is de inhoud van deze tag die vaak getoond wordt in de zoekresultaten. Andere metatags zoals keywords zijn helemaal niet meer belangrijk.
4. Kies een beschrijvende domeinnaam
Een domeinnaam als http://www.tandarts-gent.be zal door Google ongetwijfeld relevanter geacht worden wanneer iemand zoekt naar een ‘tandarts in gent’ dan http://www.debonne.be.
Maar de url van elke pagina op je website zelf is ook heel belangrijk. Stel je even voor dat onze tandarts een pagina op zijn website heeft over zijn excellente tandenservice. Een url als http://www.tandarts-gent.be/excellente-tandenservice is natuurlijk veel zoekmachinevriendelijker dan een onleesbaar gedrocht als http://www.tandarts-gent.be/index.php?id=234&article=931
5. Zorg voor links naar jouw website
Dit is een heel belangrijk punt: hoe meer links er naar jouw website te vinden zijn op het internet, des te belangrijker Google jouw website acht. En belangrijker is relevanter, redeneert de zoekgigant, dus wordt je website hoger in de zoekresultaten geplaatst.
6. En als het even kan: kernwoordrijke links
Ook de woorden die de link naar jouw website vormen zijn belangrijk voor Google. Een link op een blog als ‘klik hier voor een tandarts in Gent’ is minder interessant dan een link als ‘dit is mijn tandarts in Gent’. ‘Klik hier’ zegt niets over jouw website.
7. Stap af van oude technologieën
Frames zijn uit den boze. Google heeft het er moeilijk mee.
8. Tekst leest makkelijkst
Ook Flashanimaties, afbeeldingen en Quicktimefilmpjes zijn moeilijker te lezen door de Googlerobot dan gewone tekst. Als je dus per se een Flashwebsite wil, zorg dan voor een semantische en tekstrijke oplossing. Als je veel afbeeldingen gebruikt, maak dan gebruik van de alt tag. Laat je website dus bouwen door een professional met kennis van zaken.
9. Zet je organisatie op Google Maps
Google houdt natuurlijk van zijn eigen diensten en als het even kan zijn de eerste zoekresultaten websites van organisaties die via het bedrijvencentrum van Google zijn opgenomen op Google Maps. Je registreren is gratis, dus wat houdt je nog tegen? Andere interessante hulpmiddelen vind je in Googles centrum voor webmasters. Hier kan je bijvoorbeeld al je website manueel aan de Google-index toevoegen. Zeker en vast een goed begin!
10. Zorg voor regelmatige updates
Dit is eigenlijk een afgeleide van alle bovenstaande tips. Op een website die leeft komt regelmatig nieuwe interessante inhoud te staan. Dat is niet alleen tekst waarnaar gezocht kan worden, het is ook voer voor discussie op het internet: op blogs, forums, nieuwssites en bladwijzersites zou er dus wel eens een link naar je website gepost kunnen worden. En je weet ondertussen waarom die zo belangrijk zijn!
Probeer Google geen loer te draaien
Tot slot nog dit: het heeft geen zin om op je startpagina als enige tekst 20 keer ‘tandarts gent’ te plaatsen. Ook trucjes als zwarte tekst op een zwarte achtergrond plaatsen (onleesbaar voor mensen, leesbaar voor robots) zijn uit den boze. Google is slim genoeg om dit te doorzien waardoor je riskeert geschrapt te worden uit Googles index.
Ik wens je alvast veel succes met de zoekmachineoptimalisatie van je eigen website. Als je bovenstaande 10 regels opvolgt zul je zien dat je na enkele weken al een indrukwekkende Googleboost mag verwachten. Heb je zelf nog wat tips? Laat ze zeker weten als een reactie op deze blogpost.
Categorieën: Marketing, SEO, Webomgeving,
Een onmogelijke sneltoets in Photoshop
1 okt 2008•Het penseel (brush) is ongetwijfeld één van de Photoshopgereedschappen die ik het meeste gebruik. Het laat me toe om perfecte maskers te schilderen. Jammergenoeg zijn de sneltoetsen om het penseel groter en kleiner te maken niet beschikbaar voor de Belgische azertygebruiker. En dus moeten wij onze muisaanwijzer telkens naar de penselenpalet of de optiebalk verhuizen om die functionaliteit te activeren terwijl we het penseel gebruiken.
Vierkante haakjes
De sneltoetsen om in Photoshop de penseeldiameter te vergroten en te verkleinen zijn de vierkante haakjes ([ en ]). Maar als je op een azertyklavier de vierkante haakjes wil typen, dan kan dat niet zonder er eerst een hulptoets voor in te drukken (alt of shift-alt meestal). En dan begint het probleem: als je alt indrukt terwijl het penseel actief is, dan activeer je het pipet. Het is dus onmogelijk om een vierkant haakje te typen terwijl het penseel actief is!
Sneltoetsen wijzigen
Het lijkt er dus op dat Adobe de azertygebruiker vergeten is. Gelukkig kan je in Photoshop wel de sneltoetsen aanpassen. Ga naar het menu ‘Bewerken > Sneltoetsen’ (Eng.: ‘Edit > Keyboard shortcuts’) en in het dialoogvenstertje dat nu verschijnt kies je er voor de sneltoetsen voor de gereedschappen te zien. Bijna helemaal onderaan in de lijst (je zal moeten scrollen!) zie je de huidige sneltoetsen voor ‘Penseel verkleinen’ en ‘Penseel vergroten’. Klik op de huidige sneltoets ([ en ]) om een invulvakje te zien verschijnen waar je de sneltoets kan wijzigen.
Penseel verkleinen is bij mij ( geworden en penseel vergroten is ) geworden. Nu kan je je maskers, alfakanalen en selecties schilderen en gebruik maken van de haakjes om heel snel je diameter zelfs tijdens het schilderen aan te passen. En dat is verdomd handig! Als je ook nog even de sneltoetsen voor het verharden (:) en verzachten (;) van het penseel uit het hoofd leert, dan moet je bijna nooit meer in de penselenpalet zijn tijdens het schilderen.
Categorieën: Photoshop,
Een website moet duidelijk zijn
26 sep 2008•Warenhuisketen Delhaize heeft begrepen dat de meeste van hun websitebezoekers op zoek zijn naar informatie over het dichtstbijzijnde supermarktfiliaal. Dus plaatsen ze hun winkelzoekfunctie duidelijk in het zicht en helemaal bovenaan. Perfect!
Maar dan krijg je plots de volgende vreemde vraag voorgeschoteld:
Wat een vraag! Natuurlijk ben ik op zoek naar een winkel in mijn buurt. Moet ik hier dan “ja” invullen? Of toch maar de naam van mijn gemeente? Maar hoe vind ik dan de dichtstbijzijnde winkel die open is op zondag?
Categorieën: Marketing, 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,
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