Ook wij hebben onlangs een mobiele versie van deze website gelanceerd, inclusief weblog. Alle toestellen met een mobiele browser - gaande van de iPhone over Android tot Windows Mobile - zijn welkom op http://m.goodbytes.be.

Het bouwen van de mobiele website bovenop ons reeds bestaande content management systeem was op zich makkelijker dan verwacht, maar toch vonden we maar weinig nuttige informatie over het ontwikkelen van websites voor mobiele toestellen. Veel zaken moesten we zelf uitzoeken en hier delen we graag onze bevindingen.

We hebben het in dit artikel niet over het bouwen van iPhone Apps, of Android-applicaties, maar wel over het maken van toegankelijke mobiele websites en applicaties die vanuit een browser op elk mobiel toestel bruikbaar zijn.

1 - Kies je mobiele strategie

Native iPhone/Android/Windows Mobile/...-applicaties zorgen voor een meer naadloze gebruikerservaring op het toestel in kwestie, maar het probleem is dat deze apps telkens device of platform specifiek zijn. Je dient dus voor elk platform een andere applicatie te ontwikkelen én te onderhouden, iets wat voor kleine en zelfs grotere ondernemingen onbegonnen werk is. Bovendien sluit je alle andere gebruikers volledig uit omdat Windows Mobile bijvoorbeeld nooit gebruik zal kunnen maken van uw iPhone-applicatie en omgekeerd.

Het geeft meteen één van de mogelijke strategieën weer die je kan volgen wanneer je je eigen webapplicatie of website mobiel ter beschikking wil stellen: een toestelspecifieke versie van je applicatie bouwen. Volgens ons is die strategie vooral nuttig wanneer je gebruik wilt maken van specifieke mogelijkheden van toestellen als de iPhone. Wie bijvoorbeeld de accelerometer van de iPhone wil gebruiken in zijn game of applicatie kan niet anders dan een iPhone-specifieke applicatie gaan schrijven.

Voor de meeste “gewone” webapplicaties en websites zijn deze snufjes gelukkig volledig overbodig en kunnen we onze functionaliteit en informatie beschikbaar maken voor mobiele browsers ongeacht het platform. Als je deze strategie volgt kan je meteen kiezen tussen twee werkwijzen. Ofwel schrijf je gewoon een geoptimaliseerde alternatieve stylesheet voor je bestaande webpagina’s, ofwel bouw je een hele alternatieve website, specifiek gericht op mobiele toestellen. We raden de laatste strategie aan, waarom lees u hieronder.

2 - Sim-pli-fy!

Mobiele toestellen hebben een beperkte schermruimte en resolutie. Bovendien bezoeken mobiele gebruikers uw applicatie vaak met een ander doel dan gewone desktop-users. Mobiele gebruikers willen namelijk vaak snel een specifieke actie uitvoeren of bepaalde informatie terugvinden. Ze zijn niet geïnteresseerd in alle informatie en afbeeldingen die een gewone website of applicatie te bieden heeft.

Daarom raden we iedereen aan om de bestaande webpagina’s of pagina’s van een webapplicatie zodanig te minimaliseren en te vereenvoudigen tot ze enkel nog maar die noodzakelijke informatie bevatten die mobiele users nodig hebben.

Om in eerste instantie te plannen welke informatie je best op je pagina’s plaatst, start je best met mockups. Zo verlies je geen tijd met onnodige code uit te schrijven en bij te sturen wanneer blijkt dat je layout niet optimaal werd ingedeeld voor het mobiele scherm.

3 - Gebruik webstandaarden, ook mobiel

We gebruiken steeds webstandaarden voor onze normale sites en dat dienen we ook of zelfs nog meer te doen voor mobiele websites. Mobiele browsers zijn namelijk even of meer gevoelig voor codefouten. Schrijf daarom je code uit in xHTML strict met valide CSS om problemen te vermijden.

Je mobiele website valideren kan via deze prima tool: http://validator.w3.org/mobile/. Deze validator geeft je bovendien veel tips over het optimaliseren van je code voor mobiele toestellen, gaande van een te grote paginagrootte tot waarschuwingen over verkeerd gebruik van hoogtes en breedtes in je mobiele website.

Vergeet niet een correcte doctype te gebruiken waarmee je aangeeft dat je voor mobiele toestellen aan het werken bent. Zo kunnen niet alleen mobiele browsers prima om met je pagina’s, ook Google Mobile zal je mobiele site herkennen en kunnen indexeren.

Enkele algemene tips om je website en code te optimaliseren voor mobiele toestellen:

• Geef gebruikers altijd de optie om je normale website te bezoeken
• Gebruik zo weinig mogelijk afbeeldingen en grote bestanden
• Zorg voor een aangepaste navigatie, liefst met een grote klikzone
• Zorg dat er maar in één richting gescrold moet worden
• Gebruik geen frames
• Gebruik geen tabellen om layouts vorm te geven
• Zorg voor labels bij alle formulierelementen

4 - Alles is relatief, zeker mobiel webontwerp

Waar we normaal gezien zonder schroom met pixels kunnen werken om onze elementen een breedte en een hoogte te geven, is dat niet zomaar het geval op mobiele toestellen. Nergens is er zo’n wildgroei aan schermresoluties als op de mobiele markt. Maak er daarom een punt van om je lettertypes, breedtes en zelfs hoogtes in te stellen in CSS via een relatieve eenheid zoals em. De mobiele validator tool zal je bovendien steeds waarschuwen wanneer je pixels gebruikt.

Het voordeel van te werken met bijvoorbeeld een 100% breedte voor je mobiele site (in plaats van x-aantal pixels), heeft tot gevolg dat deze altijd het volledige scherm van het toestel zal inpalmen. Op de iPhone bijvoorbeeld zal de site zich automatisch uitrekken wanneer de gebruiker het toestel horizontaal gaat houden, wat de leesbaarheid en bruikbaarheid erg ten goede komt.

5 - m.goodbytes.be

Er zijn verschillende manieren om je mobiele website te hosten of te koppelen aan je bestaande domeinnaam. Enkele jaren geleden nog dacht met dat domeinnamen met .mobi-extensie erg populair zouden worden. Je hebt dan echter twee domeinnamen aan te kopen, wat niet meteen handig is.

Een andere optie was om /mobile achter je domeinnaam te plaatsen. Dat kan, maar de handigste en ondertussen meest ingeburgerde oplossing is om een subdomein “m” aan te maken voor je mobiele site. Zo maken wij gebruik van http://m.goodbytes.be om mobiele gebruikers te bedienen. Dat is niet alleen kort, het is ook een makkelijk te onthouden uitbreiding van je reeds aangekochte domeinnaam.

6 - Mobiele gebruikers detecteren en doorverwijzen

Zodra je klaar bent met het bouwen van je mobiele website, is het wenselijk om mobiele gebruikers rechtstreeks door te verwijzen naar de mobiele site. Het is namelijk erg vervelend om bijvoorbeeld via Google terecht te komen op de normale website wanneer je via je mobieltje surft. Zorg daarom voor detectie van mobiele toestellen via PHP of een andere serverside programmeertaal, want Javascript zal namelijk door de meeste mobiele browsers niet of niet goed ondersteunt worden.

Om gebruikers door te verwijzen kan je de “user-agent” opvragen of gebruik maken van één van de commerciële of gratis scripts op het Internet.

Conclusie

Je verzetten heeft geen zin: het mobiele web is aan een opmars bezig. Maak van in het begin gebruik van best-practices en zorg dat je mobiele gebruikers het naar hun zin hebben. Wellicht zal het aantal mobiele bezoekers op je website (we zorgen voor Google Analytics in een volgend artikel) nog redelijk beperkt blijven. Het is wel een zekerheid dat dit aantal in de komende maanden en jaren enkel maar zal toenemen. Wees niet bang om een aantal zaken uit te proberen en stuur je mobiele website bij waar nodig!

Heb je zelf geen iPhone dan kan je zeker je vrienden of collega’s je website laten testen. Ook wij beschikken uiteraard niet over alle verschillende toestellen die momenteel op de markt zijn. Hoewel het absoluut geen vervanging is voor een echte iPhone, kan je wel starten met je website te bekijken in deze iPhone simulator!

Meer mobile tips of vragen: shoot below!

Links en extra bronnen

Best practices for mobile web
Mobile web design best practices & tips
Mobiel webdesign inspiratie gallery
10 tips to create a more usable web
8 tips to keep your mobile readers happy
Mobile Web Design: Tips & Techniques

Het gaat om een lichtgewicht versie van de gewone website, inclusief blog én geoptimaliseerd voor jouw mobieltje! Niet alleen iPhonegebruikers zijn welkom. De website is toegankelijk voor alle mobiele platformen en toestellen zoals de iPhone, Android en Windows Mobile.

Happy surfing!

Ben je op de baan en zoek je snel onze contactinformatie? Of zit je in de les - niet mijn lessen of cursussen natuurlijk - en wil je een artikel van ons blog nog een keertje nalezen, dan kan dat allemaal vanaf nu via je mobieltje.

Wil je een mobiele versie voor een website laten ontwikkelen, contacteer ons dan vrijblijvend voor meer informatie. Eventuele problemen of suggesties voor de mobiele website horen we natuurlijk graag hieronder.

The Smashing Book

Sinds kort heeft Smashing Magazine ervoor gezorgd dat we ook offline onze inspiratie-fix kunnen krijgen, dankzij het Smashing Book. The Smashing Book is exclusief te koop via de Smashing Magazine Website voor 23,99 Euro exclusief verzendingskosten. Wij mochten eerder deze week ons promotie-exemplaar ontvangen in de bus en namen er voor jullie alvast een kijkje in.

Offline meets Online

Smashing Magazine staat bekend om haar kwalitatieve blog posts online. Deze kwaliteit offline verder zetten was dus zeker een uitdaging. Het viel ons meteen op dat er geen moeite gespaard werd om het boek op een waardige manier af te leveren bij al haar lezers. Web designers zijn kritische mensen ;) en we waren dan ook aangenaam verrast toen we zagen dat het boek aan huis geleverd werd in een afgewerkte kartonnen cover in plaats van in een anonieme saaie verpakking.

Inhoud

Het boek zelf bevat interessante hoofdstukken die steeds een goede inleiding bieden tot onder andere usability, kleurgebruik, performance tuning, typografie en user interface design. Het boek is ongeveer 300 bladzijden dik en behandelt een kleine tien onderwerpen.

Het is dan ook niet meer dan logisch dat de gekozen topics steeds tot op een zekere hoogte worden uitgewerkt, maar niet meer dan dat. Gelukkig hebben de auteurs zorgvuldig gesnoeid in bepaalde onderwerpen zodat ze werden gereduceerd tot de boeiende kern van de zaak.

Hier en daar zijn er codevoorbeelden te vinden, voornamelijk in het hoofdstuk over CSS-design, maar gelukkig blijft het daarbij. De auteurs hebben zich duidelijk gefocust op het uitwerken van een tijdloos boek - voor zover dit kan binnen onze sector - waarin codevoorbeelden een ondergeschikte rol spelen. Verwacht dus zeker geen boek dat je leert programmeren of coderen, maar wel een mooi overzicht van een aantal best-practices binnen web design.

Voor wie is het boek geschikt

Zelf hebben we zeker genoten van het boek, maar ons lijken beginnende webdesigners vooral het ideale publiek te zijn voor dit boek. The Smashing Book leest vlot - ondanks de soms moeizaam buigende kaft - en heeft enkele zeer interessante topics te bieden. Wie interesse in het boek heeft raden we aan om de inhoudstafel even te bekijken op de website. Zijn daar hoofdstukken bij waar je nog heel wat over te leren hebt, dan is The Smashing Book zeker en vast iets voor u.

Gevorderde ontwikkelaars die de afgelopen jaren hun kennis via ervaring hebben opgedaan, hebben misschien meer aan een diepgaand boek over één bepaald onderwerp. Desondanks blijft The Smashing Book voor webdesigners van elk niveau een leuk hebbeding voor een faire prijs. We kunnen ons bovendien slechtere manieren inbeelden om een blog te steunen dat toch een gevestigde waarde is geworden voor de web design community.

Veel leesplezier! 

“Hoe zou email eruit zien als het vandaag werd uitgevonden?”. Dat is de vraag die Google zich bij aanvang van het project stelde en het antwoord luidde: Google Wave.

De slogan van het nieuwe paradepaardje van Google is: “Communicate en collaborate in real time”. Die slogan beschrijft exact wat Google Wave is: een online tool om in real-time met mekaar samen te werken aan één discussie of Wave.

We zouden Wave ook kunnen beschrijven als een combinatie van email en live-chat met daarbovenop nog een hoop extra functionaliteit zoals gadgets en robots. Wat die gadgets en robots juist zijn leest u hieronder.
Eerst en vooral geven we een algemene indruk van hoe Google Wave er nu juist uitziet en wat je ermee kan doen.

Google Wave Preview

Na het inloggen krijgen we een interface te zien die ons meteen doet denken aan Gmail en die herkenbaarheid is op zich een goede zaak. In plaats van emails, zien we echter alle Waves waar we onlangs aan hebben deelgenomen. Zo’n Wave kan best gezien worden als een soort uitgebreide email met live-chat mogelijkheden voor alle deelnemers, Google Maps integratie, Youtube filmpjes, voting Gadgets, fotobijlagen, voice clips en meer.

Een nieuwe Wave opstellen is even eenvoudig als een nieuwe mail opstellen in Gmail. Na het toevoegen van deelnemers aan een Wave, kan iedereen simultaan tekst, beeld, video, Google Maps en meer toevoegen aan de Wave. Het live-gebeuren is hier erg goed uitgewerkt.

Wanneer iemand een reactie plaatst terwijl we zelf onze Wave aan het bewerken zijn, dan zien we die reactie in real-time opbouwen zonder dat daardoor onze eigen inbreng wordt verstoord. Wanneer je met enkele deelnemers tegelijkertijd aan een Wave werkt, kan deze razendsnel vorm krijgen en een overload aan nuttige (of minder nuttige) informatie bevatten.

Het is ook erg eenvoudig om een stuk van een conversatie privé voort te zetten met één of enkele personen in plaats van met al uw deelnemers. Zo kan een Wave opeens voortgezet worden als een nieuwe private Wave, zonder daarbij de oorspronkelijke context van de discussie te moeten missen. De ganse Wave - met zowel de publieke als de private bijdragen - wordt zo één groot overzichtelijk geheel.

Google Wave Gadgets

De mogelijkheid om met extra invoegtoepassingen te kunnen werken, maakt van Google Wave een erg bruikbaar communicatiemiddel.

Een voorbeeldje maakt dit duidelijk:

Hoe vaak heb je al niet mails over en weer moeten sturen met daarin een link naar Google maps met de locatie van een restaurant of feestje. Of hoe vaak heb je al niet een mail naar al je vrienden moeten sturen met de vraag of ze een bepaalde avond konden afspreken, terwijl daar nooit het gewenste resultaat uit komt en waarbij je snel het overzicht verliest van wie nu al dan niet aanwezig zal zijn op de afspraak?

Google Wave biedt in zo’n situatie een oplossing door onder meer Google Maps rechtstreeks als gadget in te voegen in een Wave. Bekijk volgend voorbeeld maar eens waarin we een discussie voeren over mogelijke afspraak met vrienden in een sushi-restaurant. Let op de voting-gadget en de aanpasbare Google Map die rechtstreeks in een Wave werd ingevoegd.

Google maakt het eveneens mogelijk voor developers om zelf applicaties te schrijven en ze in te pluggen in een Wave. Zo is er onder meer al een gadget dat ons toelaat om eenvoudig Youtube-filmpjes toe te voegen aan een Wave.

Google Wave Robots

Naast Gadgets bestaan er ook Robots die aan een Wave kunnen worden toegevoegd. Deze robots zijn geautomatiseerde deelnemers aan een Wave die bijvoorbeeld alle telefoonnummers in een Wave detecteren en omzetten naar een “click-to-call"-link. Wanneer een deelnemer in de Wave op zo’n link klikt, wordt het telefoonnummer automatisch gebeld en de conversatie wordt achteraf als een audiobestand in de Wave ingevoegd. Nice! Lees hier hoe je deze Twiliobot kan installeren in Wave.

Een ander voorbeeld van een Wave Robot is “Stocky”. Die detecteert namen van aandelen en voegt er automatisch de actuele aandelenkoers bij in. Ook bestaan er robots zoals “Tweety” die - ook weer real-time - Twitter-boodschappen bij een gebruiker plaatsen. Als een gebruiker zijn laatste Twitter-status update, verschijnt die automatisch bij in de Wave. Je kan zelf ook de volledige Twitter-functionaliteit koppelen aan een Wave.

Meer robots op deze link!

Zoals je al merkt kan een conversatie razendsnel evolueren tot een erg rijke dialoog waarin alle mogelijke bronnen van data betrokken kunnen worden. Een tot nu toe ongeziene gebruikservaring!

Gaat Google Wave “email zoals we het kennen” vervangen

Of Google Wave email in zijn geheel zal vervangen is de vraag. Volgens onze bescheiden mening is Google Wave zeker en vast een erg interessant en veelbelovend platform om in realtime data van overal te combineren in één Wave of discussie.

Nadeel is natuurlijk dat iedereen die wil deelnemen moet beschikken over een Google Wave-account. Momenteel is email zo makkelijk omdat iedereen met mekaar kan communiceren, ongeacht of je Gmail, Hotmail of een andere provider gebruikt. We zijn erg benieuwd of Google ook daar een oplossing voor zal vinden.

Ook zijn er nog veel verbeteringen mogelijk aan de interface en de performantie van de applicatie. Regelmatig krijg je nog volgende - overigens erg leuke - foutboodschap te zien, die aangeeft dat er iets is misgelopen.

De interface werkt soms nog redelijk traag en buggy, maar dat zijn ongetwijfeld kinderziektes die Google er de komende maanden zal uithalen. Verder is Google Wave een erg vernieuwende en inventieve manier om online te discussiëren en te communiceren. Wij volgen de ontwikkelingen in ieder geval op de voet en zijn benieuwd wat de volgende verrassing van Google zal zijn!

Google Wave uitnodiging

Ben je benieuwd om zelf aan de slag te gaan met Google Wave, maar ben je niet bij de eerste lichting genodigden van Google? Have no fear! Wie niet kan wachten kan van ons een uitnodiging krijgen om meteen aan de slag te gaan.

De eerste drie personen die reageren nodigen we onmiddellijk uit voor de preview. Laat daarvoor wel je email-adres achter in je reactie. Alle anderen kunnen zich inschrijven voor een Google Wave uitnodiging op Google Wave, maar dan dien je wel geduld te hebben tot Google je zelf uitnodigt.

Catch you on your next Wave!

Denk maar eens aan het implementeren van enkele eenvoudige ronde hoeken, dit kon tot nu toe nooit of moeilijk zonder onze favoriete Adobe-telg. Of hoe vaak heb je de hulp van Photoshop al niet moeten inroepen om een eenvoudig schaduweffect te plaatsen rond een div? Wij in ieder geval al veel te vaak. Daarom zijn we ook erg enthousiast over de nieuwigheden die CSS3 ons zal brengen.

We zetten in dit artikel de leukste en handigste CSS3-properties op een rijtje, maar eerst is een kort woordje uitleg over de ondersteuning van CSS3 in de verschillende browsers op zijn plaats.

Kan ik CSS3 zomaar gebruiken in mijn huidige ontwerpen?

Het antwoord is ja, maar ... niet alle browsers ondersteunen momenteel alle nieuwe CSS3 properties. Internet Explorer spant zoals de traditie het vereist de kroon en ondersteunt zelfs in versie 8 geen enkele van de door ons gebruikte CSS3-eigenschappen. De beste ondersteuning is er in Firefox (3.5+) en recente webkit browsers zoals Safari en Chrome.

Concreet wil dit zeggen dat je CSS3 mag gebruiken in je webpagina’s, maar dat dit enkel van toepassing zal zijn op de meest recente browers. Bovendien kan je niet zomaar gebruik maken van de “echte” CSS3-tags aangezien deze nog niet officieel bestaan, het zijn enkel zogenaamde voorlopige recommendations. Eigenschap border-radius is zo één van die recommendations die het wellicht zullen halen in de finale versie van CSS3, maar die momenteel nog steeds kunnen wijzigen.

Firefox en Webkitbrowsers ondersteunen de eigenschap reeds op hun eigen manier, maar ze moet wel aangeroepen worden met een browserspecifieke prefix.

Voor Firefox wil dit zeggen:

Voor Webkit browsers:

Merk op dat we prefix -moz- hebben toegevoegd voor Firefox en -webkit- voor Safari en Chrome.

Ook Internet Explorer beschikt over een eigen prefix (-ms-), net zoals Opera ( -o- ) en Konqueror ( -khtml- ). Meer over deze vendor-specifieke extensies kan u lezen op css3.info en op Sitepoint.

Ronde hoeken met CSS

Eén van onze favoriete CSS3-properties is zonder twijfel border-radius. Hiermee kan je zonder moeite ronde hoeken op een HTML-element plaatsen.

Twitter.com was een van de eerste grote online spelers die deze eigenschap gebruikte.

Text Shadow en Letterpress-effect

Niet echt nieuw in CSS3, maar toch een eigenschap die pas sinds kort sterk opkomt is text-shadow. Deze eigenschap maakt het mogelijk schaduw onder teksten te plaatsen. Erg subtiele schaduweffecten zorgen ervoor dat je een zogenaamd letterpress-effect kan verkrijgen zonder dat je hiervoor Photoshop moet gebruiken.

In Solidshops.com gebruiken we érg subtiel deze eigenschap reeds. Let op de subtiele lichte schaduw (slechts één pixel) onder de groene tekst van onze succesboodschap.

Aangezien het een eigenschap is die eigenlijk al sinds CSS2 bestaat - maar die door weinig browsers werd ondersteund - moet je hier geen vendorspecifieke prefix meegeven.

CSS Gradients

CSS Gradients is een feature waar we erg hard naar uit kijken. Jammer genoeg ondersteunt op het moment van schrijven enkel Safari 4 deze eigenschap. Wie wil kan hier zelf CSS Gradients genereren. Aangezien de stijlregel op zich redelijk complex is kan het handig zijn deze te genereren in plaats van hem zelf te schrijven.

Box Shadow

Met box-shadow kunnen we schaduw genereren onder onze HTML-elementen. Hoewel het een erg handige eigenschap is, bleek dit onze interface van Solidshops.com erg te vertragen. Wellicht gaat het om een tijdelijk probleempje, maar voor ons was het een reden om de eigenschap nog niet op te nemen in ons eindproduct.

Conclusie

CSS3 is iets om als webdesigner naar uit te kijken. Hoewel het nog lang zal duren vooraleer alle browsers volledige support zullen kennen, kan je nu toch al langzamerhand de nieuwe eigenschappen toevoegen aan je ontwerpen. Weliswaar zullen enkel bezoekers met een recente browser kunnen genieten van deze vernieuwingen terwijl oudere browsers je pagina zoals vroeger te zien zullen krijgen.

Let bovendien op: de CSS3-eigenschappen met hun vendor-specifieke prefixen valideren niet in de W3-validator! Pas CSS3 dus pas toe nadat je je volledig afgewerkte CSS2-stylesheet hebt gevalideerd.

Happy coding!

Extra informatie en bronnen

GoodBytes: Web design trends en toekomst (deel 1 van 2): HTML5
Smashing Magazine: Push your design into the future with CSS3
Carsonified: 30 Essential CSS3 resources
Web Resources Depot: HTML5 en CSS3 cheat sheets

Het heeft geen zin om het te ontkennen: webdesign en webontwikkeling evolueren snel, érg snel. Wat je gisteren net geleerd hebt is bij wijze van spreken morgen al achterhaald. Levenslang leren is dan ook een voorwaarde om je profiel binnen deze sector sterk te houden. Zo staan de blogs en RSS-feeds momenteel tjokvol met artikels over HTML5 en CSS3: de volgende versie van het vaste wapenarsenaal van elke webdesigner.

Het continu opdoen van nieuwe ervaring en kennis is cruciaal, maar het kan tegelijkertijd ook erg overweldigend en vermoeiend zijn. Daarom dien je zelf uit te maken in welke materie je jezelf wil specialiseren en welke ontwikkelingen je al dan niet wil opvolgen. En voor wie nu reeds twijfelt of het lezen van dit artikel wel de moeite waard is: ja, HTML5 en CSS3 zouden wel degelijk op uw lijstje met te volgen ontwikkelingen moeten staan ;).

In deze eerste van twee blogposts trachten we een duidelijke introductie te geven over HTML5. In ons volgend artikel gaan we in meer detail in op CSS3. Dit artikel is geen uitputtende lijst met alle nieuwigheden die in HTML5 te zien zullen zijn, helemaal niet. Wel geeft het een indruk van wat we de komende jaren kunnen verwachten en hoe we nu al gebruik kunnen maken van enkele leuke vernieuwingen.

HTML5?

Webdesigners die hun vak ernstig nemen weten dat een goede website opgebouwd wordt met geldige, “valide” tags. Mijn studenten in Interactive Multimedia Design worden dan ook vanaf dag één verplicht om webstandaarden te volgen, in het begin vaak tot hun grote frustratie.

Correct opgebouwde HTML, in combinatie met een goede CSS-reset en geldige CSS-opmaak, zorgt ervoor dat we zoveel mogelijk verschillen tussen browsers kunnen uitschakelen en dat onze websites pixel-perfect getoond worden op Mac, Windows, Linux, Firefox, Safari, ... enzovoort. Oh ja, ook in Internet Explorer. Is er met de opkomst van HTML5 dan reden tot paniek? Gaan onze huidige websites blijven werken? Blijft de aarde bestaan?

Wat is het verschil tussen HTML5 en xHTML?

Daar waar xHTML ons verplicht om onder meer alle tags netjes te sluiten en om alle attributen lowercase te schrijven, is dit niet meer verplicht in HTML5. Het is echter nog wel perfect mogelijk. HTML5 is met andere woorden volledig achterwaarts compatibel met wat we momenteel reeds kennen en gebruiken. Het is best mogelijk om in HTML5 alle tags in grote letters te schrijven of om tags zoals een break niet af te sluiten, maar wie het gewend is om netjes xHTML te schrijven, kan dit gewoon blijven doen.

Zelf hebben we de (goede) gewoonte te werken in xHTML-strict en deze manier van werken bevalt ons bovendien enorm. Daarom is het voor ons en vele andere webontwikkelaars logisch om op die manier te blijven verder werken, zelfs wanneer HTML5 met zijn losse regels op de proppen komt.

Dat is meteen een groot verschil tussen HTML5 en xHTML: je hebt de keuze om te werken op die manier die het best aansluit bij jouw voorkeuren, of dit nu xHTML-strict is of niet. Even terzijde: er wordt gezegd dat deze losse regels (keuze xHTML of niet) in HTML5 werden geïntroduceerd om zo een voldoende groot publiek achter deze nieuwe standaard te krijgen.

xHTML leeft dus in ieder geval lekker voort in HTML5 en wie gewoon is om strakke xHTML te schrijven kan hier perfect mee verder gaan. Bestaande websites zullen dan ook erg snel omgezet kunnen worden naar HTML5 indien gewenst. Het is dus niet zo dat je alles over boord dient te gooien wat je tot nu toe beheerst, integendeel.

HTML5 Doctype

De nieuwe HTML5-specificatie werd (en wordt nog steeds) ontwikkeld om het leven van webontwikkelaars er eenvoudiger op te maken. Zo werd ook de doctype-definitie onder handen genomen. De nieuwe doctype in HTML5 zal er als volgt uitzien, kort en simpel:

Het voordeel van deze doctype is dat de huidige moderne browsers (IE, FF, Opera, Safari) pagina’s met deze DTD zullen tonen in hun (full) standards modus, zelfs indien ze nog geen HTML5 kennen. Het is dus perfect mogelijk nu al nieuwe pagina’s te ontwikkelen met dit doctype. Zelfs de w3-validator ondersteunt momenteel reeds HTML5!

Nieuwe tags en mogelijkheden

Bekijk volgende structuur eens even. Looks familiar?

Hoe vaak heb je zelf al dezelfde of een soortgelijke structuur gebruikt om een webpagina uit te bouwen? Vaak? Dan ben je alvast niet alleen. Jammer genoeg zijn al die verschillende div’s weinig betekenisvol voor onze browsers. Een div blijft namelijk gewoon een div. Ook zoekmachines kunnen momenteel onmogelijk uitmaken of een div nu bijvoorbeeld gebruikt wordt als navigatieblok of als introductieblok bij een artikel of als footer of als ...

Om onze pagina’s meer betekenis te kunnen geven introduceert HTML5 enkele nieuwe tags. Vergelijk bovenstaande structuur maar eens met dezelfde (doch iets uitgebreidere) structuur in HTML5:

Deze manier van werken lijkt erg hard op de manier waarop we momenteel reeds websites bouwen. Bovendien zijn de tags veel betekenisvoller geworden. Let op: de header-tag wordt niet enkel gebruikt om de bovenste zone van uw webpagina aan te duiden. De tag kan meerdere keren in één pagina gebruikt worden, bijvoorbeeld om de hoofdingen van artikels op te bouwen. Hetzelfde kan gezegd worden van de footer-tag.

Kan je nu al starten met HTML5?

Kort gezegd: ja. Het is al mogelijk om een layout op te bouwen met HTML5 (en CSS3) die prima werkt in de huidige moderne browsers. Hoewel er enkele beperkingen zijn, zijn er al heel wat experimentele uitwerkingen van HTML5-layouts beschikbaar.

Besef wel dat HTML5 nog steeds niet officieel werd uitgebracht en dat er wijzigingen aan de huidige specificaties kunnen worden aangebracht. Volledige support van alle HTML5-features op alle browsers is er nog niet en dat zal nog een tijdje zo blijven. Desondanks is het zeker geen slecht idee om de mogelijkheden van HTML5 reeds te verkennen. Hoe meer mensen zich op HTML5 storten, hoe sneller de specificaties hopelijk klaar zullen zijn en wijdverspreid raken.

Extra informatie en bronnen

GoodBytes: Web design trends en toekomst (deel 2 van 2): CSS3
Sitepoint: Sitepoint: HTML5: now or never?
Smashing Magazine: Smashing Magazine: comic strip xHTML vs. HTML5
A List Apart: Semantics in HTML5
Woork: HTML5 Visual Cheat Sheet

Wireframing of het maken van mockups is één van de belangrijkste aspecten bij het maken van een webapplicatie of website. Kort gezegd is wireframing een snelle en goedkope manier om te bepalen welke informatie waar op een pagina moet komen en hoe die pagina of dat scherm er moet uitzien. Hierbij wordt niét in detail getreden over kleur, lettertype en andere opmaakspecifieke eigenschappen. Wireframes worden dan ook vaak in zwart-wit uitgewerkt om discussies over kleurgebruik en vormgeving te vermijden.

Soms gebruikt men de term wireframe voor een schets die aangeeft hoe informatie op een webpagina geordend moet worden. De term mockup wordt dan weer vaak gebruikt wanneer men spreekt over een schets die de functionaliteit van de pagina moeten weergeven. Even vaak worden beide termen echter door elkaar gebruikt. Het maakt niet echt uit hoe je de schetsen nu juist noemt, zolang ze je maar helpen om je einddoel zo goed en snel mogelijk te bereiken.

Een eerste voorbeeld van een wireframe zie je hieronder. Merk op dat de structuur hoofdzakelijk in zwart-wit werd opgebouwd. Hoe je een dergelijk wireframe kan opbouwen met Adobe Illustrator lees je op deze tutorial.

If you fail to plan, you plan to fail

Beginnende webdesigners maken vaak dezelfde fout. Nadat ze een mailtje ontvangen hebben van een klant met daarin een erg summiere projectbeschrijving, beginnen ze meteen enthousiast in Photoshop een lay-out te ontwerpen zonder goed op voorhand te weten welke informatie er juist op de pagina’s moet komen. Ook wij hebben vroeger dezelfde fout gemaakt en hebben daardoor hardleers mogen ondervinden dat een goede voorbereiding cruciaal is om een web-opdracht tot een goed einde te brengen. Leer uit onze fouten en start je volgend project met duidelijke wireframes en mockups.

Op het volgende filmpje zie je in versneld tempo zien hoe een wireframe opgebouwd kan worden:

Cool, maar wat is het nut weer van wireframes?

Zonder goed op voorhand te plannen en te communiceren over wat er exact op een scherm moet staan, loop je het risico dat je achteraf grote en tijdrovende aanpassingen zal moeten doorvoeren in je Photoshop-ontwerp. Zulke wijzigingen zijn niet alleen frustrerend, ze kosten ook tijd die je had kunnen spenderen aan het bouwen van de website of webapplicatie, het leveren van goede support, enzovoort.

Wanneer je een ruwe zwart-wit opbouw maakt van een webpagina, zonder je te verdiepen in grafische elementen en details, dan beschik je over een duidelijke basis om met je klant te overleggen. Zo wordt het eenvoudig om snel aanpassingen door te voeren aan de structuur van een pagina, nog vóór je Photoshop opstart. Het is dus van belang om in deze fase nog geen grafische elementen of afbeeldingen toe te voegen. Die zouden de aandacht enkel maar afleiden van de structuur en functionaliteit van de pagina.

Bron: comic en wireframe

Voor ons is het nut van wireframes en mockups duidelijk: tijd besparen in Photoshop en frustrerende aanpassingen achteraf vermijden. Hoe behendig je ook bent in Photoshop, je kan nooit even snel elementen verplaatsen of toevoegen in een netjes uitgewerkt grafisch ontwerp, dan in een ruwe schets of wireframe.

Moet je altijd wireframen?

Voor kleine projecten of websites is het niet altijd noodzakelijk om wireframes en mockups te maken. Werk je echter aan een grotere website of aan een webapplicatie met verschillende mensen in je team, dan wordt de nood om te communiceren over de applicatie groot. Een goed startpunt om over de applicatie te discussiëren is dan een goede mockup of wireframe.

Voor onze eigen nieuwste applicatie - www.solidshops.com - moeten erg veel schermen worden opgebouwd. Het is van groot belang dat we deze schermen opbouwen in samenspraak met potentiële eindgebruikers en met andere leden van ons team. Niet alleen communicatie met de klant is belangrijk, ook overleg tussen de ontwerper en programmeur zal op deze manier een stuk makkelijker verlopen.

Dankzij mockups beschikken we over een eenvoudige en snelle manier om iedereen op één lijn te krijgen. Is er iets onduidelijk of onvolledig, dan wordt de mockup na (of zelfs beter tijdens) overleg aangepast. Dit herhalen we tot we over een finale versie beschikken die ontworpen kan worden in Photoshop om daarna om te zetten in xHTML en CSS.

Vergelijk onderstaande afgewerkte pagina maar eens met bovenstaande mockup. Dankzij overleg in een vroege fase kon de pagina in één keer uitgebouwd worden zonder achteraf grote aanpassingen te moeten doorvoeren. Het gaat hier weliswaar over een eenvoudige pagina, maar zelfs dan is het nuttig of zelfs noodzakelijk om de nodige functionaliteit en inhoud grondig te bespreken.

Mockup en wireframing tools

Er bestaan verschillende tools om mockups en wireframes te maken. Pen en papier zijn zelfs perfect! Zelf vinden we het eenvoudiger om een digitale versie te maken, omdat die nu eenmaal eenvoudiger aan te passen is. Ook gebruiken we voor al onze projecten een tool voor versiebeheer, waarmee we steeds een vorige versie kunnen ophalen van onze server indien nodig. Met papieren mockups zou dit natuurlijk veel moeilijker zijn.

De beste manier om mockups te maken – of dit nu op papier is of digitaal – is dié manier waarmee jij je concept het best duidelijk kan maken aan de klant en omgekeerd. Zelf verkiezen we te werken met Balsamiq mockups, maar ga gerust zelf op zoek naar jouw favoriete mockup tool.

Heb je wat wireframing-inspiratie nodig, neem dan maar eens een kijkje op Wireframes Magazine, want, zo zegt hun slogan: “Every Information Architect has something funky up their sleeve”.

Heb je zelf tips of specifieke ervaringen met wireframes en mockups, deel ze dan graag hieronder met ons.

Happy wireframing!

Een job als webdesigner?

Hoe schitterend deze nieuwe platformen ook zijn om met fans, mogelijke klanten en vrienden te communiceren, er zijn nog altijd mensen die niet begrijpen hoe ze ermee moeten omgaan in een professionele context.

Bij GoodBytes zijn we hoegenaamd geen kommaneukers, maar we hechten wel belang aan correcte dialoog en communicatie, tenzij je naam Britney Spears is natuurlijk. Ook de vacatures voor een job als web professional liegen er niet om: communicatie is een vereiste voor iedereen die een job in webdesign en web development ambieert.

mte vrindelijke groEte

Je levert kwaliteit: je ontwerpen zijn vernieuwend en je code voldoet zonder uitzondering aan de geldende webstandaarden. Om dat niveau van kwaliteit te bereiken heb je vaak nachten lang liggen werken om die ene bug op te lossen of om dat ene project tijdig klaar te krijgen [sounds familiar?]. Het zou erg jammer zijn om die kwaliteit naar beneden te halen door een gebrek aan professionele communicatie.

Zorg daarom steeds dat mails naar klanten zonder enige schrijffout naar buiten gaan. Lees ze na voor je ze verstuurt en lees ze daarna nog een keer door. Hetzelfde geldt voor sollicitatiebrieven, offertes en alle teksten gerelateerd aan een professionele activiteit. Yep, dat wil zeggen: je weblog inclusief!

Hire the one who can write

In de opleiding - Informaticamanagement & Multimedia - waar ik webtechnologie en andere gerelateerde vakken doceer, bestaat het lessenpakket uit een stevige 20% communicatievakken, naast vakken als Photoshop, Illustrator, Flex, Flash, PHP, Databanken, Bedrijfskunde enzovoort.

De communicatievakken worden vaak als niet leuk en niet interessant beschouwd en dat is nog zacht uitgedrukt. Hoewel ook ik niet altijd alle studenten om 8u30 even laaiend enthousiast in mijn lessen zie zitten ;), toch sta ik volledig achter de taalvakken en andere vakken zoals presentatietechnieken die in het lessenpakket van onze toekomstige multimediaontwikkelaars zijn opgenomen, omdat ik weet dat ze een verschil kunnen maken.

Als freelancer moet je je namelijk regelmatig voorstellen aan nieuwe klanten, projecten moeten gepresenteerd worden en ook voor jobs in een bedrijf moet je nog steeds solliciteren.

Neem het onderstaande videofragment waarin Jim Coudal beschrijft wat hij zou doen in een situatie waarin hij moet kiezen tussen twee gelijke kandidaten voor een job. Ze hebben beide dezelfde grafische talenten én technische skills op hun palmares. Welke kandidaat zou jij dan zelf kiezen? Bekijk het korte filmpje hieronder maar eens.

Jim Coudal from MFA Interaction Design on Vimeo.

Hire the one who can write. It’s a sign of an organised mind. Iemand die professioneel communiceert, schriftelijk én verbaal, laat in ieder geval een betere indruk na dan iemand die hiertegen zondigt. Techneut zijnde kunnen we dit ook doortrekken naar het schrijven van broncode voor een website.

Als twee kandidaat-webdesigners een portfoliowebsite insturen en ze zien er allebei grafisch even aantrekkelijk uit, dan kiezen wij resoluut voor dié portfolio die met 100% valide xHTML-code werd uitgeschreven. Voldoen beide portfolio’s aan deze voorwaarde, dan spreekt het taalgebruik en de opgebouwde communicatie in de webpagina’s zelf ook vaak boekdelen.

Communicatie in webontwikkeling

Ook tijdens het ontwikkelen van een webproject speelt communicatie een cruciale rol. Tenzij je werkt aan kleinere projecten zoals een eigen portfoliowebsite, maak je steeds deel uit van een kleiner of groter team. De ene persoon in het team is verantwoordelijk voor de ontwikkeling van de front-end, terwijl iemand anders de backend-code uitschrijft en de databank aan het project koppelt. Vergeet ook niet de mensen die de zakelijke kant van het verhaal definiëren of moeten toelichten aan de ontwikkelaars en designers.

Een project kan onmogelijk slagen zonder een vlotte en duidelijke communicatie tussen alle verschillende leden van het team. Onderstaande cartoon spreekt hier boekdelen.

Niet alleen de communicatie tussen teamleden onderling dient vlot te verlopen. Minstens zo belangrijk is de communicatie naar de buitenwereld en dus naar jouw klanten toe. Hierbij kunnen social media applicaties zeker een hulp zijn, maar het begint zeker en vast bij de communicatie die tot stand wordt gebracht op de eigen website of webapplicatie. Zorg er dan ook steeds voor dat de copy in jouw website of -applicatie de juiste boodschap overbrengt.

Is jouw applicatie of website klaar, dan kunnen Twitter of andere social media applicaties gebruikt worden om een dialoog aan te gaan met mogelijke of huidige klanten. Zo gebruiken wij al enige tijd Twitter om met geïnteresseerde gebruikers van onze laatste nieuwe dienst te communiceren over onze ontwikkelingen en over de verwachtingen die onze gebruikers hebben van onze applicatie. Hierbij gaan we op een positieve manier in dialoog met onze toekomstige gebruikers.

Communicatie na de webontwikkeling

Zodra een applicatie of website klaar is, verdwijnen je communicatieskills niet naar de achtergrond, integendeel zelfs. Denk maar aan support die vlot en professioneel gegeven moet worden om je klanten voort te kunnen helpen bij problemen. Goed geschreven documentatie zal er bovendien voor zorgen dat je minder zelf moet ingrijpen omdat de antwoorden in je wel doordachte documentatie te vinden is. Communicatieskills omvatten dus zowel mondelinge als schriftelijke creativiteit.

Een succesvol opgebouwde webapplicatie is pas het begin. Na de bouw zelf dient er continu aan marketing gedaan te worden om je naamsbekendheid te verwerven tussen alle honderden start-ups die hetzelfde doel hebben als jij, namelijk scoren met hun applicatie of site.

Wil je dat je nieuwe applicatie, website of blog een vliegende start neemt? Begin dan met je communicatieskills.

Jammer genoeg vinden mensen met minder eerlijke bedoelingen deze toestellen ook aantrekkelijk. Zo liet een student me onlangs nog weten dat zijn Macbook uit zijn studentenkamer werd gestolen. Gevolg: niet alleen de dure Macbook was kwijt, maar ook alle data die erop stond waaronder natuurlijk het eindwerk en een heleboel leerstof voor de examens.

Uiteraard neemt iedereen ondertussen wel dagelijks backups of niet soms? Of niét soms?! Neem je tot op vandaag nog altijd geen regelmatige backups van je data dan is het een kwestie van dagen, weken of maanden vooraleer je al je data kwijt bent en dan moet je niet komen kniezen want je was gewaarschuwd.

PC-gebruikers kunnen terugvallen op het prima SyncBackSE of één van de vele andere backuptools. Macgebruikers kopen best een externe harde schijf die voor niets anders dient dan om via TimeMachine backups te nemen van al je data. Hang de harde schijf aan je Mac of Macbook en je bent zeker van je data in geval van een hard disk crash.

Dit artikel gaat echter niet over backup-strategieën, maar over een mooi stuk software dat jouw Macbook kan recoveren in geval van diefstal. GoodBytes ging Undercover en testte de suite van het Belgische Orbicule uit.

Wat is Undercover?

Undercover is een anti-diefstalapplicatie die zich erg eenvoudig laat installeren op je Mac. Zodra de installatie voltooid is - een proces dat nog geen twee minuten duurde op ons systeem, inclusief reboot - is je Macbook beschermd tegen diefstal volgens een systeem dat je kan vergelijken met Lojack voor wagens.

Wanneer je Macbook (of iMac, Macbook Air, ...) gestolen wordt komt hij in een databank terecht waarna een server continu luistert naar signalen van jouw toestel. Zodra de gestolen Macbook ergens op het Internet wordt aangesloten stuurt hij automatisch zijn locatie door naar de servers van Undercover om opgespoord te kunnen worden door de politie.

Dat is nog niet alles: zoals je weet zit er een ingebouwde webcam in de recentere Macbooks. Wel, deze wordt gebruikt om onopgemerkt foto’s te nemen van de dief of persoon die momenteel met jouw Macbook aan het surfen is. Waterdicht bewijs indeed!

Wat in geval van diefstal?

Wanneer je Mac gestolen wordt maak je hiervan melding bij Orbicule door op de meldingspagina met je unieke Undercover ID. Vanaf dat ogenblik staat je computer geseind en luisteren de servers van Undercover naar trafiek van jouw toestel.

Komt de Macbook online dan wordt de kleine en amper opspoorbare applicatie op je laptop in actie. Er worden foto’s doorgestuurd van de persoon die op dat moment achter je toestel zit, alsook de locatie van het toestel. Deze informatie wordt doorgespeeld aan de politiediensten die op dat moment voldoende informatie hebben om in actie te treden.

Plan B

Soms blijft een dief niet lang genoeg online om voldoende foto’s of nauwgezette locatieinformatie door te sturen. In dat geval wordt plan B geactiveerd. Het beeldscherm van de Mac wordt geleidelijk donkerder en donkerder tot het helemaal zwart wordt.

Op zo’n moment wordt een dief aangezet tot het verkopen van de laptop of tot het binnenbrengen van het toestel naar een service punt. Zodra de laptop daar online komt verschijnt er een boodschap met informatie over de gestolen laptop en hoe men de diensten van Orbicule kan contacteren.

Zijn al deze maatregelen makkelijk te omzeilen denkt u? Misschien door een eenvoudige format van de harde schijf? Guess again, ook daar heeft Orbicule maatregelen tegen getroffen. Een firmwarewachtwoord zorgt er bijvoorbeeld voor dat je niet kan opstarten van een installatie-DVD of van een andere harde schijf zonder je wachtwoord in te typen.

Conclusie

Of je nu je Mac gebruikt voor school of als professioneel gebruiker: Undercover geeft je een zekere mate van gemoedsrust. Ik ben er bovendien zeker van dat de student wiens Mac onlangs gestolen werd op zijn minst de klok zou willen terugdraaien om Undercover te installeren. Uiteraard is er geen garantie dat je Mac zal worden teruggevonden, maar je verhoogt aanzienlijk de kans. Wordt je Mac niét teruggevonden na diefstal, dan krijg je je geld integraal terug.

Voor minder dan 30 Euro heb je een studentenlicentie. Professionele gebruikers betalen iets meer dan 37 Euro en voor nog geen 45 Euro heb je een licentie voor het ganse gezin waarmee je tot maximaal 5 Macs kan registreren. Voor exacte licentiebedragen kan je terecht op de online shop. De licenties zijn éénmalig te betalen en updates zijn hier bij inbegrepen.

Bovendien kunnen ook gelukkige eigenaars van een iPhone sinds kort hun toestel laten tracken bij Orbicule.

GoodBytes was de volle twee dagen aanwezig, vooral om inspiratie op te doen en om met onze vakcollega’s eens lekker door te drammen over de laatste ontwikkelingen op het Web. Hieronder delen we graag onze impressie van deze editie van Kings Of Code en vooral dan die zaken die ons zijn bijgebleven.

Pre-Conference day / Side Events

Aangezien Amsterdam ongeveer 2 tot 3 uur sporen of rijden is en omdat het congres van dinsdag al om 9u30 van start ging, was het aangewezen een dag op voorhand te vertrekken en meteen een bezoekje te brengen aan één van de vier side events die georganiseerd werden. De namiddagsessie - AfternoonTutorials - die we hebben bijgewoond tackelde de volgende drie topics:

1 - Introduction to Rails: Building a location based search engine
2 - Controlling Versions
3 - iPhone App Development: Go Native!

Kort gezegd werd hier telkens een praktische demo gegeven van opeenvolgend Ruby On Rails, Versiebeheer met Subversion via Versions en applicatieontwikkeling voor de iPhone. Vanaf het begin werd meteen de toon gezet voor het verloop van de namiddag: veel broncode en veel getokkel in de commandline van MacOS.

Is dit het fantastische Ruby On Rails dat door sommigen zo bejubeld wordt, vroegen we ons af. Ligt het aan ons of aan het framework, geen idee, maar tot op heden snappen we de hele hype rond Ruby On Rails absoluut niet, maar dat is een andere discussie.

Ondertussen wat het erg duidelijk dat we op Kings Of Code beland waren, met de nadruk op Code. We keken vooral uit naar de congresdag zelf waarop enkele veelbelovende sprekers stonden ingepland.

Remember The Magic

Dinsdag begon het congres pas echt en hoé. De erg sympathieke Aral Balkan bracht daar zijn keynote “Remember The Magic” die als volgt werd aangekondigd:

“ You’ll join a Renaissance Geek with a passion for interaction design as he takes you on a Tarantinoesque journey through the simulacra in search of substance; a journey that explores both the real and virtual worlds to discover artistry, story, and delight; a journey to remind you of the joy, fun, and passion — the magic — behind why we do what we do. ”

Die aankondiging was zelfs nog ondermaats aan wat het publiek te zien en te horen kreeg. Toegegeven, zijn keynote is tot op de laatste letter ingestudeerd en voorbereid. Aral heeft deze presentatie al meermaals gegeven en dat merk je. In een positieve zin dan: zijn presentatie is een wervelwind aan inspiratie en motivatie.

“ Sluit je ogen en denk eens terug aan hoe jij zelf ooit begonnen bent met dit vak. Wat het een game of een bepaalde ervaring met je eerste computer waardoor je gepassioneerd bent geraakt door ICT en webdesign? ”

Voor ons werkte zijn keynote alvast érg motiverend.

Verder hebben we vooral van hem bevestiging gekregen dat de filosofie van GoodBytes de juiste is: dat kwaliteit altijd belangrijker is dan kwantiteit, een principe dat we ook volledig toepassen op ons nieuwste project SolidShops.com. Zorg beter voor drie features die erg goed werken dan voor 300 features waar niemand wat aan heeft. Stel de gebruiker en zijn problemen centraal, daarna pas uw eigen problemen zoals keuze van ontwikkeltaal.

Rich and Snappy Apps [No Scaling Required]

Thomas Fuchs & Amy Hoy hadden het vooral over client-side performance en hoe je je prachtige interface ook snél kan laten werken.

Wanneer mensen langer dan 5 seconden moeten wachten voor een bepaalde pagina geladen is of voor een bepaalde taak is afgerond, dan haken ze af en klikken ze weg, om nooit meer terug te kijken. Dat klinkt cru, maar in veel gevallen blijkt dit te kloppen.

Zorg er daarom voor dat je altijd en overal waar laadtijd een probleem is een indicatie geeft dat je applicatie nog steeds aan het werken is voor je gebruiken. Dit kan door eenvoudige loading indicators te gebruiken. Amy had het hier toepasselijk over het principe “Faking It”, waarbij je de indruk wekt dat er vanalles gaande is simpelweg door loading indicators te gebruiker waar van toepassing.

Verder hadden ze het over YUI compressor en het minify’en van je code. Tracht nooit 4, 5 of zelfs 10 stylesheets of javascriptfiles naar je client te sturen, maar combineer deze bestanden in één JS-file of 1 CSS-file. Haal alle spaties en commentaren uit je code door er een minify-tool op los te laten en gooi daar GZIP-compressie bovenop om een zo klein mogelijke footprint achter te laten van je code. Zelfs een halve seconde die gebruikers minder lang moeten wachten zorgt voor een hogere conversie op je applicatie.

Verder werd ook aangeraden om altijd, altijd, altijd caching headers te gebruiken met bijhorende expiration headers om ervoor te zorgen dat bezoekers bij hun tweede bezoek niet moeten wachten op hun files, maar dat deze rechtstreeks uit de cache worden gehaald, zonder te moeten gaan controleren of er geen nieuwere versie online staat.

Erg interessant om te zien was ook de manier waarop een browser een pagina inleest en hoe een complexe pagina erg zwaar kan zijn naar performance toe.

Met andere woorden: keep things simple, minify uw code en zorg voor caching om uw applicaties Rich & Snappy te houden!

Scaling your Tech & your Team

Joe Stump heeft de afgelopen 2,5 jaar voor Digg.com gewerkt als Lead Architect. Daar heeft hij de site zien groeien van 12 miljoen unieke bezoekers per dag tot 37 miljoen bezoekers per dag. Ondertussen groeide hun team van zeven naar twintig ontwikkelaars.

Tijdens zijn sessie deelde hij zijn ervaringen die hij had opgedaan in een periode van zulke gigantische groei. Hij kondigde zich aan als “Joe Stump: Unemployed Homeless Vagabond” aangezien hij net deze week vertrokken is bij Digg om zijn eigen firma op te richten die zich zal specialiseren in alternate reality mobile gaming.

PHP doesn’t scale: natuurlijk schaalt PHP wél zegt Stump, het schaalt zelfs prima. Wat minder makkelijk schaalt is de achterliggende data en de performance die daarmee gepaard gaat. Om teveel Input/Output op de harde schijf (traag!) te vermijden dien je ervoor te zorgen dat je zoveel mogelijk data cached. Schaal je serverpark zowel verticaal als horizontaal. Verticaal wil zeggen dat je je server zo veel mogelijk gaat pimpen met bijvoorbeeld meer processorkracht en meer geheugen.

Dit kan natuurlijk maar tot op een bepaalde hoogte, waarna je kan teruggrijpen naar horizontaal schalen waarbij je meerdere servers in een rechte lijn gaat toevoegen om de massa bezoekers te spreiden. Ook is Joe net zoals ons een groot voorstander van het gebruik van Frameworks. Gebruik wat er al bestaat en bouw hier 10% bovenop in plaats van 100% vanaf nul te beginnen.

Conclusie

Kings Of Code was een erg goed georganiseerd congres met leuke sprekers - de ene al wat interessanter dan de andere. Jammer genoeg waren sommige sessies een beetje té technisch zoals die van de Dojo toolkit for mobile.

Hoewel er maar een handvol mensen in de zaal al met deze toolkit hadden gewerkt ging de spreker er een beetje van uit dat iedereen al bekend was met Dojo om maar meteen in de advanced code te duiken. Een spreker op een congres zou beter moeten weten lijkt ons.

All around was Kings Of Code een erg interessante bijeenkomst voor de toch wel gevorderde webontwikkelaar. De sprekers waren interessant, we hebben veel kennis opgedaan zowel in de zalen als daarbuiten met onze vakcollega’s en dat het mooi weer was in Amsterdam was dan ook weer mooi meegenomen.