Webdesign with large monitors

[RaceJunkie]

I just bought a new iMac 2.4 with the 24" monitor and I'm having 2nd thoughts about it's size now. At first I thought it would be nice to have more desktop but now I'm not to sure.

What I don't like is font's are smaller and some sites do not look correctly. What I was wondering is what do most people do to make sure the websites they build display correctly in smaller monitors when your using a monitor as large as I am?

 

[brisbaneguy29]

Large Monitor

I design and build everything on a 23" cinema display. I have no reservations that I made the right choice. I also have a 17" cinema display attached to the machine that I run at 1024 x 768px. I use that one to check how it look to most people running that res. I find it great to have both, cause I can also see how my site looks to people running the big monitors too. All web design is about compromise, colours, resolution, platforms, fonts etc...

Having the big monitor i find invaluable, but I am sure to be flamed for saying so.

 

[ppc_michael]

What I was wondering is what do most people do to make sure the websites they build display correctly in smaller monitors when your using a monitor as large as I am?

A lot of them use fixed-width designs these days, or one with width that expands/contracts with the browser gracefully.

Another option is to use two different stylesheets--one for large browser widths, and one for small, and have Javascript select the appropriate one.

 

[one3]

I've been designing sites on a 23" Apple LCD for a while now.
The thing to remember is that it's the canvas size (assuming you are using Photoshop) that's what is important. For most sites I design that are approx 960px wide I set up my canvas size around 1200x1000px (giving me some room to work with). the extra screen size is then great for your pallets, tools, etc.

You do have to be mindful to make sure you are aware of pixels sizes of elements you create as the large monitor / high resolution does tend to make you want to design elements that are too large for regular monitor viewing. Just use pixel sizing as a guide initially and in no time at all you should adjust to using the larger monitor.

Fonts - if you are laying out fonts on a design that will be HTML fonts try to set them as "Sharp" or "None" for the Aliasing options.

Overall I think it's just a matter of time to get used to it and always being aware of element size in pixels not what they appear like on your large monitor.

Hope this helps

 

[ppc_michael]

Oops, it appears I misunderstood the question.

I have a 23" cinema display and as stated above, just pay attention to your canvas size in Photoshop or whatever you use. Also keep your browser window smaller to the size of a "normal" dimension.

But what I do is design for both small and large. Other people have large monitors too, so don't leave them in the dust.

 

[RaceJunkie]

Thanks for all the help. I do use photo shop (still a novice) at it though.

If i create a canvas at 1200x1000px how do I know what size the background is on top of it? I have never been able to figure out how to make a certain shape say a rectangular for example 640X 400px and know the exact size of it, unless I create a new image and set the size there and drag it into my current canvas.


I have an extra monitor, but where would I hook it up to the mac?

 

[snickelfritz]

Drag guides to the horizontal and vertical center of your main document.
Set the marquee selection tool to "fixed size".
Set this to your target website dimensions. ie: 800px * 600px

Click within the document window; the 800x600 marquee appears.
Drag the marquee to the center of the document until it snaps to both guides.
Drag guides to the selection boundaries. (they will snap to the selection.)
Lock the guides.

You now have an 800x600 template build your website within.

 

[natureboyuta]

i usually start out with a 800*600 canvas. that way i know it will look pretty normal on a 1024*768 monitor, which is pretty common. also, i switch the resolution of my monitor to 1024*768, which looks crappy, but gives me a better idea of size. also, it isn't a bad idea to preview the website with internet explorer in windows. it has some wicked huge toolbars that take up large amounts of vertical screen real estate. it really cuts down on the room you have for your design at 1024*768. by the way, i only choose that resolution because 15 and 17 inch monitors usually have that resolution or close to it. that way, it will look good for those people and still work for those fortunate enough to have a 24. like me!

--

 

[design-is]

Here is a link to a document which, whilst being old (2002), I still find as useful as when I first read it when I started out many years ago. Hope it helps!

 

[RojoLeo]

If i create a canvas at 1200x1000px how do I know what size the background is on top of it? I have never been able to figure out how to make a certain shape say a rectangular for example 640X 400px and know the exact size of it, unless I create a new image and set the size there and drag it into my current canvas.

The simplest way is to keep your Info palette up. This will show you the dimensions real time as you're making the shape.

 

[James L]

I just bought a new iMac 2.4 with the 24" monitor and I'm having 2nd thoughts about it's size now. At first I thought it would be nice to have more desktop but now I'm not to sure.

What I don't like is font's are smaller and some sites do not look correctly. What I was wondering is what do most people do to make sure the websites they build display correctly in smaller monitors when your using a monitor as large as I am?

Just curious... what sites don't display properly on a larger monitor?

When you design websites you have to remember that you have NO control over the monitor setup the end user has. You don't have any control over their screen resolution, etc. A common thing when people start designing is they design for their own monitors only.

Really what you need to do is to play the odds. Here are some fairly recent browser statistics:

http://www.w3schools.com/browsers/browsers_display.asp

You will see that as of a year ago only 26% of people had monitors greater than 1024 x 768. 86% had monitors that were at least 800 x 600. These stats will have trended towards larger resolutions in the last year of course.

So, when you design, you first need to decide on a 100% width website, or a fixed width one. it is my opinion that as screens get wider and wider, with greater and greater resolution, that people will go with fixed width sites more and more. People don't read long, wide passages well. This is why newspapers and textbooks are in columns.

So, let's say you choose a fixed width. A width of 800 pixels will ensure that almost 90% of people will view your site well in their viewport. If you go with the trend and design for a 1024x768 resolution you will choose a width of around 960 pixels or so. This will be viewable for everyone except the 14% or so who still have 800 x 600 monitors.... who will have to scroll side by side.

When you chose your width, set up your photoshop document as described above and design away. You have no control over how much space the viewer will have around your site, so don't even worry about it! Design for the law of averages and you will be fine.

And never, ever resize the users window!

 

[tominated]

And never, ever resize the users window!

amen to that.

I usually start designing at 1000px width and 700px height