Web Design Question

[nafsder2003]

I figured this was probably the correct forum to put this in. My question doesn't have anything to do with graphic design, it has to do with webdesign. I recently made a website for someone. It is completely based on HTML and an image that I sliced in ImageReady (I let ImageReady do the bulk of the coding and then I edited it to work as I needed it to). I had it validated at validate.w3.org and it passed inspection, so technically it should work on all browsers (unless I am misunderstanding the meaning of validation). Yet I've had complaints that the alignment of everything is thrown off on IE. So I found a website that allows you to view screenshots of the website on all sorts of operating systems and browsers and my site shows up flawless on every operating system and browser except for all versions of IE on all versions of Windows (that's a problem since most people still fall into that catagory.). I can't figure out what is causing this problem. It can't be IE (it works fine on all versions of IE on all versions of Macs) and it can't be Windows (it works flawlessly in every browser on windows but IE). Anybody heard of a problem like this before?

[ProvidenceRI]

Hello!

Welcome to my world. This is a common problem.

W3.org validation just means that the code works in all browsers, but it doesn't look at the visual representation on the screen, which means it could be off.

Most people use IE on Windows, so if it doesn't look good there, I would worry. I tend to optimize my site for IE on XP, then work on other browsers.

If you dont know HTML well, you will need a program like Macromedia Dreamweaver to help you out. I would make sure the version is for PC. That is a visual coding program for HTML.

Graphic design is great on a Mac, but I find web work is best suited for a PC, since most users are on a PC... sigh. That's why I have both a Mac and a PC.

Hope this helps.

[nafsder2003]

Hello!

Welcome to my world. This is a common problem.

W3.org validation just means that the code works in all browsers, but it doesn't look at the visual representation on the screen, which means it could be off.

Most people use IE on Windows, so if it doesn't look good there, I would worry. I tend to optimize my site for IE on XP, then work on other browsers.

If you dont know HTML well, you will need a program like Macromedia Dreamweaver to help you out. I would make sure the version is for PC. That is a visual coding program for HTML.

Graphic design is great on a Mac, but I find web work is best suited for a PC, since most users are on a PC... sigh. That's why I have both a Mac and a PC.

Hope this helps.

No, I know enough HTML to code it on my own. But laziness sometimes gets in the way, and because of that, I had ImageReady do the dirty work. Anyway, I think I'm going to reslice the layout (so that my columns line up a little bit better making it easier for me to code by hand) and then start from scratch.

I can't really design for windows because the only computer I have runs Windows 95 and isn't hooked up to the internet.

[pollux]

Could you post a link to the website you're talking about? This might help...

One thing I'd recommend is to check which doctype the page is using, I had some problems on IE because of that (mainly centering all website data).

[Kit]

IE Windows breaks things just for fun, it's what it does.

Oh, and IE Mac uses a completely different rendering engine, so what works in IE Mac won't necessarily work in IE Windows, and vice versa.

If you post a link to the site, we can debug it for you.

[nafsder2003]

http://www.ncaafootballnation.com/home.html

Don't worry about fixing the content in the individual frames...I'm going to go back and rework all of that. I just can't figure out what's going on with the actual layout. I dumbed it down (took out the navigation, I'll just do that with text), so I can now easily code it by hand, but I would have liked to be able to use the one with the text. Thanks for the help everybody.

[quantum]

IE is probably the worst browser when it comes to adherence to standards. But since most people visiting your site are likely Windows/IE users, you are stuck.

[paynomind]

Yeah, yeah, yeah.. IE sucks.. PCs are trash... ok, enough of that. PC IE = 90% of the viewing public, so make it work in there FIRST.

Good lord, son.

As a web designer and instructor, I give you a 40/100. It started out as a nice image in photoshop, with good colors and balance, and went horribly wrong from there.

First, ImageReadying a photoshop file, and letting it create your HTML is a terrible way to go about web design. Thats not web design at all, really. It is graphic design, shoved into the web, like a round peg in a square hole. Abandon that ship.

Second, this thing is HUGE. Breaking it up this way makes each individual image that makes up the whole thing load before the user can see whats going on. Thats bad design.

Third, iFrames are cute, but they were abandoned for the most part about 3 years ago.

Fourth (i'm gonna stop counting my points) The main reason for mis-alignment is that the tables ImageReady drew are terribly complex, and IE cares how you align images in the cells.

I would wipe the slate clean and start over. Id suggest you start in Dreamweaver yourself. If that isnt practical, throw a couple bucks to a web designer to get you on your way. If the budget doesnt allow for that, go simple! The KISS method works in several ways, keeps the site clean, easy to use, easy to update, and fast to get done with and up online.

Many problems kemosabe.

[nafsder2003]

Yeah, yeah, yeah.. IE sucks.. PCs are trash... ok, enough of that. PC IE = 90% of the viewing public, so make it work in there FIRST.

Good lord, son.

As a web designer and instructor, I give you a 40/100. It started out as a nice image in photoshop, with good colors and balance, and went horribly wrong from there.

First, ImageReadying a photoshop file, and letting it create your HTML is a terrible way to go about web design. Thats not web design at all, really. It is graphic design, shoved into the web, like a round peg in a square hole. Abandon that ship.

Second, this thing is HUGE. Breaking it up this way makes each individual image that makes up the whole thing load before the user can see whats going on. Thats bad design.

Third, or iFrames are cute, but they were abandoned for the most part about 3 years ago.

Fourth (i'm gonna stop counting my points) The main reason for mis-alignment is that the tables ImageReady drew are terribly complex, and IE cares how you slign images in the cells.

I would wipe the slate clean and start over. Id suggest you start in Dreamweaver yourself. If that isnt practical, throw a couple bucks to a web designer to get you on yoru way. If the budget doesnt allow for that, go simple! The KISS method works in several ways, keeps the site clean, easy to use, easy to update, and fast to get done with and up online.

Many problems kemosabe.

Thanks for the critique. As I said, I'm going to dumb it down severely. Same image, but where it was once like 30-something different parts, it is now going to be about 9 (is that still to many?). I'm also going to just flatten the image and crop each individual part rather than letting ImageReady to the slicing for me.

My knowledge is limited to HTML, and other than iframes, I was unaware of any other way to do something along the lines of the polls (switching between the AP and the Coaches). The question and the News articles really don't need to be iframes, and looking back, I don't know why I did them the first time.

Anyway, thanks for the help everybody. I appreciate it. I guess I got a little carried away with a layout and didn't give much thought to how I would get around to coding it.

[CJR]

My knowledge is limited to HTML, and other than iframes, I was unaware of any other way to do something along the lines of the polls (switching between the AP and the Coaches). The question and the News articles really don't need to be iframes, and looking back, I don't know why I did them the first time.

Everything I was going to say (aside from my rant about how layout tables are the devil, but I won't bother with that here) was already said by paynomind, so I'll just touch on this.

You can have swapable HTML segments by using DHTML (CSS + JavaScript). Wrap a DIV tag around each poll and give them each a unique ID. Have one of the divs default to being invisible while the other is visible. When you click on the link to make the switch, rather than taking you to a new page is executes a JavaScript function to hide the visible DIV and show the hidden one.

[pcgd]

Everything I was going to say (aside from my rant about how layout tables are the devil, but I won't bother with that here) was already said by paynomind, so I'll just touch on this.

JR has that rant too. Must be the webguys joke about the graphic designers who pretend to design webpages

[pollux]

Everything I was going to say (aside from my rant about how layout tables are the devil, but I won't bother with that here) was already said by paynomind, so I'll just touch on this.

JR has that rant too. Must be the webguys joke about the graphic designers who pretend to design webpages

But whenever a table layout is used, we KNOW it can't be professional!

[Mings]

My knowledge is limited to HTML, and other than iframes, I was unaware of any other way to do something along the lines of the polls (switching between the AP and the Coaches).  The question and the News articles really don't need to be iframes, and looking back, I don't know why I did them the first time.

Everything I was going to say (aside from my rant about how layout tables are the devil, but I won't bother with that here) was already said by paynomind, so I'll just touch on this.

You can have swapable HTML segments by using DHTML (CSS + JavaScript). Wrap a DIV tag around each poll and give them each a unique ID. Have one of the divs default to being invisible while the other is visible. When you click on the link to make the switch, rather than taking you to a new page is executes a JavaScript function to hide the visible DIV and show the hidden one.

Anyway you can tell a brother how o do that, so he can start getting rid of the flash on his website?

[pollux]

Put this function in the head of your document:

<script language="JavaScript">
function switchDiv() {
    if (document.getElementById('div_1').style.display=='block') {
        document.getElementById('div_1').style.display='none';
        document.getElementById('div_2').style.display='block';
    } else {
        document.getElementById('div_1').style.display='block';
        document.getElementById('div_2').style.display='none';
    }
}
</script>

And this in your HTML:

<div>
    <div style="display:block" id="div_1">
        First div
    </div>
    <div style="display:none" id="div_2">
        Second div
    </div>
</div>
<a href="" onClick="switchDiv(); return false;">Switch!</a>

Of course the switchDiv function can be changed to switch between more than two divs, by passing the number of the current div and the number of the div you want to show.

[CJR]

^^ What he said.

JR has that rant too.  Must be the webguys joke about the graphic designers who pretend to design webpages

You guys worry about making it pretty, we'll take care of making it actually work

[bhambruiser]

since i am fairly new in web design I will share this

the transformation from purely graphic design to web design is a rough one. It was for me anyway.

I started doing everything in flash (which works for some), but since I have discovered XHTML and CSS my life has been much easier.

If you can avoid frames - do it....they only serve to frustrate and confuse.

pure XHTML / CSS layout is clean, professional and easy (once you get the hang of it)...plus it is easily adaptable to web standards.

$0.02 deposited

[ABCJr]

Well, I'm going to venture into retard-land to ask the question. Obviously I don't know what I'm doing...

What is wrong with using tables as layout mechanisms vs. CSS? Are there browser problems? Is it purely a philisophical thing or does it hurt performance? I really would love to know.

[CJR]

Technically it hurts performance but in a very minor way, files that use tables require more code and therefore are larger, which means they take longer to download. Since it's a text file, though, it's usually a very minor difference.

The big thing is that tables were not meant to be used for layout. When HTML was developed, everything had a purpose. None of it was about presentation, it was about structure. Then you started seeing presentation tags added (<font>, for example) so that people could make things look pretty. HTML wasn't intended for people to make things look pretty so people kept finding ways to make good design by adding new HTML tags and bastardizing the ones already in use. People started putting images and layout elements into tables when they were only supposed to be used for data (TD = table data).

Using the various HTML tags for what they're actually intended creates semantic code. This is more likely to be readable not only for the various computer-based web browsers but also for cell phones, PDAs, screen-readers and search engines. Even if you don't care about the first three, you should like the last one because everyone wants to be ranked better in the search engines.

Semantic code was difficult to accomplish before CSS and XHTML came along. Without CSS, there wasn't really a good way to avoid using FONT tags or layout tables. Even now, not all CSS is represented the same in each browser (I can't frikkin' wait until IE supports the min-height and min-width attributes), but there are workarounds for a lot of that.

Long story short: XHTML with CSS is the way you're "supposed" to do it now. Not everyone does, that's your choice. XHTML/CSS is better for accessibility, better for search engines, and the correct way to write code, but it's also quite a bit more difficult.

Oh yeah, CSS also gives you centralized control over your layout (assuming you're not already using some form of include). If you want to make your header 10px taller in CSS, you edit your one external stylesheet and it applies to every page. With layout tables, you have to edit every page that the table appears on and make the change.

[ABCJr]

First, YzerFan19, I can't tell you how much I appreciate your clear response. I've been trying to read as much as I can about this battle in the last couple of days and it seems most people try to explain this with a certain air, one that should be reserved for the building of civilizations rather than web design.

I am a graphic designer first and web developer second, but I've been writing code for 19 years. I respect the "right way" to do things and realize that sometimes you HAVE to sacrifice the visual representation for cross-browser compatibility and accessibility. I'm easily converted to "the right way" if I know that a) it's the best way, it will do for my clients what they ask and c) that it works for a majority of people visiting the site.

However, my major question is... what now? I've been building web sites for years, though "just got back into the game" about a year ago after about 3 or 4 years hiatus. Needless to say, things have changed. I'm teaching myself new methods and reading all that I can because, I don't want to just know how to make things "pretty," I want to know how to make things right. I've been using tables as basic structure, building them and the rest of the styles with CSS. I've been using PHP for "consistent" elements so that if I change one, I can change them all.

Here are a couple of examples of client sites I've been developing. The link goes to my company site which is not yet complete (grr...).

Examples:

The Right Matchmaker

Stick Greetings

Am I doing my clients an injustice by developing web sites in the way I am doing it now?

[bhambruiser]

some good reference materials to hopefully answer some of your questions:

Jeffery Zeldman's Website

This is like the standards and web accessablility god or something. He "converted" me to the XHTML/CSS way.

CSS Vault

This is a great site that displays a gallery of great sites built with XHTML and CSS.

CSS Zen Garden

When I would get frustrated with CSS and all of the difficulties of it I always came back to this site. It completely changed my mind about all of it. Some of the things you can do with CSS is amazing and this site shows it. "Making it Pretty" is NOT taken out of the mix when you design for cross browser-compatibility.

As for your clients- you are actually doing them a favor by switching to this method. Saves bandwidth, and saves time updating and making changes.

hope this helps a little. I am not very experienced with this, but these are some of the sites that helped warm me up to XHTML and CSS....happy coding.