MD4.8 Introduces Site Designer, Smart Typography Controls, and Much More

For years Marketers Delight has been battle-tested and customized from the inside-out on many high level sites and by the hands of over 1,000+ customers.

The results of that exposure has brought new features, bug fixes, and performance updates to keep MD up-to-date with the times.

Now, in its next evolution, Marketers Delight 4.8 finally introduces a new visual design experience right to your WordPress dashboard.

Are you ready to see what’s new?

The new visual design system in MD4.8 is a testament to the past few grueling months of restructuring the MD code base to allow for such a comprehensive design system to exist in a sustainable and highly performant way.

The new MD design system gives you precise control over your website’s most important layout and design decisions with the flick of your wrist. Each control is designed for maximal impact and to let you achieve more by doing less.

See, a design system like this can easily get overwhelming by giving you dozens of options for every element of your website. That’s why each option you now have available to you was carefully considered around what I’ve learned from helping thousands of people over the years make design changes to their website.

Shall we dive in and see what’s new in Marketers Delight 4.8?

One of the most underappreciated, yet absolutely critical piece to designing a gorgeous website is the typography.

See, a smart designer will calculate things like content widths, padding and margins, and other spacing elements around the most important part of your website: the size of the text.

After all, apart from how fast your website loads, the readability of your website is the most important thing you have going for your design. If people can’t read your content, why even write it in the first place?

Even worse, if the supporting elements around your content are poorly spaced, your design can make your writing look amateurish, no matter how great of a writer you are.

These are simple concepts, yet most WordPress themes completely miss the mark because of how complex a good typography system is to develop.

And why focus on something so “trivial” when they can just mesmerize you with flashy features you don’t really need, leaving you severely underequipped to personalize the reading experience to your style of content.

Well, I’m incredibly excited to tell you that Marketers Delight went back to the basics to create a completely new typography system that builds your entire website’s layout based around one single question that anybody can answer:

How big do I want my content’s font size to be?

From your simple answer, MD calculates your entire site’s layout to best support that font size. Instead of building your layout with a bunch of arbitrary calculations, MD literally builds itself around your text.

That includes things like determining the best width for your content box and sidebar, the ideal size of your blog headlines (h1 to h6), and even the little details like how much line height should go in between each line of text, and how much space should go between each paragraph.

I got obsessive with these details because of my frustration of imperfectly changing these details with CSS on new sites I build.

To be frank, there are just some parts of your design that you should never touch due to the sheer complexity that goes into getting them right, and MD4.8 adds the brains to take care of that all for you.

From the header all the way down to your footer, your site will build itself in a way that best supports your text and resize your site in a proportional way on desktop, all the way down to mobile screens.

For all that MD does for you behind-the-scenes, a great design relies on more than just a bunch of cold calculations; it needs some personality too.

This is where the visual preview features shine as you can watch your site elements move all across the color spectrum and see how your layout reacts to different fonts in just a few easy moves of the mouse.

The MD live preview designer adds easy to use color, fonts, and other design controls connected to the most important elements of your site that you will almost always want to tweak on each site you build with Marketers Delight.

The best achievement of this system is just how much tedious CSS it removes from the customization process of your website. No more dealing with frustrating menu CSS and finding the right element to target with cryptic looking code, MD now handles all of that for you in the background.

The visual design features are a lot of fun to use and feel like magic when you press Publish. Best of all, the controls you need to style your entire site are all located in the new “Site Design” panel when you load the WordPress Customizer.

Rather than reinventing the wheel, MD uses the native WordPress Customizer to create a familiar design experience. This gives you a chance to preview your changes before they go live so your readers never see a pixel out of place.

Here’s a glimpse into some of the design controls added in MD4.8:

You may have noticed the font controls in the above screenshots above, and integrating custom web fonts from popular services has been a special focus of the new MD design system.

The problem I see in many other themes that offer these kinds of integration is the overwhelming amount of font selection choices they load into your interface.

A service like Google Fonts offers hundreds of fonts to choose from, and many theme companies thought it would be a good idea to stuff them all into a tiny select box for you to choose from.

The overhead on creating these kinds of controls is something I absolutely did not want to add to MD, especially at the risk of slowing down your website or paralyzing you with too many options to choose from.

So I took a different approach to integrating Google Fonts and Typekit to your site, and created a simpler process I think you’ll appreciate:

1. Know which font you want to use (browse the Google Fonts library or Typekit)
2. Know which font service it’s hosted on
3. See a live preview of your decision

Watch this quick preview of me changing the headlines of my posts and pages to various Google Fonts with ease:

When it comes to site performance, loading custom web fonts can be a big page speed killer. To combat this and keep your pages as lean as possible, MD makes sure that only the most optimized version of the Google Fonts embed code is loaded, and only loaded once in order to keep HTTP requests down.

You can even manage the font weights and italicized versions of each font, which MD will cleverly compile into the Google Fonts embed code.

Another popular web service—and my personal favorite—Adobe Typekit now has sound integration into Marketers Delight as well.

To add the Typekit font selection to the Customizer interface, simply add the ID of the font kit you setup from Typekit into Appearance > MD > Settings > Site Tools.

…and the process is the same, just type in the font name and tell MD it’s from Typekit, and the rest will be done for you!

When it comes to the design of your site you cannot ignore mobile and tablet devices anymore. Even though you as a site owner may spend most of your time on desktop, your audience is undoubtedly visiting you on smaller screens.

In addition to a massively improved default responsive design, MD adds precise typography controls that let you control the reading experience across desktop, tablet, and mobile.

Watch how the font controls seamlessly adapt as you change the device view in the Customizer:

Even though there are only three preview windows available in the Customizer, you can rest assured that MD takes care of the rest of the grueling details of responsive design and leaves you with the easy decisions.

Marketers Delight 4.8 is all about design, and if there’s one thing I’ve learned over the years of building websites is that implementing a scaleable yet useful design system is not an easy task.

The many technical details that go into creating such a system have alluded me for years, and it feels like a dream come true to finally be able to introduce something like this to you.

In this last section, I want to show you the last few features that made their way into MD4.8 and briefly talk about some of the under-the-hood considerations I made to make these features as high performing as possible.

1) Cleaner Search Results Page Template

The new and improved search page template gives your readers a cleaner feel when searching your site. Now organized in a Google-like manner, a more compact post listing with the page URL embedded below the title makes scanning through your content a breeze.

2) MD4.8 Cleans Out the WordPress Junk Tags From the <head>

Lately the development team of WordPress has been getting sloppy with the additional code they add to the <head> of your site. Most of it is unnecessary for most sites and has caused the savvy among you to seek out ways to strip it away into the abyss.

Now, you don’t have to worry about installing any new plugins or finding the right filters to clean out your site’s head, MD takes care of it for you automatically!

MD4.8 now strips the following upon activation:

1. Removes the horrid Emojis script
2. Removes the generator meta tag (a security risk by exposing which version of WordPress you’re running)
3. Removes the Windows Live Writer meta tag
4. Removes the Really Simple Discovery (RSD) meta tag
5. Removes the WordPress shortlink meta tag
6. Removes the adjacent posts link meta tags
7. Removes WordPress version query variables from enqueued scripts and styles
8. Prevents WordPress from storing a cookie to un-loggedin users that saves their Name, Email, and Website information in the comment form

Now, if for any reason you want to restore this data, MD has provided you with an easy option to bring your <head> back to default:

3) New Design Updates and Helper Classes

As part of the new design system, the helper classes offered in MD are now a whole lot more flexible and plentiful. I will be updating the style guide with everything you need, but here’s a small taste:

• The overall design of MD has been cleaned up more proportional spacing on desktop and tighter spacing on mobile.
• The button-sec, button-outline, button-arrow, and button-badge classes are now included in MD by default. see examples →
• The default button styles has been updated with a simplified look with subtle shadow and hover effects.
• The spacing and blocks helper classes will now update to align with the current spacing of your layout, and more directions have been added to give you fully responsive margin and padding classes.

4) A Brief Overview of the Technical Details in MD4.8

One of the harshest lessons I’ve learned as the developer of Marketers Delight is how to develop things efficiently that don’t put a strain on your page load.

It’s one thing to know the basics like making minimal HTTP requests, excluding JavaScript dependencies, keeping a small CSS stylesheet, and optimizing custom web fonts—that’s all rookie stuff.

…but to develop advanced features that take minimal server resources and database queries to load takes a whole other level of knowledge and dedication.

After learning from the near disaster of months ago, where some MD features would load hundreds of database queries per page (MD4.7 all but eliminated every single custom query MD makes), I was hellbent to create the new design system to be as efficient as possible.

Due to the dynamic nature of the MD layout and typography system, coupled with saving your custom input to your site’s database through the MD Customizer options, there’s actually quite a bit of server processing that goes into generating the styles that load your site’s layout.

And I’m pleased to tell you that literally none of it is done on the frontend of your site. In fact, MD only regenerates your styles when you save your Customizer options, so even the backend of your site is free from this extra strain.

Marketers Delight intelligently compiles its dynamic design system and your custom input into a single, static CSS file in your site’s <head>.

What that means is MD already knows which styles to load before your page even begins rendering, so your reader’s browser resources are spent loading your content rather than pulling trivial design details from your database.

MD4.8 Upgrade Notes

As always, you can get the new MD update from the automatic updater in your WordPress dashboard. To see the update, you must have an active license key enabled in WP Admin > Appearance > MD.

For years Marketers Delight has sent steady one-click updates to your site to ensure you are never left behind as MD evolves.

In most cases the update process is easy and requires no work on your part to safely upgrade, and each upgrade is rigorously tested in the MD Labs to ensure it doesn’t break your site.

While MD4.8 is a huge update, you should experience a mostly painless update process.

Due to the nature of this kind of update—which lives in the realm of subjective design—you may want to remove parts of your child theme’s style.css file that you can now simply design with the new MD design controls.

That includes CSS for changing your site’s colors (like the main menu or header), tweaking font sizes, and making adjustments to spacing within your posts and pages.