Blog


Gebruik Google.com in plaats van Google.nl

Posted by on 12:51 in Internet, Seo & Analytics | 2 comments

Google probeert iedere bezoeker het best mogelijke resultaat te bieden. Daarom wordt je in veel landen in plaats van naar google.com naar de lokale variant geleid. Google.nl in dit geval dus, als je in Nederland iets zoekt. Heel handig, en inderdaad krijg je veel relevantere resultaten voor je zoekopdracht via een lokale variant van Google. Het is alleen vervelend als je een site wilt optimaliseren voor Engelssprekende landen. Gelukkig heeft Google ook daar een oplossing voor. Via deze link: http://www.google.com/ncr leidt Google je niet naar een lokale variant, maar naar google.com. Maakt niet uit vanuit welk land je naar google.com wilt, bovenstaande link werkt altijd....

read more

Aangepaste overflow scrollbar

Posted by on 12:58 in Webdesign | 0 comments

Voor mijn meest recent voltooide project moest ik een aantal technische hindernissen overwinnen, vanwege de wens om WordPress als cms te gebruiken (de wens was om zelf relatief eenvoudig afbeeldingen en teksten te kunnen beheren, dan kun je natuurlijk niet om WordPress heen) en het ontwerp dat voorzag in een gefixeerde hoogte van alle pagina’s. De combinatie zelf aan kunnen passen van teksten en een gefixeerde hoogte leidde tot de noodzaak om alle body elementen een gefixeerde hoogte te geven, en in css een overflow te declareren op al die elementen. Allemaal geen probleem. Maar de standaard overflow scrollbar ziet er niet uit: En je hebt er als webbouwer ook totaal geen controle over, want browsers bepalen hoe die scrollbar eruit ziet. En je wilt dat het ook op een ipad/iphone bruikbaar is… Het moest dus in Javascript, niet in Flash worden gebouwd. Om dit geheel op te lossen heb ik de WordPress plugin: Jscroll pane gebruikt. Die zorgt ervoor dat door middel van Javascript de scrollbalk een html element wordt, waarna je hem kunt stylen met css. Het default uiterlijk van de scrollbar wordt dan: Al iets beter! Na wat kleine aanpassingen aan het formaat, kleur, grootte van de ‘stops’ aan de uiteinden boven en onder en aanpassingen aan het gedrag van de balk als je er met de muis overheen zweeft, was dit het eindresultaat:   Een tweede uitdaging was dat er voor iedere pagina een andere achtergrondafbeelding nodig was, waarbij die afbeeldingen ook achter de tekst gebruikt moesten worden (zoals je hierboven ook kunt zien). Gelukkig geeft WordPress iedere pagina een eigen ID mee, zodat je die kunt gebruiken om css op los te laten zonder dat dat op andere pagina’s ook te zien is. Om de tekst leesbaar te houden was in het ontwerp een semi transparante laag achter de tekst voorzien. Om het mogelijk te maken dat gebruikers van (de inmiddels stokoude, als je hem nog gebruikt, ga je diep schamen) Internet Explorer 6 ook deze transparantie konden zien heb ik eerst geprobeerd om deze transparantie met css te bereiken. Helaas, daarmee wordt ook de tekst binnen het element transparant, omdat die tekst de transparantie van het element eromheen erft. En uiteraard was dit te geavanceerd voor IE 6. Uiteindelijk heb ik besloten een transparante afbeelding te gebruiken, een .PNG. Omdat IE6 niet overweg kan met de alpha channel eigenschap die in een .PNG een browser laat weten hoe transparant de .PNG moet worden weergegeven, zien IE6 gebruikers een witte achtergrond. Nog steeds functioneel en bruikbaar, alleen iets minder mooi. Ik heb bewust geen .GIF gebruikt, omdat ondanks dat die wel zou werken in IE6, die in alle browsers een minder mooi resultaat op zou leveren.   De derde uitdaging was dat voor de koppen en het menu een niet-standaard-lettertype gebruikt moest worden. Met een standaard (of ‘websafe’) lettertype wordt in webjargon een lettertype bedoeld dat standaard is geïnstalleerd op je computer als je ‘m koopt. Dat zijn lettertypen als Arial, Verdana en Helvetica. Als je op je site een afwijkend lettertype gebruikt omdat dat mooi bij de uitstraling van het ontwerp past, en je zou het simpelweg in je stijlsheet declareren met: font-family:”je afwijkende, funky lettertype”,”Times New Roman”,Georgia,Serif; kan waarschijnlijk meer dan 98% van de bezoekers van je site dat mooie lettertype niet...

read more

Bijzondere lettertypen op websites

Posted by on 16:13 in Tips & Tricks, Webdesign | 0 comments

Ik krijg de laatste tijd steeds vaker de vraag of het mogelijk is om een bepaald lettertype in een huisstijl te verwerken. Bij drukwerk is dat uiteraard geen enkel probleem, er zijn meerdere manieren waarop een drukker probleemloos ieder lettertype kan drukken dat je wilt hebben. Bij websites ligt dat ietwat anders. Het is namelijk zo dat je in de stylesheet van een website wel eenvoudig een willekeurig lettertype kan declareren voor ieder element: { font-family:”Times New Roman”,Georgia,Serif; } Maar die lettertypes zijn niet daadwerkelijk opgenomen in een website, die worden door de browser vanaf de computer van de bezoeker van je site ingelezen. Als je dus een lettertype declareert dat iemand niet op zijn computer heeft, zal die dat niet kunnen zien. Daarom declareer je altijd in plaats van één specifiek lettertype, een familie. In bovenstaand voorbeeld zoekt een browser eerst naar “Times New Roman”, als iemand dat niet op zijn computer heeft zoekt de browser verder naar “Georgia”, als die ook niet kan worden gevonden, wordt het allereerste Serif (In Nederlands ‘Schreef”) lettertype gebruikt dat kan worden gevonden. Maar wat nu als je een handgeschreven, gothisch of ander hip lettertype wilt gebruiken? De twee methoden die ik gebruik zijn: @font-face Dit is een methode, ontwikkeld door www.FontSquirrel.com. Hiermee kun je van lettertypen niet alleen de versie voor op je computer kopen en downloaden maar ook de webfont kit. In die webfont kit zitten alle declaraties voor de verschillende browsers, je kunt dat pakket op je server installeren. Vervolgens kun je het met de @font-face declaratie in je website embedden. Het lettertype wordt nu niet op de computer van je bezoekers gezocht, maar op de webserver waar je site is ondergebracht. Google Web Fonts Google biedt een bibilotheek met daarin een groot aantal lettertypen die in je website kunnen worden gebruikt. Deze methode is net wat eenvoudige in gebruik dan de bovenstaande methode, zo hoef je alleen maar in je html de stylesheet van het lettertype dat je wilt gebruiken aan te roepen, waarna het lettertype rechtstreeks op de servers van Google wordt opgezocht. In je stylesheet declareer je het lettertype zoals gebruikelijk. Het enige nadeel is dat Google maar 622 (op het moment van schrijven) verschillende lettertypen biedt, de kans bestaat dus dat het lettertype dat je zoekt er niet tussen zit....

read more

Verander veelgebruikte websites in desktop apps

Posted by on 21:48 in Lifehacking, Slimmer Werken, Tips & Tricks, Tools | 0 comments

Een paar dagen geleden attendeerde een vriend me op deze app: Handig, want als je een Mac hebt, kun je er van alle websites die je vaak bezoekt iconen mee maken die je in je dock kunt plaatsen. Een beetje zoals je snelkoppelingen naar webpagina’s kan maken op windows, maar dan iets geraffineerder. Persoonlijk vind ik het erg handig omdat je browser z’n handen vrij heeft om andere dingen te doen, dat gaat allemaal net even sneller als je geen 12 (of meer) tabbladen open hebt (zoals ik vaak heb)....

read more

Een logo is een afbeelding, geen h1

Posted by on 18:44 in Internet, Seo & Analytics | 0 comments

Een paar dagen geleden had ik een discussie met de bouwer van een site waarvan ik het tekstuele component moest optimaliseren voor zoekmachines. Hij had het logo (afbeelding bovenaan zijn pagina) bestempeld als h1 in zijn html, onder het motto: “dit is de titel van je site, dus het allerbelangrijkste op je pagina”. Dit is een gedachtegang die ik weliswaar kan volgen, en één die veel wordt toegepast op diverse websites, maar toch is het fout. Dit is zoals het er in code uitziet: <div class="logo-placeholder"> <h1><a href="http://www.fakewebsite.com/"> <img title="Logo" alt="Logo" src="http://www.fakewebsite.com/images/Logo.jpg"></img></a></h1> </div> Wat je hiermee aangeeft is dat je logo een belangrijke heading is. Om er nog verder in te duiken, dit is wat je ook wel eens ziet. een logo-afbeelding als achtergrond opgemaakt in html. <h1><a href="/" title="Logo">Bedrijfsnaam</a></h1> Met bijbehorende CSS: h1 a{ width:; height:; display:block; text-indent:-9999px; (zodat 'bedrijfsnaam' niet zichtbaar is door je logo heen) background:url(/images/logo.gif); } Het probleem met bovenstaande code is: De belangrijkste paginaheader is nu een afbeelding, en zoekrobots kunnen afbeeldingen niet lezen… Zoekbots kunnen wel iets met de img title en alt tags, maar die worden niet belangrijker omdat die in een h1 element zitten. In het geval dat je je logo als achtergrondafbeelding hebt verwerkt, heb je geen alt element voor je afbeelding. Daarmee wordt het lastiger voor mensen die een screenreader gebruiken om je site te bezoeken, screenreaders maken gebruik van die alt tag om kenbaar te maken waar de afbeelding over gaat. En ook Google gebruikt die alt tag, voor hetzelfde doel… Volgens W3schools: “Search engines use your headings to index the structure and content of your web pages. Since users may skim your pages by its headings, it is important to use headings to show the document structure.” Het logo komt doorgaans op alle pagina’s van een site voor. Dus hebben alle pagina’s nu hetzelfde, onleesbare, h1 element. Dus een onbegrijpelijke structuur. Google geeft weliswaar toe dat het geen probleem is om meer dan één h1 per pagina te gebruiken (zie hier de video van Matt Cutts), dus je zou kunnen overwegen je tekstuele inhoud te structureren met een tweede h1 element… Alleen heb je dan dat probleem van het onleesbare logo nog niet opgelost, en het probleem van de h1 die op iedere pagina hetzelfde is. Hoe het wel moet: <a href="/" title="Logo" id="logo"> <img src="/images/Logo.jpg" alt="Logo" /> </a> Vervolgens heb je je h1 vrij om te gebruiken waar ‘ie voor bedoeld is, het laten weten wat de belangrijkste paginaheader is. Voor SEO kan dit voordelen hebben. Ik hoor je denken: ‘hoeveel invloed heeft dit nou helemaal’? Het antwoord daarop kan ik niet onderbouwen met keiharde cijfers, omdat zoekmachines geen inzicht geven in de formule waarmee ze de ranking van een site bepalen. Wat ik wel met zekerheid kan zeggen is dat als je hoger wilt scoren dan een concurrent met dezelfde zoekwoorden, en die concurrent heeft zijn structuur wèl goed geregeld, is het des te moeilijker om die concurrent te...

read more

Chrome tab remix commercial

Posted by on 12:59 in Algemeen, Internet | 0 comments

Ik kwam deze tegen als commercial bij een andere video, vond ‘m werkelijk briljant:

read more

Muisloos browsen met Firefox en Chrome

Posted by on 15:33 in Lifehacking, Slimmer Werken | 0 comments

Mijn katten hebben ooit eens mijn (mighty) muis gebruikt als dankbaar object om achteraan te jagen… Wat blijkt? In een gevecht van kattenklauw versus trackball delft die laatste een roemloos onderspit 🙂 Het resultaat was dat naar boven scrollen steeds lastiger werd (naar beneden scrollen was geen enkel probleem gek genoeg), zelfs na regelmatig proberen schoon te maken van de trackball. Ik ging dus steeds meer mijn toetsenbord gebruiken om te scrollen op webpagina’s. Het ging zelfs zo ver dat ik ook links wilde openen zonder te klikken met een muis. Met Firefox kan dat als volgt: Type “/” (Slash) en type de ankertekst van de link. Enter en de link zal zich openen. Met Chrome (na Firefox gebruik ik die het meest) heb je om links te openen zonder muis een plugin nodig: DeadMouse Je kunt het eerst testen op chetan51.github.com/deadmouse/ Op het moment dat je de plugin hebt geïnstalleerd, kun je alle links openen door de eerste paar letters van de ankertekst te typen, de link die actief wordt gaat heen en weer wiegen. Enter en de link opent. Overigens moet ik zeggen dat ik inmiddels een nieuwe muis heb gekocht, want photoshoppen zonder scrollbal is echt een hel. Ook het hele muisloos browsen, hoewel handig dat het kan, vond ik op den duur toch niet handig. Ik ben net niet fanatiek genoeg in keyboard gebruik denk ik…...

read more

De volledige url terug in Firefox 7

Posted by on 20:13 in Internet, Tips & Tricks | 0 comments

Vandaag heeft de automatische updater van Firefox de nieuwste versie binnengehaald en geïnstalleerd. Versie 9. Mijn grote vrees: deze versie laat wederom niet de gehele url zien, maar alleen het gedeelte ná http://. Gelukkig ongegrond, ik zie nog steeds de gehele url. Voor mij bijzonder belangrijk, want per dag kopieer en plak ik groot aantal urls. Iedere keer kijken en afwachten of http:// wel meekomt is dan een drama. Gelukkig is het niet moeilijk om het door Mozilla sinds Firefox 7 verstopte (want in hun ogen overbodige?) stukje url weer terug te krijgen. Hier is hoe: 1. In de URL balk van Firefox, type in: about:config en bevestig het pop-up bericht. 2. Zoek naar: browser.urlbar.trimURLs. 3. Dubbel-of rechts-klik en selecteer “toggle” om de waarde naar ‘false’ te veranderen. De volledige URL, mét HTTPS of HTTP wordt nu weer weergegeven. Ook handig om te controleren of je een beveiligde of onbeveiligde site bezoekt. Deze wijziging wordt gelukkig niet beïnvloed door de nieuwste versie van Firefox (momenteel 9), dus eenmaal ingesteld, blijft het werken. Bron: How to get the full url back in Firefox op...

read more

Google Plus One button zonder teller

Posted by on 09:20 in Tips & Tricks | 0 comments

Vandaag kwam ik een interessant vraagstuk tegen over de voor en nadelen van de Google plus one button. En dan nog niet eens zozeer van die button zelf, maar van het weergeven van de teller (waarmee je kunt zien hoe vaak een pagina, of product ‘geplust’ is. Om bij het begin te beginnen; het is mogelijk de Google plusone button ook zonder teller op je site weer te geven, met de volgende code: <g:plusone count=”false”></g:plusone> (Bron: Google webmaster Central). De discussie ging erom of het wenselijk was om voor webwinkels waarvan het aanbod een zekere exclusiviteit moest uitstralen, te laten zien hoeveel mensen een exclusief product hadden geplust. Veel plussen kon worden opgevat als een aantasting van de exclusiviteit, was de redenatie. Ik ben benieuwd naar andere meningen hierover! Als je unieke artikelen verkoopt, bijvoorbeeld op een webwinkel, zou het kunnen zijn dat je klanten het vervelend vinden dat het product dat ze bekijken al 100 keer is geplust. Dat is natuurlijk niet echt uniek, 100 plusjes. Het is natuurlijk nog maar de vraag of het product dan ook daadwerkelijk 100 keer verkocht is, uniek betekent doorgaans dat er maar 1 exemplaar van dat product in omloop is, en er dus ook maar 1 van kan worden verkocht. Maar het gaat er nu vooral om dat de Google plus one button een teller kent, die aangeeft hoe vaak het product is geplust. Die teller is wat het probleem vormt als je niet wil dat mensen zien dat een product heel vaak geplust...

read more

Logodesign case: Weddingbliz

Posted by on 14:25 in Design, Logodesign | 0 comments

Niet lang geleden heb ik het ontwerp van het logo en huisstijl voor weddingplanner Weddingbliz afgerond. Weddingbliz voorziet in de planning en het regelen van o.a. bruiloften, vrijgezellenfeesten, geboorte-, of pré geboortefeestjes, sweet sixteens en jubilea. vanwege die diversiteit in het aanbod vond ik het belangrijk dat het logo niet al teveel de nadruk zou leggen op bruiloften. Ook wilde ik niet verstrikt raken in alle doorgaans met bruiloften geassocieerde clichés, zoals krullen, strikken, hartjes, ringen enzovoorts. Brrr. Het plannen van een bruiloft is best een zakelijke aangelegenheid, en je huurt een weddingplanner vooral in vanwege het gemak, en de kostenbesparingen die een planner kan realiseren. Vandaar dat ik vond dat de nadruk niet op romantiek moest komen te liggen, maar vooral op gemak en ‘joie de vivre’. Na flink wat schetsen is dit het uiteindelijke logo geworden: De symboliek van het logo is dat de twee figuren in een blije stemming zijn, hun ‘armen’ vormen een symbolische schaal, wat weer voor vruchtbaarheid kan staan, maar ook gezien kan worden als twee feestende figuren die elkaar in een danshouding hebben. Voor de bijbehorende visitekaartjes heb ik de twee figuren los van elkaar gebruikt: De voorzijde: En de achterzijde: Naast visitekaartjes heb ik ook eenvoudige flyers ontworpen, op basis van de homepage van de website: De voorzijde: En de achterzijde: De hele huisstijl combineert een ingehouden speelsheid en vrolijkheid met een scheutje klasse en eigenwijsheid, zodat je er meerdere kanten mee uit...

read more