Just in time for Chinese New Year (Friday), I decided to do a much-needed redesign of the Chinese Fridge website.
For those not familiar with Chinese Fridge, it’s a growing suite of Chinese learning game apps that I started a while back on weekends to help my friends who are teachers entertain their students while also providing reinforcement for vocabulary.
The old website was just a really basic implementation of Twitter Bootstrap that I threw together out of nowhere when the project was getting started. It was a good learning experience in the realm of responsive design, but this new version is much swankier.
While putting it together, I even picked up a few new tricks to use at work, which I recommended to my design colleague. One such resource is Font Awesome, which is a font that includes tons of useful icons instead of letters.
Why use font awesome? The reasons are many:
- They scale beautifully with CSS, unlike images — in fact, they scale “INFINITELY” which sounds mind-blowingly amazing, right?
- Instead of loading several separate images, you simply load one font file (kind of like an image sprite) — and less server calls = faster load time = nice SEO benefit as well
- I’ve seen images randomly disappear from our Amazon cloud hosting, which wouldn’t happen with this unless the single font file went missing — and even then you can actually load from an externally hosted location on a CDN that Font Awesome provides the URL for
- The designer I talked to expressed great joy at the idea of potentially not having to design very standard icon images anymore (common symbols representing things like download, delete, edit, copy, arrows, quizzes, videos, play buttons, etc.).
- What about fancy dropshadows and whatnot? Simply apply CSS styling, my friend
- Retina display ready
Drawbacks? Everything has drawbacks:
- The designer pointed out the CSS file size is 21.1kb so technically if you only use it for one or two icons on the page it might not provide much benefit in terms of speed, but the more images you can eliminate with it, the more utility you get from it
- If you need a fancier UI with a more distinct look, these may not have enough personality for you
- If that file path breaks, all of those icons break
Well, looks like I went on quite a tangent there. Hope it was interesting. Stay tuned as I’m starting to pick up the app project again and will release some new vocab sets soon.