looking for css pro's feedback

DAN

I started doing this from following other CSS coders that theme DRUPAL which is a CMS, its just alot quicker when your building tableless sites, to just add the following code:

<div class="menu float_left">...</div>
<div class="banner float_left">...</div>

Code (markup):

 

1) Is the upper right corner of the header NOT supposed to line up?

2) the 1em line-height makes the font hard to read - not that black on grey is legible in the first place.

3) Some formatting wouldn't kill you and would make life a LOT easier

4) I'd not put the CSS in a subdirectory unless all your presentational images are going there too, in which case I'd use a more descriptive directory title like 'themes' instead of the generic 'data'.

5) No media type

6) you've got a bunch of tags at the top for the title with no actual TEXT for the title - which I'd probably make the H1 (Dan might disagree on that)

7) your images inside the content areas actually SHOULD be img tags, and not in the CSS since they would be content, NOT presentation. (I'm guessing that - I'm assuming those are placeholders for 'real' images?)

8) The headers in your two sidebars are NOT subsections of the h2 in the content area - as such they should NOT be h3's but H2's instead.

9) the footer probably shouldn't have a header tag in it.

10) Why are you wasting time and bandwidth on transparant .png for something that so obviously could be done with no transparancy at all?

11) You don't have any fallbacks on your font-family

12) the uneven left/right margins off the body look like a rendering error

13) you are using the same ID more than once - ID's are supposed to be unique.

Here's the same thing done 'my way'

http://battletech.hopto.org/for_others/mikeyd/template.html

the directory:
http://battletech.hopto.org/for_others/mikeyd

is unlocked so you can get to the gooey bits and pieces. It uses a single image for the header (which I remastered since your existing header the corners didn't even match - with the left side not lining up either)

It's slightly more HTML because I added formatting and alt tags so it would actually PASS validation, but it's half the CSS. Validates XHTML 1.0 strict, works in IE 6 & 7, FF, Opera and Safari, and works after a fashion with just some minor layout quirks in IE 5.x

 

Which is just crap code given that not only is a menu is not a division of the page, it is a list of links (and since UL is a block-level element, there's no need to wrap it around a DIJV), but that "float_left" is a presentational class name that doesn't even belong there since you can just target the "menu" and "banner" classes and just float them anyway without having to add more bloated code.

And yes, I know what DruPal is - it's also a piece of garbage from a coding standpoint. Not that Joomla and WordPress are much better (they aren't really), but at least with WordPress (and if what they say about Joomla 1.5 is correct) you don't have to jump through miles of hoops just to get what you want out of it, especially if you really know what you're doing with clean, minimal, semantic and valid markup.

 

you shouldn't take my quick code so literal, i know a menu is a unordered list and would best be written as

<ul class="menu">...</ul>

Code (markup):

I used to think drupal was garbage but then i started to understand it, wordpress is good for BLOGS and thats about it, these 2 sites are powered by drupal:

mtv.co.uk
teamsugar.com

I know drupal has a really really steep learning curve but its good for large scale community sites, besides once you understand drupal you'll understand just about any CMS out there

 

Actually WordPress CAN be used as a traditional content management system - I'm working on a couple sites right now that prove it can be done. There are also examples of WordPress as a CMS out there, but I'm not going to look them up right now.

 

If you are going to use examples, you should probably use sites that didn't have their code vomited up 1997 style. Of the two, the MTV one is the better, but not by much... that Teamsugar one is a absolute TRAIN WRECK. MILES of inlined scripts and CSS, Little or no separation of presentation from content, decade old javascript mouseover techniques that weren't a good idea THEN... I think the 3,401 validation errors speak for themselves... Though the 200k of HTML is BARELY saved from being bloated hell by them serving it gzipped, though the 95k of CSS and 265k of javascript is SUCH a big help BEFORE we even GET to the 759k of images - it's damned near a meg WITH gzip compression... hardly a shining example of a well coded page.

 

wow! are you serious! you've got to be kidding me!..clearly you do not see the goal of that website or any of the large scale social networking websites for that matter

here's some of their numbers:
12M page views per month
1.5M visitors per month
estimated worth $12-15M
Sequoia recently invested $5M into popsugar (the founding company )

Maybe you can present your case to Sequoia and have them pull the $5M dollar investment due to poor code, LMAO, and have them invest in one of your sites! GL

I must admit the 2000+ errors is alot, but lets be realistic investment firms don't care bout that, if you have a site that generates traffic and revenue thats all that matters AND most importantly the USERS could care less how many errors your site has, and remember that its done for the USERS

we must have 2 totally different views regarding what makes a good site...for me i think what makes a good site is a hands down, no contest:

1. how much is the site worth
2. how much traffic the site gets

I'm sure you've heard of MySpace, well its growing at a rate of 250K users per day and was sold for 500+M and yes the code looks like crap, and the page loads slow as a snail, but remember its all about....

content, content, content

 

Both he and I are dead serious. We could literally get the site to handle 2-3 (possibly more, but this is a VERY conservative estimate) times the traffic with the same bandwidth (which would mean even more revenue for the site) if the site was coded properly to begin with.

 

thats a good point i never thought of that

 

A lot of people don't - it's kind of funny in a way as one often encounters designers who do not take the cost of hosting into consideration, yet talk on and on about the 'costs' of development and maximizing profit. Bandwidth is not cheap and is a drain over time. Maximizing profit is NOT just an issue of getting people to visit site, but also minimizing the expense of each visit.

Seriously, how much is 100mbps unmetered going to cost to host the site? All of a sudden you take that same site and can host it on a 10mbps 1tb limit account? I often see pages that can do 90% reduction, though as Dan said half to two thirds is a more accurate figure.

One of the sites I maintain is a great example of this as it was choking out a dual 3ghz Xeon server while only serving 90gigs/mo because the original page was so many separate files, AND had one huge image on the main page that left connections hanging on the long transfer - so the request que's kept backing up. Switch their forum software, rewrite the site, and suddenly we're hosted on a single core P4 2.4ghz and barely touching the processor with little or no server lag even at the busiest times of day - despite now serving 300-400gigs/mo in traffic at twenty times the unique visits.

Which brings up the other issue - excess bandwidth and files result in slow and sluggish page loads - resulting in a lessened user experience preventing repeat business. Nobody wants to visit a page that takes a minute or more to load on BROADBAND - there's lots of other pages, so it's not a big deal for people to go somewhere else when the page in question is slower than molassas at the north pole in february.

Repeat business, aka client retention - a one megabyte website is very unlikely to do all that well in that arena unless it's content has a niche audience, and even then the maintainers are just making more work and headaches for themselves... and a lot of times aren't even aware they are doing so.

 

deathshadow

well, you changed my thinking, good point

 

I use the code below to start my stylesheets off with which does exactly the same, does it not?

* {
  margin:0;
  padding:0;
}

Code (markup):

 

cool short hand, but why do you need to remove the margin and padding from everything?

 

My 2 cents:

When you're writing CSS styles, use the name of the element before the class or id name, it makes for better readability:

div#column1
div#column2

Second, the black text on the dark gray doesn't make for easy reading -- always contrast text and background.

 

I do this too. It removes all the defaults (which vary from browser to browser). This way -- you set the padding and margin as you need it and there wont' be any unexpected or confusing results.

 

hmm, good idea

 

DeathShadow and Dan Shulz are RIGHT ON! I'm not a pro like these guys, but I get so tired of working with sloppy code that I sometimes feel like going postal.

People really need to learn to code according to standards, AND to make the code clean. There are a lot of best practices that will make a web page as small as possible. This will not only save money in bandwidth costs, but in site maintenance and upgrading as well.

If you listen to these two guys (DeathShadow and Dan Shulz), you will NOT be lead astray.

 

Not the same - because that is hitting ALL elements including INPUT - Dan does a lot of pages with forms, nulling ALL margins and padding can cause form elements to behave wildly different across different browsers.

If you use the univesal reset like that, keep the following in mind:

Opera: treats them EXACTLY as if they were display:block; (IMHO this should be the correct behavior as it makes the most sense!)

Firefox: gives a minimum .25em padding width-wise around the contents that you cannot control, SOMETIMES adds an extra px padding top to bottom without rhymne nor reason, otherwise works kind of like display:block... except it does not count padding or borders in the width (what is this, IE in quirks mode?!?)

IE: has a minimum padding you have little or no control over, ignores any setting of height on inputs but not on textarea (WTF?), but you CAN control the height to a degree via line-height. (part of why you hear me say NEVER trust the default line-heights and ALWAYS explictly declare them!)

Safari: Kiss any semblance of sanity goodbye as they force their own styling onto your elements, making spacing, padding and often even font sizes the biggest headache you've ever dealt with. Even at default sizes without the universal reset you often have to kiss off ANY attempts at actually styling form elements the way you want. (***holes)

I've been switching between the two techniques - using the universal selector on pages where I'm fairly certain I can style the form inputs consistantly and quickly even with the universal reset - but when the time comes to do complex forms I use the method Dan suggested.

The determining factor between the two usually being which one is going to be more code.

 

deathshadow already explained it (most of the way) so I won't go into it further unless you really want me to

If you use the proper markup for the job rather than just slapping DIVs around everything, and use something I call "Minimal Markup" (in other words, the bare minimum of code necessary to get the job done) you won't need to use the element name before the ID selector. Especially if you mark up your classes and IDs appropriately. For example, if you have a list of links that acts as your menu, do you really need to use div#nav ul when #menu (with the menu ID being on the unordered list itself) will do the job with less code, and STILL tell you what the element is?

Heh, people say the same thing about me on the SEO board here. (By the way, my last name has a "C" in it.)

 

DANG! I even looked at it several times to make sure I was spelling it right. I hate it when I do that. My wife points it out to me all the time!