Conjurer of internet magic

Over here at Virb I've been slogging away at the tedious process of turning the icons we use into a font set.  I'm a total noob at creating fonts, let alone icon fonts.  I did find a few good articles, but none of the articles went into the depth that I was looking for. I'm not going to try to go into that depth with this post, rather I'm going to toss out a few tips that will save you a lot of headache.  But first, a little backstory...

I created icon fonts in about the same workflow as the Making of Octicons article outlines.  This particular article, while helpful, left out a lot of things I wish it would have talked about.  Anyway, once I had my font all set up I implemented it with a similar technique as outlined by Chris Coyier.

At this point I thought that I was all done.  Everything looked great in Safari and Chrome.  I had to make some IE specific tweaks, but got that to look good.  I finally jumped over to Firefox for Mac AND Windows and found out that the font looked like a steaming pile of poo.

I started Googling for how to fix the blurry weirdness that Firefox was applying to the font.  I couldn't find anything that was helpful. My first instinct was to see what GitHub's font set looked like in Firefox.  I figured that they might have been able to figure things out.  I was surprised to find that their icons looked as much like a big (or rather small) blurry mess as mine did.

After waffling back and forth with just going back to images I figured out a few easy tweaks that solved pretty much every issue that I was having.  Without further ado, here's what you were reading this stupid blog post for...

First, text-align messes with aliasing.  I guess this one should have been obvious to me, since it has the potential of not aligning on full-pixels.

Second and not surprisingly, font-weight messes with aliasing.  I already knew this one, but I realized that it's very easy to forget to set font-weight: normal.

Lastly, and most importantly, decimal pixel positioning (eg. top: 1.7px) fixes nearly all the blurriness of icons in Firefox and doesn't affect other browsers.  You will obviously need need to use position: absolute/relative to take advantage of the positioning.  Here's a screenshot of the difference (you won't really see much of a difference if you view that on a retina display) a half pixel left offset makes in Firefox.

This summer has been a whirlwind of fun, learning, friends and trials. It was probably one of the most amazing, growing and encouraging times of my life. It would take this whole post to name all the people who have influenced and encouraged me this summer, you know who you are!

There was one theme that I learned about myself which has changed my outlook on how I function. To give you a bit of the back story I spent 2 months of this summer volunteering myself as a resource for the Cru Boston Ops Summer Project. One thing that everyone did was read the Strengths Finder book to get a better grasp of our strengths and how we could use them most effectively as a team. Here are my results in case you are interested.

Most of the strengths that are listed didn't surprise me. The one strength that surprised me was the Relator strength.  What became apparent really quick, especially when I got home, was how strong the Relator theme was in my life. This paragraph describing it says it all:

I wrote a post a week or so ago about why I think a lot of design, especially for mobile devices, mimic real life (Photorealistic Design).  This post caused some other thoughts to come into my mind about why I love physical books and why I cannot bring myself to read on the iPad or similar device.  As a result, I don't think visual familiarity is always enough for someone to make a transition to something new.  Here are some of those thoughts:

I sat down to read last night and pulled out a book that I had purchased.  This particular book had an extremely textured cover.  The pages of the book were thick and had "torn edges" along the non-binding side of the book.  As I felt this book I actually enjoyed all of these "features".  I even noticed that I smelled the book to see if it had some kind of paper smell.  It was a strange experience, but I realized that I enjoyed this sensory, tactile experience.

I've purchased other books in the past for not just the story, but the qualities of the cover and pages of the book.  I have a few leather bound classics and love the smell of the leather as I read.  I also have a linen bound  collection of Sherlock Holmes that if I had bought it new (which I didn't) it would have cost over $100.  I have this particular book because I like how it looked and felt, even though I could have purchased it for super cheap as a paperback.

I say all this, because there is a tactile, physical, sensory experience involved with a real book.  This experience almost excites me to just pick up a book and read even if I am not guaranteed that the book is any good.  The strange thing is that I don't enjoy the experience of reading on an electronic device. There is no new emotions everytime I open a new book.  It just looks and feels like another "book", or in my case another iBook on an iPad.  I'm not sure if this response is a learned response, or if it is core desire in my being.  I think it will be interesting to see what happens once generations of children grow up without ever touching a physical book.

Do you ever wonder why designers design photorealistic interfaces for Apps and websites?  I do, all the time actually.  Why does Reminders on the iPhone look like a real-life to-do list?  Why does the Notes app look like a pad of paper? As stupid as all this sounds I honestly think there is a good reason for this photorealistic design.  

The reason I believe for why there are so many photorealistic app designs on the iPhone is to "ease" people into new technology.  It makes sense to design something that is completely familiar to be used on an extremely unfamiliar device.  When you see an interface that looks like a real life interaction you make an assumption.  The assumption is that the interface will function exactly (or similarly) to the real life interaction.  If I see a book in iBooks that looks like a real book, I assume that I can "flip" pages like a real book.

I honestly think, and hope, that as time goes on and as touch devices become more prevalant, the UI for apps will stop mimicking the real world and will start taking on new and interesting user-interfaces and designs.

If you haven't read the article, There's No Speed Limit, you ought to.  It is pretty powerful and highlights something I've started to see in my own kids as Julie and I homeschool them.  I'd like to call my observation the power of desire.

This desire is what Sivers describes, not of Kimo, but of himself.  If you noticed the quote from Kimo, "...I tell them I can help, and tell them to show up at my studio at 9am if they're serious. Almost nobody ever does..."  This quotes reveals a desire from Sivers that very few people cashed in on.  Sivers' desire to skip 2 years of college was the drive that propelled the expediated learning process forward.

As Julie and I homeschool our children, creating this desire to learn is powerful stuff.  The hard part is evoking the necessary desire to learn.  An example of desire in action was us trying to get Ella to write stories for school.

Ella loves to talk, but she hates to write (go figure).  It was like pulling teeth to get her to write.  Many tears were shed by her and a lot of frustration experienced by us.  One day Julie decided to take a whole different approach to getting Ella to write.  Julie challenged Ella to check out books from the library, read them (which she loves doing) and then write something creative about what she learned from the books.  With this whole different approach we saw an immediate change in Ella's perspective.

I'm not 100% which part of this process changed Ella's perspective.  I have a suspicion that it was from giving her more creative control and less parental supervision.   Either way, she checked out tons of books, read for 2 days straight and then produced a beautiful hand-drawn creative story about what she learned.  What impressed us most is that she went over and above what she was supposed to do and learned way more than she was "required" to learn.  Desire is powerful a thing, especially when it comes to learning.

It's time to put an end to bad blog page navigation buttons.  Tumblr blogs are probably the worst offender of them all since I read 10 Tumblr blogs for every 1 "other" kind of blog.  You're probably wondering what I'm talking about, so let me explain.  There are two offenses that I see.  The first offense is not having labels on the pagination buttons.  The other offense is using "Next" and "Previous" on pagination buttons.

The Wrong Way

No Labels
Not having labels on your pagination buttons could possibly be the worst thing ever.  I know that if I'm on page #1 that I have one choice to click, but what about any other page?  I would have to guess which button I want to use, and this usually means having to look at the status bar to see if the pages are going up or down.

Next/Previous Buttons
This is not nearly as annoying as not having labels on your pagination buttons, but it can still be quite confusing.  Here again, once I've gone to older content pages I now lose the context for what "next" and "previous" mean.  Does "next" mean the next newer page or the next older page?  To make this more confusing, some sites I've seen swap the words around so that "previous" means older and "next" means newer. Unless you have a page numbers sandwhiched between these two buttons for context stop using this method!

The Right Way

Older/Newer Buttons
Using the words "older" and "newer" provide the right amount of context.  These words let the user know which way they want to go on the blog regardless of if they started on page 9 or page 1.