Guest SkyRider Posted June 18, 2009 Share Posted June 18, 2009 I'm looking for insights on the difference between browser display and monitor resolution.I am told that in general, you should design to a 1024x768 browser display size. (w3schools says as of Jan 09 browser display stats showed that most computers are using a screen size of 1024x768 pixels or more).So, I would assume if someone is using Photoshop to design their webpage before building it out into html, they should design for their live area to be within the 1024x768 pixel size (and actually they should design shorter -- like around 570-580px since tool bars take up viewing space) -- right?But, when I pose that rationale to a particular designer I work with, he pushes back with "yeah, but it all depends on what resolution your monitor is set at -- they could have a 15" monitor but have their monitor resolution set at 1680x1050."That's where I get confused! (I think he may just be trying to justify his design being too big)However, I still come back to the logic that you can't control what resolution someone has their monitor set at. I would assume that most people aren't tech savvy enough to change their monitor resolution, so designers should still stick to the rule of designing to 1024x768 pixels in Photoshop...right? I ask all this because I am creative directing this person and since my background is in print design -- not web -- I get the feeling he thinks I'm ignorant and misinformed. I definitely want to give good advice and not be considered ignorant, so am looking to all of you as the experts.Thanks! Link to comment Share on other sites More sharing options...
justsomeguy Posted June 18, 2009 Share Posted June 18, 2009 His comment is irrelevant, physical monitor size and resolution are not related at all. If it's 1024x768 it doesn't matter how big the monitor is, it's still 1024x768.The ideal designs are not constrained to a specific size, they shrink and grow as necessary to fill the window. In order to design an interface that you can set up to do that, you need to have horizontal and vertical areas that you can stretch as necessary. I've got monitors running at 1280x800, 1680x1050, and 1920x1200, I try to set up all of my stuff so that it stretches to fill the screen regardless of how big it is. I have a minimum size, around 800x600, where if it gets smaller than that it will just switch to scrollbars, but otherwise it will expand to fit the screen. Link to comment Share on other sites More sharing options...
Synook Posted June 19, 2009 Share Posted June 19, 2009 Most modern 15" laptop screens have a native resolution of 1680 * 1050, but that is irrelevant - it doesn't magically mean less people use 1024 * 768. Link to comment Share on other sites More sharing options...
jlhaslip Posted June 19, 2009 Share Posted June 19, 2009 My Laptop is 1280 x 800.And I design for 1024 display sizes (fixed width) or a full elastic design as mentioned above. Usually a 3 column page with the center being fluid. Link to comment Share on other sites More sharing options...
thescientist Posted June 19, 2009 Share Posted June 19, 2009 this topic always gets me, as I'm still trying to learn the naunces of elastic/fluid design. What happens if you have banner images or background images for your divs? Is there a concern with them stretching out when the page changes (if divs are set to a percentage?) I know the technique of making a left column fixed and then having the content div be fluid/elastic, but take this site im working on for instance:http://www.seasonsnh.com/newsite_test/How would I prevent my banner and page background images from stretching out all weirdly when going from 800 -> 1024 -> or larger? I guess I'm having a little trouble predicting how to accommodate browser and text/font size. Any thoughts on how I would approach it in this situation?I know on the reaper forums http://forum.cockos.com/forumdisplay.php?f=20 for their banner image they have a flexible piece of the banner while the outsides are static, so thus only one part of it expands as the page exapands, which I'm sure I could figure out in my situation, but that still leaves a question of the background image (with the fan + tv) and how I would plan for it to expand without looking stretched. thanks for any help guys. Link to comment Share on other sites More sharing options...
justsomeguy Posted June 19, 2009 Share Posted June 19, 2009 First, background images won't stretch, they'll tile. In the case of that site, one solution would be to have the blue color in the top banner stretch out to the left and right while the main banner stays centered, so at least there's some color going out. It doesn't need to be an image. For the main body you can do the same thing, just extend a color out to the sides, but the white square with the text is the problem, since that's part of the background image you can't stretch that text area out. That specific design probably needs to be centered. You can't always take any design and stretch it out, you need to plan for the stretch when you're making the design. Link to comment Share on other sites More sharing options...
thescientist Posted June 19, 2009 Share Posted June 19, 2009 personally, I think I'm happy with that layout not stretching, but I wasn't sure how looked down upon it was to not have a fluid/elastic design. The white box is a div though, not sure if that makes a difference. I figureed I'd like some input now as I'm already working on more complicated parts and just wanted some input before I really dig into the design. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.