Shitchyeah!

No really.

Close your eyes. Now browse to your favorite website. If you’re brave, one you’ve built!

Did you cheat a little? OK, you may have held fast and followed my little fiat, using a key command to open a new tab, remembering where your cursor took focus, then typing in the URL. Then what? You peeked a bit and remembered that you could use the Tab key!

I don’t need no dang screen reader, you might have concluded. But now you’re thinking more like a person who must browse this way. You’re getting an understanding of the flow of your content and biting your knuckle at some of the order of the elements each Tab keypress takes you. Things are starting to make very little sense when you put them all together. You try to suppress the memories of all the sites you may have plagued up to this moment. Oh the Duh-Rama! 

Now take a deep breath and get over it. Quickly. It’s not your fault. You can’t know what you didn’t know before, right? There is so much you can do, and all it takes is thoughtfulness.

Order in the code! Order in the code! Simply writing your code while thinking about how you can best receive the available content makes all the difference. To put it plainly: makes order difference the all. It’s simple, but it’s the most important thing. I repeat! Order in the code!

Get in touch with the accessibility features on the devices you use every day. You may be surprised by the features available to help you. I use the VoiceOver feature in iOS, for instance, as well as the speech capabilities in OS X.

I’ve taken advantage of text-to-speech since I discovered it in the ’90s. I’m grateful for the transformation I’ve experienced. I took advantage of it before I got married to test for my driver’s license—for the first time since 1995. I downloaded the latest driver’s manual and read through it. I fell asleep a couple times, but eventually made it to the end. The day before the test, I committed four hours to VoiceOver, reading the full—from end-to-end—driver’s manual. Did using assistive technology slow me down? Hell mutha-effin no. I passed my written test with a 100% and my driver’s with a 96%. I ended up driving a Mustang GT on my honeymoon.

Get familiar with WAI-ARIA. If you’re using a browser that has implemented screen reading or text-to-speech technology according to these standards, ARIA roles can make your content sing by announcing changes that can only be seen.

During an interview with a wonderful couple, I had the opportunity to experience how the wife used assistive technology. I got advice straight from the source, and it set my mind aflame. The most significant tidbit they shared with me was the impact changes to content had on how they took in information. In most cases, they explained, AJAX implementations were the issue. Navigation menus were a whole other thing, because everyone solves them a different way.

The experience of not properly handling changing content for assistive technology can mean that you start from the top of the page and Tab back to where you were, or the technology simply focuses on the next thing on the page. But it’s the previous container that has the important information, like an order confirmation.

The list goes on. It’s rough. But a gentle use of ARIA can make a big difference. Just don’t flip out and think that this is going to answer everything. Reserve ARIA to resolve the issues you can’t solve by well-formed, semantic markup.

Finally, test and pay attention to what people share with you! If you give a crap about how people experience life in general, and not just how they experience your content, make that change.

Remember Webdings? Hell, remember Zapf Dingbats? Familiar with the Unicode Standard? Do you still find icons in your fonts to be so damn queer? Well I think you cray cray and I’m about to tell you why.

History

1977 – Mr Hermann Zapf and the International Typeface Corporation were obviously ahead of their time creating a collection of symbols and such in one typeface.

1985 – Zapf Dingbats makes its big debut when it was widely distributed in the Apple LaserWriter as a built in PostScript font.

1987 – Unicode is an idea by a few nerdy guys from Xerox and Apple.

1991 – The Unicode Standard is born!

Unicode

If you’re going to weigh in, please read the Core Specifications. I admit I had to go over the core specifications doc a few times, focusing on section 2.8 unicode allocation, before I really started to pick up what was being thrown down.

At first I interpreted the Private Use Area as the place to put all my custom glyphs, I was oh so wrong because this is for shared systems like emoji from iOS device to iOS device. So I kept reading the section, but things just weren’t meshing too well. I thought, why would I put my icons in a place that will never be defined in the standard when there are great code points that have been defined? Most of us are using home icons, arrows and such. The definition is there, we just want to use different artwork. So BOOM! I decided to assign unicode points that are as equal as possible to what the art represents.

Fallbacks

Some folks like to jibber jabber about how Opera mini just can’t hang and I have some great news. It can and it does. Without losing focus on ~99.3% of the rest of the world, the problem with Opera mini is its inconsistency in that it relies on your devices default font, not its own. So the font it picks up might not have the glyph you wanted as a fallback. Although if you’re considerate about your choices and test on the devices and browsers you find important you can avoid the non-rendering issue. So while you’re flipping out about icons on Opera mini, I say to you kind reader, how about those accessibility features on Opera mini …

On BrowserStack I had ran a webpage on all of the 46 mobile device emulators and only came out with one issue and one case in which the solution safely fellback to unicode glyphs. LG Nexus running Android 4.2 didn’t display the second glyph in the custom font and iPhone 3GS running iOS 3.0 fellback to using unicode glyphs, which are all present. Not a single test reveled to me a Special Character (commonly known as a box).

I went further on BrowserStack and checked out the desktop browsers to no surprise, no IE6 and IE7 support, but with Progressive Enhancement in mind, because these browsers do not support CSS 2.1, sufficiently or at all, the user will see no icon. FireFox 3.0 experienced the unicode fallback, but again not a single test reveled to me a Special Character.

Artwork

Do you think you should include trademarked logos or artwork in your font? No sir, or miss, please do not! An icon is not a logo. There’s your slab of SVG vs background image to squabble over. I’ll save that for another day, or maybe touch on it a little in the next section.

Why Not SVG

Why not SVG indeed. It’s a fantastic format, there’s an animation API that SVG can take advantage of and all sorts of great stuff. A few reasons SVG is not yet an option for me is that it still does not have a widely enough adopted level of support to be used as background images and you can’t do much in the way of CSS with em. Finally, fonts containing icons are more similar to a sprite/atlas sheet of icons than individual SVG images.

Browsers are all sorts of mishmash about SVG about when and where you can put it. That’s why some folks who are more of the fonts-are-made-for-letters people decided to make client side tools that first qualify your browser before showing you either SVG or raster formats as background images. If that’s your bag, go for it, but I like my solutions to not require JavaScript, or create additional http requests with JS disabled, let alone require it to show me what my browser is perfectly capable of already.

Hot Tips

Don’t copy the character straight out of a stinkin character map or webpage and paste it in your code and call it good. That’s gonna get you nuthin! Icons are non-essential they do not need to be in the content. Don’t get me started.

Avoid the Private Use Area for your web font icon. If you’re making an intranet/software/operating systems within a controlled environment totally get all over that PUA. If you’re making a website that is going to be external and used by anyone on any device, use equally meaningful code points in the unicode standard.

Use pseudo elements :before and :after and insert your glyph using the content property for some serious style flexibility.

Control display by setting the element to block. Keeps things consistent and in control.

Use a solution that works best for you!

In Conclusion

What I find interesting that in the name of Opera mini there are “solutions” being made. This is a browser that people are intentionally using to decrease their bandwidth and essentially bills, while those out there trying to make the SVG juggle are actually increasing the bandwidth usage serving the alternative. Using @font-face and thoughtful unicode code points you can offer a bandwidth friendly kind of experience to your users and look awesome with CSS when supported!

Please take a look at my FaceLift demo for code details and my method on the whole thang, and my Unicode Test Tool (crude and incomplete) to give your device a shot. Thank you!

Let’s talk about food and genetics. Two subjects I’ve had lifelong experience with and so have you!

If you know me, this is needless to say, but I was an odd kid compared to most. I loved vegetables like brussels sprouts, okra, spinach, and tomatoes. Although I think back and I had a lot of positively influential experiences with food. At one point my Ma had a garden in the backyard and grew all kinds of things out there. I was given the gift of being able to understand the connection between insects, decay, soil, weather, seasons, seeds, the food that comes from them, and how seeds come from food again. Thanks Ma!

Genetics has always been fascinating to me since I found out what genes were. Fascination does not mean expert and I do not claim to understand anything about where we currently are with them. We are getting really good at mapping the data and finding differences and correlations, it’s true. I’m also sure we are getting “better” at splicing and modifying genes, but we don’t have as many years behind us understanding the long term effects of the changes made compared to how long it took a tomato to even become the tomatoes we know and love today.

I compare genetics to application development, except in application development we invented all of the parts to be able to make programs. In genetics I find that because we didn’t make all of the parts we are more likely to break the code. I’ve never found a program that didn’t have some kind of unexpected behavior. Since we are inherently error prone and we do not have the ability to handle errors in modified genetics, I don’t think it’s safe, or if it ever will be in my lifetime.

When it comes to government. It astounds me that America will move like molasses on so many things, but we are pushing label free GMO down everyone’s hatch. The Obama Administration is cracking the whip at the EU for not defining why they will not accept GMO, basically saying that they are just scared. The EU is not accepting GMO imports on the basis that they are not satisfied with the data, or the results we are providing. If you haven’t heard about the Supreme Court case of 75 year old soybean farmer Vernon Bowman vs Monsanto for patent infringement I wouldn’t be surprised. Just with these two issues alone I’m just not super impressed with our government on the issues farmers are facing, the education of food and understanding the effects of lab-coat-splice-dice GMO. Finding a non-GMO seed in this country is like finding a pit of diamonds, which is the home of a Unicorn made of caramel that poops non-GMO seeds.

Genes have already perfected genetics. When genetics no longer fit within the current system, the sequence is dropped. So basically if our food can’t fit within the system we are putting it in. Maybe we need to think about the system instead of forcing it, or it’s going to get dropped.