HTML5 Boilerplate “Lite”

Don’t get me wrong – HTML5 Boilerplate is 100% bad-ass, and if you’ve gotten to the point in your career where you are comfortable using it, you should do so.

But some of us are comfortable with our good ol’ HTML 4.01 Strict habits that we learned from HTML Dog, while at the same time wanting to take advantage of @font-face and @media and other HTML5, CSS3, and jQuery goodies. And responsive design and the One Web philosophy are leading-edge best-practices whose time has come.

What starting point is there for such developers?

Introducing... well, This

I present my somewhat dumbed-down version of an HTML5/CSS3/jQuery boilerplate.

Credit where due: the bulk of this is taken from HTML5 Boilerplate, and they deserve the kudos. What you have here started as an HTML5 Boilerplate, but is modified with some simpler options and migrates a few of the unfamiliar HTML5 tags back toward HTML 4.01 Strict thinking. As the same time, a few best practices have been baked-in, so this should give designers (well, mostly me) a quick way to keep up with the leading- (not the cutting-, and not the bleeding-) edge best practices.

Typography

For those of you who don’t know, web typography has arrived. It is now possible to use Bulletproof @Font-Face Syntax to serve any font you have the license for to a web page. This is a blessing and a curse; people will now start using this irresponsibly and making some god-awful designs. I wash my hands of it; if you should do so, it’s on your head! (Beware, also, poorly-hinted fonts. Not all fonts work well for web; be discerning and test cross-browser.)

What about browsers that don’t support CSS3? Graceful degradation, a.k.a. progressive enhancement. Check it out.

One of the easiest ways to use non-standard fonts is to let Google Web Fonts serve your font files. Upsides: free, Google has ironed out the tech, the bulky font files are delivered via their fast servers and not your slow ones, and their selection of fonts is somewhat well-vetted. Downsides: the present selection of fonts is somewhat limited, though growing every day.

This boilerplate uses two typefaces from Google Web Fonts. Do that, or serve them yourself, or use web defaults. I encourage you to brush up on The Elements of Typographic Style Applied to the Web and Nice Web Type.

Normalized CSS with normalize.css

Using HTML to mark up your content semantically and using CSS to style it are the right things to do. But boy, getting consistent results cross-browser with CSS can sure be a pain. Some have solved the issue by using a CSS-reset of some kind that takes every element and styles it to some kind of zero-default. There are valid criticisms of that approach.

I like the approach of using a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. Normalize.css serves as a starting point for the styles you see in this boilerplate. The rest is styled as little as possible. Take everything after the “Project-Specific CSS” comment in the linked stylesheet and replace it with your own work; customize everything above that point.

I’ve striven for non-design in this boilerplate. Instead, make something inspired.

Responsive Design

If you are viewing this page on a desktop computer, resize this screen narrower – much narrower – and see what happens. Designers now have the opportunity to deploy web site content to both desktops and mobile devices without having to create separate sites for each. This website is a poor example; better ones are at Web Designer Wall and at Smashing Magazine (look for the sub-heading “A Showcase Of Responsive Web Design”). I encourage you to create responsive designs.

This boilerplate includes code in the CSS that changes the style based on the width of the viewport. It uses a conditional comment to apply a handy widget from Google that produces the same effect in browsers that don’t support CSS3 Media Queries.

What about older browsers?

There are a couple of methods in place to get older browsers that don’t support HTML5 and CSS3 to behave as if they do. One of note is Modernizr, check it out if you have time to learn all about it. I wanted a simpler approach. This boilerplate uses html5shim to help ensure that the HTML 4.01 Strict kind of coding I do in this HTML5 document using a limited amount of HTML5 and CSS3 goodies will play well with older browsers.

Accessibility: Also Good for the Rest of Us

Design with accessibility in mind. The design you see now on this boilerplate is not ideal for accessibility standards; I would have to go much further for that, and would do so were this a real design. But you will find a “Skip-Around” menu in the code and CSS to make it visually hidden in your browser window.

Here’s the interesting thing about that: a menu to skip to different parts of the page is also a useful design interface for when your visitors are surfing your site on their mobile phones. The responsive-design CSS of this boilerplate reveals one of the visually-hidden menus for narrower viewports.

jQuery for the JavaScript

If you’ve read this far, then for you jQuery may be practically the only JavaScript you’ll ever need, as it is for me. It’s a JavaScript library, a library of pre-written JavaScript which allows for easier development of JavaScript-based applications and server-side scripts, especially for web-centric technologies. And it’s got a ton of plugins available, so you don’t have to develop the applications and server-side scripts if you don’t want to. Take it from me: even if you’ve never written JavaScript before, this is easy stuff to use.

For this boilerplate, Google serves the jQuery library. A few common jQuery plugins (detailed below) have been implemented for example purposes only; you should replace/augment them with ones of your own choosing.

Icons On Certain Links - Automatically

You’ve noticed an icon next to almost every link on this page. I (and others like me) regard it as good interface design to let visitors know when they’re going to be leaving the site they’re on, or when they’re going to a resource other than a web page (such as a PDF file). This boilerplate has a few lines of jQuery code (they don’t even constitute a “plugin”) and some CSS that does that. Here it is in action:

• What you don’t know can’t hurt you: Essay about that
• Slow but sure wins the race: Thesis about that
• The fish begins to stink from the head: Presentation about that
• The wizard quickly jinxed the gnomes before they vaporized. A list of songs about that.
• He can who believes he can: ZIP archive with related files
• It never rains but it pours. Contact us to talk about it!

In-Field Labels

Some will say that every website should have a Search feature, and I’ll 97% agree. Some will say that every form field should have a clear label, and again I’ll 97% agree. Some will complain that they can’t design a good way to put a label next to every form field; I’ll counter that you no longer have an excuse not to make useful design look good. See the Search field on this page; it uses an In-Field Labels jQuery Plugin to look and act the way it does. Go get yourself something like it to make your forms look great.

Sortable Table

It’s not properly styled to look it, but the table below is sortable by clicking on a column heading. Try it.

Song	Artist	Key	BPM
Night in Tunisia	Miles Davis	Cm	110
Blue Monk	Thelonious Monk	Bb	93
Giant Steps	John Coletrane	F	130
Alright, Okay, You Win	Joe Williams	Ab	115

Just another example of how jQuery can, in one library, solve most of what you may need done in client-side scripting.

Lightbox Clone

Click on the picture to the right. The “lightbox” effect that you get when viewing the full-sized picture is a very popular way to display pictures these days. There are a hundred ways to do it. This boilerplate picks a simple (if limited) jQuery lightBox plugin, for example purposes only.

Menus: Superfish, or something else (To Do)

Menus should tell the visitor what’s in the site and how it’s organized, as well as make it possible for visitors to navigate the site. (Thanks again to Steve Krug, to whom I owe so much, for this bit of usability advice.) Pages should also have some way of telling the visitor where they are in he site. And, if where they are in the site has sub-sections or sub-pages, there should be a navigation element somewhere enabling travel to those pages.

This boilerplate tried, in its non-designed kind of way, to achieve all those things in one menu interface. What it has not yet done, and may not ever do, is implement Superfish, something like it, or something custom (jqSextantMenu, seeking contributors) to get the navigation element to behave in the way that I want it to. I’m saving that effort for production environments, since every site is going to have different needs vis a vis the navigation elements and main menu.

Some Design Notes

While this is very obviously a non-designed design, there are a few items of note that I would encourage you to pay attention to in your designs.

I’ve used Contrast, Repetition, Alignment, and Proximity (C.R.A.P.) to help signal what’s the site name, site tagline, heading, body text, picture caption, and everything else. I did not put more than two typefaces on this page, and I selected which one goes where in accordance with good contrast and repetition. Black text is off-black, and I’ve used a modular scale to determine text sizes (11px, 13px, 15px, 18px, 21px, 25px, 30px, 36px).

I’ve made a footer that stinks. Don’t make a footer that stinks.

To Do: Drupal Content Management System

Future versions of this boilerplate will be on a Drupal CMS. Why? Because basically, there’s no longer any excuse not to use the best available CMS; open-source distributions such as Open Enterprise are available for easy set-up. You can even style them any way you want.