Large Photo Background Websites for SEO, Copywriting, Design

New Fave Design Trend - Large Photo Background Websites

Oct. 12, 2010
By: Kayla Wren
0 comments

I love large image background web sites – the ones where web content and functions are positioned over a photograph. In spite of many well-known brands embracing this style, I’m having a hard time getting copywriters, online marketers, and developers to share my affection for the full photo background. Here’s what I’m up against…

The Copywriter Argument

Content is king. Your web content can persuade or dissuade users on your website. Website content plays the role of a silent salesman and can get you more business. Aesthetics and good design will generate the initial user interest, but the actual task of winning the user over rests only and only with good website copywriting.

www.rightcopywriter.com

Ok. That may true in many cases, but there are times when good copy should take a back seat to imagery, especially when you’re working on a site with great photography, like a fashion, portfolio, or a travel site. Photographs can set a mood and tell a story faster than any well written web copy. They also communicate things that would be a PR nightmare in print like, "We here on Well Street care about you small people on Main Street."

Here are a few examples:

Four Seasons

GOTO CHINA

Goldman Sachs

The SEO Argument

You’re nothing if a search engine can’t find you. To satisfy the search engines' never ending hunger for text based content, be sure to find creative ways to get (at minimum) 300 words of search friendly text content on each page. Search engines spiders have a hard time crawling text that isn't coded in straight HTML formatting (this is why Flash is a bad medium for most websites), so if your text is buried in images, there's no way for search engine spiders to properly read it.

Colin Alsheimer, Marketing Manager, LevelTen Interactive

Great point, Colin. This is why we always include you in our wireframe and comp reviews. I can’t argue this - search engine visibility is a site's lifeline. I can however provide some examples of full-screen photo sites that have done a good job of blending good imagery and search engine crawl-able copy. The trick here is to give up a little typography control and take your text out of your images. Use HTML and CSS to position copy where it looks good and where search engines can find it.

Surf In Paradise

Housing Works

Hotel Rottnest

The Developer Argument

One – they are annoying. Two – they take too long to load if they aren’t done right. Three – when they do decide to load, they do so in the most annoying way by popping onto the screen just as you’ve started reading the text. Which brings me back to my first point – they are annoying.

Randall Knutson, Drupal Developer, LevelTen Interactive

Yeah. He’s right. That is annoying. There’s not a lot you can do aside from compressing your image appropriately and hoping your intended audience has a fast internet connection. Some developers have suggested using JavaScript to prevent text from loading until after the image has loaded. Another option is to position copy on a solid or semi-transparent background that loads quickly so it’s less jarring and disruptive when the photo finally loads behind it.

Here are a few examples of people doing it right:

Geogeske

Alexarts

Hero Housing

Usability Arguments

Even as a big fan of big photo backgrounds, I'll be the first to admit there are some usability issues to consider if you’re using a photographic background for your website.

They can be distracting - After a strong initial impact, complex backgrounds can make it difficult for users to maintain focus on the actual content or call to action.
They can decrease readability - Compared to plain backgrounds or gradients, a photo can compete with website text making text difficult to read.
They go against conventions - As the Internet has evolved we've become used to certain conventions, layouts, and phrases. Going against these conventions can throw some users off and leave them feeling frustrated.

Here are a few sites that have clearly considered these issues in their designs:

Logic Source

Median Ring

IQ2 Festival

They are more eye-catching and immersive than the standard "color within the lines" websites. What do you think of the trend? Anyone else have suggestions (or rebuttals?)

Showcases of large image background sites

About the Author