SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Designing on 1920x1200 monitor

    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?

    Thanks much!

    Brian

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool... I hadn't put any thought into the fact that my new, larger monitor was actually going to make things appear smaller.

    There's never a shortage of things to learn. Appreciate the input, ralph.m.

  6. #6
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Brian-1007 View Post
    Cool... I hadn't put any thought into the fact that my new, larger monitor was actually going to make things appear smaller.

    There's never a shortage of things to learn. Appreciate the input, ralph.m.
    Hi Brian,

    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.

    Regards,
    Steve
    ictus==""

  7. #7
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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 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.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Force Flow View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •