Global News Q&A: The Technology Behind Their Responsive Redesign

news_2xGlobalNews.ca is the online news hub for the Global Television Network, a large Canadian broadcasting network with 12 owned-and-operated stations across the country. In March this year, they launched a massive redesign of their site, built on WordPress by 10up and hosted by WordPress.com VIP. The new site consolidated their many local and national sites into one responsively designed site that displays relevant content based on a user’s location. We chatted with Keith Robinson, the manager of digital products at Global News, to learn more about the vision and technology behind this redesign.

What was your team trying to achieve with the GlobalNews.ca redesign?

We were trying to create a news experience that would work really well across any device. We’ve all seen the tremendous growth in mobile and tablets, and we ultimately felt for news consumers that the best thing to do would be a responsive design that works well on any device.

For the homepage, rather than a traditional news site model, we wanted more of a social media experience. We learned that what consumers want is to choose a story that interests them – that they want to browse through a list of stories to choose from rather than a landing page that gives you a few headlines. It’s less of a curated experience, and more of a stream of news. It’s an experience that lets the user choose.

We recognize that there are multiple possible entry points to the site beyond the homepage. So our redesign was motivated by the notions that every story is ongoing, every beat is a site and every author is a brand. Readers are more likely to arrive through search or a shared link, and so they are almost always landing on a story page. For that reason, we emphasized the story page where there’s a lot of related content, features and a carousel. We included a lot of elements to keep you on the site.

We were also looking to simplify our branding. We had a series of local sites and national sites, and we wanted to bring those together into one GlobalNews.ca experience that detects where you are in the country and gives you a blend of national and local news that’s personalized to your region.

How does the site display content specific to a user’s region?

We have 12 stations across Canada, so we divided Canada up into 12 different regions and users get localized to one of them when they arrive on the site. This is based on IP detection, and it’s about 95 percent accurate. For anyone that arrives on the site, it seamlessly checks the region in the background, cookies it and localizes the site to correspond with one of our broadcast centers.

Screen Shot 2013-04-12 at 11.06.53 AM

On our site, there are two tabs, local and national. On the local tab, your region will be weighted more with local news, and on the national tab, you will primarily get national news, with your local elements mixed in. On our weather pages, you’ll get weather localized to you, and on our programs page, you’ll get the programs nearest to you.

There are also several places on the site to change your region, so if you don’t want news in Toronto, it takes a couple seconds to change that, and the next time the user returns, the site will have stored their preferences. The stories are localized using a taxonomy, so when a story is filed, the writer checks off a box saying what region it belongs to. It then puts the story into that localized stream on the site.

How do your editors curate content on GlobalNews.ca?

Having a very simple workflow was important to us. When you’re a news organization, minutes and seconds matter. When Margaret Thatcher dies, you want that story up on your homepage as fast as you possibly can because that’s what your audience deserves. So, we tried to keep the content management system of the site as fast, simple and straightforward as possible so that the editorial staff can focus on making great content and getting up quickly.

10up helped us come up with a curation system that powers a lot of the site: the navigation, carousel, featured story, top story. It’s all one system that gives different choices depending on what zone you’re curating, so it’s not like you need to learn one way to manage content in the carousel and another way to manage content in the right rail.

Also, often times, an article headline is written one way, but the featured title needs to be be shorter and punchier, or the featured picture needs to be changed. The curation tool lets us do that.

Can you tell us about how you integrated video into the redesign?

Our heritage is as a broadcast organization, and we have hundreds of videos produced in-house every day. The purpose of the “Watch” tab is that it takes you to the video center and you can sift through by program or topic area. You can also share the content on social media, and it’s essentially as easy as YouTube to embed the video on your site.

The other reality we’ve found is that as much as you have that broadcast console video experience, the most popular way for people to consume video is on the story page. It’s having that in-context video with the story around it. So we’ve focused on working on videos within story pages.

How long did the redesign process take? 

The concept for the redesign came about in September 2011, and the development work started last year. One of the complexities is that we were doing a complete redesign from the ground up — there was not a single comment element to the old site. And, we were going to a new content management system. So with a brand new backend and frontend, with something that impacts hundreds of people in a larger organization across the country, it makes for a fairly complicated project.

The site design was done by Upstatement, and much of the frontend template work was executed by Filament Group. We engaged with 10up in the fall to do the WordPress integration, and then we’ve hired our own development team. We were very fortunate to hire some really top talent to work with us, and we’ve been working with really good partners.

What was it like working with WordPress.com VIP and 10up?

One of the things that makes WordPress powerful is that it is open source and has many plugins, but when you have a project with this much riding on it, and you need a professional product that performs, you want to be cautious. Fairly early on, we knew that we wanted to go with VIP. We wanted that level of support, having people understand how to make WordPress a secure and high performance environment – there was real value there.

The Featured Partner program made selecting a development agency really easy — there was a short list of companies that were already acknowledged as preferred partners, and from there 10up ultimately looked to be the best fit for this project. 10up brought a lot in terms of being able to listen to our needs and turn it into a functional site. They were great for us because we were at a stage where we needed things done very quickly and needed to discuss exactly what we were looking to do and how we were looking to do it – they helped us go from the discovery process to the implementation. Ultimately, getting to that March deadline for us was not easy for any company, but we really benefited from the partnership and they were good to work with.

Screen Shot 2013-04-12 at 6.35.09 PM

How has the site redesign changed your newsroom? 

There are some pretty big philosophical and workflow changes. Beforehand, people were spending a lot of time building a page and putting links onto it and massaging it. Now there’s a shift to focus on the creating content as opposed to the administration of the content.

By choosing WordPress as a CMS, and moving to a system that is simpler, we’re hoping to increase the number of people in the organization who are empowered to create and publish content online. We are a large broadcast organization, with newsrooms in 12 locations and journalists in every big market in the country. We have broadcast journalists that are now not only thinking about the evening newscasts, but also publishing news as it is happening. With WordPress, we have something fairly simple for people who it’s not their full time job to publish content, to easily publish online.

Over the weeks and months, we really want to try to create a platform that all of our journalists can use to get the news out quickly and easily when it breaks.

VIP Developer Workshop 2013 – Waiting List now open!

The WordPress.com VIP Workshop class of 2012.

The WordPress.com VIP Workshop class of 2012.

Response to the VIP Intensive Developer Workshop has been great, and we’re really excited to welcome such a varied and interesting crowd in May!

We’ve closed down registration for this exclusive event! If you’re still interested in attending, you can sign up for the waiting list here. We can’t guarantee we’ll add more capacity but if a spot does open up you’ll be the first in line!

As always, send us your questions and comments if you have any by commenting below.

Couldn’t make it this time? Don’t worry, we offer developer training, superuser training, user training, and editorial training year-round for VIP clients! 

Featured Partner Demo: Tout – April 18th

Screen Shot 2013-04-11 at 6.20.43 PMWordPress.com VIP Featured Partner Tout, a real-time information network for up-to-the-minute video updates across news, sports, politics, entertainment, is going to hold a free 30-minute demo for VIP clients and partners to discover how to use this popular network with WordPress.

Capture Touts on your smartphone and publish real-time 15-second videos to your website, app, social network or Tout.com.

The demo will take place on Thursday, April 18th, at 9am PDTFind out what time the demo is in your time zone.

To sign up for the free 30-minute demo, brought to you by WordPress.com VIP and Tout, just RSVP here and insert your email address. You will receive a reminder for the demo and details on how to connect to the demo.

Here’s what you’ll learn about Tout:

  1. What is Tout
  2. How to embed a Tout widget on a WordPress site
  3. Tout’s Premium Partnership Services
  4. Q&A

Check out their popular Tout channels, which include The Wall Street Journal, USA Today, ESPN, and the BBC, to see how other enterprise sites are using Tout.

RSVP for the Tout demo!

New Editorial Features in WordPress 3.6

We’ve been posting about the development of WordPress 3.6 over the past few months, and while the target launch is coming up later this month, many of these features are already available to WordPress.com users. Here’s a quick overview of the new editorial features.

Post Locking

Working in a multi-author environment? Post Locking lets you see at a glance who’s editing a post, and prevents authors from overwriting each other.

See Who Is Editing What Post
If you navigate to All Posts in your dashboard, you will be able to see who is editing what post.

Screen Shot 2013-04-09 at 11.53.12 AM

Prevent Editors from Overwriting Each Other
If you click on a post that another editor is working on, you will have three options to choose from: Go backPreview, and Take over.

Screen Shot 2013-04-09 at 12.02.00 PM

Know If Someone Else Is In Your Post
If you are working on a post and someone takes over, this screen will prevent you from continuing to work on the post.

Screen Shot 2013-04-09 at 9.08.14 AM


Log Out Notification

If for some reason you are logged out of WordPress while still in the dashboard (or editing a post), a pop-up notification will appear and allow you to log in right on the page, so that you won’t lose any work. Once you’ve logged back in, the pop-up will disappear and you will be right back where you left off.

Screen Shot 2013-04-10 at 12.44.54 PM


Better Autosave

The newly revamped Autosave takes advantage of your web browser’s storage to ensure that you never lose your work again, despite a wonky internet connection. If you are editing a post and suddenly get disconnected from the internet, you won’t lose your work. When you get reconnected, you’ll be able to restore the backup and the browser-stored content will simply pop up into your text editor.

Screen Shot 2013-04-09 at 12.14.46 PM


Revised Revisions

WordPress 3.6 gives revisions an update, making it easy to scan through previous revisions and see edits or updates.

Avatars with Revisions
See at a quick glance on your “Edit Post” page who has previously edited a post.
Screen Shot 2013-04-09 at 12.30.41 PM

See Changes Easily
The new revisions page includes a slider that lets you move forward or backward through revisions, and colors additions in green and deletions in red.

Screen Shot 2013-04-09 at 12.32.52 PM

Compare Revisions
The “Compare Revisions” tool allows you to drag the slider to two different revisions and compare the differences.

Screen Shot 2013-04-09 at 12.39.14 PM


New Look for Post Formats

Note: This feature is still in development. Post Formats got an updated look, which allows you to quickly toggle between different formats (i.e. quote, video, image) using a new bar at the top of “Edit Post.”

To switch to a different post format, simply click the icon at the top.


Manage Menus with Ease

If your theme supports Custom Menus, the interface to create anad manage these menus has been updated. Now, “Edit Menus” and “Manage Locations” are split into separate tabs. Step-by-step instructions on how to use Custom Menus can be found here.

menus-edit-menu-screenmenus-menu-locations 

Want more? To see the many updates that went into 3.6, follow the open-source WordPress development here.

Interested in learning more about WordPress.com VIP Cloud HostingGet in touch.

Showcase: Responsive Sites on WordPress.com VIP

Over the last 12 months here at WordPress.com VIP, we’ve seen a lot of innovative, smart redesigns from our clients. The majority of them have chosen to make their sites responsive, meaning that the site and content scales dynamically for desktop, mobile or tablet.

Today we thought we’d showcase some of these examples. Many of these sites are industry-leaders – being either the first responsive news site in their country, or in the case of TIME.com, the first global news site with a fully responsive design. Take a quick browse through this list. We’re very impressed – we hope you are too.

Global News | Built by our Featured Partner 10up

“The new GlobalNews.ca has been completely reinvented to maximize the user experience and make it as easy and intuitive as possible. Central to this philosophy is its use of responsive design technology, which will automatically scale GlobalNews.ca content to fit any screen size or resolution, creating a seamless experience on all browsers and platforms; be it PC, tablet or smartphone.” Read more.

GigaOM

“Our site — and the content on it — now adapts to whatever device you’re reading. The first phase of our site redesign, which went live today, also includes more curation, easier sharing and a crisper display.” Read more.

TIME.com

“On Monday, Oct. 22, TIME.com was the first global news site to roll out a fully responsive redesign optimized for mobile and tablet browsing. … Created by TIME.com design director Davina Anthony with input from the magazine’s design staff, the new look showcases the depth and breadth of their content, with more than 100 new articles, blog posts and photos produced each day.” Read more.

Metro (United Kingdom)

“We’ve unashamedly built this from a mobile-first point of view, sure in the knowledge that mobile users are making up an increasing proportion of our visitors – and will soon be in the majority. … With a flick of your finger you can now swipe or click through the top stories at that time, whether that be stories Metro’s editors think are important or those our users have shown they enjoy by liking, tweeting or reading. And this edition will keep changing throughout the day.” Read more.

Quartz

“Quartz is a website optimized for mobile phones and tablets. And as an HTML5 web app, it works seamlessly across a range of devices, from smartphones to desktop computers. It does not need to be downloaded from an app store and can be accessed simply by going to qz.com. … Quartz is free and built for social distribution: there are no pay walls, registration walls, or app store walls. The site’s radically simple, responsive design helps readers get essential information as quickly as possible.” Read more.

Variety

“The new website addresses years of requests from readers, with a site that’s easy to navigate and automatically configures material to platforms of various sizes and shapes, from large monitors to tablets to mobile devices. … Among the new features: An adaptive design for desktop, tablets and mobile phones; An expandable navigation bar that previews essential content from each site section; A new Video channel featuring news, events, trailers and interviews.” Read more.

The Dish | Built by our Featured Partner 10up

“The Daily Dish was founded in the summer of 2000 by Andrew Sullivan as one of the very first political blogs. … It has a readership of around 1.2 million unique visitors with an average of around 8 million pageviews a month from around the world. The Dish covers anything Andrew, the Dish team or the Dish readership finds interesting – from politics to religion and pop culture and art and film and poetry and philosophy and web humor.” Read more.

Metro (Canada)

“If you’re reading this on a mobile or tablet device, you’ve already noticed that metronews.ca is (we believe) the first national news site in Canada to employ a fully responsive design, meaning that no matter what size screen you view this page on, everything should be formatted nicely and properly.” Read more.

PandoDaily

“We’ve always had two goals we hold above anything else: respecting the readers’ time and respecting the readers’ intelligence. We do the latter with our original, frequently long-form journalism. We do the former with the PandoTicker. … We’ve made the ticker more app-like and dynamic in this version. It constantly updates and “new” flags call out when something is breaking.” Read more.

Black America Web | Built by our Featured Partner Oomph

“BlackAmericaWeb.com, launched in June 2001, is a broad-based effort to become a timely and credible source for news and information covering all aspects of daily life, featuring a wide array of viewpoints and perspectives.” Read more.

The Windsor Star

“The site was designed to make it easy for you to find the content you want. Our search bar scrolls down the page and our menu lets you search for stories based on topics — the courts, TrafficWatch, city hall — or geography. … Above all, the website was designed for our readers, who have told us they value local content above all and who have grown accustomed to reading breaking news on our website and coming back as those stories are updated and enhanced throughout the day. I stone cold love the new look and feel and I hope you will too.” Read more.

Skype Blogs | Built by our Featured Partner HumanMade

The Skype Blogs feature company updates such as new releases, feature updates, product education, and innovative use cases.

Ready to become a VIP Services Client? Some of the world’s biggest brands rely on WordPress.com VIP Services.

100,000 Commits on WordPress.com VIP

Last week, a developer at Time Inc. made a milestone commit on WordPress.com VIPr100000!

Our WordPress.com VIP clients commit and deploy code daily, and often development teams will commit several times a day to keep up with their changing site features and improvements. We do several checks on code optimization and security before approving a commit for deployment, and we’re really proud to get 90% of commits deployed within two hours of submission. We also unveiled automatic deploys for static CSS and images last year, which has made deploying instantaneous for thousands of client code commits.

It took roughly 75,000 deploys to help reach this milestone commit. We began tracking deploys in March 2011, and as you can see in the chart below, we doubled the number of deploys from 2011 to 2012, and are on track to do so again this year.

Screen Shot 2013-04-01 at 10.13.54 PM

And, for those who are interested, here’s a peek at commit activity over the course of a week at WordPress.com VIP (times in GMT):

Screen Shot 2013-04-01 at 10.20.39 PM

While we’re looking at commit data, here’s a quick nod to the top five committers from the last 365 days: I.N. from Global News (942), C.B. from GigaOM (791), F.I. from Dawn Media (784), V.K. from COED Media Group (652) and E.G. from CBS Local (605).

And finally, here’s a peek at deploys from WordPress.com VIP over the last 3 years.

Screen Shot 2013-04-01 at 10.13.44 PM

Interested in learning more about WordPress.com VIP Cloud HostingGet in touch.

Recent Launches on VIP: Global News, TIME 100, Wired TV

We’ve had a lot of fantastic sites debut on WordPress.com VIP lately. Here’s a quick look at some of our latest launches. Welcome to the WordPress family!

Screen Shot 2013-03-29 at 12.43.46 PM

Last Monday was a big day, when we launched Global News, a Canadian broadcasting network. The site was developed by our Featured Partner 10up. Stay tuned for an in-depth post on this innovative new site.

Screen Shot 2013-03-29 at 12.45.17 PM

This new TIME 100 site is fully responsive and encourages readers to “Cast your vote for the leaders, artists, innovators, icons and heroes that you think are the most influential people in the world.” Their polling system is powered by Polldaddy.

Screen Shot 2013-03-29 at 12.44.27 PM

The brand new Wired TV site hosts a large database of videos which can be searched or filtered by channel, popularity or recency.

Screen Shot 2013-03-29 at 12.46.19 PM

NI Group Ltd, the home of The Times, The Sunday Times, and The Sun, recently moved their corporate site onto WordPress.com VIP.

Screen Shot 2013-03-29 at 12.45.54 PM

Pandora’s blog is a great place to discover new music, and to learn a little bit about their social media community through their embedded Twitter and Instagram feeds.

Ready to become a VIP Services Client? Some of the world’s biggest brands rely on WordPress.com VIP Services.