BreatHing New Life

Cobey Potter, Wellfire Interactive

into existing content sites

A Bit of Background

The Problem at Hand

The Web Today

Documentation

Pattern Libraries + Style Guides

Frameworks

Component-based Architecture

Build Tools

Prototyping

Punch-in / Punch-out Integration

Coda

 

A Bit of Background

Cobey Potter

Partner + Front-end ARchitect 

for Wellfire interactive

  • Originally from Charlottesville, VA
  • Been in DC Metro for 12 years
  • Studied Cognitive Science at UVA
    • how the brain process, stores, and retrieves information
    • concentrated in Human-Computer Interaction
  • Worked professionally in the Web for 15 years
    • Educational Technology at UVA School of Medicine
    • Threespot Media
    • Wellfire Interactive (10 years!)
  • Love getting away from the computer as much as possible
  • Love watching and helping my 15 month old daughter grow up along with my lovely wife and overly-concerned Shiba Inu
  • Communities In Schools
  • Strive for College's I'm First
  • mPowering Health
  • National Consumers League
  • FairVote
  • American Frozen Food Institute
  • BlueMercury
  • Port City Brewing Company

AT WELLFIRE INTERACTIVE, We've WORKED WITH

A Bit of Background

Breathe New Life

The ProBlem At Hand

The ProBlem Challenge At Hand

The Challenge At Hand

  • You've got a website
  • It's feeling stale
  • Let's Refresh!
  • But let's also
    • lower timeframe, lower effort, lower stress
    • increase visibility, increase happiness, increase buy-in

Breathe New Life

The Web Today

The Web Today

  • Your website, and websites in general, should no longer be thought of as "pages"
    • in terms of layout and construction
  • Each block of functionality and content can be considered on its own
  • JavaScript at the forefront of this idea:
    • React, AngularJS, VueJS, etc...
  • CSS too!
    • Atomic CSS, Object-oriented CSS, BEM, SMACSS, etc..
  • What about HTML?
    • officially Web Components (not here yet)

Breathe New Life

A Note ABOUT You

A Note About You

  • You are a web developer, designer, project lead, stakeholder
  • You are not just a code monkey, pixel pusher, TPS reporter, signer of checks
  • You use the same basic tools as those around you
  • Your experiences inform:
    • the path you take
    • what you know to avoid
    • what works best

Breathe New Life

Documentation

DocumenTation

  • Look at how things are currently laid out and configured
  • What works:
    • amazeballs
    • well
    • sliding by, just fine enough, meh
  • What doesn't?
    • any dumpster fires?
  • This will help you figure out where to center first
    • new branding?
    • site architecture?

Site Audit

Breathe New Life

DocumenTation

  • Views are straight-forward, every website has them. They are pages or page templates, but we need to look at them in terms of overall functionality.
    • list view
    • detail view
    • form view
    • special view (map, charts, download)
  • Components can be considered as exclave views
    • the user can view the data, but its included in a different location, such as 'cards'

User Views + User Flows

Breathe New Life

DocumenTation

  • So,  how does your audience get there?
  • Map out your proposed pathway to the content at hand
    • Not every way needs to be mapped out, just figure your main pathways that you've built for them
    • Users will find a way to surprise you; cowpaths will be paved
    • and Google / Bing may just link directly
  • Users like browsing more than surfing (unless you are Amazon)
    • This should reinforce your site navigation and information architecture

User Views + User Flows

Breathe New Life

DocumenTation

Data Schemas

  • What data is required for this view or component?
  • This doesn't necessarily match the database
    • its what shows up on the front-end
  • This helps show relationships in data between components
    • and it helps the team not forget anything!

Breathe New Life

DocumenTation

  • Congrats, you've already got the content!
  • This is the hardest part in any new project, so you're a step ahead
  • The best designs are based on the content and data available
  • The previous/current site iteration may have been built before there was content available
  • now you can match form and function to the actual meta of the site
  • content style or type going in a different direction?
    • get some solid examples before going down this path!

Content

Breathe New Life

DocumenTation

  • Small bits and bobs of text:
    • calls-to-action
    • buttons
    • links
    • forms
    • any repeatable content
  • Sometimes the smallest piece can be the toughest
    • This can help drive engagement and be a big plus to the refresh
  • Book:
    • The Standardistas. A Pocket Guide to the Craft of Words, Part 2 - Microcopy

MicroCopy

Breathe New Life

DocumenTation

  • Site audit
  • Supported browser list
  • Example copy and data schema for each component type
  • Set of microcopy for interaction points
  • At least 1 form schema!

Make Sure you End up with:

Breathe New Life

Pattern Libraries + Style Guides

"We are the [pattern] makers, and we are the dreamers of dreams"

Don't REinvent the Wheel.

AUGMENT IT.

Pattern Libraries + Style Guides

  • You've been here before.
    • Use your previous successes
    • Use what works
  • Craft and maintain a pattern library:
    • oftentimes, structures are mimicked site-to-site, its the visual layer thats different:
      • Cards
  • Patterns may expand and contract depending on:
    • your content
    • your visual brand/ style
    • your supported "breakpoints"

Pattern Libraries

Breathe New Life

Pattern Libraries + Style Guides

Pattern Libraries

Breathe New Life

Pattern Libraries + Style Guides

  • Style Guides are where your branding and visual style come into play
  • They often encompass your Pattern Library as well
  • You can look at your Pattern Library as the abstracts, or base and your Style Guide as showing the instances of the abstract.
    • Each instance may have the same shared pattern
    • May have a different visual "skin"
    • May have some small difference based on use or data representation

STyle Guides

Breathe New Life

Pattern Libraries + Style Guides

STyle Guides

Breathe New Life

Pattern Libraries + Style Guides

Examples: styleguides.io

From this presentation: bit.ly/2sVyOIH

Styleguide maker: runwayapp.io

STyle Guides

Breathe New Life

Frameworks

Frameworks

Breathe New Life

Frameworks

CSS Razor

(github.com/tscanlin/css-razor)

Breathe New Life

Component-Based Architecture

Component-Based Architecture

  • A representation of your data and content model
  • This is where the patterns start and where you can make the most out of semantics
  • Most of your time spent will be here
  • Think about using abstract templating that can be extended much like your pattern library
    • Wellfire uses a Jade/Pug templating base to extend patterns as needed
    • Gets pre-compiled with appropriate data mapping for Django Templates. 
    • This can easily be extended to other template languages

HTML

Breathe New Life

Component-Based Architecture

  • Naming things is always going to be hard
    • Sometimes you just run out of ways to say "alternate"
  • Consider f(CSS) -> functional CSS
    • Can seem like a dirty word, but it isnt
    • How does the object / element function
    • Combined with CSS Razor, you lose a lot of overhead
    • Functional classes are gzipped both in CSS and HTML
    • Namespacing (CSS selector attributes)

CSS

Breathe New Life

Component-Based Architecture

  • React, AngularJS, VueJS
    • All view functionality through an HTML template and component model
  • You might not need JQuery
    • Thinking in terms of data and components
    • Browsers have made significant headway
  • Look at Vue's API/Guide for inspiration and understanding
  • Vue-Loader (vue-loader.vuejs.org/en)
    • gives a great showcase of a new way at looking at the separations of concerns

JavaScript

Breathe New Life

Build Tools

Build Tools

  • Too many out there to really discuss; can really depend on your stack
  • Grunt, Gulp, Brunch, Broccoli, Webpack, Fusebox (brand new one!), etc
  • Wellfire relies on a combo of MakeFiles, NPM/Yarn scripts, and Webpack
  • Don't waste too much time here; tools change daily and you can really get sucked in
    • especially when they change versions with break changes (thanks, semver!)

Breathe New Life

Prototyping

ProtoTyping

  • Get maximum buy-in before integrating into a db-based system
  • Rapid iterations and updating with new ideas on the fly
  • Less of  black-box for non-tech team
    • but you can safely keep it to yourself when you need to!
  • Wellfire builds front-end prototypes and hosts them on Netlify for client walkthroughs
    • having something to poke & prod with the client is a plus
    • important: keep your domain authority

Breathe New Life

ProtoTyping

Hosting

Breathe New Life

ProtoTyping

User Testing

  • Client group
  • In-house group
  • Friends and Family
    • The Mom/Dad test

Breathe New Life

ProtoTyping

Remote (Random) User Testing

Breathe New Life

Don't get Discouraged

When the drawing board calls.

ProtoTyping

Breathe New Life

Punch-In / Punch-out Integration

Punch-In/Punch-Out Integration

  • Terminology comes from music recording
    • Only change or update what you need without messing with the rest
    • Don't (overly) rock the boat
  • Use your site audit, user flows, and user views to determine where to start and what is most important for engagement
  • Full page/view implementation
  • Component implementation on older pages
    • Namespacing
  • Generally good for buy-in on longer/larger projects, but YMMV

Breathe New Life

CODA

CODA

Analytics + Metrics

Breathe New Life

CODA

Analytics + Metrics

  • Don't overload your site with scripts!
  • A/B test patterns, content that will be more "permanent"
    • depending on your timeframe, if it doesn't work, just try something else
    • remember what we're shooting for.

Breathe New Life

Lower Timeframe, lower effort, lower Stress

and yeah, lower cost too.

Breathe New Life

You have experience(s), Use it/Them.

Think of the web in terms of data + components, not pages

Pattern Libraries + Style Guides save Time and Effort

CSS Razor

Frameworks + Build Tools can be both confining and liberating.

"Public" prototyping enables buy-in from stakeholders

Punching-in for implementation

Breathe New Life

We are the music makers,

And we are the dreamers of dreams,

Wandering by lone sea-breakers,

And sitting by desolate streams;—

World-losers and world-forsakers,

On whom the pale moon gleams:

Yet we are the movers and shakers

Of the world for ever, it seems.

Arthur O'Shaughnessy (and Willy Wonka too)

Thanks!

Cobey Potter, Wellfire Interactive

cobey@wellfire.co | @courcelan

wellfire.co | @wellfire

 

All images (aside from family ones) are from Unsplash.

Made with Slides.com