5 websites that match devices to screen resolutions
Figuring out the critical devices to design for
The misleading thing about the Google Analytics “Devices” section is that it doesn’t actually tell you what device you’re most supposed to design for, just by looking at it.
The simple reason being that Apple devices have the advantage of just having one name or label, which boosts their standing in the list — as opposed to the gajillion Android versions out there.
So, as in all data analysis, a heavy pinch of critical thinking is needed, as you look at your Analytics data.
Some tips (assuming you have analytics set up in your website) on how to find screens to design for. First, visit your Google Analytics account:
1. Go to the Screen Resolutions section of Google Analytics.
You can find it in Technology, and within “Browser & OS”
2. Look at the top screen resolutions accessing your website.
And, if you have conversion goals — you can even check which of the device and screen sizes are converting most / least.
3. Figure out: What devices do these numbers match?
Well, again, the advantage of designing for Apple products, is that you have to keep only a few figures in mind.
More often than not, I’ve seen that an Apple mobile screen size isn’t the top resolution, even if that’s what is listed as the top device. This is because many different Android phones (now, finally) share particular screen resolutions.
And, now, the websites:
This is for everyone else who has been trying to look for a collection of Android screen resolutions. Because it’s been so hard to look for a single inventory.
1. Google’s Material Design Devices section
I don’t know if this has been recently updated, but it wasn’t showing up in my previous searches.
2. EmirWeb’s Comprehensive list of Android devices
Doesn’t look sexy, but lists popular emerging market phones.
3. FluidUI’s Blog post on mobile resolutions
Last updated in the middle of 2015. It’s a format you can easily browse, listing many of the primary mobile phones.
4. Kakao Corp’s Troy — The responsive web tester
Isn’t super comprehensive, but looks sexy.
Notable mentions:
Oliver Pearmain’s helpful Stack Overflow response
It hasn’t been updated since 2014, though.
Also, WebSightDesigns’ bare-bones wiki page on Screen resolutions.
For a comprehensive and well-formatted summary of Apple iPhone screens:
5. PaintCode App’s Blog post on iPhone resolutions.
Hope these help, if you’ve been looking for the same kind of inventories. Tell me if there are other or better sites out there, where people can browse through what phones match which screen resolutions, in one view.
Update:
Came across DPI Love, by Lea Verou who writes for O’Reilly.
The idea is interesting. Literally, search for a device in the database. Plus, there are handy definitions of the pixel- and point- acronyms.
Also, My Device by Raphaël Goetter.
Follow our weekly updates here on Medium or on LinkedIn, if you want to read and exchange thoughts about the interaction design process. Join our Priority Studios’ newsletter, for a monthly collection of links we found useful for work and projects.
