Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving
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,
Tientallen foto’s in één klap stofvrij maken!
11 Sep 2008•Wie met een digitale reflexcamera foto’s neemt, krijgt ongetwijfeld wel eens last van stof op de sensor. Heel vervelend is dat, want het zorgt voor kleine maar zichtbare vlekjes op je digitale foto’s. De afbeelding hieronder illustreert dat:
De sensor schoonmaken is dan uiteraard aangeraden, maar ondertussen zit je wel met tientallen of honderden bevlekte digitale foto’s. Onbegonnen werk om die allemaal manueel te gaan retoucheren.
Adobe Camera Raw
Gelukkig staan de vlekjes op elke foto altijd op exact dezelfde plaats. Dat maakt het makkelijk om de veelheid aan foto’s in één bewerking stofvrij te maken. De Adobe Camera Raw plugin van Photoshop CS3 helpt je hierbij.
Stap 1: Open je foto’s in Camera Raw
Open Photoshop CS3 en gebruik het menu ‘Bestand’ > ‘Bladeren’ om Adobe Bridge op te starten. In Bridge blader je naar de juiste map en selecteer je alle besmette foto’s. Het maakt niet uit of dat jpg of raw bestanden zijn.
Daarna kies je voor ‘Bestand’ > ‘Openen in Camera Raw’.
Het Camera Raw dialoogvenster verschijnt en hoewel er slechts 1 van de foto’s uitgelicht is voor bewerking, zie je aan de linkerkant toch een thumbnail van alle daarnet geselecteerde foto’s.
Stap 2: Zoomen & retoucheren
Zoom in op het stofvlekje op je foto door gebruik te maken van het Zoomen gereedschap.
Vervolgens activeer je het gereedschap Retoucheren en klik je éénmaal midden op de vlek. Photoshop retoucheert nu het vlekje automatisch terwijl je een rode en een groene cirkel te zien krijgt.
De rode cirkel duidt de plaats aan die Photoshop onderzoekt op vlekken. De groene cirkel toont je waar Photoshop de informatie vindt waarmee de vlek uit de rode cirkel weggeretoucheerd kan worden. De pixels uit de groene cirkel doen dus dienst als kloonbron voor de pixels uit de rode cirkel.
Stap 3: Verfijn je retoucheerwerk
Wil je andere pixels als kloonbron kiezen, verplaats dan gerust de groene cirkel. Gebruik de regelaar bij ‘Straal’ om de cirkeltjes groter of kleiner te maken. Het beste resultaat bekom je doorgaans door de rode cirkel net iets groter te maken dan het te retoucheren vlekje. Wil je je foto bekijken zonder de cirkeltjes te zien, vink dan ‘Bedekking tonen’ af. De knop ‘Alles wissen’ wist de cirkeltjes en daarmee ook het retoucheerwerk van Photoshop.
Stap 4 (optioneel): Bijkomende vlekjes verwijderen
Herhaal de bovenstaande stappen (2 en 3) indien nodig om meerdere vlekjes te verwijderen.
Stap 5: Synchroniseren!
Zo, je eerste foto is nu vlekvrij. Om de vlekken ook van de andere foto’s te verwijderen kan je links bovenaan in Camera Raw op de knop ‘Alles selecteren’ klikken. Hiermee activeer je alle geopende foto’s. Klik nu op ‘Synchroniseren’. Een dialoogvenstertje komt tevoorschijn dat je vraagt welke bewerkingen je wil synchroniseren met alle actieve foto’s.
Kies uit de keuzelijst de voorinstelling ‘Vlekken verwijderen’ en klik op ‘Ok’. Photoshop past nu je bewerking toe op alle foto’s en voilà: alle foto’s zijn meteen verlost van vlekken!
Stap 6: Verifiëren
Eventueel kan je de foto’s één voor één overlopen door op hun thumbnails te klikken aan de linkerkant van het Camera Raw venster. Zo kan je verifiëren of het retoucheren overal goed is verlopen. Verplaats de groene cirkel als je hier en daar wat wil bijsturen per foto.
Stap 7: Opslaan
Vervolgens klik je rechts onderaan op de ‘Gereed’ knop en klaar is kees!
Categorieën: Photoshop,
Top vijf nieuwe functies voor aangekondigde Adobe Photoshop CS4
5 Sep 2008•Adobe heeft op z’n website laten weten dat het Creative Suite 4 zal aankondigen in een webuitzending op 23 september. Meer dan waarschijnlijk wordt er dus in 2009 een nieuwe versie van Photoshop op de wereld losgelaten. “It’s going to be brilliant”, is wat Adobe er zelf over te zeggen heeft.
Dat zullen we dan wel zien zeker? Het logo dat nu de registratiepagina voor de CS4 webuitzending ontsiert, schept alvast geen hoge verwachtingen:
Hoe dan ook: ik hou van Photoshop en een nieuw versienummer betekent nieuwe functies die de digitale fotobewerking makkelijker moeten maken. Als ik zo vrij mag zijn enkele suggesties te doen, hier is mijn persoonlijk wenslijstje voor Photoshop CS4:
1. Een masker per slimme filter
Het maakt niet uit hoeveel filters je toepast op een slim object, Photoshop creërt altijd 1 masker per object. Zou het niet fantastisch zijn als Photoshop CS4 die logica kon omkeren en ons 1 masker per slimme filter zou toelaten? Pas dan benader je echt de kracht en flexibiliteit van de zo geliefde aanpassingslagen. (Edit: Hier vind je trouwens een tussenoplossing!)
2. Betere grafische gebruikersomgeving (GUI)
De grafische gebruikersomgeving van Photoshop bulkt letterlijk uit van de regelaars, keuzelijsten, balken, menu’s, venstertjes, knopjes, subknopjes, subsubknopjes en subsubsubknopjes. En met elke nieuwe versie wordt het probleem alleen maar erger. Sommige zaken zitten dan nog eens op de meest onlogische plaatsen verborgen. Resultaat: het programma is een hel om aan te leren. Een goede hersituering van de GUI zou zeker en vast een verademing betekenen.
3. Visuele aanpassingen & alles omkeerbaar
In die zin is Adobe Camera Raw eigenlijk veel eigentijdser: bij alles wat je uitvoert zie je tegelijkertijd het resultaat toegepast op je foto. Ook de ‘meer-of-minder-regelaars’ werken heel intuïtief. Daarbovenop is elke bewerking altijd omkeerbaar. Het gevaar dat je je originele foto dus verprutst is onbestaande.
4. Maskers in Adobe Camera Raw
Adobe Camera Raw (ACR) is om bovenvermelde redenen prachtig. Jammergenoeg kan je er wel geen lokale aanpassingen doen aan je foto: elke bewerking wordt altijd op je volledige afbeelding toegepast. De inbreng van maskers in ACR zou dus wel eens een hit kunnen zijn. Of nog beter: een volledige integratie van Camera Raw in Photoshop zelf!
5. Een betere ruisreductiefilter
De filters om ruis van digitale foto’s te verwijderen werken eigenlijk helemaal niet goed. Een betere ruisreductiefilter is zeker geen overbodige luxe. Vooral omdat het ook een pak meer mogelijkheden zou bieden voor het verbeteren van sterk onderbelichte foto’s.
Welke nieuwe mogelijkheden zou jij het liefste zien opduiken in Photoshop CS4?
Categorieën: Photoshop,
Hoe lok je nieuwe klanten?
2 Sep 2008•Schotel ze een herkenbare vervelende situatie voor! Ik weet niet of het al lang op hun website te vinden is, maar 37signals heeft me zonet wel kunnen overtuigen met een knap staaltje marketing. Heel eenvoudig nochtans: op de startpagina van hun website vind je ergens onderstaande, toch vrij herkenbare afbeelding:
En wat als je klikt op de link? Dan verhuis je gewoon naar een pagina waar ze Backpack promoten, hun software die je helpt orde op zaken te stellen in een wereld van gele post-its, volgekladde kalenders en oeverloos heen-en-weer gemail… Nice!
Categorieën: Marketing, Opinies, Webomgeving,
Wat je zelf doet doe je daarom niet beter
29 Aug 2008•Tot voor kort bood ik mijn klanten een eigen handgemaakt contentmanagementsysteem (cms) aan. Het was meer dan degelijke software, ontwikkeld in PHP, die de webmaster op een intuïtieve manier toeliet de website van zijn organisatie te onderhouden met teksten, foto’s en andere multimedia.
De keuze om, anno 2003, te beginnen met de ontwikkeling van een eigen cms was vrij snel gemaakt. Er was in die tijd nu eenmaal geen software op de markt die voldeed aan mijn (ik dacht nochtans vrij voor de hand liggende) eisen. Ik wilde een cms dat:
- gebruiksvriendelijk was voor mijn klanten
- krachtig genoeg was om ook voor grotere bedrijven oplossingen te bieden
- me websites liet ontwerpen in alle vrijheid
“Wat niet bestaat, maak ik dan maar zelf”, was mijn redenering, gestuwd door de groeiende vraag van klanten naar onderhoudbare websites. Maar een cms programmeren is één ding, het constant up-to-date brengen met features die de klant de mogelijkheid geven z’n website een moderne uitstraling te doen geven is iets anders.
Door de jaren heen stak ik meer en meer tijd in het aanpassen van het cms, iets wat voor een freelancer als mezelf natuurlijk geen sinecure is: er valt altijd wel zoveel te doen, te leren en te onderhouden. En een cms ontwikkelen was nu niet bepaald het perspectief dat ik voor ogen had toen ik de stap in de freelancewereld zette.
Zelfreflectie
En dan komt er plots een moment waarop je beseft dat je eigenlijk veel betere software achternaholt. Want ondertussen was het internetlandschap natuurlijk al grondig veranderd. Waar een cms in 2003 een luxe was, is het nu een noodzaak geworden voor elke website. Het resultaat is dat er vandaag de dag tientallen uitstekende contentmanagementsystemen op de vrije markt zijn, die wél voldoen aan mijn bovenstaande eisen. Systemen waar soms veel geld en mankracht achter zit, gemaakt door firma’s of community’s die van een cms hun core business hebben gemaakt.
Tijd voor de volgende stap
En de volgende stap kan je al raden: met wat misplaatste melancholie besliste ik enkele maanden geleden om mijn eigengebreide cms vaarwel te zeggen en over te stappen op één van de vele verkrijgbare alternatieven. Het vergde wat tijd om me het cms eigen te maken, maar het was één van de beste beslissingen die ik tot nu toe genomen heb:
- De tijd die ik uitspaar met het ontwikkelen van features voor mijn eigen cms kan ik investeren in nieuwe, meer uitdagende projecten.
- Ik kan mijn klanten een cms aanbieden dat voldoet aan eerder vermelde eisen: gebruiksvriendelijk, krachtig, flexibel.
- Ik kan mijn klanten de zekerheid bieden van een cms dat op grote schaal getest en gebruikt wordt.
- Een team ontwikkelaars concentreert zich nine-to-five op nieuwe features voor het cms zodat ik met vertrouwen aan mijn klanten kan vertellen dat hun software altijd up-to-date zal zijn.
- ...
Sommige beslissingen liggen zo voor de hand dat je jezelf de vraag stelt waarom je ze niet vroeger hebt genomen. Over een win-win situatie gesproken.
Categorieën: ExpressionEngine, Opinies,
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,
Over 
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
- Responsive web design
- Designer meetup Gent part 2
- Mobile first ontwerpen
- Sleepstreet: mijn eerste responsive ontwerp
- Ontwerpen zonder bladspiegel
Laatste reacties
- brand names op Responsive web design
- technical marketing op Mobile first ontwerpen
- Veerle op Responsive web design
- Christiane Peschen op Ontwerpen zonder bladspiegel
- ine op Responsive web design
Categorieën
Alle • ExpressionEngine • iPhone • Transistor • Marketing • SEO • Ontwerp • Typografie • Ontwikkeling • jQuery • PHP • Zend Framework • Opinies • Overige • Photoshop • Webomgeving