Responsive Prototyping with WordPress and Atomic UI Libraries

Chicago Web Professionals • @anthonydpaul

https://www.youtube.com/watch?v=aXV-yaFmQNk

I want to show my concept to clients or users

flat mockups (sketches, Sketch, Photoshop, etc.) or paper • okay for early ideas

not responsive • need multiple sizes

don’t feel real • you get the wrong feedback

Flat concepts are barely work today. How will they keep up with the future?

Apple Watch

John Underkoffler of Oblong Industries (immersive displays)

Flat prototypes don’t work anymore.(They require ‘splaining.)

Just as help files are a bandaid for usability…Annotations are a bandaid for clear communication.Show, don’t tell.

A code prototype would be best, but…I’m not a developer.

Coding would take longer than a mockup.

Anthony D PaulUser Experience Researcher and Designer

@anthonydpaul

The truth is…Easy/Fast enough to be disposable

Avoids multiple device versions

Gains equity over time (your own library)

Can allow real content without resizing everything

Can (optionally) go into production

Any theme framework will work.

Divi

Beaver Builder

Divi • elegantthemes.com • $69/year

pros: more components • easier to start

cons: not client friendly (abstract) • poor mobile admin • harder to style globally

pros: front-end editing (intuitive) • works with any theme • regular updates

Beaver Builder • wpbeaverbuilder.com • $99/year, $199/year (free “lite”)

pros: front-end editing (intuitive) • works with any theme • easier to brand later

pros: mobile admin works if needed • has dev docs for custom components

cons: fewer default components • has theme for $100 • known AWS bug

Preparationbefore digging into prototyping

install either theme

preview theme (default WP sidebar layout)

optionally pick any theme and make sure it’s responsive (MH Edition Lite)

for both, I’d recommend making a child theme

One-Click Child Theme

install One-Click Child Theme (or similar)

name your child theme

voila

WP Add Custom CSS

install WP Add Custom CSS plugin

use inspector to get classes and IDs • ideally entire body

modify CSS as needed

Row Widths

review changes • note plugins often default to defined width

optionally change per row

Other Global Customizations

Divi options

Divi CSS editor

Beaver Builder options (not really needed)

Beaver Builder options (not really needed)

Live Demo!

Process Examples

inventory existing and needed components with clients and users

consolidate into a core component library with optional parts

skip wireframing • prototype with your library

brand your library

communicate better • get better feedback

SlideSharehttp://www.slideshare.net/anthonydpaul

past videos http://wordpress.tv/speakers/anthony-d-paul/

(my talks and blog) http://adp.rocks or http:// .ws or http:// .ws

Thank you

@anthonydpaul