MD Live Preview Site Designer

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 introduces a new visual design experience right to your WordPress dashboard.

Are you ready to see the MD Site Designer?

Take Control of Your Site’s Design With Smart Typography Controls, Easy Color Switchers, and Precise Spacing Tools—All With Live Preview:

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.

Achieve typographical harmony with Marketers Delight

A Smart Layout System Calculated by a Simple Typography Decision

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.

Design your site at a glance

Point And Click Design Right From Your WordPress Dashboard—No CSS Required

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:

Seamless Google Fonts + Typekit integration

Integrate Google Fonts and TypeKit Without the Embed Codes

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.

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.