Proximedia: harde analyse door collega Dieter
Dit bericht werd, wegens redenen, verwijderd.
Dit bericht werd, wegens redenen, verwijderd.
De @media 2008 web design and development conference vindt dit jaar plaats in San Francisco (22-23 mei) en London (29-30 mei). Het programma is sinds vandaag bekend en omvat enkele invloedrijke sprekers.
Namen als Andy Budd, Andy Clarke, Simon Willison, John Resig, Jon Hicks en Stuart Langridge zullen menig webdesigner en -ontwikkelaar bekend in de oren klinken. Het programma is nog onvolledig, dus er kunnen nog interessante onderwerpen toegevoegd worden.
Registreren kan ook vanaf vandaag en hoe eerder je registreert, hoe voordeliger.
Marlon zal op @media in London vertegenwoordigd worden door Vincent en mezelf. Ik kijk er al naar uit!
Vaak wagen printdesigners zich aan de wondere wereld van het webdesign. Alleen beseffen ze in de meeste gevallen niet de fundamentele verschillen tussen beide werelden. Bij printdesign zijn er bepaalde constanten. Een brochure, boek of magazine ziet er zo uit, met dat lettertype, die grootte en opmaak. Bij het web ligt dat anders: verschillende browsers, lettergroottes, schermresoluties,… Allemaal parameters waar je als designer weinig controle over hebt.
Dus vandaar deze tips, verzameld uit eigen frustraties bij het verwerken van enkele van die designs.
Webdesign is een vak apart, en heeft zijn eigen karakteristieken. Het heeft dus geen enkele zin om een website eruit te laten zien als een boek, magazine, brochure of ander printproduct. Een website ziet er best van al uit als een website. Lijkt logisch, maar dat is blijkbaar al een eerste drempel voor printdesigners. Probeer er dus eerst achter te komen hoe goede websites er tegenwoordig uitzien en leer de beperkingen van HTML kennen.
De printsector is toch wel eerder bekend om een vrij traag evoluerende sector te zijn. Hun technieken zijn de laatste jaren ook wel hevig gemoderniseerd, maar toch evolueert het veel minder snel dan de webdesignsector. Zo zweren nog veel printdesigners bij Flash intro’s, navigatie in Flash of zelfs volledige Flash websites.
Mijn ervaring is dat mensen zo snel mogelijk informatie willen. Ze willen geen complexe interfaces met animaties of spielereien. Vermijd elke barrière die mensen afschrikken, of verhinderen om snel hun doel te bereiken.
Flashnavigatie was misschien 5 jaar geleden trendy, maar de tijden zijn veranderd. Flash is ook tijdrovend wanneer je er navigaties of websites moet in ontwikkelen. Wat je in HTML op een 5-tal minuten kan, duurt in Flash misschien 5 uren.
Uiteraard is Flash wel voor andere toepassingen een uitstekende technologie, zoals multimediatoepassingen met video en audio, maar voor interactiviteit op websiteniveau kan je beter gebruik maken van webstandaarden zoals XHTML, CSS en Javascript.
Zoals ik al zei in de inleiding moet je bij webdesign rekening houden met verschillende parameters. Je kan er dus niet van uitgaan dat wat je ontwerpt ook zo ervaren wordt door de eindgebruiker. Welke browser gebruiken ze? Gebruiken ze grotere lettergroottes voor een betere leesbaarheid? Bekijken ze de site op kleinere schermen van mobiele toestellen?
Het is een zeer abstracte wetenschap en je moet al die factoren kunnen incalculeren en proberen op te vangen. Het is dus onmogelijk om pixel perfecte designs te maken. Zeker vaste hoogtes voor tekstblokken zijn dus uit den boze.
Hou er rekening mee dat er vaak meer content op een site geplaatst wordt, dan je oorspronkelijk voorzien had.
Als je toch Flash gebruikt, dan zijn geschreefde en cursieve letters niet aanbevolen. Ze werken storend en zijn moeilijk leesbaar. Ook te dunne letters moet je zeker vermijden. Een bijkomend nadeel van Flash is dat de tekst niet kan vergroot worden, dus dan is de lettertypekeuze zeker belangrijk.
Voor HTML kan je geen speciale lettertypes gebruiken en dien je gebruik te maken van een van de standaardlettertypes. Voor kortere tekstelementen kan je eventueel wel van image replacement gebruik maken. Probeer in je designs ook de anti-aliasing van de letters uit te schakelen, omdat het dan een realistischere weergave geeft van het eindproduct.
Als je gebruik maakt van exotische lettertypes, zorg dan dat de lettertypes meegeleverd worden bij het design. Let er ook op dat ze niet alleen op Mac werken, want in de webwereld wordt in tegenstelling tot de printsector veel gebruik gemaakt van PC’s.
Het is ook niet nodig om exact dezelfde fonts te gebruiken in je offline campagnemateriaal als op de website. Zo kan je even goed in dezelfde stijl blijven met andere fonts.
De verleiding is natuurlijk groot om in je vertrouwde softwarepakket te ontwerpen, wat in de meeste gevallen InDesign zal zijn. Toch kan je beter gebruik maken van programma’s als Photoshop, of eventueel Illustrator. Dat maakt het makkelijker voor diegene die je ontwerp moeten slicen, want webdesigners gebruiken praktisch nooit Indesign. Je kan wel exporteren naar PDF, maar dat is alles behalve praktisch en zeker geen perfect bronmateriaal.
Formulieren hebben een vrij standaard uitzicht over de verschillende browsers. Kom dus niet op de proppen met mooi ogende, maar onuitvoerbare designs voor formulieren.
Voorbeelden van goede webformulieren kan je vinden in de Wufoo Form Template & CSS Design gallery.
Uiteraard wil ik printdesigners niet in een slecht daglicht plaatsen met dit artikel, maar het is opvallend dat ze vaak niet genoeg op de hoogte zijn van de beperkingen die wij dagelijks moeten omzeilen. Als iemand van jullie nog meer tips wil geven, of ervaringen wil delen, doe maar gerust.
Dit bericht werd, wegens redenen, verwijderd.
Na 3 dagen in het offensief is de strijd al geleverd. Waar het allemaal om ging was de termcombinatie betere webdesign in Google. Op de website die tot voor kort op 1 stond, staat dit te lezen:
De proef op de som: Ultieme test in Google!
betere webdesign => Google: roosensdesign.com = 1e plaats op 409.000.
Deze resultaten werden bekomen zonder enige betaalde campagne zoals Adwords, PPC (pay per click) en zonder louche trucs ;-)
Een aantal bedenkingen:

Zoals ik enigszins verwacht had heeft het dus weinig moeite gekost om die site van de nummer 1 positie te krijgen. Maar wat vooral op te merken valt, is dat er geen ongepaste technieken aan te pas zijn gekomen. Gewoon beter opgemaakte HTML pagina’s en een dosis gezond verstand.
Zoals ik al zei, begint alles bij de goede opmaak van je pagina’s. De HTML code moet semantisch in elkaar passen. Less is more, dus al het overbodige eruit smijten en enkel de essentie laten staan.
Goed structureren van HTML is eenvoudig te leren. Zorg gewoon dat je alle beschikbare HTML elementen kent, en dat je weet wanneer je wat moet toepassen. Ervaring is hierin de grootste leermeester. Toen ik pas begon met slicen heb ik eerst gekeken hoe de grote jongens het deden. Bestudeer veel code en start klein en eenvoudig.
Eigenlijk is het vrij makkelijk om goed te scoren in zoekmachines eenmaal je pagina’s zijn geoptimaliseerd. Websites die slechts zeer sporadisch worden aangepast zijn gedoemd om stilaan in de vergeetput te verdwijnen. Content is King, dus update regelmatig!
Het is logisch dat blogs hierdoor zeer goed scoren. Updates gebeuren bijna dagelijks, gebruikers reageren op artikels en hierdoor krijg je geregeld een nieuwe boost, de meeste blogtemplates zitten semantisch vrij goed in elkaar, … Als je dan zelf nog eens de boel verder verfijnd kan je makkelijk goede posities in de zoekresultaten bemachtigen.
Mijn website stond, op het moment dat ik het betere webdesign artikel publiceerde, op de 23ste plaats en dit door eerder gelukkig toeval. Na een 2-tal dagen (de gemiddelde indexeertijd van Google op mijn website), stond ik op positie 2.
Met aan de basis hiervan:
h1 tag;strong geplaatst;Na opnieuw 2 dagen werd de onderliggende pagina (betere webdesign artikelpagina) geïndexeerd en ja hoor, finish bereikt. Dit vooral de danken aan het slim inzetten van paginatitels. De meest belangrijke informatie, dus de titel van het artikel, staat vooraan vermeld. En dit heeft echt het verschil gemaakt. Toen ik op 2de positie stond, was slechts de homepagina opgenomen. De artikelpagina zelf volgde later, maar scoorde onmiddellijk.
Op een bepaald moment heeft de site van Bart zelfs de eerste positie in Google ingenomen. Dit is dankzij de web-based RSS reader op zijn website. Blijkbaar is dit alsnog goed gekomen door de duplicate content filter in Google. De zoekmachine zal gemerkt hebben dat er een link gelegd was vanuit die reader. Hierdoor wist Google dus waar de originele tekst te vinden was. Had die link er niet geweest, dan had de site van Bart natuurlijk hoger gestaan, omdat dan uitmaakt wie de meeste autoriteit heeft.
En eigenlijk is dat het. Zelf heb ik niet meer moeite gedaan dan dat artikel te plaatsen. Tot mijn verrassing hebben een aantal mensen mijn actie ondersteund en toegejuichd, ook al had ik het allemaal heel vaag gehouden, misschien zelfs té vaag. Sommigen hebben zelfs een link geplaatst naar het artikel. Dit alles heeft misschien voor nog een extra boost gezorgd. Waarschijnlijk komen ze zelf ook nog wel hoger te staan dan de ex-nummer-1.
Hopelijk heb ik met deze actie niemand ontgoocheld, want het lijkt alsof sommige dachten dat ik de webdesignwereld op zijn kop ging zetten. Wat kan ik daarop zeggen? Dat je klein moet beginnen zeker?
Mijn grote doel was om aan te tonen hoe snel je de resultaten in Google door elkaar kan schudden, op voorwaarde dat de andere concurrerende sites minder goed gestructureerd zijn, of over minder backlinks beschikken. Alleen heb ik een te zwakke tegenstander uitgekozen. Maar ja, ik had het niet zien aankomen zoveel reactie op het artikel te krijgen.
Dus wie zal mijn volgende slachtoffer worden? Misschien wel u? :)
Update: Bert heeft haasje over gespeeld. Hij staat nu op 1 met nog minder moeite. Hiermee is weer maar eens bewezen dat autoriteit en backlinks van uitermate groot belang zijn. Benieuwd of het nog zal evolueren…