What spurred the GigaOM redesign?

As one of our product managers has been repeating: speed is a feature. We wanted to preserve the user experience and cut out things that didn’t matter — we wanted to clean up the code with the goal of dramatically improving speed.

Om has been blogging for a long time, and there were a huge number of plugins that were built to support different features over time. Over all those years of blogging, never once did we get a chance to stop and look back and what features we’ve added while growing from a personal blog to a company with lots of authors.

For this redesign, we had a moment – not long – to ask the serious question about each feature: what does it do, and is it worth preserving? We started with the answer to the second question being “no.”

So, how did your team tackle the performance issue?

In the previous 18 months, we had been working on lots of different ways of improving performance without dramatically improving our code base. We went from shamefully bad page load times to slightly worse than average. But to get the remaining performance increase, we had to refactor all of our code. Performance isn’t something you can build on after the fact.

In structuring our theme, a huge amount of time was spent on building for lazy loading. For our site, content is king. So when you load the site, the things you want to read, the content, we get those to your browser first. Then, the things around the content, the part of the site that are business requirements, those are lazy loaded.

What were the biggest offenders on your previous site in terms of page load time?

One of the biggest offenders was our CSS. It had grown to a full megabyte in size, which required a lot of time to download. So by doing the redesign from scratch, we were able to get rid of our old CSS and create new CSS from scratch, and build in optimizations for selectors and markup on the page from the start.

What was the simplest change that you made that affect page load times?

Something that is big picture simple – but took us a while to do – was getting rid of graphics. This brought us a huge win.

The way we got rid of images entirely was to replace graphics with a web font. It partially contributes to the stark look of the page, but all the line art is generated by a web font that saves us quite a bit of download time. The web font itself is very small – all the different characters are different images, like our logo, or the twitter icon. It requires a very different workflow with very different tools, but once we did it, it was amazingly easy to do.

How does one build a high performance WordPress site?

Let WordPress be WordPress and cut away what is not WordPress. WordPress has an incredibly sophisticated architecture, and there are a lot of features that you can add, but when you’re building that way you’re not building for performance. In our redesign, we were getting rid of what what we could.

All of our code, everything that we run on our site, starts out as an independent plugin that runs on baseline WordPress. It means we’re building better plugins that are easier to debug and maintain, in addition to the performance gains we get from going down to baseline WordPress. It also makes it easy to onboard new engineers and distribute individual projects because there’s no dependency between individual plugins.

We also adopted the idea that everything we built would be a candidate for public release. It prevents us from doing something stupid that isn’t maintainable as our site changes – something you wouldn’t be proud of sharing with the WP community – just because it gets the job done.

How has being on WordPress.com VIP improved your site’s performance?

The automatic concatenation of scripts and CSS, the automatic CDN-ing, these are things that come with the VIP platform that we don’t have to manage. If you take a regular WordPress site and you try to scale it up, there’s a lot of setup and configuration to get the concatenated scripts and CSS, and finding a CDN. All that takes time. WordPress.com VIP has been a great value to us in terms of giving us a baseline platform with baseline best practice features available to us, without us having to contract for it to maintain it.

How have your users responded to your redesign?

We’ve definitely gotten some good audience feedback. One of the things we noticed is that the hours people spend on the site have gone into the after-work hours, and there’s been an increase in the after-work usage of the site on mobile devices. That means people are finding the site more comfortable on mobile devices, and that they are taking the site home with them.

Want more? Read Casey’s blog post on Browser Performance Improvements on Code Kitchen.

Or, curious about WordPress for large-scale / enterprise installs? Contact WordPress.com VIP Services.

WordPress.com VIP Search is a new premium service for our Cloud Hosting customers that delivers the features and flexibility of the powerful elasticsearch software—all hosted, managed, and supported by the WordPress.com VIP team.

With VIP Search enabled, your search results will be more relevant and timely out of the box—but the real benefit is that developers can leverage this new functionality to deeply customize your search results, including support for faceted search. With faceted search features, your users can filter search results on your sites however you’d like—by type of content, category, tag, author, date ranges, and more.

Give it a try right here on vip.wordpress.com, or check out the beautiful redesign of the Kaiser Family Foundation’s website developed by our partners at Alley Interactive. And if you’d like more info on VIP Search, get in touch!

We spoke with David Anderson, Senior Product Development Manager at BBC Worldwide, about how WordPress powers BBCAmerica.com, starting with their site redesign a year ago.

How does BBC America use WordPress to power your show network?

The entire BBCAmerica.com site runs on WordPress. It was a gradual change — we first moved our BBC America’s blog, Anglophenia to WordPress, and then the rest of the BBC America site to a WordPress Multisite install after seeing the success of the blog.

Each show has the ability to have its own theme, most of which share a child theme based off the main framework. Each child theme powers its website with a general template which we change to match a show’s content and look & feel. We do this by taking advantage of options in each theme in order to help customize it. Editors can upload their own custom art and customize the site without having to involve a developer.

How long does it take to create a new WordPress site for a BBC America show? 

Since we’re running Multisite, each show gets a new site. We’ve automated the technical creation process to a few form fields and a button. The short answer is that we’ve gotten the process down from 3-5 days to roughly 2 minutes. Keep in mind, this is not including the content that populates the pages, but even that process could take less than a few hours if everything is ready to go. Behind the scenes, there are multiple tasks that run when a site is created. Pages that are needed for each show site such as TV schedule pages are generated, privacy settings are applied so that sites are password protected until they’re ready to be published, menus are created, and connections are made to 3rd party APIs.

How has WordPress streamlined BBC America’s publishing process and editorial workflow?

The ability to create custom content through the WordPress interface (and not have to create custom HTML code) streamlined 80% of the work which in the past had occupied a huge amount of time for a team of four editors. The result is that editors now have more time to focus on content creation instead of figuring out how to edit (or troubleshoot) code. This also helped standardize the user experience because we were able to get the same editing tools and easy-to-use interface into the hands of all of our editors.

Which features of the site are most appreciated by your users?

One important goal for us was to make it as easy as possible to create content quickly and efficiently in a way that “just works.” We were able to streamline the content creation process by customizing the admin interface to allow producers to enter data into fields that make sense for the specific content type they’re creating in each section. We’ve also tried to use drag and drop interfaces when it makes sense. Everyone has gotten used to rearranging apps on their phones by dragging and dropping, and we wanted to carry that experience over into the creation process for the site. Recently, we’ve been hearing from our editors that the updates to the media uploading experience in the 3.5 release have made it much easier and faster to add images and galleries, which is a feature that they really enjoy.

“Our previous platforms locked us into very rigid options. Changes were expensive and took a long time to implement. Now, we have a solid platform that is flexible and constantly being improved.” — David Anderson, Senior Product Development Manager at BBC Worldwide.

How big of a role does social media play in BBC America’s content strategy, and how have you integrated it into the site? 

BBC America is the U.S. home of Doctor Who. That show has a large social media footprint and was probably one of the first shows that made us concentrate on tightly integrating content strategy with social media. We saw great results and now we approach every project with a focus on social. In terms of integrating it into the site, we try to make sure that we’re keeping up with the ever-changing landscape of social networks. We’ve made an effort to implement things like Open Graph and Twitter card tagging on the back-end. On the front-end, we’ve tried to provide ways for visitors to easily share our content. This process is constantly evolving and combines editorial strategy with things like layout tweaks.

How does BBC America like being a part of the open source WordPress community? 

Being a part of the WordPress and open source community in general has allowed us to accomplish things that could have only happened with great difficulty if we had to build another proprietary CMS. Our previous platforms locked us into very rigid options. Changes were expensive and took a long time to implement. Now, we have a solid platform that is flexible and constantly being improved. In most cases, problems can be solved by reading support tickets and blogs. We use several plugins that are available in the WordPress.org plugin repository and it’s amazing how willing plugin developers are to help out when we come across a problem. We try to reciprocate as much as possible and it feels great when we’re able to offer fixes that can help the entire community.

Want more information about WordPress for large-scale / enterprise installs? Contact WordPress.com VIP Services.

Through our WordPress.com VIP program, we provide support, hosting, training, and other services to some of the biggest and best WordPress sites on the web. Our VIP Wranglers are responsible for providing support to all of our customers, building and shaping our products, and just generally Making Stuff Go.

On the WordPress.com VIP team, you’ll be a part of a team who has deployed more than 100,000 commits, develops cool products like  Liveblog for WordPress, educates clients and partners through exclusive training, and who gets together several times a year to powwow on our team roadmap and go race car driving.

Here are some skills that will come in handy for a VIP Wrangler:

• Advanced proficiency with WordPress. Low-level language or systems experience a plus, but not required.
• A strong understanding of the Web including HTTP, HTML, CSS, and JavaScript.
• Must be comfortable working primarily in a customer-facing role, including providing support and training.
• You enjoy collaborating with other developers, reviewing code, and making recommendations on technique or approach.
• Great troubleshooting skills. Must be able to take big problems and break them down into manageable pieces with elegant solutions—and importantly, keep our customers apprised of progress throughout.
• The ability to iterate and ship ideas quickly, with loose (at best) direction.

All jobs at Automattic require:

• Great communication skills. We’re a distributed team, so frequent and clear written communication is a must.
• Self-driven work ethic. You need to be a self-starter who loves taking initiative and seeing things through to completion.
• Curiosity and the desire to learn.Our business is changing and growing fast, who knows what will be the skills of tomorrow? Flexibility is key.

Where in the world are we looking to hire VIP Wranglers? Anywhere! Automattic is a distributed company and that means this job will come to you, wherever you live!

Ready to go VIP? Join our team! If you’d like to be considered for this fulltime position, read more and apply for VIP Wrangler!

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.

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.

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.

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! 

WordPress.com VIP Featured Partner 

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 PDT. Find 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!

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.

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 back, Preview, and Take over.

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.

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.

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.

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.

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.

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

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.

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 Hosting? Get in touch.

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.

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.

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):

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.

Interested in learning more about WordPress.com VIP Cloud Hosting? Get in touch.