--- layout: post title: Effective web design - so many attributes for what? tags: - Design status: publish type: post published: true meta: _edit_last: '1' --- Despite the money issues, freelancing is great! It allowed me to learn so much on my proficiency as a designer and as a developer. One of the most important skills I've mastered is web standards. Designing on top of standards is the ultimate technique for everything else, from presentation with CSS to user experience with Javascript and AJAX. Even though Drupal is the best CMS in the world - which I subscribe with pride -, there's one thing I've been noticing: it has a load of attributes within elements, particularly classes and id's (not to mention sometimes it seems there are loads of div's that look rather unnecessary until certain point). This is good and bad for some reasons, and I'll explain why the Drupal team proceeds that way.

Good stuff

  1. It allows better comprehension of both structure and semantics of the platform's output. Structure stands for the content you have in it (the What question), semantics stands for its meaning (the Why question).
  2. As you know, Drupal has a steep learning curve and as I started stumbling over it I realized certain concepts that Drupal has inherent like delta attribution for blocks, their proper identification and helper class attributes built in, etc. And through this identification system the theming process became much easier because I already knew what and where things were.
  3. If you need to style/change behaviour to a certain block or node for any reason (i.e. accessibility, Javascript enhancement...), you can easily select groups individual chunks of markup or even groups of them with Drupal class/id patterned attribution.

Bad stuff

  1. Too much of a mess with all the nested div's. I put this one on the top because it's complicated for a rookie to make himself confortable with the output he wants to generate and also because I just hate unnecessary markup. I only need extra div's if I'm going to turn the CSS up one and only one notch. If I fall with more than one notch, then it's time for a design check.
  2. On top of extra div's, extra id's and classes in them. I have a really hard time finding the right rules in CSS to actually hit the element I want. It's a real PITA. And most of the times it's actually not necessary to have some of the classes because the parent div already has an id and thus a meaning is already set to its children.
Drupal is designed in this way so you can choose between theming from scratch and have full control of whatever you might like or not bother and just let Drupal do its job. It's up to your will and your needs to decide wether you choose one or another or even both — like I do —.

End of story

I picked on Drupal for this entry for the reasons I just showed. Speaking more generally, make sure your markup is valid and accurate. If you accomplish this, your design will better and easier, not to mention your javascripting will be smoother and less painful.