Callout headlines to increase interest

[natedame]

Hi @rviscomi @OBTo can I make an editorial and messaging suggestion?

The material presented in the almanac is intriguing and of value, but is structured primarily as - ahem, well - an almanac. No criticism here - I've been taking in the scope of the project and watching how things come together and how contributors/reviewers are organized. This is certainly a massive lift executed by volunteers, and the end result is impressive and exhaustive. I'm looking forward to contributing for the first time this year. But with an additional layer I think the almanac could be more engaging and possibly even have a wider reach.

I'd like to suggest that when 2020 goes live, it includes 3-5 (or a few more?) callout headlines. A callout headline would be one data point or finding of particular interest - something a first-time homepage viewer would find interesting, and bloggers or reporters may find worthwhile commenting on - items of interest and/or surprise, items that illustrate macro trends of note, etc., to add intrigue and depth to the almanac as a whole.

These "callout headlines" could be on the homepage, each with some text and perhaps an image (graph or otherwise), linking to the appropriate chapter section that covers it. The purpose of these is to give readers a hook to pull them into the material, to guide them to noteworthy items, and perhaps even highlight items worth sharing or covering in other publications to increase the reach of the almanac.

The process of determining these headlines could be rather straightforward too:

• Each chapter author nominates 2+ possible callout headlines
• BONUS: Ask all contributors to vote for their favorite callout headline (most surprising, interesting, etc. - a simple survey or otherwise) to help lead editors review and prioritize
• Lead editors select primary callout headlines to feature
• BONUS: Perhaps each chapter has its own 1-2 callout headlines for their own pages

I'm sure there are lots of other ideas the group could think of in the spirit of "callout headlines." I'd be happy to brainstorm with others etc., or contribute in this arena. My experience is primarily with words, messages, and people (I'm not a developer) so I'd be happy to help coordinate or project manage this idea if it's something that's of interest.

[foxdavidj]

I quite like the idea, and how it might drive visitors to read other sections they'd otherwise have skipped over. Doesn't sound like it'd add too much burden, besides needing to add a couple extra design elements to the homepage and chapter templates.

What would be a good next step here @natedame? Do you know of any sites doing something similar, so we could make sure we're all on the same page?

[rviscomi]

How is this much different than the featured chapter call-out on the home page? Or is this something added to the chapter itself?

[natedame]

@rviscomi Sure, the featured chapter call-out is chapter-driven and similar in spirit, but a callout headline would be more direct and specific - thus higher interest.

For example I'm seeing the SEO chapter on the homepage right now, which summarizes SEO and gives 3 key stats, which is good.

Better would be "callout headlines" that are more straightforward and direct, for example, "11% of webpages don't have a title tag" with a few sentences and perhaps an image.

It'd be best to look at all of the possible callout headlines together to compare and consider which has the most intrigue, appeal, interest etc., and feature those. Each chapter author will likely have multiple to propose.

Sure, you could have one or multiple per chapter, but it'd be best to have a small number of primary callout headlines featured on the main page.

This idea is basically the spirit of the upside down pyramid, which I think could be simply executed and add a lot of value.

@OBTo I could definitely come up with some more examples and document the process etc. if you'd like!

[foxdavidj]

I think that'd be really helpful if you could. So we could visually see the key differences of what we currently have and what you'd be proposing

…

On Mon, Jul 13, 2020 at 12:13 PM natedame ***@***.***> wrote: @rviscomi <https://github.com/rviscomi> Sure, the featured chapter call-out is chapter-driven and similar in spirit, but a callout headline would be more direct and specific - thus higher interest. For example I'm seeing the SEO chapter <https://pr.fnd.st/qGuK474b> on the homepage right now, which summarizes SEO and gives 3 key stats, which is good. A "callout headline" would be more straightforward and direct, for example, "11% of webpages don't have a title tag" with a few sentences and perhaps an image. It'd be best to look at all of the possible callout headlines together to compare and consider which has the most intrigue, appeal, interest etc., and feature those. Each chapter author will likely have multiple to propose. Sure, you could have one or multiple per chapter, but it'd be best to have a small number of primary callout headlines featured on the main page. This idea is basically the spirit of the upside down pyramid <https://en.wikipedia.org/wiki/Inverted_pyramid_(journalism)>, which I think could be simply executed and add a lot of value. @OBTo <https://github.com/obto> I could definitely come up with some more examples and document the process etc. if you'd like! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1016 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFHFSZRVO2SUYNMDCPMS63R3M6DJANCNFSM4OYU3IGQ> .

[tunetheweb]

Think we'd need to see some mock-ups to see what you mean. Does sound like a lot of overlap between that and featured chapters, which is already on the home page. We never did implement unique ids on this to see how many clicks it got though Google Analytics - probably should do that! Would also worry about crowding the clean look of the Home Page design. But let's see what you come up with.

And FYI, related info:

There's also large figure call outs in some of the chapters (e.g. CSS), though to be honest I think they were more done to break up walls of text rather than as specific callouts but think they work for both. 😀

@rviscomi also did a series of Tweets with callouts.

Also I love when others pull out interesting stats. There's lots of stats in the Almanac and trying to hone in on just a few stats is always difficult so always interesting to see what the outside readers find interesting.

[tunetheweb]

Oh and in case you're interested, here's the quotes and stats that make up the featured chapter section of the home page: https://github.com/HTTPArchive/almanac.httparchive.org/blob/main/src/templates/en/2019/featured_chapters.html

It's randomly picked each time but, as our CDN caches the page for 3 hours you need to add a random query param to force this refresh within that 3 hour time frame (e.g. https://almanac.httparchive.org/en/2019/?12345).

I picked these quotes/stats last time, after publication, but would be good if we nudged authors to pick these before they finish up - @rviscomi / @OBTo . That's assuming of course that we keep this feature, and don't scrap it for 2020, or replace it with what you are suggesting here.

[natedame]

Hey @bazzadp this is all great context and it sounds like there's lots of related thought already happening.

(And BTW I totally agree that there's lots of great, powerful stats in the almanac as a whole; love it when individuals grab their favorites; it's definitely hard to choose the callouts with the most general appeal - but as we know, web users are impatient. The sooner you can grab them the more likely they are to dig in.)

By way of a mockup... Well, here's an imperfect and old example I had laying around that I think shows the value of this. When SearchMetrics was still doing these studies every year it was a ton of data, but they always highlighted the "callout headlines" hook readers, draw them deeper, etc.:
https://www.searchmetrics.com/knowledge-base/ranking-factors-2016/

Now granted they're pushing a PDF - this was just a quick generic example.

First idea above was to abolish featured chapters and in its place put "callout headlines". A second idea might be to just keep the featured chapters but to focus them on an intriguing summary of findings from the year (rather than the current text which is more definitional)?

[rviscomi]

First idea above was to abolish featured chapters and in its place put "callout headlines". A second idea might be to just keep the featured chapters but to focus them on an intriguing summary of findings from the year (rather than the current text which is more definitional)?

Could you give an example for one or two chapters what this would look like? Still having a hard time understanding what the diff would be.

[natedame]

@rviscomi sure thing, let me give that some thought and get back to y'all.

[rviscomi]

@bazzadp what would be a good format for authors to provide good quotables like the ones used in the tweets and possibly useful for these headlines?

We currently use featured_chapters.html, which AFAIK is manually curated. I'd love to see something self-contained in the markdown itself, which would be easy for authors to configure in their final draft PR. This would also mean only the md file needs to be translated for each chapter.

One idea is to add a yaml field in the chapter md for authors to specify good quotables, similar to the text in the series of tweets. Using 2019/performance.md for example:

---
part_number: II
chapter_number: 7
title: Performance
description: Performance chapter of the 2019 Web Almanac covering First Contentful Paint (FCP), Time to First Byte (TTFB), and First Input Delay (FID).
quotable: First input delay is fast on 82% of websites on desktop, but only 26% of websites on phones.
authors: [rviscomi]
...
---

Having it in the config would also enable us to dynamically include it in the chapter contents. For example, Medium lets authors highlight text and make it easily sharable on social media. Rather than highlighting the inline text in a paragraph like the screenshot below, I see it as being a standalone block element with big text and social sharing options on hover/focus. The share contents would be prepopulated from the quotable and include chapter metadata. We would need a standard way for authors to invoke the quotable, like {% quotable() %}, or have some kind of indexing system for multiple quotables.

Curious to hear thoughts on this, and if it's too implementation-specific I'm happy to break this out into a different issue for discussion.

[tunetheweb]

As may remember, you pushed me for this when I originally implemented this in #614 and I spent quite a bit of time trying to pull quotes from the chapter and eventually reached the conclusion it was adding more complexity than it was saving. The featured quotes also aren’t exact replicas with slight tweaks in capitalisation, and cutting out middle parts of long sentences. That was very difficult to do with markup. And similarly the stats themselves were sometimes in the chapters, and sometimes taken from graphs, but their labels almost certainly weren’t on the chapters - at least in the condensed format to fit in the featured chapter format. So I’d caution against trying to pull it from the chapter directly unless we do make it a direct callout that can be literally lifted and shifted.

YAML meta data is an interesting one. Don’t think I tried that last time as think I was more trying to pull it from the chapter so once I gave up on that didn’t think to move it to YAML as thought easier to manage in its own template. I did try to move the Author bios to YAML previously and gave up
as couldn’t get the HTML to escape properly but the quotes (as of now anyway) don’t have HTML so don’t see why they couldn’t be move there.

[foxdavidj]

I really like the idea of using yaml to make a "quotables object array". Where for each quote we also attach the (optional) graphic we'd like to use. Would be relatively simple for authors to handle as well. How hard is it to generate quotes on the homepage sourced from the yaml stored in each of the chapters?

Having an easily shareable hover like medium would be great, but making them a 1:1 with the yaml data would be a pain. If we want this we should just have authors wrap the text in a custom element... like <quotable>

[tunetheweb]

One big downside to having the quotes in chapters, is that now either index.html file (or the featured_chapter.html file) needs to be a generated file.

This needs to be done either by:

• using our npm run generate script – at which point the content is duplicated. It's automatically generated duplicated content, which is better, but will still cause confusion and people to change this. And given the quote in YAML format is basically a duplicate of the in-chapter content, we now have it duplicated in 3 places which is worse. Also you'd need a new featured_chapter_base.html EJS file (not Jinja2 file) as well as the generated featured_chapter.html file adding complexity and confusion to an already confusing templating system.

or

• dynamically by python reading all the chapters .md files when index.html is requested. I do not want to do that for performance reasons.

So I'm still not seeing the big gains to move away from the featured_chapters.html, hardcoded file to be honest. We only generate these quotes once, when the chapter is finished and then rarely touch except when a typo is discovered.

Honestly, it sounds like we're chasing idealogical purity to keep the chapter content together for no real gains, but with a real cost for complexity. Also, to me these quotes equally form part of the index.html content (as that is where they are displayed) as they do the chapter content, so having them in a separate file is fine. No maybe that changes if we use the callouts more in the actual chapters but until then I'm not convinced about changing this.

[rviscomi]

Thanks for that perspective @bazzadp.

Honestly, it sounds like we're chasing idealogical purity to keep the chapter content together for no real gains, but with a real cost for complexity.

I promise this isn't ideological purity; I really feel like this would unlock new capabilities for chapters while also simplifying the process for the content authors and translators. Here's how I'd imagine it working:

1. authors add a YAML quotable config to their markdown files
2. anywhere within the chapter, authors can choose where to embed the quotable content using syntax like {{ quotable() }}
3. generate_chapters generates the corresponding quotable macro with the author-defined content in that chapter's HTML
4. the rendered quotable could be styled and scripted, for example so that it appears like the Medium example (highlighted text, quick share to Twitter, etc)
5. generate_chapters also generates featured_chapters.html containing the featured content for each chapter to be embedded on the home page

The advantages I see to this approach are:

• having the featured content in the yaml/markdown enables content authors to manage everything about the chapter in one place
• everything a translator needs to translate a chapter is in the one markdown file
• markdown files already go through generate_chapters, which enables us to do dynamic things with the content like generate a config with all chapters' content for the home page or support rich quotable experiences in the chapter

You're right that there is a complexity cost that developers pay to make the generation work, but I think it's outweighed by the convenience for all current and future authors and translators as well as the end-user benefit of richer content experiences.

[tunetheweb]

Wouldn’t these be better as just <spans> embedded in the markup and forget the YAML stuff at the top? As I say that doesn’t play nice with HTML and seems to separate the quote from the writing.

Spans could be pulled out by jsdom to create the featured_chapters.html file, and could also be styled yellow with CSS and have click functionality added with JS.

Doing this would also allow hidden spans where the quote doesn’t exactly match the markup, where we could re-write it to better suit the featured chapter requirements. For example, for the performance chapter quote we removed the hyperlinks so might have this:

## Introduction

Performance is a visceral part of the user
experience. For [many websites](https://wpostats.com/),
an improvement to the user experience by 
speeding up the page load time aligns with 
an improvement to conversion rates.
Conversely, when performance is poor,
users don't convert as often and have even
been observed to be [rage clicking](https://blog.fullstory.com/rage-clicks-turn-analytics-into-actionable-insights/)
on the page in frustration.
<span id="featured-quote" hidden>
Performance is a visceral part of the user
experience. For many websites, 
an improvement to the user experience by 
speeding up the page load time aligns with 
an improvement to conversion rates. 
Conversely, when performance is poor, 
users don't convert as often and have even 
been observed to be rage clicking 
on the page in frustration.</span>

And similarly the three featured quote stats and labels can be pulled out of real text, or inserted as extra, hidden text where the stat isn’t already directly in the text (e.g. a stat taken from a graph or other figure).

So I would suggest three categories of identifying stuff:

1. A span with id="featured-quote" for the home page quote. We use id as this must be unique.
2. Similarly we have a span with id="featured-stat-1" for the home page stat. And similarly for id="featured-stat-label-1". And then also for 2 and 3.
3. A span with class="callout-quote" for other callouts (e.g. to highlight yellow or add “click to Tweet” links). We use class as there might be multiple callout quotes per chapter.

A quote could have both id="featured-quote" and a class="callout-quote" attributes, or these two bits of functionality may want to identify different quotes - for example our current 2019 featured quotes are more “intro” quotes, than “interesting quote” quotes so may not make good callout quotes but maybe for 2020 they will be the same. This proposal allows either so is pretty flexible.

WDYT?

[rviscomi]

Yeah I'm open to something like that.

FWIW I think of the quotes as the tweet text, so much shorter and to the point, like the Twitter campaign graphics you linked to earlier.

Anyway, sorry @natedame for hijacking this thread. Let us know what you're thinking in terms of home page content.

[natedame]

@rviscomi hijack indeed! :) np

I've been thinking about this further... here's some updated thoughts.

The problem is that there's no compelling, engaging executive summary or starting point for the almanac. What's the big picture and - most importantly - why should I care about this? The forward covers this but only partially.

Updated suggestion: Someone should write an executive summary. If someone will only read 500-1000 words of the 2020 web almanac, this is what they should read. This should go on the homepage, not as a block of text but woven around design elements etc.

What I'm trying to say is, the 2019 almanac is heavy on facts, but it's a beast. First time visitors need more summary info and teasers to draw them in and give them a place to start.

Hopefully I'm not just turning this into a rant :) I really think there's a lot of goldmines in the almanac, and I want to make it easier for visitors to get hooked and start digging.

To weigh in on the topics you and @bazzadp were digging in to, I'd say that authors needs to be able to write distinct quotes for those quotes to be impactful in other contexts (i.e. a tweet). Making multiple phrases truly tweet-worthy and flow in a piece itself is not easy. Just my $.02

[rviscomi]

Thanks for checking in @natedame. It sounds like you're suggesting a total redesign of the home page content. I'm not strictly opposed to it, but I'm having a hard time imagining your proposal without more concrete suggestions. Could you whip up a PR, prototype, or mockup to show what kind of content you'd like to see added to the home page and how it would fit in with our existing design?

[tunetheweb]

Shall we close this now w're working on #1571 ?

[natedame]

Hi @rviscomi @bazzadp and @OBTo , I'm very excited about what's happening in #1571 . #1237 is also quite neat. Honestly, I'm quite sorry I wasn't able to give the idea of callout headlines more attention months ago. Never enough time in the day. Hopefully it was a helpful thought though!

I'm happy to close this thread out and all the others to continue. My apologies again for not giving this more attention earlier!