There are subtle differences between the way different browsers on different operating systems render the exact same font. While it may not seem like a big deal, it can create big headaches as designers need to choose how to keep their design consistent accross platforms. Since the variation between what browser and operating system a user only becomes greater, I can only see this becoming a larger issue as more people use the different browsers.

While I’m not going to document the problem extensively here, as Chris Coyier over at CSS Tricks documented the rendering differences quite well and a quick look at my own website shows some of the symptoms, I would like to suggest a solution or two as I plan to implement them on my own site.

The above shows the subtle differences on my own site when I only change OS. While not an incredible change, those 3 or 4 pixels are terribly annoying every time I see them on my Windows box.

The Fix
Luckily, that specific problem I think I will be able to fix with a relatively small snippet of jQuery JS or PHP magic. While it will rely on the user-agent, which can easily be spoofed, it should be able to fix the issue for the majority of users. I’ll basically just be grabbing the user-agent OS / Browser, and inject some CSS into the page to adjust the padding / margins of whatever elements it affects. However, I don’t see this as a solution.

The Solution
My fix will be very site specific even though the principle idea can be applied to any site. A solution should fix it in one swoop, but I do not see that happening for some time. I think the only effective way to solve this issue would be to introduce a “Web Font Rendering Engine” that would have to be voluntarily introduced into each browser. Although solving the problem, this is less than ideal considering it would require a browser upgrade and eight years later people are still using IE 6.

After a bit of search for cute poses for both Hoops and Yoyo, I created these two vectors that I’m making available for download. Please note that as Hoops and Yoyo are not my IP, you definitely should not be using the imagery for commercial stuff. I’m just making it available for anyone out there that wants to make something with a bit of Hoops and Yoyo flair. If you make something you want to share, come back and post it in the comments!

Download Hoops and Yoyo.

The concept for the site revolved around a thought cloud to symbolize the free thinking and intellectual goals of the organization as requested by the coordinators Dr. Tapia and Dr. Ocker. The site’s minimalist design lays on top of a custom CMS system to make maintenance and updates to the site such as adding pictures, students, or forms easy for both myself and the two professors. I’ve had a great time working with both professors in reasarch and in the design process of this website. Below I’ve posted a few screen shots from the website along with a little tidbit about each.

The above page is used by the organization to list upcoming events as well as post pictures and information about events past.

The home page of the site, that also serves as the about page, draws information from the MySQL database that can be updated from the administration panel. There site administrators can manage page revisions and drafts to the site’s about page.

Just like the old engineer joke:

‘There was an engineer who had an exceptional gift for fixing all things mechanical. After serving his company loyally for over 30 years, he happily retired. Several years later the company contacted him regarding a seemingly impossible problem they were having with one of their multi-million dollar machines.

They had tried everything and everyone else to get the machine to work but to no avail. In desperation, they called on the retired engineer who has solved so many of their problems in the past.

The engineer reluctantly took the challenge. He spent a day studying the huge machine. At the end of the day, he marked a small “x” in chalk on a particular component of the machine and stated, “This is where your problem is”. The part was replaced and the machine worked perfectly again. The company received a bill for $50,000 from the engineer for this service. They demanded an itemized accounting of his charges.

The engineer responded briefly:

* One chalk mark $1
* Knowing where to put it $49,999′

Web designers, like engineers, are paid for their intangible expertise on the subject, something hard for non-experts to gauge or comprehend.

I basically started the design for my new site (which should be coming up soon, btw) with the animation and built it from that. The small snippet of a picture of my screen is a bit of a teaser for the new site, and you might notice that I’m rebranding the site to my own name. While I enjoy the Bit by Bit name and the whole duality of it and stuffs, I felt this makes more sense as a personal portfolio website. Hopefully Google agrees, and I will no longer see my friend, Andy Mangold, ranked higher than me for my own name.

Despite digressing into a promotion of my redesign, I would like to point out some of what I consider to be the finer uses of Flash. It is most definitely a powerful tool, and likely something that can impress visitors, but it can also be overwhelming and distracting. By using Flash to introduce movement to your site in a sublte way, you can maintain a clean aesthetic and add just a little bit more to the site. It also allows the Flash to degrade nicely to a static image and continue to look great for all those (few remaining these days) that don’t have Flash installed.

I don’t think anything turns me off more when I visit a website on my iPhone to see half the design missing because I don’t have Flash installed.

Previously, browsers would often group the navigation elements with tabs and have the website floating below or have the website grouped in a tab with the navigation elements floating above. This shift marks a change in UI that I think just plain makes sense. Hopefully Firefox and IE aren’t far to follow in this trend.

This project has been one of my favorite projects thus far at Penn State and I think it really highlights the situation based learning that a lot of the IST classes use. Less exams in the major is very relieving, yet it still puts on the pressure in a situation that more realistically resembles my future career. I will have teammates and I will be able to seek external resources. Projects will be a growing and evolving process, rather than some assignment that gets completed and dropped from thought.

Other than highlighting the IST program’s teaching technique, I also feel that the project shows a lot of the technologies I have used over the past couple years and ways I have used them. The project contained standards compliant XHTML and CSS for the coding of the site. Working in Photoshop to contribute to the design. Discussing usability and interface design with teammates. Designing SQL databases and determining the proper relationships between entities. Adding jQuery and Ajax to increase usability and decrease page refreshes.

Despite completing this almost a year ago now, I had rekindled interest in the project as the semester project in my Java class reminds me of it. Perhaps just because it will be another assignment heavy on the development side of things, but that doesn’t make it any less important. I’m excited to start working in teams to create something that will hopefully be of use.

The web space where this has been posted has been taking down, so I am going to try to convert the MSSQL PHP stuff into MySQL PHP stuff and host it so you can actually experience the greatness that was Classroom Portal. I’m sorry I can’t provide a link to the working site, but I can give you a few more screen shots on my Flickr.