Responsive web design

Vorige week werd ik gevraagd om op een Fronteers bijeenkomst in de Lessius Hogeschool in Mechelen te spreken over responsive webdesign. Het was een erg leerrijke ervaring. Je kan een verslagje van de avond nalezen op Creative Skills en op de Fronteers blog.

Wie er niet bij kon zijn kan de slides vinden op SlideShare of gewoon hieronder:

Reacties zijn uiteraard altijd welkom.

Categorieën: Ontwerp, Webomgeving,

6 reacties

Sleepstreet: mijn eerste responsive ontwerp

In Ontwerpen zonder bladspiegel had ik het al over de boeiende tijden die het web momenteel doormaakt: in heel wat landen surfen nu al meer mensen via de gsm op het internet dan via een “vaste” computer. In bepaalde ontwikkelingslanden is een computer onbetaalbaar, maar zowat iedereen heeft er wel een gsm.

In de jaren die komen zal deze trend zich ongetwijfeld voortzetten. Ook in België komt er een dag dat op jouw website meer bezoek van mobiele gebruikers verwacht mag worden dan van de reguliere computergebruiker.

Dit vergt uiteraard een enorme aanpassing op het vlak van websiteontwerp: het scherm van iemand die met een smartphone jouw website bezoekt is zoveel keer kleiner dan het scherm van de computer die je misschien op je werk gebruikt. En tussenin zitten nog de tablets, iPads en god weet welk apparaat er morgen op de markt komt.

Daarenboven werken sommige apparaten met een aanraakscherm, terwijl andere computers uiteraard met een gewone muis of trackpad werken. Ook dat vergt aanpassingen aan het ontwerp.

Tijdens de Fronteers bijeenkomst van gisteren had gastspreker Vasilis van Gemert het over adaptief ontwerpen en responsive webdesign als antwoord op dat alles: één website die zich perfect aanpast aan de verschillende schermresoluties van elk apparaat. (In mijn vorige blogpost had ik het ook al over de uitdagingen die zo’n ontwerp met zich meebrengt.)

Ik was verheugd om te zien dat Vasilis heel even wat van mijn werk demonstreerde tijdens zijn presentatie. En vandaag schrijf ik eigenlijk dit artikeltje om het resultaat van mijn eerste responsive webdesign ook met jullie te delen: je vindt de Sleepstreet website bovenaan mijn portfoliopagina. Of je kan natuurlijk ook gewoon deze link volgen naar de Sleepstreet site.

Sleepstreet is dus volledig responsive opgebouwd. Neem gerust een kijkje op je smartphone of iPad. Of schaal je browservenster om te zien hoe de site reageert op andere schermgroottes. Er is nog wat werk voor mobiele niet-Safarisurfers, maar ‘t is toch ook voor hen al een stap voorwaarts.

Zelf zin in een responsive website design? Contacteer me gerust!

Categorieën: Ontwerp, Webomgeving,

4 reacties

Ontwerpen zonder bladspiegel

Het zijn boeiende tijden voor webdesigners. De eigen workflow die elkeen van ons jarenlang rustig kon verfijnen, en die tot snel en efficiënt werken leidde, moeten we overboord gooien. Allemaal moeten we vroeg of laat op zoek naar nieuwe manieren om aan vormgeving voor het web te doen.

Op het internet is er geen sprake van een vaste bladspiegel zoals grafisch vormgevers dat uiteraard wel kennen. Collega Danny Calders wees me er gisteren nog op dat zelfs de term webpagina volledig ongepast is. De man heeft gelijk: het is een slechte metafoor die zoals zoveel ontwerptermen zijn oorsprong vindt in de drukwereld.

Enige tijd geleden konden we een bladspiegel nog makkelijk faken door in Photoshop te ontwerpen binnenin een screenshot van een leeg browservenster van 1024 pixels breed. Met wat CSS achtergrondtrucjes en vloeiende vlakken leek alles mooi te passen op het scherm van elke bezoeker. De hoogte stond dan wel nooit vast, maar verticaal scrollen is nu eenmaal geen echte barrière voor de websitegebruiker.

Maar daar is plots het mobiele web. Meer en meer mensen surfen op het web met gsm’s, tablets en nog meer goeds. Een website die 960 pixels breed is, is ok, maar helemaal niet meer het optimale compromis van weleer. Geen enkel gsm-scherm kan die 960 pixels zonder schuifbalken of schalen weergeven.

Responsive webdesign

Responsive webdesign is in dat opzicht een prachtig gegeven waar ik ook mijn eerste stappen in waag. Het idee is simpel: met wat CSS-magie zorg je er voor dat je website zich qua breedte en hoogte aanpast aan de schermgrootte van elke bezoeker. Zo benut je het scherm van de gebruiker maximaal en spaar je de gebruiker van onleesbaar kleine tekst of vervelende interacties als horizontaal scrollen, pinchen of zoomen.

Maar hoe ontwerp je zoiets met ontastbare afmetingen? Vroeger ging ik dus een bladspiegel faken in Photoshop en met wat verbeelding wist ik perfect hoe het ontwerp ging meeschalen naar een breder browservenster. Kleinere browservensters waren er praktisch niet. Maar nu?

Eén van de laatste projecten waar ik mee bezig ben, is het websiteontwerp van een Gentse B&B. We gaan volledig de responsive toer op. Intuïtief ben ik in Photoshop begonnen met het ontwerp in een canvas dat de afmetingen heeft van een iPhone.

Toen dat er was, ben ik alles opnieuw gaan schikken in een canvas met de afmetingen van een staande iPad.

Om daarna nog een psd te maken met het ontwerp aangepast voor een liggende iPad. En uiteindelijk nog een versie voor grote computerschermen.

Yep, 4 ontwerpen voor de homepagina. Daar kruipt veel tijd in uiteraard. Leuk om doen, zeker en vast, maar het kostenplaatje voor de klant loopt snel op. Zeker als je weet dat de gemiddelde “eenvoudige” website snel uit een vijftal templates bestaat. Waar ik dus vroeger 5 ontwerpen ging maken, worden dat er plots 20.

Ontwerpen in de browser

Zover heb ik het niet laten komen. Onder impuls van een invloedrijke webdenker ben ik vroeger dan gewoonlijk naar HTML en CSS overgestapt: nadat het ontwerp van de 4 homepaginaversies af waren. De rest van de webpagina’s ging ik dus rechtstreeks in de browser ontwerpen. CSS als Photoshop. Mja, het is gelukt, maar het heeft me veel tijd gekost. Af en toe ben ik ook teruggekeerd naar Photoshop om mijn ideeën de vrije loop te geven en op zoek te gaan naar minder voor de hand liggende oplossingen.

Ik worstel dus. Ik ben op zoek naar een nieuwe werkwijze waarin de puzzelstukjes beter passen. Ik zie mezelf nooit een website vanaf nul in de browser ontwerpen. Ik moet me vrij kunnen uitleven in Photoshop.

Responsive web design vraagt meer aanpassingen dan wat ik op het eerste zicht dacht. Het is meer dan een paar CSS media queries. Een bijna wiskundig systeem van grids is zeker en vast een oplossing, maar mag niet te beperkend werken. Voer voor onderzoek.

Ik ben benieuwd naar jullie ervaringen. Hoe beïnvloedt de onbestaande bladspiegel jullie ontwerpproces? Care to share?

Categorieën: Ontwerp, Photoshop, Webomgeving,

10 reacties

Future-proof

Het voelde daarnet even vreemd aan: één van mijn allereerste klanten stuurde een mailtje voor een kleine site-update. Terzijde merkte de persoon in kwestie ook op dat hij “in het cms geen persartikelen meer kon toevoegen die in 2011 waren gepubliceerd.” Even checken leerde me snel de oorzaak van het probleem kennen: de keuzelijst waarin hij het jaar van publicatie kiest, loopt maar tot 2010.

Eigenlijk is het wel straf dat die site én dat cms nog altijd online staan. Als ik het me goed herinner lanceerden we het project in 2004. Ik maakte het cms toen nog zelf, bij gebrek aan goede alternatieven. Geen haar op mijn hoofd dat er aan dacht dat het project in 2011 nog online zou staan.

Weer een lesje geleerd.

Categorieën: Webomgeving,

1 reacties

Links op Twitter

Zoals elke zichzelf respecterende geek ben ik sinds een paar jaar lid van Twitter. Als zelfstandig webdesigner kan ik nu eenmaal niet naar de koffiemachine snellen om wat bij te praten met collega’s. En dan schiet Twitter te hulp: ik vind er mijn dagelijkse dosis virtuele small talk over het designnieuws van de dag.

Wellicht wist je ‘t al: op Twitter kan je berichten plaatsen die uit maximaal 140 tekens bestaan. Wie je volgt, krijgt die dan te zien. Net zoals ik ook de tweets kan lezen van de mensen die ik volg. Het is een fantastische vrije nieuwsdienst.

Maar het is niet allemaal koek en ei. Als ik even mijn twitterstream op en af ga, dan staat er in bijna de helft van alle tweets wel een link naar één of andere opmerkelijke webpagina. Vaak zitten daar interessante dingen tussen (tenminste als je boeiende mensen volgt) maar soms verwijzen die ook wel eens naar de meest onzinnige crap.

Bij een goed ontworpen url in de zin van
http://www.fait-divers.be/cultuur/zang/nieuwe-single-eddy-wally weet je natuurlijk al op voorhand of die webpagina de moeite van het klikken waard is.

Maar niet zo op Twitter. Twittergebruikers hebben de gewoonte hun links door een url-shortener te sleuren: software die een lange url inkort. Zo hebben ze naast de url ook nog plaats om een begeleidende opmerking te schrijven. Bovenstaande link zou er dan zo kunnen uitzien: http://bit.ly/h6p2up. Maar die verkorte urls vertellen me helemaal niets over wat er daar te lezen valt.

Semantisch is anders

En dat is het punt waarover ik het wilde hebben: Twitter zou urls niet mogen laten meetellen in hun tekenlimiet. Alleen dan raken we verlost van die helse url shorteners. Een goedgevormde url vertelt me wat er op die pagina te lezen is. Een url in de zin van http://bit.ly/h6p2up is, met licht gevoel voor overdrijving, de dood van alles waar het semantische web over gaat.

Een meer wetenswaardige post scriptum: Kyle Neath heeft een uitstekend artikel geschreven over url design, op een mooie beschrijvende url: http://warpspire.com/posts/url-design/

Categorieën: Opinies, Webomgeving,

4 reacties

Over HTML5

HTML5 is al enkele jaren in ontwikkeling en het lijkt er op dat het ook nog een tijdje zal duren vooraleer HTML5 officieel ‘af’ zal zijn. Toch ondersteunen browsers al enkele van de nieuwe HTML5-tags en duiken er op blogs meer en meer artikels op over deze nieuwste HTML-telg.

So what’s up?

Maar hoever staan we nu? Is XHTML ten dode opgeschreven en moeten we vanaf nu opnieuw HTML gebruiken? Kunnen we überhaupt al HTML5 gebruiken en wat moeten we daarvoor doen? Wat is dat nieuwe canvas element waar iedereen zo lovend over spreekt?

Alles over HTML 5

In de Boagworld podcast episode 184 (eind september 2009) heeft de host een interview met Jeremy Keith, één van de zogenaamde HTML5 superfriends. Jeremy slaagt er in om als geen ander enkele ingewikkelde concepten achter HTML5 heel erg duidelijk uit te leggen. Hij haalt hardnekkige misverstanden de wereld uit en laat ons weten wat we best doen om ons als websitebouwers optimaal voor te bereiden op HTML5. In het interview verwijst Jeremy ook naar enkele interessante links over HTML5.

Je kan de episode beluisteren op de episodepagina van de Boagworld podcast website. Het interview begint rond de 23ste minuut. Je vindt er trouwens ook een volledig neergeschreven versie van het interview. Enjoy.

Categorieën: Webomgeving,

0 reacties

Scrollen in het oneindige

Een paar jaar terug was ik onder de indruk van de manier waarop Google voor Google Reader de klassieke vorm van paginering had herdacht en zelfs onnodig gemaakt.

Hieronder zie je een voorbeeld van een klassieke paginering: op de pagina zie je enkel de eerste items. Wil je meer items zien, dan moet je doorklikken naar de volgende pagina.

Google Reader gebruikt geen paginering maar maakt gebruik van de scrollbar: wil je meer items zien, dan scroll je gewoon naar onder. Als de scrollbar beneden is, worden nieuwe items aan de pagina toegevoegd.

Het is een geniaal eenvoudige oplossing die erg intuïtief werkt en die voor iedereen meteen ook duidelijk is.

Wat goed is, krijgt navolging

Googles vernuftige oplossing heeft sindsdien uiteraard navolging gekregen. Recent nog door Haystack bijvoorbeeld, de nieuwe jobsite van 37signals. Als je er naar beneden scrollt, dan worden nieuwe portfolio’s ingeladen op de pagina. Hoe meer je dus scrollt, hoe langer de pagina wordt. Probeer het maar eens.

Scrollen in het ijle

Maar op de Haystack website lijkt het scrollmechanisme me minder logisch. Als je op zoek bent naar een webdesignbureau uit België, dan ga je waarschijnlijk alle portfolio’s willen afschuimen uit België om zo een juiste keuze te kunnen maken. Je begint dus te scrollen en er komen telkens portfolio’s bij. Dat werkt handig.

Maar na een tijdje ga je je echt wel afvragen hoeveel portfolio’s er nog volgen. Op de Haystack pagina is nergens te zien hoeveel scrollwerk je nog zal hebben om alle portfolio’s uit België te kunnen zien. En dus ben je maar een beetje aan het scrollen in het oneindige.

Bij een klassieke (en goedgebouwde) paginering heb je altijd een idee van hoeveel items er nog volgen. Is er geen paginering dan kan je vaak uit de lengte van de scrollbar afleiden hoe lang de pagina is en dus hoeveel items er waarschijnlijk nog gaan volgen. Maar op de Haystack manier blijft het gissen.

Een oplossing

Een simpele aanduiding van hoeveel portfolio’s nog volgen, zou volgens mij helemaal niet misstaan om het systeem een pak gebruiksvriendelijker te maken. Da’s trouwens ook wat Google Reader doet.

Categorieën: Opinies, Webomgeving,

1 reacties