May 30 2009

A moment of silence for the FRAMESET. They are sooooo Pass'e

Category: Intellectual Pursuits | Tips and Tricks — JoeGeeky @ 13:56

If you've been following the development of the HTML 5 spec then you may have noticed the FRAME, FRAMESET, and NOFRAMES elements have been flagged as obsolete. In fact, as of this writing the following additional elements have also been made obsolete, not to mention a bunch of attributes:

  • applet
  • acronym
  • dir
  • isindex
  • listing
  • xmp
  • noembed
  • plaintext
  • basefont
  • big
  • blink
  • center
  • font
  • marquee
  • s
  • spacer
  • strike
  • tt
  • u

The spec is still Draft so you may want to following it as it develops (http://www.w3.org/TR/html5/obsolete.html#obsolete). Now, as for the trusty old FRAMESET, what shall we ever do without it? As many of you are probably already aware, CSS is much of the answer, but if you have never used it to structure your page it can be a little daunting. Lets create a basic FRAMESET and then replicate it using Cascading Style Sheets (CSS).

Here is the layout we are targeting for this sample:

Target Layout

Lets see what is required to implement this using a FRAMESET

<html>
<head>
 <title>FRAMESET Sample</title>
</head>
<FRAMESET ROWS="35%, *" COLS="*, 65%" FRAMEBORDER>
     <FRAME SRC="blank.html">
     <FRAME SRC="blank.html">
     <FRAME SRC="blank.html">
     <FRAME SRC="blank.html">
</FRAMESET>
</html>

The key things to note are that you will need at least 5 HTML pages and you have coupled the layout and content very closely together. Now lets see how to do this using CSS:

First we need the content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="">http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>CSS Layout</title>
 <style type="text/css">
  @import url(template.css);
 </style>
</head>
<body>
<div id="frame">
    <div id="title">title</div>
    <div id="logo">logo</div>
    <div id="body">
        <div id="navbar">navbar</div>
        <div id="content">content</div>
    </div>
</div>
</body>
</html>

Next we need the CSS which will wire up the layout of the content areas.

body {
    margin: 0px;
    padding: 0px;
}

#frame {
    position: relative;
    width:100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    background-color: #006600;
}

#logo {
    position: absolute;
    width:175px;
    height:125px;
    top: 0px;
    left: 0px;
    background-color: #FF0000;
}

#title {
    position: absolute;
    height:125px;
    width: auto;
    top: 0px;
    left: 175px;
    right: 0px;
    background-color: #0000FF;
}

#body {
    background-color: #FFFFFF;
    margin-top: 125px;
    position: absolute;
    padding: 0px;
}

#navbar {
    width:175px;
    float: left;
    background-color: #FF6666;
    margin-bottom: 0px;
    padding: 0px;
}

#content {
    left: 175px;
    width: auto;
    background-color: #FFFFFF;
    margin-bottom: 0px;
    padding: 0px;
}

This is how it will render.

Strictly speaking the "frame" <div> is not required, but this allows you to center or hover content in the middle of the browser window which is a common pattern. You can add this effect later in CSS. The key things to note here are that we have clearly seperated content from layout and you only need one HTML file.  Granted this is very simplistic, it is really not that hard to get your head wrapped around. Having said that, CSS can be a little overwhelming so you should try and familiarize yourself with it before you dive in.

Before wrapping things up, there is one additional thing to be considered. Up to this point, the focus has been on structuring your content, but the HTML 5 spec is driving all of us more towards application-to-application communications and not just presentation for users. Consequently, many of the sections we identified as <div> tags now have tags of there own.

<div> id we definedHTML 5 Equivalent
'title' and/or 'logo' <header>
'navbar' <nav>
'content' <article>

There are even others, like <aside>, <section>, and <footer>. Using these elements give the added benefit of being easily identifiable and parsable by other applications. For example, accessibility applications like screen readers can target your main content by parsing the contents of the <article> element. The layout process we identified previously still applies we just target a different element type. Enjoy... and make sure you take a look at the HTML 5 spec.  

Tags: