Obtrusive or Unobtrusive?

kos · Share | #1 (**permalink**) 09-21-2007, 05:55 AM

Obtrusive:
combine the javascript and the markup and the css all together.
Example

Quote:

<span id="Span1" onmouseover="javascript:isOver();" onmouseout="javascript:isOut();" style="color: #000000">content</span>

Unobtrusive:
separate the javascript and the css from the markup.
Example:

Quote:

<span id="Span1" class="text">content</span>

How do you create your web sites?

Dan Williamson · #2 (**permalink**) 09-21-2007, 11:45 AM

I will always try to be unobtrusive in any of my coding, not just because it helps me if I know what to edit if i'm re-writing any code and I have many lines of obtrusive Javascript and CSS put together in an inline HTML page it just makes it somewhat messy and makes your stress levels go way up.

I would always, unless absolutely necessary create my Javascript in another .js file, but also put all of my CSS stylesheets into an external stylesheet, granted it may make loading time somewhat slower if the visitor is visiting your website for the first time as it has to cache everything I believe, but I have personally never noticed the difference. Although some people can code inline stylesheets in their main HTML page and it not be obtrusive or messy, but thats a personal preference.

When you are altering or modifying a script or style then you want all of it to be seperate, well documented and neatly done so that you have an organised structure with comments if possible so that you know WHERE to edit and why. This generally just makes your life a lot easier.

Sometimes I have read and personally had obtrusive code slow my site down and mess up on certain things, this is all because of bad habits and obtrusive coding by myself or others in which I have had to make unobtrusive because I am somewhat excessive to have neat, clean, well documented and unobtrusive code. This is just my input though, some people don't adhere to unobtrusive coding standards which I set myself, and some people do.

kos · #3 (**permalink**) 09-22-2007, 02:24 AM

I like the way you say it, and I must say I agree with you completely.

Creating an unobtrusive static site wouldn't be so difficult but creating a dynamic one is not as easy as it might look like.

It takes time and knowledge to accomplish that.

I think that's the main reason why many developers choose the obtrusive way...

As a simple note: I still haven't seen an unobtrusive dynamic (nor static) web site until now...Maybe in the future...

roger_d · #4 (**permalink**) 11-03-2007, 12:30 PM

Inline styles (first example) add code weight to the page. This means a really small hit SEO wise. New design standards don't include inline styles.

Dan Williamson · #5 (**permalink**) 11-03-2007, 04:30 PM

Quote:

Originally Posted by roger_d

Inline styles (first example) add code weight to the page. This means a really small hit SEO wise. New design standards don't include inline styles.

Indeed, but also inline styles such as inline CSS code actually caches faster if the user has not visited your site or cleared his cache. At least I believe thats how it works (I won't pretend to be an expert on something such as this) but with minimal amounts of code it doesn't really matter.

Although i'm going to work this on a programming example you should always use code comments, I am a big fan of commenting my code and documenting it properly. I love having neat and easy to read code and I can have 200+ lines of comments and then if I want to go about the project professionally I will have a documentation file and a read-me with the project files.

Not getting too far off topic but obtrusive ++ unobtrusive such as whether indentation in your code is standards or not, from a programmer perspective (and a beginner programmer at that) I believe that it is, but I would also say that web projects need such things, for example which HTML document looks better.

HTML Code:

<html>
  <head>
    <title>Unobtrusive HTML</title>
  </head>
  <body>
    <ul>
	  <li>List Item 1</li>
	  <li>List Item 2</li>
	  <li>List Item 3</li>
    </ul>
  </body>
</html>

HTML Code:

<html>
<head>
<title>Unobtrusive HTML</title>
</head>
<body>
<ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ul>
</body>
</html>

It's generally a matter of opinion in my view, apart from the necessities such as making sure that your webpage loads as fast, as secure and as functional as possible, everything else is moot point.

Boogle · #6 (**permalink**) 11-06-2007, 07:28 AM

Quote:

Not getting too far off topic but obtrusive ++ unobtrusive such as whether indentation in your code is standards or not...

I did standard windows App programming before any of this web-designing lark (I'm sure Costin will vouch for that!) and I have to say, the person who first persauded me to get into web-designing didn't indent their HTML, CSS at all but out of habit from c# code (some classes/functions can get very long and be indented alot!) I indented my HTML and CSS from the off and find it definitely helps, however he can read is un-formatted HTML, CSS just as easy and prefers it his way so I think that the presentation of code really is personal preference...

However with regards to in-line styles and whatnot, i have to say i like things segregated and would prefer to call all scripts and styles from elsewhere and keep the HTML to a minimal, regardless of the first caching time; simply because future editing is so much more simple IMO: For instance, having all your styles listed in the HTML page within a <style> tag can get messy and so i only use that whilst in development, as soon as the closing stages are near it gets moved into a stylesheet.

But as Costin wisely pointed out to get this done to proper effect throughout a dynamic site would take masses of time and knowledge and since i've only contributed to dynamic sites and not actually finished one fully by myself (YET! so close...though- which you will all get chance to scrutinise) I can't comment- maybe in a few sites time!

stewart · #7 (**permalink**) 11-06-2007, 11:50 AM

I am fanatical when it comes to separating different elements of a web site/application. From the html,css,js, to back-end design and concept. Separate it all! muahah

Dan Williamson · #8 (**permalink**) 11-06-2007, 05:05 PM

Quote:

Originally Posted by Boogle

However with regards to in-line styles and whatnot, i have to say i like things segregated and would prefer to call all scripts and styles from elsewhere and keep the HTML to a minimal, regardless of the first caching time; simply because future editing is so much more simple IMO: For instance, having all your styles listed in the HTML page within a <style> tag can get messy and so i only use that whilst in development, as soon as the closing stages are near it gets moved into a stylesheet.

I myself am very insistant on this much of the time unless it's one small function or class selector in Javascript or CSS. But as I was trying to point out in the generals of my post some people value speed over other things.

As for indenting code, it is indeed a preference, perhaps because I started out writing programming codes such as C I am somewhat bias, I myself can easily read un-indented HTML as well as un-indented C# if it allows it, but generally I prefer it structured.

All in all you make some nice points.

pontarae · #9 (**permalink**) 07-22-2008, 12:03 PM

As the former founder of a software QA company I would vote always for the simpler, clearer code. The cost of maintenance is lower and the amoutn of error is less.