Well if you plan to slice and dice then it depends how you intend to lay it out..
tables? css positioning?
There are tons of tutorials out there for this.
If you want your viewers to see things fixed - then it's up to browser resolution..
for and 800x600
don't make your canvas larger than 760 (allow for side scroll)
If creating a liquid css layout.. (or really even tables)
certain parts of your design could be used as backgrounds, fixed images and such.
hth
~dragonsjaw
"Nothing worth having comes without some kind of fight- 'Got to kick at the darkness 'til it bleeds daylight." - Bruce Cockburn
Hi Ben,
I think this is one of those questions like "how long is a piece of string?" On the one hand, the ever-more-mobile society is migrating to handheld devices and Internet-capable mobile 'phones[1]; on the other hand, laptops and desktops are getting wider displays at ever higher resolutions.
It's next to impossible to lay down any hard-and-fast rule when your visitors may have windows that are anything from 300 to 3,000 pixels wide. CSS can obviously help, with styles for various media, and things like the float drop; JavaScript window size detection can also add some flexibility. Some like to measure visitor statistics, but these will be wildly off in a year's time. Hopefully you won't be redesigning your site annually!
Any way you-- umm-- slice it, any design decision is inevitably some sort of compromise. You pays yer money and you takes yer choice.
Well, I didn't answer your question. Hope it helps, anyway.
As dragonsjaw said, first you have to decide how wide youw ant your page. It's helpful to have some page stats to tell you how many people are using each screen resolution (i.e. whether you need to design for 800 x 600 or not). MOck-up sizes would look like this:
Fixed 800 x 600: 760px wide
Fixed 1024 x 768: Fixed 980 pixels wide *
For flexible layouts I usually do a mock-up for 1024 x 768 and consider how the scaling will work while I'm designing (i.e. will anything be forced to be too wide for 800 x 600?). There are many people now who still optimize for 800 x 600 but my stats show that fewer than 5% of my visitors use that resolution so I design it to look "best" at 1024 x 768.
How high your mock-ups are also depend on what you are designing. You may start with just the visible screen area (about 500 for 800x600, 650 for 1024 x 768), but I find that I keep wanting to make mine higher as I continue to work on other areas of the page. As a beginner it may be tempting to focus on the header area but you do need to design the rest of the page as well.
* Cameron Moll had an interesting post about how 960 is the ideal width for grid design when mocking-up for a 1024 x 768 screen.
ETA: Forgot to mention mobile and handheld devices - if you want to design for them you can include a special handheld stylesheet. A lot of handheld browsers will already make adjustments to your page to make it work on that screen - they won't show just a smaller version or a piece of the real version. Check the mobile view in Opera to see how your site looks in their device browsers. More on CSS media types here.
The above responses are great, ideally you want to design for a SVGA or XGA resolution screen, but do keep in mind your audience. If you audience is on the more technical side of things, chances are they're running WXGA or higher (1280x768+). In that case, you can go wider if you want a fixed size. I typically mock up my designs with a photoshop resolution of 1200x1000 just to get a good grasp of what a person with a larger screen will see in terms of the space around the main site (I still constrain myself to around 960px width for the main content).
Sean Hsieh
President / Chief Creative Officer
enVISEAN Media envsn.com
As mentioned, paying attention to the audience technical equipment is very important as finally, people will be the viewers of your web pages and not search engines.
If you are setting up a special best resolution and size, and wonder if people will be viewing the pages with no problem, make sure to specify the points at the bottom of the pages, for example, a message like, designed to be viewed best at 1024x768 screen size.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.
dragonsjaw posted this at 23:03 — 3rd June 2007.
She has: 120 posts
Joined: Oct 2000
Well if you plan to slice and dice then it depends how you intend to lay it out..
tables? css positioning?
There are tons of tutorials out there for this.
If you want your viewers to see things fixed - then it's up to browser resolution..
for and 800x600
don't make your canvas larger than 760 (allow for side scroll)
If creating a liquid css layout.. (or really even tables)
certain parts of your design could be used as backgrounds, fixed images and such.
hth
~dragonsjaw
"Nothing worth having comes without some kind of fight- 'Got to kick at the darkness 'til it bleeds daylight." - Bruce Cockburn
webwiz posted this at 00:28 — 4th June 2007.
He has: 629 posts
Joined: May 2007
Hi Ben,
I think this is one of those questions like "how long is a piece of string?" On the one hand, the ever-more-mobile society is migrating to handheld devices and Internet-capable mobile 'phones[1]; on the other hand, laptops and desktops are getting wider displays at ever higher resolutions.
It's next to impossible to lay down any hard-and-fast rule when your visitors may have windows that are anything from 300 to 3,000 pixels wide. CSS can obviously help, with styles for various media, and things like the float drop; JavaScript window size detection can also add some flexibility. Some like to measure visitor statistics, but these will be wildly off in a year's time. Hopefully you won't be redesigning your site annually!
Any way you-- umm-- slice it, any design decision is inevitably some sort of compromise. You pays yer money and you takes yer choice.
Well, I didn't answer your question. Hope it helps, anyway.
[1] http://emulator.mtld.mobi/emulator.php
Cordially, David.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Megan posted this at 13:05 — 4th June 2007.
She has: 11,421 posts
Joined: Jun 1999
As dragonsjaw said, first you have to decide how wide youw ant your page. It's helpful to have some page stats to tell you how many people are using each screen resolution (i.e. whether you need to design for 800 x 600 or not). MOck-up sizes would look like this:
Fixed 800 x 600: 760px wide
Fixed 1024 x 768: Fixed 980 pixels wide *
For flexible layouts I usually do a mock-up for 1024 x 768 and consider how the scaling will work while I'm designing (i.e. will anything be forced to be too wide for 800 x 600?). There are many people now who still optimize for 800 x 600 but my stats show that fewer than 5% of my visitors use that resolution so I design it to look "best" at 1024 x 768.
How high your mock-ups are also depend on what you are designing. You may start with just the visible screen area (about 500 for 800x600, 650 for 1024 x 768), but I find that I keep wanting to make mine higher as I continue to work on other areas of the page. As a beginner it may be tempting to focus on the header area but you do need to design the rest of the page as well.
Here is another thread with more opinions:
How big are your mock-ups?
* Cameron Moll had an interesting post about how 960 is the ideal width for grid design when mocking-up for a 1024 x 768 screen.
ETA: Forgot to mention mobile and handheld devices - if you want to design for them you can include a special handheld stylesheet. A lot of handheld browsers will already make adjustments to your page to make it work on that screen - they won't show just a smaller version or a piece of the real version. Check the mobile view in Opera to see how your site looks in their device browsers. More on CSS media types here.
Megan
Connect with us on Facebook!
envisean posted this at 08:43 — 27th June 2007.
They have: 4 posts
Joined: Jun 2007
Hi Benf,
The above responses are great, ideally you want to design for a SVGA or XGA resolution screen, but do keep in mind your audience. If you audience is on the more technical side of things, chances are they're running WXGA or higher (1280x768+). In that case, you can go wider if you want a fixed size. I typically mock up my designs with a photoshop resolution of 1200x1000 just to get a good grasp of what a person with a larger screen will see in terms of the space around the main site (I still constrain myself to around 960px width for the main content).
Sean Hsieh
President / Chief Creative Officer
enVISEAN Media
envsn.com
bermuda posted this at 09:53 — 5th July 2007.
They have: 25 posts
Joined: Feb 2007
As mentioned, paying attention to the audience technical equipment is very important as finally, people will be the viewers of your web pages and not search engines.
If you are setting up a special best resolution and size, and wonder if people will be viewing the pages with no problem, make sure to specify the points at the bottom of the pages, for example, a message like, designed to be viewed best at 1024x768 screen size.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.