MORELogan Aimone, MJE // School Newspapers Online

THAN A STORYTuesday, March 18, 14

MORETHAN A STORY

In print, readers use various elementsto enter the page:Photos, graphics,

pulled quotes, sidebarsTuesday, March 18, 14

MORETHAN A STORY

Online, the story page experience is linear.

Readers start at the top and scroll to the bottom.

Tuesday, March 18, 14

MORETHAN A STORY

At least we hope so.A story page needs design to move the reader along.

Tuesday, March 18, 14

MORETHAN A STORY

We need

MORETHAN A STORY

Tuesday, March 18, 14

MORETHAN A STORY

Give readers context.Take advantage of unique

aspects of the Web.Make the story look nice.

Tuesday, March 18, 14

BUILDING THE STORY PAGE

MORETHAN A STORY

Tuesday, March 18, 14

MORETHAN A STORY

HeadlineBASIC PAGE

Featured image

Text

Tuesday, March 18, 14

MORETHAN A STORY

Headline

BASIC PAGE + DECK

Deck

Text

Featured image

Tuesday, March 18, 14

MORETHAN A STORY

Headline

BASIC PAGE+ SIDE IMAGE

Deck

Text

Featured image now located on the side

Tuesday, March 18, 14

MORETHAN A STORY

Larger headline

BASIC PAGE+ LARGE HEADLINE

Deck

Text

Featured imagelocated on the side

Tuesday, March 18, 14

MORETHAN A STORY

Smaller headline

BASIC PAGE+ SMALLER HEADLINE

Deck

Text

Featured imagelocated on the side

Tuesday, March 18, 14

MORETHAN A STORY

BASIC PAGE + POLL

Headline and deck

Poll

Text

Featured imagelocated on the side

Tuesday, March 18, 14

MORETHAN A STORY

BASIC PAGE+ RELATED STORIES

Headline and deck

Poll

Text

Featured imagelocated on the side

Related stories

Tuesday, March 18, 14

MORETHAN A STORY

BASIC PAGE+ PULLED QUOTE

Headline and deck

Poll

Text

Featured imagelocated on the side

Related stories

Pulled quote

Tuesday, March 18, 14

MORETHAN A STORY

BASIC PAGE+ PULLED QUOTE/MUG

Headline and deck

Poll

Text

Featured imagelocated on the side

Related stories

Pulled quote with mug

Tuesday, March 18, 14

MORETHAN A STORY

BASIC PAGE+ INFOGRAPHIC

Headline and deck

Poll

Text

Featured imagelocated on the side

Related stories

Pulled quote with mug

Infographic

Tuesday, March 18, 14

MORETHAN A STORY

BASIC PAGE+ HYPERLINKS

Headline and deck

Poll

Text

Featured imagelocated on the side

Related stories

Pulled quote with mug

Infographic

Hyperlinks

Tuesday, March 18, 14

EIGHT EXTRA ELEMENTS

MORETHAN A STORY

Tuesday, March 18, 14

MORETHAN A STORY

These extra elements reflect choices you’re

making to communicate information to the reader.

Tuesday, March 18, 14

MORETHAN A STORY

Ask yourself:What does a reader need to understand this story?

Tuesday, March 18, 14

MORETHAN A STORY

PHOTOS

1 • Photos add visual interest, and they display with the story in the home page content widgets.

• Spread the photos throughout the story as appropriate, or combine for a slideshow.

• Every photo should have a caption and credit.

• If a story does not have a photo, create a text-based image/logo to accompany it.

Tuesday, March 18, 14

MORETHAN A STORY

VIDEO

2 • Short video clips work great to show an event or parts of an interview. A longer video can replace the story text or complement the longer story.

• Include IFrame (Inline Frame) code to embed video from YouTube, Vimeo or SchoolTube.

• Ideal length is about two minutes.

Tuesday, March 18, 14

MORETHAN A STORY

AUDIO

3 • Short audio clips work great to show the sounds of an event or to set the tone of an interview.

• Include IFrame code to embed audio from SoundCloud or a similar site.

• Ideal length is about 60 seconds at most.

Tuesday, March 18, 14

MORETHAN A STORY

POLLS

4 • Adding a poll to a story lets your readers interact as they read.

• They can also spur conversation and engagement.

• Polls might tip your staff to additional coverage opportunities based on the poll results.

Tuesday, March 18, 14

MORETHAN A STORY

HYPERLINKS

5 • Adding links from the text to outside sources can help create context for your story.

• These can be for background, previous coverage on your site or source material.

Tuesday, March 18, 14

MORETHAN A STORY

INFOGRAPHICS

6 • Infographics work well for opinion stories (basis for article) or showing statistics in a visual way.

• These can replace a photo in a pinch.

• Try infogr.am to create one.

• Remember, your goal is to get readers to understand the story, not just to write the text. That’s why data visualization is important.

Tuesday, March 18, 14

MORETHAN A STORY

PULLED QUOTES

7 • Pulled quotes emphasize a quotation or idea from the text to help reinforce a point and to keep the reader moving through the story.

• Make sure it’s a good quote.

• Add a mug shot of the speaker for variety.

Tuesday, March 18, 14

MORETHAN A STORY

RELATED STORIES

8 • A list or box with related stories helps the reader see past coverage of the topic, especially if the related stories aren’t recent.

• If someone read the story about this year’s Prom, he or she might want to read about last year’s.

• These lists/boxes also organize coverage of a topic over time, like a search for a new principal, or a possible teacher contract strike.

• Providing related stories keep the reader on your site longer.

Tuesday, March 18, 14

EXTRAS IN ACTION

MORETHAN A STORY

Tuesday, March 18, 14

MORETHAN A STORY

Photo slideshow

Tyrone Area HS, Tyrone, Pa.tyroneeagleeyenews.com

Pulled quote

Pulled quote with mug

Tuesday, March 18, 14

MORETHAN A STORY

Featured image

La Costa Canyon HS, Carlsbad, Calif.mavlifenews.com

Pulled quote

Tuesday, March 18, 14

MORETHAN A STORY

Featured image

Edina (Minn.) HSedinazephyrus.com

Poll

Tuesday, March 18, 14

MORETHAN A STORY

Wordy summary deck

Pulled quote

Related stories box

Benilde-St. Margaret’s SchoolSt. Louis Park, Minn.bsmknighterrant.com

Hyperlinks

Featured image

Video

Tuesday, March 18, 14

YOUR TURN!

MORETHAN A STORY

Tuesday, March 18, 14

MORETHAN A STORY

Take a printed story and indicate the extra

elements you’d add.

Tuesday, March 18, 14

MORETHAN A STORY

What does the story need?What can you include online?

• Photos

• Video

• Audio

• Polls

• Hyperlinks

• Infographics

• Pull quote

• Related Stories

Tuesday, March 18, 14

BEST PRACTICES

MORETHAN A STORY

Tuesday, March 18, 14

MORETHAN A STORY

• Entice the reader to read.• Facilitate the reader’s

understanding.• Encourage the reader

to keep scrolling.

G O A L S:

Tuesday, March 18, 14

MORETHAN A STORY

Embed the elements at appropriate intervals.

Avoid awkward gaps or skinny columns of text.

B E S T P R A C T I C E

Tuesday, March 18, 14

MORETHAN A STORY

Avoid “bumping” elements — items that are

right next to each other.

B E S T P R A C T I C E

Tuesday, March 18, 14

MORETHAN A STORY

Pay attention to effects of centered items, which can cut off text and imply the

story is complete.

B E S T P R A C T I C E

Tuesday, March 18, 14

MORETHAN A STORY

Make sure items near the end of the story are wrapped with text.

Don’t let those embedded items dangle!

B E S T P R A C T I C E

Tuesday, March 18, 14

MORETHAN A STORY

Preview your page.What’s missing?

How does it look on a phone or tablet?

B E S T P R A C T I C E

Tuesday, March 18, 14

MANAGING YOUR TEAM

MORETHAN A STORY

Tuesday, March 18, 14

MORETHAN A STORY

CONFER IN ADVANCE

1 • When story is assigned, discuss with the writer the possible coverage elements, especially photos.

• Does the writer need to take candid photos or mug shots? Video? Audio?

• Work through a checklist. Make sure photo editor is in the loop.

Tuesday, March 18, 14

MORETHAN A STORY

DISTRIBUTE THE WORK

2 • Writer should be able to provide:

• Story in draft mode

• Hyperlinks to background or source material.

• A suggested pull quote

• At least one related link from the news website

• Writer can suggest a possible poll for engagement.

• Encourage writers to participate in social media promotion of their stories.

Tuesday, March 18, 14

MORETHAN A STORY

WEB EDITORSAREN’T CLERKS3 • Web editors are presentation managers who

understand how a story can be told online.

• Adding story page elements is not a last-minute task left up to a Web editor.

• They must make the big-picture decisions about placement and publishing schedule, so they rely on reporters to have done the content work.

Tuesday, March 18, 14

MORETHAN A STORY

Give readers context.Take advantage of unique

aspects of the Web.Make the story look nice.

R E M E M B E R

Tuesday, March 18, 14

MOREGIVE READERS

THAN A STORYTuesday, March 18, 14

Logan Aimone, MJE // School Newspapers Onlinelogan@snosites.com schoolnewspapersonline.com

QUESTIONS?FIRE AWAY.

Tuesday, March 18, 14