Jump to content
MD + Upcoming GDPR Compliance Read more... ×
Alex Mangini

MD4.8 Sneak Peaks

Recommended Posts

The next focus for Marketers Delight is to finally deliver some easy design/customization options, and thanks to the great MD4.7 I've been running at full speed building these new features out.

You know - things like changing site colors, fonts, menu colors, etc. without needing to go into your child theme or write CSS.

(of course MD will always be developer friendly)

Take a sneak peak of one small possibility so far (video link):

So far I'm pleased with the direction things are going and staying diligent to only add what's necessary for maximum results. Less is more; all that good stuff.

As you can see from the video I'm targeting site elements like the header, main menu, content box, sidebar, footer, and the most important elements within these sections. After working through thousands of sites (many hundreds of MD, maybe more) I'm focusing on what is most commonly changed in site designs and honing in on getting the most out of each new settings control.

Nailing the right design tools will end up saving us time when first setting up new and take away tending to some of the more tedious elements of good design - ESPECIALLY styling menus (always a headache).

I'm also trying to think and build for the future as well as the present, and have found it interesting to design these tools in such a way that they can be launched from individual posts/pages (like nearly every other MD feature) instead of global.

I'll keep moving along, and will keep you updated on my progress and when to expect these to be finished. I'm calling this MD4.8, and there will be tons of other improvements design/optimization improvements alongside these new design controls.

Let me know some of most common design changes you make to your own sites and see if they would be useful to add to MD.

  • Like 2

Share this post


Link to post
Share on other sites

Brilliant; and Beautiful . it really touches a pain point for me , very excited about it; and i know it will lead to another non stop innovations in design and functionality . 

  • Like 2

Share this post


Link to post
Share on other sites

Glad to hear this is going in the right direction! You're right about this:

 

...and i know it will lead to another non stop innovations in design and functionality .

 

From new child theme designs to different kinds of MD "skins" my plan is for these options to standardize the controls you have in each child theme and make it insanely easy to switch to a new design. Really exciting stuff, I think it will be out soon!

  • Like 1

Share this post


Link to post
Share on other sites

I'm open to it, maybe even bringing back an old portfolio plugin I used to sell before MD. This is something that will certainly be explored once I start on the MD content builder I've been planning out.

 

Until then, I'm sure there are other fine plugins that could be made compatible with a little tweaking. I bet using MD helper classes and other features, you can already make a portfolio too.

  • Like 1

Share this post


Link to post
Share on other sites

One of the most important parts of designing a site is typography. In a precise typography system all units of measurement are relative to one another rather than just chosen by what appeals to the eye (although that's a perfectly valid way to design).

Apart from choosing color schemes, a big part of the new MD4.8 design options will focus on typography, and the implications these new controls will have on your layout are huge!

Take a sneak peak at the main typography controls in the new 4.8 customizer panel:

Image 2018-04-28 at 6.20.52 PM.png

The only default type value will be the main font size of your site. All other measurements in your site's layout will be calculated from that single value, which can save you a ton of time in the customization process!

For example, by setting the main font size of your site, MD will calculate the overall line height of text, the idea site width, content box and sidebar width, and a relative font size for your heading elements (h1, h2, h3, h4, h5, h6) and their respective line heights.

Even better, these new relative values will update across all parts of your design and make the spacing and padding of different elements more precise to your custom font size.

Here's another screenshot of some of the headline font controls in MD4.8:

Screen Shot 2018-04-28 at 6.28.31 PM.png

When you see the link icon next to a font control, that means that font is being calculated by MD's typography system and will scale in harmony to your site's main font size. For the most control, you can override that value and break the link with your own custom font sizes and line heights with a simple number control.

I'm extremely excited to roll this update out and am working on it every chance I get. With the new design controls offered in MD4.8, you will be able to customize your site far more efficiently and precisely than you can now with MD's static and heavily custom CSS reliant options.

Let me know what you think!

  • Like 1

Share this post


Link to post
Share on other sites

I made a new and important UI addition to the MD4.8 design options: a reset button!

This is an under appreciated but important feature in the customization process and makes it easy to restore default settings in a single click. The reset function will be especially useful if you wish to return to MD's default layout calculations, which are based on the rest of your layout and adds a nice harmony to the spacing around your site.

More updates coming soon!

Screen Recording 2018-05-10 at 10.03 PM.gif

Share this post


Link to post
Share on other sites

A UI update from last night's post:

To keep the typography data as simple as possible I've opted not to save a value to any font fields that are calculated by MD's new typography system. As these fields will be updated constantly and are sensitive to other control's input, it would just be too burdensome to resave each field when another control is changed. These values will still be accessible from a dynamic function, and will be used to render an in-admin style guide so you can see your design settings at a glance.

The way the UI in my last post worked, I couldn't save an empty field as the slider number control field requires a value to save, so I had to rework the typography settings to use a slider and text field in sync with each other.

The result is the following:

Screen Recording 2018-05-11 at 10.14 PM.gif

(Note: not all live preview functionality is hooked up yet)

You can compare the differences in this post and the post above. You'll notice that in this instance the pressing the reset button doesn't show a link icon, but instead clears out the text field. Again, to revert back to the default typography calculation, this field needs to be left blank - so this works perfectly with the needs of MD's typography system and makes calculating the ideal font size/unit of spacing simpler.

The other benefit I found of using a text field is that you can manually type in your own size! So if you already know your ideal dimensions per field, you can simply type it in rather than moving the slider into the exact position.

I think with this change, the typography control mechanism is just about perfect, and both the slider and text field are in sync to update based on which control you use to input your measurement. I did like the idea of using a link icon to indicate the control is now in sync, and I will try to think of a way to add that back for coolness sake. But as of now, I quite like the simplicity of the UI and the added flexibility the new text field adds.

I'll be around for a few more hours tonight in the MD Labs - I hope you enjoy these updates as I go along!

  • Like 1

Share this post


Link to post
Share on other sites

Spent the night refining the font sizes and spacing to scale down according to MD's new smart measurements, and I'm loving the flexibility and simplicity of styling your words with precision and automation. Plus with most of the design controls hooked up, I've been able to come up with cool design touches.

A good amount of frontend code is being cleaned up and written to be more flexible. One of MD's signature touches will always be clean as hell spacing no matter what device and what content is available to you. Excited to get closer to completion. :)

Screen Shot 2018-05-14 at 5.18.53 AM.png

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×