Please help, IE is killing my design! :(

It is my usual practice to treat the logo/site name as a <h1> where it is on the home page, or section head (assuming a section head has a different name from the site/home page). Logos within the site are simply are marked as <p>s. See http://gtwebdev.com/workshop/ (a section's top level page), and http://gtwebdev.com/workshop/floats/enclosing-floats.php (an interior page). View the document outlines.

It didn't even occur to me that Microformats might all that blogger oriented. I have found them to be a very useful feature on select sites. A site for SXSW, for instance, has calendar events, speaker addresses, venues, etc. Microformats would let the site visitor export info to his PDA or mail client automagically.

It's not the web author's address, it's the document author's address. For example, if Prof Jones's paper on why tiddly-winks should be an Olympic sport were published to the web, his address would be wrapped in the <address> tags.

The menu element was deprecated simply because a menu is a list, semantically and structurally. The menu is redundant to list.

It belongs in a <p>. The <p> is the base level text, or replaced text container. It doesn't matter if you don't have a complete sentence. A single word can meet the definition of a paragraph, "A brief composition complete in one typographical section …". Eg.

<p>The Hills Golf Course<br />
1234 Colinas Rd.</br>
Sometown, TX</p>

Code (markup):

Of course, that could still be marked up in the adr Microformat.

cheers,

gary

 

You want to leave best design practice to show off your design skills?

Hi-liting and underscoring are strictly design issues, do as you will, remembering that the web has certain established conventions that you mis-appropriate at your peril.

The text size is more of a technical issue. It is quite common for printed matter to have 9 or 10pt type. Even the low quality print will resolve to 300dpi (dots per inch). The best monitors resolve to ≈100ppi (pixels per inch). It is not possible for a font-size <9px (about 7pt) to render a complete glyph set on a monitor.

To further aggravate the issue, while the normal reading distance for printed matter is 10–12 inches, 18 inches or more is the norm for viewing a monitor. That small font that looks OK in print only takes ⅔ the angle of arc when viewing on the monitor.

There is a reason for browsers defaulting to a 16px/12pt font size. It roughly appears equivalent to 9pt in print. To set the main text smaller than 83% of default (≈13px/10pt) is to risk readability issues.

If you really want to show off your design talent, work within the limits of the medium.

cheers,

gary

 

Got it in one. Clockwise from the top. Another thing to remember is that if you omit a value at the end, the value from the opposite side is copied... if the opposite side isn't there it sets all of them.

margin:16px; sets 16px on all sides
margin:16px 32px; sets 16px top/bottom and 32px left/right
margin:16px 32px 8px; sets 16px top, 32px left/right and 8px bottom.
margin:16px 32px 8px 24px; sets 16 top, 32 right, 8 bottom, 24 left.

Second number is line-height.

I would REALLY advise against going below usability minimums. Making your text illegible and difficult to access is NOT good practice of good graphic design - anyone telling you otherwise is packing you full of it. (Why do I smell college professor?)

Going WAY outside accessability norms since your colored links are useless to the colorblind - underline was chosen for a reason. Applying graphic design to web design involves taking a big shot to the ego over what you can do, and accepting that there are some norms you have to maintain. Doubly so in the UK where you can be fined 5K quid for failing to meet accessability minimums on certain types of websites. (were that we had that here in the states)

Adding tags == bad. Just take the text-align:center out of the body declaration and lose the margin:0 auto from #container. That will make it go right over to the left.

My initial reaction too - though remember he's talking graphics design. It's really difficult for graphics folks to take up web design because they have difficulty with the idea of "stay between the lines, the lines are our friend".

Exactly. Change certain elements too far from normal and you break established usability - basically nuetering your target audience numbers.

Because if you make it next to useless for the majority of users, that's not good design. You have to forget most of what you learned in graphics design - web design is a blend of graphics and engineering - the engineering not just being coding, but designing user first, goof assed graphics SECOND. EVEN if the topic at hand is goof assed graphics.

 

Can you show me a actual layout and html code then i can suggest you...

 

ofcourse its his bloody problem lol.

quite obvoisuly one browser likes him and one hates him...

There is no 'maybe' about the problem lol.

It just takes some work to figure out wat works and wat doesnt but dont fret cos IE does make many websites look gay lol.

 

Like I said, I'll be keeping an eye on them because the potential is very powerful. But my calendars (like these nasty things: http://stommepoes.nl/Homeselling/secondhome/beschikbaar.html AND they're loaded dynamically from some dude filling out either our form or worse, the nasty forms of another company who apparently doesn't even know how to write good forms) aren't for these sorts of things.

Some bloggitty blogger needs to make a set of, like, real estate tags or something. No times, no "events" no speakers no addresses, but date, availability, price level. Also not something someone would set in a PDA, but again I can imagine someone wanting the calendar information in another program, something used by real estate agents maybe... but the metadata has to not be metacrap for it to even work. While a bloggitty blogger can control (mostly) what's on his/her site, we're getting information from other people-- often the information itself is incorrectly filled in, we don't even have alt text on home photos, and people are terrible at filling out forms correctly. Instead, they leave lots of stuff blank and then write a big long rambling description in the textarea.

As for design, I'm going to disagree with both of you crusties here. A design site, which will be filled with mostly images (his portfolio) should be allowed outside the lines-- just like they are in print (there are "design rules" in print too). If he wants microscopic fonts, let him set stuff to .5em-- everyone will zoom or text-enlarge to their heart's content, and he gets his unreadable (but sexy!!) font : )
While underline means something on the web, this is NOT a site made for everyone. The blind may visit his site-- and they should have access to whatever content you can reasonably expect to have access to. But just as I cannot go to most gaming sites or movie sites (I don't have the plugins for those beyond the main pages), the blind are NOT going to be looking at the photographs of his work. A site with important public information needs to be moron-proof, grandma-proof, accessible to the general public-- but a portfolio site needs to sell his work, show off to other designers, those who seek designers, and even if breaking out of the bounds of convention are bad for a company website or a government website (for obvious reasons) they need to show what he could do on this site, which is a personal site.

You can get a lot done right while still breaking a few rules (like with the microscopic em fonts-- he gets his styles, other people can still read them, win-win). He has a picture of highilighter markers at the top-- even a moron like me could tell that the highlight effect was imitating a marker, one of his tools on paper possibly, and obviously a theme of the site.

Alex: you just may not want to break the rules though until you have a good understanding of what you can do and what you can't do and why. But me, if I were making some artsy-fartsy portfolio website, I'd go as goofy as I could, because it'd be my site and while I'm always still learning, I feel I know just enough to get myself into trouble, and make great design while I'm doing it : )

Maybe I hate art because art="fuck convention".

 

Ah, Sp, I think you mis-understand, at least a bit. I know the content will be examples of the graphic arts. It's the presentation medium that's the web.

Small fonts are not a visual problem so much as a technical one. Do keep in mind, though, that there are those with impaired sight, too—not just the blind. Depending on the font-family and foundry, it simply requires a certain number of pixels to render all the glyphs. In most fonts for Western languages, it takes at least a 9×9 block of pixels to render the glyph set. A .5em (where 16px=1em) is 8px. An 8×8 block simply won't work. Of course, there are the old console 5×7 fonts, but I doubt their popularity with the designer set.

The bright hi-liters probably won't mess with anyone's expectations, but underlining will. The web public expects underlined text to be hyperlinks. Contrary to graphic design for print, the web is interactive, and users know how to do certain things based on established convention. To mess with that expectation is to reduce usability.

The OP would do well to create low rez images specifically to complement a web page layout that makes it easy for the visitor to do what he came to do. Links can go to his print designs, done in a higher (but not by too much) resolution. Those original drawings aimed at 1200+dpi, four color offset repro are now going to be seen on a 100 pixel per inch monitor. That's another thread.

Note: The Imagemagick resize algorithm is somewhat better than the GIMP's, and considerably better than Photoshop's, where fine detail is concerned.

cheers,

gary

 

Thankyou for the tips guys, If you have checked the website, I have began putting stuff up there and its going well so far!

There are many different ways of presenting a website when it comes to graphic design, and its part of our nature to challenge conventional practice, hense why I do not want a plain "technology news" type website. For example, here is a fantastic website, in my opinion, that challenges one of the bigger issues in web design... and they said horizontal scroll didn't work

Once again, thankyou all so much for helping me get to the current stage!

 

Oh, I don't disagree with you there-- again, if an em-size is set so low that it's practically equal to 9px or lower, then of course it's not possible to read-- my point was more that, with tiny microscopic fonts being the rage design-wise, I think it's no harm done as long as your microscopic font is done in something resizeable. So here I'm still not even talking about the blind-- that was more the whole links and highlighting stuff, and the design idea overall. The blind don't expect to be wowed by great visual design OR microscopic fonts-- the visually impaired can, sure. But in either case, if one were to set fonts to .5em, can't everyone pretty much get around that problem with either text-enlarge (to their taste) or zoom (which I'm much less fond of)?

Alex-- contrary to what you might have heard, horizontal scroll can be just fine. I remember reading about a site that was delibrately set to horizontal because it was the site of a spinal-chord injury foundation or something-- the site reflected how patients saw the world, on their backs. I've seen it done on quite a few "design" pages... lessee if I've still got the one bookmarked...here's a Flash version, which stumped me for a while when I tried to figure out how to scroll to the right: http://www.markdearman.com/main.html (yes, that's a bad idea to do-- no Javascript enabled, no Flash player? No site. Bad bad bad, but looks cool if you have the programs to run it).
Here's an HTML one WITH the neat-o radio needle trick (and it's Dutch, woo): http://www.csszengarden.com/?cssfile=058/058.css

In fact, I've been considering horizontal for the site of our kitty mascot for a while... but the project's on hold plus it needs some Flash BS in there and I hate Flash and making Flash and I sure as hell can't make games in Flash. But it might be a nice Javascript programming project.