Okay, so this isn't the GTKA post you've been expecting - that one's still in progress. This post, Getting to Know Android Police, will introduce you to something you're already looking at - our full redesign, delivered after what has seemed like an eternity of teasing, hinting, and behind-the-scenes work. AP2 is really just the beginning. We have even more awesome bits, pieces, and optimizations planned, but there are already a lot of new things to see around here, so we thought a post like this one might help our readers get acquainted with the new site. Get your itshappening.gifs ready.

A responsive AP

Perhaps the most obvious functional change to the site is that AP is finally, really, actually responsive. The site's design adapts one layout across any device you're browsing from, without any mobile subdomains or iOS 6-tinged layouts. Whether you're on a phone, a tablet, a computer, or some other device, AP will look good and you'll be able to find all the info you're looking for.

If you're on desktop, just resize the window to get a taste of what the other display sizes will look like.

See what's important

One of the main tenets of our new design is making it easy to see what's important. Posts will still show up chronologically, but we've got a handful of new features to highlight new and interesting posts.

News at a glance

The first one of these you'll notice is News at a glance. This widget lets you know what's been happening at AP since you last visited, including filters for 8, 24, or 72 hours, and the option to sort by latest, hottest, or most commented.

Screen Shot 2015-01-11 at 1.05.53 AM

If the list and totals aren't granular enough, you can also hover over the tiny line graphs at the top to see what's happened on a finer-grained basis. If you're browsing the last 8 hours for instance, this means you can see the total comments and articles added hourly.

hourly

Don't miss these

Don't Miss These is another widget that will surface important posts. The widget will display the latest posts from our top categories.

Screen Shot 2015-01-11 at 9.20.03 PM

Hotness

Hotness, for our purposes, is a metric that indicates how hot or popular a post is based on engagement (including pageviews, comments, and social action). Each post will have a "hotness meter" near the headline, and the hottest posts will make their way into your hotness-filtered NAAG, or to the footer of the page, which gives an overview of the hottest posts from the past day, week, and month.

Screen Shot 2015-01-11 at 1.12.38 AM

Screen Shot 2015-01-11 at 1.13.24 AM

Post time

Previously, post times were anyone's guess. Posts were arranged by date, and based on the order of the home page you may be able to figure out a relative post time, but AP2 will show you the exact time a post was published, either by telling you how many minutes/hours have passed, or by displaying an exact time. Just hover over the text under an author's name to see the exact post time.

time

New navigation

The navigation bar has also undergone some changes. Rather than directing users to category pages for each item, we've broken the top four categories into the top nav bar, each with their own submenus based on the latest and greatest from AP. Below that is another bar, with the other usual suspects including leaks, exclusives, downloads, deals, giveaways, features, editorials, and podcast.

Screen Shot 2015-01-11 at 1.01.42 AM

Unified search

In case you've already repressed the memory of the AP1 design, the old site had a search bar and a separate dropdown that served up entries for every device (sorted by manufacturer. With AP2, the search has been unified. Just start typing and it will suggest relevant categories or devices. Click the one you want and you're off. Otherwise, just keep typing and hit enter.

Screen Shot 2015-01-11 at 12.55.28 AM

Key controls

We've actually had key controls for a little while, but with the introduction of AP2, it's a topic worth mentioning again. As you browse the home page, try hitting J to scroll to the next post, K to scroll up to the previous one, and Enter (or return) to enter a post.

Clearer content

Another goal of the redesign was to clarify content, and establish solid and familiar ways of showing readers what's going on in a post. After all, things can change at a moment's notice on a blog. Previously, updates were only noted by some bold text or perhaps a note box. The table of contents took up a big chunk of space at the start of each post, there was no way to communicate breaking stories apart from a regular post, series were only identified by a headline, and sources just got a plain link.

All of these things and more are remedied in AP2 with a set of bold, intentional designs that will make things clear without making them ugly.

Updates

When a post-altering update is required, it'll be obvious to readers. At the very top of the post, there will be a yellow tag with a brief snipped of the update. Click that, and you'll be taken to the full update which is itself surrounded in yellow tags.

update1 update2

Series

Serial posts will be easier to navigate now, too. Instead of clicking the category and being dropped into another page, a new widget will appear at the top of all posts in a given series for quick access to any other post in that series. You can skip to the previous or next post, or hit "show all" to drop down a list of all entries.

Screen Shot 2015-01-11 at 2.57.00 PM

Table of contents

The table of contents is now a discreet floating element that expands only when you need it to. Rather than hanging out at the top of the post, it'll float down the page as you scroll, providing easy access to any section of the post.

toc

If you're browsing from a smaller device, though - like a phone - AP2 will save space by putting the table of contents back at the top in a collapsing tag.

Breaking news

Breaking news doesn't happen often, but when it does, AP2 is prepared. When a story is breaking, a red tag at the top of the site will let you know what's happening, with a quick link to the story in question.

Screen Shot 2015-01-11 at 3.08.19 AM

Images

AP2 has also introduced new ways to display images. If there are a handful of images that need to be displayed together, AP2 can make that happen with automatic image sizing and grouping. For sets of one to four photos, things will line up in a row or in a cluster, and for sets of five or more, a little grid-layout gallery will show up. Images can now have captions too, so we no longer need to rely on italic superscript to make snarky remarks.

If your display has room for it, you can even view a brand new gallery of all the images by just clicking on one. We think this gallery is a lot more powerful than the WP lightbox we used before. Try it yourself below.

Multi-column layouts

There are times when we need to display a long list, or other lengthy content that would normally make the page drag on forever. For these instances, we now have multi-column layouts. They can be split into two or three columns, or a combination of widths.

Expanding long quotes

In cases where we have lengthy content that wouldn't quite belong in a multi-column layout (like when we include a press release with a post, for instance) we have expandable long quotes.

Press Release

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pull quotes

Besides normal boxed quotes, we also have new pull quotes, which will present key parts of a post in a bright, stylized block.

Screen Shot 2015-01-11 at 4.15.36 PM

Normal, non-editorial block quotes will still be displayed in a tame, unobtrusive manner shown below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Note boxes

We've got a revised and expanded set of "note boxes" now too. Those red, blue, or yellow boxes that would sometimes appear in reviews, teardowns, or leak posts have been given new life and new iconography, making them easier on the eyes and more relevant to the content they contain. We have boxes for notes, warnings, tips, important items, and help items. This paragraph is inside a note box, and the others are shown below.

Horizontal breaks

Horizontal breaks are another element that we don't often use, but which received some attention in the redesign. Instead of the previous break (two small bugdroid faces), we'll now use the new AP logo with a clear line, as seen below.

Sourcing

We've also made it easier to quickly identify source links and to call out our generous tipsters. Source, Via, and Thanks all have their own styles now, with the same bold palette seen throughout the rest of the site. We want to make sure that, when we get information from others, it's clear, easy to read, and easy to interact with.

Screen Shot 2015-01-31 at 8.52.44 PM

New post types

On AP1, posts came in exactly one flavor. No affordance was given for posts that were very short, reviews relied on words and images, and there was no way to really make a bold visual impact right away with important features or editorials. You can probably guess what I'll say next: all of this has changed with AP2. First let's talk about reviews.

Reviews

Reviews can be quite long. AP2's new image sets and pull quotes will help to break up the layout somewhat, but we've also added new boxes specifically for specs, "the good," and of course "the not so good." The new boxes are easier to read, and are a better fit for reviews than the previous boxes, which were originally intended for notes, warnings, tips, etc.

Screen Shot 2015-01-11 at 4.28.05 PM

But what if you just want to get to the overall conclusion? Reviews now have a "meter" widget to accompany the conclusion. It will show scores for criteria like hardware, design, and software, along with an average score represented by a circular meter. To the right of the widget, the author's conclusion will be easily accessible.

Screen Shot 2015-01-11 at 4.21.14 PM

In-brief

Some posts are shorter than others. To accommodate these, we are introducing "in brief," a new post type that keeps super short posts or status updates from taking up more room than they need. Brief posts will get a special tag on the home page to designate their briefness, and won't include a snippet of the actual post. Just the headline.

Screen Shot 2015-01-11 at 8.53.44 PM

Hero image

In an effort to enable stronger visual impact in feature or editorial posts, we're also introducing "hero image" posts - another new layout including a hero image up top that will show up full-width on the front page and inside the post itself. This layout helps show a big image to kick off the post, without distracting readers with full-page images or other tricks. The post you're reading right now makes use of the hero image format.

Optimizations

Another area under scrutiny with the AP2 redesign was optimization. The new site has somewhere around half the web requests per page load that AP1 had.

CSS has also afforded us a lot of optimizations - for starters, we have an icon font that contains many interface elements you'll see around the site (including category and social icons).

Screen Shot 2015-01-11 at 3.13.12 PM

Speaking of social icons, social widgets are loaded statically with counts that reflect the time the page was loaded. Actual social widgets are only loaded when requested by the user. This cuts down on page load time.

socialq

Additionally, the diagonal texture you see peppered through the site on headers is actually a base64 sprite sheet encoded and embedded into the AP2 CSS.

Bugs?

If you see a bug, don't worry! It's a feature not a flaw. Just kidding. We have a public bug tracker that you can use to tell us about things that might not be working quite right. No VaShiKaRaN SpEciAlisTs, please.

Conclusion

giphy (1)