SASS and reactive CSS rock

As some might have noticed I recently launched another site and this blog also has a new design since a few weeks now. In both cases I used the redesign and the creation to learn new technologies and I want to share some thoughts and tricks here.

feelinghands.at as seen on the iPhone

HTML5

For both designs I used HTML5 but tried to be as backwards compatible as possible… this meant that I used <div>-tags inside the new tags (i.e. <header> or <footer>). While this is not really beautiful it works fine in all major browsers (and yes, I dumped IE6 support, no-one should care about this browser any longer!).

Overall using the HTML5 structural tags without using them in the CSS does not really make sense, but the tags are there in case they are needed in the future. Or in case Google wants to see them. The HTML5-DocType works out fine and as I said above, the sites work in all browsers without any problems related to HTML5.

SASS

While I am more a programmer and not so much a designer I really enjoyed working with SASS. Basically SASS is a CSS preprocessor, and each CSS file is also a perfectly valid CSS file. By using SASS the developer can use variables, nesting, functions (called mixins) and a few other tricks that make working with CSS actually fun.

So all $color: #fff; definitions end up on top of the file and the variables can be used throughout the code. Code is properly nested and through the indention it is easy to spot the level of an element. //comments can start using double-slashes, files can be imported etc. etc. I highly recommend checking out the SASS homepage and I swear you will love SASS for CSS! No more project without SASS!

mbaierl.com as seen on the iPhone

Reactive CSS

The new designs are reactive, which means that they adopt themselves on mobile devices with a smaller screen. You can see some sample screenshots of mbaierl.com and feelinghands.at as they would look on an iPhone in this article on the right hand side. All of this is done only with a single CSS file (or multiple ones that are imported using SASS), so there is no different HTML structure or different URL to use for the user. It simply works out of the box if you visit the site.

To achieve this effect all you need to do is to override styles within an @media query:

The above query will target i.e. the iPad and all CSS rules within the @media query will only apply for screens smaller 700px. If you also add this rule:

it will target the iPhone, so the same CSS file can contain iPhone, iPad and Desktop rules.

As a special hint, if you want to have high resolution icons for the iPhone 4 Retina display or the new iPad you can target those devices using this rule:

That way the images will show up sharp and not blurry on devices with a Retina display.

Another very neat trick with SASS is inheritance…. to make my designs reactive I had to reset tons of positioning I did for the elements on the page… doing that manually would have been a pain so I created a .mobileReset class and extended from it in all absolute positioned elements, i.e.:

Within the @media section for the mobile devices I declared the .mobileReset class:

SASS will now do the right thing and add all elements that extend the class to the .mobileReset definition within the @media query, effectively resetting all positioning. This allows me to define the mobile classes independently of the elements.

I can’t close this section without writing about possible drawbacks of using reactive CSS – file size and downloads. Of course adding more and more styles will increase the overall CSS file size, but this should not be that much of an issue any longer (research shows that the download of a 10k vs. 12k file does not really matter that much). However, the mobile device will download and cache all your images, so even if they will never be shown on the mobile device, the files are still downloaded. And the number of hits has a huge impact on the performance of a site. So make sure you do not use too many images and use CSS sprites where possible.

Conclusion

If you build a new site there is absolutely no reason to *not* use HTML5. It is ready for mainstream, and if you only use it to have a shorter DOCTYPE – use it.
Also for new and even existing sites I highly recommend the use of SASS – it makes CSS development more fun than it is (no, does not save you from the cross-browser hassles, but at least there are variables and routines and nesting and imports…).
And for reactive – if the site does not have a dedicated mobile site it is a great way of giving your mobile users a better experience, so there should also be no excuse for not building in at least a few rules for mobile devices so the site looks good on those devices too!