Posted on January 19, 2011 5 comments
Learn how to setup a live development environment using CodeKit & LESS.
Discover how to add a Media Queries toggle button to your site using jQuery.
Having Magento problems? This solution may help get you up and running again!
Learn how to make Polaroid-style images complete with 3D shadows using only CSS.
Discover how to make your own 3D box using gradients and shadows with the power of CSS.
Rich, unique designs are being published every month for keen club members to download and deploy for their own web projects, making it easy to get an amazing looking website up-and-running in relatively little time.
However, what I'm not a fan of is the way many templates are built these days.
A good poke around under the hood is enough to make anyone who works with HTML/PHP/CSS frown at what's going on – yes, the code is normally nicely structured, but what is rendered in the browser needs to be carefully considered before using a commercial theme.
The trend these days is to use a proprietary theme framework – these are produced by the clubs and normally the core is shared under a GPL license. All of the club template releases are built on this framework, which offers a bewildering amount of flexibility in layout and features. Often they come complete with an entire management system which is used to configure how everything works. This management can even stretch beyond the template and start managing core features of the CMS itself.
However, the learning curve tends to be steep, with the frameworks being massively complex in their implementation, and core changes to the code are far more difficult than they would be for a more traditionally constructed theme.
Many aspects of the layout can be adjusted within the theme's setup options, so in a lot of cases, code intervention isn't really needed – but what if you need to break free of the framework for something? You have to commit to learning how everything works within the framework, and often even small adjustments are hugely complex given the more rigid nature of the frameworks (which are normally based on a CSS grid system).
Ah, HTTP requests. A real hog of performance, and something you want to really keep to a minimum. By using clever techniques such as CSS sprites, JS and CSS combining, you can massively reduce the number of requests thus speeding things up – a win for your users, a win for your host, and a win for the performance of the site.
Take a nice, lean CMS like WordPress for example. I recently was asked to investigate why the breadcrumb trail wasn't working (turns out the theme's breadcrumbs file was pretty much useless) and was horrified at the source output that I saw. Take a look at these stats:
section (a 'normal' site would be around 20-100 lines) including:
Which all add up to the following:
Of course, I understand that sites will vary in content, plus there were a couple of extra plug-ins installed in this case – but a quick look at the relevant demo sites paints a pretty similar picture. When you consider that template clubs usually run on some pretty beefy server hardware, they can give a false impression of how the template might perform. Once deployed to a more common shared hosting platform, performance will undoubtedly suffer.
Template clubs and their projects are obviously a great way for novice developers and webmasters to get started, but many will be oblivious to what goes on under the surface of a theme, blinded by the fancy design and effects.
It's a shame in some ways, as the popularity of these clubs means that a high percentage of CMS websites will be using them, which could portray the whole platform in a negative light if the performance of a platform is judged on these sites.
My advice: take a look at what's going on under the hood when using a club template, you might be surprised at what you see. All those features aren't really free, and are costing you dearly in terms of performance. Also, to get some real stats on your site, run it through a performance checker like http://websiteoptimization.com/services/analyze/ to see how your own projects perform.
Of course, not all theme providers can be tarred with the same brush – know of a club producing more streamlined templates without all the fluff? Let us know in the comments!
While these frameworks should be a great way to empower their users, they indeed add to the complexity of templates like you noted. I even find myself (as a pretty experienced web user) struggling to get a template running at some times.
Even though I fully understand the need for a framework from the developer’s point of view, I don’t think the Joomla! interface should be modified beyond any recognition (like most frameworks do).
Joomla can be daunting enough as it is, Keep It Simple people!
The problem is the more configurable the Themes are the wider potential uses (clients) and thus higher sales they’ll achieve.
So whilst simple and lean would be nice thats probably going to get fewer sales and so I can see why they offer 227 different colour and layout combinations!
We’ve used a few WP Templates in the past to get clients with limited budgets up and running quickly.
But the fact they never look a perfect fit for the business and the slowness of them are major issues for me..
What we tend to do is budget in some time to take out as many options and hard code things as much as possible. Most clients don’t want to change the look and feel of the site once it’s all setup anyway.
But like your say its hard for clients to judge sometimes – the last Template we used for a client was fine on the demo and our servers but once moved to the clients cheaper hosting it was 25-30secs per page load and just so painfully slow it was almost unusable.
A nice little web app for testing site speed:
Interesting comparisons against average site load times, and of course an alternative to the tool I originally posted.
Similar thoughts from Robert Vining:
Having looked ‘under the hood’ of so many of those templates I was more than horrified at the mess of code I found, and being on the end of only a 2 meg connection where I am, I am also acutely aware of poor load speeds.
Because these frameworks have now made it ‘easy’ to create some good looking, if poorly coded websites, there are an awful lot of so called web design companies out there (*cough*) who are using templates, or WP themes etc without optimising them or removing the unneeded code, because the truth is they don’t know how to.
Templates were supposed to make life easier, but the mark up is far from ideal, and if it creates more work in the end due to spaghetti code , was it worth using it in the first place?
Mail (will not be published) *
Your comment *
I consent to Toolbox Digital collecting and storing my data from this form, as detailed in the Privacy Notice.
Previous: CSS3 Experiments #1: 3D Gradient Box
Next up: Advanced WordPress sub-navigation using wp_list_pages
.htaccess Made Easy
by JEFF STARR
Buy Now »
Hardboiled Web Design
by ANDY CLARKE