Webtips



Zelfbouw

Er zijn ondernemers die niets willen weten over het hoe en wat van websites. Die doen waar ze goed in zijn en laten het webwerk aan de specialist over. Prima natuurlijk.

Maar wil jij nu wel graag iets, veel of alles zelf doen, maar weet je niet precies hoe? Dan kun je altijd contact met mij opnemen. Ik ben niet gierig met mijn kennis en bied graag hulp en begeleiding. Dat geldt vanzelfsprekend voor mijn klanten. Ik kan een xml sitemap voor je maken, maar leg je net zo graag uit hoe je het zelf doet.

Ben je geen klant en heb je een vraag of wil je informatie? Gewoon mailen, als ik iets voor je kan doen help ik je graag verder.


webfont kiezen

Lettertype kiezen

De tijd dat er maar tussen een paar lettertypen voor een website (webfonts) gekozen kon worden is gelukkig voorbij. Al die verdana websites werden toch behoorlijk saai en volgens sommige trendsetters is verdana gewoon 'verboden'. Tegenwoordig is het heel makkelijk om een passend lettertype te kiezen voor je website. En dat kan nog helemaal gratis ook.

De keuze voor een lettertype hangt af van je bedrijf en de doelgroep van de website. Leesbaarheid van het lettertype is uiteraard van groot belang en let bij je keuze ook op of het webfont voldoende variaties heeft (letterdikte, grootte en schuin).

Leesbaarheid
Lettertypen kunnen worden ingedeeld in 3 families: Serif, sans-serif en monospace. Serif lettertypen hebben kleine haaltjes aan de uiteinden van de letters. Sans-serif hebben deze lijntjes niet. Bij monospace lettertypen zijn alle letters precies even breed. Uit verschillende onderzoeken is gebleken dat de letters uit de Sans-serif familie het prettigs lezen op beeldschermen. Leesbaarheid wordt verder bepaald door de ruimte tussen de letters, de maatverhouding van de letters en pixeldichtheid. Over het algemeen genomen geeft een letter met veel witruimte, eenvoudige rondingen en open vorm een rustig beeld.

Combineer lettertypen
Zorg voor een goede match van kop- en hoofdteksten. Maak geen gekkenhuis van veel verschillende lettertypen op een website. Daar vermoei je de bezoeker mee. Kies verschillende lettertypen op de functionaliteit van de website. Zo kun je voor knoppen een apart lettertype kiezen. Een handige hulp is typecast.com, hier kun je lettertypen in een ontwerp zetten en aanpassen.

Gratis Google webfonts
Wanneer je geen budget hebt om een speciaal ontwerp webfont aan te schaffen dan heeft Google een grote collectie gratis lettertypen: Google Web Fonts. Deze webfonts zijn met een stukje code in de css en de html van je website direct in te voegen. Het zijn er meer dan 600 totaal, dus dat maakt de keuze niet makkelijk, bovendien zitten er een hoop 'slechte' fonts bij. Goede en populaire google webfonts zijn: Open Sans (en Condensed), Roboto (en Condensed ), Oswald, Lato, Source Sans Pro, PT Sans, Droid Sans, Raleway, Droid Serif, Ubuntu, Montserrat, Lobster, Playfair Display, Cabin, Muli, Abel, Shadows Into Light, Vollkorn, Dancing Script, Merienda.

Leuk lettertype gezien, maar welke is het?
Om daar achter te komen gebruik je: What The Font. Een fantastische website (onderdeel van MyFonts) waar je een afbeelding kunt oploaden en het programma zoekt uit welk lettertype het is, welke het dichtsbij zit en wat de alternatieven zijn. Bij MyFonts kun je ook een lettertype kopen, ideaal als je niet uit de veel gebruikte gratis fonts wil kiezen.

Meer gratis fonts
Een alternatief voor de Google Webfonts is fontsquirrel.com. Hier zijn veel gratis (en bijna gratis) lettertypen te vinden. Maar helemaal mooi is het tooltje Webfont Generator, waarmee je van een lettertype een webfont kan maken. Wel je aan de copyrights houden natuurlijk!

Tot slot, stel je hebt een mooi webfont gevonden en nu wil je dat font ook op je visitekaartje en in je correspondentie gebruiken. Dat kan niet zomaar met elk een webfont. Met Google webfonts kan dat wel. Het is even zoeken, maar als je eenmaal een font geselecteerd hebt en je hebt use aangeklikt dan opent er een raam met bovenin een tekentje van een link en een pijltje. Als je op het pijltje klikt verschijnt er de optie de fonts als zip te downloaden. Uitpakken en in je fonts file zetten. Heb je een ander font waar geen desktopversie voor is dan zul je een alternatief dat lijkt op het webfont moeten zoeken. Je kunt het bij identifont.com proberen of googlen.

 


webtip kleuren voor website

Kleur kiezen

De kleuren voor je website kiezen is nog niet zo makkelijk als het lijkt. De kleuren moeten bij je bedrijf passen en uitstralen waar je bedrijf voor staat. Een beveiligingsbedrijf kiest voor andere kleuren dan een babykledingwinkel. De kunst zit erin om een unieke combinatie te vinden zonder de website bezoeker te verwarren. Daarbij blijft de gouden regel dat de website goed leesbaar moet blijven, dus hou het functioneel.

Meerdere kleuren
Het is verstandig om 1 basiskleur te kiezen voor de site. Liefst een kleur die in het logo voorkomt of die een andere verwijzing naar je bedrijf heeft. Een tweede kleur maakt je website niet alleen spannender, maar kan ook functioneel gebruikt worden, bijvoorbeeld voor alle linken. Een hulp bij het kiezen van een goede kleur combinatie kan colorcombos.com zijn. Een mooi effect met kleur kan ook zijn om afbeeldingen te kiezen met eenzelfde kleur. Bij websites waar je stockafbeeldingen kunt aanschaffen kun je vaak ook de kleur die in de afbeelding moet voorkomen aangeven, bij istockphoto staat deze optie onder Color in de linker kolom.

Kleurverschil
Hoewel de meeste browsers tegenwoordig alle kleuren goed weergeven, ben je met zogenaamde webechte kleuren altijd zeker van een juiste weergave. Er zijn 216 web-echte kleuren. Dit zijn kleuren die altijd weergegeven worden zoals je ze hebt opgegeven. Web-echte kleurcodes bestaan altijd uit een rgb combinatie van: 00 33 66 99 CC FF. Kies je een kleur buiten dit pallet dan worden de mogelijkheden een stuk uitgebreider, maar er kan tevens een kleurverschil ontstaan per browser en apparaat. De kleuren op een mac worden bovendien lichter weergegeven dan op een windows beeldscherm. En dan is er nog het veel lastigere probleem van de beeldscherminstellingen. Veel mensen hebben die voor de kleurweergave niet goed afgesteld of naar eigen persoonlijke voorkeur ingesteld. Wees dus niet te kritisch bij het maken van je kleurkeuze, de uiteindelijke weergave bij je bezoekers hangt van veel zaken af.

Kleurcodes
Er zijn veel verschillende manieren om een kleur te benoemen. Voor websites gebruiken we rgb en hex coderingssysteem. Er zijn verschillende manieren om een kleurcode van rgb naar hex om te zetten (en vice versa). Het kan bijvoorbeeld in Photoshop, maar er zijn ook veel verschillende website die je kunnen helpen. Een aardige site is Adobe Color CC, maar je kunt ook googlen op de kleurcode die je hebt.

Soms wil je meer informatie over een kleur, bijvoorbeeld wanneer je een webkleur wilt omzetten naar kleur voor drukwerk. Bespreek altijd duidelijk met de drukker of printer in welke codering deze de kleur wil ontvangen. Wil je een kleur omzetten van rgb naar pantone, kijk dan eens bij rgb.to Op deze site kun je ook rgb naar CMYK en hex omzetten.



Afbeeldingen

Gebruik zoekwoorden / sleutelwoorden in naam
De naam van afbeeldingen wordt meegenomen door Google. Geef dus zinvolle namen (dus niet: foto1, maar bijvoorbeeld webdesign).De namen van afbeeldingen mogen geen spaties bevatten. Kies 1 woord of als je onderscheid wilt maken zet je er een _ of - tussen. Doe je dat niet dan maakt google er iets raars van. Het voordeel van de naam van de afbeelding als zoekwoord ben je dan ook kwijt. Gebruik kleine letters in de naam van de afbeelding (dus geen hoofdletter).

Alt toevoegen aan afbeelding
De Alt tag is eigenlijk bedoeld als ondersteuning voor de visueel gehandicapte mens. Google wil die graag ten dienste zijn door aan te geven in woorden wat er op het plaatje te zien is. Google neemt deze woorden mee als zoekwoorden. Dus voeg een zinvolle (dat wel) alt beschrijving bij je afbeeldingen. Bij HTML is het bovendien noodzakelijk om de ALT beschrijving toe te voegen!

Formaat afbeelding
Laad altijd het formaat afbeelding op dat je ook werkelijk wilt gebruiken. Dus niet grote maat uploaden en bijvoorbeeld in dreamweaver verkleinen. Dit zorgt voor onnodig lange laadtijd (en webruimte). De laadtijd van je website is belangrijk voor je score bij Google. Let er wel op dat je het grootste formaat upload dat je nodig hebt voor je responsive versies.

Afbeelding nodig?
Het mooist is natuurlijk als je eigen afbeeldingen hebt voor op je website. Maar het is niet voor iedereen mogelijk om aan kwalitatief en inhoudelijk goede foto's te maken. In zo'n geval kun je natuurlijk een professionele fotograaf inhuren, dat kan ook via ons, wij werken met een aantal bijzondere fotograven samen. Een goedkopere oplossing is afbeeldingen kopen via zogenaamde fotobanken. Een aantal voorbeelden zijn: 123rf.com, istockphoto.com en shutterstock.com Prijzen verschillen per website, kwaliteit van de afbeelding en soort bestand.

GIF afbeeldingen maken
Bewegende beelden trekken extra aandacht. Van oudsher (1987) was daarvoor de GIF (Graphics Interchange Format) afbeelding ideaal. De zogenaamde animated GIF maakte het mogelijk om verschillende beelden achter elkaar op te slaan in 1 bestandje. Tegenwoordig zijn er talloze varianten op bewegend beeld voor handen, zoals sliders, video en carousels. MAAR wij zijn groot voorstander van de GIF animatie. De bestanden zijn uitzonderlijk klein, er is geen script nodig en ze zijn super eenvoudig te maken. Een eenvoudig tooltje voor het maken van een GIF is: http://gifmaker.me/


metatags webtips

Metatags

Title tag
Hier plaats je de titel van je website pagina. De titel staat bovenaan in de vermelding in de zoekresultaten. Ook wordt deze titel weergegeven in het geopende tapblad boven aan je browser. Zorg dus voor een pakkende titel. De zoekmachines gebruiken verschillende criteria voor het weergeven van de titel Tag. Het beste is om niet meer dan 65 tekens te gebruiken. Dan weet je zeker dat je titel altijd volledig in beeld verschijnt. Zorg er verder voor dat de titel altijd een heldere zin is. En uiteraard is het verstandig relevante zoekwoorden van de betreffende pagina in de titel te gebruiken. Een titel als: 'meer informatie' zegt natuurlijk niet zoveel. Tot slot is het van groot belang om elke pagina op je website een unieke titel te geven!

Meta Tag Description
Maak de Description Meta Tag niet langer dan 150 tekens. Zo weet je zeker dat deze volledig in beeld komt en bovendien nog leesbaar blijft. Lange zinnen worden in de zoekresultaten eerder overgeslagen. Ook voor de Description Meta Tag geldt: gebruik voor de desbetreffende pagina relevante zoekwoorden in de omschrijving en zorg ervoor dat de boodschap helder blijft.

Meta Tag Keywords
Er is veel gezegd over de Meta Tag Keywords. En we kunnen aannemen dat deze, in vergelijking met vroeger, inderdaad niet zoveel meer doet. Maar zoekmachines veranderen aldoor hun algoritmen. Zeker ook de nieuwe spelers. Enig idee waarom You Tube de meta tag keywords nog wel gebruikt? Tegelijk kan de metatag keywords kan ook belangrijke informatie weggeven aan je concurrenten, die zien namelijk waar jij op gevonden wil worden. Mijn advies: denk wel na over je keywords. Op welke woorden wil je gevonden worden? Staan deze in de desbetreffende pagina? In de titel? In de beschrijving? In de koppen? Mocht je de De Meta Tag Keywords willen gebruiken dan bevat deze maximaal 20 zoekwoorden (of sleutelwoorden). Ideaal is een aantal van 8 - 10. De woorden zijn bovendien altijd komma gescheiden. De zoekwoorden in de meta tag moeten ook op de desbetreffende pagina voorkomen!

Overige Meta Tags
Het is geheel afhankelijk van de soort website die je bouwt welke tags er nog meer gebruikt worden. De meest gebruikelijke zijn de Author Tag en de Robots Tag.

Waarom zijn Meta Tags zo belangrijk?
Meta Tags zijn de manier om aan Google aan te geven hoe je website geplaatst moet worden en hoe deze gelezen moet worden. Dit is dus een bijzonder krachtige manier om in de hand te houden hoe jouw bedrijf wordt weergegeven in de zoekresultaten.