One of the principles of semantic HTML development is that you want to boil your page down to its most elemental, essential components before you start, and build your structure around these. HTML 5 provides a number of new page elements that can help identify those basic components, but it doesn’t change this key approach.

However, the need to support the smaller screens and tighter bandwidth associated with mobile devices actually provides a developer with a new opportunity. By paring down a site to the minimal set of components necessary for a complete mobile experience, a developer can create a solid semantic structure for that page right from the start. A page built in that manner is much easier to enhance for a richer desktop experience than it would be to trim away desktop features for a more minimal mobile device experience later.

This is the bare essence of progressive enhancement, and it will sharpen your focus as it streamlines your process.

To do this effectively, it may be useful to turn your CSS inside out, and build your standard stylesheet as if all you were developing was a mobile site. Once you have that working the way you want it on a mobile device, you can specify the presentation for desktop web browsers conditionally. This not only keeps your stylesheets lean and responsive; it also helps you focus your development efforts around the most critical elements of your site.

This may sound like a very different way of approaching your site development, but it’s not all that complicated, thanks to a few convenient CSS conventions. The real trick is thinking about your desktop site as an enhanced child of your mobile site, instead of the other way around.

For example, imagine you’re creating a new HTML 5 website with a main page, a set of related subpages, and a template that involves a standard header, footer, navigation menu, and a sidebar with a set of elements you want repeated on each page. You’re already ahead of the game if you’ve visualized this as a set of repeating components that can take advantage of our new semantic HTML 5 elements, such as header, footer, nav, article, section, and aside.

The first question to ask is what the simplest presentation of a site like this could be. If you stripped away anything that would detract from a user’s experience on a mobile device, what would you have left? Might the sidebar elements be extraneous? Or if they are necessary, do they have to float off to the side, squeezing the space available for the main content of a page, or could they be pushed down to the bottom of the page?

With these thoughts in mind, you might start building your semantic HTML 5 page skeleton by populating a header, article, and footer, inserting both a section and an aside into the article. Put the elements together in the order that they would be read logically if there were no styles applied, and you can begin to imagine how they will appear to a mobile device. So the aside would be placed after the section inside the article. That way it will easily fall after the section on a mobile screen when the page is built, unless you explicitly position it to the side.

After building the basic semantic HTML structure, and making sure that all the elements on the page use appropriate HTML 5 elements, you’re well on your way to having a mobile site that flows easily into a small screen with few bandwidth-hogging embellishments. In your stylesheet, you can now add all the design driven rules for features such as colors, fonts, alignments, and background images to make this lean and sleek mobile site support your branding and style guide requirements on your iphone or Android device, or any mobile device that supports CSS styling. Remember that all these styles will be inherited on the desktop, saving you the trouble of re-creating them independently for both environments.

To add styling for desktop browsers, you just need to add the following @media definition to your CSS stylesheet, and put your desktop-specific CSS definitions inside of it:

@media only screen and (min-width: 768px) {
    /* Put desktop CSS definition overrides here */
}

This definition includes a conditional statement querying the browser window to see if it is 768 pixes wide or wider. Since this definition falls after all your general CSS style definitions, it will override them selectively, and let the rest cascade through. And because these definitions sit inside of the @media definition, they will only be applied in the case of a browser with a width of 768px or more.

So for example, to get that aside sitting comfortably off to the right of your window in desktop browsers, you might want to float the section and the aside to the left, and give the article a hidden overflow and a right padding the width you want the sidebar to be. Then give the section a width of 100% and a border-right the width you want the sidebar to be, and a negative margin-right that matches. Then give the aside the same width, giving it a negative margin-right that matches the right border width of the section:

@media only screen and (min-width: 768px) {
    article {
        padding-right: 250px;
        overflow: hidden;
    }
    article section {
        float: left;
        width: 100%;
        border-right: 250px solid transparent;
        margin-right: -250px;
    }
    article aside {
        float: left;
        margin-right: -250px;
        width: 250px;
    }
}

Now your mobile device and your desktop browser will share most of the same basic styles, and the same semantic HTML structure, but the site will expand horizontally on browsers wider than 768px to allow the aside to appear as a sidebar next to your page content.

And there may be other rich presentation elements such as tabbed navigation or larger background images that you would want to incorporate into your desktop browser experience in the same way. This is the place in your CSS to do it.

Of course, some older browsers might not recognize conditional @media definitions. But that’s another benefit to using this approach. Those browsers will ignore these new definitions, and serve those users the pared-down but fully functional mobile-friendly version of your site–which is probably what you want when trying to support ancient technology in the 21st century.

Developing your site inside out, considering the mobile device application first, will strengthen your skills and improve your process:

• For web developers, it forces you to focus on the basics first, and use progressive enhancement at the deepest levels of your page structure.
• For user interface and user experience designers, it isolates experiential design from visual design in a way that supports the advantages of each platform and how users expect them to behave.
• And for visual designers, it encourages the creation of a device-independent style guide, as it separates branding from layout to optimize the user experience for each type of device.

Once you get your head around it, you may never go back to developing pages for the desktop first.

Different web browsers interpret HTML differently. It’s a fact of life, and it can feel like a curse to HTML developers when their clean semantic HTML and CSS code fail to deliver the same results to users across all browsers. Yet the folks developing the next generation of browsers continue to push forward with browsers that include incompatible features from unreleased standards, or proprietary standards that lure us into innocently building web apps that break for our poor users on competing browsers. That’s happening right now with CSS 3 and HTML 5 (branded as “HTML5″ by some and just plain “HTML” by others).

The proposed HTML 5 standards introduce a number of useful semantic elements that can help HTML developers plan the structure of their documents. But even with the new web standards in flux, the savvy HTML developer comfortable with the concept of progressive enhancement can start using these elements right now.

New HTML 5 Semantic Elements

Among the new semantic HTML elements to help a developer structure a web page are new general container elements called header, footer, and nav. These are block-level elements that can replace the conventional div with a class of header, footer, or nav commonly used by HTML developers for branding, nav bar, and attribution.

We now have article, section, and aside elements to group content within a page. And since a single page of HTML 5 may have multiple sections with multiple articles, or multiple articles with multiple sections, the cascading style sheet selectors for these elements should provide inheritable styles, just as it would be with a set of divs that share the same class.

Each of these articles or sections, as well as the main content area, may now also have its own hierarchy of headers from h1 to h6, wrapped safely inside its own header elements. No more limiting yourself to a single h1 per page. The CSS styles for these headers can be inherited logically based on the containers.

Progressive Enhancement

But we still live in a world where we have no control over the browsers a user might have. Is it an old one, designed well before standards for HTML 5 were even proposed? Or is it a new one, with a unique idea of how to interpret the elements in this new unfinished web standard?

Happily, there are some Javascript utilities that are coming to the rescue. One of the smallest and simplest is the Google HTML 5 Shim. This simply allows older browsers to recognize the current set of HTML 5 elements for the sake of CSS styling. Yes, this even works in Internet Explorer 6!

Another tool is Modernizr. This handy bit of code includes a shim, but also adds several enhancements that allow features such as advanced CSS3 selectors to take advantage of the native features of older browsers. After all, if we’re going to create our beautiful markup, we want our cascading style sheets to have all the modern advantages, too. To get started using it, all you have to do is include the script, and add a “no-js” class to your html element.

What We’re Losing

The proposed XHTML standard many of us adopted—in spite of the way it was actually interpreted by web browsers—isn’t going away. However, future development has been halted, and we are being encouraged to use HTML 5 instead for web development. HTML 5, like earlier flavors of HTML, doesn’t require us to close all of our elements the way XHTML does, and supports target tags for opening links in separate windows. Of course, creating structured HTML with XML-inspired closed elements is still a good practice, as it makes our page structure cleaner and easier to manage and maintain.

One of the convenient enhancements that follows the practice of actual HTML developers who ignored the published standard is that we no longer have to worry about including block-level elements inside our anchor elements. It is now permitted to put an entire div inside a link, and our HTML 5 markup with still be compliant.

And although we’ve all learned to favor em and strong elements over i and b elements…some of the time…HTML 5 has reinvented our old bold and italic friends, redefining them based on how they have been used by HTML developers over the years instead of deprecating them.

There are plenty of other changes in the proposed HTML 5 standards, but these are a few that might get you started down the right path as you apply the concepts of progressive enhancement to your HTML development.

So with a good sense of semantic structure, we can approach any web design we encounter and parse it into clean, cross-browser compliant HTML 5 based on the web standards that exist. It just takes a little sense, a little discipline, and some Javascript tricks, to help our web sites survive whatever the browser developers throw at us!

You would have been mistaken. I know I was.

Among the tricky aspects was my desire that the text retain its styling, regardless of the width of the container. I also wanted it to truncate at the appropriate complete letter, rather than chop a word off in the middle of a letter. I wanted to be able to specify a string to use to indicate truncation (eg: “…”). I wanted the complete text to be preserved, and added to the element as a title tag so that it would be available to readers who hovered over the truncated text. And of course, I wanted it to work seamlessly across browsers.

What I decided I needed was a temporary DOM object where I could copy the styled text. I needed something that would report its width based on the width of the text it contained. That ruled out both block elements such as divs (which take their width from their container) and inline elements such as spans (which report zero when queried about their width, regardless of their actual contents). What to do?

Then I realized that tables adjust their width to the width of their contents, AND are able to report that width when queried. Eureka! I just needed to add a temporary table to the DOM somewhere that it would be untouched by other styling, and make sure all the elements that made up the table had no padding, margin, or border settings. I didn’t need to worry about the semantics of using a table this way since I was going to remove it from the DOM as soon as I was done with it. You won’t hear me saying things like that very often, but in this case even I was satisfied.

To copy the styled text, I had to take a two-step approach. After creating a temporary table, I copied the contents of the original element I wanted to measure, and then copied each of the original element’s font-relates styles and applied them to the inner td of the table. Firefox immediately rewarded me with an accurate measurement, which I could use in a recursive loop to chop away one letter at a time until I had the width I desired. It looked like I was going to be done with this one quickly.

I replaced the contents of the original element with the truncated text easily. I tossed in a call to cache the full text and apply it as a title attribute if the text needed truncating. I even made a quick swap of the truncation indicator text (“…”) into the styled table cell from the start, so I could account for the pixels that added to the width. It was looking pretty sweet.

Until I tested it in Internet Explorer.

Now the creepy thing was that it even worked in Internet Explorer with the font size set to the default value. But as soon as I tried font sizes that were larger or smaller, I started seeing the width vary in odd ways. Larger fonts would result in a reported width that was wider by an ever-increasing factor, resulting in truncated strings that were too short for the space. Smaller fonts did the opposite, reporting a narrower width than they actually required, resulting in truncated strings too long to fit the desired width. It wasn’t a straight line rate of change; I could see there was some mysterious equation at work here.

I will admit it took me a few hours of fiddling, and I had to dust off that part of my brain that was paying attention during high school algebra. What I discovered (and this is the golden nugget in this chicken soup of a blog posting) was that Microsoft calculates the pixel size of rendered text based on the square root of the desired font size divided by a base font size of 16.

That works out like this in Internet Explorer:

Math.sqrt(parseFloat($('#element').css("font-size"))/16)

Whereas other browsers use a formula more like this:

parseFloat($('#element').css("font-size"))/16

Once I had that worked out, the rest of the project came together nicely. Here’s the code for the set of JQuery plugins I ended up with. One does the truncation, and relies on the other one to get the width of the text:

(function ($) {
  // A plugin to truncate the text inside an element to a given width
  // This plugin depends on the textWidth() plugin, which should be below
  $.fn.textTruncate = function(width,marginText) {
    var that = this;
    var width = width || "250"; // default width of 250 px
    var marginText = marginText || "..."; // default margin text of "..."
    that.css("visibility","hidden"); // The element should be hidden in CSS
    return this.each(function () {
      // A table as a temporary dom element for measuring the text width
      $('body').append('<table id="textWidthMeasurer" style="padding:0;margin:0;border:0;width:auto;zoom:1;position:relative;"><tr style="padding:0;margin:0;border:0;"><td style="padding:0;margin:0;border:0;white-space:nowrap;">' + marginText + '</td></tr></table>');
      var measurer = $('#textWidthMeasurer');
      var margin = measurer.textWidth(measurer);
      if (that.textWidth(measurer) > width) {
        var contentLength = that.text().length;
        that.attr("title",that.text());
        while (that.textWidth(measurer) >= width - margin) {
          contentLength--;
          that.text(that.text().substring(0,contentLength));
        }
        that.text($.trim(that.text()) + marginText);
      }
      // Make the element visible and remove the measuring table
      that.css("visibility","visible");
      $('#textWidthMeasurer').remove();
    });
  };

  // A helper plugin to get the width of the text inside an element
  $.fn.textWidth = function(context,css) {
    var that = this;
    var context = context || null;
    var css = css || null;
    // Optionally pass in an array of additional CSS properties to use for measuring
    var properties = ['font-family','font-weight','font-style','letter-spacing'];
    if ((css != null) &amp;&amp; (css[0] != null)) {
      properties.concat(css);
    }
    // Establish a default context if none is passed in (slow)
    if (context == null) {
      if ($('#textWidthMeasurer') == null) {
        $('body').append('<table id="textWidthMeasurer" style="padding:0;margin:0;border:0;width:auto;zoom:1;position:relative;"><tr style="padding:0;margin:0;border:0;"><td style="padding:0;margin:0;border:0;white-space:nowrap;"></td></tr></table>');
      }
      var context = $('#textWidthMeasurer');
    }
    var target = $('td',context);
    // IE uses a bizarre formula to calculate the pixel value of font sizes:
    var fontSize = ($.browser.msie) ?
      Math.sqrt(parseFloat(that.css("font-size"))/16) + "em" :
      parseFloat(that.css("font-size"))/16 + "em";
    target.text(that.text()).css('font-size',fontSize);
    properties.forEach(function(property) {
      target.css(property,that.css(property));
    });
    var width = context.width();
    return width;
  };
})(jQuery);

If you want a demo, you can check out a sample page with styled text that adjusts to match the width specified.

You can also download the source code for the plugin set. It’s open source, and free to use in commercial or personal projects under an MIT (X11) license.

Let me know what you think.

I wanted to be able to just write an /index.haml file that referenced a /stylesheets/index.sass file, upload them to my webroot, and just have them render in any browser.

This weekend I came up with a simple solution that seems to work pretty efficiently. It doesn’t do any code caching, so the pages are interpreted from HAML and SASS every time they are loaded. But that’s the kind of dynamic access I was looking for. The engines are efficient enough that the processing time doesn’t seem to slow down access much.

The basis of the code is a .htaccess file that captures requests for files with the .haml and .sass suffices, and passes them to the appropriate Ruby cgi for processing with the latest and greatest HAML. The rendered HTML and CSS code are sent straight to the browser. You just need a ruby installation with the haml gem installed on your Apache-based web server. This works fine on shared virtual hosts, since there is no modification of any configuration files required.

Here’s a basic version of the .htaccess file, stripped down to just the HAML and SASS aspects. I’ve also defined a DirectoryIndex that gives preference to index.haml over index.html.

DirectoryIndex index.haml index.html

AddHandler hamlpage .haml
Action hamlpage /cgi-bin/haml.cgi

AddHandler sasspage .sass
Action sasspage /cgi-bin/sass.cgi

The haml.cgi to parse the HAML goes into the cgi-bin directory. (Note that the seemingly extra “puts” command on a separate line is required to make the cgi work. Leaving it out will bring you nothing but sorrow and 500 errors.):

#!/usr/bin/ruby
require 'cgi'
cgi = CGI.new
exit if cgi.path_translated.nil?
exit unless File.exists?(cgi.path_translated)
haml_file = cgi.path_translated
require 'rubygems'
require 'haml'
template = File.read(haml_file)
haml_engine = Haml::Engine.new(template, :format =>:html4)
output = haml_engine.to_html()
puts "Content-type: text/html"
puts
puts output

The sass.cgi to parse .sass files looks very similar, and goes in the same place:

#!/usr/bin/ruby
require 'cgi'
cgi = CGI.new
exit if cgi.path_translated.nil?
exit unless File.exists?(cgi.path_translated)
sass_file = cgi.path_translated
require 'rubygems'
require 'sass'
template = File.read(sass_file)
sass_engine = Sass::Engine.new(template, :style=>:compact)
output = sass_engine.to_css()
puts "Content-type: text/css"
puts
puts output

With these files in place, and given executable permissions, you should be able to create a .haml file like this:

!!! strict
%html
  %head
    %link{ :href => 'stylesheets/test.sass', :rel => :stylesheet, :type => 'text/css', :media => 'Screen' }
  %body.test_page
    %h1 Hello World
    %ul
      - (1..3).each do |counter|
        %li
          This is line
          &= counter

With a .sass file that looks like this:

.test_page
  h1
    color: #f00

And get an HTML output file like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <link href='stylesheets/test.sass' media='Screen' rel='stylesheet' type='text/css'>
  </head>
  <body class='test_page'>
    <h1>Hello World</h1>
    <ul>
      <li>
        This is line
        1
      </li>
      <li>
        This is line
        2
      </li>
      <li>
        This is line
        3
      </li>
    </ul>
  </body>
</html>

With associated CSS that looks like this:

.test_page h1 { color: #f00; }

The SASS engine doesn’t seem to be as efficient as the HAML engine, so it would probably be my first candidate for caching. But as an immediate way to explore the flexibility and expressiveness of HAML and SASS, this was a very satisfying little project for me.

If you want to try it locally, here’s a zip file with the code above, structured the way you would want it in your web root directory.

If the Javascript programmer needs to alter the HTML, move HTML blocks from one place to another using Javascript commands such as the JQuery commands .after() or .before(), or dynamically generate CSS styles not defined in our CSS pages, our application will be more brittle and harder to manipulate in the future.

Knowing how the page will work before coding the HTML skeleton is critical. For example, it allows us to create the spans which the Javascript programmers will fill with information, and the divs which will be shown, hidden, and otherwise manipulated. With AJAX, a single page may change radically over its lifetime on a user’s screen. Examine the page carefully to see which elements will change, and which ones will stay the same. We are less likely to break the layout of a page if we replace the content of a single defined header div across the lifetime of the page than we are if we hide that header div and then show another in the same location.

The JQuery Javascript library allows programmers to target HTML elements in a page using the same CSS definitions that define the style of the elements. While that is convenient, it is generally more flexible to separate the functionality of the Javascript from the presentation of the CSS. That way, if things change in the style, they are less likely to compromise the program logic. Javascript is also much more efficient about parsing a large document for id’s than for classes. Therefore, I recommend using unique id’s for targeting Javascript to an element, and using classes and inheritance to apply styles to an element.

When to Use Classes

Classes are used for styles that may be used repeatedly for different similar elements.

In CSS (and JQuery), a class is indicated by a . character.

in HTML, a class is indicated by adding class=”classname” to an element.

Use a class as the default method to apply a style to any element on a page.

Classes may be inherited from a parent element, and a single element may use multiple classes by using a space-separated list of classes, so try to re-use existing classes whenever practical.

This is a CSS style definition, for the class “title”

.title {color:#f00;font-weight:bold;}

It will apply to any HTML element with the class “title”

<p class="title">This is a title</p>
<div class="title">
    <p>This title inherits its class from the contining div</p>
</div>

When to Use ID’s

ID’s are used to identify page elements that are unique to a page, such as input fields in a form, or header blocks that are only used once on a page, but may be used the same way on every page in a site.

In CSS (and JQuery), an id is indicated by a # character.

in HTML, an id is indicated by adding id=”idname” to an element.

Use an id if you are creating a major section of a page, such as a header or a navigation bar, or a form element such as an input field, a select list, or a checkbox. Otherwise, it’s preferable to allow the Javascript programmers to assign id’s to elements.

This is a CSS style definition, for the id header

#header {background-color:#000;color:#ddd;border:3px solid #ccc;padding:0.5em;font-family:sans-serif;}

It will apply to the single unique HTML element with the id “header”

<div id="header">
    <p>This is the only div on the page with the id of header</p>
    <p class="title">This paragraph inherits both the #header and the .title styles</p>
</div>

As we enter 2009, this is my state-of-the-art approach to constructing an efficient, semantic, and flexible web site. I’ll start with the HTML skeleton:

A basic HTML page skeleton should tell the browser what kind of content to present, in what order the content should appear, and what to do with it.

I start with a !DOCTYPE to tell the browser what our page will consist of; for example, a public HTML document that complies with w3C standards for HTML 4.01 Strict.

Next I have the HTML element, which consists of a HEAD and a BODY element. Note that you have to close the HTML, HEAD, and BODY tags (/HTML, /HEAD, /BODY)at the end of each definition.

In the HEAD I include the title, the encoding standard, and references to external stylesheet CSS files, starting with a CSS reset script, a possible CSS script with code for all the shared elements across a set of pages, and then a CSS script with code specific to this particular page.

In the BODY I create elements of semantic HTML and fill them with content.

At the end of the BODY tag I include SCRIPT tags. These tags load external JavaScript libraries, such as JQuery, or contain document-specific Javascript.

The code below will create a page that looks like this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Hello Page</title>
	<meta http-equiv="Content-Type" content="text/html;charset=ansi" >
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <link rel="stylesheet" href="css/hello.css" type="text/css">
</head>
<body>
    <p class="description">The box on this page is ten lines down and has a dotted border.</p>
    <div id="mainContent">
        <p>Hello World!</p>
    </div>
	<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
	<script type="text/javascript">
	    $(function() {
	        $("#mainContent").click( function() {
	            alert("You clicked me");
	        });
	    });
	</script>
</body>
</html>

Since this page is called hello.html, the visual style of the elements on this page is defined in the a hello.css file, which is coded like this:

/* Formatting for the hello.html page */
mainContent {width:50%;position:relative;top:10em;margin:0.5em;padding:0.5em;border:2px dotted #ff0;}  

/* Styles for the hello.html page */
body {color:#fff;background-color:#005;}
mainContent p {color:#fcc;text-align:center;font-family:impact,helvetica,sans-serif;font-size:3em;}
.description {text-align:center;font-style:italic;}