Which is correct?

1.The America Trump Is Inheriting, By The Numbers

2.The America Trump Is Inheriting, by the Numbers

3.The America Trump is inheriting, by the numbers

Research identifies 4 main communication properties:

clarityrelevance

utility

clarityrelevance

utility

style

The elements of digital style

A riff on the Strunk & White groove

Kyle Henderson / Web Team Lead / UW-Madison DoIT Communications

Communication design through the ages

Takeaway #1: Expectation is formed by experience

And experience is ever changing

Takeaway #2: The rules follow the

toolsTools of production and consumption

Database tools of production & multi-viewport

tools of consumption are transforming centuries-old

style rules.

TRADITIONALNew York Times

WordPress support

DIGITALNPR

FiveThirtyEight

For example, traditional vs digital title case

Tool of production: h1 { text-transform: capitalize; }

Which is correct?

1.The America Trump Is Inheriting, By The Numbers

2.The America Trump Is Inheriting, by the Numbers

3.The America Trump is inheriting, by the numbers

And especially,print vs digital grid

COLUMNS

ROWS

npr.org

OLDBig analogy: Newspapers,

magazines

“Above the fold”

Fixed width with extended column length

Traditional style guides drawn from traditional

sources

GridColumns

NEWBig analogy: presentation

slides

Potentially limitless scrolling

Responsive width comprising slides/rows with

stackable elements

Style changes rooted in databases, code

GridRows

PracticumOr, “OK, so what should we do differently?”

Elementary principles of digital composition

“Choose a suitable design and hold to it.”

1.Use 1-column, row-first,

slide/card layout for presentation pages

StudioPressWordPress.org

Gov.ukUW-Madison VoIP Project

Front pages of sites & categories; promo pages making an argument/pitch; department pages telling why, what, who

2.Use 2-column, ~68.5% /

31.5% layout for explanation pages

Gov.uk serviceUniversity Health Services post

But don’t put content in the right column to accomplish visual primacy, as it will bounce to the bottom of the page in all but

wide viewports.

3.Give frequent opportunity (and visual cues) for action

Buttons, text links, scroll arrows, let them scroll!

People will scroll forever as long as they believe there’s something worth scrolling for.

4.Use an assertion/evidence approach in each slide of

presentation pages

Fascinating research on presentation styleTuft & Needle

Especially when the purpose is to persuade

6.Use personality-based

content structure rather than an inverted pyramid

on explanation pages

Huh?

Sidebar

A primer on personality-based content structure

Social orientationExtravert Introvert

Information orientationiNtuitive Sensing

Decision orientationThinking Feeling

Scheduling orientationJudging Perceiving

The MBTI measures people’s orientation on 4

scales

Information orientationiNtuitive Sensing

Decision orientationThinking Feeling

These 2 are the biggies for content structure:

NF NT SJ SP

SPs (actives) see and hear information about action.

ATTENTION-GRABBERS

Time words: now, immediate, fast“Don’t miss out!”

DECISION PACE

As rapid as possible

• When will you get me what I need?

• Can you get me the important stuff now?

• When is that happening that I don’t want to miss out on?

NTs (competitives) see and hear information about achievement.

• What advantage do you offer me?

• What are your credentials?

• What kind of success have you had?

ATTENTION-GRABBERS

SuccessesCredentials

DECISION PACE

Disciplined and efficient

NFs (humanists) see and hear information about experience.

• Who else has worked with you?

• Who are you?• Who says you’re OK?• What experience have

others had with you?

ATTENTION-GRABBERS

TestimonialsPics

DECISION PACE

Open-ended, slow-ish

SJs (methodicals) see and hear information about process.

• How will you do what you promise?

• In detail, how does your process work?

• In detail, how does the product function?

ATTENTION-GRABBERS

Details, details, details

DECISION PACE

Methodical and careful

At-a-glance boxWho, what, when, where, how much

Message focused on what audience will achieve. Here’s what you’ll achieve. Here’s what this will do for you.

Graphic of evidence / credential

BUTTON OR TEXT CTA

SP

NT

Masthead

Message focused on who has benefited from or is associated with service, product, vendor. Here’s who likes us and who we are.

Testimonial / photo

BUTTON OR TEXT CTA

Message focused on details of how you’re going to do what you say. Here’s how. Here’s how.

NF

SJProcess flow chart / table / schematic

Details. More details >

?

Elementary rules of digital content

“Omit needless words [and characters].”

1.Don’t use periods in title

abbreviations

Dr Ulysses Everett McGill thought himself most qualified to lead the group.

I hope Mr Anderson wins.

Who’s heard from Ms Tippet?

Jerry Lundegard, PhD

Jane Verlag, MS

2.Use USPS state

abbreviations rather than AP style

WI, not Wisc.

IN, not Ind.

AL, not Ala.

ME, not Maine

HI, not Hawaii

Yes, even in sentences. Nobody is confused by:

My cousin tells me that living in Madison WI is really awesome.

3.Use numbers rather than

text

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11…

zero, one, two, three, four, five, six, seven, eight, nine, 10, 11

not

1st, 2nd, 3rd, 4th, 5th, 6th, 7th, 8th, 9th, 10th, 21st …

first, second, third, fourth, fifth, sixth, seventh, eighth, ninth, tenth, twenty-first

not

Even those under 10 (AP) or 100 (Chicago)

3.Use numbers rather than

textEven those under 10 (AP) or 100 (Chicago)

Wimpy ate 2 cheeseburgers for lunch today. And now he’s napping at work for the 3rd time this week.

FDR was our 32nd president.

and …

3.Use numbers rather than

text

5th 'Mars Mission' Simulation Ready For Launch In Hawaii

50 people showed up today for a rally.

Even when the number is the 1st item in a headline or sentence

4.Don’t worry about widows or

orphans

Stakeholder demanding you eliminate a widow? Put a   between the last 2

words only.

5.Use centered text in

slide/row layouts

BootstrapWufoo

Unless the text runs longer than a few lines or has multiple paragraphs

6.Use short expressions of

time

Print

9 a.m, 9:00 a.m., 9:00 AM

3 p.m., 3:00 p.m., 3:00 PM

Noon, 12 p.m., 12:00 PM

Midnight, 12 a.m., 12 AM

Digital

9am

3pm

12pm

12am

9a

3p

12n

12m

6.Use short expressions of

time& time span

Print

8:30 a.m. to 4:30 p.m.

Noon–3 p.m.

Digital

8:30am-4:30pm

12pm-3pm

8:30a-4:30p

12n-3p

7.Use contractions rather than

the word or words symbolized

Can’t instead of cannot

Won’t instead of will not

Couldn’t instead of could not

8.Use “&” instead of “and”

TIMELINE & SCHEDULE

When & How Long?

Migration & testing with 16 early‑adopter departments

At least in menus, titles, subtitles and content boxes

?