Read my book

I wrote books about Webpack and React. Check them out!

Monday, May 7, 2012

Thoughts on Static Websites and CSS Frameworks

During the last few months I've done quite a bit of work with GitHub Pages and CSS frameworks, namely Bootstrap and Skeleton. GH Pages is just the perfect way to host a light static site. By default it provides support for Jekyll, a static site generator. You can use it to host vanilla HTML if you want so you are free to use whatever generator you want.

Jekyll is quite good at what it does. It has its limitations, though. Implementing a site with complex navigation using it can be an exercise in frustration. Probably the biggest project I've implemented using this combo is the site of my co-op. I wrote an article about the design process that you might want to study. Overall it was a nice learning experience.

Around a week ago we had a local meetup. This gave me a chance to capture some of the experience gained in a few talks. In this post I'm actually going to discuss only two of them. I'm saving the third one for a later post.

Static Websites - The Final Frontier

I admit the title of this talk was somewhat cheesy. For some reason I decided to use a Star Trek theme for the talk so the title seemed quite apt. What do static websites and Star Trek have in common anyway? In my view old is new and new is old again. Technology works in a cyclic manner. Old ideas get replaced with new ones and then become trendy again. I believe building websites in a static way is one of these.

Even though static sites are static by definition (ie. the server doesn't generate some snippets "on the fly") it is possible to develop some quite interesting features by relying on JavaScript. For instance you could fetch some social data (ie. tweets, RSS) without too much effort. If you want to take this one step further, you could treat this sort of data as "static" as well by rendering that data on the server say once per hour using cron.

The presentation below will give you some more insight to the topic. It's based primarily on a few case studies. There's a little bit of theory included as well.

Bootstrap vs. Skeleton

On retrospect I should have made this talk Batman vs. Joker themed... Oh well, perhaps next time. Bootstrap and Skeleton are just two of the many CSS frameworks available. They provide nice basis for comparison, though, given they have quite a different focus.

Generally CSS frameworks encapsulate some common CSS related woes and make it a lot easier to get started. In this case both frameworks provide responsive layout even. It probably won't be ideal from usability perspective but likely a lot better than you could do on your own in a tight schedule.

Responsive design progresses from desktop to mobile. Lately an opposite way of thinking, mobile first design, has gained some popularity. It will be interesting to see if that affects the frameworks somehow. In a way thinking about mobile specifically makes sense. You just cannot leave it to luck and hope it works. Due to the wide variety of mobile devices available this isn't unfortunately an easy problem to solve well.

As there is a lot of discussion available on the pros and cons of using CSS frameworks I won't go into that. Suffice to say that using them can definitely make a difference. Consider giving at least a few of those a go just to see if you get anything useful out of them. For me just getting a useable grid layout was a huge thing.

For now I've settled with Bootstrap and Skeleton. Skeleton is just perfect for simple projects while Bootstrap provides plenty of room for growth (lots of functionality!). They are not ideal semantically, though. Apparently the semantic grid system ought to provide a nice solution to this although it provides just the layout.

You can find the presentation slides below. There aren't too many of them but hopefully I managed to get to the core of it.


I hope this post gave you some idea how static websites are relevant even today. Sure, it might be a blast from the past but perhaps a bit surprisingly you don't need a fancy CMS to create a simple site to serve you well.

If you haven't used a CSS framework before I recommend picking up some of those and giving it a go. I have to admit I was a bit skeptical at first. After the initial period of puzzlement I've managed to see the value they provide. They're particularly useful if you don't happen to have a huge team of coders to help with these thing though I've no doubt they'll be handy in a team environment too.