New Fave Design Trend - Large Photo Background Websites
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.
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:
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
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
Here are a few examples of people doing it right:
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:
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
- inspiredology.com – 25 Large Photo Background Websites
- acrisdesign.com – Showcase of Websites with Large Photo Background
- speckyboy.com – 50 Large Photography Backgrounds within Web Design
- tripwiremagazine.com – 20+ Web Full Size Photo Background Sites
- webdesignerwall.com – 80 Large Background Websites
- artfans.info – 32 Example Websites with Large Background Image
- vandelaydesign.com – Showcase of Big Backgrounds in Web Design
- designtutorials4u.com – 40 Awesome Websites with Big Backgrounds
- bestpsdtohtml.com – 30+ Websites with Beautiful Large Backgrounds