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
SMINU MARY PAUL
745 PointsWhat should be the pixel aspect ratio for a website?
I am trying to understand, my designer's question- What should be the pixel aspect ratio she should be building the mock-up of the website, to hand over to the developers?
Can you please help me understand this? [I am from the product management side, I am not clear with this question. I did a research and found that its 1366x768 as compared to 1024x768]
Thank you Sminu
6 Answers
SMINU MARY PAUL
745 PointsNo you are not confusing me... I was under the impression, based on what I read on internet, the common web browser resolution on laptop and desktop are 1024x768 and 1366x768. So now you are mentioning 960x768. So is there a difference if I ask her to make the mock up in 1024x768. so that the assets of the .psd can be used by the developer directly?
Abhay Sharma
8,287 PointsIf she is asking for photoshop document it should be 72ppi. That being said, retina displays are exceptions with more pixel density.
But for your question 72ppi will do it.
SMINU MARY PAUL
745 PointsThanks Abhay,
But she was asking me to tell in terms of 1024x768 , 1920x1080 etc
Abhay Sharma
8,287 PointsIt depends on the layout. Normally I use 960px X 768px if the maximum width of the site is going to be fixed.
SMINU MARY PAUL
745 PointsMy confusion was what will happen if I try to open that pixel ratio website in the large monitor?
Abhay Sharma
8,287 PointsThe website will have a fixed width of 960px. Example http://inmotion.ca is having a fixed width of 960px while http://abhaysharmaweb.com is fluid and fits the browser, as you can tell there is not much difference in the site after a certain width, but if your site have alot of content then keep it fluid and fit the content in what ever the width is. I guess that is a decision to be made by your designer based on your content.
SMINU MARY PAUL
745 PointsHmm... great response... My designer has never developed a website before. So she was asking "Then all I need to know is what pixel aspect ratio I should built the homepage and secondary page in. For example, 1920 x 1080. I need to follow what works best for your developers. "
She is asking me to tell a general trend for common websites, so that she can make a mockup using that and give to the developers to build
Abhay Sharma
8,287 PointsI hope I am not confusing you. The general trend is content first, so your content should be accessible on different screen sizes.Making a fixed maximum width website or fluid width is a choice of layout and design, I'll say make sure you can access it on devices with screen size 960x768 and below, rest will be covered by itself.
SMINU MARY PAUL
745 PointsThanks Abhay!
Abhay Sharma
8,287 PointsAbhay Sharma
8,287 PointsSo if you are going down the path of responsive design and making sure that your site fits and adapts according to mobile devices which I will recommend then 1024x768 is fine. Other wise 960x768 is fine as it will fit in small screen note books and laptops and on mobile devices user can zoom in to see content anyways.