they should use semantic markup with image replacement techniques e.g. h1 h2 tags and p, em etc tags. Instead of using empty divs with background image styles.
@Vuego, empty divs use up space, and it can become more confusing to browse through the code. When I first started designing with CSS, I used empty divs. I hard a really hard time browsing through my code and trying to find beginnings and ends of them. It’s not that big of a deal for a beginner, but as for a professional company, it is.
@vuego, that is correct. With header tags and image replacement, if the image did not load or CSS was off, you would see plain text. It doesn’t look the best, but it’s readable and useful. On this site, if you had images or CSS off, the header text completely disappears and you’re left wondering what’s going on. People with poor vision that have screen readers would just get nothing, even with the images on.
Took into consideration what was said here and optimized the site so it’s more SEO friendly. All H titles are now image replaced.
Regarding empty divs in general (excapt headings): Are they valid? Yes. Do they save file size? Yes. Does it work? Yes. Do I care about people who disable css? No.
Can i make a suggestion, you have used 4 or 5 H1 tags. This is not good for seo, your page has no hierarchy! Just use one h1 tag as this will represent the most important part of the site and is usually placed at the very top of the page. Oh and because it validates dose not mean its correct. Bottom line is that there is no need for empty divs.
@Dor Dan. Makes me a bit sad when people talk about semantic and web standards in that way.
Its one of, if not the most important part for a webdesigner to think about.
Validating Css and Xhtml is just a part of what makes a really good website.
And about the( I care about people who disable Css) well maybe you need to read the target case
The web is for everybody, make sure you believe that then start building and designing on it
The project they’re working on called iFreelance has definitely taken some inspiration from expressionengine.com. Maybe more than some? They’re obviously a very talented group though.
I disagree, John. The coding is nothing alike, the layout has commonalities of header, body, etc. But besides sharing maybe a shade of brown, it would be a hard stretch to call it a “blatant ripoff.” This site has problems to be sure, but being a blatant ripoff is not one of them.
20 Comments
Dude , i love your works, happy and glad to be a friend of yours. Keep the great work!
Strange use of background images for the headers without semantic markup to represent the text. They just have empty divs like .
[div id="header"][/div]
(Sorry for double post. The HTML in my first got eaten by the form.)
Design is nice.
But damn, the code is real bad.
They are a big fan of using empty div’s
Design is nice.
But damn, the code is real bad.
They are a big fan of using empty div’s
really annoying with all of the mac products/logos/references and “we hate IE6″ in the footer.
and yes, i agree…the markup is not very good.
As a web noob, whats so bad about empty divs? and whats a better way to achieve the same thing?
they should use semantic markup with image replacement techniques e.g. h1 h2 tags and p, em etc tags. Instead of using empty divs with background image styles.
@Vuego, empty divs use up space, and it can become more confusing to browse through the code. When I first started designing with CSS, I used empty divs. I hard a really hard time browsing through my code and trying to find beginnings and ends of them. It’s not that big of a deal for a beginner, but as for a professional company, it is.
Thanks for the tips guys. I was starting to suffer from a bit of divitus but will try get to grips with the techniques suggested.
So is this why, when you turn off css or images or both, the site degrades to a very difficult to understand and confusing stream of text?
@vuego, that is correct. With header tags and image replacement, if the image did not load or CSS was off, you would see plain text. It doesn’t look the best, but it’s readable and useful. On this site, if you had images or CSS off, the header text completely disappears and you’re left wondering what’s going on. People with poor vision that have screen readers would just get nothing, even with the images on.
Took into consideration what was said here and optimized the site so it’s more SEO friendly. All H titles are now image replaced.
Regarding empty divs in general (excapt headings): Are they valid? Yes. Do they save file size? Yes. Does it work? Yes. Do I care about people who disable css? No.
Can i make a suggestion, you have used 4 or 5 H1 tags. This is not good for seo, your page has no hierarchy! Just use one h1 tag as this will represent the most important part of the site and is usually placed at the very top of the page. Oh and because it validates dose not mean its correct. Bottom line is that there is no need for empty divs.
@Dor Dan. Makes me a bit sad when people talk about semantic and web standards in that way.
Its one of, if not the most important part for a webdesigner to think about.
Validating Css and Xhtml is just a part of what makes a really good website.
And about the( I care about people who disable Css) well maybe you need to read the target case
The web is for everybody, make sure you believe that then start building and designing on it
well said roy.
It was suppose to be :
About the ( I don´t care about people who disable Css)
but most people got that right
The project they’re working on called iFreelance has definitely taken some inspiration from expressionengine.com. Maybe more than some? They’re obviously a very talented group though.
Blatant ripoff of http://orderedlist.com/
I disagree, John. The coding is nothing alike, the layout has commonalities of header, body, etc. But besides sharing maybe a shade of brown, it would be a hard stretch to call it a “blatant ripoff.” This site has problems to be sure, but being a blatant ripoff is not one of them.