I've given it a spin and have some suggestions for the next version. In my comments below I have tried to keep the user experience of a regular content editor in mind.
1: As we have discussed on another occasion it's not ideal to provide a regular content editor with the power to select any font they fancy.
It can break the design of a website if they pick a font that does not go well with the design at all.
Therefore I suggest that you makke it possible to configure, which font's can be used when setting up the datatype.
2: When I had created my datatype I was a bit confused why there was two labels named "Preview header text" in the settings - Perhaps it should be "Preview header text" and "Preview paragrahp text"?
3: I like the fact that it's possible to choose font-variants. However I think it would be nice if it could be configured in the settings, which font-variants are being shown to the editor. Listing all of the variants available makes the preview a bit confusing I feel. (Especially from an editor's point of view).
4: I'm in doubt about how the "Values" part are intended to work? Is the intention that it should be possible to generate a font-family by allowing the editor to choose more than 1 font in the dropdown and then automatically save the chose font's in the font-family field? I don't think the an editor should be able to edit these values - I'm thinking these values should perhaps be hidden? In terms of setting the selectors I'm thinking it would make sense to be able to configure those in the settings instead perhaps? As a developer you would know what headers and paragraphs you want to affect when the editor is choosing a font, right? :)
I have not been playing around with the output in Razor yet - the above comments are only based on my experience in the backoffice.
I hope it all makes sense - if not you know where to catch me so I can make it more clear :)
1. Yep totally agree would be nice in the prevalue editor (when configuring the data type) to select which fonts you are able to select in the dropdown.
2. Just seems an error from a copy paste issue on my part :-)
3. So this could be tied in with the 1st issue that you can select which variants are able to be choosen.
4. The values are a way to show what values the property editor is saving and not intended to be editable, so I will make them read only.
5. In regards to the selectors, the only issue is that how do I know which variant is for what selector. As you may want a css selector for the bold vairant to be h1 and the other normal variant to use another css selector, or am i missing something?
Great to see you have released a bugfixed version today - I'm gonna test in a minute and report back in the bug post.
5: Nope seems like I was the one missing something when I posted :) You're right on that one. But still don't think it's ideal that this has to be done once the font and variants has been selected. Most regular editors have no clue about what CSS and selectors are so for them I think it would be a bit confusing.
But obviously we as frontend developers would need to know, which selectors to use. But perhaps the approach could be to configure the possible selectors during the datatype configuration.
I'm thinking that we can perhaps predefine the possible selectors in the configuration and setup a selector and a friendly text like
h1 - Heading 1 h2 - Heading 2 p - Paragraph
Where the nice text is shown as a checkbox in the editors view and then somehow coupled with one of the chosen fonts/variants...I think it's easier to explain using a drawing perhaps? :) Or can you make any sense of what I'm writing above?
Hi Jan Sorry no I don't follow so a diagram would be great please.
My thought of this property editor was for hobbyist sites and people starting with Umbraco, as I intend to put it into some starter kits I am building. So two different audiences, but thinking of a best way for the non technical is giving me some problems, as I am unsure on how to solve this.
I'll try to wrap my head around it sometime and create a sketch. I know that it's intended for hobbyists and people starting with Umbraco but I can see some use cases where it would be nice to have a regular editor be able to modify a restricted range of fonts on a website...that's why I keep them in mind all the time.
But with the changes suggested above implemented it's still a rockstar package! :)
Thoughts on Google WebFont property editor
Hi Warren
Nice job on this package :)
I've given it a spin and have some suggestions for the next version. In my comments below I have tried to keep the user experience of a regular content editor in mind.
1: As we have discussed on another occasion it's not ideal to provide a regular content editor with the power to select any font they fancy.
It can break the design of a website if they pick a font that does not go well with the design at all.
Therefore I suggest that you makke it possible to configure, which font's can be used when setting up the datatype.
2: When I had created my datatype I was a bit confused why there was two labels named "Preview header text" in the settings - Perhaps it should be "Preview header text" and "Preview paragrahp text"?
3: I like the fact that it's possible to choose font-variants. However I think it would be nice if it could be configured in the settings, which font-variants are being shown to the editor. Listing all of the variants available makes the preview a bit confusing I feel. (Especially from an editor's point of view).
4: I'm in doubt about how the "Values" part are intended to work? Is the intention that it should be possible to generate a font-family by allowing the editor to choose more than 1 font in the dropdown and then automatically save the chose font's in the font-family field? I don't think the an editor should be able to edit these values - I'm thinking these values should perhaps be hidden? In terms of setting the selectors I'm thinking it would make sense to be able to configure those in the settings instead perhaps? As a developer you would know what headers and paragraphs you want to affect when the editor is choosing a font, right? :)
I have not been playing around with the output in Razor yet - the above comments are only based on my experience in the backoffice.
I hope it all makes sense - if not you know where to catch me so I can make it more clear :)
/Jan
Hey Jan,
Here are my thoughts from your feedback.
1. Yep totally agree would be nice in the prevalue editor (when configuring the data type) to select which fonts you are able to select in the dropdown.
2. Just seems an error from a copy paste issue on my part :-)
3. So this could be tied in with the 1st issue that you can select which variants are able to be choosen.
4. The values are a way to show what values the property editor is saving and not intended to be editable, so I will make them read only.
5. In regards to the selectors, the only issue is that how do I know which variant is for what selector. As you may want a css selector for the bold vairant to be h1 and the other normal variant to use another css selector, or am i missing something?
Cheers,
Warren :)
Hi Warren
Great to see you have released a bugfixed version today - I'm gonna test in a minute and report back in the bug post.
5: Nope seems like I was the one missing something when I posted :) You're right on that one. But still don't think it's ideal that this has to be done once the font and variants has been selected. Most regular editors have no clue about what CSS and selectors are so for them I think it would be a bit confusing.
But obviously we as frontend developers would need to know, which selectors to use. But perhaps the approach could be to configure the possible selectors during the datatype configuration.
I'm thinking that we can perhaps predefine the possible selectors in the configuration and setup a selector and a friendly text like
h1 - Heading 1
h2 - Heading 2
p - Paragraph
Where the nice text is shown as a checkbox in the editors view and then somehow coupled with one of the chosen fonts/variants...I think it's easier to explain using a drawing perhaps? :) Or can you make any sense of what I'm writing above?
/Jan
Hi Jan
Sorry no I don't follow so a diagram would be great please.
My thought of this property editor was for hobbyist sites and people starting with Umbraco, as I intend to put it into some starter kits I am building. So two different audiences, but thinking of a best way for the non technical is giving me some problems, as I am unsure on how to solve this.
Warren
Hi Warren
I'll try to wrap my head around it sometime and create a sketch. I know that it's intended for hobbyists and people starting with Umbraco but I can see some use cases where it would be nice to have a regular editor be able to modify a restricted range of fonts on a website...that's why I keep them in mind all the time.
But with the changes suggested above implemented it's still a rockstar package! :)
/Jan
is working on a reply...