FontIcons

a workflow inSided story

Who I am?

FrontEnd Developer ~ at inSided

Passioned Developer ~ in Life

OpenSource Contributor ~ in Free Time

This is not a talk about:

• Iconography
• Fonts
• and not, not even Web Fonts ... not generally ...

Web Font Icons

and Why you should start to use it!

(if you don't yet)

• They are scalable (so no x2 <img> for Retina Display)
• They are mobile compatible
• They are compatible with IE 7 >
• They can change color
• Implicit traffic gain on reducing http requests
• ... And of course a lot of open (or free) resources
• But most important for us, they can be generated

But how to generate Web Fonts?

• IcoMoon
• FontCustom
• Fontello

A bit of comparison:

...A bit of inSided Workflow...

...A bit more in depth...

So I made a tool FontFabrique

actually, I am still working on it. :-P

... And I ask around to gather inspiration in how to build it...

I went to the designer, and I asked about using git...

... and I started to look for alternatives ...

versioning with UI and OS integration?

Oh wait... already exist, Why not Dropbox?

So I went to the Programmer.

and when I tell to use Dropbox in production:

No Serious? Why All this?

"Small problems in big scale, are not so small"

"Boyscouting, is continous improving" ~ an inSided Core Value

And I think:

"Automated Tools, without additional ui/cli, have no learning curve"

 :  =  : 

but for practical people:

• Small kb, we have only what we need
• Save up from 15 to 20min to generate fonts, everytime an icon is created, updated, deleted
• Code convention for developers, we can work with placeholders. So no waiting for fonts. ( Everybody is happy )
• We supplement communication, and file transfer, from 15 to 20 min; with procedure.
• Git and assets, cause conflicts. Conflicts cause time loss, from 10min to 15min.
  (building instr. !== builded file )

Demo

The Developer is happy, he can use his favorite version tool, without any price in setup.

if( env === 'production'){
  <link href="<% font_url %>/myFontProject/10/icon.css" rel="stylesheet" />
}else if( env === 'staging' ) {
  <link href="<% font_url %>/myFontProject/11/icon.css" rel="stylesheet" /
} else {
  <link href="<% font_url %>/myFontProject/latest/icon.css" rel="stylesheet" /
}

And the Designer is happy too:

Not needed to:

• Learn, an additional tool
• Send icons to each developer
• ... or add them to a ticket

• No pressure for delivering an icon, since they don't block the workflow anymore.
  Important in case the customer needs to approve
  
  
• Only one communication line to push the updated icons set to staging or production.

Conclusion

We split the responsibility and as a result we increase the speed and the quality

What next?

Implementing, deliver documentation and naming rule.

and add some features...

• Fonts Ligature and Spacing Configuration
• UTF Fall back (Gliphys)
• Sub folders for categories
• ...
• SpriteFabrique not just vectors, we pixel too...

Thanks

• to my friend Max, for contributing.
• to my colleagues, to be critic and constructive.
• to the OpenSource resources like: IcoMoon, FontCustom, Fontello.
• But most important, thanks for coming .

Let's keep in touch!

@ideabile - mauro@insided.nl

Questions?