We’ll be publishing a news post outlining some proposed changes to the interface shortly. These changes are the result of your feedback and we’d love to hear if our solution seems like the right one before we begin development.
Your proposed improvements make the interface much more intuitive. I think it’s easier to see at a glance the features I wish to work with, and I consider the ease of use would be applicable to all levels of users.
Expanding the toolbars area and using text to complement icons is a huge improvement. The options are less cramped making it easier to select and work with the different elements.
Hiding the toolbars is also an additional plus, as is going full screen. This provides an essential starting block for working in complement to the available front end page builders.
– I would have one request/feedback: Can the sidebar and top toolbar toggle independently? There are instances when using my page builder of choice that I need the sidebar available but not the top.
Adding help, custom code and highlighter to the sidebar – logical and works well.
Hovering over selectors: ++++1 A very useful addition.
The responsive bar I like that the tabs remain visible. I’m pleased that the ability to manage and edit media queries remains as in my projects and theme framework of choice I require 6 tabs of specific range.
Overall, I think the changes appeal to me as a developer, and as an overseer of end-user admins. I think all levels of expertise would find these proposed changes makes the interface easier to grasp and work with.
In my opinon the “textual labels” are only good before you get used to microthemer. As soon you get used to it you don’t need it. I guess this is a case where “less is more”.
I see we can hide and go fullscreen (which is great) but it is not an alternative to a smaller header (55px increase is a lot and maybe to much on smaller screens). Maybe… could you add an option to activate / deactivate labels? 🙂
Thanks for sharing your thoughts guys. It helps a lot.
@Abland Yes, this is doable. My initial thought is that a click by itself will toggle both left and top toolbars, whereas Alt+Click will just toggle the top toolbar (a hover tooltip will explain this). The left toolbar already has an independent toggle at the bottom.
@cjseven Yep, the text labels can be configurable via the preferences. No problem. They’ll be on by default on new installs. I think the need to import/export preferences is approaching. Experienced coders will have things configured one way, non-coders another way – it would be nice to set things up quickly on new installs. And Microthemer may even suggest a particular configuration for the two groups at start-up. This is something I’ve been mulling over for a while.
That’s great! I advise that you wait a little while before preparing scaffolds for gravity forms etc (if that’s what you mean by presets). We’re going to add a feature that will make the process much less time consuming than it currently is. More on that later…
I’m flabbergasted by all these changes ! A designer dream ! (and particularly for the media queries management).
Congrats to your UX designer, she/he’s talented.
Newbie here – just trialing your insane plugin. I have two comments -:
1) Current responsive bar – I am finding it hard to drag to 480 px for example. Any chance I could not only slide but plugin a value?
2) I see that you will have various tabs (large desktop, desktop & tablet) … Are you going to show the various types of tablets, phones that are available to have default media queries? An example of what I mean is shown here
A1. We’ve scheduled this manual screen-width control feature already. And as it’s a fairly quick one, we can probably get it done in the next few days.
A2. You have full control over the media queries. You can input your own via the Edit Media queries icon in the left toolbar. However, I suggest that you take careful note of the advice on that CSS Tricks page you referenced “If you’re reaction to this is: you should never base your breakpoints on devices!! You have a good point“. You will go mad if you create breakpoints for every device. We recommend no more than 7/8 maximum. Instead, focus on making your layouts fluid (e.g. use percentage values when defining widths). I’m writing a responsive web design tutorial for beginners but it’s not quite ready yet unfortunately.
For previewing how the site looks across many different devices (which is fine), I recommend using the Developer tool for this in Chrome. Just right click something, choose inspect element, then click the responsive icon in the top left of the dev tools that popup.
See the options at the top for switching between devices. Note, you’ll need to set the viewport setting to 1 on the Edit Media queries page (where you can also set your own media queries) for the Chrome preview tool to work properly (and for mobile phones to display your site properly once you’ve added in all the responsive styles).
I hope that helps. Please let me know if you have further questions.
@batsteek – yes Monika is very talented indeed 🙂 The new changes should be rolled out some time in May. I can’t be more specific about dates at this stage unfortunately. But we’re very keen to get them done as soon as possible.
Also, I want to compliment you – on something that I have seen regularly on the forums.
That is, your compliments to your team on their responses to questions. This is really good to see in that it provides a much needed boost for your team. They can only feel more confidant in what they do when the owner (you) provides such good feedback to them.
As a new user of Microthemer, I can see the immediate benefit of the changes you’re proposing–especially figuring out how to change the styling for different devices / responsive design. I haven’t been able to make that work for me yet.
The one other thing that I wish you had was the ability to see what changes were made at each UNDO point. Guessing which rollback to select is really difficult. When I make a mistake, I usually just can the selector and start again.
@mwdonnelly – you’re absolutely right, it can be guess work sometimes. This update is already on our task list actually. It’s just not as high up as the changes to the interface we recently proposed.
It will get done quite soon though. We’re prioritising anything that can be considered a shortcoming of the existing features ahead of adding extra bells and whistles (although there are plenty of those in the pipeline too).
@Sebastian I agree that the undo list tweak is less critical than the updates you have planned. But as a newbie that is making quite a few mistakes…it’s pretty important as well! 😀
Regardless, I do have to say that I wish I had found Microthemer MONTHS ago when I was tweaking my current website’s theme. It would have saved a great deal of time and trouble. As it stands, I’m fussing with a knowledge base/support theme that has very limited admin controls and Microthemer is really helping me to quickly resolve styles and get on with content. For that, I’m am truly grateful!!!
One more thing…has anyone asked for an active/inactive switch for specific selectors? As in turn on (insert into the CSS file) and turn off (remove from the CSS file but KEEP the selector)? It would be nice to be able to do this to toggle back and forth between original / changed vs the current option just to delete.
Sebastian, I’m happy that the forum exists; I will contribute whenever I can!
No one has asked about this before. I see why this would be useful. I currently achieve the same thing using a different method. If you click the name of the selector you’re editing in the top toolbar it will reveal the underlying selector code in the textarea e.g.
div.post img
I simply put xxx at the end and then click the update button so that the selector fails to target anything on the page:
div.post img xxx
And then to reactive the selector I just delete the xxx bit.
Would that work for you or would you still prefer a toggle button?
I am going to bring up a topic already discussed – and just point an issue to you again. I do this as I don’t want this to slip through the cracks.
When you look at http://sugarland-weddings.com/sugarland-vendors/ in microthemer and double click on a project image – the event takes me to the actual project page rather selecting the project image to work on.
I think you said that this is being worked on – but I just wanted to verify that with you.
.
.