Mobile Resolutions
Mobile design might seem like a tricky business, given the plethora of devices out there. However, we recommend choosing a resolution of 390x844 pixels. This resolution fits snugly with some of the latest iPhone models such as the iPhone 14, iPhone 13, iPhone 12, and iPhone 12 Pro. If you're dealing with the extended versions like the Max, they'll be a tad bigger at 428x926 pixels. For those still catering to previous iPhone generations, resolutions ranged from 375x667 to 414x736 pixels. Our recommended 390x844 resolution strikes a balance between the old and the new, making it a solid choice for mobile web design.
Landscape Version
Landscape mode is a bit of a grey area, as it's rarely used by users. You can choose to prepare your design in landscape mode to inherit the layout from the mobile or tablet (depending on the phone's height). But because landscape mode comes with a screen height that's on the shorter side it can pose a challenge when you're trying to fit in specific sections or elements. Alternatively, you can block the website for landscape mode and kindly ask the user to rotate their phone back to portrait mode. We've found that the latter solution works best in most cases.
iPad Resolutions
When it comes to iPads, we recommend sticking to 1024x768 pixels for horizontal orientation and 768x1024 pixels for portrait orientation. This standard resolution served iPads well for many years. However, recent iPad models have introduced some inconsistency. While the regular iPad hovers around 820x1180 pixels (for models like iPad's 10th gen, iPad Air 5th gen, and iPad Air 4th gen), it's still pretty close to 768x1024 pixels. The option we propose covers a slightly broader range of resolutions, making it a safer choice. As for the iPad Pro models from the 2nd generation to the 6th generation, their resolution is 1024x1366 pixels. The 1366-pixel width is typically covered by the desktop design, while the 1024-pixel width is covered with the horizontal version of tablet view. That’s why we found out that 1024x768 should serve you well for iPad web design.
It's important to note that each tablet may have its own unique resolution, so if you're aiming for compatibility with a particular device, always check its resolution before diving into your design.
How Many Resolutions Do I Need to Cover in My Design?
In reality, you only require the mobile version. iPad versions, both horizontal and vertical, are optional because they often fall somewhere in between the mobile and desktop versions. However, if you're a designer who feels more comfortable covering all bases, by all means, go ahead.
Summary
Navigating the world of multiple devices can be a bit tricky, but choosing resolutions that cater to the most popular devices should help you cover the most crucial ground. Keep in mind that this isn't print design – scalability is key. Good luck, and happy designing!
