Transparent Backgrounds
Transparent Backgrounds
Transparent backgrounds are no common feature in Blogs or Websites and there is a reason for it: they can become too dominant and therefore distract the attention from what we wish to focus our readers on: our Content.
And of course not everybody has the brilliant Semiomantics XO Scripts as well as the Training Crash Courses by Yorgo Nestoridis to play chess on CSS stylesheets :)
Transparent Backgrounds
1. The Visual Aspect
The first rule for creating a transparent background is therefore to design something attractive yet discrete, meaning it integrates harmoniously with our theme, colour scheme, fonts and the overall purpose of the Blog.
In my ‘Design Sandbox Blog” experiment here I basically recall the theme I already used in my Header Graphic.
This black and white header graphic was based on a detail of an artistic interpretation of a photo I took on Noordhoek Beach – you can recall it HERE. I agree, it’s hard to imagine how I got from one to the other, right? It’s still all I did and how I work in general: creating my own pictures and working with them in an intuitive and imaginative way.
Although I always try to keep it simple and sober for maximum focus on what counts most: the Author’s message, content or whatever he wants to bring across, I find the transparent background very pleasant if compared with the sort of solid version I added above for you to see and compare – what do you think?
2. Speed and Usability
The other aspect we need to bear in mind is that our page opens fast… especially as everything on the Internet is about Speed and Usability. We may have the most beautiful photo or picture that even suits perfectly as a background for our Blog… however, it’s heavy and takes ages to open.
This is why our Ycademy Training yesterday was so important as it taught all participants how to decrease the weight of background pictures to a maximum.
Transparent Backgrounds or not. . . the same rules apply.
With my example here I made a whole series of tests in Photoshop to find what suits me best. Especially, I decreased the opacity in 20% increments until I reached 20%. The current value is 34.36K and 13 seconds – not bad!
The header graphic is heavier… however, here the enphasis is on high quality as this is what jumps in the eyes first. So it’s always a weighing and compromising a little here or there, however, the better we are in control of our tools the easier it becomes and the better the results – both for the Visitor and for Google.
Happy Experimenting. . . with Semiomantics XO Scripts, what else !
. . .
Co-Founder of YORGOO, YCADEMY and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.
Author: Bianca Gubalke, Art, Media, Publishing.
