Oceanscape | CSS Zen Garden

CSS Backgrounds are exciting for a number of reasons. They are great for adding some intense style to your pages which stands out for your readers and increases their engagement with the pages. This is good for search engines too if you believe they measure how long your visitors spend on your website. If you ever have your website promoted somewhere as a thumbnail then the use of a memorable CSS Background will increase the chance of a visitor clicking through to your site. A good example of this is the new Google Instant Previews which display a snapshot of your site next to the search results.

Dead Metropolis

Viget Inspire

Withering Beauty | CSS Zen Garden

Legendary Aircraft

The examples above use the CSS Background technique for the main background of the site, but you can use the technique for any element – a good example is in styling list elements for navigation.

I’ll be updating this page occasionally as I find other inspiring sites so do drop me a line or leave a comment if you know a good one

At the start page just type in a keyword or two. The application then takes you to a display of images from Flickr which use that tag. You can browse through these and click on any of the pictures for a closer look.

Even better, move your mouse to the edge of the browser and the pictures zoom out to reveal a circle of related tags. This is great for finding tags which relate to yours, and helps you to think about the big picture of how your subject links to others.

The only problem is how long do you spend looking! Give it a try – it’s fascinating.

One of the challenges in marketing your website (or blog, or Squidoo lens) is to make yourself different and to stand out from the crowd. One way to do this is to use stunning images, just like this amazing picture of TableTop Mountain in South Africa.

This post certainly sticks out!! It uses a technique called CSS Background, where the image is used as a background to the paragraphs of text. You can find out how to do this on my CSS Background Squidoo Lens.

There’s an additional technique here too. The paragraphs use a fine array of dots to darken them over the blue sky background. This produces a semi-transparent effect which helps the text to stand out. The text here is white, which looks pretty good. I’ll post the code for this here in a day or two.

Can you think of more ways to make yourself stand out from the crowd?

What does this mean for you as a website owner? It means that more of your visitors will be browsing your site on mobile devices such as BlackBerrys and iPhones. The recent release of the new iPhone will increase this number.

So what? Good question.

How does your website work on an iPhone, or a cellphone? Have you checked? The biggest difference is that these portable devices have a much smaller display than your average PC or laptop. This can mean that your nicely laid-out pages are squashed, stretched, and otherwise moved around [obviously this is less of a problem on the iPhone, but it's true for most other devices].

Mobile devices tend to be slower than PCs, so loading times are longer. If your site relies on large images or flash animations these can make the browsing experience pretty lousy.

Unless you code your pages properly, your CSS stylesheet can be ignored. This means your fonts can be messed up too, for example with oversized letters in headings.

So here’s a list of useful guidelines to follow to make sure your website works well for your mobile visitors:

1. Design for the smaller screen. Go for less columns, and ideally no horizontal scrolling
2. Use a separate CSS stylesheet and switch to a mobile version
3. Design your pages for input with a stylus/trackball, rather than a mouse
4. Reduce image sizes, or remove them altogether
5. Disable flash animations
6. Make fonts compatible with the smaller screen size (especially headings)

If you follow these guidelines you’ll provide a better browsing experience for your visitors. Hopefully they will spend more time on your site and come back in the future for more…