The Ghost of Print Still Haunts Us: Analyzing 7 Different News Homepages

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.

I’ve started looking at various mainstream news homepages to brainstorm possibilities for Largo’s new default theme. Specifically, I’ve analyzed the homepages for The New York Times, The Washington Post, Vice, Eater, Vox, Vanity Fair, and New York Times Magazine. Here is what I’ve discovered.

Old Print vs Modern Blogs

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.

Layout Differences

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.

Design Choices

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.

Red is used sparingly

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.

Featured Stories

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.

Font-size is 30px, to be exact.

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.

Conclusion

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!

Building A WordPress Donation Form Using Gravity Forms, MailChimp and Stripe

Here at INN, we've built a lot of donation forms for our members. Over the last year, we've created a standard set of forms and integrations that you may find useful as a starting point for building your own donation forms.

Note that this is a loooooong post and if it seems overwhelming, we'd encourage you to stick with it and experiment with these tools.

If you get stuck or just want to hire us to help, we're also happy to work with you to get you up and running. Now that we've standardized a lot of this work, we're often able to get a site using our Largo WordPress platform up and running with a donation form that looks and works great in just a few hours!

Get in touch if you'd like to discuss that option.

Here we go!

We start with WordPress and Gravity Forms, and add the following plugins:

We typically use Stripe to process payments because the fees are lower and it offers more flexibility, but Gravity Forms has add-ons for PayPal and several other payment gateways if you'd prefer to use one of those.

Stripe charges 2.9% of the transaction total, plus a $0.30 flat fee per transaction (with no monthly or annual fee). We use the subtotal merge tag plugin to create a checkbox that gives users the option of paying the fees so that their entire donation amount goes to the organization they're choosing to support.

In addition to collecting money, donation forms are an excellent place to ask donors if they want to become newsletter subscribers. We add a checkbox to our default donation form and conditional logic and the Gravity Forms MailChimp Add-On to automatically add donors to an organization's mailing list.

Gravity Forms also allows you to automate the sending of receipts and donation acknowledgements and also to send notifications via email or Slack when a new donation is received.

For our sites, we've created some boilerplate code containing default styles and a clean WordPress template for use on these donation pages. We've also included importable form templates, if you'd like to use our form designs.

Does this sound like something you want to use? Read on - the full set of instructions are below.

Installation

First, get the following things:

  • Gravity Forms Developer license in order to download two of the plugins from Gravity Forms. A developer license costs $199/year and will allow you to use the plugin and any add-ons on as many sites as you would like. For INN members, we pay for a developer key for all sites we host. If you want to use our group license, just contact our support team and we'll help you get that set up.
  • Stripe API key for handling purchases. (Stripe charges a transaction fee for most accounts; following this instruction set will help you cover that transaction fee)
  • MailChimp API key for sending a newsletter to your subscribers. (MailChimp's pricing varies based on mail volume)
  • An SSL certificate (if you want to accept payments directly on your site). For sites we host, these are available for free through our hosting company (via Let's Encrypt). If you'd like us to request a certificate on your behalf, just open a support ticket and we can take care of this for you. For sites using other hosting you'll need to check with your hosting provider to see what options are available.
  • (optional) a reCaptcha site key, to help prevent spam submissions

Once you have your credentials in hand, install these plugins:

All of those must be installed manually, because they're not available in the official plugin repository. If you have FTP/SFTP access to your site, you can upload them to the plugins directory of your site using an SFTP client or similar program. WordPress.org has instructions on how to do this.

You can also install them from the WordPress dashboard by going to Plugins > Add New. Click on the Upload Plugin link next to the page title and you can upload the zip file of the plugin you'd like to add.

Once you've installed the plugins, you'll need to also activate them. To do this, go to the Plugins screen and find the newly uploaded plugin in the list. Then, click Activate to activate it.

For sites we host, we have to install and activate the plugins for you. If you'd like these plugins enabled on your site, just contact our support team and we'd be happy to assist.

Configuration

Each add-on has a configuration section in the WordPress dashboard, at Forms > Settings.

Gravity Forms

You'll need to enter your Gravity Forms support license key in the Gravity Forms plugin settings.

Gravity Forms Stripe Add-On

The Stripe add-on has four keys that you'll need to enter:

  • Test Secret Key
  • Test Publishable Key
  • Live Secret Key
  • Live Publishable Key

You can create/access these from the API Keys tab of the Account Settings page in Stripe.

There's also a set of radio buttons for switching your site from using the Test API to the Live API. Note that you'll need to switch this both here on the settings page and in the Stripe dashboard itself. If you're using Stripe for the first time, note that you'll also need to have provided your bank information before Stripe will allow you to switch to Live mode.

Typically, when you're setting up a new form, you'll use the Test API to run some test transactions using their testing credit cards to make sure everything works before switching your form/site to Live mode.

Follow the instructions on the Stripe add-on settings page to add your site's Gravity Forms callback hook to your Stripe account. If you are testing the form on a staging site, note that the callback URL should be your live site or else the callbacks will not work properly (this is something to also double check on your site before making the new form live).

Gravity Forms MailChimp Add-On

If you're going to use your donation form to collect email addresses for your MailChimp newsletter, you need to add your MailChimp API key.

You can get a MailChimp API key by logging in to MailChimp and going to Account > Extras > API Keys. There, click on Create A Key and give it a name (something like "Gravity Forms" should suffice) and then copy the newly created key and add it to the Gravity Forms MailChimp Add-On settings in the field provided.

Create your donation form

We've created a couple of sample forms based on the forms we've developed for a few of our members/clients. We recommend importing one of these forms first so that you can examine how things are put together before attempting to create a form of your own. You might even find that one of the example forms will work well for you with very little modification!

Create form by importing

Gravity Forms allows you to import forms from JSON files, so we've provided two example donation forms that you can download and import to get started.

To import a form, save the importable .json file from either of the above links, then upload it following Gravity Forms' import instructions.

Once you've imported a form, find the form in the list of forms and click "Edit." From here you'll see the various form fields and how they're configured. Note that each of these examples uses conditional logic to show/hide certain form fields depending on the options a donor selects in the form. For more on how conditional logic works in Gravity Forms, see the relevant section of their documentation.

If you like how one of the example forms works, you can move on to setting up notifications, confirmations and the MailChimp and Stripe feeds to ensure they are set up correctly with your site's information.

Refer to the Gravity Forms documentation if you have specific questions.

Create a form from scratch

After you've imported one of the forms above and examined it to see how it's put together, you may want to try your hand at creating a form that's more tailored to the individual needs of your site.

A few general best practices for donation forms:

  • Include a default donation amount (we find that $20 is a good default for one-time donations and $10 is a better default for recurring donations) but make it easy for people to specific their own amount.
  • Provide the option to make the donation a recurring donation on a monthly or yearly basis. Both Gravity Forms and PayPal have options to set up recurring donations and this is a great way to save yourself a lot of time and effort in trying to get donors to renew their membership in the future.
  • If you're a nonprofit, you'll need a way to send a tax receipt to the donor: email addresses and postal mailing addresses both work. Personalized notes are best, particularly for first-time donors or those who have consistently supported you, but Gravity Forms also allows you to automate the sending of receipts (see the section below on setting up notifications).
  • Request as little information about a donor as possible. You want to make it as easy as possible for people to give you money and asking for too much information or having a very long form will cause many donors to give up and never complete their donation. Make sure you are only collecting information that you actually intend to use, and wherever possible, explain how that information will be used and why you're collecting it.
  • Collect the user's email address for confirmation and thank-you emails related to this transaction, but do not add them to your mailing list without their explicit permission. In most of our forms, we' do this by adding a checkbox (usually checked by default) to opt a donor into receiving further messages from the organization.
  • In general, single page donation forms are best unless the form is very long. With Stripe, you can add the necessary credit card fields at the bottom of the form directly before the submit button. With PayPal, you'll have to send a donor off to PayPal to complete the transaction. This is one of the reasons we prefer Stripe. Note that if you handle the credit card information directly on your site, you will need to have an SSL certificate that is configured correctly to serve your donation page over https.
Set up notifications

You'll probably want to receive notifications from your website when someone submits a response to the form. To do this, find your form in the list of forms, hover over it, and then click "Settings" when that text appears.

Under the "Settings" tab are at least three tabs: "Form Settings," "Confirmations," and "Notifications" are the default ones.

Under Confirmations you can set what happens when a donor submits the donation form. Gravity Forms gives you a couple options here but we typically prefer sending people to a thank you page after the form is successfully submitted. If you don't want to create a thank you page, you can also just choose to display some confirmation text.

If you want to send users to a thank you page, first you need to first create a WordPress page to send them to. Here's an example on INN's website. Once the page is created, go back to the settings for the form you're working on and click on "confirmations". Now, select the "Page" option, choose your page from the drop-down list of pages, and save the confirmation:

A screenshot of the Gravity Forms Confirmation settings, showing the choice of a "Page" confirmation with the "Thank you!" page chosen.

Under the Notifications tab, you can set which email notifications are sent when a form is submitted. Typically, you'll want to send an email to one or more members of your staff to let you know a new donation has been received and also send an email to the donor with the details of their donation.

In the INN example form, two notification emails are sent on submission:

The first one is sent to the site administrator, with a subject of {form_title} and message body of {all_fields}. These form fields surrounded by curly brackets are Gravity Forms' merge tags, and allow you to put information from the form into the email. Note that you can send notifications to multiple email addresses by adding each address separated by commas in the "send to email" field.

The second confirmation is sent to the email address provided by the donor in the form, thanking them for their donation and again using the {all_fields} merge tag so that the donor has a receipt for their donation. Note that you can use conditional logic here if you'd like to send different confirmation messages to different segments of donors based on the information they submitted. So, for example, you could send a different confirmation to one-time vs. recurring donors, or an automated response to low-dollar donors but send yourself a notification for large-dollar donors so you can send them a personalized note.

Set up the link to Stripe

The Stripe connection for each form is configured in the form's settings area, in a "Stripe" tab that appears underneath the "Notifications" tab. The Stripe settings area allows you to create different "Feeds" for this form.

A "Feed" is a type of transaction and a single form can have multiple types of transactions. In the INN example, there are three feeds: a monthly recurring donation, a yearly recurring donation, and a one-time transaction. These donation types are respectively categorized by Stripe as "subscription," "subscription," and "products and services."

You don't have to have multiple feeds. Sometimes all you want to do is create a one-time donation form. If that's the case, you can skip ahead to the "One Time Donation" example below, and ignore the "Conditional Logic" box.

When creating a donation form with multiple donation types, add a "Radio Buttons" element to let the donor choose between "Per Month," "Per Year," and "One Time".

A screenshot of a selection box for choosing between "Per Month", "Per Year", and "One Time"
An example form element with radio buttons.

Then, in the Settings area for this form, create three Stripe feeds, matching the donation types.

A screenshot of the settings page for a Monthly Recurring Stripe feed, showing the options as they are set when the INN form is imported.
A screenshot of the settings page for a Monthly Recurring Stripe feed, showing the options as they are set when the INN form is imported.
A screenshot of the settings page for a One Time Donation Stripe feed, showing the options as they are set when the INN form is imported.
A screenshot of the settings page for a One Time Donation Stripe feed, showing the options as they are set when the INN form is imported.

If you have multiple feeds set up (because you have multiple types of donation) make sure to check the "Conditional Logic" box and set it to only process that feed if the value of the "Donation Type" form element you chose is set to the radio button label that corresponds with this donation feed.

The payment amount should be "Form Total" so that you capture the processing fee, if that option is enabled.

You may also want to send over other information to Stripe so that you have other metadata associated with the "customer" record that will be created when a payment is processed. The "metadata" section here allows you to provide the name(s) of the fields as you want them to appear in Stripe and then map those to the form fields submitted on your site.

Once you have this set up, run some test transactions. Make sure that the Gravity Forms Stripe Add-On is in "Test" mode by going to Forms > Settings > Stripe and checking the "Test" option for the API. Make sure your API keys are entered. Press the "Update Settings" button to make sure. Then grab some testing credit card numbers from the Stripe website and test every option on the form, confirming with in the Stripe dashboard that the test transactions completed successfully.

Set up the link to MailChimp

Most of the sites we work with want to also give new donors the opportunity to sign up for one or more mailing lists. We use the Gravity Forms MailChimp add-on to enable this option.

Before you set up a MailChimp feed in Gravity Forms, you'll need to have already created the mailing list you want to add people to and also make sure the fields you want to send over are configured correctly in MailChimp.

Once you have the Gravity Forms MailChimp Add-On installed and enabled, a MailChimp tab will appear in the form's settings section. Here, you can configure which of the submitted form fields match up to MailChimp's fields in its database for subscribers.

There is a checkbox to enable double opt-in, so that the donor receives an email to confirm that they would like to sign up to receive your newsletter, but it's commonly assumed that by checking the "Sign me up" checkbox, your donor has consented to receiving your newsletter.

At the very bottom of the MailChimp settings tab for the form is a checkbox labeled "Conditional Logic." Check this box to show the conditional configuration options. We're going to change the conditions so that the MailChimp integration only sends the email address to MailChimp when a box is checked.

a gif showing how to change the conditional logic works
Choose the field name from the left box, the "is" equivalency option from the middle box, and the text of the checkbox from the right box.

Setting up styles for forms

The forms that you've set up above will work as-is, but they're not particularly pretty. Gravity Forms' form HTML is complex and contains some weird opinions. The stylesheets that Gravity Forms includes are similar: weirdly scoped, curiously specific, and often a bit perplexing.

There are several ways to dequeue Gravity Forms' default styles; Zack Katz has an excellent blog post detailing the ways to dequeue them.

However, because Gravity Forms' styles are at least partially useful, we keep them enqueued and modify them. Here's the modifications we make:

These example styles are scoped to the form IDs and they also depend on a wrapper class that can be added to your form settings but they may not be immediately applicable to your form if the form ID or CSS class is different. We hope that these are at least useful as a starting point.

Good luck!

We hope this was a helpful introduction on how to setup donation forms using WordPress, Gravity Forms, MailChimp and Stripe.

Again, if you found all of that overwhelming and would like to hire us to help, just reach out and we'd be happy to help get you up and running!

 

Announcing Largo 0.5.5

We're excited to announce the latest release of Largo, our WordPress framework for news websites.

This is a big release that we've been working on for the past nine months or so and it includes a lot of great new features we think you'll love as well as a bunch of smaller improvements and bug fixes. You can see the complete list in the official release notes.

Here are a few highlights:

Redesigned photo galleries

The photo galleries in Largo were inherited from Project Argo and were looking pretty dated. We completely redesigned the galleries to make the design more minimal to focus more on your photos while also ensuring a better mobile experience for your readers. We also added support for full-screen viewing (a very common request we've heard from a number of sites). Here's what the galleries looked like Before:

gallery-old

and After:

gallery-1

We also added support for a grid view of photos to better support the "columns" attribute you see in the settings when you create a gallery in WordPress (thanks to Rivard Report's photo editor Scott Ball for this suggestion). So now when you set that option:

gallery-1a

You're able to display your photos in a grid view (with the ability to click to view them as a full-screen slideshow):

gallery-2

Improved byline functionality and support for multiple authors

Previous iterations of Largo included some byline enhancements to support multiple authors (using the popular Co-Authors Plus plugin) and showing a "time since" dateline instead of an absolute date. In this version we've added a number of additional improvements, including the ability to display author avatar images directly in the byline:

byline

We also included better support for the optional job title field available in Largo user profiles. Some sites use this for job titles and some have been using it to identify partner organizations:

byline-2

Additionally, for posts that have been updated after they were originally published, we now show the date and time the post was last updated at the top of the body of your story. There are also a number of general improvements to Co-Authors Plus compatibility and support for guest authors.

Better social network integration

As you may have noticed in the byline example above, we've also added better support for additional social networks.

For non-developers, there are some additional social networks in the Appearance > Theme Options section of the dashboard (most notably, support for Instagram and Pinterest). Once you add the links to the relevant social networks you'll see the icons/links appear in the header/footer and also in any Largo Follow widgets you may have added to your site. On a related note we've also updated the Largo Follow, Facebook and Twitter widgets to support the latest and greatest from each of the social networks.

For developers there are some additional hooks and filters that allow you to easily add additional social networks to the sharing tools on article pages and also the theme options and related widgets. If you're not a developer but you'd like to add this support for your site, we're happy to help with that as part of our paid consulting services. Just get in touch with us and we can discuss how best to accomplish what you're trying to do.

Better admin user-experience for featured media

In a previous release we added some powerful new functionality that extended the default WordPress featured image functionality to support photo galleries, videos and other embedded media. Unfortunately, adding a new button for this above the Post window proved confusing to people, as did the option to override the automatic display of featured media at the top of the post.

We've moved this functionality back to the default location in WordPress (in the right column of the Post Edit screen) and also made it much easier to find the checkbox to override the default display of featured media on a per-post basis (useful if you want to just show the thumbnail image on the homepage but include the photo elsewhere in your story instead of at the very top).

featured-media

We've also added support for featured media to the legacy two-column post template. We still recommend using the single-column template in almost every instance. To make this transition possible, we have released a number of recent plugins (mostly notable the Super Cool Ad Inserter) that should make it easy to insert advertising, donation messages and signup widgets without needing a sidebar or right rail on article pages. Your mobile users, particularly, will thank you for making this change. If you're not quite ready to make that leap, however, we're now pleased to at least give you the same featured media support that we incorporated into our new default article template in the last Largo release.

...and much more.

THANK YOU!

To everyone who contributed to this release, including community contributions from yayannabellejmusalntwbMsPseudolus and rclations (before he joined our team).

There are also some new features in this release that were originally built for a few of our recent clients which have now been open sourced so that all can benefit. So, a huge thanks to Rivard Report, Religion News Service, Mississippi Today and others who, in one way or another, contributed to some of this work.

Get The Latest

For INN member sites that we host, we'll be rolling out this update over the next couple of weeks. We're also making some infrastructure changes at the same time to improve reliability of your sites so we'll be reaching out individually over the coming weeks to coordinate scheduling for the updates.

For sites that we don't host, the update is available now to download from Github (zip file). We do strongly recommend that you apply updates to Largo as your time and resources allow. Keeping the Largo parent theme up to date will ensure you have, at times, critical bug fixes, the latest features and will also help us to provide better support when you come to us with questions. As with all major updates, we recommend testing the update on a staging site before updating your live site. If you require assistance with making the update, we're happy to help either through our weekly office hours or our paid consulting services. Get in touch if you need a hand.

What's Next?

This is the last planned release for the current Largo codebase. Over the next few months we'll be starting a process to take the work we've done over the first four years of the project and re-architect the core Largo framework to make it more modular, flexible and easier to use.

These planned improvements will make it easier for you to pick and choose the components you want to use for your site instead of having to sort through a bunch of options and configuration settings. We will also release a number of components as standalone WordPress plugins so you can take advantage of the work we've done without necessarily having to use the entire Largo theme in its present form.

Finally, we also plan to have a number of new WordPress themes built using this framework that will have incorporate much of the newer design work you may have seen on some of our more recent projects.

In short, we hope to keep the best of what has made Largo such a popular platform for newsrooms but make it easier for you to use and easier for us to maintain and improve.

You'll be hearing a lot more about that process soon and we're excited to share the work as it progresses!

Improvements to Largo Support Process

We love helping people get the most out of their Largo sites. As we have more sites using Largo we occasionally have to make changes to how we provide this support.

The help desk system we’ve been using has proven to be a bit confusing and not as flexible as we would like so we’ve decided to make a switch.

Starting this week, and officially launching May 1st we’ll be launching a new support portal at http://support.largoproject.org.

The new portal includes the ability to create new support requests and adds a knowledgebase of answers to common questions and a community forum to ask questions, propose new features and share success stories with other Largo users.

This change does mean you will need to create a new account. But you can also still open a new support request by emailing support@largoproject.org.

We’re also in the process of revising and expanding the Largo Project documentation, and developing new training resources to answer common questions about setting up and running a Largo website.

The preferred process if you need assistance with your site is as follows:

  1. Visit support.largoproject.org and search the knowledgebase and/or public forums to see if your question has already been answered (many questions come up time and again and we’ll try to have answers ready to go for you for as many of these issues as possible).
  2. Site administrators or developers may want to also consult the Largo documentation and editors and authors might want to reference our Largo users guide.
  3. If you’re still unable to find an answer to your question and require further assistance. Just open a new ticket and we’ll do our best to help.
  4. In some cases if you request is going to require more one-on-one assistance or custom work we may ask you to pay for this work to help us cover our costs. You can learn more about our consulting services here.

We hope these changes help you to get the most out of your Largo site. If you have questions or suggestions for us, feel free to reach out anytime.

Thanks for using Largo.

Announcing Largo 0.5.4 – Improved Navigation And Social Sharing Tools

A lot of change is happening on the web. One of the advantages of working with so many great nonprofit news organizations is we get to see how they are using the web for journalism and storytelling, and how people are using their websites. This drives us to continually improve the user experience, for those consuming news and for those producing it.

Today we’re happy to announce the next evolutionary step in INN’s WordPress framework for news websites, Largo version 0.5.4.  This release brings a number of major improvements to the mobile experience, social media sharing tools, and general clarity and aesthetics.

Enhancements include:

Complete navigation overhaul - Menus have a cleaner look and are much more usable on mobile devices. On small screens, menus should help when needed but otherwise get out of the way. With Largo 0.5.4, the sticky navigation bar is visible by default on all pages for mobile screen sizes. It disappears when a user scrolls down and reappears on an up scroll.  There’s also an option to enable the sticky navigation for all screen sizes on article pages, and to hide the main banner on article pages.

New social sharing buttons on single-column posts improve functionality and look - As the user scrolls down into a story page, the social sharing buttons fade in and float along with the viewport, so they’re always in the user’s easy reach.

Here's a short video showing the new sticky navigation and floating social media sharing buttons.

Archive pages for terms (including categories, tags, series and other custom taxonomies) can now have their own featured image - This image will display as a banner image on the top of the term’s archive page and we hope to extend this functionality in the future to support images of different sizes and aspect ratios. Additionally, with the addition of this functionality the Largo Taxonomy List Widget now includes an option to display thumbnail images for each series.

Other visual improvements include removal of the sticky footer, consistent styles for the search box across all headers, and many other style adjustments that add up to a better user experience.

Behind the scenes we also improved the performance of Largo by streamlining parts of the code people never see.  We believe this release will result in more useable, attractive, and better performing sites for the dozens of organizations now using Largo.

You can read all the details in the release notes on GitHub. Largo 0.5.4 is being rolled out over the next couple of days for sites that we host.

If you're not an INN member using our hosting, you can download the latest version from the project repository on GitHub.

We’re not done improving Largo and probably never will be. As long as the web continues to evolve, we’ll roll with it. And we’ll keep working for your success and greater impact!

Announcing Largo 0.5.3 – Widget and Sharing Tool Improvements

This week we released the latest version of Largo (version 0.5.3), INN's WordPress framework for news websites, with a number of significant improvements.

Most notably, in this release we wanted to improve the styling and performance of widgets throughout Largo to make everything a little more stable, consistent and easier to modify and maintain from child themes.

In addition, we rolled out the first part of a revision to sharing tools on article pages that we hope will simultaneously increase sharing and also reduce the overall weight of pages and improve load time.

There are also a number of bug fixes and developer-facing improvements that you can read all about in the release notes on GitHub.

This update has already been applied for sites that we host, but if you're a non-INN member or hosting Largo elsewhere, you can download the latest version from the project repository on GitHub.

Note that if you're using a version earlier than 0.4 and have done any significant customization to Largo or a child theme then you'll likely want to do some extra testing because the jump from 0.3 to 0.4+ is a fairly significant change.

Next up in version 0.5.4, slated for a release late this year, is a further improvement to the sharing tools as well as some refinements to site headers and navigation. Stay tuned!

INN Member Website Review: October 2015

In the realm of nonprofit news, the websites of INN members represent the front end of our digital presence and impact. As the newest member of the Products and Technology team — aka the Nerds— I’m working to get acquainted with our members and a site review seemed a good way to start. It’s also a useful every so often to see what we’re collectively doing on the web as a benchmark for future progress.

My review this month of the 100+ INN Member websites shows a very healthy community. I found thousands of examples of insightful reporting, excellent storytelling, and engaging design. As with any sample of 100 websites there are bound to be things we might improve.

I’d like to suggest three priorities we could work on together over the next year:

  1. Responding to the Mobile Challenge
  2. Going Social
  3. What is good design?

Responding to the Mobile Challenge

In State of the News Media 2015, Pew Research Center reports that “39 of the top 50 digital news websites have more traffic...coming from mobile devices than from desktop computers.” Yet a significant number of nonprofit news sites that excel in every other way are not optimized for mobile.

Converting a non-responsive website to cross-device friendliness can be very challenging. The solution used to be providing a “mobile” version along with the “desktop” version of the site. But now with so many different types and sizes of devices and displays, the better practice is to publish a single site for all devices using the techniques of Responsive Web Design.

The speed with which mobile devices have become part of our daily lives is unprecedented in the history of technology. In 1995 there were 80 million mobile phones users worldwide. By 2014 the number of mobile phones reached 5.2 billion, including 2 billion smart phones. The number of smart phone users worldwide is projected to reach 4 billion by 2020.

The smart phone is changing the way people engage with media and each other. In a recent Zogby Analytics survey of millennials, 87 percent said “my smart phone never leaves my side.” 78 percent spend more than two hours a day using their smart phone and 68 percent prefer using their phone over a laptop or desktop computer.

But it’s not just younger demographics who are increasingly going mobile. Since 2008 time spent per day with digital media has more than doubled for all U.S. age groups. As highlighted by Mary Meeker in her Internet Trends 2015 report, almost all of this increase is from media consumption on smart phones.

The integration of smart phones with everyday life is rapidly changing the way people discover, consume, and share news. The urgency of addressing any mobile gap can’t be minimized.

Going Social

Social media have become increasingly important for discovery and sharing of content, with nearly half of digital news-consuming adults saying they use Facebook every week to get news about government and politics. But in some cases social media integration on news sites remains problematic, with bloated tracking scripts or missing Open Graph metadata needed for effective engagement.

I suspect many of us are concerned about the intrusiveness of the big social media players. It’s in their interest to make it easy to share our content on their platforms. This helps us reach new audiences and expand our news impact. But we also understand that their business model is predicated on harvesting as much personal information as possible about the people who visit our websites.

Many of the free widgets we embed on our sites make it easy for people to share our content, at the cost of exposing data about their interests and behavior. Social widgets can also slow website performance. The leading social media players and technologies keep changing. In this environment, developing best practices around social media is very challenging.

What is Good Design?

I’ve been a news professional for 28 years, and a web designer for the past 15. I think design without good content is wasted space. Good reporting on a flawed website can have great impact. But good design applied to great content can make a huge difference.

Ideas about what constitutes “good web design” have changed dramatically over the past decade, and will continue to evolve over the next. Fashions aside, we have learned fundamental lessons about what works for website users. We know people don’t like feeling lost or confused. They don’t enjoy struggling past obstacles to simply read a story.

Website designs can inflict many distractions on visitors in an effort to control their attention. Sometimes it’s important to get across (e.g.) the idea that our organization needs their support. But if we do this in a way that frustrates our users, we’re designing at cross purposes.

Each of us understands this from our own experience. We decide every moment whether to stay on a web page or direct our attention somewhere else. Something is always competing for our attention. As storytellers and designers, our job is to win that competition.

We can help our audiences by providing a distraction-free space to engage with our content. I like the phrase “radical clarity” as an aspiration for our websites, especially story pages. Mobile has forced us to rethink designs that present too much information for a small screen, and we need to carry that thinking over to larger displays as well.

Solving everything now

Building anything of enduring value almost always takes more time than you want it to. The corpus of INN Member websites represents a tremendous amount of work by their creators, and great value to their audiences. As a website builder I know that work is never done.

My hope is that a year from now we can repeat this review and see clear signs of progress, especially in the areas of mobile friendliness, social media optimization, and clarity of design. The INN Nerds will do what we can to help. And I'll be writing with more details and actions we can take to address these priorities in the coming weeks.

What You Don’t Know Can’t Hurt You…Unless You Don’t Ask

We were talking with a respected INN member during the Nerds’ open office hours last week. While asking a question about how to do something on his site, he said a couple of times that he doesn’t know much about website coding. But it struck me that he clearly does know a lot, he just didn’t know the answer to this particular question.

I have seen this behavior in many other people, and also in myself. When talking with people we believe know much more than us about a given topic, we sometimes minimize our knowledge up front.

I suspect we do this because we have learned from past experience that people sometimes use their status as experts to belittle us. This kind of behavior is common, especially in technical fields. Saying “I don’t know much” is a smart strategy if we suspect the expert will act like a jerk in response to our question. For many of us it's a defense reflex.

I can safely say that none of the INN Nerds will ever treat you this way. We welcome questions from all members and constituents from any level of technical knowledge, and it’s in our DNA to not act like jerks.

Not acting like a jerk is also hard-coded in the INN technology team manifesto, which outlines how and why we work. We hold ourselves accountable to this, and you should, too. Here are a few excerpts:

  • We’ll invest in education: creating curriculum and training for members, investing in our apprentices/students, and pursuing continuing education opportunities for ourselves.
  • We will be open to new tools and processes, resisting the stale comfort of “this is how we’ve always done it.”
  • We won't use snark or pedantry to exclude people from conversations.
  • We’ll never judge you or shame you for not knowing something.
  • We won’t feign surprise or jump into conversations with Well, actually...
  • In emergencies, we will send pie.

Because news technology is changing so rapidly, there are many reasons for each of us to feel we don’t know as much as we should. The pace of change is also precisely why we should ask many questions, even at the risk of exposing what we don’t know. Our guest during office hours did exactly that, and deserves to have his question (and his many other contributions as a professional) treated with respect. We will always do that.

When it comes to the web and digital technology, each of us is somewhere on the learning curve. The value of a community like the one we’ve got is that we can help each other gain the knowledge we need to improve and sustain our work. At a time like this, we should make extra efforts to communicate and collaborate.

So please use the Largo Help Desk for any site problems or requests, email us at nerds@inn.org for anything general, and sign up any time for open office hours. We’ll never shame you for not knowing something, and might even have some dumb questions ourselves.