Playing with opacity

Bright, large text in a semi-transparent image layer
Different shades and transparencies of black frame Gaby Hahn's artwork

Working effectively with images is a balancing act, if you want to empower your editor to add and change images but still keep a visual impact with your website.  We have been playing with images and colour effects to enhance some of our newer websites.

Many modern themes feature very large images, often overlaid with text, or letting the text of a page float up over a large and striking image.  The visual effect of this is undeniable.  However, at AlbanyWeb we want to balance this visual effect with giving our clients flexibility, keeping our websites fast to load, and keeping them accessible.

Laying text over an image so that it is readable is a little tricky, and graphic artists employ shadows and focused de-saturation to make the text stand out.  The easiest way to do this is to cheat a little, by making the text part of the image.  For a website, this is a poor option for so many reasons, mainly because a search engine (or text-based browser for the visually impaired) can't tell there are words on the image. 

This cheat may save time in the short run, but once you reach a point where you might want to change either the text or the image, you need to go back and re-do the whole thing. 

(How can you tell if the text is part of an image?  Run your pointer over the words - if you can select the words without selecting the entire image, then the text is independent from the image.  Alternately, turn off image display on your browser and see what is left.)

Take our remodelling of a former Weebly site, for the artist Gaby Hahn.  Her original website featured a coloured menu, a large static image on the home page, with slideshow galleries on interior pages.  All this stood out against a black background.  Overall, the design had aged quite well, but it was time to refresh it.

Using different levels of opacity, we stayed true to the original colourwork but brought a more modern feel.  It was important to give this a greater visual impact without being too busy.  We achieved this by using one of Gaby's paintings as a background image, and creating a semi-transparent layer for floating our text.

In contrast, we framed the paintings themselves with black, but using different shades of black to create more movement on the page. 

All this gives visual impact without taking anything away from the page accessibility.  And, the design itself adapts for new images and content, and the site can be updated without worrying about breaking the layout.