Mobile First

10 oktober 2012 om 10:11

Mobile First is een begrip dat een aantal jaar geleden is geïntroduceerd door design grootheid Luke Wroblewski.

De filosofie van Mobile First is zo complex als dat het eenvoudig is.

“Het ontwerpen van een mobiele webervaring is belangrijker dan primair ontwerpen voor desktopcomputers.”

Met een zeer klein schermformaat, zoals bij smartphones, wordt je gedwongen om de belangrijkste content op een zo goed mogelijke manier aan te bieden aan de gebruiker.

Waarom?

‘Vroeger’ lag de focus van webdesign op desktop computers. Een geoptimaliseerde mobile webervaring was ‘a nice to have’, of iets ‘voor later’. Maar meer mensen dan ooit surfen het internet op met een smartphone, tablet of game console. Er worden meer mobiele apparaten verkocht dan pc‘s. Het zwaartepunt van webdesign zou dus moeten liggen op het ontwerpen van een zo vriendelijk mogelijke mobiele webervaring.

Mobile First verlangt een herziene benadering van planning, strategie, design en ontwikkeling. ‘One size does not fit all’. En daarom kunnen en hoeven webpagina‘s er niet hetzelfde uit te zien in iedere browser en voor elk schermformaat.

Mensen begrijpen dat verschillende apparaten verschillende ervaringen bieden. Burgermensen zijn slimmer dan je denkt!

Veel grote bedrijven passen het Mobile First principe grootschalig toe, zoals Google. Zij hebben hun webstrategie al sinds 2010 hierop aangepast.

User First

Websites die we op de traditionele manier ontwerpen, kunnen onvriendelijk zijn tegenover content. Of de inhoud is ondergeschikt aan SEO, CMS-keurslijven, of er wordt geen rekening gehouden met onvoorziene content. Wij designers hebben altijd de illusie gehad dat we controle konden uitoefenen over welke browser en welk schermformaat gebruikt zou worden.

Niet dus. Gebruikers bepalen in toenemende mate zelf hoe zij het web willen ervaren met typografische instellingen in browsers en ‘lees later’ tools zoals Instapaper.

“The user is in control of what, how and when.” Het is onze taak om dat zo goed mogelijk te bedienen. Dat is toch het web?

Volgens Jeremy Keith denken veel mensen dat een website een typisch desktop ding is. Maar een website is een website, ongeacht of het geconsumeerd wordt op een pc, tablet, screenreader, tekstbrowser of slimme telefoon. “We hebben met z’n allen deelgenomen aan een collectieve hallucinatie van wat het web is: 640 x 480 pixels, 800 x 600 pixels, of toch 1024 x 768 pixels?”.

Controle is niet naar de geest van het web. Lees het briljante A Dao of Web Design van John Allsop uit 2000.

“Device diversity is not a bug, it’s a feature of the web”

– Jeremy Keith –

Hoe? Weg met Photoshop!

Het eerste wat je doet als je Photoshop of Fireworks opent, is een breedte en hoogte instellen. Daar moeten we van af volgens Stephen Hay. Visuele ontwerpers kunnen beter HTML en CSS leren!

Het web is van nature responsive. Kijk maar eens naar de allereerste webpagina op je mobieltje. – Of speel met de viewport van je desktop browser.

Dat we websites vaste afmetingen hebben gegeven is een kapitale fout geweest. De drang naar controle en betweterigheid ten opzichte van de gebruiker is ons duur komen te staan. Maar controle opgeven is niet eng.

Content First

Ontwerpen zonder inhoud is puur decoratief, functieloos. Iedereen mee eens, maar dat is wel wat we doen! Traditioneel werk je aan een design, vaak voordat je überhaupt had nagedacht over de inhoud. Klinkt het niet logischer dat het de taak van de ontwerper is om content zo goed en prettig mogelijk beschikbaar te maken? Typografie speelt hierin een belangrijke rol.

Iedereen die wil investeren in Mobile First zal ook moeten investeren in Content Strategy, want daar ligt de basis van elke website. Niet een Basecamp vol specs en wensen waar een website aan moet voldoen.

“Design that does not serve people does not serve business”

– Jeffrey Zeldman –

Start hier

Een klein scherm dwingt ons allen te focussen op de meest belangrijke en relevante content. En beperkte 3G databundels (straks met 4G zullen de spelregels echt niet anders zijn) geven niets anders aan dan ons te blijven richten op zeer strakke webprestaties. The need for speed blijft actueel.

Heb je een wat groter scherm, zeg een tablet of laptop, dan kun je meer ‘nice to have’ content plaatsen. En zo bouw je een Mobile First responsive website verder uit: met CSS mediaqueries en conditional loading.

Mobile First… Content First… User Happy… Client Happy… You Happy!

Tenslotte

Hieronder een paar prachtige Mark Boulton quotes die hij tijdens Smashing Conference uitsprak. Hij maakt duidelijk dat design contextueel is en niet een op zichzelf staand kunstzinnig werkstukje. Naar mijn mening een goede leidraad voor Mobile First webdesign. Daag Skeuomorfisme.

“Designers are assholes sometimes. They try to reinvent the wheel.”

“Design is honesty. Truth. Not bullshitting users.”

“Trends are bullshit. If you want to be in a trendy industry, go work in fashion, not Web Design.”

Resources

Over de auteur

Edgar Leijs
Edgar Leijs is een ervaren webdesigner en vaste redacteur van Heeftstijl. Woont in de hoofdstad en runt vanaf elke plek met WiFi een kleine internet design boutique: Turnyourhead360. http://www.turnyourhead360.nl
  • Milan

    Goed artikel. Ik weet niet of ik al bereid ben Photoshop aan de kant te schuiven, maar het is in ieder geval een interessante gedachte.

    • http://twitter.com/TurnYourHead360 Edgar Leijs

      Ik design de laatste maanden bijna uitsluitend in de browser. Kleinere design elementen of snelle uitprobeersels doe ik nog wel in Photoshop. 

      Dat was niet eens een bewuste keuze, maar een natuurlijk proces. Ik werk veel sneller in de browser en ik kan responsive designs direct testen en aanpassen.

      • Milan

        Sja, nu je ‘t zegt. Heeftstijl is ook niet eindeloos uitgewerkt in designs. Dus als ik er zo over nadenk klopt dat wel.

  • Pingback: Webdesign opnieuw leren? - Heeftstijl Webdesign Magazine()

  • http://twitter.com/ArnHub Arnoud

    De video van Stephen Hay’s presentatie tijdens Fronteers is inmiddels ook online: http://vimeo.com/channels/fronteers12/52851510

  • http://twitter.com/ArnHub Arnoud

    Het ontwerpen in de browser vind ik met name voor mobiele sites relevant. De ruimte is daar beperkt, dus de meeste content zal onder elkaar komen. Maar bovenal wil je daar gebruik maken van CSS3 boven images om de pageload en performance optimaal te houden. Hier een interessant artikel over de de noodzaak van performance op mobiel bij Toys ‘R’ Us: http://www.internetretailer.com/2012/08/16/toys-r-us-m-commerce-site-performance