Proposed Improvements To The Interface

Thanks to everyone who participated in our survey, posted in our forum, or wrote to us with direct feedback. All of your comments, complaints and compliments have been extremely useful in updating Microthemer’s development roadmap.

The Results Of Our Recent Survey

When we asked you how much time would you like us to spend on various elements, 74% of you requested further development of Microthemer’s current features. Documentation (61%) is also an area many would like see improved with in depth tutorials (video tutorials were the most popular, followed by forum support). Just over half (51%) would like to make sure MT is optimised for page builders, such as Live Composer, Beaver Builder, and Velocity Page. 43.9% would like to see new features, such as animations, transitions, and LESS/SASS. Finally, 34.1% have requested speeding up the interface. We were pleased to hear that 95% of those who contacted support found it ‘extremely helpful’.

The survey gave us a lot of food for thought. Ideally all of the improvements would happen immediately but we have to be realistic about how quickly we can develop, test and document. We have taken note of the survey results and decided to start by improving current features. This will allow us to build new features on a solid foundation. Here is what we propose to do.

Interface Changes

Our first set of improvements relates to the interface in general and designing responsively. From 21 April Google will start penalising sites not optimised for mobile. We therefore want to ensure that Microthemer is a useful and intuitive tool for converting a non-responsive site into a mobile friendly one.

As we’re making changes to the interface, and not just adding extra nuts and bolts, we wanted to run things by you at the planning stage. This is so that we can address potential issues before they become issues in practice.

Here are some of the main issues you reported:

1. Trouble relocating previously created selectors.
2. The responsive design tabs are confusing and awkward to work with.
3. Icons being too abstract to fully understand without a label.

Our proposal for the new interface:

1.  The folder and selector management options have been moved to the top left of the interface.
2. The responsive tabs are always visible, as is the screen width slider.
3. The style group icons (e.g. shadow) have text labels – the individual style options (e.g. text-shadow-color) remain purely icon-based for now.

Offsetting the extra height of the options

Giving the folder and selector management options their own row and adding textual labels to the style groups has resulted in a 55px increase in the hight of the options. To offset this, we’ll be adding a full-screen toggle to the top right of the interface. This will remove the browser address bar and tabs which will results in a gain of approximately 100px screen height.

Some of you have also requested a mechanism to quickly hide the Microthemer toolbars. We therefore propose that the Microthemer logo in the top left act as a toggle for collapsing or expanding both the main options along the top and the left toolbar simultaneously.

Clicking enter full screen mode icon, in top right corner, removes browser’s frame.

Clicking MT icon in the top left corner minimises its interface.

Relocating the help, custom code, and highlighter icons

We’ve moved the help and code switching icons from the top right to the left toolbar. This is mainly because we think that they fit there just as well, and we want to keep the top right area uncluttered. In the screenshots we’ve suggested that the new full screen toggle icon go in the top right area, but we also think that this could go in the left toolbar too. In which case only the status message would show in the top right. As with everything else, we’re open to feedback on this one.

We’ve also moved the highlighter icon to the left toolbar. However, it will also be possible to temporarily trigger the highlighter functionality by simply hovering your mouse over the current selector’s name in the top toolbar. We’re keeping the highlighter toggle button in the left toolbar because there may be times when you want highlighting permanently on e.g. when checking if a selector targets elements across different pages.

We’ve also added a clear icon to the selector’s quick edit options. This will clear all styles across all style groups, but just for the one selector.

HOVERING OVER SELECTORS IN THE MENU TRIGGERS HIGHLIGHTING

To make it easier to identify how selectors in the main menu relate to elements on the page, hovering over selectors in the menu will temporarily highlight elements on the page. Selectors that you have applied style values to have a feather icon to indicate this. They used to have a number relating to the number of style groups (not individual styles) but the presence or absence of a number was the main purpose of this and we think an icon is better. The same icon is used on the new responsive tabs, which you’ll see below.

The Responsive Bar

The biggest change we’re proposing is to the responsive section:

1. The media query tabs and screen width slider will always be visible.
2. There is no need to add or remove media query tabs on a per-style-group or per-selector basis.
3. We’ve done away with the tab management menu (it’s redundant now due to point 2).
4. Microthemer will stay on the Phone tab (for instance) when switching between style groups (e.g. font, padding, gradient) and between different selectors. This way you can just style your mobile site in one go without the hassle of adding media query tabs.
5. A small feather icon appears on the tabs if any styles have been applied to it so you can easily relocate your style edits.
6. If there are too many tabs to fit the available space, Microthemer will reduce the width of all tabs and truncate the text if necessary.
7. The options for editing media queries remain the same. We will remove the icon for this from the left toolbar as it will always be visible in the responsive bar.

THE RESPONSIVE SLIDER

When selecting a media query e.g. Desktop & Tablet, the slider locks at the min/max width values for that media query (sliding is restricted to that range). Clicking the lock icon lets you break free of the range set by the media query (i.e. you can drag the slider to full screen width to zero). The lock is in place to show you that the styles you apply to the tab will only have an effect on a particular range of screen widths (as indicated by the mid blue portion of the slider). We anticipate that the need to use the unlock icon will be rare as most of the time you will want to view the site at the same screen width that your styles are effective at.

In addition to using the slider handle to set the screen width, you can manually enter a pixel width.

That’s it for the interface changes. Please leave any comments and feedback in our dedicated forum thread.

PS – We are also prioritising some improvements to the selector wizard (e.g. more selector suggestions based on wider scanning of the DOM, support for nth-child/nth-of-type selectors (possibly with a polyfill fallback), and body class selector variations). But as these changes won’t require the same user adjustment as interface changes, we’ll just roll them out (possibly before some of the changes discussed here).