Chances are that you are in exactly the same situation as I am. Let’s do a little test to see if that’s true: do you recognize any of this: you’ve been bookmarking articles that you’ll probably never read, you have a text file sitting somewhere on your desktop with links to video’s that you should watch one day, not to mention your RSS reader that now says that you have 1000+ unread articles.

If any of that sounds familiar to you, joy, we are now at least with two in the same club.

Anyhow, I’ve been looking for some other form of inspiration lately, stepping away from all the blogs we’ve been reading over and over again. We’ve had some good times, me and all those lengthy blog posts, but lately I just didn’t feel inspired by them anymore as I did say two years ago. I have the same feelings towards design galleries. How many times have we all browsed through the same designs all over again, just like all other web designers are doing?

Luckily for us web designers, there are many other sources of information out there that can inspire us. Here is what I found to be useful in the past few months and what inspired me not just to design websites, but also to run my business better, without having to click through hundreds of links, but just while sitting on the plane or while shopping for groceries.

Podcasts & Videocasts

This may sound geeky but in the past few weeks I’ve been using my oldskool iPod mini [mini is not for girls!] mostly to listen to podcasts instead of music. That’s right, I run about two times every week in the park for something a bit less than an hour and that gives me enough time to just relax and listen to some interesting stuff the web design community has to say.

The guys from 37Signals have always inspired me [and millions of others I guess] and although their podcast is a lot about their own products, they manage to bring their content in such a way that I get inspired to run my own business just that bit better.

Get their podcasts on iTunes or directly from their website: http://37signals.com/podcast

They talk about different things such as how to deal with bad criticism on your products, or how to price your web apps to your clients. Especially if you are running a small to medium business, their podcasts are full of great ideas on how you can run your business just that little different and hopefully better.

5by5TV

Although the following shows can be downloaded as podcasts through e.g. iTunes, 5by5TV actually groups a number of online video shows together that are all related to web design and web development.

They have a show called The BIG Web Show that is mainly focused on web publishing, art direction, typography, web technology or anything web related if you like. One of the weekly guests on the show is Jeffrey Zeldman, publisher of A List Apart.

They even have a show called the EE Podcast focused on nothing but Expression Engine, our favorite CMS.
Check out what other shows they are broadcasting for free right here.

Other podcasts and videocasts that are worth a mention here are the following:

Boagworld : great show that sadly isn’t recording new episodes at the moment.
Think Vitamin Radio : sometimes a bit too much about their own Carsonified products, but worth checking out!

There are probably many other video- or podcasts that I didn’t mention here or that I don’t even know about. If you have any good links to share, please share them in the comments.

A Small Extra: Music

People that know me, know that I’m an Ibiza [and travel] fanatic. I love the unmatched musical vibe that the island has to offer if you go to the right places. Since I came back from the island last week, I’ve been listening to Sonica Radio, one of the local FM radio channels that broadcasts live sets from the clubs at night and plays deep house or chillout tracks during the day

For those that want to listen to some Balearic tunes while working, check out the live stream. If you’re not really into that kind of music, I hope you at least find the podcasts to be interesting ;).

Enjoy the summer everyone.

Unfortunately that account or username was already taken on Twitter by a friendly guy who wasn’t really using the account for anything. On top of that, GoodBytes was just his nickname, not his business name so I kind of wanted to get my hands on my Twitter name.

If you are in the same position as me, I recommend you to follow the next few steps to reclaim your Twitter account.

1. Contact the owner of the account

The first thing I did when trying to reclaim my Twitter account was contacting the respective owner. You’d be amazed how friendly and helpful most Twitter users will be when you approach them in a correct way.

I looked in Google to see who the owner was and I contacted him on Facebook, since he wasn’t really active on Twitter. If the user is active on Twitter, you can send him or her a message but of course, an active account might be more difficult to get a hold of.

It turned out that the owner was a friendly guy from Denmark (thanks Christian!) who wanted to give me his Twitter account with no problem. So, he deleted the Twitter account @goodbytes and I could register it on my own name… or at least that’s what I thought I could do.

Unfortunately, Twitter doesn’t just release disabled accounts for an unknown amount of time. This time, I contacted Twitter to ask if they could help me. 

2. Create a placeholder account

Before you contact Twitter, make sure you have a placeholder account that you want to transfer to the Twitter account of your choice. Instead of just releasing the account you are asking for, Twitter will want to move an existing Twitter account to the one you are after.

Ensure that the account has an official email address from the company’s domain linked to it. For us this needed to be an @goodbytes.be email address.

3. Send an email to username@twitter.com

When you have a placeholder account ready, send an email to username@twitter.com and provide Twitter with the following information so that they can easily process your request:

• Username of the violating account (or the URL to their profile page):
• Company name:
• Company Twitter account (if there is one):
• Your First and Last Name:
• Title:
• Address:
• Phone:
• Fax:
• Company domain address:
• Your company domain email address:
• Registration Trademark number:
• Requested Action (for example, removal of infringing account, or transfer of trademarked username to an existing company account):

Don’t worry if you don’t own a real trademark on you brand name, just make sure you give enough prove that your business is using the brand name you are trying to get on Twitter.

4. If that fails, open a support ticket

In case you don’t get a reply from Twitter in the next following days, you can open up a support ticket where you write about the account you wish to claim. Again, make sure you provide Twitter with as much information as possible like stated above.

4. Pray to the Twitter Gods

That’s about it. Using the steps shown in this post, we were able to reclaim @goodbytes on Twitter in about a week or so. I guess everything went so smooth due to the fact that the original owner was willing to deactivate his own account, so thanks again Christian for doing so!

Note

Frequent readers of my blog might ask why I’ve written this in English instead of the usual Dutch posts. Since some time I’ve been thinking about switching my portfolio site to English so that more people would be able to read my blog. I’ll be measuring traffic and comments on English posts for the next few weeks or even month and after that I’ll decide in what language to redesign or re-align my portfolio website.

Let me know what you think: stick to Dutch or switch to English, because I’ve heard that’s what the cool kids speak right?

Hoewel ik net terug ben van Japan, een goed rondje ben gaan joggen en mijn RSS-lezer nog steeds uitpuilt van de ongelezen artikels - Mark 1.723 articles as read? Yes! - is er altijd plek voor een efficiënte en kwalitatief goede inspiratiebron. Enter Dribbble.com, een online community voor (web) designers die graag met elkaar delen waar ze momenteel aan werken.

“Twitter voor Designers”

Mashable noemde Dribbble onlangs nog de “Twitter voor designers”. Zover zouden we zelf niet gaan, aangezien het nog steeds gaat om het werk dat online geplaatst wordt en de feedback die daarop wordt gegeven en niet om korte tekstuele updates.

Waarin Dribbble vooral verschilt van andere sites of zelfs CSS galleries, is de community die erop actief is. Alle grote nationale en internationale voorbeelden uit de sector zijn actief op de site, gaande van ontwerpers tot grote sprekers die we kennen van bijvoorbeeld de Future Of Web Design congressen. Wanneer zij je werk onder ogen krijgen en er feedback op geven, heeft dit toch net iétsje meer dan het doorsnee forum of je eigen vriend of vriendin die feedback geven bij je ontwerp.

Enkel op uitnodiging

Momenteel kan je enkel deelnemen aan Dribbble wanneer je van één van de bestaande gebruikers een uitnodiging hebt ontvangen. Langs de ene kant komt dat natuurlijk erg arrogant en exclusief over, maar anderzijds wordt op die manier wel enigszins de kwaliteit van wat op de community wordt geplaatst hoog gehouden. Zodra iedereen zomaar alles op Dribbble zou kunnen gooien, zou de meerwaarde ervan al snel dalen.

Voor een uitnodiging op Dribbble is dan ook geen moeite teveel, zo liet onder andere Davy Kestens - een jonge Belgische collega - zien. Hij nam de moeite om een hele website uit te werken die slechts één doel had: een uitnodiging op Dribbble bemachtigen.

Het resultaat staat op http://www.pleaseinvitemetodribbble.com en leverde hem meer dan terecht een uitnodiging op voor Dribbble.

Go Offline

Online inspiratie is super, maar offline inspiratie mag zeker niet mankeren. Hoeveel dribbbles, blogs of css galerijen je ook bezoekt, je komt vaak dezelfde ontwerpen en online trends tegen. Daarom is het goed regelmatig offline naar inspiratie te zoeken, bijvoorbeeld in drukwerk, magazines, verpakkingen, op straat, ...

Voor wie nog geen Dribbble uitnodiging heeft ontvangen ;) kan ik een boek aanraden dat ik onlangs nog aangekocht heb: ”Brand Identity Now”, een boek dat zich richt op het uitbouwen van een volledige identiteit voor bedrijven, gaande van het logo over winkelinrichting tot de website.

Diegenen die wel een Dribbble account hebben: dunk below & let’s connect. Hoe meer Belgische collega’s op Dribbble, hoe gezelliger!

Extra

GoodBytes op Dribbble
Boek: Brand Identity Now

En toegegeven, ook voor ons was (of is) het niet altijd helemaal duidelijk wat de wildgroei aan licenties nu juist betekent. Zodra je echter een commercieel project aan het uitbouwen bent, wordt het belangrijk exact te weten welke (jQuery) plugins, libraries of broncode je mag gebruiken in je project en onder welke voorwaarden dit mag.

Het zou zonde zijn een groot project uit te bouwen om bij lancering een brief in je bus te krijgen van een advocaat omdat je gezondigd hebt tegen copyright van anderen. Bye bye project ... hello lawsuit!

Tot onze verbazing wilden of konden veel software ontwikkelaars geen antwoord geven op onze vraag of we een bepaalde library al dan niet mochten gebruiken in ons project. Steeds werden we doorverwezen naar onze raadsman om een kostelijk antwoord te formuleren op onze vragen.

Ook op LinkedIN of andere fora werd onze vraag steevast afgewimpeld. Niet erg behulpzaam of verhelderend om zo met licenties om te springen dachten we zo en we gingen dan maar zelf zo goed als mogelijk op onderzoek uit.

Let op: GoodBytes is geen advocatenkantoor (thank god) en hoopt dat ook nooit te zullen zijn. Dit artikel is dan ook enkel onze eigen interpretatie van enkele licenties die we regelmatig tegenkomen zonder dat hier enig legaal advies verstrekt wordt. Twijfel je, doe dan net zoals men ons heeft aangeraden en raadpleeg een raadsman :).

GPL versus LGPL

De GPL of ”GNU General Public License” is een van de meest gebruikte licenties in open source land. Kort gezegd komt het erop neer dat je software die onder deze licentie valt gratis mag gebruiken en zelfs mag verspreiden. Je kan zelfs kosten aanrekenen om die software te verspreiden.

Deze licentie is vaak niét geschikt voor commerciële projecten. Je bent namelijk verplicht om wijzigingen opnieuw vrij te geven onder dezelfde originele GPL-licentie. Ook valt je eigen ontwikkelde software onder de noemer “afgeleid werk” en dient de broncode van deze software ook vrijgegeven te worden onder de GPL licentie. Deze licentie dient dus vooral om te vermijden dat het werk gebruikt kan worden in projecten van commerciële aard.

De LGPL licentie is een lossere of vrijere licentie in die zin dat je eigen code niet moet vrijgegeven worden onder de LGPL-licentie wanneer je een LGPL-library zou gebruiken. Wel dien je wijzigingen die gemaakt worden aan de gebruikte LGPL-code opnieuw terug vrij te geven. Je eigen code blijft wel je eigen eigendom en die mag je onder je eigen gekozen (commerciële) licentie laten vallen.

LGPL wordt ook vaak “Library” GPL genoemd omdat in veel gevallen ontwikkelaars enkel graag een bepaalde plugin willen gebruiken om hun applicatie te verfijnen, zonder dat ze hun gans project moeten vrijgeven onder een GPL licentie.

Lees hier zeker het document ”Why you shouldn’t use the LGPL license”. Voor ontwikkelaars van open source software kan het namelijk voordeliger zijn om de GPL-licentie te gebruiken, omdat commerciële projecten dan geen gebruik kunnen maken van de software. Omgekeerd kan dit natuurlijk ook een nadeel zijn, want dan zullen vele commerciële webbouwers op zoek gaan naar alternatieve libraries met dezelfde functionaliteit maar met een lossere licentie.

MIT

De MIT-license is zonder twijfel de meest geschikte licentie om te gebruiken binnen commerciële projecten. De plugins of libraries die vallen onder de MIT-licentie kunnen namelijk zonder enige restrictie gebruikt worden inclusief het wijzigen, verspreiden en verkopen van de component binnen commerciële software.

De énige verplichting is dat je de originele licentie behoud en mee opneemt in je software. Let hier vooral mee op wanneer je bijvoorbeeld je JavaScript files gaat minify’en. Alle onnodige code (en dus ook licentiecommentaren) wordt hierdoor verwijderd om kleinere bestanden over te houden. In een toekomstig artikel over performantie gaan we hier dieper op in.

Creative Commons

Wanneer je op zoek gaat naar fotomateriaal, iconen of photoshop brushes, dan vallen die vaak onder een van de Creative Commons licenties. Met deze licenties kan aangegeven worden of foto’s en ander grafisch/creatief materiaal gebruikt mag worden voor commerciële doeleinden en onder welke voorwaarden dit al dan niet is toegestaan.

De CC-licenties zijn op zich erg duidelijk en leesbaar - wat ook het doel is van deze licenties. Twijfel je toch nog, dan kan je gebruik maken van http://creativecommons.org/choose/, een simpel tooltje waarmee je zelf kan aangeven via een formuliertje op welke manier je je werk wil vrijgeven. Daarna wordt automatisch de meest geschikte licentie voor je wordt uitgezocht. Handig!

Overige licenties

Om het allemaal nog wat moeilijker te maken bestaan er nog veel andere open source licenties. Zo zijn er bijvoorbeeld de Apache en BSD licenties. Binnen web design zal je echter hoofdzakelijk de MIT, CC en (L)GPL licenties tegenkomen. Daarom gaan we in dit artikel niet dieper in op alle andere bestaande licenties.

Meer informatie over Apache, BSD en andere licenties kan je vinden in dit overzicht.

Conclusie

Wanneer je als webontwikkelaar gebruik maakt van plugins of grafische bestanden van andere ontwerpers, zorg er dan voor dat je steeds de licentie nakijkt en blijf weg van libraries die een licentie hebben die niet compatibel is met je eigen werk.

Ga steeds correct om met de licenties die verbonden zijn aan werk van iemand anders en contacteer bij twijfel de auteur van het stukje software of de grafische bestanden die je wil gebruiken. Heel vaak krijg je van zulke mensen positieve feedback terug. Ook zij appreciëren namelijk dat je correct met hun werk omspringt en ze zullen de eersten zijn om je hiermee te helpen.

Now go out and play!

Extra links en informatie

Smashing Magazine: a short guide to open-source and similar licences
Creative Commons
Open source licences

Dat Japan een fascinerend land is om te bezoeken dat is duidelijk, maar wat kunnen web designers leren van het land van de sushi en haar inwoners? We sommen onze ervaringen even op.

Efficiëntie en respect

Het eerste wat opvalt als je enkele dagen in Japan vertoeft is de grote mate van hoffelijkheid en wederzijds respect waarmee Japanners in het leven staan. De maatschappij komt op de eerste plaats en daarna pas komt het individu. Dat merk je wanneer tijdens de ochtendspits duizenden mensen op hun werk trachten te raken met de metro. In België kunnen we op z’n minst spreken van een lichte chaos wanneer honderden mensen tegelijkertijd op een overvolle metro willen stappen.

Niet zo in Japan. Daar worden netjes twee rijen gevormd waar de metrostellen hun deuren zullen openen. First come, first served. Er is niemand die ook maar zal denken aan het voorsteken van iemand in die rij. Hetzelfde principe geldt wanneer je naar het toilet gaat. Ook daar worden netjes rijen gevormd en zal niemand voorsteken zonder door de rest van de wachtenden tot orde te worden geroepen. Bovendien arriveren en vertrekken alle treinen stipt op het aangekondigde uur. Het is zelfs niet nuttig om dat te vergelijken met onze NMBS.

De grootsteden zoals Tokyo tellen miljoenen inwoners die allemaal netjes op hun werk moeten raken. Efficiëntie en het vlot laten werken van de maatschappij staat er dan ook erg hoog aangeschreven. Hoewel individuele vrijheid een niet te onderschatten rijkdom is, zou de maatschappij er bij ons heel wat toleranter en respectvoller aan toe kunnen gaan, moesten we enkele van de Japanse waarden kunnen overnemen.

Japan zou Japan niet zijn zonder ook hier weer een tegenstelling te kennen. Zo hebben we drie mensen zien werken aan een lamp die vervangen diende te worden. Eén persoon draaide de lampenkap los, de tweede gaf de nieuwe lamp aan en de derde persoon zorgde voor de vervanging van de lamp. Daarna kon persoon één opnieuw de lampenkap erop schroeven. Efficiënt, maar misschien wel overkill. Winkels hebben vaak meer personeel in dienst dan dat er klanten op een dag komen en allemaal zijn ze bezig met geïmproviseerde taken om toch maar nuttig te lijken voor hun overste.

Niettegenstaande dat deze tegenstellingen bestaan, waren we enorm onder de indruk van hoe efficiënt en gestroomlijnd alles in Japan bleek te werken, van restaurants waar je je bestelling plaatst op een automaat aan de ingang tot de hotelrecepties waar je ingecheckt bent nog voor je je rugzak van je schouders hebt kunnen halen.

Iedere freelancer kan wel dat extra tikkeltje concentratie en efficiëntie gebruiken om het beste te maken van de tijd waarover we beschikken. Enkele tips lees je alvast op Freelance Switch.

Service van de bovenste plank

Japanners weten wat service is. Het beste voorbeeld dat ik hier kan geven zijn de taxichauffeurs met hun volautomatische Toyota’s. Wanneer ze aan de kant van de straat stoppen om potentiële passagiers op te pikken, zetten ze met een druk op een knop hun achterdeur al helemaal voor je open zodat je maar hoeft in te stappen. De drempel om een taxi te nemen kan onmogelijk nog lager gelegd worden (behalve de prijs dan, die is aan de hoge kant). Wanneer de klant is ingestapt wordt de achterdeur automatisch weer gesloten, zo simpel en toch ongezien in Europa.

Hetzelfde principe kan je toepassen binnen een webapplicatie die je aan het ontwikkelen bent. Zo zullen we ervoor zorgen dat nieuwe gebruikers van onze e-commerce applicatie SolidShops.com na het registreren automatisch worden ingelogd, zonder omwegen. We zetten onze taxi-achterdeur wagenwijd open zodat gebruikers enkel maar hoeven in te stappen.

Hetzelfde principe kan je in je hele workflow opnemen. Maak het bijvoorbeeld simpel voor je klanten om je te contacteren, gebruik bijvoorbeeld Skype wanneer je in het buitenland zit, een kostenloze manier om met je klanten te communiceren indien nodig.

Altijd blijven lachen, maar blijf jezelf

Japanners blijven lachen, no matter what. Op zich is dat een erg nobel principe maar we moeten erbij zeggen dat veel van deze vriendelijkheid façade is. Niet dat ze achter je rug zullen beginnen roddelen nadat je weg bent, absoluut niet, maar soms zorgt hun doorgedreven vriendelijkheid ervoor dat ze niet meer zichzelf kunnen zijn of zo lijkt het toch.

Ons advies is om uiteraard altijd vriendelijk te blijven, zelfs tegenover de meest moeilijke klanten, maar blijf wel steeds jezelf. Sta op je strepen wanneer nodig, maar wees nooit zomaar onbeleefd gewoon omdat je een slecht dag hebt.

Wees oprecht tegen je klanten, ook als je slecht nieuws te brengen hebt. Onze vlucht naar België was geannuleerd na de vulkaanuitbarsting in Ijsland en het enige wat we op de luchthaven als feedback kregen was een hulpnummer waar we naar konden bellen als we onze vlucht wilden herboeken.

Het nummer bleek onderbereikbaar, een hotel en vlucht zouden we in de loop van de week zelf moeten regelen en ondertussen bleven de Japanse medewerkers vriendelijk, maar apathisch toekijken. We nemen hen de natuurramp niet kwalijk, maar het minste dat je zou verwachten in zulke situaties is een helpende hand of een luisterend oor.

Pas nadat een medewerkster op het hoofdkantoor de probleemsituatie duidelijk had uitgelegd konden ze van ons op enig begrip rekenen, niet omdat ze zomaar vriendelijk bleven lachen, integendeel, omdat ze eerlijk en duidelijk communiceerde wat het probleem was.

Wanneer je servers down zijn, leg dan aan je klanten uit wat het probleem heeft veroorzaakt en dat je eraan bezig bent om hen zo snel mogelijk te depanneren. Blijf dus vriendelijk, maar vooral eerlijk.

Reizen = inspiratie

Tot slot is reizen een ideale manier om nieuwe inspiratie op te doen, om mensen en culturen te leren kennen, om nieuwe smaken te ontdekken, ... Zelf proberen we er een punt van te maken zoveel mogelijk van de wereld te zien. Telkens komen we terug met nieuwe inspiratie en een nieuwe portie goesting om opnieuw aan de slag te gaan!  Bovendien is het een uitgelezen moment voor ons om die extra skill - fotografie - weer eens boven te halen en op te krikken.

Freelancers hebben vaak te lijden onder een hoge werkdruk en hoge/continue creatieve verwachtingen van klanten. Zorg dat je inspiratie niet onder druk komt te staan en ga er af en toe eens tussenuit… Je werkt ten slotte om te kunnen leven, niet omgekeerd. Je klanten en projecten zullen er alleen maar beter van worden.

Extra inspiratie: Web Design in Japan

Japans web design wordt vaak gekenmerkt door minimalisme en strakke vormen die traditioneel en modern tegelijkertijd zijn. Bekijk om af te ronden zeker The Beautiful Art of Japanese Web Design en laat je inspireren door enkele Japanse meesterwerkjes.

Ganbatte kudasai!

Google Analytics werkt door een klein stukje JavaScript-code toe te voegen aan je webpagina’s. Jammer genoeg kunnen we hier niet op rekenen wanneer we de bezoekers van onze mobiele website willen analyseren. De browsers die op mobiele toestellen geïnstalleerd staan ondersteunen namelijk vaak maar beperkt of zelfs helemaal geen JavaScript.

Google Analytics Mobile

Na wat opzoekingswerk over mogelijke oplossingen om op betrouwbare wijze onze mobiele bezoekers op te meten, kwamen we uit bij Google Analytics zelf. Sinds enige tijd bestaat er een manier om via server-side code zoals PHP, ASPX of Perl mobiele bezoekers te gaan opvolgen.

Met PHP kunnen we bijvoorbeeld detecteren welk besturingssysteem of welke browser er gebruikt wordt. Aangezien deze code server-side wordt uitgevoerd, kunnen we hier ook gebruik van maken om mobiele toestellen te detecteren. Dat is exact te manier waarop Google Analytics haar werk doet.

Bovenstaande code heeft bijvoorbeeld onderstaande output op ons systeem:

Hoe implementeren?

Het implementeren van Google Analytics Mobile in je mobiele website is niet moeilijk. Begin met in te loggen in je Google Analytics account of maak er gratis eentje aan moest je er nog geen hebben.

Na het inloggen kunnen we onderaan kiezen om een nieuw website profiel toe te voegen. In de Engelstalige versie klikt u hiervoor op “Add Website Profile”.

Selecteer in het volgende venster om een profiel toe te voegen voor een nieuwe domeinnaam. Als domeinnaam geef je hier je URL in van je mobiele website, in ons geval http://m.goodbytes.be.

De derde stap omvat het toevoegen van de PHP-tracking code. Volg hiervoor de stappen die Google Analytics je voorstelt: voeg twee stukken code toe in je webpagina’s zelf en vergeet tot slot niet om het bestand “ga.php” mee op je server te plaatsen.

Geen statistieken of “Tracking not installed”?

Jammer genoeg detecteert Google Analytics de geïmplementeerde code niet. We vinden veel dezelfde berichten van webontwikkelaars die hetzelfde probleem hebben met de nieuwe Google Analytics Mobile, maar na 24u begon Google bij ons de nodige data te verwerken.

Panikeer dus niet als uw code niet meteen of zelfs helemaal niet gedetecteerd wordt door Google Analytics. Wacht minstens 24u tot de servers van Google de nodige gegevens over uw mobiele bezoekers heeft kunnen verwerken. Daarna kan u analyseren hoeveel trafiek uw mobiele website oplevert en met welke toestellen uw mobiele website bezocht wordt.

Zoals op bovenstaande schermafdruk te zien is wordt onze mobiele website het meest bezocht met een iPhone, maar dat is dan ook geen grote verrassing. Voor meer informatie over het bouwen van mobiele websites kan u terecht op ons vorig artikel.

Happy analyzing!

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 ons 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

Google Analytics voor mobiele websites
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.

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!