Jump to content
Alex

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 2

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 2

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

There's a lot of power in these panels... made unbelievable progress today, MD4.8 is really close to coming all together.Screen Shot 2018-05-15 at 2.37.19 AM.png

Share this post


Link to post
Share on other sites

Been swamped in the MD Labs with other projects all week but I always make time for MD development over the weekend. I'm fortunate that the clients I work with all use MD, so even when I'm not directly developing the theme itself, I am learning a ton and putting MD through real-life scenarios. The past few weeks of client work has been especially useful from the design perspective of MD4.8.

One of the last things I have left in MD4.8 is to create font controls and that's been my focus for today and the upcoming weekend. Here's what I have so far in its basic form, with Google Fonts integration now in the works:

Screen Shot 2018-05-25 at 6.51.09 PM.png

A little further down are the headline (h1-h6) font controls:

Screen Shot 2018-05-25 at 6.54.11 PM.png

To change fonts, you will simply be able to type in the font names you want for the body and each headline, and even change the font weight. Rather than import the vast library of Google Fonts and carry that huge weight of options in MD, I have another idea in mind for choosing Google fonts even though it may take a bit of browsing through the Google Fonts library itself to get it right.

Maybe in a future version I will come up with an easy way to simply select Google Fonts from a dropdown menu here, but I'd much rather get this first version of MD4.8 out sooner rather than spending time refining this detail now. Once I narrow this down I'll post another update here, would love any feedback if you have followed this far!

Share this post


Link to post
Share on other sites
12 hours ago, universityaffiliates said:

This just this. Yes. 

Glad I'm on the right track! Rather than doing a complex integration of these services-like I see in basically every other theme-the only thing I want us to think about here is:

1) What is the font name I want to use?

2) Which service is this font available with?

...and a single click to make that decision, then let MD compile the rest.

  • Like 2

Share this post


Link to post
Share on other sites

An often overlooked part of picking custom web fonts from services like Google and Typekit is the additional resources it takes to load the fonts to your site. When it comes to page speed, overloading your site with custom web fonts can be a huge burden.

On top of that, most themes that offer these kinds of font integration load the many hundreds of fonts for you to select from a single dropdown menu in your options panel. This can definitely be convenient, but the processes required to do that right can be taxing on performance in the backend of your admin panel - and we already know that can be slow enough.

With these two performance burdens of web fonts in mind, the solution I've built for MD4.8 will ensure one of the lightest and fastest custom web fonts integrations you've ever used.

Here's how simple it is to integrate a font from Google of Typekit will be:

1) Find a font you like from the Google Fonts list - https://fonts.google.com/

2) Type the name of the font to the element you want to apply it to (body text, h1-h6)

3) Click the "G" icon to tell MD you are using a Google font

...and you're done! With a live preview feature right next to your controls, you can instantly see what your new font looks like and adjust any related settings as needed.

There's one last optimization MD makes when loading your custom web fonts, and it's an important one that keeps the weight of your fonts as minimal as possible.

As you select different Google fonts, you will also be able to select which font weight to load for that element. One of the hidden performance burdens of web fonts are loading different weights, as each weight (bold, italic, semi-bold, black, etc.) load additional font files to perfectly deliver the font.

MD pays attention as you make your selections and makes sure to only load the font files and weights you choose yourself - and nothing more.

I could continue going into more detail about a few other performance measurements I made, but those are far more technical! It's my hope that these controls not only make it the easiest it's ever been to add Google Fonts AND Typekit fonts to your site, but that they are also delivered to your site as fast as possible.

MD4.8 COMING SOON!

  • Like 1

Share this post


Link to post
Share on other sites

Further refining typography controls, hooked up a dedicated "Logo" design panel tonight.

Screen Shot 2018-06-02 at 8.19.24 PM.png

Share this post


Link to post
Share on other sites

Spent a few hours today cleaning, refining, and further optimizing MD4.8. Rather than looking at these design controls as simple features, they are being integrated into MD as an integral part of the design system that determines the layout of your site. Because I'm looking at this as a system, I have to develop this with the intention of being expanded upon and modified by child themes.

For example, while MD will come with a set of stock design options to load on your site when you activate MD. However, if using a custom designed child theme, add a way for a child theme to load its default options when it's activated instead. This will be a powerful feature for releasing child theme designs as they will make custom design decisions for you automatically.

MD4.8 is getting close and the design controls themselves work nearly 100% by now. The final things I need to do are all behind-the-scenes utilities that make the whole system work. I cannot wait for you guys to get your hands on this update!

  • Like 1

Share this post


Link to post
Share on other sites

Amongst many other mini features to be released in MD4.8, we're also getting a new Search page template (in an attempt to add a search box to your websites SERPs):

Screen Shot 2018-06-04 at 19.39.43-fullpage.png

And the perfect touch for an update like this, MD will automatically clean out the unneeded scripts, meta tags, and other junk from loading in the HEAD of your page's document. I also found out that WordPress sets a cookie in the browser of every visitor who fills out their name, email, and website to leave a comment on your site, so MD will also now disable that too. If you need these scripts and cookie feature, you can restore it with a new option in the MD Site Tools:

md48.png

  • Like 2

Share this post


Link to post
Share on other sites

I am starting the process of updating some sites I manage to MD4.8. This is how I get the bulk of testing done on new releases - nothing better than real world experience right?

Share this post


Link to post
Share on other sites

Share this post


Link to post
Share on other sites

Hey Alex,

How many days till the 4.8 update? I'm eagerly waiting for it. I want to use it on a new site and rather have all these functionalities than editing the child theme, This update would save a lot of time and do a lot more.

Any ETA on it? So I can decide whether to wait for it or not.

Thanks!

Share this post


Link to post
Share on other sites

×