Author Archives: PixelChick

Designers zit niet stil

Afgelopen weekend vond de vierde editie van WordCamp Nederland, in Utrecht plaats. Dit is het event voor gebruikers en ontwikkelaars van WordPress. Voor mij was dit de derde keer dat ik aanwezig was, en voor de tweede keer was ik spreker. In 2012 behandelde ik een case over mobiel solliciteren, maar voor deze editie ging ik de uitdaging met mezelf aan. Ik besloot om te spreken vanuit mijn eigen vakgebied: design.

Inspiratie voor mijn onderwerp was een discussie op Twitter tussen een aantal frontenders. Deze behandelden het onderwerp of een designer wel of niet verstand moest hebben van CSS. Ik heb vorig jaar al tijdens een WordPress meetup in Amsterdam een discussie losgekregen over de veranderende rol van een designer en front-end developer binnen het web-team. Dit bleek ook voor WordCamp weer een prima basis te zijn om wat stof tot nadenken achter te laten in de zaal.

De rol van een designer is veranderd

Wanneer ik terug kijk op de ontwikkelingen van webdesign in de afgelopen 10 jaar is dit enerzijds eigenlijk enorm toegenomen, maar anderzijds ook weer beperkt. In 2006 maakte ik bijvoorbeeld heel veel websites met Flash en design voor een website in Flash betekende eigenlijk dat je geen beperkingen had. Je kon alle lettertypen gebruiken en alle elementen over elkaar heen schuiven. Als ‘finishing touch” deed je nog een beetje video, geluid of animatie erbij. Het wonderlijke was dat de bezoekers rustig minuten lang naar een eveneens prachtig ontworpen loading balk bleven kijken. Een grid was er niet en je kon helemaal los in Photoshop of Illustrator. Dit was voor het web een behoorlijke verademing omdat je zonder al te veel problemen gebruik kon maken van ongeveer alles.

Steve_Jobs_presents_iPhone

Maar in 2007 gebeurde er iets wat later het leven van een webdesigner behoorlijk zou gaan veranderen. De opkomst van de iPhone en 3 jaar later ook de iPad betekenden ongeveer het einde van Flash, want Flash werd hierop gewoon niet ondersteund. Maar niet alleen dat was een grote verandering voor het webdesign proces. Wat nog veel grotere gevolgen had was dat gebruikers je website nu ook op andere apparaten bekijken naast hun vertrouwde desktop of laptop. Webdesign was weer een stap verder in haar evolutie, maar hoe zit het met diegenen die dit moeten ontwikkelen?

De afgelopen jaren is het website bezoek met smartphones en tablets enorm toegenomen. Mensen gebruiken devices overal, tegelijkertijd of achter elkaar. Om een website geschikt te maken voor al die verschillende schermgroottes hebben, is in de afgelopen jaren responsive webdesign wel de standaard geworden. Ik kwam laatst een hele mooie tekst tegen. “Het web is altijd al responsive geweest, wij als webdesigners hebben er vaste pixels aan meegegeven.”

Wat betekent dit nu voor jouw rol als designer?

Tijdens WordCamp volgde ik ook andere presentaties en bij die van de front-end developers viel me één ding op: de irritatie richting designers. Vroeger voor het “responsive webdesign tijdperk” was de rol van een designer simpel. Je maakte een schets in Photoshop, pixel nauwkeurig en deze werd exact door vertaald naar code. Tegenwoordig moet je een design maken voor desktop, tablet, mobile…misschien nog 2 andere formaten. Elementen gaan verschuiven, volgorde van leesbaarheid is anders. Kortom een compleet andere manier van werken. Een developer maakte een mooie opmerking: “Fuck the designer”. En ondanks dat ik een geboren designer ben, kon ik niet anders dan hem gelijk geven.

blokkendoos

Responsive design klinkt voor ons designers nog een beetje eng. Misschien een beetje beperkend, alsof je al je vrijheden weer moet inleveren die je de afgelopen jaren heb verworven door de technische veranderingen en verbeteringen. Terwijl het meerendeel van de bezoekers nog steeds je site bezoekt met laptop of pc, moet je in eens rekening gaan houden met de meest kleine schermen. Twee jaar geleden dacht ik er ook zo over en vroeg mezelf ook af of responsive design niet gewoon een hype was. Achteraf gezien is dat gewoon iets wat tussen je oren zit en is het juist een uitdaging om iets te ontwikkelen wat voor alle schermen een perfecte gebruikers ervaring kan bieden.

I’ve lost my pixels

Ik moet toegeven, ik ben wel een designer met een ongezonde interesse in code omdat ik tijdens mijn eerste baan moest leren html-en. Toen ik begon met het ontwerpen volgens de methode van responsive design, wilde ik zelf de vrijheid hebben om te bepalen wat er gebeurde op een tablet of smartphone. Apple en Microsoft stonden aan de basis voor de hedendaagse design trend: “flat design”. Daardoor kreeg ik steeds meer het gevoel dat ik Photoshop niet meer nodig had. Ik stapte over naar Illustrator en ging vandaaruit verder in de browser.

I've lost my pixels

Ik zag in de zaal een aantal mensen wit wegtrekken toen ik riep dat ze eens moesten proberen te stoppen met Photoshop. Gewoon alleen nog maar gebruiken waar het programma eigenlijk altijd voor heeft gediend: nabewerking van foto’s. Tuurlijk moet Illustrator je wel liggen. Ik heb jarenlang vol verbazing toegekeken hoe mijn collega al zijn ontwerpen deed in Illustrator terwijl ik het heerlijk vond om met pixels te werken. Illustrator gebruikte ik wel vaker voor Flash websites omdat Flash ook een vectoren programma is. Met de komst en ondersteuning van SVG, worden vectoren bestanden voor het web dus ook steeds meer een standaard. Waarom zou je op dubbele retina grootte gaan werken in Photoshop als je in Illustrator sowieso al een schaalbaar ontwerp kan opleveren.

Tuurlijk zal niet elke designer de stap kunnen maken om in de browser te gaan vormgeven en Photoshop kunnen loslaten. Net zo goed dat een frontend developer niet het oog voor detail bevat die een designer wel heeft. Daarom is het juist zo belangrijk dat de traditionele designer eens serieus gaat kijken naar zijn of haar eigen rol binnen het team. En zich eens goed gaat verdiepen in de mogelijkheden en beperkingen van de techniek. De rol van een designer is veranderd, design is niet langer alleen een mooi plaatje. Maar als designer moet je rekening gaan houden met het feit dat functionaliteit misschien nog wel belangrijker is dan jouw creatie. En het gevoel van beperking die je opgelegd krijgt door responsive design, is juist een reden om te gaan zoeken naar een andere invulling voor je creativiteit.

Het web bestaat niet uit pixels

Soms verlang ik ook terug naar die tijd dat ik helemaal los kon. Dat ik me niet druk hoefde te maken hoe snel een site ingeladen was. Vindbaarheid, daar deden we niet aan. Maar als ik dan bezig ben met een ontwerp om te zetten naar een responsive website dan ervaar ik toch weer hetzelfde gevoel. Het zit in de kleine dingen, en heel veel kleine dingen bij elkaar maken iets toch weer groot. Je merkt het nu al, steeds meer browsers gaan de nieuwste technieken ondersteunen waardoor de mogelijkden voor ons designers ook weer toenemen. Maar ga daar niet op zitten wachten, maak je front-ender eens blij en geef hem niet het gevoel of je weer wat over de schutting werpt. Laat die pixels los en neem het web zoals het bedoelt was: als vrije vorm.

Reacties

Na afloop zag ik een behoorlijk aantal mentions op Twitter van mensen die mijn presentatie hadden bijgewoond. Gekscherend werd ik de Photoshop-killer genoemd. Roepen dat je moet stoppen met Photoshop is natuurlijk ook wel de gevoelige snaar raken van designers. En dan nog er eens aan toevoegen dat ze moeten gaan coden is helemaal tegen de schenen schoppen. Voor mij werkt vormgeven in de browser erg fijn, maar voor een design start ik wel altijd in Illustrator. Hoe ik dat design verder vertaal naar de andere schermen is een stap die ik in mijn hoofd doe en later verder uitwerk in code. Die vrijheid die ik in code heb komt omdat ik ook gewoon goed ben in HTML en CSS. Ik snap dat voor het grootste deel van de designers code alleen maar zal beperken doordat ze het niet zelf kunnen schrijven.

Maar met mijn presentatie had ik wel bereikt wat ik wilde. Mensen ging er over nadenken wat ik had verteld. Mijn volledige presentatie kun je vinden op Slideshare.

De treurige status van de (mobiele) reiswebsite

Onze eerste Koningsdag is achter de rug, de bomen zijn groen gekleurd en de temperaturen gaan omhoog. Langszaam begin je aan de zomer te denken. En daarbij horen natuurlijk ook vakantieplannen!

Bij het zoeken naar een leuke vakantie is voor veel mensen Google de eerste stap. Vorig jaar toonde Google’s rapport “Our Mobile Planet” nog dat reizen  in de top 5 staat van meestgebruikte onderwerpen waarop wij zoeken. Maar hoe zit het eigenlijk met de mobiele status van de reiswebsites? Een zoekactie naar dit onderwerp  levert een artikel van Twinkle Magazine op uit 2012. Nu zijn we ruim 2 jaar verder en wat is hierin nu eigenlijk veranderd?

Travel Top 30: de grootste online spelers

Twinkle verwijst in het artikel naar de toenmalige Travel Top 30 op hun website. Leuk om die ook even voor 2013 te bekijken. Hieronder het lijstje:

  1. KLM
  2. TUI Nederland / Kras.nl
  3. Sundio Group
  4. Transavia.com
  5. Thomas Cook
  6. Travix
  7.  Landal GreenParks
  8. Emesa Nederland
  9. Roompot
  10. Vliegtickets.nl

Ik zal jullie alvast de verrasing verklappen: het meerendeel neemt nog steeds de smartphone bezoekers niet serieus.

De mobiele aanvoerders

KLM werd in het artikel uit 2012 al geroemd en stond ruim bovenaan. KLM snapt het gewoon, lopen voorop en doen hun best om hun klanten tevreden te houden.  Top!

Een stap in de juiste (mobiele) richting

De tweede vliegmaatschappij in dit rijtje,  Transavia heeft wat meer moeite om het te begrijpen. Wanneer ik met mijn smartphone via Google naar Transavia.com ga, krijg ik HET scherm wat je als mobiele bezoeker echt NOOIT wil krijgen. Juist het scherm met verwijzing naar de app. Ik wil geen app downloaden, ik wil zien wat je me te bieden hebt, dus ik klik op de link “ga naar de website”.

transavia

Ik heb nu spijt dat ik de app niet heb gedownload. Met de website kan ik helemaal niks op mijn smartphone. Met de app kun je wel gewoon een vlucht boeken. Dat dan weer wel… Maar lieve mensen van Transavia, wil je perse verwijzen naar je app, haal dan aub die link weg naar de website. Ik ben teleurgesteld. :-( Maar goed, toch een plusje omdat jullie in ieder geval een app hebben, zelfs voor Android en iPhone.

HuskSundio Group

Ik heb goede hoop op de Sundio Group die met een aantal grote namen zoals SunWeb, Jiba en GoGo redelijk gericht zijn op jongeren. Opvallend is eigenlijk de diversiteit in het mobiele aanbod. Aantal websites zijn alleen voor de desktop, Sunweb heeft dan een aparte mobiele site en de 3 websites die responsive zijn, lijken verdacht veel op elkaar. Maakt verder niet uit, ze zijn gelukkig mobiel. Ik pak even die van Husk.nl en probeer een reis te boeken. De site is lekker snel en zelfs de beschikbaarheid vloeit rap over mijn scherm. Ik spring zowat van blijdschap op als ik een “boek” knop zie staan, waarna ik in een andere beveiligde omgeving kom die ook gewoon smartphone proof is.

Helaas heeft SunWeb geen responsive website, maar een aparte mobiele website, die uiteraard ook apart is geindexeerd door Google. Naast de m.site heeft SunWeb ook een uitgebreide app, ik kan er zelfs mijn reis mee boeken.

Husk heeft naast zijn responsive website ook nog een iPhone app maar deze is meer voor gebruikers die hun reis al geboekt hebben en op de plek van bestemming nog wat informatie nodig hebben. De app is ook niet te vinden in de category “reizen”, maar in “lifestyle”. Logisch dus ;-)

Vliegtickets

Vliegtickets heeft ook een soort van responsive website. Ongeveer 80% van de normale content op de homepage verdwijnt en alleen het zoekblok blijft achter. Het formulier heeft op de smartphone niet de bekende native formulieren dus het is vrij lastig om bijvoorbeeld met de datum prikker om te gaan.

Thomas Cook

Thomas Cook lijkt zich vooral te richten op apps. Ze hebben een ruim aanbod in zowel de Google Play als de Apple Store. Beetje jammer dat de website nog niet geschikt is voor de mobiele bezoeker, maar misschien zijn ze nog druk bezig ;-)

De achterblijvers

Ander verhaal voor de websites www.tui.nl en www.kras.nl. De nummer 2 uit de lijst van online travel partijen heeft gewoon geen mobiele website. Ik zoek naar iPhone apps en die zijn zelfs niet aanwezig. Hoe willen ze op deze manier de online bezoeker nog kunnen servicen?

Landal is een organisatie die ik ook al een paar keer op Twitter “geprikkeld” hebt naar hun mobiele beleid. De laatste keer is al weer een aantal maanden geleden en toen kreeg ik als reactie terug dat ze bezig waren met een nieuwe website. Ik weet dat website trajecten veel tijd in beslag kunnen nemen en dat met name het hele boekingsproces lastig door te vertalen is naar kleinere schermen. Ik hoop dus dat Landal nog dit jaar kan komen met een website waar ook de smartphone bezoekers blij van worden.

De oprichter van Roompot heb ik twee jaar geleden eens gesproken toen ik bij BNR radio te gast was. Hij had toen nog zijn focus op social media maar was zeker wel geinteresseerd in mobiel. Nu twee jaar verder is er alleen nog maar een app voor de iPad met het magazine. Vorig jaar was er ook nog een iPhone app, maar die kan ik niet meer vinden.

Ik ben op zoek naar een verklaring

Wat is nu de reden dat de reisbranche zo enorm achterloopt? Het proces om een reis te boeken vergt natuurlijk wel het invoeren van een berg gegevens. Booking.com doet dit heel goed door dit te koppelen aan een inlog. Bij Landal of Roompot is dit natuurlijk wat lastiger omdat dit hier niet het geval is (Zou trouwens best handig om wel met inlog te gaan werken). Tevens is het binnenhalen van alle data voor bijvoorbeeld de last minutes redelijk traag en zwaar. Niet iets wat je snel zal kunnen doen op je mobieltje met de snelheid van 3G.

Kijken, kijken…kan niet kopen

Maar wat doen mensen nou juist op hun andere schermen: juist orienteren. En zelfs dat is bij het grote gros van de reiswebsites gewoonweg niet mogelijk. Ik hoop dat dit over twee jaar anders is. Dat Landal zich aan zijn belofte houdt en nog dit jaar met een mobiel vriendelijke website komt. Ik hoop dat de Sundio Group hun responsive website template gewoon even strak trekt ook naar hun andere websites. En dat meneer Roompot na het lezen van dit artikel zich ons gesprek herinnert en mij kan vertellen waarom ze er zelfs op achteruit zijn gegaan (van app naar niks).

Idioterie

In 2006 liep ik ‘m voor de eerste keer, in 2007 moest ik mijn plaatsje in het business team afstaan omdat ik van baan wisselde en in 2008 was ik er weer vrolijk bij. Na 16 km, fris de eindstreep over riep ik “nooit meer”.

De Dam tot Damloop, een begrip in mijn woonplaats Zaandam. Ook beter bekend dan de kroegentocht. Maar desondanks een van de leukste en grootste hardloopwedstrijden in Nederland. En omdat het nu de 30e was, was het animo nog groter. Alsof er nog extra kaartjes beschikbaar waren voor Lowlands of Pinkpop…zo graag wilden mensen zich inschrijven om 16 km pijn te leiden. Want ja…zo ziet het er voor velen (ongetrainde) mensen uit.

Ik besloot om dit jaar ook weer mee te gaan doen aan deze carnavalsoptocht. Gewoon omdat het leuk is. Bekenden staan langs de kant en je loopt door straten waar mensen je aanmoedigen ondanks dat ze je niet kennen. Geen enkele andere loop heeft zoveel sfeer.

Inschrijven voor de 30e editie, er was zelfs een wachtrij systeem. Om half 12 kon je aansluiten in de wachtrij en om 12 uur zouden de deuren opengaan. Alsof je in de rij stond bij de Apple winkel voor een gloednieuwe iPad…zo spannend was het. Ik heb drie verschillende browsers, dus in elke had ik een wachtrij nummer bemachtigd. Om klokslag 12 uur veranderde de inhoud van mijn schermen…

damloop

Ondanks dat er slechts 1 seconde zat tussen het openen, was de plek in de wachtrij volkomen random. Het regende klachten op Facebook en Twitter bij de organisatie. En volkomen terecht. Mensen die keurig om precies half 12 een plek kregen in de wachtrij, hadden geen “kaartje” weten te bemachtigen en mensen die om 12 uur eens de site openden wel. De nummers waren volkomen random uitgegeven. Moet je voorstellen dat jij al vanaf 6 uur ‘s ochtends in de rij staat voor de nieuwe iPhone 6 en er komt iemand aanwandelen om half 10 en die mag direct doorlopen zodra de winkel zijn deuren opent. Ik denk dat de politie gebeld kan worden…

Daarbij had de organisatie ook nog een foutje gemaakt. Na een succesvolle inschrijving, kreeg je geen bedanktscherm maar werd je teruggestuurd naar de wachtrij. Daarop volgde een foutmelding dat het nummer niet meer klopte. Voor velen leidde dit tot complete paniek. Ze probeerden het nog een keer…en nog een keer…en nog eens…Er was een meisje die zich zelfs 5!!! keer had ingeschreven. Dat is natuurlijk wel een beetje dom. Je kreeg keurig netjes een mail binnen met bevestiging van de inschrijving.

Dam tot Damloop, de 30e editie. Nu al legendarisch als het gaat om de inschrijving. En dan moet er nog gelopen worden. Ik heb me daarna maar gelijk ingeschreven voor de halve van Amsterdam. Binnen 5 minuten was alles gelukt. Gewoon op mijn gemakje zonder stress. Idioterie is het….

Responsive Design, bij welk scherm stopt het?

Dat we in een multi-screen-world leven moet niet meer een verrassing zijn. Okay….dat het meerendeel van Neerlands websites nog steeds niet te bekijken is op een normaal scherm (ja die van mijn smartphone lieve marketeers!!) blijft natuurlijk een trieste ontwikkeling. De juiste oplossing ligt namelijk gewoon voor handen: responsive design. Responsive design is een manier om je website op elk device er goed uit te kunnen laten zien.

Responsive Design, bij welk scherm stopt het?

Klinkt eenvoudiger dan het is want als “front-end designer”  weet ik uit ervaring dat het maken van een goed responsive design best een uitdaging is. Zeker om het zo te “adapten” dat het op elk device werkbaar is zonder complete delen van de pagina te verbergen. Ik heb in deze inleiding al twee keer geschreven “elk device”. Een gevaarlijke uitspraak want wat valt hier tegenwoordig nog onder? Terwijl veel bedrijven met hun website nog in de smartphone ontkenningsfase zitten, stel ik mezelf al weer de volgende vraag. Wat moeten we doen met wearables?

Responsive Design, bij welk scherm stopt het?

Voordat de smartphones in opkomst kwamen bij het grote publiek en de Blackberry’s en Nokia’s keurig werden ingeruild voor de Samsungs en iPhones had niemand voorspeld dat mensen hun telefoon daadwerkelijk zouden gebruiken om alle content van je website te scannen. Je telefoon zou je niet thuis gebruiken, maar onderweg en alleen om even snel iets op te zoeken. Dat dit idee inmiddels behoorlijk achterhaald is, bevestigd Google ook in zijn jaarlijkse rapportage.

Wat is nu het antwoord op de vraag hoe gebruikers omgaan met de nieuwste generatie devices? Een smartwatch is op dit moment niet meer dan het verlengstuk van je smartphone. Maar de ontwikkeling staat nog in kinderschoenen en daardoor de manier van gebruik ook. Toch is de smartwatch en andere wearables wel iets waar we nu al over na moeten gaan denken. We kunnen er apps voor maken, maar is het straks ook de bedoeling dat we een deel of misschien de hele website moeten kunnen opvragen op deze screens? We begonnen met smarthphones ook met een schermgrootte van 320×240 en we hebben nu inmiddels apparaten die niet meer passen in de gemiddelde handtas of in de kontzak van je skinny.

Hoe gaan we een website fatsoenlijk tonen op zo’n klein scherm. Past deze content wel om je pols en is responsive design eigenlijk wel echt de oplossing van de toekomst? Ik ben niet de enige vakidioot die zichzelf deze vraagt stelt, die onderstaande schermafbeelding van het forum op csstricks.com

csstricks

Een design fatsoenlijk optimaliseren van een groot desktop scherm naar telefoonformaat zonder kwaliteitsverlies is niet makkelijk. Deze terugbrengen naar het schermformaat van een wearable is een uitdaging. De beperkingen die je hebt op een telefoonscherm zijn kinderspel vergeleken bij de manier van navigeren op een horlogescherm.  Wil ik als gebruiker een website kunnen openen op mijn smartwatch? Nu.nl ontwikkelde een app voor de Sony Smartwatch en de promovideo van deze wearable laat ook zien dat er een browser op zit. Dus er is een kans dat iemand jouw website gaat bezoeken op zijn horloge….Het beeld dat deze bezoeker ervaart van je niet-responsive website is eigenlijk zoals  onderstaande foto ;-)

Responsive Design, bij welk scherm stopt het?

Maar kunnen we door  het toevoegen van extra breakpoints ervoor zorgen dat responsive design nog steeds staat voor het supporten van alle schermen? Of komen we weer in de fase waarin we ook zaten met smartphones. Eerst apps…voorzichtig aparte mobile websites…en dan uiteindelijk multi-screen. Ik denk dat er aan responsive design zeker wel grenzen verbonden zijn. En dat we nu te maken gaan krijgen met een nieuwe groep schermen die hun eigen oplossing nodig gaan hebben. Laten we responsive design gewoon lekker houden voor die ontelbaar verschillende schermresoluties, Android versies en type browsers. Daar hebben we het al druk genoeg mee toch…