Guidelines from national associations set expectations for website pages to be more than just endless text pasted from the print edition. Learn techniques to enhance story pages, serve the reader and increase time spent on the site. Your site can be improved in minutes.

1. KEEP ‘EM
SCROLLINGJEA/NSPA National High School Journalism Convention
Fall 2019 // Washington, D.C.
Logan Aimone, MJE //
University of Chicago Laboratory High School

2. KEEP ‘EM
SCROLLING
This presentation is
available online at:
slideshare.net/loganaimone
Permission is granted
for classroom use.

3. KEEP ‘EM
SCROLLING
In print, readers use
various elements
to enter the page:
Photos, graphics,
pulled quotes, sidebars

4. KEEP ‘EM
SCROLLING
Online, the story page
experience is linear.
Readers start at the top
and scroll to the bottom.

5. KEEP ‘EM
SCROLLING
At least we hope so.
A story page needs design
to move the reader along.

6. KEEP ‘EM
SCROLLING
Keep in mind the reader
will likely enter the page
from outside your site.
They’re referred
via social links.

7. KEEP ‘EM
SCROLLING
Readers need context
when entering the page.
They also need a reason
to stick around.

8. KEEP ‘EM
SCROLLING
We have to

9. KEEP ‘EM
SCROLLING
Give readers context.
Take advantage of unique
aspects of the Web.
Make the story look nice.

10. KEEP ‘EM
SCROLLING
•Entice the reader to read.
•Facilitate the reader’s
understanding.
•Encourage the reader
to keep scrolling.
G O A L S:

11. BUILDING THE STORY PAGE
KEEP ‘EM
SCROLLING

12. KEEP ‘EM
SCROLLING
Headline
BASIC PAGE
Featured image
Text

13. KEEP ‘EM
SCROLLING
Headline
BASIC PAGE + DECK
Deck
Text
Featured image

14. KEEP ‘EM
SCROLLING
Headline
BASIC PAGE
+ SIDE IMAGE
Deck
Text
Featured image now
located on the side

15. KEEP ‘EM
SCROLLING
Larger headline
BASIC PAGE
+ LARGE HEADLINE
Deck
Text
Featured image
located on the side

16. KEEP ‘EM
SCROLLING
Smaller headline
BASIC PAGE
+ SMALLER HEADLINE
Deck
Text
Featured image
located on the side

17. KEEP ‘EM
SCROLLING
BASIC PAGE + POLL
Headline and deck
Poll
Text
Featured image
located on the side

18. KEEP ‘EM
SCROLLING
BASIC PAGE
+ RELATED STORIES
Headline and deck
Poll
Text
Featured image
located on the side
Related stories

19. KEEP ‘EM
SCROLLING
BASIC PAGE
+ PULLED QUOTE
Headline and deck
Poll
Text
Featured image
located on the side
Related stories
Pulled quote

20. KEEP ‘EM
SCROLLING
BASIC PAGE
+ PULLED QUOTE/MUG
Headline and deck
Poll
Text
Featured image
located on the side
Related stories
Pulled quote with mug

21. KEEP ‘EM
SCROLLING
BASIC PAGE
+ INFOGRAPHIC
Headline and deck
Poll
Text
Featured image
located on the side
Related stories
Pulled quote with mug
Infographic

22. KEEP ‘EM
SCROLLING
BASIC PAGE
+ HYPERLINKS
Headline and deck
Poll
Text
Featured image
located on the side
Related stories
Pulled quote with mug
Infographic
Hyperlinks

23. EIGHT EXTRA ELEMENTS
KEEP ‘EM
SCROLLING

24. KEEP ‘EM
SCROLLING
These extra elements
reflect choices you’re
making to communicate
information to the reader.

25. KEEP ‘EM
SCROLLING
Ask yourself:
What does a reader need
to understand this story?

26. KEEP ‘EM
SCROLLING
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.

27. KEEP ‘EM
SCROLLING
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.

28. KEEP ‘EM
SCROLLING
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.

29. KEEP ‘EM
SCROLLING
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.

30. KEEP ‘EM
SCROLLING
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.

31. KEEP ‘EM
SCROLLING
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.

32. KEEP ‘EM
SCROLLING
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.

33. KEEP ‘EM
SCROLLING
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.

34. KEEP ‘EM
SCROLLING
Then ask yourself:
What’s the exit path?
Where do you want
readers to go next?

35. KEEP ‘EM
SCROLLING
You want to keep readers
engaged on the site as
long as possible.
You have to show them
what else you have.

36. EXTRAS IN ACTION
KEEP ‘EM
SCROLLING

37. KEEP ‘EM
SCROLLING
Pulled Quote
Westside HS, Omaha, Nebraska
westsidewired.org
Sweet Graphic

38. KEEP ‘EM
SCROLLING
Featured image
University HS, Chicago
uhighmidway.com
Comment, Poll
Related, Recent sidebars

39. KEEP ‘EM
SCROLLING
Featured image
Parkway West HS, Ballwin, Missouri
pwestpathfinder.com
Pulled quote
Related stories box

40. KEEP ‘EM
SCROLLING
Page displaying articles
related by tags
University HS, Chicago
uhighmidway.com

41. KEEP ‘EM
SCROLLING
Videos in
sidebar
Harker School, San Jose, California
https://harkeraquila.com/
Embedded
images
Tags, related
stories at
bottom

42. KEEP ‘EM
SCROLLING
Featured image
St. Louis Park HS, St. Louis Park, Minnesota
https://slpecho.com/
Embedded graphic
Sidebar filled with content
Tags

43. KEEP ‘EM
SCROLLING
Embedded graphic
Mill Valley HS, Shawnee, Kansas
https://www.mvnews.org/
New chapter
Embedded image
Pulled quote

44. KEEP ‘EM
SCROLLING
Featured image
University HS, Chicago
uhighmidway.com
Embedded video
Related stories box

45. KEEP ‘EM
SCROLLING
Immersive image
Iowa City HS, Iowa City, Iowa
https://www.thelittlehawk.com/
Pulled quote
Embedded graphic

46. KEEP ‘EM
SCROLLING
Featured image
Pulled quote
Supporting photos
Lengthy deck
Iowa City HS, Iowa City, Iowa
thelittlehawk.com

47. KEEP ‘EM
SCROLLING
Featured image
Leander HS, Leander, Texas
bestofsno.com
Supporting image
Pulled quote
Links to other stories about
“critters” (w/ thumbnails)

48. KEEP ‘EM
SCROLLING
Main image
Granite Bay HS, Granite Bay, California
https://granitebaytoday.org/
Links to other stories by the
same author

49. KEEP ‘EM
SCROLLING
Wordy summary deck
Pulled quote
Related stories box
Benilde-St. Margaret’s School
St. Louis Park, Minnesota
bsmknighterrant.com
Hyperlinks
Featured image
Video

50. KEEP ‘EM
SCROLLING
Wordy summary deck
Benilde-St. Margaret’s School
St. Louis Park, Minnesota
bsmknighterrant.com
Pulled quote
Featured images
Side-by-side stories

51. KEEP ‘EM
SCROLLING
Wordy summary deck
Benilde-St. Margaret’s School
St. Louis Park, Minnesota
bsmknighterrant.com
Secondary image
Immersive featured image
Chapter headings as
immersive featured image
Pulled quote

52. KEEP ‘EM
SCROLLING
Headline w/ Deck
Benilde-St. Margaret’s,
St. Louis Park, Minnesota
bsmknighterrant.org
Photos that link to stories

53. KEEP ‘EM
SCROLLING
What does the story need?
What can you include online?
• Photos
• Video
• Audio
• Polls
• Hyperlinks
• Infographics
• Pull quote
• Related Stories

54. BEST PRACTICES
KEEP ‘EM
SCROLLING

55. KEEP ‘EM
SCROLLING
Embed the elements at
appropriate intervals.
Don’t scroll too far
without an element.
B E S T P R A C T I C E

56. KEEP ‘EM
SCROLLING
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

57. KEEP ‘EM
SCROLLING
Avoid awkward gaps or
skinny columns of text.
Avoid “bumping”
elements — items that are
right next to each other.
B E S T P R A C T I C E

58. KEEP ‘EM
SCROLLING
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

59. KEEP ‘EM
SCROLLING
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

60. MANAGING YOUR TEAM
KEEP ‘EM
SCROLLING

61. KEEP ‘EM
SCROLLING
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.

62. KEEP ‘EM
SCROLLING
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.

63. KEEP ‘EM
SCROLLING
WEB EDITORS
AREN’T CLERKS
3• 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.

64. KEEP ‘EM
SCROLLING
Give readers context.
Take advantage of unique
aspects of the Web.
Make the story look nice.
R E M E M B E R

65. KEEP ‘EM
SCROLLING
FIND WAYS TO

66. Logan Aimone
logan.aimone@gmail.com
QUESTIONS?FIRE AWAY.