In-Depth Tutorial: Magazine Homepage

Food Gardening Network

Do you remember when your parents or grandparents kept all of their print editions of National Geographic magazine in binder sleeves that would be stored on the bookshelf? You could peruse the shelves and see the binders’ spines with the logo and the date range of monthly issues enclosed—usually six months of issues in a single binder, all lined up in date sequence.

We keep magazine issues to refer to them when needed, because the content is valuable and worthy of storing for reference—but today’s digital publishing world takes the magazine back-issue library to a whole new level! Done right, a website’s Magazine Homepage is a great way to showcase not only the library of back issues, but also the current issue—and without the cumbersome binder sleeves that hide the magazine covers and everything contained within.

With this In-Depth Tutorial, we’ll review a Magazine Homepage that is practical, beautiful, and easy to navigate. We’re featuring the Magazine Homepage of Food Gardening Network—a page that is worthy of emulating if you have a magazine or other periodical!

Food Gardening Network Magazine Homepage

Food Gardening Network—a publishing venture wholly-owned and operated by Mequoda—was founded by home food gardeners and for home food gardeners in the spring of 2020, and the mission is to serve gardeners with tips, tools, advice, and recipes for growing and enjoying good food at home. Food Gardening Network is the premier resource for food gardeners of all skill levels, for creating and maintaining your own food garden at home—with everything you need to ensure that you grow, harvest, and enjoy fabulous food!

When Food Gardening Network launched its monthly magazine, deploying an effective Magazine Homepage at the website was an essential part of the strategy to feature premium magazine content in a user-friendly way.

Now, let’s look at Food Gardening Network’s Magazine Homepage, and we’ll review it based on our checklist of core components that can help any website design a page that guides readers to quickly find and use premium content—and that even engages prospects to entice them to buy a subscription!

Magazine Homepage

Food Gardening Network Magazine Homepage

First, you should know that a Mequoda Magazine Homepage is also a website page that can be used to feature any premium periodical—newsletters, advisories, and journals, too, for example—if you’re still regularly publishing, and your issues are digitally integrated into your site with HTML web pages.

Having only PDFs or flipbook versions of your magazine doesn’t fully maximize the value of your magazine’s premium content—and digital apps for your magazine can be time-consuming to develop and not very profitable. However, HTML web magazines allow your content to be indexed by search engines and to be served with metered-paywall ads to non-subscribers, while also allowing you to provide active subscribers a reader experience that truly feels like a magazine.

When Mequoda launched the very first HTML web magazine for our partner Prime Publishing in 2014 with Mequoda’s Haven WordPress System, the goals included creating a magazine that is linear, finite, periodic, and that displays all the characteristics of a magazine—regardless of platform.

With your HTML web magazine content fully embedded and integrated into a larger website, opportunities to attract, capture, engage, and monetize your audience are multiplied in ways that fully leverage all your magazine content.

Food Gardening Network’s Magazine Homepage quickly and clearly displays the current issue of the magazine and the library of back issues in descending date sequence, most recent to older. Plus, it’s beautiful and uncluttered! With bold photography that quickly conveys the nature of each magazine issue, page visitors are enticed to click on individual editions. Now, that’s effective engagement!

Magazine Homepage Nameplate & Main Navigation

Food Gardening Network Magazine Nameplate and Main Navigation

Food Gardening Network’s Magazine Homepage—just like other pages on the site—displays a persistent top-of-page nameplate and navigation. And whichever main-navigation item you’ve clicked to visit (in this case, the Magazine Homepage) is highlighted in color, so you know which page you’re on.

Always ensure that you keep this persistent top-of-page treatment on your site, so that site visitors know where they are and can quickly navigate elsewhere. Plus, it’s a great way to always display your brand name and tag line—“Food Gardening Network: Growing Good Food at Home” here.

Finally, top-right of this section includes Food Gardening Network’s affiliation with the Mequoda Publishing Network (the logo is a clickable link) and sign-in and log-out functionality, along with the readily recognizable magnifying-glass icon for intra-site search.

Magazine Homepage ‘Above the Fold’

Food Gardening Network Magazine above the fold

It’s gratifying to know that some old-school publishing terms don’t always go out of fashion! “Above the fold” is an old term that derives from newspaper publishing, when the printing process and distribution required large sheets of newsprint to be folded in half and stacked. With only the top half of the newspaper visible when stacked, publishers and editors quickly learned that compelling headlines, content, and images needed to be “above the fold” to grab the attention of readers and potential readers.

Well, it’s the same for digital magazine publishers, except there isn’t a physical fold like newspapers—instead, it’s scrolling down the screen that matters. And being “above the fold” with web magazine publishing is more difficult to always achieve, because of all the varying devices that treat the content differently.

But it’s not that having to scroll is necessarily bad—don’t force yourself to fit everything above the fold; it’s difficult, if not impossible, to do without sacrificing user experience or hiding other content—you just want to be sure that your “above the fold” content is the most important, relevant, and current when it comes to your web magazine—and that means your current issue!

Food Gardening Network has smartly placed its current monthly magazine issue in a “featured” position on the Magazine Homepage, above the fold—the cover image is large with readable copy, and a short description of what’s included in the issue appears to the right of the image. And to maximize opportunities for page visitors to access the current issue, seven—that’s right seven!—clickable links appear in this section, to direct visitors to the “table of contents” page of the current magazine issue: 1) the large “featured” image of the current magazine issue’s cover; 2) the bold and green title of the current magazine issue’s month and year; 3) the “Access this issue now!” copy under the short description; 4) the top-right image of hanging tomatoes (an image used in the current issue); 5) the image of a garden pathway (used in the current issue); 6) the image of candied lemonade cake bread (from a recipe included in the current issue); and 7) the red “View Table of Contents” button. No page visitor could complain that it’s hard to navigate to the current issue on this Magazine Homepage!

Magazine Homepage ‘Below the Fold’

Food Gardening Network Magazine below the fold

For Food Gardening Network’s Magazine Homepage, the “below the fold” content that page visitors reach by scrolling down the page includes a visually appealing presentation of the Magazine Library—in order from newest to oldest issues. Any given issue’s “table of contents” page can be reached by clicking on the cover image or the month/year copy underneath the cover images.

Food Gardening Network is so new—the first published edition of the magazine is July 2020—that the entire library of cover images fits on the page. As the library grows, Magazine Homepage functionality will automatically move older issues back, disappearing from this page but reachable with “older” navigation at the end of displayed issues—likewise, when navigating to “older” magazine issues in the deeper archive, you’ll be able to navigate to “newer” issues with displayed and clickable navigation on the page.

Magazine Homepage Footer Items

Food Gardening Network Magazine Footer Items

The footer on Food Gardening Network’s Magazine Homepage—just like the nameplate and navigation at the top of the page—is persistent and always displays for page visitors at the bottom of the page, no matter what page you’re on. The string of logos, all clickable to other websites—features the Better Business Bureau (BBB) and related publishing industry associations to which Food Gardening Network belongs. Displaying these logos conveys credibility to page visitors and builds confidence that Food Gardening Network is ethical and legitimate (BBB’s logo) and an experienced and professional publisher (all the publishing industry logos).

The footer’s green section gives some basic navigation items (be sure to always include a link to your “Privacy Policy” in the footer), includes contact information (both postal address and email address), discreetly displays clickable links to social media presences for Food Gardening Network (Facebook, Twitter, Instagram, and Pinterest), presents a clickable link to the parent Mequoda Publishing Network, and asserts the copyright symbol and statement.

Food Gardening Network’s Magazine Homepage footer gives page visitors basic information about navigating and how to contact Food Gardening Network—and it inspires confidence in the brand.

Magazine Homepage Mobile Responsiveness

Food Gardening Network Magazine Responsiveness

In today’s world, all website pages should be designed for mobile responsiveness—and Food Gardening Network’s Magazine Homepage is no exception. You want to make sure that all your pages are designed for a good mobile-user experience. And in the case of Food Gardening Network, you never know when a gardener will pull out a mobile phone while out in the garden to check about a gardening technique or tip—so, you want the experience to be a good one!

With Food Gardening Network’s Magazine Homepage on a mobile phone—just like the desktop experience—the page is uncluttered and beautiful! The top-left hamburger menu allows you to get to all the navigation with a fly-out menu. And the current issue is featured with its cover near the top of the screen—all of this fills most screens before having to scroll.

After initially scrolling, you’ll see the current issue’s description, featured photos, and “View Table of Contents” button, all stacked so they are easy to read.

And then, on to the Magazine Library!

Food Gardening Network Magazine Responsiveness Library

When you scroll to the Magazine Library on a mobile phone, the Food Gardening Network’s Magazine Homepage displays the back issues—complete with cover-image links and month/year links to the specific issues—in two-across format, so you can see more of the library all at once … without making them too small to see and read. A terrific user experience!

Food Gardening Network Magazine Homepage Improvement Ideas

Continuous improvement should be part of all business processes—including the design and function of your Magazine Homepage. But refrain from constant tweaking and—for the most part—don’t listen to your own instincts or those of your staff. This page is designed for subscribers (and prospects), so keep that in mind.

What’s best is to save up ideas for improvement and make them all at once in a batch—you’ll drive yourself crazy with perfection obsession if you are constantly trying to make changes. And consider surveying paying subscribers about their experiences using your magazine content, perhaps once a year or so—this will be your best method for collecting valid feedback that will help measurably improve how your Magazine Homepage is designed and functions.

Additionally, you should consider conducting website usability lab testing when planning to redesign your magazine homepage, or any other set of pages on your website. Typically, these usability labs will define 3-5 tasks that users should be able to complete in a given section of your website. This will help determine if the redesign you’re planning meets users’ needs.

For Food Gardening Network’s Magazine Homepage, here are some ideas for improvement that might enhance the user experience:

  • Alt text for magazine cover images: While the featured current issue has plenty of space for descriptive copy about what’s in the issue, issues in the Magazine Library don’t. Food Gardening Network should consider adding 125-character alt text that will display when moused over and be read out loud by text readers. While many publishers rely on alt text with images to improve SEO, with this recommended treatment for the Magazine Homepage, it’s best to stay focused on usability—be descriptive and brief. For example, for the May 2021 magazine issue cover image: “May 2021 Food Gardening Magazine: Asparagus, Kumquats, Rosemary—gardening tips and recipes” is 90 characters, with spaces.
  • Magazine-content-only search functionality: Some subscribers may want to only search the Magazine Library and incorporating page-specific intra-site search functionality that only returns results for magazine content is a possibility. Figuring out where to place such functionality on the Magazine Homepage and how to succinctly describe it would be the challenge.
  • List of issues by year with links: As the Magazine Library grows year by year, having Magazine Homepage functionality that helps page visitors navigate more quickly to older issues, from years ago, might improve usability. It’s not an issue yet for Food Gardening Network, but within a few years, this page might be worthy of an update to incorporate navigation options for seeing a list of issues by year—another job for a site architect or usability engineer, to design sensible possibilities.


Food Gardening Network’s Magazine Homepage is a shining example of how to showcase key premium content—build this page with your paying subscribers in mind, and you’ll ensure that you keep them happy and entice prospects to consider subscribing!

Here’s a performance checklist you can use, to ensure your own Magazine Homepage follows Mequoda’s current best practices!

Mequoda’s Magazine Homepage Checklist

Element Criteria Done?
Magazine Content Deploy an HTML web magazine
Nameplate Header Use your logo and a succinct tag line
Make nameplate header persistent at the top of the page
Main Navigation Include "Magazine" as a main navigation item and highlight it when it's selected
Make main navigation persistent at the top of the page
Current Magazine Issue Feature the current issue "above the fold" at the top of the page
Include a large image of the current magazine issue cover
Include a short description of what's in the current issue
Include multiple links—including copy, button, and images—to navigate to the "Table of Contents" of the current issue
Magazine Library Display magazine issues from newest to oldest
Include links to each issue's "Table of Contents" (image and month/year copy links)
Magazine Homepage Footer Include basic navigation (including "Privacy Policy")
Include contact information (postal address and email address, at a minimum)
Include logos and links to credibility-and-confidence-building organizations (Better Business Bureau and any related industry associations)
Include icons and links to your social media presences
Include copyright statement (symbol and current year)
Mobile Responsiveness Ensure the mobile version of your Magazine Homepage is clean, uncluttered, and mobile-responsive

Print Checklist

Bottom Line: If you want to create an engaging Magazine Homepage—just like Food Gardening Network’s—follow this checklist, and you’ll have a great starting place for creating a compelling, practical, and usable page.


Leave a Reply