content first, designing in the browser - ux camp cph

Content first, designing in the browser

April 2013

LIV MADSEN FRONTEND DEVELOPER

@livmadsen

METTE SCHOU UX DESIGNER

@mettecharita

@creuna_dk

WARNING

Our talk may include buzzwords and concepts, such as •  Content First (whoa buzz!)

•  UX-driven

•  Responsive design (whoa, last year buzz)

•  Progressive enhancement

•  Designing (/deciding) in the browser

•  Immersive developing

WE’LL SHARE REAL LIFE EXPERIENCES

The emergence of responsive web design have made it very difficult to employ the traditional prototyping

methods in a meaningful way…

6

OUR APPROACH

… to client cooperation

•  Align expectation

•  State the objectives

•  Embrace close cooperation

•  Be transparent

•  Map resources (honestly) and establish clear responsibilities

… to user centered design

•  Know end user’s motivations, questions and challenges

•  Stick to the defined objectives

•  Clear the path! •  use simple, clear copy, e.g. keep product in focus (show don’t

tell)

•  Use explicit directional cues (Be visual)

•  Remember white space, color contrast and sequencing (support scanning and scrolling)

•  Think content first (text, images, video etc.)

•  Create the right containers and UI elements in order to create an emotionally engaging experience

•  Establish content levels •  Encourage people to interact with content using strong visual

cues •  Save organizational resources /ease implementation

•  Choreograph visual content and page flow •  Making key statements decodable at a glance

•  Be tap-worthy

10

… to content first implementation

•  Progressive enhancement – start with the content, end with behavior

•  Responsive – a mix of flexible grids and layouts, media queries, flexible images

•  Performance and data structures is also design

•  Designing/deciding in the browser

IT’S A TEAM EFFORT

THE CASE – BOCONCEPT CAMPAIGN SITE

HTTP://CAMPAIGN.BOCONCEPT.COM

•  Client was tackling growing mobile audience and came to us for help

•  Design was ready

•  All they needed was a little help to turn it into a reusable template in the CMS

•  Tight deadline (and budget)

INITIAL CHALLENGES

•  At kickoff content was unknown

•  Release in 60 countries

•  40 languages to be added by independent editors

•  No content strategy

RESPONSIVE DESIGN =

CONTENT FIRST, DESIGNING IN THE BROWSER

DESIGNING IN THE BROWSER?

DID YOU DO AWAY WITH PHOTOSHOP?

NOT ENTIRELY!

SO… DID YOU DO AWAY WITH AXURE?

NOT ENTIRELY

WE’LL GET BACK TO THAT

ARTEFACTS – LOWER THE BRIDGE

•  Content strategy •  + telling the story, accommodating scanners and jumpers •  Chunking, structuring and sequencing the content

•  Screen dumps and videos •  Illustrate navigation principles, interactions and transitions •  Creating a responsive grid – thinking cross device •  Examples of colors and textures

•  Hand-drawn sketches •  Illustrates IA and red routes/page flow

•  Style Tiles / Mood board

•  Collaborative tool •  Supports designing in the browser

•  Basic HTML PoC

•  Illustrate grid, transitions and page flow

27

Defining the

Minimal Viable Product

(MVP)

30

BACK TO THE DRAWING BOARD!

SO YOU MENTIONED AXURE EARLIER….

TAKE-AWAYS

Content First

•  A great foundation

•  An inspiring way to work – continuous drive

•  Not a silver bullet – it still takes time

•  Requires new deliverables and adapted client communication

•  A team effort •  if resources are not available, this is not for you

•  Transparency pays, be inclusive

WILL WE DO IT AGAIN? YESSIR, H5IR

DIY

•  Grab any and all team members you can access

•  Include the customer

•  Focus on tasks at hand as they appear

•  Allow diving (dedication)

QUESTIONS?

http://www.flickr.com/photos/matterphotography/2739799786/