recap 2012
Another year has passed, which means it's once again time to rehash some of the better offerings I posted on my blog this year (check the 2008 and 2010, 2011 editions for more recaps). 2012 was an interesting year dominated by responsive and adaptive challenges, but also a year that threatened html from all kinds of different directions. Here's what I think should be remembered when thinking of 2012 (when it comes to front-end that is).
10. content layout headaches: on headings and images
Even though we face some very tough and harsh challenges on a regular basis these days, let's not forget that are still a couple of age-old problems that are awaiting a good solution. Content layout is still a tricky balance between offering freedom to the content provider and sticking to fixed structures that are tightly coupled to the css. But even then there are some things we just can't do cross-browser yet, which is a little sad to admit if you know we can even build in-browser 3D games these days.
09. cleaning up html pt1: when mixins become skins
When working with css post-processors, it's essential to learn how to write a good mixin. But take it one step further and we can even start defining css skins for entire components. Not only is a lot easier to maintain your css file this way, it also helps to keep your html as clean as possible, eliminating the need for superfluous classes that serve as mere css hooks.
08. data- attribute boundaries: data, not behavior
This past year I've written a couple of javascript-inspired posts on how to deal with functional patterns in your html. I proposed the use of the data- attribute to hard-code the functionality in html, but came back on that decision after realizing this goes against long-standing best practices. While not renouncing the data- attribute as such, make sure you use it for what they are intended, not for mixing content and functionality.
07. spacing row items: the liquid challenge
Going the responsive route using only breakpoints isn't that hard, but if you want your site to be liquid in between those breakpoints you run into some interesting problems. What to do with all that extra space? Increase the size of the gutters, make your components wider or do both? There are several options that help you deal with that extra space, here are the most common ones together with their respective drawbacks.
06. responsive images: leave html alone
The holy grail of responsive web design (or at least, one of the most popular holy grails) is still left unsolved. Earlier this year two propositions surfaced to deal with responsive images, sadly both options involved a revamped html syntax that explicitly stated all the different sizes and urls in the html code itself. A disaster for maintainability and a solution we should really try to avoid.
05. css selector performance: front-end myths
The number of posts that talked about performance this year where just too many to count. It seemed that every day a new article surfaced, urging you to do X or Y to make your website just that little bit faster. But few of these posts cared for real-world performance or the maintainability problems these performance increases brought with them. Performance has become an import part of our job, but it shouldn't be the only motivator to pick a certain technique or methodology.
04. writing html: eyes closed
I've been focusing on pure html for a couple of years now, but even then I still find myself being influenced by design or wireframe visualizations from time to time. As css becomes stronger and more flexible, we should learn to write html with our eyes closed, focused on logical order and semantics rather than visualizations and grids. It's a tricky exercise, but one we could learn a lot from.
03. internet environmentalism: a tribute to the web
My definite plea for the importance of good html. While the web is taking big strides forward each and every day, the bottom line behind all these evolutions is still plain old html. All the other layers on top make the experience better (at least, they have the potential to do so) but ultimately are not nearly as essential. Make sure your content is valuable, make sure it is structured well and you are good to go.
02. responsive woos: head first and eyes closed
Responsive (/adaptive) web design is hip, it's cool and it's the proper thing to do these days. But left and right people are suffering to wrap their heads around the myriad of possibilities that have opened up. I think it's already safe to say that in five years time the websites we are making today will be hopelessly outdated, leaving little in the way of the good hopes we had for building solid and durable website platforms.
01. media queries: we're doing it wrong
Media queries, our most valuable and important tool when writing up a responsive design. But at the same time they are keeping us back from writing component-based responsive behavior. Instead of focusing on a components width (either defined by the component itself or by its context) media queries focus on screen sizes or browser sizes. Not even the newly proposed extensions set out to solve this strange omission in our tool set.