In-Depth Tutorial: Collections Homepage

Food Gardening Network

Curating and leveraging your content should be a key publishing strategy—to maximize SEO efforts and to serve premium subscribers and members with valuable and easily accessible content. Welcome to Collections in Mequoda Haven Systems!

Think about special collections you might find at your local library, and you’ll get the idea about how Mequoda Haven Systems deploy Collections of content. With traditional libraries, special collections typically contain curated materials that are housed in separate areas of the library and that require pre-approved access to view and use.

Collections for Mequoda Haven Systems are curated around themes or special topics, and being a premium subscriber or member gives you “special access”—no reading rooms, like at your local library, to view the content, because you get full and unlimited access to view and read Collections from the convenience of your computer … with a premium All-Access subscription or membership!

When you have a library of Collections at your website, you should organize and present the Collections—like your local library does—with a reference-like page that details all the materials in an overview fashion. Bingo! That’s what a Mequoda Haven Systems Collections Homepage is all about—the place to showcase all the Collections you’ve created.

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

FGN Collections 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, deploying an effective Collections Homepage at the website was an essential part of the strategy to feature curated premium content in a valuable and user-friendly way.

And for Food Gardening Network, creation of Collections centers around food-specific plant topics. For example, The Everything Tomato Guide: All You Need to Know About Growing, Harvesting, Cooking, and Eating Delicious Tomatoes includes, well, everything about planting, growing, tending, harvesting, and enjoying tomatoes from your own home garden. From the background and history of tomatoes to details on varieties and avoiding and managing pests and diseases, this Collection even includes easy-to-make tasty recipes to help you enjoy the fruits of your tomato harvesting. Now that’s a carefully curated and comprehensive Collection!

Let’s take a look at Food Gardening Network’s Collections 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 topical, curated Collections—a page that serves premium subscribers and that even engages prospects to entice them to buy a premium All-Access subscription!

Collections Homepage

FGN Collections Homepage

Food Gardening Network’s Collections Homepage quickly and clearly displays the breadth and depth of the Collections Library, organized in alphabetical order by topic or food item—and with the “Featured Collection” at the top of the page. This page is beautiful and uncluttered! With bold photography of each food item, page visitors are enticed to click on individual Collections. Now, that’s effective engagement and a simple and gorgeous presentation!

And Food Gardening Network first struggled with how to create the Collection cover images—the Collection titles are long and descriptive and would be difficult to read if included on the Collection covers. So, instead, while the full Collection titles have been retained when you navigate to the individual collections, on this Collections Homepage, only the food name and image are included—making the page easy to read and very engaging!

Collections Homepage Nameplate & Main Navigation

FGN nameplate

Food Gardening Network’s Collections 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 Collections Homepage) is highlighted in green 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 consistently 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.

Collections Homepage ‘Above the Fold’

FGN 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 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 digital 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 content—and that means your “Featured Collection” in this case!

Food Gardening Network has smartly placed its “Featured Collection” at the top of the Collections Homepage, above the fold—the cover image is large with readable copy, and a short description of what’s included in the Collection appears to the right of the image. And to maximize opportunities for page visitors to access the Collection, seven—that’s right seven!—clickable links appear in this section, to direct visitors to the “Table of Contents” page of the Featured Collection: 1) the large cover image of the Featured Collection; 2) the bold and green copy that is the title of the Featured Collection (“All About Avocados” in this case); 3) green hyperlinked copy “All About Avocados Guide” in the description section; 4) the “Get started right now!” green copy under the short description; 5) the top-right image of cut avocados; 6) the image under that with whole avocados and avocados growing; and 7) the red “View Table of Contents” button. No page visitor could complain that it’s hard to navigate to the Featured Collection on this Collections Homepage!

So, what warrants a Collection getting the “Featured Collection” spot at the top of the page? Well, unlike a magazine homepage which displays the most recently published magazine issue, on this Collections Homepage, the Featured Collection is the Collection that is being promoted by email at the time—the Featured Collection also appears in the Collections Library, where it should alphabetically appear.

Collections Homepage ‘Below the Fold’

FGN Below Fold

For Food Gardening Network’s Collections Homepage, the “below the fold” content that page visitors reach by scrolling down the page includes a visually appealing presentation of the Collections Library, in alphabetical order. Any given Collection’s “Table of Contents” page can be reached by clicking on the cover image. Unlike a magazine homepage, the Collections here are mostly evergreen content—so, when they were published is mostly irrelevant to importance. Thus, the decision to sequence the Collections Library in alphabetical order.

Food Gardening Network’s Collections Homepage features 6-across Collection cover images, maximizing space and not sacrificing the beauty and simplicity of the food photos.

Collections Homepage Footer Items

FGN Collections footer

The footer on Food Gardening Network’s Collections 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 Collections Homepage footer gives page visitors basic information about navigating and how to contact Food Gardening Network—and it inspires confidence in the brand.

Collections Homepage Mobile Responsiveness

FGN avocados mobile

In today’s world, all website pages should be designed for mobile responsiveness—and Food Gardening Network’s Collections 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 Collections 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 “Featured Collection” appears at the top (“Avocados” in this case), with its cover near the top of the screen—all this fills most screens before having to scroll.

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

And then, on to the Collections Library when you scroll!

FGN mobile responsiveness

When you scroll to the Collections Library on a mobile phone, the Food Gardening Network’s Collections Homepage displays the library in alphabetical order—complete with cover-image links 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 Collections Homepage Improvement Ideas

Continuous improvement should be part of all business processes—including the design and function of your Collections 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 Collections content, perhaps once a year or so—this will be your best method for collecting valid feedback that will help measurably improve how your Collections Homepage is designed and functions.

Additionally, you should consider conducting website usability lab testing when planning to redesign your Collections 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 Collections Homepage, here are some ideas for improvement that might enhance the user experience:

  • Alt text for Collection cover images: While the Featured Collection has plenty of space for descriptive copy about what’s in the Collection, the Collections Library doesn’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. This recommended treatment for the Collections Homepage can improve user experience and help with SEO.
  • Food Gardening Network could consider additional sorting functionality on the Collections Homepage by allowing for filtering by “vegetables,” “fruits,” “herbs and spices,” and “grains and seeds”—adding this functionality would enhance user experience by allowing page visitors to only display the types of foods of immediate interest.


Food Gardening Network’s Collections Homepage is a great example of how to showcase key premium content that has been curated—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 Collections Homepage follows Mequoda’s current best practices!

Mequoda’s Collections Homepage Checklist

Element Criteria Done?
Collections Content Deploy carefully curated premium Collections
Nameplate Header Use your logo and a succinct tag line
Make nameplate header persistent at the top of the page
Main Navigation Include "Collections" as a main navigation item and highlight it when it's selected
Make main navigation persistent at the top of the page
Featured Collection Feature a Collection, currently being promoted, "above the fold" at the top of the page
Include a large image of the Featured Collection cover
Include a short description of what's in the Featured Collection
Include multiple links—including copy, button, and images—to navigate to the "Table of Contents" of the Featured Collection
Collections Library Display Collections in a natural, understandable sequence—alphabetical , for example
Include links to each Collection's "Table of Contents" (from the cover images)
Collections 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 Collections Homepage is clean, uncluttered, and mobile-responsive

Print Checklist

Bottom Line: If you want to create an engaging Collections 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