*
The moose likes HTML, CSS and JavaScript and the fly likes Pro CSS for High Traffic Websites - Common Mistakes Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Pro CSS for High Traffic Websites - Common Mistakes" Watch "Pro CSS for High Traffic Websites - Common Mistakes" New topic
Author

Pro CSS for High Traffic Websites - Common Mistakes

Carl Hopley
Greenhorn

Joined: Apr 01, 2011
Posts: 4
Hi Antony Kennedy & Inayaili de Leon,

What are some of the common CSS mistakes web developers make that discourage visitors?

Thanks!
David Johnson
Greenhorn

Joined: Oct 13, 2003
Posts: 4
Until we hear from them, anyone have any guesses?

Mine would be 'designing for one browser type'
Antony Kennedy
author
Greenhorn

Joined: May 10, 2011
Posts: 16

So, I'm going to deal with this as two separate questions.

Common mistakes CSS developers make:

Number 1 - not planning for the future. Too often, developers build something that works *well enough*, and then just add to it as they need to. This works okay in the short-term, but as the site grows the CSS quickly turns into A Big Ball Of Mud. Legacy CSS is a nightmare to refactor, and locating unnecessary properties or selectors is, in the best case, very difficult, and in the worst case impossible. Plan for the long-term. Document well. This will help avoid unexpected errors like IE refusing to read any files after the 31 CSS file limit, or ignoring the end of any CSS file longer than 288KB. You may laugh, but these are very real issues (which are difficult to isolate without experience) that I have seen mature websites encounter.

Number 2 - being too precious. We want to avoid non-semantic class names where possible, and adding extra classes or IDs can feel dirty, and inelegant. However, semantics in class names (unless they are *very* common) are something that only developers really care about - Google and screenreaders couldn't care less. (An exception to this would be something like "bigRedBox" – this is obviously not future-proof). Although not ideal, let's be pragmatic. If you have to use them, presentational classes like "floatRight" are okay. If all they are doing is floating things right, what else would you call them?

Building complex CSS3 selectors to avoid adding classes is rarely the best solution: they are malperformant, often fragile, have poor browser support and are difficult for new developers to understand.

What CSS mistakes might discourage visitors?

Number 1 - (as mentioned by David) designing for a single browser. This doesn't (or shouldn't!) often happen in sites with high traffic, but I have seen it occur. You need to know your audience. Use your reporting tools to figure out which browsers your users are using, and make sure to test and ensure they have a good experience. Perhaps they only provide 1% of your traffic, but if that equates to 100,000 users a month that is still a figure you need to be considering.

Number 2 – too many files/huge CSS. CSS has much greater performance implications than many people think. Particularly for mobile users, every file downloaded incurs latency and lag in presenting the content. Always work towards best practises, keep files small, use build scripts to concatenate and minify… Above all, minimise the amount of HTTP requests.

I hope this is helpful. There are hundreds more tips like these in the book. ;)


Co-author of Pro CSS for High Traffic Websites (http://apress.com/book/view/9781430232889)
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Pro CSS for High Traffic Websites - Common Mistakes
 
Similar Threads
Display jsp based on user agent
Centering a column heading in a datatable
Good friday noon topic. (important : read the comments)
consistent font size across the project?
Wrapping of select box