Any web designers?

[PseudoChef]

Please forgive my n00bness.

Here's the story. Our lab webpage (where I work/study) needs to be updated because it's bad...not Geocities pink background and flashing .gif bad...but pretty bad nonetheless. I think it's like 8 years old, seriously. Anyway, for some strange reason, my boss thinks that I am the best candidate for this makeover job.

Thing is,I know very little about web design. That's ok, because my site only needs minimalist things like a research description, links to pages that are already out there, member bios/pictures which are already done, and a password protected members section for internal group calandars/databases/information. I can handle all that, and have already figured most of it out.

I even solved a great mystery yesterday by getting my firefox page to look the same on IE (I think).

Thing that I can't figure out how to do is get it the same for all screen resolutions. Is this even possible? What are the tricks to doing this? I've tried playing with px and % and it'll make one look good and another get all shot to hell. What gives?

I'm using CSS, btw.

 

[rdwj]

I do quite a bit of web development. If you use the px settings, you get a more exact presentation, but the layout will look funny on certain settings. The % gives you a better spacial presentation, but you lose the exactness. I tend to favor the % and try design toward the middle of the road resolutions.

In other words, we're not dealing in print here where we have full control over layout. We have to determine the best way to meet the needs of the many and try to minimize the problems of odd-ball settings.

 

[MikeFlynn74]

Most web designers set thier pages for 1024x768 as this is the most general resolution-

What program are you using?

 

[PseudoChef]

Program for designing the page?

If that's what you're asking...uhhh....notepad

 

[JimC]

What gives is that HTML was never designed to do presentation layer document finishing. CSS does a remarkable job given the limitations it has to work within (and how poorly the standard is implemented on some 'popular' browsers).

At the end of the day, you truly have very little control over the end result, and you are best not to be overly picky about exactly how the client displays the data. because if you are you will go so far down the rathole you'll never get out. Every browser, and every version has a different take on it how to display something and coding around each idiosyncrasy and resolution is essentially a life long, never ending effort.

 

[olllllo]

I'm sure there are other tools, but I find this to be a simple way to view a web page using different resolutions.

WindowSizer
WindowSizer.zip
(13kb Archive w/ source)
Sets a given window to an exact size in pixels. Useful for web developers who want to see what their site will look like at various resolutions.

Source:

http://www.mlin.net/other.shtml

 

[Mutilated1]

Most web designers set thier pages for 1024x768 as this is the most general resolution-

Thats what I do. I set one monitor at 1024x768 and another monitor at 1280x1024 and then just drag the browser window back and forth to check how it looks. There is also a firefox extension that will size the browser to 800x600 and other resolutions so you can quickly check your pages.

I once had to update our labs webpages and documentation, and what I did was go to ( http://www.w3.org/ ) and snatched the style sheet off of one of the standards page(s) ( They used to look a lot nicer than they do now ). After that, I added our corporate logo to the page, and stuck to simple html tags for layout <h1>, <h2> etc... avoiding fonts or any esoteric CSS elements. I turned out really nice, and my boss told me it was the best layout design he'd ever seen, which was nice because I was a programmer not a designer.

Generally the screen resolution thing is pretty dificult, the only way you'll ever get it looking the same at all resolutions is stick to simple elements for layouts, don't try anything fancy like multi-column div based CSS layouts, absolutely avoid tables.

I suggest you find out what sreen resolution is most common, design for that, and test for one higher and one lower and call that good enough. If you run into any really strange problems, check http://www.positioniseverything.net/ so great info there for why the layout gets hosed on certain browsers.

 

[PseudoChef]

What gives is that HTML was never designed to do presentation layer document finishing. CSS does a remarkable job given the limitations it has to work within (and how poorly the standard is implemented on some 'popular' browsers).

At the end of the day, you truly have very little control over the end result, and you are best not to be overly picky about exactly how the client displays the data. because if you are you will go so far down the rathole you'll never get out. Every browser, and every version has a different take on it how to display something and coding around each idiosyncrasy and resolution is essentially a life long, never ending effort.

Yeah in all my searching and reading last night, I figured this out.

Surprising thing is too, is that I was told to not use tables (from the sites I visited). However, lots of the webpages I've been looking at source code for, that show up great on all resolutions, are still using tables. Maybe I'll revert, I dunno.

 

[MikeFlynn74]

Well notepad is good as long as you are proficient-

But there are many programs like Dreamweaver that Make web design truly easy

 

[PseudoChef]

Well notepad is good as long as you are proficient-

But there are many programs like Dreamweaver that Make web design truly easy

I looked at dreamweaver and was confused in 20 seconds.

 

[rdwj]

I looked at dreamweaver and was confused in 20 seconds.

Dreamweaver is a nice program. You can use the layout view and look at pages much like Word. Ya, it will give you extra code here and there, but it's not bad. When your skills increase, you can use to author just about any type of web code.

 

[5 Is Not Enough]

You should link to the current site.

Dreamweaver is a great tool, you just have to learn how to use it w/ hand code, not instead of...

You will want to consider css, but a table will be ok in most situations. Generally, sites perform better in search engines when designed in css vs tables. They also load quicker. Even if you use a table for the main layout grid, you will want to use css for most of the design elements.
Edit: oops, just saw your op says "using css". you're definitely on the right track then...

 

[PseudoChef]

Here's the main layout that I'm playing around with right now.

To me it's looking fine in FF at 1200*800, but is fubared in lots of other configurations.

 

[5 Is Not Enough]

Step 1, fix errors

Step 2, download FF webdev extension, so you can constantly validate.

CSS is a serious PITA when you're getting started, but I'll be happy to help as much as I can...

 

[Kevin Dean]

You ask an age old question.

I'm a web programmer but I've got a bit of design experience.

If you want to make a site that looks good in ANY browser (I also work on .mobi sites) on any resolution, you almost MUST use CSS. Use of large raster images (like banners or massive repeating backgrounds) is a no-no.

Having checked out your source, it seems as if most of the things there are using percentages rather than pixels which is a great start.

1.) font: small-caps 900 13px arial;

It's considered "bad form" to specify font sizes and font faces specifically. The user will have a default font size that's best for them (yours might default to 11 point while my grandmothers might default to 24 because of her vision problems) so using "em" is better there. 1em is the user's default text size - to make it bigger (say a heading) try 1.1 for 110% or 3em for 300% and so on. If you're basing your 13 there on a default of 12 try 1.08em for the same effect.

It's also considered "bad form" to specify fonts - not all users will have your font (yes, even Arial which doesn't ship on GNU/Linux, BSD, or Solaris - systems that are quite likely to be in use by someone visiting a biochem site) It is best to specify font families so that an "Arial equivalent" will be used rather than the browser default (which is what will happen of the system doesn't have the "Arial" font.

font-family: arial;
font: small-caps 1.08em;
font-weight: 900;

2.) The use of banners (or any large raster images, for that matter) constrains you some. Your site will have scrollbars if the viewer has less than an 800 pixel-wide screen (such as my Neo1973 or the iPhone). Some people argue that this doesn't matter since the number of people using that is irrelevant (and because there is .mobi) but the number of mobile browsers is increasing rapidly and if that matters to you it's something to be aware of.

I code by hand in a text editor called nano, (

) so don't fret using Notepad. It's really all you need, and good luck!

 

[PseudoChef]

Thanks for your help, guys. I really appreciate it.

 

[PeteOz77]

Or, if you own a Mac, you can use the FREE application called iWeb, and build a great web site in less than an hour....