It’s amazing, what you can do with CSS… I work with a bunch of tech guys and none of them know that.
Let me start at the beginning: I started working on websites about a trillion years ago, but only about two years ago I started REALLY getting into it. Joomla! is my tool of choice (which is why this blog is WordPress based… Don’t spit where you eat) and one of my goals as a web designer is to eliminate AS MANY Bitmap elements (pictures, etc.) as possible. I know some of you are going “DUH”, but hear me out:
The obvious reason for eliminating Bitmaps from a website is that they take up loading space.”DUH” again, right? Well, sorta…
Some people seem to have missed that computer sciences lesson (OK, joking) where proper use of Cascading Style Sheets was described. The more you dig into CSS, the more you find out what’s possible with it. It’s not just fonts and colors, it’s shadows, gradients, rounded corners and transparencies. The more you are able to combine, explore and apply these features into your current layout, the more you start to realize that CSS is an amazing way to replace pictures for one simple reason: expandability:
I remember, when I started developing sites with a couple of friends, even for my own film production company, there was a general idea about BUTTONS. Yes, not items, not menu items, but BUTTONS. Without delving deeper into the “if you don’t know what the heck it is you’re talking about, leave it to someone who does”, the fact that they called it buttons meant a very BAD thing, because they really thought that every single element of the site should be a bitmap image. Like, “we’ll develop a template in Photoshop” and that sorta thing.
When you start working with CMS you realize why this poses such a problem to what a website really should be about: expandability. Let me elaborate and, please bear with me as some of the following ideas might be thought of as common-place, but their cumulate means something important to the context above.
Bloggers and spammers (who do NOT belong in the same spectrum of online hell) aside, the internet is mainly used as one thing: a light-weight, accessible, INSANELY CHEAP marketing tool. As a person you rarely think about having a website outside of Facebook, but as a company or a service provider, you’re practically dead without an online presence. Now, why is the internet such a wonderful marketing tool? Because it is accessible. You’re sitting in front of your computer the whole day and it doesn’t matter if you’re in Munich or Mars, you’re able to access my website (http://www.beon-web.com by the way) quickly and effortlessly. So, in a world where marketing is measured by “number of people who’ve seen it”, the main objective of a website is to get as many visitors as possible during a set period.
Online tracking tools such as Google Analytics measure how many new visitors as well as returning visitors your site has and, while some people may think that return visitors is a bad thing compared to new ones, give it some thought to which one of them has a better chance of giving you work more frequently AND, BINGO! How do you keep your return visitors interested, and here’s the hammer, where two out of three of yous is gonna go: “drop this, this guy’s an idiot”… Wait for it… A little longer: NEW CONTENT!!! Yes, new content is the single most important thing for a website. Press-releases, new pictures for a portfolio, new videos from your production company, WHAT EVER! If someone comes to your website next week and it looks the same, potential customer GONE!
What does this have to do with pictures vs. CSS?
- For pictures you need an extra software and maybe even an extra guy. Customer calls, we need a new menu item (or BUTTON… oh, I tell ya), who you’re gonna call? Ghostbusters? No, Joomla with a nicely templated CSS menu item that needs two clicks to look exactly the same as its neighbor.
- Popular jargon tells that pictures are heavier and take longer to load than code. THEY’RE RIGHT!
- Pictures might be displaced with the background and might not fit into a new element of your design. Coded styles are vector based and fit into any style element if programmed correctly.
- It’s just awesome to write a bunch of code and see it become an awesome graphical element.
If you have any doubt, visit http://www.rockettheme.com . They are suppliers of tools for Joomla and WordPress, which is where I get most of my Extensions, as well as basing all my design on their awesome, FREE, Gantry Framework.
Let it rip in the comments below!