Blog

Scroll en beweeg!

Tue, 27 Sep 2011 11:51:00 +0200

Er duiken steeds meer websites op waar elementen met een verschillende snelheid voorbij komen wanneer er in een bepaalde richting gescrolld wordt. Om dit effect te demonstreren hebben we een gedeelte van een level uit Super Mario World™ (Nintendo, 1992) nagemaakt met behulp van de jQuery Scroll Parallax plugin. Het beeld bestaat uit drie bewegende lagen: de voorgrond beweegt tijdens het scrollen op normale snelheid, de achtergrond juist langzamer en de kogel weer sneller, waardoor het zogenaamde parallax verschijnsel optreedt.

Bekijk hier de demo (en scroll naar rechts!)
De demo werkt in de laatste versies van Chrome, Safari en Firefox. Niet in Internet Explorer.

De techniek is vrij eenvoudig toepasbaar, maar er moet wel rekening gehouden worden dat deze pagina's vaak een stuk zwaarder zijn en op oude computers minder goed draaien.

Fraaie websites die gebruik maken van deze techniek zijn onder andere de websites van Nike Better World, Unfold, TEDxPortland, Authentic Jobs en Nizo App.

Rapportcijfer van Google

Tue, 28 Jun 2011 15:35:00 +0200

In een vorige blogpost is genoemd dat de techniek niet allesbepalend is voor een goeie ranking in de ‘hitlijsten’ van Google. De inhoud van de website (content) laat Google weten waar de pagina over gaat. Naast de inhoud hecht Google ook veel waarde aan de links naar een website.

Linkbuilding en PageRank

Google wil bepalen hoe belangrijk een pagina van een website is. De redenatie is dat belangrijke pagina’s interessante informatie bieden voor (be)zoekers en moeten volgens Google dus ook hoger in de zoekresultaten eindigen. Dit doet Google door te tellen hoeveel verwijzingen (links) er op het hele internet naar een specifieke pagina leiden. Alle links bij elkaar zorgen voor een cijfer van 0 tot 10 voor de bewuste pagina. Dit cijfer is de PageRank. Omdat de PageRank een belangrijke factor is in hoe hoog een website scoort, is het dus nodig om veel links vanaf andere website of vanaf de eigen pagina’s te maken. Een aantal vuistregels:

Links vanaf pagina’s met een hoge PageRank zijn meer waard dan die met een lage PageRank
Vaak geldt: hoe moeilijker het is om een link te krijgen, hoe hoger de waarde van de link
De waarde die Google hecht aan een link is mede afhankelijk van het aantal links op een pagina. Hoe minder links hoe hoger de waarde.
De tekst van de link (ook wel de Anchor text genoemd) bepaalt waarmee Google de pagina associeert. Gebruik dus nooit ‘Klik hier’ of ‘Meer’ als linktekst, maar zoveel mogelijk het zoekwoord zelf.
Koop nooit een link. Google treedt op tegen links waaarvoor betaald moet worden. In het ergste geval wordt de website op een zwarte lijst geplaatst en komt deze helemaal niet meer voor in de zoekresultaten.
Werk op een transparante manier; Gebruik geen technieken om Google om de tuin te leiden, zoals verborgen links of verborgen teksten. Google kan ook hier zorgen voor het verwijderen van een website uit de zoekresultaten.

Graag op de eerste plaats, Google

Mon, 09 May 2011 14:42:00 +0200

Een nieuwe website laten ontwikkelen, die uiteindelijk slecht scoort in Google is natuurlijk weinig waard. Maar nog al te vaak wordt van de webdesigner verwacht dat hij een website ontwikkelt die, als een soort alarmschijf, regelrecht op de eerste plaats in Google terecht komt. En dat is een illusie.

Google stelt zichzelf als doel om de best mogelijke resultaten te tonen bij een zoekopdracht voor de beste beleving. Daarbij spelen technische zaken als de snelheid en de structuur van de website zeker een rol. Maar nog veel belangrijker is de inhoud van de website (de content) en de verwijzingen naar de pagina’s.

Content

Google heeft woorden nodig om te begrijpen waar een website over gaat. Hij kan geen afbeeldingen interpreteren zoals mensen dat kunnen. Hoog in de zoekresultaten van Google eindigen? Dan zijn deze basisstappen onvermijdelijk:

Breng de belangrijkste zoekwoorden in kaart waarop hoog gescoord moet worden. Gebruik Google keyword tool om de zoekwoorden te analyseren.
Schrijf teksten die dit zoekwoord op een natuurlijke wijze enkele keren herhaalt.
Zorg er voor dat de belangrijkste tekst in de eerste alinea staat.
Gebruik titels die een zoekwoord bevatten.
Geef titels een H1 tag en subtitels een H2 tag. Hiermee wordt voor Google benadrukt wat het meest belangrijk is.

Bedenk ten slotte dat het niet in een keer goed hoeft te zijn. Testen en bijstellen is een gezond principe! In een volgende blogpost meer over een ander aspect van zoekmachine optimalisatie, namelijk Linkbuilding en PageRank.

Achtergrond uitrekken met CSS3

Mon, 02 May 2011 16:00:00 +0200

Met de komst van CSS3 kan er met de eigenschap ‘background-size’ en de waarde ‘cover’ een achtergrond proportioneel uitgerekt worden, zodat deze het volledige venster bedekt. De afbeelding past zich dan automatisch aan de breedte of de hoogte van de pagina aan, zodat bij elke venstergrootte de achtergrond in verhouding blijft en optimaal wordt weergegeven.

Bovenstaande afbeeldingen van de webpagina in Safari op de iPad worden weergegeven door de volgende class:

.achtergrond{ 	background-size: cover; 	background-image: url('achtergrond.jpg'); 	background-position: center center; }

Deze class is in de html aan de body tag meegegeven door middel van . In het voorbeeld is de afbeelding zowel horizontaal als verticaal gecentreerd door de waarde ‘center center’ aan de eigenschap ‘background-position’ mee te geven. Wanneer deze eigenschap niet wordt opgenomen in de class, positioneert de browser de afbeelding linksboven.

Compatibiliteit

‘background-size:cover’ wordt ondersteund in FireFox vanaf versie 4, Chrome vanaf versie 4, Safari vanaf versie 5, Opera vanaf versie 10.53 en Internet Explorer vanaf versie 9.

Een alternatief voor deze CSS3 oplossing is de MooTools extensie FitImage, waarbij compatibiliteit is gewaarborgd voor de momenteel meestgebruikte- en een aantal gedateerde browsers.

Woorden afbreken op het web

Wed, 19 Jan 2011 14:00:00 +0100

De tekstweergave op het internet wordt langzamerhand volwassen. Zoals met het script Hyphenator waarmee tekst automatisch kan worden afgebroken, net zoals dat in boeken en kranten gebeurt.

Bovenstaand voorbeeld laat zien dat dankzij de tekstafbreking de regels beter leesbaar worden omdat er minder wit tussen de woorden staat. En het resulteert in een compactere paragraaf, met in dit voorbeeld een reductie van één regel.

De implementatie van Hyphenator is vrij eenvoudig. Nadat het script is geüpload en in de header van de html pagina wordt aangeroepen kunnen elementen waarvan men de woorden wil afbreken voorzien worden van de class hyphenate. Standaard worden de woorden afgebroken volgens de regels van de taal die in de htmlpagina staat gedefineerd, zoals het lang="nl" attribuut in de html tag. Woorden in tekstelementen die in een andere taal zijn geschreven worden correct afgebroken door achter de toewijzing van de class hyphenate de taal te noteren zoals: class="hyphenate" lang="en".

Het script zorgt voor een kleine vertraging bij het laden van de pagina, maar dit is minimaal en zal in de meeste gevallen onopgemerkt blijven. Hyphenator draait in elke browser die naast javascript ook de soft hyphen () ondersteund, o.a. Internet Explorer ≥ 5, Safari ≥ 2, Firefox ≥ 3, Chrome en Opera ≥ 7.1.
Wanneer men (afgebroken) tekst kopieert wordt automatisch de originele tekst zonder afbreektekens gekopieerd (mits de browser het oncopy event niet ondersteund). Ook de zoekmachine bots indexeren de originele tekst.

Meer informatie over Hyphenator is te vinden op hyphenator.googlecode.com

Google AdWords: Geld verdienen of geld verslinden?

Thu, 13 Jan 2011 14:29:00 +0100

Veel ondernemers hebben de aanbieding wel eens door de brievenbus gekregen: een coupon van 50 euro om Google AdWords op te zetten. Dat is een behoorlijk bedrag om cadeau te krijgen en voor velen een reden om eens wat te proberen met AdWords. Google helpt zelfs met inrichten aan de hand van een aantal simpele stappen om de advertentie op te stellen en de zoekwoorden te koppelen. Na de factuurgegevens op te geven kan de eerste campagne gelanceerd worden. Maar aan het einde van de dag blijkt dat de 50 euro op is zonder aantoonbaar resultaat.

Google AdWords is een manier om snel bezoekers op een website te krijgen. Maar alleen bezoekers is natuurlijk niet voldoende. Rendement (ook wel conversie genoemd) is belangrijk. Bij een juiste inrichting van AdWords is dat goed mogelijk. Want AdWords is een marketingtool, waarmee een boodschap exact kan worden afgestemd op de doelgroep. Dat vraagt onderzoek naar de manier waarop potentiële klanten zoeken.

Bedenk voor het inrichten in Google AdWords eens welke woorden belangrijk zijn om op gevonden te worden. Categoriseer dit in aparte producten en diensten en gebruik vervolgens de keyword tool van Google om te zien of de zoekwoorden ook daadwerkelijk gebruikt worden en wat de mate van concurrentie is. Veel concurrentie betekent hogere kosten per klik en meestal een lagere conversiegraad. Het is het overwegen waard om naar alternatieven of combinaties te zoeken voor dergelijke woorden. Als het doel is om een product te verkopen, gebruik dan geen algemene zoekwoorden. Dit leidt vooral tot bezoekers die algemene informatie aan het vergaren zijn.

Nadat alle zoekwoorden en varianten gecategoriseerd zijn kan Google AdWords ingericht worden. Te beginnen bij het opstellen van de campagnes en advertentiegroepen. Een advertentiegroep ligt in het verlengde van een campagne. Wanneer de campagne gaat over Webdesign, dan kunnen de advertentiegroepen bestaan uit (bijvoorbeeld) Webdesign Amersfoort en Webdesign Barneveld. Onder de advertentiegroep zelf vallen de zoekwoorden die betrekking hebben op die groep, zoals ‘Website ontwikkeling Amersfoort’. Meerdere campagnes zijn aan te raden wanneer er meerdere budgetten voor aparte diensten of producten wenselijk zijn of op aparte plaatsen of landen getarget wordt. Hierover meer in de volgende blogpost.

Hulp nodig bij het opzetten van een campagne? Of de opzet en/of het beheer uitbesteden? Bel ons gerust op 033-7370123 of maak gebruik van het contactformulier.

Websites op hoge resolutie schermen

Sun, 28 Nov 2010 18:40:00 +0100

Een zichtbare revolutie vindt momenteel plaats in de beeldschermenindustrie, met name die van de nieuwste mobiele telefoons. Deze bieden steeds hogere resoluties waardoor de leesbaarheid stukken vloeiender en scherper wordt. Op dit moment spant de iPhone 4 de kroon wat betreft pixeldichtheid, maar liefst 326 dpi. Het verschil met de dichtheid van een gedrukte krant of tijdschrift en die van het iPhone 4 beeldscherm is hierdoor gereduceerd tot een minimum.

Website ontwikkelaars zullen voor de nieuwe generatie schermen zoals de iPhone 4 bitmap afbeeldingen moeten aanpassen om deze scherp te laten weergeven.

In bovenstaande afbeelding staat links de originele bitmap afbeelding van het Odyssey logo en rechts een bitmap afbeelding die twee maal zo groot is en daardoor scherp op de iPhone 4 wordt weergegeven. Om te zorgen dat alleen de iPhone 4 de grote (en zwaardere) afbeelding laadt kan onderstaande css worden toegepast:

.logo a{ 	display:block; 	background-size: 240px 53px; 	width: 240px; 	height:53px; 	background: url('../images/logo_odyssey.png'); 	} @media screen and (-webkit-min-device-pixel-ratio: 2) { 	.logo a { 	 	background: url('../images/logo_odyssey@2x.png'); 		} 	}

Class .logo a beschrijft de originele eigenschappen van het logo en at-rule @media beschrijft dat voor o.a. de iPhone 4 een twee keer zo grote afbeelding logo_odyssey@2x.png gebruikt moet worden.

Dat bitmap afbeeldingen in verschillende grootten bewaard moeten worden is niet ideaal want vaak is er bij een verschaling nog een handmatige scherpte bewerking nodig. Een vector afbeelding zoals het Scalable Vector Graphics formaat (SVG) zou in de toekomst uitkomst kunnen bieden want dit formaat kan namelijk ook bitmap afbeeldingen embedden. Helaas wordt SVG nog niet door alle veelgebruikte browsers ondersteund, en om compatible te zijn zal de komende tijd nog gebruik moeten worden gemaakt van bitmap afbeeldingen.

Meer informatie over het weergeven van bitmap afbeeldingen op hoge resolutie beeldschermen (incl. soortgelijke methoden) is te vinden op How to make your web content look stunning on the iPhone 4’s new Retina display, High DPI Web Sites, Targeting the iPhone 4 Retina Display with CSS3 Media Queries, What does 320dpi mean to designers?, en Optimising for High Pixel Density Displays.

Creatief met WebFonts

Wed, 10 Nov 2010 14:05:00 +0100

Al sinds de eerste websites zijn webdesigners gebonden aan de standaard lettertypes Time New Roman, Arial, Georgia, Trebuchet MS, Courier New, Verdana, Comic Sans en Impact. Er moest namelijk rekening worden gehouden met de lettertypes die op de computers van de bezoekers waren geïnstalleerd. Spannende lettertypes waren alleen mogelijk door gebruik te maken van bijvoorbeeld afbeeldingen en Flash. Beiden zeer ongebruiksvriendelijk voor het steeds belangrijker wordende zoekmachine optimalisatie. Gelukkig is hier sinds kort verandering in gekomen met WebFonts!

Door WebFonts is het eindelijk mogelijk om je als webdesigner te onderscheiden in webtypografie. De lettertypes staan namelijk online met behulp van de @font-face-CSS-methode. Een verwijzing naar een dergelijke server zorgt voor de juiste weergave bij de bezoeker. Klinkt erg eenvoudig. En dat is het ook. Maar waarom heeft het dan zo lang geduurd voordat deze oplossing is aangedragen?

Met name de juridische kant van de lettertypes moest uitgebreid geregeld worden. Logisch, want iemand heeft een lange tijd gewerkt aan het ontwikkelen van een font, die plotseling 'vrij' verkrijgbaar zou zijn op internet. Na lang onderhandelen zijn er websites als Typekit.com en fontdeck.com gekomen die abonnementen aanbieden. Bij andere websites is er de mogelijkheid om, tegen een eenmalig bedrag, het lettertype te kopen voor webgebruik.

Ook Google heeft zich op de markt van webfonts gestort met Google Font API. Het aanbod is hier beperkt, maar de werking is erg eenvoudig. Door middel van een HTML-regel zorg je er voor dat het lettertype op je website wordt getoond.

Veel bedrijven willen graag dat het huisstijl lettertype wordt doorgezet naar de website. In veel gevallen is dit mogelijk, maar een kanttekening is dat niet alle lettertypes zich lenen voor het internet. De leesbaarheid laat nog wel eens te wensen over. Wij beperken ons in dat soort gevallen tot het stylen van titels en subtitels, zoals op de website van Voel je Thuis of Peter Aarsman Groente & Fruit, Onze eigen website bestaat volledig uit Webfonts.