Back to Learning Center
Subscribe
Join 40,000+ sales and marketing pros who receive our weekly insights, tips, and best practices.
Thank you! You have been subscribed.
Learning Center
Learning Center
Close
The IMPACT Learning Center

Free resources to help you master inbound marketing and They Ask, You Answer

Access the Learning Center

Access the Learning Center

Access the Learning Center
learning_center_grey__What is They Ask, You Answer-v2-black

What is They Ask, You Answer

What is <span>They Ask, You Answer</span>
Articles, Podcasts, & Updates

Articles, Podcasts, & Updates

Articles, Podcasts, <span>& Updates</span>
Free Courses & Certifications

Free Courses & Certifications

Free Courses & <span>Certifications</span>
On-Demand Keynotes & Sessions

On-Demand Keynotes & Sessions

On-Demand <span>Keynotes & Sessions</span>
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close
Navigation_8_2021_taya

They Ask, You Answer Coaching & Training

They Ask, You Answer Coaching & Training
They Ask, You Answer Workshop

They Ask, You Answer Workshop

They Ask, You Answer Workshop
Navigation_8_2021_workshop

Inbound Marketing Services

Inbound Marketing Services
Navigation_8_2021_website design - monitor

Website Design & Development

Website Design & Development
Navigation_8_2021_hubspot implementation

HubSpot Training & Implementation

HubSpot Training & Implementation
Navigation_8_2021_virtual selling

Virtual Sales
Training

Virtual Sales <br>Training
Navigation_8_2021_swell - paid ads

Paid Search & Social Services

Paid Search & Social Services
Become a Certified Coach
Become a Certified Coach
Close
Website Design

6 Websites with Engaging Full-Width Image Headers

By Liz Moorehead

6 Websites with Engaging Full-Width Image Headers Blog Feature

Here at IMPACT, we build a lot of websites for our clients and work hard to stay on top of the latest web design trends and best practices.

One big web design trend that has emerged in the last year is a move from multi-image, framed sliders, to huge, responsive image headers featuring a single "hero" image. When done well, such headers can be captivating, and with the right images, beautiful.

Awhile back, we created an article about a few websites that rock parallax scrolling. In a similar fashion, I would like to share a few of my favorite sites that make use of responsive, full-width image headers

Starbucks

website-full-width-image-header-starbucks.png

The imagery that Starbucks uses for their homepage just makes me crave more coffee...even if I probably don't need any!

It is warm and inviting, and showcases the main focus of the website - their loyalty program and customer app. After taking in the beautiful homepage header, everything else on the site just feels like supplementary information about Starbucks and their services.

And if you are already logged into your account, the homepage shows you an additional info bar that displays how many points you need until your next reward. It is both straight to the point and informational.

HubSpot

website-full-width-image-header-hubspot.png

It should come as no surprise that marketing automation software company Hubspot does a great job at its own marketing. In conjunction with the launch of its new, upgraded software that enables clients to personalize the content on their websites, the company recently revamped its own site to be more interactive and engaging.

Now, the header really emphasizes how HubSpot's services can help potential clients, and it also displays a fact about Hubspot that helps establish social proof.

National Gallery of Art

website-full-width-image-header-national-gallery-of-art.png

The National Gallery of Art is one of my favorite places in the world, and I love that they use their homepage header - which covers the entire page - to show off some of the beautiful works of art that are housed in their galleries. Every time you refresh the page, you are given another wonderful work - or even an image of the gallery itself - to look at.

And for those who think its important to keep your homepage "above the fold," this is a great example of how the Smithsonian has gone against the grain and pulled it off.

Adobe Creative Cloud

website-full-width-image-header-adobe-creative-cloud.png

The nearly full-page header image on Adobe Creative Cloud's site brings all the emphasis to its latest news or, in this case, a hot new product - its Creative Cloud apps.

It is clean and eye-catching, and completely responsive.

sweetgreen

website-full-width-image-header-sweetgreen.png

The clean look of the sweetgreen site reflects on their healthy services and ideals. And, like the Starbucks site, it makes you hunger a bit for their menu items.

Not only do you get a full-page image that also functions as a slider, but the full-width style of the images are carried over into the look of the subpages as well. Talk about consistency.

And I can't talk about the sweetgreen website without mentioning the site for their annual sweetlife festival. It mimics the overall design of the sweetgreen page, but still has its own unique design that fits the feel of the festival.

tumblr

website-full-width-image-header-tumblr.png

I just love the simplicity of the tumblr login page.

It is clean with simple text and a main focal point - a form you can fill out to become a user. There is very little information on this homepage, and even fewer links to click on (or to distract the visitor).

The only information you are given about tumblr itself is a counter for the number of blogs and posts that have been created. And of course the "30 seconds to join" finalizes what is essentially a simplistic and concise Call-to-Action.

Their use of a completely responsive image that fills up the entire screen's width and height is a great way to not only showcase the art and other posts of current tumblr users, but to also introduce future users to the idea of what Tumblr is.

tumblr really doesn't have any other pages aside from its user's blogs. Sure, there are some necessary subpages, like their terms of service, but even their support form doesn't take you away from the homepage.

The focus remains clear - it's all about the users.

So What?

Responsive images are a good way to capture the interest of your site's visitors, to quickly explain your company's purpose, or to pull in leads through a simple Call-to-Action.  

You don't need to have sliders, though some sites have made good use of them, like sweetgreen and the National Gallery of Art.

Yet large and shiny responsive headers aren't the solution for everyone. As with most web design grends, it's important to assess what information you need to focus on before you determine how to best showcase it on your site. 

Knowing your audience is imperative for creating an engaging homepage. And because some of your site users may have large computer monitors, a good second step would be to make sure that any images you use for such a large header are of a high resolution and as clear as possible.

What are your favorite websites and why? Let me know in the comments!

Topics:

Website Design
Published on January 9, 2015

Recent Articles

9 Crucial Elements Every Homepage Should Have [+Video]

By Ramona Sukhraj on October 21, 2021
6 min read

5 Prep Secrets for a Smoother, More Successful Website Project (+ Infographic)

By John Becker on October 14, 2021
7 min read

Google shares new tools to audit website user experience

By Paul D. Grant on August 12, 2021
3 min read

New HubSpot CMS Hub starter tier released for growing businesses

By Paul D. Grant on August 6, 2021
4 min read

They Ask, You Answer and diversity, equity, and inclusion (Content Lab, Ep. 55)

By Liz Moorehead on July 29, 2021
2 min read

ICYMI: Digital marketing news update for July 26, 2021

By Liz Moorehead on July 26, 2021
6 min read

ICYMI: Digital marketing news update for July 19, 2021

By Liz Moorehead on July 19, 2021
6 min read

What the heck is going on with all the Google updates? (Content Lab, Ep. 54)

By Liz Moorehead on July 15, 2021
1 min read

8 best business website designs (updated for 2021)

By Sam Lauron on July 15, 2021
5 min read

ICYMI: Digital marketing news update for July 12, 2021

By Liz Moorehead on July 12, 2021
5 min read

Too many internal links in content can confuse Google about site structure

By Liz Moorehead on July 9, 2021
5 min read

Google July 2021 core update rolling out over next 2 weeks

By Liz Moorehead on July 2, 2021
4 min read

6 tips for building a great diversity and inclusion page (+examples)

By Ramona Sukhraj on June 29, 2021
7 min read

Google punts third-party cookie ban to 2023 for 'responsible planning'

By Liz Moorehead on June 25, 2021
6 min read

Finally, Google page experience core update is rolling out

By Liz Moorehead on June 18, 2021
3 min read

8 business blog design examples that keep readers engaged

By Steve Polito on June 16, 2021
6 min read

What is a featured snippet? [Definition + Examples]

By Kevin Church on June 10, 2021
4 min read

Google June 2021 core update live, July core update coming

By Liz Moorehead on June 4, 2021
3 min read

Google's June page experience core update will be mobile first, then desktop

By Liz Moorehead on May 21, 2021
3 min read

Why is growth-driven website design so freaking expensive?

By Daniel Escardo on April 14, 2021
5 min read

Strategy-driven website redesign: 5 IMPACT-built websites that solve client challenges

By John Becker on April 7, 2021
4 min read

10 Google Analytics metrics you absolutely must track (updated)

By Magdalena Day on March 29, 2021
5 min read

29 Best Contact Us Page Examples To Inspire Yours [Updated for 2021]

By Melissa Smith on March 25, 2021
17 min read

Website Performance Mastery: A better redesign process for your business website

By John Becker on March 24, 2021
6 min read

How much does a website design or redesign cost in 2021?

By Vin Gaeta on March 23, 2021
9 min read