Since we had the luxury of having several people in the office, Trevor, Juliusz, Rob Moen, Ed Sanders, Shahyar, May, Monte and I sat down to talk about the problem we currently have of having no standard way to create icons. Here is my write up of this meeting, again, if you attended please add/correct me on anything and if you were not please ask for clarification where needed.
Currently we have two modes of creating icons in MediaWiki 1) Using a font 2) Using SVGs with PNG fallbacks and the markup varies depending on what extension you look at.
We discussed both approaches and advantages and disadvantages of each. One of the major disadvantages of the WikiFont is the additional HTTP request it creates to download the font and cannot be embedded in the stylesheet using data uris like SVGs can (due to URL size restrictions).
One of the major advantages of WikiFont is you can design a grayscale icon, and style it using font colour. Shahyar was happy to move Flow to using SVG based fonts if we could build grayscale SVGs and change their colours using ResourceLoader. One concrete example is when you have an icon used in a constructive anchor. The icon needs to be green, but when hovered over a lighter green.
Another advantage brought up by May was that currently she finds it much easier to build icons in this way, and that having to maintain separate coloured versions of the SVGs is a pain point to her.
We decided that we should push towards using SVGs that can be built into fonts for the purpose of the app.
As next steps 1) Monte to explore using SVGs in the Wikipedia apps. He will create font from SVGs. He will work with May to ensure her workflow is as easy as before.
2) Trevor is going to look into how we can automatically generate different colour versions of SVGs and automatically create PNGs from them.
3) I am going to aim to agree on a standard icon HTML markup for mediawiki ui. We still have an issue with the fact that everyone is using different HTML markup to create icons. After reviewing all our current approaches [1] it was clear that we were relatively closely aligned and that it simply is a case of agreeing on class names.
We aim to get all the above done by Sept 15th, 2014 so please poke us on the mailing list if you haven't had a follow up then.
Full disorganised notes can be found here [2].
[1] https://www.mediawiki.org/wiki/Icon_standardisation [2] http://etherpad.wikimedia.org/p/Icon_standardisation
Just to note - it is only the iOS app that uses the font. The android one has always just used SVGs.
I'm going to add that besides color, which seems to be the main focus here, that there are several other design issues I hope the solution we choose can offer us. That includes (mentioned http://etherpad.wikimedia.org/p/Icon_standardisation at bottom of etherpad http://etherpad.wikimedia.org/p/Icon_standardisation):
Looking great visually
- Icons align with text (on the baseline, or below, or above. It differs from icon to icons)
- Icons align vertically and horizontally with other icons
- Icon sizes are proportionate to each other
Easy to manipulate and push icon changes
- No extra workflows apart from changing SVG files
- No need to export different color files after making a slight improvement to icon
Easy to ship and communicate changes to other teams
- No need to dig emails
- Easy to track latest versions. No confusion
- No extra work for other teams to change icons in their own team applications when we make icon improvements
Consistency in application
- Easy for everyone to know which icon to use without duplicating different icons for same usage
Monte has shown me the script that he's created and I've got to say they are pretty impressive and it ticks off alot of these issues. I'll continue to work with him and the rest towards a solution that better streamline engineering and design workflows while giving us consistently great results.
mm
On Wed, Aug 27, 2014 at 12:17 PM, Yuvi Panda yuvipanda@gmail.com wrote:
Just to note - it is only the iOS app that uses the font. The android one has always just used SVGs.
-- Yuvi Panda T http://yuvi.in/blog
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
- I am going to aim to agree on a standard icon HTML markup for
mediawiki ui. We still have an issue with the fact that everyone is using different HTML markup to create icons. After reviewing all our current approaches [1] it was clear that we were relatively closely aligned and that it simply is a case of agreeing on class names.
As an update I have made a proposal based on a patch from the Growth team here [1] A picture useless makes things clearer so I did a sketch [2]. It seems like this would work for both Flow and MobileFrontend so am waiting to hear back some feedback from other teams. Essentially we'd have a base class mw-ui-icon and various modifier classes that supply the icon image and the icon position.
[1] https://gerrit.wikimedia.org/r/#/c/139368/ [2] http://i.imgur.com/bieQ9zn.jpg
On Wed, Aug 27, 2014 at 2:56 PM, Jon Robson jrobson@wikimedia.org wrote:
One of the major advantages of WikiFont is you can design a grayscale icon, and style it using font colour. Shahyar was happy to move Flow to using SVG based fonts if we could build grayscale SVGs and change their colours using ResourceLoader.
FWIW, this is what OLPC did for Sugar, a decade ago, using stroke_color and fill_color entities in the SVG: http://wiki.laptop.org/go/Making_Sugar_icons
This is a slightly more-flexible approach if you want to move beyond single-color icons (for which grunticon seems to be adequate). --scott
- Monte to explore using SVGs in the Wikipedia apps. He will create
font from SVGs. He will work with May to ensure her workflow is as easy as before.
Monte any updates on this?
- Trevor is going to look into how we can automatically generate
different colour versions of SVGs and automatically create PNGs from them.
Trevor any updates?
- I am going to aim to agree on a standard icon HTML markup for
mediawiki ui. We still have an issue with the fact that everyone is using different HTML markup to create icons. After reviewing all our current approaches [1] it was clear that we were relatively closely aligned and that it simply is a case of agreeing on class names.
I'm still working on this. Sam Smith has now suggested a mixin based approach [1] which I am not too comfortable with as I think it works against standardisation by allowing far too much flexibility and I don't see how it will map to us using OOJS for it in future.
A class based approach [2] that follows the http://i.imgur.com/bieQ9zn.jpg
Please chime in on those patches - I'm super keen to make progress on this to get our icon generation mechanism under control.
[1] https://gerrit.wikimedia.org/r/139368 [2] https://gerrit.wikimedia.org/r/158632