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

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!

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

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

invw

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

mwe

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.
popular posts

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:

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!

Changes to Office Hours: New Opportunities For Code and Design Review

We've decided to make a few changes to our open office hours based on some feedback and requests we've gotten from our members and community.

It's been really exciting for us to help out with the projects that people bring to our office hours. But we've also heard from a number of folks at our member organizations, people who are often the only designer or developer on their team, that they don't have anyone to help review their code, give feedback on their design work, or have project retrospectives to look at recent projects and talk about what went well, what they might improve next time, etc.

So we've decided to hold our office hours more frequently and also to structure them in a way that will allow us to be better at giving this sort of feedback. This way, we'll be able to act as a resource and sounding board for these lone developers and designers while still preserving an opportunity for people to come and ask us more general questions.

Here's what we're going to try (starting in June):

  • Instead of doing a two hour block once a month, we'll now do an hour every week (on Friday from 2-3 ET).
  • Time slots will now be 20 minutes long (instead of 30), but we'd like to encourage people to sign up for more time (the full hour if necessary) if you think you'll need it and we'll try to accommodate. Generally we want to be able to dig a bit deeper and get into more complicated questions about your design or coding challenges and we know that sometimes that will take a bit more time.
  • Sign up as early as you can (preferably by Monday the week you want to attend) so we can get some more background on your project or questions, review your work and potentially ask some questions in advance to help us get the most out of our time together.
  • During unused slots we'll have code or design reviews for our own projects that you're more than welcome to participate in and help us make our work better. Hopefully seeing how we handle this sort of feedback internally will give you some ideas you can take back to your own organizations.

The office hours will still be held via Google Hangout (link), and they will still be completely open to the public by default – because we believe our community is strongest when we have a chance to learn from one another – but ask us if your project involves sensitive information that you may not want to share publicly.

The signup link also remains the same.

As always, if you have thoughts on ways we can better support your work, we'd love to hear them.

We hope you're able to join us in the coming weeks!

New Roles for Ryan Nagle, Ben Keith at INN Nerds

I'm excited to announce a couple of our team members have received promotions this week!

ryan_nagle_originalRyan Nagle, who joined us last May as our first news apps developer, will now be our Director of Technology. The change, effective immediately, reflects Ryan's increased responsibility in making technical decisions for the team, managing the roadmap for a number of our products, working more closely with our members and clients to help guide their decision-making, and all the work he's been doing to mentor our more junior team members and apprentices.

senior_photoBen Keith, who joined our team as a summer apprentice about a year ago, is now coming on as a full-time news apps developer. Ben has grown a lot over the last year and we're excited to continue investing in his growth and development while he takes on more responsibility for contributing to our products and to projects for our members and clients. Ben starts full-time with us next Monday.

Please join me in congratulating Ryan and Ben on their new roles!

Welcome David Ryan, Our Second Summer News Apps Apprentice

cqatMnsBThis week we're excited to welcome our second summer news apps apprentice, David Ryan, to the INN Nerds team.

David is a journalist and developer studying at The Cronkite School at Arizona State University. He's an avid news consumer passionate about design and technologies that enable creators and consumers.

Most recently David was the Engagement Editor and Front-End Developer for the 2014 News21 investigation into gun rights and regulations. As part of the team in the Public Insight Network bureau, David tested new methods of engagement around news topics, added major publishing partners for News21 and grew News21’s social media following.

Prior to News21, David was a summer intern with the Arizona Center for Investigative Reporting  assisting on a public safety investigation. He also built digital products and advised student startups in the Gannett New Media Innovation and Entrepreneurship Lab and lead a redesign and migration of Forrester Research's intranet.

Find David on Twitter at @dryanmedia or email him at david@inn.org.

We're excited to have David with us for the summer and we hope you'll join us in welcoming him!

Announcing Largo Version 0.5

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.

Welcome Our New Summer Apprentice: Dani Litovsky Alcalá!

perfilThis week we're really excited to welcome the first of our two summer apprentices, Dana "Dani" Litovsky Alcalá.

Dani will be starting an MS in Computational Analysis & Public Policy at the University of Chicago's Harris School of Public Policy starting Fall 2015. She holds a degree in International Political Economy from the University of Texas at Dallas.

At UT Dallas, Dani was involved in economics and political science research and was an avid community volunteer. She interned in Washington, DC at the Woodrow Wilson International Center for Scholars and spent a summer in Lima, Peru working for IDL-Reporteros, a team of investigative journalists.

Dani is passionate about data science, statistics and their application to public policy and journalism. After finishing college, she taught herself to program and worked on data analysis and design-development projects.

When she's not thinking about algorithms and statistical significance, Dani enjoys working as a Spanish-English translator for a publication in Peru, updating her blog, powerlifting and yoga, cooking, and eating sushi. You can connect with her on Twitter @DataDanaL.

At INN, she'll be working with us on integrating data projects with Largo as well as on our recently-announced news apps and data consulting work in partnership with member organizations.

I hope you'll join me in welcoming her to the team!

INN’s Tech Team Now Offers Data Consulting

We are happy to announce that INN's tech team will now offer data services as part of its consulting package for members and other journalists.

The growing tech team already offers technology consulting at highly discounted rates for members. The addition of data services means the team can now work on custom news apps from start (data cleaning and analysis) to finish (interactive apps). Stand-alone data cleaning and analysis services also are available.

We frequently hear from members who need freelance data work, either because their newsrooms don't have the resources or the time. Our goal is to provide a readily available option for those members who need help finding stories in their statewide traffic crash database, for example, or building a fully interactive and useful online map from that data.

To provide this consulting, I will work closely with Adam Schweigert and the rest of the tech team. As part of the organization's recently refocused mission, INN no longer will be facilitating editorial collaborations around common data sets. (Read more about INN's new mission statement and name here.)

I also remain on staff at IRE and will work with the NICAR Database Library team, which also has resources available to help with data analysis and cleaning. INN and IRE will collaborate to make sure the best resources are applied to each project.

Contact the tech team to discuss data services or any of your consulting needs. Or email me directly if you want to chat about any ideas.

How We Redesigned INN in 60 Days

inn_logo_blue_finalToday, INN announced that we have changed our name to the Institute for Nonprofit News (formerly Investigative News Network). This change reflects the organization’s refined mission and commitment to nonprofit journalism. You can read more about that in the official press release.

When we found out about the name change, it seemed like an ideal opportunity to refresh our visual identity and relaunch inn.org to reflect our updated mission and direction moving forward. The catch? We had a little less than two months to make it happen.

Here's a behind-the-scenes look at how we redesigned both inn.org and our visual identity during the last eight weeks.

Where we started

INN's focus has always been on providing services and support to our members. As such, our own web presence and branding hadn't really been a top priority.

Old INN home page

 

INN logo

When I joined INN as design director a few months ago, I wanted to take that opportunity to establish a stronger and more consistent visual identity — something that better reflected our commitment to forward-thinking journalism.

Planning and sketching

Our team met at INN headquarters in California to start hashing out goals for the project. We discussed design direction and everything we wanted INN's brand to represent. From these conversations, we put together the initial creative brief for the identity redesign (you can read the full creative brief on Google Docs).

Together, we also finalized the project summary for inn.org — a short guiding document that we write for all of our web projects. The summary identifies goals, features, stakeholders, timeline, and user profiles.

We decided that we wanted a bold and simplified visual identity, with a website to match. The former INN homepage was trying to do too much and made it hard for users to navigate. The INN brand was being applied inconsistently across our various properties and didn't evoke any sort of organizational personality.

With initial discovery and planning done, I jumped right into sketching.

sketches_tri

I  filled up dozens of pages in my sketchbook, working through potential themes and shapes, killing my darlings left and right.

image_3

I started playing with blocks and geometric elements (representing pieces of a whole, like INN's members). Around this time, I also reached out to a Minneapolis-based designer, Anthony Lane, to work with me on developing the logo and to help us put together all of the collateral pieces that go with rebranding (think business cards and swag). Tony's clean, bold style was a natural fit with the design direction I envisioned.

Wireframes and building

image

While we worked on getting closer to our new logotype and symbol, we also needed to start building out the architecture of the new site. Working with Adam, I put together wireframes and presented a prototype to our project stakeholders (we used InVision to do this presentation remotely, which worked quite well).

wireframe_home

(Feel free to browse all the wireframes.)

After incorporating excellent feedback from our CEO, Kevin Davis, we set to work on building the site. Adam used Largo to create the general framework and began developing the custom layouts.

As Adam dove into the code, I created some mockups and style tiles to point us in the right visual direction. Here's a glimpse of the mess I lived in as I worked on brand elements and web styles concurrently (one of many Sketch pages):

sketch_doc

Visual identity

Meanwhile, Tony and I had homed in on a direction for our logo and presented it to the team. Starting from the building blocks concept, Tony suggested pursuing a flexible system — a living logo and identity that would reflect our mission.

LogoCycle_Single_0309

Starting from a simple, three-block mark, we developed a full nine-mark system.

inn_logo_preso

We got the go-ahead to pursue this direction and started to finalize typography, symbols and the color system. If you're a designer, you know that this part of the process involved a lot of back and forth that would look like nonsensical minutiae to anyone with a bird's eye view.

For the logotype, we were down to the wire choosing between GT Walsheim and FF Mark. Both are highly geometric and modern without being kitschy. We wanted something that would have personality while also standing the test of time. FF Mark won out over Walsheim — it felt like the stronger typeface overall, was less cartoonish, and had great readability at all sizes.

fonts_compareThe color system was also close to final at this point, inspired by the bold simplicity of the logo mark. We chose bright, saturated colors that would read well in print materials and on the web.

Screen Shot 2015-03-09 at 7.20.21 PM

We encountered some issues with the vertical space of the original logo in horizontal situations (specifically the website's navigation) and adjusted the lockups. The resulting system feels more balanced and will end up being more flexible in the long run.

alllogos

 

With the colors and logo locked down, Tony and I started pulling together the guidelines for use (download the full PDF).

 

logotype

 

clearspace

Launch and what comes next

Throughout this, Adam, Ryan and I were working on refining the functionality and styles of the new inn.org. Laura took the lead on content strategy and revised almost every piece of copy throughout the site.

Screen Shot 2015-03-09 at 7.29.50 PM

The entire INN staff helped us edit, revise copy, test features, and QA the site to get it ready to launch today. It wouldn't have been possible without them.

Did we get to everything on our to-do lists? Not even close. But we're tackling this project like everything we do — iteratively, learning and refining as we go. We're looking forward to seeing how people respond and will use what we learn to adjust strategy over time.

Just for fun, you know I love a good before and after shot:

beforeafter

 

Many thanks to Tony Lane, the tech team and the entire INN staff for making this possible. I'd love to hear your thoughts or suggestions for our new site and visual identity. In the end, I think our new look exemplifies who we are aiming to be — bold, forward thinking, practical, and, above all, a community.

INN-Symbol-Reversed-6