The HTML5 Boilerplate has recently separated out normalize.css, giving it a separate stylesheet link in its default template file. Should you leave it like this in your production site? Is there some caching or other gain? Nope. At least probably not.
Looking at the rationale, one finds this was done to help with maintenance and versioning of the H5BP code.
For production, the recommendation is still to roll up all your CSS, including normalize.css into one minified and compressed file.
Benefits of disentangling normalize.css from the rest of the project’s
Easier to track normalize.css version.
Easier to update normalize.css.
Easier to remove normalize.css if the user wants.
Clearer distinction between normalizing CSS and the additions that HTML5 Boilerplate provides. Drawback is the additional HTTP request incurred from the extra
stylesheet referenced in the HTML. However, we already do something
similar for the JS, and anyone serious about performance is going to employ a build process to concatenate and minify CSS/JS.
As pervasive as normalize is becoming, this could become a new best practice …
But in terms of site performance there would need to be caching benefits to overcome the need for the extra HTTP request. If I understand how browsers decide when to use a cached file, the file would need to be sourced from the same online location — as the H5BP does with Google-hosted jQuery.
The trend away from skeuomorphic design toward flat design has in many ways been refreshing and enjoyable. And yet, it’s worth noting that flat can be taken too far, to the detriment of usability. Take for example Microsoft’s modern.ie site – see the commented screenshot below or check it out yourself.
I would argue they’ve taken interface design hyperflat, and in so doing have left users without important usability hints.
Yes, the gradients and shadows of yesterday have often been overdone. But there is such a thing as subtlety and sophistication, without complete abdication. Used well, gradients, shadows, and hover effects give users important visual cues for navigating your website’s interface more efficiently and effectively.
Letterpress … is a perfect example. It is indeed, mostly flat … But Letterpress does have Z-axis depth: when you drag a letter tile, it pops up and has a drop shadow under it until you place it. There’s nothing “flat” about that. What Letterpress rejects is not depth, but depth as mere decoration. The visual “raising” of a tile as you play it is a natural visual cue, a way of emphasizing what it is you’re moving.
Of course there are other examples. One I’ve recently enjoyed is Andy Clarke’s recent Stuff & Nonsense redesign. Check out his homepage, and you’ll see some elements that are flat, some with edges, some with shadows. All links and buttons have hover effects, begging to be clicked. Then there’s that one gorgeous button, darn near unavoidable in its lusciousness. (No Skitch arrows needed.)
What’s going on here? Is it flat or not? With the times? Or behind? One could be forgiven for suspecting that Clarke has subordinated such questions and privileged the point and purpose of the communicative task at hand. While obviously interacting with current trends, the design is enslaved to none of them. Rather it brings past, recent, and current conventions together under the auspices of time-tested and user-empowering design strategies, including visual affordances, interactive feedback, and visual hierarchy.
Clear, straightforward, expressive, and inviting, the design speaks a visual language that is easy to understand and navigate — it looks great to boot — and it leaves no uncertainty about the most important action items on the page.