Web Design

[bluesky74656]

A question for the web designers: how do you write modern, clean, and efficient code and have it render correctly and render on Internet Explorer. It seems that whenever I design a website, I spend upwards of a couple hours tweaking so that Internet Explorer doesn't make it look terrible.

Also, if you would like to take a look at my latest project, http://www.thefest.us/ and give me some constructive feedback, it would be appreciated. I've pretty much taught myself web design and I need to know where I'm behind the curve. Thanks!

 

[jesse]

A question for the web designers: how do you write modern, clean, and efficient code and have it render correctly and render on Internet Explorer. It seems that whenever I design a website, I spend upwards of a couple hours tweaking so that Internet Explorer doesn't make it look terrible.

You spend hours and hours tweaking so that Internet Explorer doesn't make it look terrible. I've been doing it day in and day out for the last 8 months.

 

[bqmassey]

A question for the web designers: how do you write modern, clean, and efficient code and have it render correctly and render on Internet Explorer.

I wish this was an easy question to answer, but it really isn't. Microsoft implements CSS however they feel like, and it's been a problem for developers for a very long time. The only thing you can do is build your sites from the ground up, and test them in multiple browsers each step of the way. When a problem comes up, fix it before moving on. There will always be some kind of sacrifices you have to make to achieve cross-browser compliancy. The real skill in developing web pages is figuring out how to mitigate those compromises.

Like I said, build your sites from the ground up. Lay out the divs to accomplish the sizes, spaces, and flow that you want. Make sure it's working in all of your target browsers before you move on. This will save you a lot of trouble along the way. There is a great extension for Firefox, the Web Developer toolbar, that will do things like outline all of your divs or table cells so you can see how they're positioned.

If you're having problems with a particular element, search for it online. You can normally find some clever work-arounds for the most common problems--ways to achieve the same effect differently. I don't recommend browser hacks, though. They're not worth the effort.

Validating your code is a good idea. That toolbar helps with that, too.

 

[terzap]

Keep it clean, keep it simple, and know where the issues are going to happen as far as the incompatibilities in the code. I can understand your frustration. There are a lot of sites with good tips like Builder.Com and others.

We just have to deal with Internet Exploiter one bug at a time.

Good luck! BTW, your site looks nice on Macintosh. It is clean, simple, not overloaded with useless graphics and bling, loads fast, and is easy to navigate.

And bonus points for making your text easy to READ! I get frustrated with sites that use three point fonts (well, real tiny for everything) or low contrast so the fonts disappear into the background color. I saw some punctuation that I'd change (I can't help it, I also edit to pay the rent), but overall:

It looks super for someone who just jumped in and learned hands-on--heck, it looks better than a lot of...ahem...professionally designed sites I've been to lately.

I give it a two thumbs-up and a huzzah!

 

[SkyHog]

2 words: Piecemeal GIFs.

 

[AuntPeggy]

Looks good on Firefox 2.0.0.2 (and 2.0.0.3) and Vista with IE7. On IE6 (sp2), the background color on the left-border image does not quite match the background color of the page, so you can see the transition from the image to the background.

 

[AuntPeggy]

CSS Sources I have put into my "Favorites" (summer good):

AlexKing Styles: alexking.org/index.php
BrainJar.com: brainjar.com/css/positioning/default.asp
CSS Guide: westciv.com/style_master/academy/css_tutorial/
Converting: websitetips.com/articles/css/intro1/
CSS Interactive Tutorial: davesite.com/webstation/css/
CSS Float: bigbaer.com/css_tutorials/css.float.html.tutorial.htm
Killersite: killersites.com/Tutorials/cssTutorialPage1.htm
Floatutorial: css.maxdesign.com.au/floatutorial/
Glish: glish.com/css/
Guide to CSS: htmlhelp.com/reference/css
Mako: mako4css.com/Tutorial.htm
Complete CSS Tutorial:echoecho.com/css.htm
w3Schools: w3schools.com/

Prefix in every case is http://www.

 

[bluesky74656]

Looks good on Firefox 2.0.0.2 (and 2.0.0.3) and Vista with IE7. On IE6 (sp2), the background color on the left-border image does not quite match the background color of the page, so you can see the transition from the image to the background.

Yeah.. I'm using an IE6 .png hack. It works other places, but I'm not sure why it won't stick with that image. I figure it doesn't look too terrible, and hopefully most of the unwashed masses will have had IE7 pushed down their throats. Stupid hack keeps my CSS from validating too. Grr...

 

[bluesky74656]

Just an update.. the higher ups aren't happy with it, so the site's soon to be blown away for something more "flashy." A guy made it in a couple hours using Frontpage.

Figures...

 

[jesse]

Just an update.. the higher ups aren't happy with it, so the site's soon to be blown away for something more "flashy." A guy made it in a couple hours using Frontpage.

Figures...

I think your layout is pretty decent. I'm curious to see what they replace it with.

 

[KennyFlys]

Todd,

It's pretty cool you have Michael W. Smith showing up. I have great respect for him not only as a true Christian artist but for some of the things he's done. When asked to be part of the tribute immediately after Columbine, he didn't hesitate at all to be there.

 

[mikea]

Just an update.. the higher ups aren't happy with it, so the site's soon to be blown away for something more "flashy." A guy made it in a couple hours using Frontpage.

Figures...

Resistance is futile. You will be assimilated.

Welcome to the Idiotcracy.

Did he put in animated flames?

 

[bluesky74656]

Resistance is futile. You will be assimilated.

Welcome to the Idiotcracy.

Did he put in animated flames?

No, but there are no less than 5 javascript image rotators.

In all honesty, with the exception of the moving pictures thing it doesn't look half bad. I'll need to do a lot of work on the back end to make it to my liking, though.