Blogs on "CSS"

Archive: 1
23rd
Dec 08

It begins... again

Tags: web designwebsite updatesCSS ● ●

A little bit of history

I created this website at the beginning of the summer this year (2008), and I think it's come a long way. My first design was made using minimal graphics and a slightly disastrous logo (sorry, I don't have a copy to show you), and the interesting and mildly nauseating colour combination of orange and dark blue. Unfortunately that was never published. The first official release of the site was a slightly chunky but not too unattractive effort with a dark background and a central box thingy, but that was confined to the archives after a few weeks. I realised that it's easier to make light themes look pretty, and they tend to look more modern anyway. Over the next couple of weeks I gave it another overhaul, and ended up with a blue theme, shown below, which I stuck with for quite a while. Then I discovered how to incorporate a style changer to swap between designs, and over the next couple of months designed the five other styles that are shown below.

The old designs

Original blue theme for joncairns.com Worn theme for joncairns.com A clean design for joncairns.com Monochrome design for joncairns.com Grunge design for joncairns.com Christmas design for joncairns.com

"My reason for starting over is perhaps slightly obsessive, and definitely totally geeky."

Death to the old site

I've now ditched the old site almost in its entirety, the only parts saved from the axe being sections of content. I have several reasons for doing this. Firstly, I began to find that the sheer number of stylesheets (i.e. designs) made the site totally unmanageable: if I ever added something new to the site I had to make it look good in 6 different designs. Bad idea in hindsight! Oh well, you learn. My next reason for starting over is perhaps slightly obsessive, and definitely totally geeky. I didn't like the code I'd written for the site. I kept changing bits of it over time, but every time I did I had to change it on every single page throughout the site. The code I'd made didn't really allow for much flexibility, so I got fed up. I also had some ideas for a new design that I couldn't put into place with the previous site, so out it went.

Long live the new site

The new site has 2 designs, and that will be the most it ever has (remember I said that). It basically follows a night and day theme, and there's a javascript style changer that gives you the right one according to the time of day wherever you live. I've spent much more time on content layout, and trying to make it as usable and attractive as possible. The two designs therefore have pretty much the same layout, just different graphics, so it isn't too disorienting (or disorientating - check out the arguments that you get in forums between the two!) when changing between the two designs. I've tried to create some helpful little boxes on the right, but if you don't find them helpful you can minimise them. Basically I've spent much more time working on small details, which I've realised can make or break a design. For a bit of fun I've made use of the "script.aculo.us" javascript library, and you can move stuff around at the top of the page. I should also mention the fact that this is my first blog, as I disguised what was essentially a mini-blog as "news" in my previous site. Now I make the clear distinction, where news means short snippets of website updates, whereas my blog is filled with whatever pointless stuff is on my mind at the time. By the way, my RSS feed contains only the news items, but if a new blog is added then the RSS feed will be updated to show it.

"It's a plague of web designers that we can no longer just pass through a website. We have to evaluate it."

Enough about the site

Well, almost. After spending hours on choosing the font, headers, styles and colours for my new site, I started thinking. Do most people realise how difficult it is to make something look attractive, particularly the content of websites? That's more of a rhetorical question, as the answer is in fact "no, they don't". But that's not necessarily a bad thing, as you want that kind of stuff to be as unnoticeable as possible. A website isn't good if you can't see the content through whatever else is going on. And it's a plague of web designers that we can no longer just pass through a website. We have to evaluate it, at least sub-consciously, and point out the flaws and successes. If you're that sad (like me) you'll open up the source code to take a little peek at whether it's XHTML strict or HTML loose, whether it's human or robot generated, or whether they've used tables to align the content *tuts and shakes finger in a condemning fashion*.

"The days of suffering lime green text sprawled across a slightly-off-lime green background lightly infused with vomit coloured blobs seem to have been left behind in the '90s."

A tiny little miniature rant about some web designers

I'm a web purist, as you may have gathered. We're seeing higher standards on the web with each new day, much to my agreement. The days of suffering lime green text sprawled across a slightly-off-lime-green background lightly infused with vomit coloured blobs seem to have been left behind in the '90s. I think we're all grateful for that. Now, being a web designer is an altogether more expansive job, and you have to consider things such as cross-browser support, accessibility for the visually impaired (they use screen readers, if you were wondering) and how your site looks if it's stripped down to the bare HTML. You also need to have an intimate knowledge of the latest standards of coding, minimally HTML and CSS. I would go as far as saying that if you don't have a knowledge of all these things then you shouldn't be charging for web design. Anyway... some of you may have noticed the little cross at the bottom of the page, next to "CSS". My CSS doesn't validate. And it never will, in the interest of cross-browser support (read on). Internet Explorer 6 and under doesn't support transparent PNGs, which is the bane of many designers. Some favour the method of using the Microsoft "filter" CSS hack, but I for one favour the child of TwinHelix Designs, IE PNG Fix. It supports both transparent images and backgrounds, including repeating backgrounds. The sacrifice you have to make is in the official validation of CSS, as it includes the following CSS property:

img, div { behavior: url(iepngfix.htc); }

which doesn't exist in the standard CSS 2.1 specification. My design philosophy is that websites should be a treat for the eyes, but not at the compromise of accessibility. But I don't care so much as to whether I get a little tick next to my CSS! These standards were introduced to encourage designers to follow the rules, but if the rules are followed apart from one exception then you shouldn't move the earth to get a green tick. My CSS is valid, it just doesn't validate. So there.

Archive: 1

Comments

There are no comments on this blog entry. Why not be the first?

Post a comment

Name:
Sex (for display picture): Male
Female
Email (won't be displayed):
Message:
Prove to me that you aren't a robot:

Comments may take a while to filter through, as I check them all before letting them go live.

Hi, I'm Jon Cairns

I'm a web designer and graphic designer who likes to create good-looking, accessible websites with XHTML, CSS, AJAX and PHP. I'm also a musician, photographer and student, and I live in Durham, up north in the UK. Use the links at the top of the page or just above to navigate my site, or read my blog to find out what's going on in my life.

Updates

  • 22nd Aug Added a new blog, "The Great Synchronisation". It seems that all of my updates are blogs these days!
  • 21st July Added a new blog entry, the first in two and a half months! Join me in the celebration of this momentous occasion by reading it.

From the blog

28th Aug 09

The Great Synchronisation

A few minutes ago I was sitting on a sofa with nothing to do, thinking, "maybe it's time for my annual blog entry". You may be wondering whether you should bother reading something that's been created simply because I had nothing better to do, but I submit to you that all good things are created that way. Think about it.

Read it all »

Blog Hub blogarama.com

Web Design Blogs - BlogCatalog Blog Directory