I’m a web designer and just purchased a 1920 x 1200 monitor. I have a dual monitor setup – my second monitor is 1680 x 1050. I do my design work on the larger 1920 x 1200 monitor but am finding the graphics I create look too large when I view them on the smaller 1680 x 1050 monitor. Same issue when doing HTML/CSS work – the layouts I make, or font size I choose, look different depending on which monitor I’m viewing them on.
Since the majority of people viewing my designs will have a lower resolution monitor than the 1920 x 1200 that I’m doing my design work on, I’m wondering what web designers who work on larger monitors do to ensure their designs look good on smaller monitors.
I don’t want to have to keep moving my designs to my smaller secondary monitor to see how they look. I don’t know, maybe that’s my only option.
Any designers out there have any wisdom they can share with me?
The monitor size shouldn’t matter - simply resize the browser to check how it looks at different sizes. With a 1920x1200 monitor you will be able to check how it looks at sizes from 1900x1150 all the way down to 200x200 without any difficulty.
Thanks for the reply, felgall. I’m aware of designing for different screen sizes (i.e., different real estate available on different size monitors).
The issue I’m having is the actual size of the elements on the screen. So, for example, if I create a call-to-action button graphic on my 1920x1200 monitor, when I view the graphic on my 1680x1050 monitor the dimensions of the button looks too large. Or if I view a web page everything (font, graphics, browser, everything) appears larger on my smaller 1680x1050 monitor than it does when viewed on my larger 1920x1200 monitor.
It’s making my design work difficult because I feel like I have to make all my graphics smaller than looks good to me so they are a good size when viewed on a monitor resolution that most people have.
You could change the resolution of your own monitor if you want—at least while you are designing. This is all part of web design, though. The important thing is to make sure content is accessible and don’t break in various environments. You have to expect things to look different from device to device.
You may want to look at media queries that allow you to set different CSS styles based on the current browser dimensions. This can help you change the size of headings, paragraph text, images… when the browser is maximized on computers/screens that support large dimensions and for small devices such as mobile phones with small resolutions.
You really don’t need to change the resolution–typically changing the size of the browser window is enough. There are various extensions/plugins for the different browsers in order to set pre-defined sizes.
Sure. It just seemed that the OP is specifically talking about resolution, rather than screen/viewport size. I have an iMac, and so does a friend of mine, but the friend’s Mac has a smaller screen and a lower default resolution, and things do appear differently there (a lot bigger). It seems that the OP finds that some design elements on lower resolution screens look too big, which can be tested on his own machine by lowering his own screen resolution.