Android Headlines Redesign
Android Headlines is one of the world’s leading technology news websites.
It was founded in 2009 by Chris Yackulic with the purpose of providing high-quality news coverage on the emerging Android phone market. Now, almost 10 years later, the site has grown exponentially to cover a variety of topics across the tech sector.
Over 90,000 Articles Published
3,000,000+ Followers on Social Media
10,000,000 Visitors a month*
50+ Authors in 30+ Different Countries*
Reaction has been working with Android Headlines since 2014 and the biggest issue they are constantly running into is the performance of their Wordpress based website. With over 90,000 articles on the site today (more than double what they had when they first started working with us) Wordpress was starting to have issues loading their content fast enough. We also wanted to update the design and UX of the site to make navigating their content easier and faster. Finally, it was important that the site retains all of its PageRank and SEO score with Google in order to keep organic traffic flowing. It was our plan to focus on these three key performance indicators as we built the new site.
How do we increase the overall speed of the site for all users?
Design + UX
How do we make it easier for users to find the content they want?
Can we make this major update without losing PageRank?
The simple fact is that Android Headlines was outgrowing what Wordpress can effectively offer in its standard implementation.
We love Wordpress here and the staff at AH are very familiar with how it works, so we didn’t want to do away with it completely. We needed to come up with a solution that would increase performance on the frontend, but also allow the writing staff to continue to use Wordpress on the backend. Our solution?
(Wordpress x Laravel) + Vue.js = ♥
Whenever we’re building custom applications at Reaction we typically use Vue.js as our frontend framework and Laravel on the backend. However, with this project it was important we preserve Wordpress and its standard operations as the backend CMS panel for the writing staff at AH. Luckily, Laravel allowed us to do just that, with a custom transformer and using their micro-framework Lumen we were able to create an API that could pass data from Wordpress to Vue.js in the proper format.
In addition to the standard Wordpress operations of pulling posts and categories for the news, we also had to build in calls to transfer plugin data from the Wordpress admin panel to be used on the frontend. Configuration for SEO fields, sitemaps, page layouts, and a huge assortment of other functions had to be properly handled by the Lumen API in order for the site to function properly. We also heavily modified the Wordpress backend dashboard to properly integrate with the new frontend, as all links and post preview functions had to be rewritten to use the frontend URL.
We also built new functions into the Wordpress backend to improve the experience of managing the site. For example, the new ad management system allows the client fine control over the types of ads that are served all across the site. It is integrated with one of the largest ad providers on the planet and utilizes the Google Ad manager (formally DFP) and advanced Header Bidding technology to make sure the most ad revenue possible is generated on every page view. We also built new backend systems to better control the homepage layout, trending topics, category styles, and a lot more.
Design + UX
Updating the design of the site to look more modern was important, but with so much content on the site it was also important we made sure the user experience (UX) of navigating and finding articles was also improved.
One of the first problems we tackled was the Navigation Menu, the old menu had over 100 items which made it difficult for users to make a decision on where they wanted to go. The new nav has a better category structure and only 30 items to help the user make quick and easy decisions as they navigate around the site. Our goal was to allow the user to easily move from the homepage, to a category, and then to a subcategory to find the posts they are looking for. Once on an article, we wanted the user to continue to explore and find other articles related to their interests. To accomplish this we created a content hierarchy using various design concepts and patterns to help guide users to where they want to go.
- Adding a Related Articles section also helps to encourage readers to go beyond the first article they land on.
- We used colour, size and shape to denote hierarchy in individual page layouts to help complement the content structure.
- Category colours make it easy to identify what brand or page a user is on without having to read any text.
- Newer items are typically larger and in a different layout than older content to help promote the latest news.
In addition to the updates on the site itself, we also revamped AHs branding and logo to match the redesign. We wanted to make sure the brand was able to scale beyond just Android news and work for technology news in general. Reducing the logo to just the AH badge and putting a focus on Tech News helps us avoid focus on the word Android.
The design of the logo is meant to be very sharp and cutting-edge, we avoided any round lines or shapes to try and maintain that modern feel.
Search Engine Optimization
Unlike some of our clients, Android Headlines is an online-only business, so organic search traffic and SEO, in general, is a huge factor in the growth of their business.
Supporting new technology like Google AMP pages as well as maintaining page rank and key SEO schema data is paramount in making a smooth transition to the new site, and maintaining revenue for our client.
Two years ago we helped Android Headlines become one of the early adopters of Google AMP so making sure that we carried forward our use of that technology was very important on this project. AMP is a lightweight standard that allows users to access information quickly and easily with very little overhead. With over 90,000 articles Android has a huge wealth of information available via the AMP format, which Google prefers for its news search results.
One of the new features Google has been adding recently to fight the rise of misinformation on the web is a heavier focus on author profiles. Providing real data on who authored the article and what credentials they have is a good way to verify that a source is factual. Articles with verified author information rank higher so we made sure that all articles include the relevant information, and that it can be indexed by Google.
However, Google still heavily relies on the more “classic” SEO data such as meta tags, schema, and XML sitemaps. One of the leading SEO plugins for Wordpress is Yoast, it provides backend options for users to modify metadata, schema information, and it generates and submits sitemaps for Google among other things. In order to maintain this functionality, we needed to pass all this data forward through our API so it was accessible on the frontend.
We know that rebuilding a marketing website that generates a portion of a client’s revenue can be stressful, and with Android Headlines, this website is the client’s entire business. We really appreciate that Android Headlines trusted us with this enormous responsibility and gave us the opportunity to deliver such a cutting-edge solution for them. The new technology stack has increased the site's performance well above what it previously benchmarked. The new design and user experience have improved the user's ability to navigate and find new content. Finally, our efforts on the SEO data have resulted in continued high page scores across the site.
The client is extremely happy with his new website and we are excited to continue our work with AH as their readership and business scales for years to come.