To Design Awesome Experience - Screen Size Does Matter..!!
Did you know? - there are more than 7000 device types in the world!
When we started to research on user experience on cross-devices, we came to know that there are over 7000 device types in the world (but you already knew that, didn’t you) .
Varying from mobile based platform to tablets, laptops to ultra-large size monitors and don’t you forget the 27″ inch iMac. Then there there are multiple platforms with wide spectrum of screen sizes - small screen display, to medium to large to Extra Large Display.
Now the question is - How am I supposed to ensure consistent user-experience on so many devices? Well, the answer is quite simple - start with “One” and, here’s few insights about how to pick which is the device you should start from:
Pick Device By User Persona:
Want your users to fall in love with your designs? Fall in love with your users. - Dana Chisnell
Right! Here we are, again talking about focussing on users. Before you grab your design tools, think about who is going to consume the apps which you are going to design and more precisely, kind of devices they use.
That’s understood, that these people may be using multiple devices. Then it becomes important to understand the user mindset when they are on a particular device. For example, your target user when on desktop will be doing work-relate while on tablet or mobile he is on commute. So you can provide more deeper hierarchy of information architecture on mobile than on the Desktop version of your app like bigger fonts on mobile and tablet.
Focus On Most Popular Screen Size and Design your way toward others:
| Screen size / type | Screen resolution | Usage |
| 14” Notebook / 15.6” Laptop / 18.5” monitor | 1366×768 | 29.10% |
| 21.5” monitor / 23” monitor / 1080p TV | 1920×1080 | 18.40% |
| 14” Notebook | 1280×800 | 8.50% |
| 4” iPhone 5 | 320×568 | 6.40% |
| 19” monitor | 1440×900 | 5.70% |
| 19” monitor | 1280×1024 | 5.50% |
| 3.5” iPhone | 320×480 | 5.20% |
| 20” monitor | 1600×900 | 4.60% |
| 9.7” iPad | 768×1024 | 4.50% |
| 15” monitor | 1024×768 | 4.50% |
| 22” monitor | 1680×1050 | 3.40% |
| 24” monitor | 1920×1200 | 1.70% |
| 4.8” Galaxy S | 720×1280 | 1.60% |
| 720p TV | 1280×720 | 0.90% |
Finally, if you are at early stage of your idea validation or don’t have access to the resources, you can start designing for the device you have and then you can work towards other devices.To quickly visualize and validate the concept.
Here’s some popular Screen size on CanvasFlip for kick-start:
|
Device Name |
Popular Devices | Height |
Width |
| Android Phone | Sony Xperia Z3, Samsung Galaxy S5, ZTE Grand S, Xiaomi Mi 4, LG Nexus 5 |
1080px | 1920px |
| Android Tablet | Samsung Galaxy Note | 800px | 1280px |
| I phone 6 | I phone 6 | 750px | 1334px |
| I phone 6 plus | I phone 6 plus | 1080px | 1920px |
| I phone 5 | I phone 5 | 640px | 1136px |
| I pad | I pad | 768px | 1024px |
| Windows Phone | Microsoft Lumia 920, Microsoft Lumia 925, Microsoft Lumia 1020 |
768px | 1280px |
| Apple Watch | Apple Watch | 390px | 312px |
| Desktop (Web) | Desktop | 768px | 1024px |
Hope you find this useful. If yes, please share it with your colleagues. If not, please share your views in the comments section.
Thanks for reading.