Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design Web Design Process Exploration Iterating on a Design

Jason Cady
Jason Cady
9,739 Points

Proper Mockup Desktop Browser Window Container Aspect Ratio?

Shouldn't the desktop version of the mockup start with at least the proper 16:9 aspect ratio & size of something like the common 1366x768? Without a reasonable aspect ratio, I think it is something like a step too far...

Julien Rotundo
Julien Rotundo
10,018 Points

Everyone works differently, but I usually like to put a guideline where the fold line would be. Sites are so fluid these days and users are so used to scrolling on mobile, that it really comes down to how the site feels in the end. The taller aspect ratio makes sense to be able to fit all the content in the mock, and a guideline for the cut off will help get a sense of the initial view.

2 Answers

Max Senden
Max Senden
23,177 Points

Hi Jason,

When it comes to making mockups and clickable demos I usually stick to 1369 x 768 for desktop. These dimensions generally work well on any screen: from small and cheap laptop screens to big and expensive screens for presentations.

I tried working with other ratios in the past, but it always ended up blurry or pixelated on some screen sizes.

Hope it helps, Max

Mockups are more difficult to show with a static mockup these days as the web is so fluid so I only use the graphic mockup as a loose 'concept' and explain to the client that it will look different on different screens.