Hier vind je nog een paar voorbeelden. Grunge designs, tag clouds, Flickr, MySpace, ik had het allemaal niet verwacht. Kingsfield Church heeft als toepasselijke pay-off: “Connecting with god, each other and the world”. Mooi om te zien dat ook kerken meegaan met de snelle ontwikkelingen op het web.

Ik dacht dat vrijwel niemand ze meer gebruikte maar niets bleek minder waar. Toen ik op de website van de voetbalclubs Ajax en FC Utrecht had gekeken viel me op dat die twee websites toch wel verdacht veel op elkaar lijken. De content op hun splashpagina’s staat in exact hetzelfde frame (met dezelfde rand). Na wat verder onderzoek bleken meer voetbalclubs een splashpagina te gebruiken. Een goede reden om een nieuwe blogpost te schrijven.

Uit m’n “onderzoek” kwam naar voren dat zo’n tweederde van de voetbalclubs splashpagina’s gebruikt. Sommige splashpagina’s verdwijnen automatisch na een x-aantal seconden maar bij de meeste splashpagina’s moet de bezoeker zelf doorklikken. Sommige pagina’s laten ook reclame van hun (hoofd-) sponsoren naar voren komen. Dat dit niet altijd ten goede komt aan de overzichtelijkheid van de gebruiker zie je aan de splashpagina van SC Heerenveen (de 4e in dit rijtje screenshots). Ook ik moest eerst even goed kijken waar ik moest klikken om de ‘echte’ website te openen…

Zie hieronder het overzicht van de splashpagina’s van de Nederlandse voetbalclubs. Een nieuwe trend? Ik hoop het niet…

Mijn advies: Gebruik a.u.b. geen splashpagina’s, en wel om de volgende redenen:

• Het is niet gebruiksvriendelijk. Je bezoekers komen naar je site en moeten nu een extra stap doorlopen om bij je site te komen. Het doorbreekt de (navigatie-)structuur van (de rest van) je website.
• Regelmatig terugkerende bezoekers belanden telkens op de splashpagina na het intypen van de URL van je website, terwijl ze die splashpagina bij wijze van spreken al 38 keer hebben gezien.
• Zoekmachines kunnen er niet altijd goed mee omgaan. De kans dat de pagina niet goed wordt geïndexeerd, al dan niet door het gebruik van Flash, is erg groot.

Over het algemeen is de informatie die je op een splashpagina wilt weergeven goed te integreren in de homepage van een website. Dit voorkomt dat je website slecht, lastig of onjuist geïndexeerd wordt in zoekmachines en het voorkomt tevens geïrriteerde bezoekers.

Ik ben wel benieuwd naar de mening van webontwikkelaars / webmasters die nog steeds splashpagina’s gebruiken. Wat is de reden dat je nog splashpagina’s gebruikt? Laat het even weten in de reacties.

Tot slot: zijn de splashpagina’s van Vitesse en FC Volendam geen juweeltjes?

Het nadeel is echter dat de meeste (gratis) WordPress thema’s dit nog niet ondersteunen. Om deze reden zal ik hier stapsgewijs uitleggen hoe je je thema moet aanpassen om hier gebruik van te kunnen maken. Afhankelijk van het thema dat je gebruikt zou het kunnen dat je zelf ook nog wat aanpassingen in de CSS van je thema moet doen. Ik ben er wel vanuit gegaan dat je iets weet van WordPress thema’s.

Stap 1: Maak een backup van je thema / template!!

Stap 2: Stel bij Settings -> Discussion in dat je van Enhanced Comments gebruik wil maken. Het aantal niveaus kun je zelf bepalen. Ik heb deze instelling zelf op 3 niveaus staan.

Header.php

Stap 3: Voeg de volgende code toe aan header.php, voordat wp_head() aangeroepen wordt:

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

Deze code voegt Javascript aan de pagina toe die ervoor zorgt dat de bezoeker kan reageren op een reactie zonder de pagina te verlaten (lees: zonder een nieuwe pagina te hoeven openen)

Comments.php

Stap 4: Er is een nieuwe functie om reacties weer te geven. Open comments.php en zoek het stuk code dat lijkt op het volgende:

<ul class="commentlist">
<?php foreach( $comments as $comment ) :
// hier de code die per reactie wordt weergeven
endforeach; ?>
</ul>

In WordPress 2.7 kan dit korter. Gebruik de volgende code:

<ul class="commentlist">
<?php wp_list_comments(); ?>
</ul>

Informatie over de wp_list_comments()-functie kun je hier vinden. Let ook vooral op het ‘callback-argument’. Hier kun je alsnog de opmaak van je comments handig kwijt, daar kom ik op terug in stap 10.

Stap 5: Om ervoor te zorgen dat de Javascript – die wordt gegenereerd door de code die je hebt toegevoegd in stap 3 – werkt moet het reactieformulier in een div met als id “respond” worden geplaatst:

<div id="respond"><!-- hier het formulier --></div>

Stap 6: De titel boven het reactieformulier luidt meestal “Leave a reply” of “Plaats een reactie”. Je kan nu ook een titel instellen die verschijnt als de bezoeker reageert op een reactie.

Als het goed is staat er zoiets:

<h3>Leave a reply</h3>

En dat kun je vervangen door:

<?php comment_form_title( 'Plaats een reactie', 'Reageer op %s' ); ?>

Als de bezoeker dan reageert op een reactie komt er “Reageer op [naam van degene waar je op reageert]” te staan.

Stap 7: Plaats binnen het formulier de volgende code:

<?php comment_id_fields(); ?>

Deze code maakt een ‘hidden field’ aan waarmee het ID van de reactie waar de bezoeker op reageert wordt meegestuurd.

Stap 8: Zorg dat het tekstvak waar de bezoeker de reactie in kan typen het ID “comment” heeft.

Stap 9: Als de bezoeker op “Reageer op reactie” klikt wordt de titel van het formulier aangepast (“Reageer op [naam]” in plaats van “Plaats een reactie”) en wordt het ID van de reactie waar hij/zij op reageert in een ‘hidden field’ van het formulier geplaatst. De bezoeker de mogelijkheid te geven om dit te annuleren doe je met de volgende code:

<div id="cancel-comment-reply">
<small><?php cancel_comment_reply_link() ?></small>
</div>

Mocht je het handig vinden: mijn comments.php

Functions.php

Stap 10: In stap 4 heb je de wp_list_comments()-functie toegevoegd aan comments.php. Deze functie handelt het weergeven van de reacties af. Met het callback-argument kun je de opmaak per reactie instellen.
k roep wp_list_comments() op deze manier aan:

<?php wp_list_comments(array('type'=>'comment', 'avatar_size'=>60,
'reply_text'=>'Reageer op deze reactie', 'callback' =>'mytheme_comment',
'style' => 'ul')); ?>

Type, avatar_size, reply_text en style spreken volgens mij voor zich. Het callback-argument verwijst naar een functie waarin ongeveer de code staat die ik in de stap 3 heb vervangen door de nieuwe functie. Deze functie heb ik aangemaakt in functions.php:

Zie hier mijn mytheme_comment()-functie

Het stuk code wat ik heb toegevoegd aan de oude code is:

<div class="reply"><?php comment_reply_link(array_merge( $args,
array('add_below' => 'comment', 'depth' => $depth, 'max_depth'
=> $args['max_depth']))) ?></div>

Met deze code wordt de “Reageer op reactie”-link aangemaakt, zie de WordPress Codex voor meer informatie over deze functie. Let ook op de missende <li>-tag op het einde. WordPress handelt dat verder zelf af.

Style.css

Stap 11: Eventueel aanpassen van de CSS van je thema.  Je zal zelf moeten kijken of dit voor jouw thema geldt. De code die ik heb toegevoegd is:

.comment .commentclear{
  padding-bottom: 10px;
  border-bottom: 1px solid black;
  margin-bottom: 10px;
}

.comment .children{
  margin-left: 50px;
}

Nogmaals, de links naar mijn stukjes code:

Functions.php
Comments.php

Meer informatie kun je ook vinden in het Engelstalige artikel van Otto.

Als het goed is heb je nu een werkende WordPress-weblog waarmee je bezoekers kunnen reageren op de reacties van andere bezoekers, gefeliciteerd!

Heb je vragen of opmerkingen? Ben ik iets vergeten wat je ook graag wil weten? Laat het dan even weten in de reacties hieronder. Je mag ook reageren op elkaar natuurlijk ;-)

Ik ging mezelf registreren:

“Prima, even mijn e-mailadres invullen, een loginnaam en wachtwoord kiezen en klaar is kees” dacht ik. Maar niets bleek minder waar. Na het klikken op “register” was ik nog helemaal niet geregistreerd, er moest nog meer ingevuld worden.

“Vooruit, mijn voornaam en achternaam is geen probleem. Voor de rest heb ik maar onzin ingevuld, dat hoeven ze niet te weten. Ik wil het immers alleen maar even kijken of het interessant is om er serieus mee bezig te gaan.” Na een afbeelding te hebben geüpload was ik bijna klaar met het formulier:

“Hmm… ook interests is een verplicht veld. Ik heb helemaal geen zin om dat in te vullen. Laat ik dan maar ‘blablabla’ invullen. En ik werk ja, vooruit.. dat mag je best weten hoor” Klaar is Kees! Oh, wacht, niet? Er klapte nog een formulier uit:

De gedachte om maar te stoppen met het invullen van al die verplichte velden was de afgelopen 2 minuten al meerdere malen in me opgekomen maar nu besloot ik toch maar toe te geven aan die gedachte. Ik heb simpelweg géén zin om eerst al mijn gegevens af te staan om vervolgens te kijken of het überhaupt een interessant sociaal netwerk is. Als deze gegevens zijn écht nodig waren om een account aan te maken had ik het wellicht zelfs nog overwogen, maar in principe waren alleen de gegevens bij de eerste stap van het formulier écht nodig: e-mailadres, gebruikersnaam en wachtwoord. Ik ben dus afgehaakt.

Helaas komt dit vaker voor op websites en wordt men steeds meer “formulier-moe”. In dit geval weerhoudt het bezoekers ervan om zich te registreren. Stel je echter voor dat je een leuke webwinkel hebt en dat je klanten eerst 38 formulieren in moeten vullen om een bestelling te plaatsen. Zou u het in gaan vullen of zou u afhaken?

Leuk detail: ik kreeg ook een invite voor iDiDiD. Daar moest ik dit allemaal invullen om mezelf te registreren:

Het kan dus wel!

Toen ik afgelopen weekend op de website van de HEMA keek, zag ik daar een mooi voorbeeld van het probleem waar ik iets meer dan een jaar geleden ook mee worstelde. Waarschijnlijk weten de webbouwers van de HEMA-site ook niet dat ze last hebben van dit probleem omdat ze naar alle waarschijnlijkheid geen Mac hebben.

De site ziet er als volgt uit in Firefox:

En hieronder zie je hoe dit er in Safari uitziet:

Dit zijn de punten waarop het verkeerd gaat:

Het probleem

De rode achtergrondkleur (zowel bovenaan als bij het menu links) is geen afbeelding en de menuknoppen wel. Omdat die afbeeldingen inclusief een kleurprofiel zijn opgeslagen krijg je kleurverschil. In de meeste browsers heb je hier geen last van maar in Safari wel. Safari houdt namelijk rekening met kleurprofielen en dat doen andere browsers niet. Dit geldt overigens alleen op de Mac, als je de Windows-versie van Safari gebruikt, zul je geen verschil met Firefox zien.

De oplossing

De oplossing is niet heel lastig, het duurt alleen even voordat je erachter bent. Je moet namelijk alle kleurprofielen verwijderen uit je afbeeldingen. Stel eerst je Photoshop-bestand in op “Don’t Color Manage This Document” en gebruik gewoon de “Save for Web & Devices”-optie om de afbeeldingen op te slaan. Als het goed is, is je probleem dan verholpen.

Anderen kunnen zo’n foto gebruiken voor bijvoorbeeld een folder of een website. Je kunt zelf instellen of ze je eerst toestemming moeten vragen. Het is dus een ideale site om gratis aan goed beeldmateriaal te komen. Ik geef toe, niet alles is even bruikbaar maar dat zul je altijd houden. De meesten zullen je foto downloaden en nooit meer iets van zich laten horen maar zo af en toe zit er iemand tussen die je werk ‘echt’ respecteert en je een foto opstuurt van het uiteindelijke resultaat.

Zo kreeg ik ooit deze foto, gemaakt in Győr, opgestuurd:

Hartstikke leuk om je eigen foto op een brug te zien hangen! 

Mocht je dus op zoek zijn naar stockfoto’s, dan kan ik je sxc.hu aanbevelen. Besef je alleen wel dat de maker van de foto tijd heeft gestoken in het maken van de foto en een beetje waardering wel op z’n plaats is. Dat is het minste wat je kunt doen, toch?

Creative Commons

Let op welke voorwaarden de maker heeft gesteld aan het kopiëren, doorgeven, gebruiken van zijn foto. Sxc.hu heeft zo haar eigen licentiemodel maar de meeste sites gebruiken het Creative Commons model.

Je kunt via Creative Commons voor de volgende voorwaarden kiezen:

• degene die je werk gebruikt moet je naam vermelden
• het werk mag alleen gebruikt worden in niet-commerciele projecten
• het werk mag overgenomen worden, maar mag niet worden aangepast
• het werk mag alleen onder dezelfde licentie worden gedeeld (dus niet “Alle rechten voorbehouden”)

Ik vind het niet erg om mijn werk te delen omdat ik denk dat ik anderen er mee zou kunnen helpen en zij er wellicht zelfs iets mooiers of beters van kunnen maken. Flickr is één van de meest bekende sites waarop je je materiaal handig onder een Creative Commons licentie kunt delen. De meeste foto’s die ik maak en deel op het internet mag je gebruiken volgens het Creative Commons model. De artikelen die ik hier schrijf mag je ook overnemen mits je voldoet aan deze Creative Commons voorwaarden.

Het is natuurlijk een kwestie van fatsoen en respect om je te houden aan deze licentie maar het leuke is: als meer mensen zich er aan houden zullen ook meer mensen hun werk gaan delen op het internet. Gebruik jij al een Creative Commons licentie?

De inmiddels verouderde browser Internet Explorer heeft echter problemen met het weergeven van transparante PNG’s. Je zal zien dat Internet Explorer het transparante deel vervangt door een egale kleur.

Drew McLellan heeft hiervoor een oplossing gevonden: SuperSleight.

Deze oplossing:

• werkt zowel voor achtergrondafbeeldingen als ‘gewone’ afbeeldingen
• geeft automatisch ’position: relative’ in voor links en formulieren (kan uitgezet worden)
• kan voor een volledig bestand gebruikt worden, of voor een deel van een bestand
• verandert ’scaleMode’ naar ’crop’ i.p.v. ’scale’ bij achtergrondafbeeldingen met ‘no-repeat’
• is compatibel met AJAX-requests

Ik gebruik SuperSleight al een tijdje en ben er erg te spreken over. Gebruik de volgende link om SuperSleight te downloaden:

Download SuperSleight

Je kunt SuperSleight eenvoudig gebruiken door de volgende code in de <head> van je pagina te plaatsen:

<!--[if lte IE 6]>
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->


Je moet hooguit het pad naar het bestand aanpassen, als je het JavaScript-bestand in een andere map installeert. Als je om performance-redenen ervoor zou willen kiezen om SuperSleight alleen te activeren op bepaalde elementen zou je onderin het script  supersleight.init() moeten vervangen door  supersleight.limitTo() waarmee je het alleen op bepaalde elementen kunt toepassen.

Op deze website kan iedereen leuke kleurencombinaties opslaan en delen. Vervolgens kunnen anderen deze kleurencombinaties beoordelen en ontdek je erg leuke dingen. Je kunt ook zoeken op een specifieke kleur en vervolgens zie je waar anderen het mee gecombineerd hebben. 

Deze site is een must in je bookmarks als je regelmatig bezig bent met design en kleuren. Hebben jullie ook websites waar jullie inspiratie vandaan halen als je het even niet meer ziet zitten? Reacties zijn welkom!

UPDATE: De hipste kleurencombinaties zie je hier

Om van je eigen handschrift een lettertype te maken moet je eerst 1 (of 2 als je ook speciale karakters wil kunnen typen) pagina uitprinten via http://www.yourfonts.com. Deze pagina staat vol met hokjes waarin je zelf alle letters van het alfabet moet schrijven. Vervolgens scan je deze pagina in en de website zet het automatisch om in een lettertype. Handig en vooral leuk als je een persoonlijk design wil maken. Handgeschreven teksten in de lay-out van (persoonlijke) websites is helemaal hip en trendy op dit moment.

Let op: Als je je eigen lettertype gebruikt in Word-documenten en dit document naar iemand anders stuurt, ziet deze persoon jouw lettertype alleen als hij/zij jouw lettertype ook geïnstalleerd heeft. In pdf’jes heb je de mogelijkheid om lettertypes ‘in te sluiten’ zodat je geen last hebt van dit probleem.

UPDATE: Als Mac-gebruiker werk ik nooit met Word-documenten maar kennelijk kun je het lettertype ook insluiten bij Word-documenten, lees in de reacties hoe dit moet. Met dank aan Bas Vecht en Sint Smeding.

Je kunt de .psd hier downloaden (6,6MB)