Jump to content
xisto Community
Sign in to follow this  
kvarnerexpress

Designing Good Html

Recommended Posts

I was wondering if you could refer me to some articles where they mention good html design principles. I have currently created a complex page, and it looks great when the browser is fully maximized, but when I minimize the browser the page does not have a pretty topple effect. It just basically loses most of its structure. The same goes when I stick it into a frame. Whenever you minimize your browser your page is supposed to squeeze together, but it should look natural not go in all directions. I would like to be able to correct this. I am currently using a table layout not a tableless layout. I would like to stick to the table layout if that is OK for now. I believe it is still possible to achieve this effect.How can I create a more pretty topple effect when I minimize my browser? What design principles should I follow? Please refer me to an article, or shed some words of wisdom of things to try more or things to avoid.Thanks a bunch. Much love.

Share this post


Link to post
Share on other sites

hm thats sounds like familiar problem. i used to have that too. im sorry that i cant refer you any website but i can tell you what i think might help your site work. maybe you can post a link to the site you made for people to geta closer look. anyways making your site in divs usualy eliminates all those problems that come up with small browser dimensions. a tipp i have for something you should consider when you make your designs is dont make it too big. if you have a big resolution you should also think about people with a smaller one. there are still many people with a 800x600 resolution.i dont really get what you mean with topple effect.

Share this post


Link to post
Share on other sites

Hmmmmm, "good design" and "tables". With the current w3c standards, those two words rarely go together. I'm not saying tables are not good, but using them for structure is where you will run in to these problems. I have a large table "IN" a page and have no difficulties re-sizing what so ever. It is when you are using tables to "structure" your page is when you get in to trouble. So, drop the tables for structure of your page is my suggestion. It isn't as big a deal to convert as you think. Post an address for use to review your page and maybe somebody can resolve this problem without having to re-write the entire page, but nobody can help without a look at the source. Maybe someone (like me) can send you a quick div/css based page to get you started with. Point is : upload the page and post an URL here, please.

Share this post


Link to post
Share on other sites

Yes i believe there are a lot of sites that can help you out with that, for example:

alistapart.com
pixel2life.com
w3schools.com

Those pages are for tutorials, and tips, but specially the first one, you can find yourself lost with tons of tips and tutorials that make your standar web programmer's life a lot easier =D...

It happensa lot to me, im reading an article from a list a part, and it comes with several links to other articles and i middle click all and discover things i wasnt even looking for but need for my site...

But here you go, and its also a good idea to post the link to your site...

If this works for you, heres the way i work:

1. Get the site documentation
2. Do a few design proposals in fireworks and show it to the client till he accepts one
3. Start coding it (the main structure) into html (i used to export fireworks html right into dreamweaver, but fireworks design can only export tables, and thats what we are trying to get rid of)
4. Do the heavy part: css
5. Once its all together, i divide the content into separate files to use them as server side includes (like the meta tags, the main navigation and the footer for example)
6. Copy and paste babe... and change the main content area

Also a good thing ive learn if youre just diving into this w3c standars and css mania, you can achieve very basic but effective layout without tables is to put margin:0; into your divs, p's or h's, for example:

div, h1,h2,h3, p, ul, ol, dl {margin:0}

And then assign each of these elements a different background and padding, so youll get a layout that looks like cell tables but its actually the very basic html just without margin...

You can also look into other guy's pages and learn from their code, the most difficoult part (leaving client and server scripting apart) in standar web design is the css, for the html has to be pure, eliminate all formatting attributes from your code, like font, color, align, etc and leave the positioning and color to the magic of the css...

Hope this helps...

Good luck and good coding =D

-10730

Share this post


Link to post
Share on other sites

I got a link that some one posted about absolute positioning issues and understanding the real purpose of absolute positioning, but i didnt quite understood it though hehe, yet I'm actually trying to avoid as much as i can using it, but if you get to see that link it will be useful and maybe you could then teach us the correct use of A.P.

Share this post


Link to post
Share on other sites

Yes that one! I havent finished understaning it completely, the main issue about using AP is that it gets the element which is being positioned absolutely, out of the normal flow of the document, and that could be a trouble if we want the layout to behave normally and get one element after the other in the normal flow...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.