CSS: Avoiding Div-itis

As a new web designer one of the things I was guilty of at first was a condition called “div-itis.”  This is a common affliction of even some of the more advanced designers out there – usually in their case because of a lack of time to make the code elegant – but most typically of people who used HTML in the past and now try to bring those skills to bear using XHTML and CSS.

Div-itis’ symptoms include code overrun with unnecessary divs – usually 3 or more levels thick – that simulate – in essence – the old table based code we used to write.  This causes – as with tables – higher page weight, lower SEO and a difficulty in updating this code later on down the road – since it is overly and unnecessarily complicated.

Fortunately, this affliction can be cured rather easily.  The way I cured it was reading books on CSS – and not just any books will do.  I personally recommend books by Eric Meyers and the Zen of CSS Design book.  Meyers has several good books but I would start with Eric Meyer on CSS and More Eric Meyer on CSS.  One those are complete the book Cascading Style Sheets: The Definitive Guide should become your best friend.

One of the most simple methods these two books relate – and forgive me for not recalling the technical term off the top of my head, feel free to comment with it – is using 2 or more selectors in your CSS to narrow in on the specific XHTML you want to style – rather then wrapping it in a containing div.

For example, say you have a linked list on your page that you want to style different from other linked lists – say because it’s a list of your recent work and you want it to stand out.  Instead of wrapping an unnecessary div around the list you want to style and using that as the anchor, you could simply add an id or class – if you’re going to use this more then once – to the ul and then style off of that.  Example:

Old (div-itis) rule:    div#recent li { some styles }

New rule:                   ul#recent li {some styles}

Both have the same effect, but one saves you a div.  This seems like a small thing, but what if you could save 10 divs on each page.  And your website is 100 pages, receives 1,000 visitors a month and the average visitor views 8 pages.  Say those 10 divs cost you 1KB.  1KB * 8 pages * 1,000 visitors = 8,000 KB of saved bandwidth.  7-8MB of bandwidth might not seem like much, but on a commercial site where each page it might save 2-3KB and receive 100,000 visitors – it can add up quickly.

On a recent site I did you can see some more examples of this.  I used a total of 4 divs, if I’m not mistaken, to layout the template.  Then styled off of those.  It’s a simple site, so you’ll be able to see how it works rather quickly.  The site can be found here and this is the style sheet that goes with it.

Random Tidbit: Don’t think you need to make your site accessible?  Check out this article about a recent lawsuit against Target.

SEO: What I Learned as a Web Designer

One of the most important things for a site is for it to be seen by as many people that would be interested in it as possible.  Typically, there are two ways to facilitate this happening.  One is paid advertising – buying search engine terms in Google, Yahoo, or other search engines and/or buying space to promote your site on other sites that attract the same audience as you.  The second is Search Engine Optimization, SEO.  Even with paid advertising this is necessary because it is a free way to improve your natural rankings in search engine listings for the keywords you feel are important to your site.

What is SEO and how do you improve it for your site though?  Simply put, SEO is designing your site so that it is easier for search engines to read it – and so quicker for them to understand where you should go in their directory.  Ironically, by making it more search engine friendly you typically also make your site more compliant and easier to update and validate.

The first step to improving your SEO can be done by anyone – provide rich content.  If your site/post has the relevant keywords related to the topic you want to be listed in and contains content related to that subject that people will find interesting and want to read – then you’ve taken the first step.  This has nothing to do with XHTML, CSS, PHP or any web technology.  I’m talking about the simple text you place in between all those wonderful tags.

The second step is to understand the hierarchy of your site.  This varies slightly based on the search engine and some people will disagree with what I say about meta tags – but this is based upon reading many books and sites on SEO, as well as first hand experience.  In regards to meta tags – by all means fill them in.  But because of abuse, they are very low weight – i.e. lower in the hierarchy – and do not improve your ranking much.  The highest level is the title tag – what will appear in the bar at the top of the browser.  You should choose something that relates to the topic and, preferably, provides a 5-10 word summary of what your site/post is about.  Following that is the h tags – h1-h6 respectively – which are weighted accordingly – h1 is higher then h2 and so on.  Be careful not to abuse these by using them all over the page – as that can be considered “keyword stuffing” or other not nice words that mean search engines will not like you.  Finally, there is the rest of the stuff in the hierarchy – p, strong, ul, li and all the other wonderful tags.  They have some varying weights but not really enough to be worth talking about.  The easiest way to implement this step is to think of your site like an outline for a paper you’re doing in school.  You have a title, some subject and sub-subject headers (h1, h2, etc) and then the meat – paragraphs of content.  Only in this case, you’re not summarizing in the paragraphs, but placing rich content.

The final step is CSS.  One of the reasons CSS was proposed and implemented was that web pages had become bowls of “tag soup” – what you saw looked nice, but beneath that the HTML was loaded with misused tags, presentational information and other things that made it difficult to edit and bloated the page weight.  CSS is very simply a way to separate your presentation from your content.  Because of browser quirks this is not always possible – though the biggest perpetrator, Internet Explorer, is looking to correct this with IE7.  In an ideal world, the XHTML for your site would contain the basics – your plain text content, basic tags (p, h1-6, ul, li, etc), some id and class declarations and that’s it.  Only the things that describe your content – nothing dealing with presentation like colors, fonts, or even div/spans.  This is typically never possible because at a minimum you usually need a few div’s to mold your design – but it’s nice to dream.  Your CSS file would then hold the actual design of the site – where elements should reside on the page, what color and typeface fonts/headers should be, background graphics, etc.  You could then easily edit the look of your entire site simply by editing your CSS – potentially a single file in a simpler design.  This is the true power of CSS – not only will it allow more interested users to see your site (by helping your SEO) but it will also allow you to change your site quickly and easily whenever you want.

Once you understand the basics, you can start to see the potential.  One of the more powerful tools is to place your content first in the HTML because search engines only read the HTML and give more weight to what they read first – so you would rather have them see your content first then say your navigation or sometimes even your header.  The problem is most sites don’t want their content to display first – they want a header with site branding and usually some left navigation – though right navigation is typically better because the user’s mouse resides near the scroll bar, so having it on the right means they have to move the mouse less, improving their experience and making it more accessible for them.  With CSS you can have both.  I did this for the sites I used to work on – 2 mid-size employment sites – and have even created a few free templates on my site – feel free to steal them.

I hope that you got something out of this.  If you have any questions, comments, or criticisms feel free to leave a comment or, if you prefer, e-mail me.

Random Tidbit:  Want to have a neat Web 2.0 tool to track your competitors with?  Check out this article on Competitio.us.  The article is old, but the site still appears to be free to use.

Changes

Sometimes, life likes to come up and kick you in the teeth – figuratively speaking. I recently relocated back to New England from Virginia. Moving from your own apartment to back into a parent’s house is never fun. At all. Add that to the fact that a month ago last Monday I lost Mugsy – my last ferret. This one was not much more fun then the rest. No cancer, but an accident cut her life short and I had to put her down. It’s the hardest decision you can make – especially when the pet is your sole responsibility. I hate doing it, but it’s worse to watch someone you loved for 7 years suffer just so you can have a little more time.

And just like that I have no more ferrets. It’s almost like that old saying (song?) – “this is how the world ends… not with a bang, but with a whimper.” The same day I had to make that decision I went back down to VA to help a friend. And in the process of puppy sitting, she lost her mother dog and 5 of the 6 puppies – and I thought I had it tough. I can’t imagine losing a young, perfectly healthy animal and then most of the reminders of that pet. Unfortunately, with the loss of Mugsy I don’t think I was much help, I just couldn’t process any more grief.

Fortunately, I have a new person in my life that has helped to ease me through these changes. It was sort of ironic, like before she went Mugsy wanted to make sure I was taken care of – like she’d done the past few years.

Not big on dumping out my feelings, especially in a public forum, but with the long absence I felt justification was deserved. I’ll be back to having more web design info, sites and thoughts soon.

Random Tidbit: I wanted to give something web design related. So for those of you who are new to blogging, I stumbled across 2 interesting articles. One talks about 5 ways to build a better blog – content is the key – and the second talks about 21 tips to starting a blog successfully – some good ideas in there I could have used a few months ago. Enjoy.