While I’m reasonably skilled at working with HTML and CSS code, I’m a hopeless graphic designer. I have tried to make nice looking websites in the past, but they always end up looking ugly. My attempts at minimalism come out boring, and my attempts at exciting look busy and confusing. And besides, I’d rather work on code than design anyway.
So I make use of the many available web templates from sites like ThemeForest. These always look amazing in their demos on the site, and I can usually find something that suits whatever project I’m working on. But it’s not quite so simple when I come to work with these templates for my site.
As a coder, I’m kind of a purist. I generally prefer a simple text-editor to an IDE. I feel uneasy with languages and frameworks that fill my project with loads of boilerplate code and arbitrary files before I’ve written any code. (Although I am a .NET programmer, which is one of the worst offenders when you use Visual Studio.) Basically I don’t like having any code in my projects that I don’t understand.
Most web templates come with a humongous CSS file, full of lots of styling rules for elements I’ll probably never need. They inevitably have lots of JavaScript code for all the snazzy effects and are filled with lots of placeholder content to make the design look filled out.
Usually the first thing I do when I start applying a template to a project is to strip out a load of stuff. I normally leave the CSS as it is. It’s just too hard to figure out which bits are actually needed, and it doesn’t do much harm to leave extraneous rules in there. But I will strip the HTML down to its bare minimum for what I need. Quite often, all the pages in a template will have headers and footers and toolbars and menus and sidebars. It’s easy for the designer, who can just stuff some lorem ipsum in there to fill out the design and make it look good. The sites I’ve made (at least so far) generally have less content to display and I usually struggle to put anything in all these content areas. So I normally end up removing quite a few of these elements from the HTML.
What often happens then is that the design tends to look less good without those page elements, because the page was designed as a coherent whole. I then have to delve into the CSS to make other elements larger or move them around a bit to make it look OK. Hopefully this process doesn’t inject too much ugliness into the design, although I never really know before I start whether I will end up with something decent looking.
There will also be several image files for backgrounds and buttons etc which are part of the design. Normally the designer will supply alternative backgrounds and images for different colour schemes, so once I’ve settled on a colour scheme I’ll remove the unneeded image files. I normally take out the JavaScript code for the snazzy effects too, as long as the site looks OK without the effects.
Many templates use external fonts. This means that a visitor to the site may have to download a font in order to view the site properly, if that font isn’t already on their computer. This process should happen automatically, but the purist in me would prefer my site to be self-contained and not reliant on external resources. I can see why designers do this: web-safe fonts are pretty boring, and the right font can definitely improve a design. I may try replacing the external fonts with some web-safe ones, as long as it doesn’t damage the design too much. But I’ve softened a bit on this recently, and I’m inclined to leave whatever fonts the designer chose.
Normally I am aiming for a single HTML page, which I can then use as the basis for all the pages in my site. This will usually have content added dynamically with ASP.NET or PHP once it’s part of the site. So hopefully as a result of this process I will end up with a nice looking page of clean HTML, with space for me to add content, and a not-so-clean CSS file which I can learn to live with.