MDN (Mozilla Developer Network ) is one of the most visited online resources that any frontend developers visit on a regular basis.
I was excited when I learned that BuySellAds partnered with MDN to handle their native advertising exclusively.
The initial design for the ad unit is fairly straightforward. It uses the same creatives as the Carbon ad unit, which is a 260 × 200 image and description. I passed the Carbon classic mockup to the team at MDN to implement the design. The advantage of sharing the same creatives as Carbon is that we can set up the campaigns immediately the moment we have approval from clients to run the campaigns on MDN.
During one of the discussions with the team, I was asked to refresh the sidebar ad unit. I already have a few designs as part of my experiments with Carbon Cover creatives. It didn’t take much time to put together a CodePen live demo to share with MDN team.
When designing an ad unit tailored for developers, I take into account the following crucial factors:
- How much empty space the most visited pages, usually the docs, is left to display ads?
- What are the creatives that will be used to design this ad unit?
- How will the creatives requirements affect the time needed for account manager to collect from clients?
- How flashy can we design the ad unit by showcasing all the creatives while maintaining the subtlety of the ads being present with the main content.
- What percentage of browsers support the CSS we use for this design?
The goal is to use the same creatives as Carbon Cover and combine them in such a way that it’s still occupy the relative same amount of width in the sidebar. I wanted to put more focus on the image and decided to remove the padding inside the ad container. I chose to use linear-gradient because it’s widely supported and I can ensure that it looks similar on most browsers.
There is also a small touch of animation when the site visitors hover the image. The addition of title and call-to-action fields allows us to put more emphasis on the tagline of the ad.
In summary, creating ad units for a developer audience involves careful consideration of design elements and user experience. The collaborative effort between BuySellAds and MDN has set a solid foundation for innovative approaches to native advertising, and I hope the insights shared in this post prove helpful as you navigate similar challenges.