Getting To Know Android Police: AP2 Edition
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.
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.
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.
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.
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 it 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.
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.
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.
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 moments 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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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).
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.
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.
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
-
Latest Deals
-
[Deal Alert] eBay Has A New Samsung Galaxy Tab S 8.4 For $300 ($100 Off Retail)
2015/01/29 4:10pm PSTJan 29, 2015 -
[Deal Alert] Sony Flash Storage Is Mega-Cheap For Today's Amazon Gold Box Deal
2015/01/29 9:16am PSTJan 29, 2015 -
[Deal Alert] Refurbished AT&T Unlocked 32GB Samsung Galaxy Note Pro 12.2 LTE Just $380 On eBay
2015/01/29 7:03am PSTJan 29, 2015 -
[Deal Alert] Pick One: 32GB Refurbished HTC One M8 And Samsung Galaxy Alpha For AT&T Both On Sale For $300 On eBay
2015/01/28 4:02pm PSTJan 28, 2015 -
Wednesday App And Game Sales: Remote Desktop Client, Warhammer 40,000: Carnage, Baldur's Gate II, And More
2015/01/28 1:54pm PSTJan 28, 2015
-
-
Latest Poll
Loading ...
-
Recent Device Reviews
-
Hands On With The Blu Vivo Air: So Sleek, So Thin, So Affordable
2015/01/21 9:15am PSTJan 21, 2015 -
Moto X (2014) Review Addendum: Three Months Later
2015/01/12 1:15pm PSTJan 12, 2015 -
[Wear Compare] The Strengths And Weaknesses Of All The First-Generation Android Wear Devices
2014/12/30 12:54pm PSTDec 30, 2014 -
Galaxy Note Edge [Very] Quick Review: I'm Sure It Looks Good In The Print Ads
2014/12/19 3:58pm PSTDec 19, 2014 -
Asus ZenWatch Review: The Best Value Of Any Android Wear Device So Far
2014/12/19 9:51am PSTDec 19, 2014
-
-
Latest Roundups
-
31 Best Android Wear Apps And Watch Faces From 12/29/14—1/29/15
2015/01/29 2:34pm PSTJan 29, 2015 -
[Bonus Round] Helicopter Sim, Steampunker, RPG Clicker, ULTRAFLOW, And Hypher
2015/01/28 5:43pm PSTJan 28, 2015 -
32 Best New Android Apps From The Last 2 Weeks (1/13/15 - 1/26/15)
2015/01/26 6:00pm PSTJan 26, 2015 -
[Bonus Round] Ambition of the Slimes, Skyward, Blockadillo, Chesslike, And Fisherman - Monsters & Stuff
2015/01/23 3:36pm PSTJan 23, 2015 -
29 Best (And 1 WTF) New Android Games From The Last 4 Weeks (12/24/14 - 1/19/15)
2015/01/19 12:00pm PSTJan 19, 2015
-
-
Recent Apps and Games
-
[APK Download] Titanium Backup Updated To v7.0.0 With Better Lollipop And CM12 Support
2015/01/31 10:58am PSTJan 31, 2015 -
Odd Bot Out Is An Adorable Little Platformer-Physics Puzzle Game Starring A Robot Reject
2015/01/31 10:57am PSTJan 31, 2015 -
FileThis Automatically Fetches Paperwork From Hundreds Of Sources And Saves Them To The Cloud
2015/01/31 9:29am PSTJan 31, 2015 -
[I Know What You Did Last Tuesday] Blinq Overlays Your Contacts' Social Updates On Top Of Your Messaging Conversations
2015/01/31 6:30am PSTJan 31, 2015 -
WhatsApp's Calling Feature Starts Making A Shy Appearance For A Few Users
2015/01/31 4:50am PSTJan 31, 2015
-
-
Blast from the Past
-
Ask And You Shall Receive: Sprint's HTC One KitKat Update Is Live For Manual Requests, Wide Rollout Starts 2-11
2014/01/31 4:43pm PSTJan 31, 2014 -
CyanogenMod Gets Cease & Desist On 'Chronus' Name, Wants To Crowd-Source A New One [Updated]
2013/01/31 5:23pm PSTJan 31, 2013 -
[Updated] Koush Adds ClockworkMod Touch Recovery Support To HTC EVO 4G, EVO 3D, Desire, Desire HD, Sensation, Thunderbolt; Motorola Atrix 4G
2012/01/31 11:37pm PSTJan 31, 2012
-
What's Hot
-
Last 24 Hours
-
WhatsApp's Calling Feature Starts Making A Shy Appearance For A Few Users
2015/01/31 4:50am PSTJan 31, 2015 -
Verizon Wireless Will Let Customers Opt Out Of 'Supercookie' Tracking After Privacy Backlash
2015/01/31 7:09am PSTJan 31, 2015 -
Latest CyanogenMod 12 Nightlies Bring The Boot Animation Back In Black
2015/01/31 12:36pm PSTJan 31, 2015 -
[APK Download] Titanium Backup Updated To v7.0.0 With Better Lollipop And CM12 Support
2015/01/31 10:58am PSTJan 31, 2015 -
FileThis Automatically Fetches Paperwork From Hundreds Of Sources And Saves Them To The Cloud
2015/01/31 9:29am PSTJan 31, 2015
-
-
Last 7 Days
-
Leaked HTC One M9 Renders Surface, This Time Courtesy Of @evleaks
2015/01/28 7:52am PSTJan 28, 2015 -
[Leak] This Is Probably The 2nd Generation Moto E
2015/01/28 12:43pm PSTJan 28, 2015 -
US Cellular Galaxy S5, Galaxy Note 3, And Galaxy Note 4 Get New Dialer, Updated Camera App, And More In The Latest OTA
2015/01/29 5:43pm PSTJan 29, 2015 -
Chrome Beta Updated To v41 With Pull To Refresh And Some Settings Tweaks [APK Download]
2015/01/28 7:18pm PSTJan 28, 2015 -
EA Will Charge For Gas In Need For Speed: No Limits As Part Of Its Ongoing Effort To Make Games As Mundane And Annoying As Real Life
2015/01/26 7:23am PSTJan 26, 2015
-
-
Last 30 Days
-
Google Reportedly On The Verge Of Launching 'Nova,' A Cellular Phone Service To Compete With Big Four Carriers
2015/01/21 10:47pm PSTJan 21, 2015 -
ASUS Rocks CES With The Low-Price, High-Spec ZenFone 2: 4GB RAM, Lollipop, And Flagship Looks Starting At $199
2015/01/05 11:43am PSTJan 5, 2015 -
Google App Hits Version 4.1 With 'Now Cards' Settings And More [APK Download]
2015/01/07 10:04am PSTJan 7, 2015 -
[Update: 5.0.2 For Nexus 10] [Flash All The Things] Lollipop Nexus OTA ZIP File Roundup
2015/01/20 8:06am PSTJan 20, 2015 -
Leaked HTC One M9 Renders Surface, This Time Courtesy Of @evleaks
2015/01/28 7:52am PSTJan 28, 2015
-
source: androidpolice
0 comments :