Recipe Content Collection: Hong Kong Egg Tarts (Dan Tat)

Hong Kong Egg Tarts

Description: Hong-Kong style egg tarts, or dan tat in Cantonese, are a dim sum staple. They’re often enjoyed as a snack or dessert, with a flaky crust and a smooth, glassy custard filling that is lightly sweet.

Allrecipes - Garlic Noodles

• Immediately shows a clear hero image and key summary details (Prep Time, Cook Time, Total Time, Servings), which helps readers decide whether they want to commit to the recipe.
• Starts quickly with ingredients, which matches how cooking usually begins (by collecting all ingredients).
• Uses enough spacing between lines to stay uncluttered, so it's easy to read even when you’re cooking and not fully focused on the screen.
• Includes step photos and a video tutorial at the top, which helps clarify certain steps in the recipe.
• The “keep screen awake” feature is super thoughtful so users don't need to keep jiggling their mouse (especially when their hands might be dirty). The ingredient scaling (0.5x, 1x, 2x) also makes it easy to adjust servings.
• Simple colors (dark text on white background) give the site strong contrast and fulfills accessibility needs.

Brian Lagerstrom - Takoyaki

• The site places the creator’s video at the very top, which makes sense for Brian (who is a YouTuber)and frames the recipe as video-first.
• Ingredients are split by each component in the recipe (batter, octopus, sauces), and some appear after instructions (e.g., cooking the octopus before listing later add-ons). I personally don't love this layout as it makes it harder to inventory your ingredients up front.
• Even if the order is logical for cooking, I personally prefer having every ingredient listed at the top so I can do a full survey of what I’m missing before starting.
• The thin blue type felt difficult to read from a distance. When cooking, I’m not always sitting close to the screen, and I would definitely need to strain to read the instructions.
• The video itself is very detailed and step-by-step (which serves Brian's purpose of promoting his YouTube channel well), but the site content feels less organized and detailed by comparison; photos were included, but felt less detailed than other references.

Simply Recipes - Mapo Tofu

• Site starts with a strong image and a long description explaining the dish and how to find certain ingredients. Some ingredient-related sections (like “Where to Find Sichuan Peppercorns” and “What Kind of Tofu to Use”) appear before the ingredient list, which can be confusing to users, especially if they just want to start cooking.
• The “Jump to Recipe” button, however, is a thoughtful feature that respects different user tendencies and brings you to the core recipe immediately.
• The recipe section is very well formatted, with clear headings for steps and a smaller description underneath each heading.
• Like the other examples, Simply Recipes also includes images for each step, which helps beginners follow along more easily.
• The nutrition section is well designed—key macros (calories, carbs, fat, protein) are emphasized, with an option to click and view the full label.
• Colors have good contrast, and color is used strategically to highlight important parts of the recipe while still keeping the site design cohesive.

Aesop

• Compared to many product sites, Aesop keeps the layout clean and only highlights the most relevant information, which prevents information overload.
• This is useful for recipes because ingredients and steps can be overwhelming if they’re presented as a huge wall of text.
• Aesop is very selective with words and imagery, so scrolling doesn’t feel like a huge chore.
• Many sections feel contained within the screen size, which reduces the anxiety of constantly scrolling up and down to re-find information.
• For my recipe site, I want the steps to feel digestible and contained, not like one long list that requires nonstop scrolling.

iFixit - MacBook Pro Antenna Bar Replacement Guide

• I really like how this guide has clear left/right layout (image on the left, text on the right), which makes it easy to match visuals to actions.
• The expandable parts/tools card at the top is especially helpful, since it consolidates what you need in one place (and even links to where to buy it).
• The site also includes a card to find a local repair shop, which is a useful “help me if I’m stuck” pattern.
• Each step includes images that highlight exactly where to interact (e.g., specific screws/parts), and some steps include before/after states to show what should change after you complete the action.
• The descriptions are extra short and direct, which reduces unnecessary text and helps achieve the feeling I want for recipe steps.

Eater - Best Places to Eat (Travel List)

• I like the hover interactions and the way the site presents a collection of cities. It makes browsing feel dynamic and “curated.”
• My favorite navigation feature is that when you click a section and it scrolls you down, there’s a “back to the list” link that takes you back to the top. This significantly reduces unnecessary scrolling and lowers cognitive load.
• One critique: the “back to the list” link is small, so some readers may miss it and assume they still have to scroll the entire page, which defeats the purpose of having this feature.
• I also like each location’s layout: the small summary card (“Why I love eating here,” “Don’t miss,” “Grab this souvenir,” etc.) succinctly summarizes key information.
• That card format would translate well to recipe callouts on my recipe site.