Workday Minnesota began publishing in 2000 with support from Minnesota’s labor community and was the first online labor news publication in the United States. Since then, Workday has won many awards and has grown to be a trusted source for news about workers, the economy, worker organizations, and Minnesota communities. It is a project of the Labor Education Service at the University of Minnesota.
This summer, INN Labs teamed up with Workday Minnesota’s editor, Filiberto Nolasco Gomez, and webmaster John See to migrate their outdated Drupal site to the Largo WordPress framework and redesign their brand.
Our goals for this project were to:
give Workday Minnestoa a streamlined and modern look and feel
improve site performance for readers and usability on the back-end for editors
enhance the design and improve engagement for Workday’s long-form investigative pieces
empower the Workday team to easily manage and update their WordPress site after launch
Some of our design inspiration came from INN Members with bold, modern designs (such as The Marshall Project, The Intercept and Reveal News) and some from outside of our industry, like nowness.com. We wanted clean, bold headlines, a thoughtful type hierarchy, and a way for photos to take center stage.
“We focused on what it would take to rebuild Workday to be responsive to our readers and enhance investigative reporting. The new website will allow us to display long-form and investigative journalism in a more attractive and readable interface. This version of Workday will also allow us to effectively use multimedia segments to make what can sometimes be dense material more approachable.”
The INN Labs team is excited for this new phase of Workday Minnesota and thankful for the opportunity to help bring it to life.
Out with the old, in with the new
We created a custom homepage layout that showcases Workday’s latest content with a clean and modern look.
Benefits of this custom homepage are big visuals for larger screens and ease of navigation on smaller screens. Workday editors have room for both curated news from around the web (using the Link Roundups plugin) and their most recently published articles.
A sleek and modern article layout
Article pages continue the sleek, clean design approach. We left out ads and ineffective sidebars in order to prioritize long reads with custom-designed pull quotes and large, responsively embedded photos and videos. Behind the scenes, our Largo framework works with the new WordPress Gutenberg editor to add essential editing tools for media organizations.
But wait – there’s more!
We couldn’t stop with just a website redesign without also giving attention to the heart of the brand – the logo. The redesigned logo builds off of the modern, new typefaces for the website and its bold use of the Minnesota state outline (Filiberto’s idea!) is great for lasting brand recognition. In the process of creating the logo, we also incorporated a new tagline that succinctly expresses the mission of Workday Minnesota: “Holding the powerful accountable through the perspective of workers.” The new logo is now being used on the website and across Workday’s social media channels.
Questions? Get in touch.
Have a question for our team or need help with WordPress design and/or development? Check out INN Labs full services here, join us for one of our weekly Office Hours, or get in touch!
We're happy to relay the news that INN Member Eye on Ohio won First Place Magazine Website in the Press Club of Cleveland's annual All-Ohio Excellence in Journalism Awards. We thank the Club and the judges for their consideration and congratulate Eye on Ohio for their success.
Eye on Ohio is built using INN Labs' Largo WordPress theme, which is the fruit of many years' work by contributors at INN, at NPR, and from the greater WordPress community. Eye on Ohio executive director listed Labs' lead developer, Ben Keith, as the second contact on the awards for his contributions as an INN Labs employee in Ohio.
Beyond Ben, contributors to Largo include past and present INN staff, folks at NPR's former Project Argo, and community contributors from across the web. We've got a full list in Largo's README over on GitHub.
WordPress 5.0 and the Gutenberg editor present a perfect opportunity to incorporate new best practices from the WordPress industry in our work. With a more streamlined end-user experience, individual organizations will be empowered to truly make their Largo sites their own. But we're also invested in making the developer experience easier.
Over the past few months, we've been soliciting feedback about Largo from members and the broader journalism-tech community – how they use it, what they like about, and, most importantly, what we can do to make it better. Continue reading "Reimagining Largo"→
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.
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.
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.
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!
Please note: The following article contains outdated information has since been updated. Please use the up-to-date guide here.
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)
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.
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:
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".
Then, in the Settings area for this form, create three Stripe feeds, matching the donation types.
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.
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.
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!
We're happy to announce that we are rolling out new improvements for how we provide Largo support. These changes aim to streamline the process of submitting support tickets and to make our comprehensive support documents easier to find and use. Continue reading "Improvements to our Support Process"→
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:
and After:
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:
You're able to display your photos in a grid view (with the ability to click to view them as a full-screen slideshow):
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:
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:
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).
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.
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!
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.
The preferred process if you need assistance with your site is as follows:
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).
Site administrators or developers may want to also consult the Largo documentation and editors and authors might want to reference our Largo users guide.
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.
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.