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,

3 reacties

Designer meetup Gent part 2

Eerder dit jaar kwamen 20 ontwerpers samen in de Gentse Vooruit om bij pot en pint te babbelen over typografie, illustratie en grafische vormgeving. Deze keer pakken we het iets groter aan. Er is plaats voor 40 ontwerpers, en Yves Peters van Fontshop komt een uurtje spreken over typografie. De meetup vindt plaats in de Brugzaal van Vooruit.

Yves Peters ken je wellicht van http://www.fontfeed.com en http://www.fontshop.be of misschien zelfs als @BaldCondensed op Twitter.

28 september. Vanaf 20u. Presentatie Yves Peters om 21u20. Na de presentatie kan er nagepraat worden.

Omdat de plaatsen beperkt zijn, is reserveren een must! Alle info hier. Eerst komt, eerst maalt!

Categorieën: Ontwerp, Typografie, Overige,

3 reacties

Mobile first ontwerpen

Enkele dagen terug heb ik een tweede responsief ontwerp online geplaatst. Het is deze keer een eenvoudige webshop geworden. Het resultaat kan je bekijken op madebywolf.com. Haal er gerust je gsm of iPad bij. (Qua vormgeving was ik hier gebonden aan een bestaande huisstijl.)

Het grote verschil met Sleepstreet, mijn vorige responsive design, is dat ik de Wolf website volledig “mobile first” heb opgevat (onder impuls van Andy Clarkes 320AndUp).

Desktop first

Sleepstreet was “desktop first” opgebouwd: ik maakte eerst een fluid versie van de website zoals die er moest uitzien op de desktop en ging daarna media queries gebruiken om het ontwerp aan te passen voor een vijftal andere schermresolutiezones, gaande van gsm tot high-res monitor.

Het voordeel van die “desktop first” aanpak is dat de website zonder problemen meteen goed wordt weergegeven in Internet Explorerversies ouder dan 9 (die geen media queries ondersteunen). Geen gepruts daar dus.

Het nadeel is dat mijn CSS een pak uitgebreider werd. Want voor elke regel CSS die iets specifieks aanpakt in de desktop layout, had ik er minstens 5 extra nodig voor de andere schemresolutiezones. Dat komt omdat ik media queries gebruikte met minimum- en maximumwaardes, zoals deze:

De CSS in bovenstaande media query wordt alleen toegepast als de viewport tussen de 320 en 380 pixels breed is. Is ze 319 of 381 pixels breed, dan wordt de standaard desktopversie weer getoond. Daarom is dus een volgende media query nodig die de volgende schermresolutiezone aanspreekt, zoals:

Mobile first

Wolf is dus mobile first opgebouwd. Mijn basis-CSS beschrijft bijgevolg de gsm-versie van de website. Op zich heeft dat alleen maar één groot nadeel: oude IE-versies tonen altijd de gsm-layout.

Maar op media queryvlak wordt het wél interessanter, als je gebruik maakt van media queries die alleen minimumwaardes bevatten tenminste, zoals deze:

Via deze eerste media query ga je bepalen wat moet gebeuren als een gebruiker je site bezoekt met een scherm dat wat meer pixels kan weergeven dan het standaard gsm-scherm. Het leuke aan die media query is dat de CSS die er in gestopt wordt ook wordt toegepast op een scherm dat 2000 pixels in de breedte kan weergeven. Dat komt uiteraard net doordat geen max-width is beschreven.

Het komt er dus op neer dat je een CSS-regel doorgaans niet in elke schermresolutiezone moet definiëren. Alleen in die zone vanaf dewelke je wil dat er verandering optreedt. En dat zorgt voor heel wat minder CSS.

En Internet Explorer dan?

Maar wat met oudere IE-versies die geen media queries ondersteunen? IE8 is nu eenmaal ‘s werelds meestgebruikte browser. En die 30% van je bezoekers willen heus geen mobiele versie zien van je website op hun desktopcomputer.

De oplossing is eigenlijk vrij eenvoudig: geef IE respond.js. Respond.js is een fantastisch script dat checkt of je browser media queries ondersteunt. Als dat niet het geval is, dan zal respond de CSS uit je media queries interpreteren en die via javascript aan de browser gaan opleggen. Het resultaat: je media queries werken in oude IE-versies.

Ik ben overtuigd. Mijn volgende website wordt op designvlak zeker en vast opnieuw mobile first.

Categorieën: Ontwerp,

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

9 reacties

Designer meetup Gent

Samen met Johan Ronsse en de mensen van Gorilla webdesign, organiseren we een (web) Designer Meetup in Gent op 23 februari 2011. Kom zeker eens langs als je zin hebt in nerdy gesprekken over het web, css en letters. Maar haast je: inschrijvingen zijn beperkt tot 16 personen.

Omdat freelancen behoorlijk eenzaam kan zijn…

Categorieën: Overige,

1 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