Skip to main content
Services
TAYA

They Ask, You Answer Mastery

A coaching & training program that drives unmatched sales & marketing results.

Sales

Sales Performance Mastery

Improve the competencies and close rates of your sales organization.

Web design

Website Mastery

Web design, development & training for your team.

HubSpot

HubSpot Mastery

Everything you need to get the most from HubSpot.

AI Mastery

AI Enablement Mastery

Unlock the power of AI in all aspects of your revenue operations.

Discover how IMPACT’s services can help take your business to the next level. Book a free 30-minute coaching session Book a free 30-minute coaching session
Learning Center
Learning Center

Learning Center

Free resources to help you improve the way you market, sell and grow your business.

[NEW] The Endless Customers Podcast is now available everywhere. Learn how to earn trust & win more customers in the age of AI. Listen Now Listen Now

Free: Assessment Does your website build trust with buyers and bring in revenue?

Close

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.
Liz Murphy

By Liz Murphy

Jan 9, 2015

Topics:

Web Design
Subscribe
Join 40,000+ sales and marketing pros who receive our weekly newsletter.

Get the most relevant, actionable digital sales and marketing insights you need to make smarter decisions faster... all in under five minutes.

Thanks, stay tuned for our upcoming edition.
Web Design

6 Websites with Engaging Full-Width Image Headers

Liz Murphy

By Liz Murphy

Jan 9, 2015

6 Websites with Engaging Full-Width Image Headers

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!

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.

Related Articles

20 Value Proposition Examples that Every Marketer Can Learn From in 2024

January 18, 2024
John Becker John Becker

HubSpot vs WordPress: Which is Better for Your Business Website?

January 11, 2024
Vin Gaeta Vin Gaeta

5 Examples of Companies with Great Multi-Brand Websites

January 7, 2024
John Becker John Becker

Website Conversions in 2024 — STOP, START, KEEP

December 25, 2023
Vin Gaeta Vin Gaeta

10 Pricing Page Examples for Business Websites (Updated for 2024)

November 30, 2023
Connor DeLaney Connor DeLaney

The Hidden Costs of a Cheap Website

November 29, 2023
Vin Gaeta Vin Gaeta

The Website Experience Your Customers Are Yearning For

November 27, 2023
Mary Brown Mary Brown

10 Examples of Company Profile Pages to Inspire Yours

November 22, 2023
John Becker John Becker

Is It Time for an AI-powered Chatbot on Your Website?

November 21, 2023
Will Smith Will Smith

Think of Your Business as ‘E-Commerce’ — No Matter What You Sell

November 15, 2023
John Becker John Becker

8 of the Best Business Website Designs to Inspire You in 2024

November 1, 2023
John Becker John Becker

Your Website in 2024: The Future of Trends, Tech, and Traffic

November 1, 2023
Vin Gaeta Vin Gaeta

Create Better Website Videos by Avoiding These 3 Mistakes

October 25, 2023
Lindsey Schmidt Lindsey Schmidt

4 Ways To Recession-proof Your Website In 2024

October 22, 2023
Marcus Sheridan Marcus Sheridan

Business Leaders: Do You ‘Own’ Your Own Website?

October 16, 2023
Mary Brown Mary Brown

8 Best Content Management Systems for Digital Marketing in 2024

October 1, 2023
Ramona Sukhraj Ramona Sukhraj

Can I Use AI Tools To Build My New Website?

September 18, 2023
Vin Gaeta Vin Gaeta

What Is a 'Learning Center' and Why Does My Website Need One?

September 14, 2023
John Becker John Becker

What Does a Great Inbound Marketing Website Look Like in 2024?

August 8, 2023
Ramona Sukhraj Ramona Sukhraj

How Much Does a Website Redesign Cost in 2024?

July 20, 2023
Vin Gaeta Vin Gaeta

Do You Need a New Website? Maybe Not

July 19, 2023
Vin Gaeta Vin Gaeta

14 Award-Winning Website Designs (& What They Did Right)

July 17, 2023
Christine Austin Christine Austin

What a New Self-Selection Tool for Your Website Will Cost

July 13, 2023
John Becker John Becker

9 Self-Service Tools to Inspire Your Business Website

July 10, 2023
John Becker John Becker

Your Website Strategy Must Include These 6 Things

March 20, 2023
Mary Brown Mary Brown