Het concept is simpel:

• Op www.voordelige-websites.be kiest u een passend ontwerp, in lijn met de look & feel van uw zaak. Na betaling ontvangt u persoonlijke inloggegevens waarmee u de website zelf kan opvullen in het gebruiksvriendelijke Content Management Systeem – Colibri-CMS. Met sfeerbeelden, nieuwsberichten, … kortom: met alle informatie die u met uw klanten wil delen.
• Dankzij het CMS kan u de inhoud van uw website nadien ook zelf beheren en kan u nieuwsberichtjes plaatsen. Zo blijft uw website altijd up-to-date. Bovendien kan u dankzij de juiste keywords en metatags in het CMS zorgen voor een goede plaats in de rankings van zoekrobots zoals Google.
• Na een testperiode van 10 dagen zetten we de site van uw zaak online. Klaar om door uw klanten ontdekt te worden! En als kers op de taart, zijn sites gecreëerd met Voordelige-websites.be bovendien ook goed leesbaar op de iPad. Een echte must!

Benieuwd hoe een website gebouwd met voordelige-websites.be eruit ziet?

Neem gerust een kijkje op www.zitouna.be of www.sms4light.be

Hebt u hier vragen bij of wil u ons advies?
Aarzel dan niet om ons te contacteren.
We helpen u graag. Met raad én daad!

Griet@wallacesanders.be

Tel. 015/200.100.

Het bedrijf Stockmans Kalenders uit Duffel bezorgt haar klanten al generaties lang kalenders, agenda’s en kunstboeken op maat. Op hun nieuwe website kan u hun kalendercollecties ontdekken en hun portfolio bekijken.

Samen met Bruno Devos bekeken we hoe we het aanbod op een overzichtelijke manier online konden presenteren.
Het resultaat mag zeker gezien worden: een stijlvolle website die de klant volledig kan beheren kan aanvullen met nieuwe realisaties.

Neem vlug een kijkje in het “kalender-laboratorium” van Stockmans op www.stockmans.be

Wallace & Sanders ontwierp hun nieuw logo met bijhorende huisstijl en lanceerde deze week ook hun nieuwe website http://www.greencitytours.be/

Op zoek naar fun met vrienden of familie, een originele geschenkbon of een toffe teambuilding activiteit? Greencity Tours heeft zeker een route die je kan bekoren…

Deze evolutie zal zich met de opkomst van het mobiele internet nog verderzetten.  Want je gaat op de trein ook liever je iPhone bovenhalen dan je laptop.  Altijd en overal online is geen wilde droom, het is een werkelijkheid die zich vandaag al aan het voltrekken is.  Wanneer dan ook de tarieven voor mobiel internet nog zakken, zal de vraag naar “altijd en overal online” ook toenemen.

Maar deze mobile devices hebben één groot nadeel… hun leesbaarheid.  Wanneer je een volledige website probeert in een klein scherm te frommelen, krijg je al snel dat je constant moet in of uitzoomen.  En echt werkbaar is dat model niet, zeker niet wanneer het gaat om websites die frequent bezocht worden.  De oplossing is om een website te (laten) ontwerpen die geschikt is voor deze nieuwe devices.

Mobiele websites

Mobiele websites hebben minder schermpotentieel, dus komt het er nog meer op aan om de boodschap zo beknopt en efficiënt mogelijk weer te geven.  Nog meer dan bij websites moet er gekeken worden naar de essentie.  Een juiste architectuur, een hoge graad van gebruiksvriendelijkheid en het bieden van een superieure gebruiksvriendelijkheid vormen hierbij de sleutel tot succes.

Je moet jezelf verschillende vragen stellen: Hoe ga ik interactie aangaan met mijn bezoekers?  Welke informatie zoeken zij vooral?  Wie zijn mijn bezoekers?  Welke gebruikservaring willen we de bezoekers geven?  Gaan we enkel voor een online visitekaartje of doen we veel meer?  Kiezen we misschien voor een applicatie die men moet installeren?

Dat mobiele devices een groot deel van het surfverkeer gaan overnemen, staat nu al vast.  De vraag is alleen hoelang bedrijven het gaan uitstellen om de stap naar een mobiele website te nemen.

Huidige toestand in België

In België hebben veel bedrijven ondertussen de boodschap al begrepen.  Vooral mediabedrijven hebben de stap reeds genomen.

Een interessant lijstje

• Sporza (http://m.sporza.be)
• De Redactie (http://m.deredactie.be)
• De Standaard (http://m.standaard.be)
• Gazet Van Antwerpen (http://m.gva.be)
• De Tijd (http://m.tijd.be)
• Het Belang van Limburg (http://m.hbvl.be)
• Gouden Gids (http://m.goudengids.be)
• Meteo (http://m.meteo.be)
• Buienradar (http://buienradar.mobi)
• NMBS (http://m.nmbs.be)
• RailTime (http://m.railtime.be)

Uiteraard zijn er ondertussen al meer, suggesties zijn altijd welkom.

Eigenlijk was het event al een dagje eerder van start gegaan met enkele workshops, maar ze konden mij geen twee dagen missen op kantoor om ook op maandag aanwezig te zijn.

Bij het toekomen viel me meteen op dat de grote zaal die tijdens voorgaande edities wel gebruikt werd nu niet meer deel uit maakte van de beurs.  Door de iets lagere opkomst (of althans zo leek het toch) was dit een zeer goede keuze.  De opkomst leek lager, of dit ook daadwerkelijk het geval was kunnen enkel de organisatoren bevestigen, maar ook het aantal sponsors leek veel minder dan andere jaren.  Daar waar Microsoft vorig jaar nog met een grote stand aanwezig was waren er dit jaar geen echt grote stands te bekennen.  De reden hiervoor is niet meteen duidelijk, maar ik had persoonlijk ook de indruk dat er minder ophef gemaakt was voor de start van het event.  Programma en inschrijvingen waren pas twee weken op voorhand toegankelijk en ik heb zelf als trouwe bezoeker geen mailing mogen ontvangen.

Nochtans heeft Multi-Mania alles om nog te groeien.  De opleidingen waaraan deze beurs gekoppeld zijn, zijn van een hoog niveau en Kortrijk krijgt in de Belgische multimedia-wereld toch enig aanzien.  Scholen in Antwerpen, Mechelen, Hasselt, … kunnen enkel jaloers zijn op een dergelijk evenement.  Daarom blijf ik het vreemd vinden dat gelijkaardige opleidingen in andere steden niet actief uitgenodigd worden (misschien zelfs om mee te werken).  Dit is niet alleen positieve reclame voor de opleiding aan Howest, maar zorgt er ook voor dat gelijkaardige opleidingen hun niveau zullen opkrikken.  En als werkgevers in de sector zien we dit toch allemaal graag gebeuren.

Minpuntje aan de opeenvolging van sprekers… er was geen endnote waarbij iedereen terug in de zelfde zaal terecht kwam.  Ja, er was een Award-uitreiking, maar persoonlijk is dit voor mij als niet-student niet interessant genoeg om te blijven.  Een endnote zou geen slechte beslissing zijn om het geheel van presentaties af te sluiten.

Keynote

Zoals traditioneel het geval, werd de opening keynote verzorgd door hoofdsponsor van dit event Adobe.  Het werd een inleiding tot CS5 on XTC.  De korte tijd die Serge Jespers en Ton Frederiks toebedeeld kregen was wel nefast voor de vele nieuwe features die CS5 te bieden heeft.  Maar dit werd ruimschoots goedgemaakt in de verschillende sessies die hier dieper op in gingen.  Met een kleine steek naar Apple werd er een preview gegeven van Flash 10.1 op Android wat werkelijk draait als een droom.

The art of emotional design

Aral Balkan is een topspeaker en is op zich al een reden om jaarlijks aanwezig te zijn op Multi-Mania.  Zijn betoog was niet geheel nieuw, maar vormde wel een verdere aansluiting op de presentatie van vorig jaar.  Hij sprak over interaction design en experience design (XD).  Met de uitspraak: “When building apps/websites, don’t worry about your own problems, but those of the users” slaat hij de nagel op de kop.  Ik zie zelf nog te vaak websites die gemaakt zijn door developers, maar niet voor de gebruikers.  Usability is de eerste stap waarover men het nu ondertussen wel eens geraakt.  De volgende stap is ‘the art of user experience’ ofwel experience design.  Hierbij zijn apps/websites niet alleen bruikbaar en “edible”, maar een plezier om te gebruiken (delightful, pleasurable, beautiful, magical)

IT entrepreneurship & innovation

Deze presentatie had plaats in een zaaltje dat zich in een totaal andere locatie binnen in Expo Kortrijk bevond.  Een totaal foute keuze waarbij je afdwaalde van de beurs zelf en het gevoel had dat dit totaal geen belang had.  Nog een zeer groot nadeel was dat er niemand in dit lokaal in staat bleek de geluidsinstallatie in orde te krijgen.  Hierdoor was niet alleen de spreker niet echt goed verstaanbaar, maar liep meer dan 50% van zijn presentatie in het water (filmpjes die geen geluid hadden).  Een fout van de organisatie, maar zeker ook van de spreker.  Always test your equipement!

De presentatie werd gegeven door Bix Jacobse (CEO van Groninge Internet Exchange en Internet Valley).  Hij sprak ons over het grootste probleem waar starters mee te maken krijgen: GELD.  Banken denken in risico’s en daarom krijgen nieuwe, innovatieve ideeën vaak niet de groeikansen die ze nodig hebben.  Nochtans starten de meeste innovatieve ideeën in kleine onafhankelijke bedrijfjes die dan later opgekocht worden door grotere bedrijven.  Kleine starters met de juiste visie zorgen er op die manier voor dat er nieuwe initiatieven komen en daar is geld voor nodig.  Internet Valley wil voor een deel hieraan tegemoet komen door hen te steunen.  Voor mezelf had deze presentatie geen waarde, maar ik kan mezelf inbeelden dat studenten hier wel iets aan overgehouden hebben.

Design is Dead presents: The Deleted Scenes

Deze presentatie had ik reeds gezien, maar omdat mijn collega’s van Wallace & Sanders deze wilden zien heb ik me er nog maar eens bij gezet.  Meer informatie over deze presentatie kan je terugvinden in mijn verslag van de Adobe Usergroup Meeting Design SIG.

Ook hier even toch de organisatie op de vingers tikken voor de problemen met het geluid.

eBoy Happy 13

Deze Duitse grafici werkten al voor enkel zeer grote klanten en zijn wereldberoemd met hun pixelbased 3D-ontwerpen.  Er zijn zelfs spelletjes ontwikkeld op basis van hun specifieke stijl.  Hoewel deze presentatie beter in het Duits werd gegeven (want “sie sprachen English mit hair) was het een zeer leuke presentatie die een blik richtte op hun evolutie.  3 artiesten die elk van thuis uit samenwerken (virtual office) binnen 1 zelfde stijl is uniek.  Zeker als je bedenkt dat door het halsstarrig vast te houden aan deze specifieke stijl zij toch groot zijn geworden.  Dit geeft aan dat doorzettingsvermogen en een duidelijk visie tot succes kunnen leiden.

Ondertussen zijn zij mee geëvolueerd en zijn zij van print naar web en zelfs naar real-life 3D-modellen gegaan.

The adventures of Jam Boy

Mijn eerste gedacht bij deze titel was dat we naar iets muzikaals gingen kijken.  Lekker jammen met leuke deuntjes en sounds.  Niets was minder waar.  In plaats daarvan kregen we een presentatie over confituur.  Mijn eerste reactie was “RUN!”, maar ik ben toch blijven zitten en heb zo misschien wel de leukste presentatie van Multi-Mania mogen meemaken.  Fraser Doherty is een selfmade man die gewoon graag confituur maakt.  Hij kwam op het idee om deze aan de buren te verkopen en vanaf toen is het eigenlijk totaal ontspoord.  Toen de keuken van zijn ouders te klein werd, ging hij als tiener nog op zoek naar glorie bij de grote spelers.  En nu op 21 kan hij zich tot één van de groten rekenen.  De manier waarop deze jonge ondernemer vanuit een dom idee een succesvol zakenman geworden is, is ronduit inspirerend.

Kicking ass in advertising land

AdNerds staat ook altijd garant voor een leuke presentatie.  Deze keer was het eigenlijk één grote vacature-campagne, maar dat neemt niet weg dat het leuk was om te volgen.  Ze begonnen hun presentatie met online media te vergelijken met de film Wall-E.  Het hele internet is één grote puinhoop met teveel rommel, de kunst is om tussen al deze junk waardevolle dingen te vinden en deze te delen (met EVE).

Volgens AdNerds zijn er twee types mensen: die met een analogically conditioned brain en die met een digitally conditioned brain.  De eerste groep denkt altijd straight to business, recht door zee, just do it.  De tweede groep is anders, zij denken in netwerken en zij denken verder dan het vanzelfsprekende.  De tweede groep zijn zij die creatief met nieuwe technologie kunnen omgaan.  Die begrijpen waar we met technologie naar toe kunnen.

The process of re-designing a successful blog

Hoewel ik dit stukje door Veerle Pieters zeer leuk vond, werd dit door mijn collega’s iets minder gesmaakt.  Zelf ben ik al een jarenlange fan van de blog van Veerle Pieters, maar mijn collega’s kenden deze blo niet echt.  Daarom werd het voor hen gebrachte verhaal iets abstracter en was er geen kader waarbinnen zij dit konden plaatsen.  En hier kan ik volkomen in volgen.  De inhoud was leuk gebracht, maar door het uitblijven van enige technische details werd het voor mensen die de blog niet kennen misschien wat magertjes.  Maar ikzelf heb de presentatie zéér gesmaakt en was blij te zien dat de langverwachte restyle er eindelijk was (ik ben dan ook thuis meteen gaan surfen op de vernieuwde blog).

Onderstaande lijst is opgesteld met de BIN-normen als basis. In praktijk wordt hier nochtans soms van afgeweken. Wetenschappelijke teksten maken bijvoorbeeld vaak gebruik van een halve spatie. Ook huisstijlregels kunnen het gebruik van spatie/geen spatie bepalen. Maar wanneer de onderstaande normen in acht worden genomen is het resultaat zeker correct en eenvoudig leesbaar.

Er komt géén spatie voor:

• Een dubbelpunt > Ons aanbod:_heldere communicatie.
• Een komma > Photoshop,_het beste programma ooit,_is nu nog beter.
• Een punt > Deze tekst gaat over spaties._Dit is niet onbelangrijk.
• Een puntkomma > De kat was alleen;_de hond had haar verlaten.
• Een uitroepteken > Dit is belangrijk!
• Een vraagteken > Wat is design?
• Een graadteken > Een hoek van 45°.

Er komt een spatie voor:

• Een procentteken > Er wordt 21_%_BTW gerekend
• Een promilleteken > Een alcoholniveau van 0,70_‰_is veel.
• Een rekenkundige operator > 25_+_5_=_30
• °C > Vandaag is het 16_°C.

Na een leesteken komt één spatie

• Photoshop is één van mijn favoriete programma’s._Illustrator is ook een fijn programma.

Het is verbazingwekkend vast te stellen hoeveel webbouwers niet weten met welke schermresolutie hun klanten de website bekijken.  Onderstaande statistiek dateert van september 2009 en is afkomstig van meer dan 1 miljoen (hoofdzakelijk Belgische) bezoekers.  Uiteraard verschilt deze situatie van website tot website, maar de tendens wordt duidelijk aangegeven in deze grafiek.

Schermresolutie situatie september 2009

Resolutie van een computerscherm = breedte x hoogte

Hoewel bij websites de belangrijkste evolutie de breedte is (bepaald hoe breed uw website kan getoond worden) is ook de hoogte niet onbelangrijk.  Mensen scannen namelijk in één oogopslag het initiële beeld van uw website.  Wanneer interessante of belangrijke informatie wegvalt doordat men moet scrollen, wordt dit door de gebruikers ook als minder belangrijk beschouwd.

Op basis van onderstaande grafieken blijkt het dat uw website optimaal gebasseerd is op 1024 pixels breed en 769 pixels hoog.

Schermresolutie Breedte

Schermresolutie Hoogte

Waar moet u rekening mee houden?

Kiest u voor een website met vaste breedte dan kiest u best voor een website gebasseerd op 1024px.  Zo voorkomt u dat de bezoekers een horizontale schuifbalk te zien krijgen.  Er is dan minder dan 2,5% dat uw bezoekers alsnog horizontaal moeten scrollen.  Een layout die zich aanpast aan de breedte van het computerscherm is nog optimaler, maar dit heeft een grote invloed op het design en dus vaak ook op de kostprijs van de website.

Qua hoogte dient u er voor te zorgen dat alle belangrijke informatie boven de virtuele vouwlijn van 768px terecht komt.  Menu-items, call-to-action knoppen, logo, … dient dus bovenaan de pagina te verschijnen.  Bijna 70% van de bezoekers zal zelfs meer te zien krijgen.

Waar extra rekening mee gehouden moet worden zijn de schuifbalk links en de toolbars bovenaan de browser.  Hierdoor verliest u in de breedte nog eens 20 à 25 pixels en in de hoogte 150 tot 180 pixels.

En wat met mobile internet?

Uiteraard zijn GSM-schermen kleiner, maar de meeste mobiele devices zullen u toelaten in te zoomen op regio’s.  Idealiter laat u uw website ontwikkelen speciaal voor mobiele devices.  Daarbij wordt een mobiele versie van de website gemaakt.  Deze kan dan een deel van de website weergeven, maar met een layout die speciaal voorzien is voor het kleine scherm.  Deze kan je dan bereiken via http://mobile.website.be of http://m.website.be of nog beter detecteert uw website dit zelf.

Lettertypes of fonts worden standaard meegeleverd bij de aanschaf van een computer.  Op het moment dat je een operating systeem (Windows of Mac) installeert op je computer worden er standaard een deel lettertypes mee geïnstalleerd.  Dit kan verschillen van besturingssysteem.  Het standaardpakket van lettertypes dat inbegrepen is bij een Windows-computer verschilt van deze van een Apple-computer.  Andere besturingssystemen of mobiele toestellen kunnen nog andere combinaties hebben.

Er zijn twee types fonts: rechtenvrij (of open source) en betalend.  Daarnaast zijn er ook nog lettertypes die wel gratis zijn bij persoonlijk gebruik, maar betalend wanneer deze in commerciële activiteiten gebruikt worden (een folder, een website, …).  Gratis fonts kan je vinden op allerlei websites, maar de beperking zit vaak in kwaliteit in in afgeleide types (verschillende diktes, verschillende deelstijlen, …).  Betalende fonts kan je kopen online, maar deze zijn vaak zeer duur voor persoonlijk gebruik (tot €1000 of meer voor een font-set).

Fonts worden per type in een font-set of font-family samengevoegd.

Helvetica font family

Web-safe fonts

Web-safe fonts of lettertypes voor op het web, zijn geacht op nagenoeg alle systemen te werken.  Daardoor verhoogt de kans dat jou ontwerp correct zal weergegeven worden.  Niets is zo lastig als wanneer je op een website terecht komt waarbij het ontwerp fout weergegeven wordt omdat er een alternatief lettertype gebruikt werd.  Want wanneer uw computer het gebruikte lettertype niet terugvindt op de computer zelf, wordt er een substituut of vervangend lettertype gebruikt.

Bij de opmaak van een website zal de webbouwer op het moment van ontwikkeling ook al een reeks “fallback” of alternatieve lettertypes aanduiden zodat hij er zeker van kan zijn dat de computer alsnog een aanvaardbare keuze maakt van lettertype.  Wanneer je toch een ander lettertype wenst te gebruiken kan dit door middel van images of andere trucs met JavaScript en CSS, maar idealiter wordt voor een web-safe font gekozen.

font-family: “Liberation Sans”, Arial, Helvetica, sans-serif;

Initieel wordt Liberation Sans gebruikt, indien niet aanwezig wordt Arial gekozen, indien Arial ook niet aanwezig is wordt Helvetica gebruikt, enz.

Volgende reeks lettertypes worden op nagenoeg alle systemen standaard meegeleverd en zullen dus meestal correct weergegevens worden.  Let wel, er zijn lettertypes die in de laatste versies van de besturingssystemen meer en meer standaard geworden zijn en dus ook een mooi resultaat zullen geven, maar om zeker te zijn is onderstaande lijst een goede leiddraad.

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings
• Windings

Op school leer je dat rood, geel en blauw de basiskleuren of primaire kleuren zijn.  Vanuit deze primaire kleuren kan de schilder dan secundaire kleuren vormen en de tertiaire kleuren.  Het is echter niet mogelijk met deze kleuren wit te bekomen.

Traditionele kleurmengsysteem

Het additieve kleurmengsysteem (RGB)

RGB staat voor Rood, Groen, Blauw.  Het zijn de kleuren die voornamelijk gebruikt worden om de kleuren in beeldschermen weer te geven.  In beeldschermen worden kleuren weergegeven als een samenvoegen van lichtstralen.  Een scherm is zwart en straalt geen licht uit, wanneer je echter de drie kleuren rood, groen en blauw gaat uitstralen krijg je wit.  Omdat het hier om een optelling van gekleurde lichtbundels gaat spreekt men van additieve kleuren.  Op onderstaande tekening kan je zien hoe dit systeem werkt.

Additieve kleurmengsysteem

Het substractieve kleurmengsysteem (CMYK

CMYK staat voor Cyaan, Magenta, Yellow.  De K staat voor “Key” en is zwart, men koos voor de letter K omdat een B (van Black) te verwarrend zou werken met Blue uit het RGB-systeem.   CMYK wordt gebruikt bij drukwerk.  Hier vertrekken we van een wit vlak dat licht weerkaatst en men gaat door het toevoegen van inkt de kleur weg nemen.  Vandaar de naam substractieve kleuren.  Onderstaande tekening geeft de werking weer van CMYK kleuren.

Substractieve kleurmengsysteem

Pantone en RAL

Pantone en RAL zijn twee systemen waarbij de kleuren reeds “voorgemengd” zijn.  Deze kleuren zijn op voorhand door een laboratorium bepaald, waardoor iedereen die met deze kleuren werkt exact de juiste kleur verkrijgt.
Pantone is vooral bekend in de drukkerswereld.  Vooral bij logo’s waar je steeds de zelfde kleur wil verkrijgen is Pantone interessant.  RAL wordt momenteel vooral gehanteerd bij het bepalen van de kleuren van raamprofielen, deuren, garagepoorten, …

Gamut

Gamut of kleurengamma bepaald de hoeveelheid kleuren die een apparaat kan weergeven.  Dit wordt dan vergeleken met het kleurenspectrum dat het menselijk ook kan waarnemen.