800x600 / 1024x768... do I have to build 2 seperate sites? 2

kasuals · Jun 25, 2003

Do I have to build 2 seperate sites for the two resolutions? Or should I build the site in 800x600? If so, then the 1024 res makes everything so small.

Whats the best way to tackle this?

I was thinking about writing two seperate templates in PHP and load one based on the screen size...

I was hoping there would be a faster way than that, since the site I'm working on is huge, and quite intensive. I've never had to build an entire site myself, just worried about the application development... lol

Any help would be greatly appreciated guys(and gals).

http://www.angsttechnology.com

- "Delightfully confusing..." raves The New York Times

-Kas

jstreich · Jun 25, 2003

my suggestion, use percentages, and forget about designing for a particular resolution. Even if you know everyone who comes to your sit is at 800x600 or above, there is no gaurntee that they have thier windows maximized... So, ideally, you'll want to use table percentages....

kasuals · Jun 25, 2003

Well, it's not the table and alignment that I'm worried about... that I was going to take care of with percentages anyway.

What I am worried about is the graphics. I'm trying to find a good site to compare this too...

Well... let's just say it's like any of those graphic intensive game sites out there. With a graphical header and left hand border.

The graphics were created in 1024x768... so if an 800x600 viewer hits the site, they will be out of proportion since browsers don't optomize for that.

So I guess my main question is, how would the best way be to handle the display of graphics in multiple resolutions?

http://www.angsttechnology.com

- "Delightfully confusing..." raves The New York Times

-Kas

RISTMO · Jun 26, 2003

My general rule is that if I'm making a site that has a top menu type layout, I make the width no more than 730px. Of course, you could make it larger, or you could make it smaller. That just seems to be the size I use. That way, if they have their browsers mostly maximized in 800X600, it will display correctly for them, and if they are in 1024, it will still look big enough-oh yeah--and I always center it if it's a top menu type layout. There are some tricks you can use like fading into the background color of a page, so it looks more like it was designed that way.

If I'm making a left menu type layout, what I try to do is still make the left menu+header no more than 730, and then for certain templates, it works to extend the header so it "fills" to the width of the page.

You can see a couple of examples about what I mean at these pages....

http://www.ristmo.com/

-- left menu and header with no fill....

http://www.ristmo.com/utai/

-- left menu with header with fill....

http://www.pillarmusic.com/

-- top menu with header fade out to fill....
And I will try to upload another template to

http://www.ristmo.com/meate/

-- top menu with no fill

Those are the four "basic" templates. They work for practically anything.

Rick
P.S. Not all of those templates are complete, they're just examples! ;-)

-----------------------------------------------------------

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

wiser3 · Jun 26, 2003

If your top banner is an image the image will hold the page open to that width. This means an image that's designed for 1024 will result in people will smaller screens/windows will get a scroll bar and have to scroll back and forth to see everything. VERY annoying.

But, if the image is a background it will get clipped at the window edge and no scroll bar comes up. The only problem is that backgrounds don't print.

What i do is make a really wide banner and place it as a background, then put a smaller logo image on top. This way they see the full banner on screen and when they print they still get the logo.

CliveC · Jun 26, 2003

Wiser3

Good Idea!

Clive

http://tubularity.com

kasuals · Jun 26, 2003

Well. The problem is, the graphics are pretty intensive. I couldn't just place a logo on a background unfortunately.

Thank you everyone for your thoughts, but it looks like due to the nature of the graphics I'm going to have to build a template for each resolution in PHP.

I'll just write a perl script to parse everything and create 800x600 templates once I write it in 1024x768.

Thanks again everyone. =]

http://www.angsttechnology.com

- "Delightfully confusing..." raves The New York Times

-Kas

RISTMO · Jun 27, 2003

Could you post a url? I might be able to think of something if I saw the template.

Rick

-----------------------------------------------------------
RISTMO is back! Sorry I've been away for so long--it's been a busy year ;-)

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

SashiRaveendran · Jun 27, 2003

I sometimes determine the screen width on the client using javascript. Then, depending on the screen width, i do a document.write to write out a certain stylesheet. I usually have 2 stylesheets, one for low res monitors and one for high res monitors. This helps to keep everything nice and tidy and is useful as you do not need to write a different version of the site for different resolutions..

if (screen.width>800) {document.write("<LINK REL... Src=\"styleHighRes.css\">&quot

}
else {document.write("<LINK REL... Src=\"styleLowRes.css\">&quot

}

kasuals · Jun 27, 2003

You'll all have to forgive me, I'm a little new to CSS stylesheets. I'm just a programmer lol.

How would I have the stylesheet control the images and tables? Would I be able to define the image width without having to modify the image in Photoshop? The sizes of the file is irrelevant, so if I could have the browser modify the display height/width that would be ideal.

I just need some ideas here. I'd send a link to the pages/templates but unfortunately it's a project that is rather hush hush, and I don't like lawsuits

lol

Unfortunately all the web developers are busy doing a make-over on their main site, so they left the programmers to fend for themselves on the HTML.

http://www.angsttechnology.com

- "Delightfully confusing..." raves The New York Times

-Kas

RISTMO · Jun 27, 2003

Yes, you can do that in CSS like this:

<style>
.img01{
width:100px;
height:40px;
}
.img03{
width:100px;
height:40px;
}

</style>

<img src="01.gif" class="img01">
<img src="another_img.jpg" class="img03">

I can't advertise myself on here, but I can advertise others, so if you are interested, for now or future reference, ScriptLance has a great program going at

http://www.scriptlance.com/cgi-bin/freelancers/r.cgi?ristmo.

Webmasters can find people to work for them, and programmers can find people to work for. I'm sure you could find a very competant web designer who could make that for you very affordably.

Rick

-----------------------------------------------------------
RISTMO is back! Sorry I've been away for so long--it's been a busy year ;-)

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

kasuals · Jun 27, 2003

Thank you, that helps more than you'll ever know.

http://www.angsttechnology.com

- "Delightfully confusing..." raves The New York Times

-Kas

RISTMO · Jun 27, 2003

Great! :-D

Rick

-----------------------------------------------------------
RISTMO is back! Sorry I've been away for so long--it's been a busy year ;-)

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

emcc · Jul 24, 2003

SJRavee,
I tried to incorporate your code snipet listed below:

if (screen.width>800) {document.write("<LINK REL... Src=\"styleHighRes.css\">&quot

}
else {document.write("<LINK REL... Src=\"styleLowRes.css\">&quot

}

The code was placed in a subroutine in the header section of the page. The routine was invoked upon the page onload event.

I was successful accessing my desired css file, but a new page opened up, and covered the original page I wanted to change according to screen resolution. The new page that opened up had the <LINK ...> tag in its source code.

Is there a way from stopping another page from loading when using your strategy above?

Jeff

Vragabond · Jul 25, 2003

Don't really think this would help in any way, but me and some friends at university created a page that had a 800x600 and 1024x768 version. We did separate graphics for it (since it looks pretty ugly if you just resize pictures in html), while using the same files for content which we included in the main document. All the tables in the content had width in % or a predetermined value, which was a global constant defined upon the selection of screen size. But I am afraid aside from the top banner, the site is not very graphics intensive.

here's the result:

http://www.ef.uni-lj.si/spik/

SashiRaveendran · Jul 25, 2003

I place the code in script tags immediately after the body:

<html>
<head>
...
</head>
<body>
<script>
if (screen.width>1024) {document.write("<LINK rel=\"stylesheet\" href=\"Framework1.css\" type=\"text/css\">&quot

}
else {document.write("<LINK rel=\"stylesheet\" href=\"Framework2.css\" type=\"text/css\">&quot

}
</script>
...
</body>
</html>

SashiRaveendran · Jul 25, 2003

The above code should work in most browsers

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

800x600 / 1024x768... do I have to build 2 seperate sites? 2

kasuals

Programmer

jstreich

Programmer

kasuals

Programmer

RISTMO

Programmer

wiser3

Programmer

CliveC

Programmer

kasuals

Programmer

RISTMO

Programmer

SashiRaveendran

Programmer

kasuals

Programmer

RISTMO

Programmer

kasuals

Programmer

RISTMO

Programmer

emcc

Programmer

Vragabond

Programmer

SashiRaveendran

Programmer

SashiRaveendran

Programmer

Similar threads

Part and Inventory Search

Sponsor