Newsletters are an increasingly effective way to distribute your content and build a brand – so what should you keep in mind when designing and writing for newsletters? Quartz’s Priya Ganapati offers some best practices to build your audience and make your newsletter effective.
Don’t resort to clickbait
Newsletters are not about the clicks. Your main goal is to build a relationship with your audience ー and that comes before circulating your content. Ganapati stressed that email is a sacred space. People use email for personal reasons, like communicating with family and friends. It’s important to not litter that space with clickbait.
You should also consider where you want your newsletter to be consumed. The Quartz Daily Brief is an effective newsletter because it can be consumed entirely inside the inbox. Readers have the option to visit articles, but they can also receive all the relevant information from just reading the newsletter itself. It’s quick and easy consumption.
Lenny Letter is another example of a newsletter that lives inside the inbox. The format is simple but effective. Readers can read one article entirely within the newsletter.
Establish a template for your readers and stick with it
Newsletters are habit-forming. Structure your newsletter so that your audience will expect to see the same sections in their inbox.
Ann Friedman’s newsletter is a great example of this – it’s the same format every week. You want subscribers to get used to a pattern. In Friedman’s case, she has sections dedicated to her writing, curated links, GIFs and more. She’s even managed to monetize members-only sections in her newsletter that require a paid subscription.
Prioritize mobile and simplicity in your design
Newsletters should not have too many images because there is always the risk of visuals not loading. This is especially important because newsletters tend to be consumed through mobile devices.
Visuals should be chosen carefully to complement the surrounding content, but they shouldn’t act as the content itself. Text should be legible, and the overall layout should be simple enough to work within the constraints of the email format.
According to these principles, Thrillist’s newsletter is arguably a poorly designed newsletter. There’s no content that lives within the email itself, and readers have to click links that take them outside the inbox. Images take up too much real estate, are slow to load, and make the newsletter feel like clickbait.
With a gross open rate of 70 percent, New York Times newsletters are notoriously effective – and this NYT Cooking letter is a great example of how to use images appropriately. The template consists of only two parts: a short essay, which sometimes includes a recipe that lives inside the inbox, and a handful of curated recipes. Images complement the surrounding content but are not necessary to gain value from the newsletter.
What makes a signup page effective?
The first barrier to building a newsletter audience is collecting emails. Below are some best practices for structuring your signup page.
Less is more
Fewer fields lead to higher subscription rates. If you want more demographic information, consider making that an option for the subscriber but not a necessity.
Quartz asks for the subscriber’s demographic information only after the subscriber has provided their email address. Ganapati said there’s a 50 percent drop off from people who sign up for the newsletter to readers who continue to put in their demographic information. While that loss is substantial, it’s still better than losing potential subscribers by overwhelming them with too many form fields. Getting the email address is the first priority.
Offer content previews
Newsletters are about cultivating a specific audience and building a special relationship. You don’t necessarily want everyone to sign up for it. Offering a sample newsletter on a landing page could be a potential way to entice more subscribers and screen out people that wouldn’t be interested in subscribing.
The key to writing and designing for newsletters is to prioritize the needs of the reader. Focusing solely on circulating your branded content will only make your newsletter seem like clickbait. The best newsletters use curated content to create a specific user experience that aligns with the brand.
Designing with these principles will ensure that your newsletter breaks through the noise and engages and builds your audience.
Last week I had the chance to attend Unite + Rebel, the Society for News Design’s annual conference in Charlotte, North Carolina. It was a wonderful opportunity to engage in conversations about design’s role in journalism and innovations in visual storytelling. Here’s a take-away from one of the workshops I attended.
What is design’s role in building the public’s trust in news? That was the primary question raised by Sally Lehrman of The Trust Project, an organization dedicated to deciphering technology’s role in ensuring trustworthy journalism reaches the public.
Structuring the News Page with Integrity
We know that journalism is distinct from other kinds of information on the web. Signalling that stories are produced with a commitment to transparency and integrity is crucial to building a relationship of trust.
Above is a live prototype from The Trust Project’s design workshop that demonstrates one way newsrooms could potentially integrate transparency within the article page. The prototype shows how you can integrate information like named/un-named sources, corrections, and citations in an easily accessible manner within the story.
One Size Doesn’t Fit All
News consumers are not a monolith. To rebuild trust in the news, one must also engage different types of users. Lehrman identified four categories of news readers:
The Avid reader actively curates personally relevant news and spreads it on social media, believing that being uninformed is dangerous.
The Engaged reader believes that news should be an equal opportunity offender: If no news offends you, it isn’t doing its job. These readers seek out quality local news.
The Opportunistic reader thinks that most news is trying to sell a viewpoint or agenda. This reader consumes news in a much more passive manner – scrolling through Facebook, listening to the TV during lunch breaks – as opposed to the Avid or Engaged.
The Angry and Disappointedreader feels disconnected and disappointed with news media and has the least trust in the news.
What Do Readers Want?
After researching different types of news consumers, Lehrman summarized what readers seek from the media.
Transparency: To build a trustworthy relationship with your readership, you need to share some information about your organization itself. Readers need to understand your positioning and agenda – they want to know why you publish the stories you do.
Reliable Reporters:Readers need to have confidence in the person telling the story, and they want to know about a reporter’s history, expertise, and biases.
Variety of Perspectives:While the general public frequently gravitate toward stories that reinforce their own worldviews, readers recognize that stories with multiple perspectives are more trustworthy. It’s important for readers to know why the story is relevant to them and to understand how their communities are affected.
Credible Sources:Readers check for the source of information to verify if a story is authentic. They want to know where the information is coming from and why those sources were chosen.
Participation:Readers want to be included in the process and make their opinions heard.
With these needs in mind, what can news organizations provide? Lehrman identified eight actionable trust indicators. These were defined through the Trust Project’s collaborative workshops with over seventy news organizations and around one hundred and fifty people.
Best Practices: Provide resources like an ethics policy behind your organization and word choice explanations. An example might be explaining why your organization uses the word “migrant” over “immigrant.”
Author Expertise/ID:Provide details about the reporter, share background information about their expertise, and acknowledge any biases they have. Let readers know who the author is and show them information about other projects the author has produced. A simple way to do this is having the byline be linked to an author and story archive.
Label Story Type:Clearly identify different types of content to distinguish reports from opinion.
Citations and References:Give readers access to the sources and facts. Include the reasoning behind why they were chosen.
Methodology:Readers want to know how the story was created and what editorial choices were made. Tell the story behind the story.
Location/Local: News can have a greater impact on communities if readers know which stories are local to them.
Diverse Voices: Prioritize diverse viewpoints, and pay attention of which voices are included or missing from the story. Include viewpoints from multiple political or ideological perspectives, and make a point to include perspectives from women, people of color, and other underrepresented groups.
Actionable Feedback: Foster participation after publication by creating a space for dialogue for the reader to contribute to the story. Let readers reach out to the story’s producers and share their opinion. An example could be a Slack channel letting readers chat directly with editors and authors.
The Trust Mark
Providing these indicators on the story page is a challenge – how can we make this information easily accessible to the reader but not be overwhelming? One possible solution is placing a “Trust Mark” on the story page. The mark would signal that the story was produced with quality and transparency. Readers would be able to click on the mark to see the different trust indicators.
Questions, Questions, and More Questions
The end of the workshop was opened to the audience for suggestions, reactions, and ideas. Some of the topics raised included:
How effective is the trust mark? If people already don’t trust the news, will a trust mark do anything to change their opinion? Fake news sites are implementing increasingly sophisticated designs on their homepages, making the distinction between real news and fake news even harder. What’s to prevent them from creating their own badge of legitimacy?
How do we increase news literacy? Building a relationship with your readers requires that people read more and develop skills for discernment. How can we educate the public on these skills?
And the big question...
How do we spread real news? Publishers frequently focus on producing news rather than circulating it. It can be a challenge to encourage real news to spread across the ideological bubbles perpetuated by social media, but The Trust Project is providing actionable solutions to help newsrooms foster deeper audience engagement and highlight the competency, ethics and dependability of their work.
Ben: Today’s link is a very long post, and it opens with an anecdote about how a comic author was almost driven to suicide by people who objected to his words, but it’s worth a read. “Empowerment” emphasizes identifying ways that people have agency and can change things, rather than telling them that everything is hopeless and run by a flawless conspiracy.
Gabe: Side projects give interviewees a chance to talk about their passions, how they work, and how they manage their time. What are questions you should be thinking of when you talk about your side project?
Kay: Listen up, video journalists! Make sure to check out this app reviewed by Poynter. It gives you more control over the camera in your phone and lets you monitor your audio with headphones while filming.
This week the team got together in person for an INN staff meeting in LA. It was a great way to set goals for the future, collaborate on Largo, do some team building, and plan for INN Day. It was an incredibly productive week. Go team!
Work we admire by our journalism peers
OpenNews recently introduced their field guide to open source in the newsroom. The guidebook walks you through the entire open-sourcing process, from getting your first release to handing off your project. If you’re interested in contributing, check out this guide.
Stay in the know
Sunshine Week starts this Sunday across the country, spanning from San Francisco to Minneapolis. Check out all of the panels, workshops, and events about the latest development in freedom of information resources.
MuckRock will be hosting two free events in Boston on all things FOIA-related.
My morning ritual involves visiting my daily rotation of websites, including The Atlantic, Vulture and Buzzfeed. How are these homepages designed to make their stories more easily accessible and appealing?
This is a question that’s been on my mind recently. The INN tech team has been working hard on planning Largo 2 to make it a more powerful WordPress framework. One area that we’re working on is how to make Largo’s default theme more customizable to different newsrooms’ needs.
After creating wireframe mockups of these 7 websites, I found that I was able to separate them into two groups: the traditional websites (Washington Post and New York Times) and the modern ones (Vice, Eater, Vox, Vanity Fair, and NYT Mag).
The Ghost of Print
Unsurprisingly, the Washington Post and New York Times are very similar in layout design.
These sites are the web versions of what you would find in front of your doorstep (in 1996). Compared to modern news sites, there is much more content on these homepages, and most of it is stuffed “above the fold.” A reader can take a glance at the homepage, briefly read all the headlines and then click on stories that interest them.
The goal is to give the reader a summary of what’s going on that day.
The disadvantage to this layout is that the homepage can feel cluttered and overwhelming, given that there’s so many stories competing for your attention.
Modern and Edgy
On the other hand, the modern news sites functioned like blogs.
These layouts are much more focused; there are a lot less stories and content “above the fold.” Rather, certain featured stories are given space to draw attention to themselves.
Unlike the older, traditional layouts, these websites are designed to get readers to click on the latest content. The reader does not get a comprehensive view of the day’s stories that the New York Times and Washington Post provide.
With this dichotomy in mind, let’s get into the specifics.
The goal of these traditional news sites is to include as much content as possible above the fold, so they range between 4-column to 6-column layouts.
Whereas the modern sites tend to have only 2 to 3 columns.
The traditional websites are quite conservative in their design choices. Color schemes tend to be grays, blacks, and whites (the Ghost of Print coming up again) and main navigation bars are simple.
The modern websites take a lot more design risks. For example, Eater has their main nav under their featured stories, something that I haven’t seen anywhere else.
Vox places headers over images and frequently uses their signature yellow.
On traditional homepages, featured stories are highlighted in very subtle ways. On the Washington Post, the header size is what draws your eyes to the feature.
Whereas in modern news sites, featured stories are emphasized through size and white space.
Special shoutout to New York Times Mag, which always has visually dramatic feature stories that make my heart swoon.
Analyzing these different approaches to layout design will continually be helpful to us as we start to brainstorm the architecture of Largo’s new default theme. We want Largo 2 to have powerful design and customization capabilities to make your news website look just as polished as these 7 homepages.
Stay tuned for future blogposts on repeating UI patterns, widgets, and much more!
Have you noticed something different about the Largo Project site? We redesigned it to make it more engaging and helpful to users.
This was also an opportunity for me to create a set of product illustrations and icons that would liven up the user interface. Here’s my process for creating those product illustrations.
Illustration conveys information; what did I want to convey about the Largo Project? Given my experience working with the tech team, I wanted my illustrations to feel:
I brainstormed a few different styles and talked with our lead designer Julia.
After sketching and playing around with various ideas, I came up with these approaches.
We agreed that the “Abstract Matisse” style was fun, original and visually interesting. However, I was concerned that it required too much interpretation from the viewer. I also didn't want the illustrations to overshadow the copy surrounding it.
With that in mind, I decided to explore a more literal route.
Simple vector illustrations are the go-to for websites nowadays; just check the front page of Dribble. They convey information effectively and look good, but also tend to be devoid of any personality. I knew that this style would be a straightforward way to get the job done, but I also wanted to challenge myself.
My goal: to find an effective medium that incorporates the fun, loose style of “Abstract Matisse” but doesn't require too much interpretation. Here’s what I came up with:
The style was abstract enough to be visually interesting but literal enough that you wouldn’t need to guess what it represents. And with that style in mind, I created the following illustrations.
Animation can be that extra pop that brings standard illustrations to life. While creating various icons for the Largo site, I found an opportunity to incorporate animation to make the user interface more dynamic. It’s an added effort that reflects how the Largo framework is crafted with care.
I tinkered with CSS to display the animation on hover states, as seen below:
I didn’t want to incorporate animation into every illustration; that would feel too noisy and chaotic. Instead, I decided to add a subtle animation to our Support Page that would function as a nice surprise.
If you hover over the cat, she'll start wagging her tail!
Animated GIFS like these look complex but are actually quite simple. A GIF is really just a series of still frames being played in a loop.
For this particular GIF, I only had to make 8 different frames to create the full animation. With each frame I made a slight modification to her tail. Here are the different frames.
I put the different frames together in Photoshop, added some background visual elements and ta-dah!
You can check out all of the illustrations, icons, and GIFS in action on the Largo homepage and support page. Thanks for reading!
A seminal work and examination of the psychopathology of journalism. Using a strange and unprecedented lawsuit as her larger-than-life example — the lawsuit of Jeffrey MacDonald, a convicted murderer, against Joe McGinniss, the author of Fatal Vision, a book about the crime — she delves into the always uneasy, sometimes tragic relationship that exists between journalist and subject. In Malcolm's view, neither journalist nor subject can avoid the moral impasse that is built into the journalistic situation. When the text first appeared, as a two-part article in The New Yorker, its thesis seemed so radical and its irony so pitiless that journalists across the country reacted as if stung.
The referenced New Yorker article can be found here.
We'll be meeting via Zoom video call at 1 pm ET on Wednesday, February 15.
Back in fall I created spot illustrations to liven up the “Resources and Guides” section for our re-design of Rivard Report. Here is my process for creating them.
I had to create two graphics that:
Represented the stories of Where I Live and Apartment Guide, respectively
Were visually cohesive
Fell in line with Rivard Report’s color scheme
I started by reading stories from both columns to get an idea of what the illustrations needed to convey.
Where I Live is a column of stories written by San Antonio locals about the places they live in. It is about the symbolic power of home. The column celebrates the quirky side of the city, focusing on the special relationship that people have with their houses and neighborhoods.
The Apartment Guide is a compendium to modern apartment buildings around San Antonio. It informs readers of buildings and complexes that reflect a metropolitan lifestyle, so the illustration needed to have an “urban” feel.
I had an idea of what the two sections were about; it was now time to start sketching!
I wanted to illustrate San Antonio’s urban landscape for the Apartment Guide illustration. I played around with drawing the city’s landmarks, but later decided that the idea felt too cliched and obvious.
Instead, I took inspiration from the guide itself.
The various apartment buildings highlighted in the guide all had fabulous architectural elements. I played around with those elements and came up with this starting sketch.
While I was researching the city’s landmarks, I came across San Antonio’s North Star Mall boots; the landmark felt quintessentially Texan and representative of the city. With cowboy boots in mind, I created this starting sketch for Where I Live.
Now that the sketches were finalized, I recreated the images in Adobe Illustrator. This process required time and patience; the building shapes and spacing between objects had to be mathematically precise. Illustrator’s Pathfinder and Align functions were necessary in creating this.
Creating vector shapes is the boring and tedious part, but the results are oh-so worth it.
The basic shapes were all created; now comes the fun part!
Color brings the illustration to life. I based the color palette on Rivard Report’s branding, which features a blue and orange that would contrast well and play off each other. One illustration would be mostly orange; the other mostly blue.
Additionally, I strategically placed small pops of blue and orange to create visual points of interest. This added to the richness of the illustration.
Texture and Gradients
At this point, the graphics were nearly completed; the only thing that remained was to add textures and shadows to further create depth and complexity.
I relied on this helpful guide to add texture to my illustrations.
All Together Now
Woo hoo! After staring at a computer screen for hours, the illustrations were finally complete. Here are GIFS summarizing the process.
And here are the illustrations in action on the Rivard Report homepage.
Adam: This week the American Press Institute published some helpful guidance on producing longform stories. Among the topics they cover: how to choose which stories deserve special treatment, how to involve your community in the story process before, during and after publication and more.
Adam joined 10 other contributors in D.C. for a special OpenNews code convening. They worked on building the first draft of a guidebook for open-source newsroom code. They’ll hand over the draft to a team of remote editors and eventually publish it through Github. Stay tuned!
If you're looking for general jobs in nonprofit news, the main INN newsletter had over 18 job openings this week. Check it out and sign up here if you'd like to get that in your inbox every week. Two INN newsletters are better than one!
As part of re-designing Mississippi Today, we were commissioned to come up with a new web banner for their site. Inspired by INN’s commitment to documentation and transparency, here is my creative process for creating that web banner.
The Original Web Banner
This was the original banner that they were using, which had areas that could be improved upon. The problems that I saw were:
The logo and the photo weren’t integrated. The separation between the two design elements was jarring.
The photo itself didn’t feel appropriate. Most of the photo space was taken up by dark tree branches, and the lighting of the State Capitol at night had a spookiness that didn’t make sense.
So I had to find a solution – something that incorporated the logo, looked modern, and felt representative of the stories that Mississippi Today reports. Here is how I went about that process.
It started with the basics: pencil, paper, and good ol’ Google Images. Here I tried to get a feel for the subject and develop a familiarity with the visual elements. I asked myself:
What qualities of the State Capitol building make it look like the State Capitol building? In this case, it would be architectural elements: windows, pillars, engravings, statues.
What’s working? This is a question I always go back to. In my experience, attempting to recreate what I envision in my head never works. I find it better to let the process lead me; the little mistakes and blunders along the way tend to lead to better ideas.
I wasn’t sure if the client wanted to go with an illustrated web banner so I did a quick freehand sketch. The proportions and lines weren’t drawn precisely but it has a breezy quality that gives it whimsy.
Banner #1 - A Starting Point
The logo is integrated with the banner and doesn't feel jarring.
The banner features the state capitol building (both old and new).
The dome of the building is hidden, so it isn’t specifically recognizable as the Mississippi State Capitol.
The illustrations and proportions aren’t precise.
The clients liked the illustrations! Woo Hoo! However, they’d like them to look more like the Missippi State Capitol. Which means...
Back to Sketching
Illustration is pain - especially when you’re drawing a building! You really just have to power through it. This time, I spent more time on making lines straight and getting the proportions right.
I don’t have formal architectural skills in drawing buildings, so most of the sketches still retained a looser, abstract quality to them.
One of the problems I encountered while designing the first banner and continued to deal with was finding a good white space balance. Given the proportions of the Mississippi State Capitol, I had to:
Crop the State Capitol Building while finding a way to keep it recognizable.
Find a way to fill up all that white space.
This time I got an idea - what if I used the various architectural elements as visual motifs? That would be a way to fill up that pesky white space. Back to more sketching.
It's overall more colorful, graphic and richly textured than the first banner.
The line work is more precise.
The colors are fun.
The design elements feel crowded; a lot is going on.
Theres's less emphasis on the logo because of all the visual noise.
I don’t like how the elements are cropped!
The interplay of the architectural elements somehow gets lost in the process of cropping.
The clients wanted something more in line with the first banner illustration, which puts the logo in the foreground and the illustration in the background. They also like the looser brush style of the original illustration. Back to the (literal) drawing board!
I used a brush pen to outline my first illustration of the State Capitol building, so I knew to go back on that style for my next illustration. By this time, I was much more familiar with drawing the Mississippi State Capitol, which made drawing all those pesky windows and columns (slightly) less painful.
The final result has the "looser" quality of the first illustration but the precise proportions and line work of the second illustration. I added some color and the American and State flags to make sure that it was recognizable as the Mississippi State Capitol.
I was happy with the results. The style was reminiscent of Jean Jullien, a fantastic illustrator who juxtaposes bold brushwork with pops of color.
Now it was time to put this bad boy in a web banner!
Banner #3 - Is this "The One"?
The new illustration is more similar in style to the original illustration, but done with more precision.
The illustration doesn’t draw attention away from the logo.
There's enough white balance so that it doesn’t feel crowded nor too sparse.
Lines are precise but it overall lacks the free spirit of the original illustration.
The clients actually wanted to go back to the original illustration of Banner #1. Which happens! There’s something about the original illustration that’s charming and quirky, and it gets lost in the other two banners.
It's about enjoying the process as much as the results.
Here are the different explorations of the banner:
And here is the final illustrated banner in action:
My first illustration commission was a fabulous experience; I pushed myself to explore new styles and learned a lot in the process. I also improved my skills at drawing buildings - I'm totally adding "Professional State Capitol Drawer" to my LinkedIn profile.