Topic awaiting preservation: a couple questions abuot website design (Page 1 of 1)

Hello everyone, I wasn't sure if this should go here or in website reviews .. if that's the case could someone please move it? I found this site a couple weeks ago when I was learning Javascript. I've decided since then that if I am going to spend the time to learn JS that I'm going to learn everything. I'm going to put up a website soon, it probably won't have any real content, it will mostly be for me to practice XHTML, CSS, JS .. all of that. I just have a couple questions about good design.

I've heard a lot of people say that frames are terrible but I haven't seen any real reasons why. I'm assuming its because people who use text only browsers or cell phones would have a hard time navigating the site, is that correct? I know that I should keep graphics to a minimum and use JS to preload them so the page displays smoothly. I plan on using something similar to the tool on www.colormatch.dk to make sure I have a non sucky color sheme. I've seen some places suggest that you design the page to be viewed at 800x600 resolution, is that still the case?

That's really all that comes to mind right now. Is there anything I'm missing or does anyone have any good suggesstions? Thanks for all the help, this is a great forum.

-gunder

gunder: Welcome - hope you enjoy the place

We have done the rounds on this question before and frames have plent of minuses and no pluses that some other approach can't do. Have a look here and feel free to ask questions lots of questions:

Should I use frames or iframes and if not what are the alternatives?

___________________
Emps

The Emperor dot org | Justice for Pat Richard | FAQs: Emperor | Site Reviews | Reception Room

if I went 'round saying I was an Emperor just because some moistened bint had lobbed a scimitar at me, they'd put me away!

Personally I think frames are just ugly. They also can break up the general UI by placing scrollbars all over the place.

Iframes and scrolling divs can be usefull in some situations



.:[ Never resist a perfect moment ]:.

quote:

---

gunder said:

I've seen some places suggest that you design the page to be viewed at 800x600 resolution, is that still the case?

---

It was never the case. Pages should be designed to function properly & display decently at any resolution.

Check (X)HTML with http://validator.w3.org/, CSS with http://jigsaw.w3.org/css-validator/, and JavaScript with some debugger (decent browsers (can) come with one).

If you care about compatibility between browsers that care about standards and Internet Explorer, use a Strict doctype (without XML prologue if using XHTML [which, btw, you shouldn't bother using unless you have a specific reason to]).

Avoid specifying dimensions in pixels.
Use the PNG image format whenever possible (which should be basically always) / Use Pngcrush for extra compression.
Do not use tables for layout. Use CSS for layout and tables for table data (data that needs to be in a table to make sense [or possibly is just more easily made sense of in table]).

Try to write your content first. I.e., prepare your data with the semantically correct tags only (h1, etc for headers; p for paragraphs; table for table data) THEN add/alter code (only if necessary [or merely more convenient]) to make it appear as you desire.
If you happen to just get transfixed by a visual idea without having any content to prepare first, just try and slim it down to as little code as necessary retroactively.

Don't use Java or Flash unless you need to (or unless it's an exercise specifically for entertainment/curiousity/etc).
The same notion should generally apply to JavaScript, too, but JavaScript is usually far less annoying than Java and Flash and can make a website much more enjoyable/functional with no (or few) drawbacks. A website should generally never rely on Java, Flash, JavaScript or the like to function (obviously if a site's only purpose is to show off JavaScript or present multimedia or complex interactivity it might make sense - but in general please no :P).

Another tip.
Get into the habit of concentrating on adding functionality to the site if the visiting browser supports it instead of removing functionality if it's not supported.

Why this?
A common way up to now has been to create a site based on all the latest things such as DHTML, HTTPRequests, DOM manipulation, XHTML, CSS and what not, then as a browser that doesn't support all that you must start to remove things that doesn't work. This is in my view just as bad as the really old way to design for different browsers.

I'd say, start with a clean XHTML site that is perfectly readable for humans, spiders and screenreaders without any scripting, CSS or other cool stuff.

That way you are home free with the absolute basics, everyone can access and use your content.
Now you can start with adding style, use the linked in stylesheet for the basic styling. Then add the stuff only supported by newer browsers through "import", that will never load in older browsers. If you want to do cool scripting, test first if the browser supports what you want to do, if it does, use it, if not don't.

If you do it this way you will never lose the core of the site, but you will keep ading cool stuff that enchances the site for those who can handle it, those who can't won't get broken functionality.

This takes some planning and some time to perfect, but the benefits are very real, especially as you get into charging clients for your solid work.

Good luck and don't forget to have fun
/Dan

{cell 260} {Blog}
-{ ?The Internet treats censorship as a malfunction and routes around it.? (-Barlow, John Perry) }-

Dan, that is some great advice there. I haven't heard it put that way before and it makes a whole lot more sense that other ways that it has been explained.

I might argue using PNGs. I am still under the impression that IE does not support the PNG image. I could be wrong, I haven't really done real web design in about a year now.

Dan @ Code Town

gunder: frames/iframes are evil because the URL is not accessible for the users to bookmark/send to a friend/... and if you link directly to a frame you won't have the navigation unless you put a piece of script in every page to load the frameset and force the main frame to load the initially requested page. You see this is really annoying for you and the visitors.

WarMage: IE do not support transparent PNGs natively. You have to hack the XHTML to put a DX filter to get them working. On the other hand I've often noticed that IE does not handle the colors/gamma(?) of PNGs correctly. damn!! the specs of the PNG format are available since october 1996 and 8+ years later MSIE is still incapable to handle them correctly.

Wow! Thanks for the great advice everyone, I really appreciate it. I'll try to keep this all in mind and maybe I'll have a site to throw up in the page reviews forum soon. Thanks again for the help.

-gunder

quote:

---

WarMage said:

I might argue using PNGs. I am still under the impression that IE doesnot support the PNG image. I could be wrong, I haven't really done realweb design in about a year now.Dan @ Code Town

---

quote:

---

poi said:

WarMage: IE do not support transparent PNGs natively. You haveto hack the XHTML to put a DX filter to get them working. On the otherhand I've often noticed that IE does not handle the colors/gamma(?) ofPNGs correctly. damn!! the specs of the PNG format are available since october 1996 and8+ years later MSIE is still incapable to handle them correctly.

---

You're both wrong. What IE does not support is alpha transparency. It supports PNGs fine, but only transparency if they're using indexed colors - so basically you get transparency as good as GIF allows (which still means you have no business using GIF ).

Like poi says you can add little JavaScript fixes to make IE support the alpha channels (haven't seen one for PNG set as backgrounds yet), but honestly there is rarely ever a need to bother - most of the time you know exactly what the color(s) behind your images will be (or you can just not use far out backgrounds).

I have seen IE mess up the color before, but if memory serves it is a rare occurrence. If anybody finds it happening again, do let us know so we can pinpoint exactly the issue and possibly find a workaround.

If IE doesn't support alpha transparency in PNGs then it is not supporting the PNG. Native support means supporting everything, not what you can be bothered supporting. Otherwise you could say that IE natively supports CSS2 becuase they support *parts* of it.


Justice 4 Pat Richard

quote:

---

Skaarjj said:

If IE doesn't support alpha transparency in PNGs then it is not supporting the PNG.

---

That makes no sense (or is absurdly technical).

quote:

---

Skaarjj said:

Native support means supporting everything, not what you can be bothered supporting. Otherwise you could say that IE natively supports CSS2 becuase they support *parts* of it.

---

Humm...to me "native support" means you don't have to add anything to something to have support for it.

reisio: Check this page. It shows 3 DIVs having a gradient of 16px from 666 to 000 in png8, png24 and gif. Compare the result in IE and FF.

The difference is subtle but take a screenshot and position any of the DIV with a PNG background in Difference over the DIV with the GIF background and you'll see that IE do not even handle correctly the colors in PNG images. Or you can also use the original gradient in BMP 24bits and position it over the gradients in the different file formats.

Regarding your remark about the rare occasions where alpha transparency is needed over a background. It happens more often than you can expect. The design of my my site is not sophisticated at all, yet I've had to do an incredibly ugly thing ( in my opinion ) to do the shadows of the main content area, at the top, where it blends with the shadow of the horizontal banner. I've had to add 2 f*****g DIVs ( called fixPngShadowLeft and fixPngShadowRight ) to fix IE's incompetence to handle PNGs.

To me, if alpha transparency does not work (natively) and the colors are not displayed correctly : PNG are a no no for IE, and GIF unfortunately still does a better job for good old 8bits images with binary transparency ( wow! ). That's incredible, we are bound to use a file format designed in 87 and improved in 89.

All in all, the flawed PNG support of IE is one of the many solid reasons to urge the visitors to drop that crap and use a decent browser.



(Edited by poi on 04-24-2005 12:51)

As I just said in IE7 and the web standards

IE7 beta 1 (will) support the alpha channel in PNG images. Pheww, that was about time. And before you jump in the air, don't forget that IE7 beta is only due for this summer, and only for winXP SP2.



(Edited by poi on 04-24-2005 15:13)

Sorry to jump into this late;

Poi: Do you think the png color difference in IE might be due to gamma correction somehow?


 

quote:

---

reisio said:

That makes no sense (or is absurdly technical).

---

It makes perfect sense (if you think about it). PNG's specs have been out and freely available for years now. If IE only manages to support part of that (rendering the base image itself, minus any alpha channel(s) and minus correct colouration) then IE is not supporting PNG itself. They are supporting an adulterated version of PNG, but not PNG itself, becuase PNG doesn't have problems with colouration and has alpha channel transparency.

quote:

---

reisio said:

Humm...to me "native support" means you don't have to add anything to something to have support for it.

---

But to what level? IE has the capability to render certain select elements of CSS2, but would you then call this 'native support'? I wouldn't. The implication that you would have to add something to a program in order to get results means that, in essence, the capability is not there before that. I know some wouldn't agree with me, but to me there is no fuzzy line between 'supported' and 'unsupported'. Supporting parts of something isn't good enough to call it support. You can't say that IE supports CSS2 becuase it doesn't support a whole lot of it. As such then IE does not have 'native support' for CSS2, becuase you would have to add plugins to the browser in order to get the support for it.


Justice 4 Pat Richard

That's pretty much what I meant by "absurdly technical". You and my brother would get along very well.

"Yo, bro, have any water?"
"Nope, sorry."
"...how 'bout some dihydrogen oxide?"
"Sure, here you go."