Responsive Design: Neem afscheid van pixel-perfect, denk proportioneel

Thumbnail Responsive designResponsive Web Design gaat verder dan alleen het schalen van pagina-componenten tussen desktop, tablet en mobiel. De diversiteit van resoluties, apparaat- en browserfeatures en andere factoren maakt het onmogelijk om tot op de pixel te dicteren hoe webpagina’s eruit zullen zien. Niet het device, maar de content moet centraal staan in het ontwerp. Het 960-pixel grid moet plaats maken voor flexibele, proportionele grids. En Photoshop moet plaats maken voor de browser. Wat betekent dit voor user experience designers? Front-end designer Brad Frost vertelt er alles over in zijn Responsive Design workshop tijdens de IA Summit 2013.

De basisingredienten van responsive design

Waar moet je als user experience designer op letten als je aan de slag wilt met responsive web design?

Vloeiende / vloeibaar (fluid) grids

Vergeet pixel-perfect implementaties van je design. Sterker nog, neem afscheid van het denken in pixels. En van het vertrouwde 960-pixel grid. Het presenteren van Photoshop designs aan je klant schept een verkeerde verwachting, zelfs als je netjes een desktop, tablet en mobiel versie laat zien (zoals responsive design vaak weergegeven wordt).

De realiteit is dat je niet exact kunt bepalen hoe een website op verschillende devices in diverse browsers. Creëer geen illusie dat je hier net zoveel controle over hebt als bij print. Denk in relatieve eenheden en percentages. (En laat de fontgrootte met rust; zet het op 100%)

“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must ‘accept the ebb and flow of things’.”

John Allsopp

De standaard relatieve eenheid is em. Heb je een beetje hulp nodig met omrekenen, gebruik dan de Responsive Calculator.

Fluid grid (bron: Brad Frost)

Flexibele media

Tekst kan makkelijk schalen en vloeit mooi in iedere container. Maar media, zoals afbeeldingen en video, vragen wat meer aandacht. Het schalen van afbeeldingen in de browser is altijd taboe geweest: browsers maakten er een potje van en grote plaatjes kostten veel bandbreedte. Maar dat is nu verleden tijd. Sterker nog, met de nieuwe “retina” schermen is het aanbieden van (te) grote afbeeldingen alleen maar goed. Met responsive design moeten afbeeldingen  kunnen schalen in hun container. En met Focal Point CSS kun je zelfs een focuspunt in een image aangeven, zodat responsive croppen altijd goed gaat.

Icons (eerst vectors van maken) kun je converteren naar een icon font, zodat je ze op iedere schaal kunt gebruiken. Gebruik je liever sprites, maak dan hoge-resolutie sprites.

Media Queries

Veel van de ‘responsive’ magie gebeurt in de stylesheets (CSS3). Door condities op te nemen, kun je specifieke stijlen toepassen afhankelijk van de breedte van de browser. De overgangspunten heten ‘breakpoints’.

Media Query html voorbeeld (bron: Brad Frost)

Adaptive Design

Fluid grids, flexibele media en media queries zijn volgens Frost nog maar de basisingrediënten. Er is veel meer nodig voor een optimale user experience over het hele spectrum van het web.

Responsive Design ijsberg

Frost definieert 5 principes van adaptive design:

Ubiquity

De user interface moet overal op werken. Het web is vele malen diverser en in de nabije toekomst zal die diversiteit alleen nog maar toenemen.

In de toekomst zal het aantal touchpoints en user agents voor het web nog veel groter zijn.

“Diversity is not a bug, it’s an opportunity.”

Stephanie Rieger

Flexibility

Het is niet voldoende als de user interface op ieder device werkt. Je moet de content ook niet blokkeren als gebruikers hun apparaat van portret-naar landschapstand draaien. Pas je aan de gebruiker aan, niet andersom.

Foutmelding dat website niet ontworpen is voor landschap modus

Flexibiliteit betekent ook het optimaliseren voor alle resoluties. Zoals gezegd: designs worden vaak gepresenteerd op een iBook, iPad en een iPhone. En vaak worden de breakpoints hier ook op afgestemd. Maar breakpoints moeten niet worden gedicteerd door een paar apparaten, maar door de content. En dus kunnen de breakpoints per site, zelfs per contenttype verschillen. Maar hoe bepaal je dan precies de breakpoints?

“Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!”

Stephan Hay

Brad Frost adviseert: houd het simpel. Eén kolom, 2-4 kolommen, 2/3 + 1/3 enzovoorts. Overweeg het gebruik van major breakpoints (van 3 naar 2 kolommen) en minor breakpoints. Frost heeft een tool ontwikkeld, genaamd ‘ish’, waarmee je heel eenvoudig kan zien hoe je pagina zich gedraagt op diverse resoluties.

Performance

Performance is belangrijk. Vraag maar aan Google. Het lastige is: het is onzichtbaar. Maar wees je ervan bewust dat:

  • 71% van de mobiele internetters verwacht dat mobiele sites net zo snel of zelfs sneller laden dan desktop sites.
  • 74% verlaat een site als hij niet binnen 5 seconden geladen is.

De gemiddelde pagina is zo’n 1,3 MB groot. Bij 86% van de responsive sites is de klein-schermweergave net zo groot als de groot-schermweergave. Stel een performance budget vast, in kilobytes (70k – 200k) dan wel in seconden. Je kunt met Mobitest kijken hoe snel je pagina laadt op diverse devices. Performance is niet puur de verantwoordelijkheid van developers. “Good performance is good design”, aldus Brad Frost.

“If your website is 15MB it’s not HTML5, it’s stupid.”

Christian Heilmann

Een manier om de kilobytes zoveel mogelijk te beperken, is conditional loading. Content-onderdelen die niet meteen te zien zijn, moet je niet alleen verstoppen, je moet ze pas laden als de gebruiker de content wil zien. Je kunt ook van bepaalde content (bv. weerbericht) een link maken die op mobile de content op een eigen pagina presenteert en op desktop direct op de pagina zonder doorklik (embedded).

Let op:

  • Het is geen probleem dat verschillende gebruikers/contexten een ietwat verschillende ervaring voorgeschoteld krijgen, zolang de functionaliteit en content maar toegankelijk blijft.
  • Schermgroote is maar één van de variabelen. Grote schermen betekenen niet automatisch een snelle internetverbinding; denk aan gratis wi-fi in trein of hotel.
  • Beperk het aantal http requests.
  • Kijk eens naar Responsive Design + Server-Side Components (RESS), aan de serverkant bepalen welke componenten op de pagina gezet worden op basis van detectie (zie volgende paragraaf).

Enhancement

Waarom zou je slechts de dimensies van de user interface aanpassen aan de context van de gebruiker? Ieder apparaat, iedere user agent (bv. een webbrowser) bevat specifieke eigenschappen, sensors, etcetera. Idealiter verrijk je de user experience afhankelijk van de beschikbare middelen. Dit staat beter bekend als progressive enhancement en adaptive design. Er zijn tools zoals Modernizr en Detector die detecteren welke device- en browser-features ondersteund worden, zodat je op basis daarvan eenvoudig progressive enhancement / adaptive design kunt toepassen.

Ook kun je bijvoorbeeld invoer optimaliseren door gebruik te maken van de juiste HTML5 elementen, bv. zorgen dat je bij numerieke invoer alleen een cijfer-toetsenbord voorgeschoteld krijgt.

Numerieke input op mobiel dankzij HTML5
<input type=”number” pattern=”[0-9]*” />

Future Friendly

Hoe meer nutteloze content en elementen je op een pagina zet, hoe moeilijker het is om dit een beetje fatsoenlijk aan te bieden op de vele devices en resoluties.

Op sommige webpagina's kun je de content nauwelijks ontdekken door alle bullshit.

Frost pleit voor toekomstvriendelijk ontwerpen en adaptive content.

Hoe ga je te werk?

Stephen Hay heeft voor adaptive/responsive design eigenlijk hetzelfde advies als Karen McGrane voor adaptive content: “Ontwerp systemen (van componenten) in plaats van pagina’s.”

Brad Frost noemt het ‘atomic design’:

  • Atomen: de meest elementaire bouwstenen, zoals labels, formuliervelden, knoppen
  • Moleculen: samengestelde controls, zoals een zoekveld (veld + knop)
  • Organismen: herbruikbare blokken die uit verschillende modulen bestaat, bv. een header (logo,hoofdnavigatie, metanavigatie en zoekveld)
  • Pagina’s: unieke combinaties van organismen.

Ontwerpen vanuit de content betekent vooral focussen op de moleculen en organismen en die volledig schaalbaar ontwerpen.

De conclusie die we al eerder trokken: pixel-perfect is dood. Het web is geen printmedium; je kunt niet tot op de pixel bepalen hoe een lay-out er in iedere browser, platform en apparaat uit zal zien. Kom los van Photoshop en ontwerp zo veel mogelijk in de browser. Chris Coyier legt uit waarom:

  • Je doet geen werk om het daarna nog een keer te doen;
  • Het web heeft geen vaste canvasgrootte;
  • Het is niet langzamer, vaak sneller;
  • CSS is efficiënter om wijzigingen voor alle pagina’s te doen (vraag een designer niet om 70 PSD’s aan te passen omdat de fontgrootte verandert);
  • Interactief;
  • De browser is beter in het renderen van tekst.

“Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”

Steve Jobs

Maar hoe moet je designs dan wel opleveren? Als een verzameling bouwstenen. Photoshop is nog steeds waardevol, maar niet om pixel-perfect webschilderijen te maken. Gebruik het om een ‘design atmosfeer’ te creëren. Werk toe naar een interface inventory c.q. design pattern library c.q. style guide, Dit documenteert het design, promoot consistentie, maar laat geen volledige pagina’s in een willekeurig gekozen resolutie of context zien. Kijk bijvoorbeeld eens naar de online styleguide van Starbucks of naar de Global Experience Language (GEL) van de BBC. Er zijn ook diverse front-end style guides.

Screenshot van de Pattern Primer van Adactio

Je kunt ook proberen je design als een werkend style prototype op te leveren. Er zijn al tools zoals Jetstrap en Divshot waarmee je mockups kunt maken met werkende webelementen en schone html/css code.

Bovenstaande betekent een behoorlijke verandering van werkwijze en competenties voor veel user experience designers. Maar wellicht onvermijdelijk als we de diversiteit van het web en responsive / adaptive interfaces echt willen omarmen.

Dit is een verslag vanuit de “Responsive Design” workshop van Brad Frost op de IA Summit 2013 in Baltimore. Bekijk ook eens Frost’s Responsive Resources.

Geef een reactie