Rethinking and redesigning the WordPress story page for scholastic journalism
I urge my journalism students to think about their readers when they write––to make sure their stories are engaging from the first word and to think about what their readers already know, what they want to know, and what they need to know.
After they finish writing and we’re laying out the print edition of the paper, we think constantly about the reader’s experience on the page and how we can make it better. We think about how the person skimming through the paper will experience it and how we can get them to stop and read. We make sure that the story is not just readable, but that it appears to be readable. Then we realized this year that we were doing a poor job of paying attention to our readers’ experiences when they read stories on our website.
Take a closer look at the story page on almost any WordPress magazine/news style theme––it’s not a good experience for the reader. The headlines are small. The photos are small. The body text is small. Everything is crammed together. WordPress themes rarely use white space effectively on this page. Photos and galleries and videos are often inserted haphazardly into the body of the story with no easy way to control the spacing around them.
Beyond the cramped text and small photos, one third of the page in most magazine/news themes is taken up by a sidebar filled with plugin widgets and embed codes. Because this sidebar shows up on all pages on most WordPress sites, the widgets next to the story generally do nothing to enhance the reader’s experience for that particular story.
WordPress theme designers tend to spend the most time building a flashy homepage, and homepage features are probably what sell most people on the themes they buy. These themes give us that “front page” newspaper experience with their beautiful display of photos in carousels and category blocks spaced evenly throughout the page.
But the reality is that our readers spend most of their time on the story page, and because of social media, the story page is most likely the entry page on the site. The homepage is something readers view later, after reading a story or two. Shouldn’t this story page, then, be given as much or more attention as the homepage?
With these problems in mind, I set out with my students this past winter to redesign and overhaul the story page and the reader’s experience on the Knight Errant website. We turned to the story page on the Nieman Labs website for inspiration. In the right column of their story page is a button to activate Zen mode, and when this button is clicked, the sidebar drops away and the reading experience becomes, well, Zen-like. I loved the purposeful look of the page––the large text, the line spacing, the generous use of white space, and the treatment of photos and pull quotes.
As a result of studying this and other sites, here are the things we came up with to make the reader’s experience better on the Knight Errant story page:
-
Removed the sidebar area and let the story take up the full width of the page.
-
Made the photos and videos more dominant and built options for them to be above the story or beside the story.
-
Made the headline significantly larger and added an option for additional headline deck.
-
Made the social sharing icons stay at the top of the screen as a reader scrolls through a story so that at any point a reader can quickly and easily share a story.
-
Built shortcode options for pullquotes, videos, photos, and related stories so that these could easily be inserted and styled at any point in the story.
-
Removed the related posts plugins from our site and built a feature at the bottom of the story page that automatically shows thumbnails and headlines for the five most recent stories in the same category.
-
Collapsed the comments box by default––we don’t get a lot of comments, and the comments box is ugly. But it’s still there for people who want to read them or leave them.
For those of you who are School Newspapers Online customers, I’m now in the process of building the next version of our FLEX theme (Version 5.3), and these story page changes are being rolled into that version which should be released by the end of May. If you’re already on our FLEX theme, you’ll be able to get this update for free by clicking on Themes under the Appearance tab and clicking the Update link next to FLEX.
Let me know what you think of the new story page and any other features you’d like me to consider for future versions.
We have also found that our story readability is down. I’ve have a sneaking suspicion that it is because of the reasons that you’ve listed in your article. Thank you very much for your analysis. I will be updating our flex.
Jason-
I’m excited to see the possibilities of the new layout. It will make for some gorgeous story packages.
One thing I did notice on the KE site deals with the captions. When I switched over to FLEX you guys did something great with the captions so they are all are on the bottom of the photos and are unlimited in space. It looks like the new layout is back to the limited black caption space under the picture when you click on the picture. Hopefully you will be able to keep that design on the pop outs because I was so happy when you fixed that design element.
Very Excited!
Hi Danielle,
The captions will stay the same once you upgrade — you’ll still have unlimited space for them.