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.

What is the object?

How do we make that apparent?

Nice that this great spot is only a seven minute walk from the office.

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!

This is what happens when you spend the evening drawing value keys in compressed charcoal. Feels all smooth and powdery. But don’t touch anything afterward.

I have to say, while the Cooks Country technique was unusual–especially the bit about melting and browning the butter before adding in the rest if the ingredients–I was blown away by the results. The dough itself was a toffee-like delight, with an amazing mixture of raw and cooked flavors. But the cookies were phenomenal!

And an original recipe thigh is only 220 calories while a spicy crispy one is 390 calories? As Amy Poehler would say, “Really?”