web safe area 955 x 600?

[digitalecartoon]

For a maximized browser window on a 1024 x 768 monitor, Dreamweaver (and other sites) says that the web safe area is 955 x 600. I was wondering how this is calculated? I've tried it on a photoshop template: a screendump of a 1024x768 browser window with a scrollbar on the right. When I place a 955 x 600 graphic against the right scrollbar, the top menu and the bottom status bar, I still have about 1 cm of space to the left. I know dreamweaver takes into account the possible scrollbar, but what is dreamweaver thinking I might have on the left of my browser window?

[Charles]

That's just nonsense. There is no such thing as a web safe area for a screen--keep in mind that quite a lot of us, even most, don't maximize our browser windows. And the dirty little secret is that your are the only one that really cares about your pretty layout. We're not going to expand our windows to behold it in all it's glory. We're going to call down heaven against you for making us scroll to the right. You're supposed to design your pages to fit on any size window, and when there is not window at all. But you can't do that with Dreamweaver.

[digitalecartoon]

Well, regardless of that... I was just wondering what this extra item could be on the left which is taken into account. When I use a 1024x768 screendump of internet explorer with a right scrolbar, and place a 955x600 graphic on top of that, it fits nicely against the top (menu, addressbar, etc.), right (scrollbar) and bottom (status bar), but there's 1 cm of space on the left. Not only dreamweaver uses 955x600, that optimised dimention for a 1024x768 window also comes up when I Google for it. Not that I wanna use it, I was just curious for that mysterious item at the left. What could it be?

[Eye for Video]

There is no mysterious item. Keep in mind that not every monitor displays everything exactly the same, so leave a little cushion.That size suggestion is just that, a suggestion. On a 1024 screen you cannot display a 1024 wide Web page without a scroll bar.
Perhaps a better way to test for viewing on that size monitor is to create a sample page and set your main_container width to 1024, then test the page, at 1024 resolution. Try a few different widths until you find the one you like. For example, 1000 wide will display just fine, and you may find it a little easier to work with since it's a round number.
Best wishes,
EfV

[digitalecartoon]

For a duggestion this 955x600 dimension for a 1024x768 maximised window with right scrollbar is mentioned quite often. Not just in Dreamweaver but googling for it in general. Not that I want to use it but I was wondering why they specifically came to this 955 width.

[Four Staples]

I tend to cap my fixed-width layouts at 980px wide. I know I always maximize windows when I'm on a 1024 screen (which I am right now, actually). 955 seems a little narrow... I don't know of anyone with a 69px wide scrollbar.

But, as Charles said, that "web safe area" is nonsense. Anybody can have any number of sidebars or toolbars (seems every piece of software today comes with a useless browser toolbar that is set to install by default) that will reduce the viewing area within their browser window.

Liquid layouts (expand horizontally with browser window) are nice, but not always feasible. I'd try to take advantage of them whenever you can, though. And yeah, Dreamweaver probably won't let you do this.

[ssystems]

Do you account for people that have multiple LSI? So I agree w/ the notion that there is no "web safe" size.

[verikal]

I use 950px - 980px width (depending on the web design).
After using this setting with hundreds of web sites i didn't encountered any problem with this width.

(only a few users with 800X600 :rolleyes:)

[charlitos]

980px is the minimum width in my book. I really dont care if the end user is using 800x600 resolution. My web sites are all about high-tech topics and graphic design, if you dont care about upgrading your monitor you most likely wont give a **** about technology let alone graphic design so please get off my website :D. For god's sake not even cellphones browse the web at 800x600 lol

[rnd me]

You're supposed to design your pages to fit on any size window, and when there is not window at all. But you can't do that with Dreamweaver.


huh? isn't dreamweaver a text editor? i fail to see how it can't do something notepad can. I use DW, and i've never had a problem editing my own CSS with it...

OP:i've lamented often recently that screens are shrinking, not growing.
consider netbooks, tablets, iphones, wiis, kindle2s, etc; the fastest growing categories of user agents all have tiny screens.

I';m not saying 900X600 is a bad place to start, that will be the majority of requests for the next couple years, but don't forget to test usability on small screens.

[charlitos]

huh? isn't dreamweaver a text editor? i fail to see how it can't do something notepad can. I use DW, and i've never had a problem editing my own CSS with it...

OP:i've lamented often recently that screens are shrinking, not growing.
consider netbooks, tablets, iphones, wiis, kindle2s, etc; the fastest growing categories of user agents all have tiny screens.

I';m not saying 900X600 is a bad place to start, that will be the majority of requests for the next couple years, but don't forget to test usability on small screens.

its called mobile.yournamecomeshere.com

[ssystems]

its called mobile.yournamecomeshere.com

And the $100 lappy by AT&T w/ 7" monitor? att.yournamecomeshere.com? What if its a shop subdomain already? att.shop.yournamecomeshere.com? I personally wouldn't setup multiple subdomains just bec my designer can't do his job right. Bottom line is the term "web safe size" (in my opinion) is just a matter of preference either by the client or by the provider.

If you are really that wicked use 100% width and use em all over the place.

Just an opinion :)

[rnd me]

its called mobile.yournamecomeshere.com

a whole 'nother domain to maintain instead of an extra CSS file or two? An extra address to memorize that's different from the one i use at my desktop? that really sounds like one is asking for extra work going down that road. what happened to the CSS zen garden approach: clean content, custom CSS?

[charlitos]

And the $100 lappy by AT&T w/ 7" monitor? att.yournamecomeshere.com? What if its a shop subdomain already? att.shop.yournamecomeshere.com? I personally wouldn't setup multiple subdomains just bec my designer can't do his job right. Bottom line is the term "web safe size" (in my opinion) is just a matter of preference either by the client or by the provider.

If you are really that wicked use 100% width and use em all over the place.

Just an opinion :)

The thing is, you dont NEED to go for a second domain, you can just leave your site as it is and pretty much any smartphone will be able to browse it without any problems. This option is there only if you really NEED a custom design for mobile.

If you're really that "wicked" you should know that the limitations between mobile css and desktop css go beyond basic relative dimensions. There are images, form components and embedded swf files that would not go with the flow of the container on resize, meaning that the content would overflow the templates and pretty much look ugly, impractical and impossible to browse. Also you have to deal with custom mobile browsers who might not necessarily be compatible with your css, xhtml, js structure and coding.

Nowadays smartphones can handle pretty much any website as it is, but if you want a site to be PERFECT for mobile then you NEED a duplicated structure and a new logic. Mobile custom templates might be necessary for big companies that run all sorts of marketing campaigns based on the distribution and presentation of the content on their website. Mobile phones are way too far from desktop monitors for designers to pretend that "this" or "that" button, color, scheme or template would get the same reaction from their visitors browsing on mobile compared to their original visitors browsing on desktop screens. So in these cases a whole new mobile.yoursitenamecomeshere.com is necessary.

I hope this explanation cleared up a few things, but good that you brought up that argument, many designers might be a bit confused about that topic specifically.

[charlitos]

a whole 'nother domain to maintain instead of an extra CSS file or two? An extra address to memorize that's different from the one i use at my desktop? that really sounds like one is asking for extra work going down that road. what happened to the CSS zen garden approach: clean content, custom CSS?

YOu dont need to memorize the new domain name, your code should be able to detect users browsing your site through a mobile phone and redirect them to the respective mobile site. Havent you ever visited facebook.com or google.com on a smartphone? You never get the original site, only the mobile version.

[slaughters]

...Mobile phones are way too far from desktop monitors for designers to pretend that "this" or "that" button, color, scheme or template would get the same reaction from their visitors browsing on mobile compared to their original visitors browsing on desktop screens....I myself tend to design desktop based sites as a fluid layout with a minimum width (don't care too much about height other than try to keep each page somewhere within 1 or 2 page scrolls)

BUT

You really do want to design a different site if you are targeting mobile devices. The audience is different with different needs.

For example, on a mobile phone when visiting a bank page I am more interested in where the closest ATM machine is, or what my current balance is than I am in the corporate mission statement or happy dancing flash movies that tell me how to get a home and/or automotive loan.

Mobile devices call for a totally different design and page content. There is a great article on mobile web design trends over at Smashing Magazine that talks all about this:
http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/

P.S.

I have a netbook with a 1024x600 resolution - so a design tightly focused for 1024x768 device does me no good. (and there are a *lot* of netbooks out there now)

BUT - to answer the original posters question - the extra space you are seeing on the left is a safety margin. Not all browsers have scroll bars of the same width and, the default page margin can add up to 20 pixels (10 left, 10 right) depending on browser and operating system.