@font-face Embedding

@font-face is a relatively new CSS technique that allows site authors to choose their own fonts. And thankfully it works in almost all of the major browsers, including Internet Explorer.

The biggest problem with @font-face is you can’t (legally) embed any font you want. The license must allow web embedding. Right now most major type foundries do not allow their fonts to be embedded, or if they do it requires a separate license.

So for the most part, you’re going to be left with open-source and other freely-licensed typefaces. Here are a couple decent sources:

• Font Squirrel
• The League of Moveable Type

For @font-face to work across browsers, at minimum you need a EOT font (for Internet Explorer) and either a OTF or TTF font (for Safari 3.1+, Firefox 3.5+, Opera 10+, and Chrome 4). If you only have one version of the font, the Font Squirrel @font-face Generator is an excellent way to get the required formats.

There are a lot of ways to implement @font-face in the CSS. I generally recommend the Paul Irish method:

@font-face {
font-family: 'Name of the Font';
src: url('path/to/FontName.eot');
src: local('Font Name'), local('FontName'),
     url('path/to/FontName.otf') format('opentype'); }

A few notes here:

1. “Name of the Font” can be whatever you want.
2. There are two local() references: one is for the full name of the font, and one is for the Postscript name.
3. If you use a TTF instead of a OTF, change format(‘opentype’) to format(‘truetype’)

From there, all you just have to do is add it to your font and font-family declarations:

body { font-family: "Name of the Font", Arial, Helvetica, sans-serif; }

Typekit

Another option is Typekit, a subscription service that hosts fonts for you. It’s very easy to setup, and provides access to a lot of typefaces that aren’t otherwise available for @font-face embedding.

Unfortunately, the plans are based on bandwidth, so using Typekit could get fairly expensive for a heavily trafficked site. Relying on an external service may be a problem as well.

I should note that both Typekit and @font-face embedding carry a couple caveats:

1. The font will look different on different browsers and operating systems. Typekit makes this easy to visualize by offering a “Browser Samples” tab for all of their fonts.

2. If the browser hasn’t quite downloaded the font yet, it’ll either first render the text with the closest fallback, and re-render when it finishes, or if it’s a Webkit browser, it won’t render the text at all until the font has loaded.

Add More Local Fonts

If font embedding isn’t quite your cup of tea, there is another fairly easy way to improve your site typography: longer font stacks. There are a lot of fonts that come pre-installed with certain operating systems or software packages, and there’s very little reason not to employ them. For example, you might have a serif stack like this:

font-family: Cambria, Palatino, "Palatino Linotype", Georgia, "Times New Roman", Times, serif;

Cambria is part of the new Microsoft Office suite, Palatino is pre-installed on Macs, Palatino Linotype is pre-installed on Windows. This provides a richer-typographic experience for most of your visitors, and degrades gracefully. Further reading:

• 24 Ways: Increase Your Font Stacks With Font Matrix
• Unit Verse: Better CSS Font Stacks

Other Options

• Sifr - Uses Flash to replace text with a custom font. Mostly useful for display type.
• Cufon - Uses Javascript to render text in a custom font. This method has the same licensing issues that @font-face embedding does.

“One week to #THTH (T Hawk Twitter Hunt). Hidden treasures, cryptic clues, one big event. Follow the fun here in Twittopia.”

As promised, starting the next week, multiple times throughout the day, tweets from Tony would come out naming the city, and a cryptic clue about where the hidden package could be found. As the week moved closer towards Friday, tony tweeted several videos with more clues as to where the #THTH demo would be. On Thursday afternoon, he posted a final twitvid:

Over 1500 people were at Cosmo Skatepark on Saturday. Considering that Columbia has a modest population of 100,000, that the demo location was not announced until Thursday afternoon, AND that it was only announced on twitter, that is a sizable turnout. And while getting to see my childhood hero up close was certainly memorable by itself, the part that really caught my attention was this tweet from tony:

Tony repeated this same message throughout the demo. Even more interesting is that he set up a very easy system to donate: simply text ‘RIDE’ to the number 90999. How amazing is that?! Engage a popluation of almost 2 million followers, lead them on a cryptic scavenger hunt for a week, and at the end, ask them to very easily donate a small amount of money to a worthy cause. Unfortunately, I do not know how much of a spike the Tony Hawk Foundation saw on that Saturday (I’m trying to find out and will update this post when I do), but I know it convinced me to donate.

Asked why he decided to sponsor these Twitter Hunts, he replied that he felt it gave him “…direct, real-time, access to fans,” “…way more intimate and interactive” and that he “…simply wanted to give someting back to the fans and create an exciting event, even if you were only a spectator.” Judging by the number of responses on twitter, during the event, it was hugely successful.

Now what can we, as higher ed, learn from Tony’s experiment? Fans want to be engaged. They want to feel as if they are a part of something. Sure, we don’t necessarily have the clout or following that Tony Hawk has (I don’t think any of us has anywhere close to 2 million followers), but we all have dedicated fans of our schools. People that feel that they are a part of something, have more dedication and loyalty. If we can create intimate interactions with them, and make them feel as if they are a part of our school, there is a good chance that we can create armies of evangelist for our institutions.

Attack happens like this:

1. Attacker has access to your laptop for 1 to 2 minutes (like a maid at a hotel)

2. Attacker boots laptop from a USB stick and infects the system with the Evil Maid Sniffer

3. Victim returns to the hotel room, boots laptop, enters in disk encryption password (that is now sniffed by Evil Maid)

4. Victim leaves laptop in hotel room again

5. Attacker can now boot laptop again off the USB stick and acquire the sniffed passphrase.

At this point the attacker can either steal the laptop altogether, or boot it up and steal specific information.

So, what can you, as an end user, do to alleviate this attack? Short of never leaving the laptop physically unprotected (i.e. place it in a safe when you leave the room), not much. I know that sounds pessimistic, but the harsh reality is that whenever a device leaves your hands, it has become insecure. Assume, that even with encryption, you are still at risk.

(via Invisible Things)

Have you ever spent a lot of time getting the color in your image perfect only to have it go flat and dull when it was exported to the Web and viewed in a browser?

The problem is with color profiles and here’s how to get rid of them.

Web browsers do not pay attention to color profiles by default (the exception is Safari), so you have to tone for the Web or you’ll get a color shift when you go from Photoshop to a Web browser making all your hard work toning moot.

Here’s how you set up Photoshop to tone for Web:

• In Photoshop, with your image open, make sure View / Proof Setup / Monitor RGB is checked. (See below for more info on this.)

• Then look to see if the proofing environment is active by making sure that View / Proof Colors is checked.

Now you are working with an image as it will look in a browser.

Save for Web

To save the images for Web, go to File / Save for Web & Devices and a new window will pop up.

• Click the 2-up tab to see the original and the Web version side-by-side.

• In the Optimize Menu (The arrow to the right of Preset.) make sure that Convert to sRGB is unchecked.
• Under Presets, select your file format and quality settings.
• If ICC is checked, uncheck it.

• When done, click Save at the top right.

The resulting image will look the same in a Web browser as it did in Photoshop.

More technical stuff

There is a difference in brightness between Macs and PCs. PCs have a gamma of 2.2 and Macs use a gamma of 1.8. This means that images on a Mac appear to be a little bit lighter than how they appear on a PC. When you selected the Proof Setup of Monitor RGB above, you essentially chose to split the difference between the PC and Mac gamma to tone at a 2.0 gamma.

With the release of Mac OS 10.6, Macs now use the 2.2 gamma. As time goes by, fewer users on Macs will have the 1.8 gamma and you can change Proof Setup to Windows RGB. Depending on what your analytics say about your Web site’s audience, you may be able to tone using Windows RGB now.

If you’re as weird as me and find this stuff fascinating, you can learn even more with this Web browser color management tutorial.

Points we kept in mind

With as much planning as we could muster on such short notice we moved forward. Here are a few of the guidelines we started with:

• Standing out - I designed the stacked MU logo to fit within the Facebook layout, but also stand out and make it obvious we were the official Mizzou page. There are quite a few Mizzou imposters out there and so we used the term ‘official’ in the box of ambiguity to try and make it clear as well as reporting them to Facebook.

• Posting schedule - This was a concern of mine starting out. We wanted to post high-quality, high-level, campus-wide stories on our wall that would generate buzz for the page and drive people there; and ultimately to our campus sites. We made sure to front load the page with a few nice, recent stories to make it seem like we weren’t just getting started. As for the schedule, we have decided to have one story post and one ‘Photo of the Day’ post per day. That way we’re not inundating users and hogging up their feeds. We’re still trying to hone when we’ll post each one. From yesterday’s traffic it seemed like more users were coming to the site in the early afternoon; that’s when we saw a spike in new fans. Maybe we’ll post one in the late morning, one in the early afternoon? This is where we’re learning.

• Discussion boards - one goal we have is to not make the page a ‘we feed you’ endeavor. We would like it to become a place where the discussion is a two-way street. We’ve added a few Admission-y discussion boards and expect to put more as we go. We’re also open to posting statuses that get people to come and comment, but again, we’re concerned about flooding news feeds. Does anybody have examples of appropriate usage in this regard?

Questions for you

There’s much more to come. We’re committed to making this work. Obviously, it’s not the end-all-be-all of our web presence but if we’re going to do it we want to do it right, and be the best we can be at it. We want to know from you:

• Events- We’d like to add events soon, pulling the most important events from the campus. I personally would like to take advantage of the best analytics that exist for Facebook so I’m open to that. What are some nice analytics sites that work for Facebook?

• Drivers - We’re driving people there from the homepage audience gateways and I’m looking forward to looking at the numbers on that. Our office staff has been promoting the page from our personal Twitter accounts, as well as from IM and word-of-mouth and e-mail. What other ways can you think of?

• More, more more - I’m also looking forward to taking advantage of the Static FBML application where we can. It seems like that’s the best way to personalize the page and really stand out, which we’re really trying to do.

Join us!

We have nearly 300 users in just over 24 hours, so we’re pleased. If you haven’t already, join us on Facebook. Even if you aren’t an alum we’d love to have you take part in the discussion.

That quote, from the Team Direction Web site, pretty much sums up my latest breakthrough as project manager for Web Communications. But how did I get there?

It began with Basecamp

Our department has been using Basecamp since before I worked here. It’s a great online tool for managing project tasks because it allows everyone on the team to see to-do lists across multiple projects and to add, delete and mark complete those to-do items as needed. You can give team members access to as little or as much as needed and there are no syncing or hosting issues since it is Web-based.

Monthly charge or not, we weren’t ready to give up our Basecamp account. But that doesn’t mean it’s perfect. While Basecamp allows you to assign milestones within a project, it doesn’t have the ability to apply complex dependencies among those milestones. (You know, task B can’t start until task A finishes, no matter how late task A runs, and so on…) Yes, if you move one, Basecamp can move all subsequent milestones back by the same number of days, but this is far too simplistic for the level of complexity in a multi-person, multi-project office.

Enter MS Project

Gantt charts are my friend. I’m a visual person, and I really like being able to see a project (or several projects, in my case) laid out in front of me on a timeline— no imagination required. In a perfect world, our department would switch over to Project and take advantage of its collaboration features. But the problem with that is that we’d need the more expensive MS Project Server and the Web Access add-on. What’s more, we would have to purchase 12 licenses and somehow get our IT department to expedite their process for evaluating software and providing support. Not likely.

So, I compromised and decided that we really only need one copy of MS Project Standard for our department. The least expensive solution in the Project family of products.
I ‘d make my Gantt charts and print them for my office wall from time to time so that others could check in to see how things were shaping up. And then I could take some time to transpose those dates and to-dos into Basecamp. It’s not ideal, but it’s a cost-effective compromise.

But what if Project could sync with Basecamp? That’d boost my productivity like none other, right?

Enter the IntelliGantt Add In for MS Project

The IntelliGantt Add In for MS Project seems to have been developed with MS SharePoint in mind, but it does sync with Basecamp. Here’s a screencast about integrating Project and Basecamp. I struggled a bit at first, but once I enabled Basecamp’s API, it worked like a charm. (You need to be the account owner, not just an administrator, to do this.) I’m still working out the kinks, like how to set up MS Project so that milestones and to-do items appear correctly in Basecamp, but it’s already saving me mucho time.

As it stands now, all of the line items from MS Project show up in Basecamp as one to-do list. I still need to assign responsibility for the task, but I’m guessing there’s away to automate this that I haven’t found yet. I also need to manually sort to-dos into separate lists for easier reading in Basecamp, but that’s not too time consuming with the drag and drop feature.

As with anything, the longer I use the software, the more adept I’ll become. I’m definitely open to advice if anyone else has a similar set-up, though!

Smashing Magazine - a great web resource for developers - has provided an aggregate list of web glossaries for just this problem. Categories include typography, usability, marketing, CSS and XHTML and more. It might not make a writer an expert on analytics, but it is a great way to get started; or at least give someone some working knowledge on a subject.

So if you’re having a problem trying to explain what resolution is to a client or what the heck wysiwyg means, check out this helpful listing:

Useful Glossaries For Web Designers and Developers

Not quite.

Compatibility in IE8

In a post on the IEBlog, Just The Facts: Recap of Compatibility View, IE8’s compatibility is explained. Be sure to take some notes because simple it ain’t. Yes, IE8 runs in standards mode by default, but the new “Compatibility View” feature and IE8 site blacklist start making things difficult.

Since the IEBlog is about as clear as mud, I found an alternative explanation on the topic, The IE8 Blacklist minefield. I suggest giving it a read. It clearly explains the situation and what Web developers have to do about it.

What are the issues with IE8?

To sum it up quickly, here are the things you should know about IE8 and compatibility:

• IE8 renders in standards mode by default unless
  • Your site is on the IE8 blacklist
  • A user opts to run your site in Compatibly View
• Compatibly View does not render the same as IE7, so you have a new browser to test in (yay!)
• You can select which mode the browser renders in by using a versioning meta tag or HTTP header
• If you use select a rendering mode, your site visitor will not have the option to use Compatibly View

So basically, I have to opt-in to standards mode?

Yup. The IE8 blacklist basically forces you to pick a rendering mode or else Microsoft or your users will pick for you. That’s the only way a developer will have control over how their content is rendered.

Start learning those meta tags and start testing.