Largo – Page 2 – INN Labs

Announcing Largo 0.5.4 – Improved Navigation And Social Sharing Tools

Posted on January 14, 2016January 15, 2016 by Jack Brighton

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!

INN Member Website Review: October 2015

Posted on October 27, 2015October 27, 2015 by Jack Brighton

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:

Responding to the Mobile Challenge
Going Social
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

Posted on October 4, 2015October 5, 2015 by Jack Brighton

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.

INN’s WordPress Framework For News Sites Now Fully Supports HTTPS

Posted on August 18, 2015August 18, 2015 by Ryan Nagle

We're pleased to announce the release of version 0.5.2 of our popular Largo WordPress framework for news sites.

With this update, Largo is now fully-compatible with https out of the box. Also included are some enhancements to managing featured media for your stories, some new footer layout options and a number of minor enhancements and bugfixes.

Full HTTPS Support

For many news sites, user privacy and security are significant concerns. With this release we wanted to ensure that sites using Largo would be able to use https out of the box. We're proud to say that this is now the case. Starting from a base installation of Largo you should not have any issues enabling https for your entire site.

WordPress has a guide explaining how to do that, but the details will vary depending on the hosting company you use.

A couple of caveats:

If you are migrating to Largo from a different WordPress theme or even updating Largo from a previous version and enable https, you may find that you have http links hard-coded into the body of your stories or elsewhere in your site settings. To get rid of potential mixed content warnings you would need to perform a search and replace to change these URLs to https. We use and recommend this tool, but please be sure to backup your site before doing anything potentially destructive.
If you have done any custom work in a child theme using Largo as your parent theme, you may also need to review the code in your child theme to make sure it also fully supports https.
If you install third-party plugins or insert/embed content from other sites or services (ad networks, embedded media, etc.) you will need to ensure that those plugins/sites/services support delivery via https or you may also run into mixed content warnings, missing ads or other issues. This is sometimes a major tripping point for sites switching to https, so just be aware that a significant amount or work and testing may be required depending on the number and type of third-party services you're using on your site.

If you are an INN member using our hosted version of Largo and would like to enable https for your site, let us know and we'll explain how the process works, the cost involved, etc. and help you get switched over.

Enhancements to the "Featured Media" editor

In Largo 0.5 we introduced the ability to use a video, slideshow or other embedded media in the place of a featured image for each story. With Largo 0.5.2, we have added a number of enhancements to this functionality to make it work better in a number of additional contexts, including:

The ability to set a thumbnail for embed and video featured media types to be used on the homepage, category pages, widgets or anywhere else a thumbnail/featured image might appear
The video featured media editor will attempt to automatically pull a thumbnail from any available oEmbed provider (YouTube, Vimeo, etc.) but still give authors the ability to upload their own thumbnail images if they would prefer
For theme developers, we have also added "featured-media" and "featured-media-{type}" classes to story containers for use in customizing the appearance of different types of featured media via CSS (adding overlays, icons, etc. to call out posts containing video, slideshows or other rich media)

New footer layout options

In working on a few recent client projects (Nonprofit Quarterly, Midwest Energy News and the redesign of our own site) we've developed a couple of new layout options for the footer of Largo sites, specifically:

A 4-column asymmetrical layout, with three narrow columns and one wide column, well suited for three menu areas and a donation, subscription or newsletter signup banner or widget.
A minimal 1-column centered layout, well-suited for sites who want a simpler, more minimal footer limited to simple navigation instead of having more widget areas to populate and manage.
For theme developers, an easier way to register and use a custom footer layout.

And of course a number of other bugfixes and enhancements.

We encourage you to download the new version and update your sites at your earliest convenience. If you host your site with us, we're making this update for you today. If you host your site elsewhere, you can download the new version from GitHub.

If you have questions or need assistance please check out the release notes and documentation first and if you're still stuck, open a ticket through the Largo help desk.

What's next?

Over the next couple of months we'll be working fast and furious on polishing a number of existing features gearing up for our next full point release, version 0.6 (currently slated for late October). Look for a new release almost every week in between now and then and if you're interested in following along or contributing to the project, you can check out the upcoming milestones on GitHub.

Largo 0.5.1 released!

Posted on July 30, 2015 by Ryan Nagle

On July 16, we tagged Largo v0.5.1 with another slew of bug fixes and updates.

Amongst the bug fixes and enhancements:

Google Custom Search results are now displayed on the standard WordPress search results page and are compatible with the standard WordPress search results conventions including the /search/search%20term and /?s=search%20term url structures.

We've also added a menu to the WordPress Admin Bar with several useful Largo-related links.

Further, we fixed a nasty bug/oversight which resulted in the optional "donate" button not displaying on smaller screens. The donate link we're referring to shows up in the site's sticky navigation.

On the documentation front, we merged a ton of developer documentation that came about as a result of our participation in the OpenNews Code Convening in Portland The developer docs now include:

Revised technical notes
Instructions for setting up a development environment (based on the development rig we use at INN)
Details for working with Largo to create Child Themes
A first pass at Largo API documentation

A special note on a breaking change -- if you redefined largo_load_more_posts in your child theme, you will need to update it with code from this release, as the old logic will fail to load the correct posts.

That said, the "Load more posts" button can now be used multiple times per page and no longer relies on the global $wp_query. Further, you can customize the text of the button by using the largo_next_posts_link filter.

Read the complete release notes and download the version here.

Three INN Members Launch New Websites Powered By Largo

Posted on July 13, 2015July 13, 2015 by Adam Schweigert

Over the last couple of weeks three INN members who we've worked with over the past few months have launched new websites using our Largo WordPress framework.

In addition to some common requests like making their sites mobile friendly and responsive, we worked with each of the three organizations on some custom design and functionality and built a couple of new open source tools for you to use.

Investigate West

Investigate West wanted to make their homepage more of a branding statement featuring their partners, awards they've won and the impact of their work. In addition to building a new homepage grid, we worked with them to add credits for partner organizations to their projects and stories and also created a way for them to show which of their major projects had received awards.

Midwest Energy News

Midwest Energy News asked us to help them increase recirculation of visitors through the site and also to increase subscribers to their two newsletter products. The resulting redesign features a number of new design elements we're prototyping for future versions of Largo including a number of changes to article pages as well as some new homepage layout options.

We also made it easy for Midwest Energy News to insert newsletter signup boxes almost anywhere on the site and created a new plugin (a revamped version of an older plugin called Argo Links) to streamline the curation of links, creation of link roundups and allow them to push roundup posts directly to MailChimp.

Nonprofit Quarterly

Nonprofit Quarterly migrated to WordPress from Joomla and wanted to make their site better for mobile visitors. In addition, they wanted to be able to feature popular stories in a number of places on the site. We've never been particularly impressed with the various popular posts plugins that exist for WordPress, so apprentice developer Will Haynes wrote a new plugin that pulls data from Google Analytics and algorithmically determines popular posts in a much more accurate and performative way.

Open Source

As with all of our projects, the code we wrote for these projects is open source and you're welcome to borrow bits and pieces to use in your projects.

All three child themes rely on the current version of Largo as their parent theme (here's more on WordPress child themes if you're just getting started).

You can find the child theme code here:

And the two plugins we referenced:

Link Roundups
Analytic Bridge (popular posts)

Work With Us

If you'd like to work with us on an upcoming project we are accepting new clients and would love to talk with you.

We offer substantial discounts on our services to INN member organizations and other nonprofit organizations but you do not have to be a member to work with us.

To discuss hiring us for an upcoming project, just email nerds@inn.org with a short description, anticipated timeline and budget and we'll be in touch!

Announcing Largo Version 0.5

Posted on May 4, 2015 by Ryan Nagle

Announcing the version 0.5 release of Largo, everyone's favorite responsive WordPress theme for news sites!

Where v0.4 was dedicated to a major overhaul of user-facing features and touching nearly all corners of the project, v0.5 brings a handful of new features for developers as well as some much-needed project cleanup, additional documentation and a few performance enhancements.

For this release, we audited the use of third-party PHP and javascript libraries throughout the project. Wherever possible, we updated third-party libraries to their most recent release or found suitable, well-maintained replacements.

We've also started an initiative — which will carry on through subsequent releases — to evaluate Largo's performance. No one wants a slow site, so we're doing what we can to cut down on wasteful resource usage. In this release, we've started using minified CSS and Javascript and refactored code to make less expensive database queries.

The shortlist of features added in this release:

LESS source maps in all unminified CSS, to help in debugging styles while developing for Largo.
Updated slideshows to use slick instead of slidejs since it is no longer maintained.
Polished the styles for the Largo recent posts widget
Added a LARGO_DEBUG constant, which is currently used to determine whether or not to include unminified, uncompressed Javascript and CSS. When developing your Largo site, use:
```
define('LARGO_DEBUG', true);
```
When pushing your site live, use:
```
define('LARGO_DEBUG', false);
```
Updated all "Investigative News Network" references to "Institute for Nonprofit News" after INN's recent rebranding
Moved the "member of INN" badge to the footer and improved the styling of the social media icons in the footer
Use the single column layout for single post pages by default

For more information and a complete list of new features and bugfixes in this release, see the release notes on Github.

Announcing Largo Version 0.4

Posted on January 27, 2015January 27, 2015 by Adam Schweigert

We're excited to announce a new version of Largo, the open source WordPress framework we build and maintain for our member organizations.

Version 0.4 is a huge update that's been in the works for a while. In this release, we've more or less rebuilt the Largo theme from the ground up to make it more stable and easier to use. Here's a list of some of the things included in this update:

Probably the most visible change is the addition of a number of new homepage layouts, which are much more visual and "magazine-like" to really highlight the feature reporting that many of our members are doing. We've also retained and polished up the previous homepage layouts (with the exception of the "carousel" layout, which is deprecated in version 0.4) and have added a new homepage framework to make it much easier to create your own custom homepage layouts from a child theme. Many of the new layouts also allow a user to switch between viewing "top stories" and "all recent stories" in a traditional "river" view, remembering their preference on subsequent visits.

We've also completely redesigned the article template to allow for more easy creation of immersive stories. The new default article template in Largo removes the sidebar to reduce distraction and adds a new featured media area at the top of the story with support for a large "hero" image, video or other embedded content (maps, audio, etc.). If you prefer the traditional two-column layout on story pages, we've kept that, too. You can simply select the template you'd like to use in the theme options and will have the option to override it on select stories. These improvements also include streamlining the publishing interface to make it easy to add and manage featured media by reducing the number of boxes you have to search through to find what you're looking for.

The bottom of the article page template is now a WordPress widget area to make it easier to rearrange the elements that appear there. This includes the addition of a number of new widgets for related content, author bios, and an optional disclaimer that you can easily add to the bottom of all your stories, or selectively override on a per-story basis.

Site navigation is also cleaner, easier to manage and more mobile friendly, including an option to use a "sticky" header that remains visible when a user scrolls. Article pages now also have a sticky footer with social sharing links, the ability to easily follow authors and topics, and more.

And we've replaced the clunky older/newer posts navigation used on many pages of the site with a simpler "load more posts" infinite scroll.

Category pages have been redesigned to give more prominence to featured stories and it is now possible to create and use custom sidebars on category and tag pages. In addition, we've added a new optional "content type" taxonomy to allow you to group stories by type. For example, if you'd like to have a page for just your data projects without having to use categories or tags, now you can!

User profiles are also now easier to manage with the option to upload avatar photos directly in WordPress instead of relying on Gravatar and with better validation for social media accounts to make sure your accounts get linked up correctly. We've also added a new widget to display a list of the writers and editors on your site with their avatar photos, titles, bios, etc.

On the admin side, we've tried to simplify wherever possible and have moved less-frequently used settings to an optional tab of the theme options to keep them easily available but out of the way. This includes things like optional taxonomies and a number of new integrations with services such as Google Custom Search that you can use to enhance the functionality of your site. One additional option allows you to easily change the color scheme of your site using a LESS/CSS customizer directly from the admin without having to edit your theme files directly.

For developers, we've reorganized the theme files in a way that we hope will make it a lot easier to develop child themes based on Largo. You'll also notice that we've begun to add unit tests for the theme, helper functions for debugging, and more hooks, filters and constants to make it easier to add, remove or modify various pieces of Largo functionality. We also have an updated sample child theme that includes ample documentation and recommended best practices for working with Largo. We welcome your feedback if there's anything else we can do to make your lives easier.

And last but not least, we've completely revamped the Largo documentation, added a knowledge base with answers to our most frequently asked questions and implemented a new help desk system to better keep tabs on your questions for us.

Oh right, and the ubiquitous "assorted bug fixes."

Updating to the new version is as simple as downloading the new theme (zip) and replacing your existing copy of the Largo parent theme. Then, when you login to your site for the first time, you'll be prompted to apply a database update to make sure all of your settings are preserved. As this is a major update, we strongly recommend creating a backup of your site before making the update and, ideally, testing the new version on a staging site to make sure you have a handle on the changes before applying it to your live site. Just a reminder that if you require more assistance making this update, we offer paid services and we'd be happy to help. Details on that program can be found here.

For INN members who host their sites with us, this update is available today but we'd like to spend some time working with you to walk through the new features. Please drop us a line at support@largoproject.org if you'd like to be among the first sites to make the update, otherwise we'll be reaching out to you in the coming weeks to schedule these consultations.

Thanks to every member of the INN Nerds team who worked on this release, particularly Ryan Nagle, who took lead on this one, but also to Meredith Melragon who did a lot of the work improving our documentation, Kaeti Hinck who jumped in late in the cycle to help us polish the visual design, and our software apprentices Ben Keith and Will Haynes who both contributed a lot of code to this release. Thanks also to a couple of open source contributors, particularly Ben Byrne and Daniel Bachhuber.

The next release! 0.5 will be focused on improving performance, developer documentation and evaluating third-party libraries, as well as some continued improvements to the design of the default theme. It is scheduled for release at the end of March. We're now keeping the Largo roadmap public on GitHub, so you can see more of what's planned for future releases.

Quiz Your Readers: Our New WordPress Plugin To Create Simple Quizzes

Posted on October 14, 2014May 27, 2016 by Will Haynes

Today we're excited to announce a new embeddable interactive quiz tool built using Mother Jones' handy quiz tool but adapted specifically for the Largo platform and available now for any WordPress site.

[quiz key="0AvfAWkLLRik_dGtjRVNUamJwbE1wRWxtVVRURG1UU0E" layout="sidebar" answerstyle="alpha" align="alignright" title="Take the Quiz!" description="Think you've got what it takes?" source="Wikipedia" byline="Will Haynes/INN"]

Built on top of Mother Jones’ NewsQuiz.js library, this WordPress plugin allows you to build a quiz in Google Drive and embed it with a shortcode into a WordPress post. This could be used to test readers’ understanding of material, or just to expose them to the questions in an interactive way.

Grading of questions happens inline, at the bottom of the widget. Settings exist to control both the size and flow of the plugin, as documented in the project readme.

Try out the example quiz embedded in this post, or check out how INN member Youth Today is using it to support a piece exploring how the income gap affects scoring on college entrance exams.

To see how to build a quiz of your own using this plugin, how to format your Google spreadsheet, etc. please see Mother Jones’ documentation for the original quiz library.

We’re hoping to build more interactive features for Largo in the future.

So if you have an idea for what we should build next or suggestions for how to improve this tool, let us know in the comments or email us anytime at nerds@inn.org.

Category: Largo