Interface Engineering

Those of us familiar with front-end user interface development such as HTML, CSS, and JavaScript, understand the pains and complexities of Cross-Browser Compatibility. For most others, the main thing that matters is how a web site or application displays and functions in their browser(s) of choice. Because of the challenges browsers present, front-end interface development has become a critical part of web development.

When implementing a design, a problem I encounter frequently involves floated elements within a container element breaking the borders of their container. This occurs often in lists of articles or documents that have thumbnail images floated next to their title and description, but the issue can crop up anywhere that you use floats. The following CSS and HTML is an example of this problem.

At Forum One we are always attempting new ways of delivering better looking web sites more quickly and within the budget. One of the techniques that we grown fond of and have incorporated into our process for most projects is creating what we call a hybrid page. A hybrid page contains text and visual elements such as H1 tags and buttons that can be used on many pages through out a web site. These elements are provided from the visual design in a comp that is consistent with the web site existing grid layout. View the hybrid page we developed for Forum One's web site redesign.

Google's team explains the new browser, Chrome, via comic book. What fun!

Recently, a client came to us and asked us to design a multilingual gateway to several language specific sub-domains. We immediately thought of several solutions to this problem that included:

sIFR version 3 is currently in beta, and it looks to be far more user-friendly than previous iterations. If you're unfamiliar with sIFR (Scalable Inman Flash Replacement), the quick description is that it's a way to use any font you like on your website through the use of Javascript, Flash and CSS. sIFR is not the future of text on the web given it has several large drawbacks.

The Culprit Fly-out menu: a navigational solution. When a user puts their mouse over a navigation item, a menu automatically appears or "flies out". Items in that menu are clickable. Often used with intentions of de-cluttering the space and enhancing the user experience. Examples: Iowa Dept of Elder Affairs - Do they really expect the elderly to use this site?

Using basic CSS there are various ways to replace text with images, but most of these methods have drawbacks. These drawbacks become even more apparent when you are using image replacement in links (such as in navigation items). A primary reason for using image replacement is to aid in accessibility, but many of the common ways to replace text have accessibility issues. In an effort to choose one of these methods as our company's standard, I evaluated the most common image replacement techniques while creating a site's primary navigation.