Arggg Resolution in Frontpage 2003

Arggg Resolution in Frontpage 2003

by ZackMI

on Jul 12, 2006 at 2:39:36 pm

Hi all I built this website http://www.sapphirevideoservices.com in Frontpage 2003. It looks fairly good in the resoluiton I built it in, I believe it was 1280X1024, however all the text and everything is totally thrown off in any other resoltion. It looks like garbage! I am totaly new to web design. Can anyone help?

Re: Arggg Resolution in Frontpage 2003

by Curtis Thompson

on Jul 12, 2006 at 3:10:20 pm

hello...

ya - your source code shows that it looks like you've designed your site for a fixed width of 1280 and if the user doesn't have that, the text breaks up. the primary culprit looks to be the long strings of non-breaking spaces ( ) in your layout - if my browser is wide enough those dont wrap, but if not, then they wrap and break code...

the current _max_ resolution that is accepted is 1024 wide, but it is even safer to max out at 900 or so, as while 1024x768 is a very common monitor resolution these days, that means that the user would have to max out their browser window to see your site, which a lot of people won't do. 800-900 is by far the safest max width you want your site to be, unless your layout grows to the width of the screen. but fixing your design to 1280 is sort of a web no-no... :-/

hope that helps!

sitruc

Re: Arggg Resolution in Frontpage 2003

by ZackMI

on Jul 12, 2006 at 3:15:24 pm

Thanks Curtis,

This does help alot. I created my background in Photoshop at 1280, so if I scale them down in Photoshop to say 800 X 600 everything should work out? Won't there be alot of blank space on the right and bottom of the screen for people who are viewing on higher resoltions or will it auto-scale? Thanks a bunch.

Re: Arggg Resolution in Frontpage 2003

by Curtis Thompson

on Jul 12, 2006 at 3:24:36 pm

hello...

yes and no. yes that there will be space, and no - web graphics won't autoscale, and if they're bitmap, they can't really do that anyway (can't blow up pixels so well)...

there's 2 main options when you make a site - when you make it fit to a 900 or so resolution, there will indeed always be visitors that have a much higher resolution. so at that point, you can either:

1. center or somehow artistically fill up dead space
2. write your html to expand to the resolution of the visitor

mac world is an example of #1:

http://www.macworld.com/

it's centered in a column and they just have grey space on either side - it fits in all current accepted resolutions, but some viewers at higher resolutions will have some dead space - but visually it looks fine...

the site i designed for my company is an example of #2:

http://www.cataphora.com/platform/overview.php

if you resize your browser window while looking at that, the upper flag table keeps going to the right and the copy fills up the space - no graphics stretching but rather very long backgrounds that go out very far to the right. i'm pushing it with this design because for the most part, you don't want people to read long horizontal lines of copy on screen as it is hard to do (that's why newspapers have narrower columns). but for typical visitors to our site (something to factor in as well), they will likely be on a max res of 1024x768, so it fits well for them...

designing for resolution is trickier than most realize when they dive in - but with hope the above examples give you some ideas for your own site...

sitruc

Re: Arggg Resolution in Frontpage 2003

by Bret Williams

on Jul 12, 2006 at 4:47:47 pm

Hey Curtis-

That cataphora site is some really nice work. But I'm looking on my wife's 1024 display! I'll have to check it on the cinema display, although even on that display I usually keep the safari window at about 1000 anyway. But I'll max it and see how it feels.

I think also another newbie problem that Zack is having is he's trying to align text items OVER a background. That is almost never possible except with advanced CSS which I don't think he's ready for, nor does his design require it.

But Zack, trying to get the text to land in a ceratin area, even at a specific rez, won't work. You also have to factor in that people can adjust their text size on their own. So even if they have the 1280 screen maxed out, they might increase the text size which would throw off your layout.

Look into using tables and cells with fixed widths for some things, percentage widths for others like Curtis mentined as well. And if you want to use background elements, they can't really be specific if text goes over them. Trying to put a logo or text in the background, then adding html text over it and hoping they don't overlap with word wrap just won't happen.

A design I did similar to Curtis is http://www.wedgephoto.com where the cells stretch to match the browser size. This one stretches in 4 directions and is definitely pushing it because different browsers seem to think different attributes take precendence over others and don't quite display the page the same way. So I split the difference and it looks different, but acceptable on the major browsers.

Re: Arggg Resolution in Frontpage 2003

by Bret Williams

on Jul 12, 2006 at 5:30:12 pm

Doh! I just noticed the Cataphora site can't handle changing the font size on my browser, after I warned Zack about it. :)

Re: Arggg Resolution in Frontpage 2003

by ZackMI

on Jul 12, 2006 at 6:20:21 pm

Yeah,

What I did, and I don't know if this is a rookie mistake but, I made my background in photoshop and then for text that might be changing or any photos i wanted to add, I created a new layer and added the text or hyperlink and positioned it where I wanted it to go. Is this not a good way to do it? I'm very lost...... :(

Re: Arggg Resolution in Frontpage 2003

by Bret Williams

on Jul 12, 2006 at 7:14:42 pm

Well it all depends. For the site you're trying to design it defiitely won't work.

For what you're trying to accomplish, I'd do a lot of it in imageready and create slices. Do the right hand side links in imageready with the text done IN imageready. On the left, I'd just leave it completely blank tan. The resulting table spit out by imageready (save as html) can be the basis for your design in DW.

I'd create each individual icon separately, but with a matching tan bgrnd. Then in DW I'd make the slice for the left area be a bgrnd image. Then create a table within that sliced area (cell) and give it the appropriate rows/columns. Add each icon to a row, then align it left and place the text to the right. Set the width so that it can't expand or intefere with the table.

Keep the logo across the top and don't let it drop down into the page like it does now.

Etc. It gets complex and it's pretty daunting design for a first site, with the curves and all. You could do the whole thing with layers, but it gets complex trying to keep layers aligned in the right place as one expands the browser.

Here's a good example with some instruction on how to keep layers positioned...
http://www.wpdfd.com/editorial/thebox/deadcentre2.html

Re: Arggg Resolution in Frontpage 2003

by Kevin Wood

on Jul 13, 2006 at 2:29:24 am

You should consider getting a book or two on web design, to give you an idea of the basics. Here are a few to check out:

1. The Non-Designer's Web Book 3rd Ed. by Robin Williams
2. Robin Williams Web Design Workshop by Robin Williams
3. Web Design in a Nutshell 3rd Ed. by Jennifer Niederst