Above-the-Fold Web Design for Magazines

The history of print magazines and newspapers created a critical sensitivity to the area “above the fold web design”. It was widely held (and still is) that the area up top was key to engaging initial interest.  This is obviously still central to newspaper layout. The front page story headline and image can mean the difference between picking up the paper or not.

Websites adopted the concern with above the fold, but added in many other previously non-existent considerations, like site navigation, widgets, and key calls to action (CTAs) for the web page.

As the web has evolved, many theories have played out, as well as many UX rules of thumb. That said, above the fold UX and layout design has become increasingly key for magazine websites. Since the “fold” is just the visible area of  a screen, it has become central to web UX theory in many ways. And at the same time, not everything needs to be above the fold to be effective.

As web marketer Neil Patel points out, designing above the fold means something a bit different today for most aspects of web consumption than it did one or two decades ago. The 90s introduced many of these myths due to the lack of marketing data available at that time.

• The “more is more” myth

90s websites were scrunched. Fonts were tiny. Many web designers were trying to allow as much key info up top as possible to combat this unappealing trend. As an above the fold web design progressed, the minimalist values of other areas of design came to factor heavier in site planning, since composition and whitespace create focus, whiler clutter creates blindness to detail.

• The ultra-minimalist myth

Toward the later 90’s, some interesting advances in things like digitized art began to impact the world of web design and minimalist design became more appreciated. The virtues of white space and clarity resurfaced for websites. This was necessary, but it didn’t yet factor in the need for much of the stuff that was cut out. And all too often, focus was often not on a key business call to action, per se.

• The “thorough website visitor” myth

In the 2000s, marketers began to track site and page performance and they discovered something. Visitors were skimming.

In fact, visitors were skimming everything. And they didn’t tend to look anywhere that visual cues were not standing out to beckon them. Colors, bold images, and even font sizes came under scrutiny. All this was for good reason. As web consumption increased, attention span decreased, and the values of advertising came to the forefront as a model for good web page layout design.

This was happening in the age of the dot com bubble, where many sites with overinflated (read: unexamined) market value propositions were falling by the wayside as bigger companies bought up the ostensibly successful websites as the market sifted through the rubble. Among this rubble was the fastidious website reader. In truth, the bounce rate for most search result links were and remain quite high.

• The “all up top” myth

Some have been tempted to take above the fold to an extreme, with the idea that people never scroll. They scroll, but not unless you engage them up top. Naturally, a website needs to be scrollable, and there are differing philosophies on how to manage the scroll. The manual scroll is the most common, but many have opted for the modulated scroll, where the screen scrolls in entire, pre-focused portions.

The latter option is not a bad idea, but requires a lot of specialized focus on designing for the specific screen dimensions ratio of the device. While desktops and laptops are easier to modulate scrolling on, mobile phone dimensions have become divergent in the extreme and present more challenges. Responsive design needs to be uber-adaptable to meet the smartphone challenge of the 2020’s where smart phone screens unfold to wider dimensions and iPhone dimensions also get increasingly unwieldy.

What’s the best approach to above the fold design?

Above the fold design requires taking into account all of the best practices learned from periodicals and landing pages over the past decades and then exploiting them in a synergistic way. The obstacle to that goal is a problem that is currently still stumping many sites that are being stymied in many cases on visitor/reader engagement as a result.

Every magazine faces certain hard choices on what to compromise in layout design. Designers may design the website without thinking of revenue. In that situation, management must fit in the ads that are to help alleviate the revenue and growth expectations. This can result in compromised layout design and user experience.

In the 2010s, we’ve seen the persistence of advertising exacerbating the key issue of the cluttered pre-CSS 90s, albeit with a more streamlined design aesthetic and more due emphasis on whitespace. But the sad and stark truth is that banner advertising continues to push its way to the top of magazine websites in the 2020s inthe form of Leaderboard ads, despite most banner ads being notoriously ineffective. And according to Forbes, this is proven to be especially among certain professional groups.

These banner ads, in turn, push down the above-the-fold layout design after the fact. The result is design defeat in the area of content design engagement for the sake of sponsoring adsense clicks.

The problem with ads the dominate the user’s reading experience of a magazine is that the enjoyment gets diluted, interrupted, and in many cases, killed. The visitor can become overwhelmed by the advertising creeping into the experience and instead of achieving the experience they sought out, instead be left empty with lowered expectations.

Highly successful commercial magazines are among the worst offenders. But does that make it an intelligent strategy? Not really.

Imagine for a minute a print glossy magazine like Rolling Stone. The experience was the focus then, as now. The front cover didn’t feature an ad for Levi’s. It featured pop stars and singer-songwriters the readership cared about or soon would. The magazine was, in short, a focused experience. The ads were tucked in between the main body of the feature and the last page. Or between features. Nobody would have picked up the magazine if the cover were a full page ad for bluejeans.

Our advice is stark and brutal, but realistic: nobody wants to be bombarded with leaderboard banner ads upon landing on the magazine home page or feature. Nobody.

The plain truth is that bounce rate is a ranking factor. SEO best practices tend to closely follow UX best practices. That said, whether or not Google penalizes websites for slow-loading ads is not as big a reason not to do it as the bounce itself! If you don’t like surfing your own site, don’t expect others to.

If advertising is part of your revenue model, you’re going to need to get strategic if you hope to raise the expectations and anticipation of your readership.

How do you overcome the need for revenue? The answer is simple: you don’t. Instead, you learn do ads differently with your own niche in mind.

Many magazines are not only distracting visitors with ads, they’re often showing the wrong format for their niche readers. There is an answer to this conundrum. The same strategy that allows magazines and other websites to capture an email and start the visitor’s Buyer’s Journey can be used for advertising.

Don’t make ad revenue the excuse for not engaging the reader. Your above the fold content should be about your magazine issue, not about random banner ads. If you interrupt your reader at the outset, your magazine loses in the engagement and branding departments by default. The simplest way to overcome banner ads is by employing the sidebar. It eliminates the need to pile content on top of your masthead and thereby push your top of mind content down below the fold where it was never intended.

Form is function. They’re the same thing. While header-space ad clicks may get crazy clicks, most experienced advertising people understand that such clicks are hugely wasteful and typically dominated by click-fraud. It’s like the guy standing on the corner of two busy city streets handing out flyers. The only exception is that each flyer costs you not pennies, but dimes, or maybe dollars, and you need to pass out hundreds of thousands of flyers, not hundreds. Worth it? Doubtful.

Use audience-appropriate banner ads to improve ad click ROI. Imagine paying for each flyer offered to every movie-goer as an advertiser who makes money from people showing up with the flyer. You’d be making a major goof, wouldn’t you? You’d ruining the source of your ad views by making movie-goers weary of your ad guy, true. Worse than this, however, you’d be neglecting to understand that the best place for ad in is in the movie previews.

The movie previews is where the ad spot dominates the attention of a willing and excited captive audience. This is especially true if the product is on sale in the lobby or in the shop just outside of the theatre further down in the mall. Want the serious movie goer’s ad to be relevant? Show them a car or watch ad. Want to sell something that is relevant to the general Transformer crowd? Show a soft drink ad. The same applies to your magazine article reader. Advertise to them, not the readers 2 articles down.

Magazine designer gurus and television execs learned early on that the way to pay for free content or create profits was by briefly interrupting the actual content of an already captive audience. Magazines in particular learned that a good place for an advertisement is just under or before the end of a feature. This was the original magazine ad layout model, after all. And it worked just fine for print to catch readers of a type with ads that they’d likely appreciate.

This old magazine designer technique captured the truth about ads: they’re better understood as part of the above the fold web design methodology. Ads that relate to content are more powerful after your content surrounding that motif is “completed”. Then comes an aura of satisfaction surrounding that idea, product category, activity, etc. Now is the perfect time for an ad. There is momentarily nothing else to do in that brief pause.

Think like the reader. Would your music fans prefer an album or MP3 single ad to the car insurance ad you’re showing everyone on the home page? Do your politics readers really care all that much about the latest rap  album? Tying your adsense revenue to the precise interests of the visitor is much smarter, anyway. It garners more clicks and more engagement with the sponsor, while giving the sponsor better likelihood at ad campaign performance on their display ads.

Be a concierge, not a random siren. Topic-specific ad relevance also adds real value to the reader experience of your magazine overall. Your readers will appreciate that you show relevant ads to their true interests. Adsense-style advertising was made for topic relevance targeting. Use it wisely.

Imagine ads as birds that interrupt your experience of your focus. What would you do if a hummingbird got in your way? If it’s a pretty interesting hummingbird, you might be momentarily stunned by the experience. If it hovered just in front of your focus, you might even invite him to perch on your arm. Either way, you have options and the bird isn’t part of the experience of the magazine anymore. It’s just a bird – or rather, an ad. You can shew it away, and the beautiful magazine lies beneath your eyes, just as before.

Pop-ups are stronger than ever. Any ad that pops up is technically a pop-up ads, not just the ones that open a new browser upon the original page load or click on an ad. Everyone hates those, So do we.

That said, hover ads (sometimes called lightbox ads) are still used effectively, and not just as squeeze pages for email subscribe campaigns. They work similarly for other magazine revenue campaigns, like: mag-branded swag, for instance, as well as seasonal deals on a subscription. And if the sponsor relates to the category, this type of sponsor ad could work there, too!

There are many ways to plan UX into your use of popups. Many other hover ad types can work similarly when delayed and placed on the right page or category of content. You got your ad click in, and the reader may well take an action on the sponsor’s site. Mission accomplished.

Focus more on the sponsor. A supplementary way to random ads is to focus more on quality sponsored content. A writer, a company, or other organization — even a product — may be willing to create content for use in your magazine as sponsored content. While not quite at the level of a regular feature in terms of your magazine’s mission, most readers prefer thoughtful, well-written sponsored content in a thoughtful magazine than a typical ad.

One crucial selling point for such content is the fact that sponsored content features can do more to brand a serious reader on a product or service than a header ad ever likely could. And let’s face it. Readers are more serious than most folks. They’re always going to find typical ads a little annoying, if not downright interruptive. Why not just respect that and adapt appropriately?

Chances are you’re leaving ad revenue on the table via poor relevance or filtering of sponsors rather than by not placing it on the forehead of your magazine. Are you a motocross magazine showing other motocross magazine ads by mistake? Filter out competitors and off-topic false cognates. Hand-select sites you know sell like hotcakes. In short, do your homework rather than relying on default algorithms.

• Focus on the filter. Google Ads and other online ad platforms like Bing Ads and YouTube Ads allow this level of high definition filtering. Use it! The filtering tools allow you to screen out topics that don’t make sense for a page and avoid showing everyone on your site the same ads.

• Exclude competitors thoroughly. Don’t trust platform automation to find your competitors. They’re not in the efficiency business, they’re in the clicks and impressions business. There are better automated tools out there to help filter out competitors, both known and unknown. One such competitive intelligence (CI) tool we recommend is SEMrush, which allows the user to discover competitors via various methods and can learn your niche as you grow into it. It can discover the true spend and impact of your known competitors’ ad campaigns, gauge aggressiveness, and even reveal those emerging outliers you may never have known about.

The area of the screen above the fold on any site is about presenting the unique value proposition for the site or for the website section the visitor has landed on. If the visible portion of the screen up top doesn’t tell that concisely and effectively, you’ve failed your visitors.

1. Bold, stark, concise, germinating argument as headline
2. Explanatory low-key text for headline
3. Clear call to action
4. Under 10 seconds to digest
5. Whitespace focusing the eye
6. Smart color psychology
7. Imagery captures demographic and psychology of prospect

Among the better top-of-fold design examples, we agree that these design models speak to what’s key about “above the fold” in website design for magazines. Here we get some great inspiration from the good folks at ConversionFanatics.

HubSpot’s website layout strategy epitomizes above the fold design wisdom. This wisdom runs something like “present a full picture of what the user can do on this page up top”. The user will scroll downward if they’re into it. If not, the above the fold portion has made every effort and can be A/B tested further if tweaks are suggested by the data.

• Bold, stark, concise, germinating argument as headline: check
• Explanatory low-key text for headline: check
• Clear call to action: check
• Under 10 seconds to digest: check
• Whitespace focusing the eye: check.
• Smart color psychology: check
• Imagery captures demographic and psychology of prospect: check

What’s the impact on you when you see this example? For me, it’s an inescapable, laser-focused appeal for my attention to the value proposition HubSpot is communicating like a pro magazine designer would. Everything from the feeling of the visual to the psychology of the imagery, wording, and color suggests the entrepreneurial spirit of an ever-evolving business mindset. This example of above the fold is more like the perfect ad than most ads cluttering up the typical magazine.

So what would be the magazine equivalent of the HubSpot example?

• Feature story in stark, bold,  contrastive headline and imagery
• Feature story alternates with other top stories
• Feature snippets address the top 5 or so customer profiles
• Quick, static textual/imagistic access to 5-10 other top stories on sidebar or separate column

We don’t give a magazine example of this because the top magazines typically aren’t doing this interactive aspect of content well. If you do a search online for magazines, you’ll see this banner ad approach has encroached upon virtually all online magazines today. This is unnecessary and unwise from a marketing standpoint. They don’t understand the above the fold web design wisdom to be gleaned from the old print magazine world: a full-page image-reliant ad in between an article, or one with more messaging after he very end of the article. Nothing that could interrupt the read itself.

Unfortunately, publishers are more prone to adopt whatever aggressive revenue model others are indiscriminately.  That said, they too often are not employing a focused experience of calls to action beyond a feature image and a headline above the fold. Experienced magazine designers readily spot this mistake.

We need to also address below the fold (AKA what goes beneath the fold where people have to scroll to see what’s down there).  In a marketing service website like Moz, the below the fold portion is where all the decision-maker “objections” are systematically overcome. These objections are what separates the gatekeeper from the enthusiast.

And it is precisely for overcoming these naturual critical objections that Moz’s below the fold content is about 6 times longer than the control page in their own A/B conversions tests, according to a study done for Moz by Conversion Rate Experts. While many sites are doing a good job on below the fold, few online magazines do above the fold nearly as well.

Another piece of advice CRE gives is to avoid the impression that the site ends with the top sell. This is in part due to the known growing tendency to skip, skim, and scan, if not guess at the gist of a web page. Don’t use composition in a way that indicates there’s nothing left to scroll to. Indicate as an afterthought, without distracting. This is where subtle cues like a lack of whitespace at the bottom can do some otherwise heavy lifting. They also recommend considering a “scroll for more” type of cue. This is highly worthwhile as a test, since a dramatic drop=off in clicks beneath the fold would indicate a need to entice further exploration.

Image source

You’ll want to include snippets of your other articles, maybe some video and big splashes of image to help give points of discernible focus for the eye, as well as multiple forms of media whenever possible. Alluding to the content below can again be done with an absence of white space, as well as other, more subtle cues.

I say this not to pass judgement, but to enlighten: your job as publisher is not to dilute your brand for the sake of the chance to shoot fish in a barrel on the revenue side. The fish are getting smarter. So should your advertising tactics. This is especially true as habits like scanning and intuiting the gist of a web page grow as a result of higher usage. Traffic is relatively cheap. Good traffic is not. Don’t poison the waters for the sake of the mere chance at a few quick bucks. Above the fold web design is about context and mastering the art of perfect timing.

Take the time to figure out your magazine’s core sub-audiences, and then adopt separate above the fold web design strategies for each. You’ll come up winning more often if you can present value in your advertising via targeting and other revenue models rather than losing focus through an over-inflated privileging of automation uber alles. Some things require human strategic creativity to thrive.

And most importantly, don’t dumb down your site for the sake of ad revenue when more intelligent approaches may be what your audience has come to expect in your niche and from your brand.