Progressive Enhancement Part 4, Graphics and Style

Now that we have a working layout we can worry about things like colours, backgrounds, borders, shadows, etc, etc... Having the content, semantics and layout in place means we know how big things are, what range of sizes they might take, and a whole host of other things that dicking around in pixel measurements in some goofy paint program like Photoshop is relatively incapable of.

In the markup, there's only a handful of changes. I added a LINK to the favicon, and one SPAN inside the H1 so that I could change the color of the word "CODE".

The end result being this: template.html

The CSS: screen.css

Does't make too many major changes either nor should there be a whole lot I need to explain. The background color was changed to the header and footer area color so that when min-height flex fails in older browsers (IE9/earlier) the shrunken format at least stretches the footer color. 99% of it is just the application of rounded corners, background-colors, a few borders between elements, and anchor styling. Simple stuff that shouldn't need a complete breakdown.

I do use a lot of box-shadow where most people would use gradients. It's just faster, easier and more reliable. I'm also REALLY digging that the only browser we need vendor prefixes for at this point is Safari -- the laugh being that Safari really is aging like milk since Google forked off "blink" and took most if not all the talent with them.

I went with a simple set of blues akin to many stock templates for existing CMS. All the colour contrasts meet WCAG 2.0 AAA minimums. It's clean, it's simple, and it's fully accessible.

The only major thing I think needs explanation on this stage is the addition of the logo next to the text. As presentation I applied it by simply padding one side of the h1 and adding it as a background image. When the screen gets to that narrow width where there's no room for it, I just remove the background image and that padding in the media query.

But really that's the whole process apart from the optional stage 5 "enhancing the page with scripting".

It's not rocket science, it's not hard, and the result is compact, easy to edit, easy to maintain, loads quickly, and best of all be highly unlikely to alienate any potential users since it gracefully degrades images off, CSS off, visuals off, and even back to simple text-only browsers like lynx.

Which is pretty much why Tim Berners-Lee created HTML in the first blasted place!

As you can see, that's spitting distance from what I actually deployed for this site. Total development time? 40 minutes? A third of that just dicking around with colouration, gradients and font-faces.


  • elementals.js
    A lightweight JavaScript library focusing on cross browser support, ECMAScript polyfills, and DOM manipulation.
  • eFlipper.js
    An image carousel script using elementals.js
  • eProgress.js
    A JavaScript controllable progress bar using elementals.js. Based on the nProgress project that relies on the much heavier jQuery library.


Browse code samples of people I've helped on various forums. These code snippets, images, and full rewrites of websites date back a decade or more, and are organized by the forum username of who I was helping. You'll find all sorts of oddball bits and pieces in here. You find any of it useful, go ahead, pick up the ball, and run with it.