CONTENT FIRSTDRUPALJAM 2017 – ROLF MEIJER

CONTENT FIRST – DRUPALJAM 2017

WAT GAAN WE DOEN?

▸ Wat is het?

▸ Waarom?

▸ Praktijk

WAT IS HET?CONTENT FIRST

▸ Grafisch ontwerp

▸ Mock-ups

▸ Inhoud

CONTENT FIRST – WAT IS HET?

WAT IS CONTENT FIRST?

▸ Content is het bestaansrecht van je website

▸ Baseer het ontwerp op de inhoud

▸ Content model

CONTENT FIRST – WAT IS HET?

WHAT’S IN A NAME?

▸ Content-Driven Design

▸ (Create layouts from the) Content Out

▸ Mobile First

▸ People First

▸ Offline First

▸ API First

Resilient Web Design

1. Identify core functionality.

2. Make that functionality available using the simplest possible technology.

3. Enhance!

CONTENT FIRST – WAT IS HET?

GERELATEERD

▸ Mobile First

▸ Responsive

▸ Webrichtlijnen

▸ Toegankelijkheid

▸ Gebruiksvriendelijkheid

▸ StandaardisatieJeremy Keith

WAAROM?CONTENT FIRST

CONTENT FIRST – WAAROM?

WAAROM CONTENT FIRST?

▸ Betere communicatie / hogere conversie

▸ Relevanter ontwerp dat recht doet aan de inhoud

▸ Multi-channel publishing

CONTENT PRECEDES DESIGN. DESIGN IN THE ABSENCE OF CONTENT IS NOT DESIGN, IT’S DECORATION.

Jeffrey Zeldman – @zeldman – 5 May 2008

CONTENT FIRST – WAT IS HET?

CONTENT FIRST – WAAROM?

AANSTUREN GRAFISCH ONTWERPER

▸ No more “ontwerpgeintjes”

▸ lettergrootte

▸ exacte zelfde hoogte voor blokken met tekst

▸ precies genoeg lengte voor tekst op één regel

▸ Huisstijl

▸ Geen “Lorem Ipsum”

CONTENT FIRST – WAAROM?

“ONTWERPGEINTJES”

CONTENT FIRST – WAAROM?

MULTI-CHANNEL PUBLISHING

▸ Eén content repository

▸ intern

▸ extern

▸ Meerdere websites

▸ Social media

▸ Apps

PRAKTIJKCONTENT FIRST

CONTENT FIRST – PRAKTIJK

WAAR BEGINT CONTENT FIRST?

▸ Doelgroepen / personas

▸ Content strategy

▸ Toon & stijl

▸ Gestructureerde content

▸ Content model

▸ Hiërarchie

CONTENT FIRST – PRAKTIJK

INHOUDSANALYSE

▸ Bestaande inhoud

▸ Titels (lengte + niveau’s)

▸ Teaser (lengte)

▸ Body (lengte)

▸ Afbeelding (afmetingen)

▸ Soorten elementen

▸ Menu / structuur

▸ Spreadsheet

▸ Gemeente Eindhoven

CONTENT FIRST – PRAKTIJK

CONTENT MODELVELD TYPE KARD. OPMERKINGENTitel Tekst 1Taal Select 1 — Nederlands

— EngelsLead Groep — Introductie Tekst 1 meerdere rijen — Afbeelding Afbeelding 0–1Body Paragrafen 0–n — Tekst + Afbeelding

— Downloads — Locatie — Tabel — Video

Aanvullende informatie Groep — Call to action Link 0–1 — Notitie Paragrafen 0–1 — NotitieGerelateerde inhoud Referentie 0–nTrefwoorden Taxonomieterm 0–n

CONTENT FIRST – PRAKTIJK

MOCK-UP

▸ Wireframes

▸ Klikmodel

▸ HTML-mock-up

CONTENT FIRST – PRAKTIJK

DRUPAL

GESTRUCTUREERDE INHOUD

▸ Content model ▸ Content types ▸ Velden ▸ Paragraphs ▸ Media

▸ Hiërarchische structuur ▸ Menu ▸ Taxonomy

MULTI-CHANNEL PUBLISHING

▸ Content hub ▸ Content deployment

▸ gathercontent.com ▸ d.o/project/gathercontent ▸ d.o/project/deploy

▸ Headless Drupal ▸ buytaert.net/the-future-of-

decoupled-drupal

AFSLUITINGCONTENT FIRST

CONTENT FIRST– AFSLUITING

TOT SLOT

▸ Betere communicatie en conversie door een beter ontwikkelproces

▸ Stakeholders vanaf het begin betrekken

▸ Klant moet er achter staan en begrijpen

▸ Goed contact met de grafisch ontwerper

CONTENT FIRST – AFSLUITING

MEER INFORMATIE

CONTENT STRATEGY FOR MOBILE

Karen McGrane A Book Apart

GOING RESPONSIVE

Karen McGrane A Book Apart

▸ Karen McGrane — @karenmcgrane

▸ Jeff Eaton — @eaton

▸ Jeffrey Zeldman — @zeldman

▸ Jeremy Keith — @adactio

▸ Content Insight — @content_insight

▸ A Book Apart — abookapart.com

▸ A List Apart — alistapart.com

▸ Smashing Magazine — smashingmagazine.com

CONTENT FIRST – AFSLUITING

▸ Rolf Meijer — @studiokaru

▸ Dutch Open Projects — dop.nu

▸ https://dop.nu/sites/default/files/DrupalJam2017_content_first.pdf

BEDANKT