As a software house we are often asked by the designers about the best resolutions for their web design. Variety of types and sizes of laptops, monitors and other kinds of internet-enabled devices on the market is not making it easy. But don’t worry, we got you! During the past ten years, we managed to determine what works best for both designers and clients.
Desktop resolutions
Let’s start with a honest statement: there’s no single standard out there. We could write a book about it and still would not cover all nuances. Yet, from our experience, the following simple rules should do the job for most projects.
For desktop design choose the resolution from the list below:
- 1366 × 768
- 1440 × 900
- 1920 × 1080
What resolution is the best for my project?
If you are not sure which resolution might be best for you, go with the 1440 × 900.
There still might be some factors that can help you determine which resolution might be best for your client and final user of your project.
- if your client or the clients target users group is using laptops with Window, go with the most popular Windows resolution which is 1366 × 768
- if your client or the clients target users group is using laptops with Mac, go with the most popular Mac resolution which is 1440 × 900
- if your client or the clients target users group is using external monitor or has an upscaled resolution (not talking about the Retina) go with 1920 × 1080
Do I need to prepare my design for a few desktop resolutions?
No. But you should definitely think ahead and know how you would like your design to scale. Currently, the best solution is to just scale the website proportionally, but you might want your design to behave differently. Remember to always talk about this with the developers beforehand. Scaling might change the coding approach.
How would my design look on larger screens eg. 2560 x 1440?
It’s your decision.
Generally there are two approaches - scale the project up proportionally or add blank spaces on the sides. But sky's the limit and if you have another idea, let’s talk about it!
Beware of the vertical dimension
While designing elements or height dependent sections, remember about the browser bars at the top and operating system bottom navigation. If your target resolution is 1440x900 assume that your design needs to look good also on the 1440x700. If your hero section needs to be full height, don’t put too many elements on it and allow it to adapt to the user’s real screen size.
💡 Tip
When working on a design for a longer, scrolling page, it's worth to add a horizontal guide to mark the first fold. This way, you'll be able to better understand, how your layout is going to look in the browser.
If you're using Figma, enable rulers by taping Shift + R on your keyboard. Having the rulers visible, select the frame you are working on, and then click and drag the horizontal ruler to pull a guideline onto the frame. If you then hold Option (or Alt on Windows), you'll see the pixel distance between the top of the frame and the current position of the inserted guide.
Curious about mobile resolutions?
In the next post in this series, we'll cover the mobile part of the equasion. Stay tuned!
