My blog

Building an Umbraco site using a static HTML theme

Building an Umbraco site using a static HTML theme

Why use a static HTML theme?

As a web developer building your own website can be a bit a right pain. There is a perception that it needs to be of a high quality. Additionally every hour I spend working on the site, is an hour that I'm not being paid to work on someone else's. For this reason I decided to use a static HTML theme to avoid the need of hiring a web designer and to turn the site around quickly. My criteria was:

  • A simple, flat design
  • Built in bootstrap so I could extend the pages without more design
  • Has a blog and a number of other styles/ layouts fitting with the website of this sort

I choose Angle by Oxygenna.

Large external files

The biggest surprise I had was, only once going live, I realised that even before images there was 500KB of JavaScript files and nearly 1MB of CSS files being loaded (minified but not gzipped). On closer inspection it was fairly clear why. The theme developers didn't know which plugins, styles, features etc that you'd need on each page so they are all loaded on every page. I was able to exclude some large sections outright, because they wouldn't be needed anywhere on the site. In addition there were some files (like a suite of animations) where I knew which bits I needed and could remove 95% of the rest, but this is a painful process as styles are often not well structured in to separated categories. I also saved a fair bit by replacing the Bootstrap build with the LESS version which made removing unused features easier. None of this was much fun, because you don't really know what is or isn't used and trying to work out how you broke the page is dull.

Finally where there were common libraries, such a JQuery, I referenced common CDN locations as there is a good chance that the user might have already cached this file. The total result was a reduction to 250KB (28%) of CSS and 145KB (29%) of CSS.

You still need new images and content

I'm still in the process of sourcing and replacing the images that came with the theme. This is a considerable task, and does rely on my trying my hand at web design to achieve it. On top of the general page images, there is also the question of a logo and icons.

Of course the content needs to be completely written, and sometimes you'll find that none of the existing layouts quite fit your content. Then you're left compromising on design or content.

Oh yes, and don't forget the SEO, UX, UI, and hosting.

There is no support

Oxygenna have done a great job providing examples of the different templates available, however there is still quite a bit of reverse engineering required. If you want to do anything slightly different from then there is no-one you can call to tell you which styles do what.

Building a site in to a CMS requires a formulaic and systematic approach. If the front-end doesn't match this then it is usually possible to ask your front end developer to make some minor amendments to make the CMS a lot simpler. No such luck with a theme.

In summary

I wouldn't advise anyone against developing with a static theme. Certainly it has saved time, and for certain projects they could be ideal. However, don't be fooled in to thinking that you'll be able to 'knock out' a site quickly. There is still a lot of heavy lifting to do, and if you can't do a bit of front-end development then you're in real trouble. Mostly, I wish I used a theme that came with the CSS as LESS or Sass.

Share this post
comments powered by Disqus