Web Design 101

Sunday, June 06, 2010

Or, “Why many sites are obsolete, even new ones.”

When deciding to update or create a new site, there are some vital principles that are often unknown to all but a few of developers. Far too many are using methods dating back to the 90’s, or taught by those unaware of Standards and using out of date methods. Recent emails on the Web Standards Group list have indicated that even many universities are teaching out of date practices.

When all too few developers are building to Web Standards, how can we expect them to follow Unobtrusive JavaScript and other proper practices?

Here is this method used to create popup links: Unobtrusive JavaScript Popup Windows

The principle which the more enlightened developers are following is Progressive Enhancement:

Progressive Enhancement consists of the following core principles:

  • basic content should be accessible to all browsers
  • basic functionality should be accessible to all browsers
  • sparse, semantic markup contains all content
  • enhanced layout is provided by externally linked CSS
  • enhanced behavior is provided by unobtrusive, externally linked JavaScript
  • end user browser preferences are respected

Seeing: “Best viewed in x-browser” or “Your browser is out of date…” statements are not a good practice!

Never, under any circumstances add Javascript directly to the document.

Referring to inline Javascript, not code for slideshows or video as an example.

One of the big powers of Javascript is that it comes in a seperate file. Much like CSS, this means you can apply one collection of functions to every page of the site, and if you need to change its functionality, you can do that in one document rather than going through each page.

 

Excessive CSS

Many think that every element in the (x)html has to be nailed down with a div or class, completely ignoring the document tree: (Movable Type is a good example)

<div class=“sidenav”>
<h2 class=“sideheading”>Site Menu></h2>
<ul class=“sidelist”>
<li class=“sideitem”>List item1</li>
<li class=“sideitem”><a href=”#”><span class=“sidelink”>List item2</span></a></li>
<li class=“sideitem”>List item3</li>
</ul>
</div>

The above results in heavy, bloated, and complex templates and css.

<div class=“sidenav”>
<h2>Site navigation</h2>
<ul>
<li>List item</li>
<li><a href=”#”>List item</a></li>
<li>List item</li>
</ul>
</div>

The below is the proper use of descendant selectors:

div.sidenav {style} /* styles the div */
div.sidenav h2 { style } /* styles h2 */
div.sidenav ul { style } /* styles ul */
div.sidenav li { style }  /* styles li */
div.sidenav li a { style } /* styles a */

Much better! For more see css.maxdesign.com, Descendant Selectors.

Even for Javascript there is no need for this as proper use of Javascript uses the same method as proper css:

document.getElementsByTagName(‘div’)[2].getElementsByTagName(‘p’)[0];
returns the first paragraph inside the third div in the document.