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.
