How You Present a Website Matters
Matcha Design - Tuesday, January 31, 2012
As web professionals, we always try to find creative ways to present web content in order to provide a more comfortable viewing experience. One of the more popular web features nowadays is to use custom web fonts on web site vs the good ole Arial, Verdana... However, one of the trade-off is the increase of the loading time due to the cost of loading the fonts. One of the solutions is to hide unstyled text while webfonts loaded asynchronously. To get a good idea of what I'm talking about, you can read an article called A Smoother Page Load by Joni Korpi. (Note that if you're using an old version of IE, or any browser that doesn't support opacity, you won't get the full effect.)
That was a pretty neat web trick, but what about a graphically complex website design like the Matcha Design site? I threw together a rough imitation of Joni's effect to work just on the text. You can try it by clicking here. To me it looks a little strange to have all the background elements visible, then have the text fade in. Not terrible, but a little strange. Depending on your platform/client you might also notice a little "jump" at the end as the font anti-aliasing is finalized. I might use something like this to enhance the initial loading of tiles in the portfolio, or for a few elements here and there, but on a decent desktop connection webfonts shouldn't take all that long to load, and are certainly not going to be the largest download on this site. But if your site is targeting for low bandwidth audiences, then it's a pretty good solution to get a better user-experience.
For those interested, TypeKit and Google Fonts made a font loader that works with different font providers, and can operate synchronously or asynchronously. I think for now we'll keep using synchronous font loading on this site, avoiding the FOUC problem altogether. We're in the process of making some transitions though, and I did get a few ideas I might use to improve loading experiences. Spinners during AJAX loads are always nice, for example. They make sure users with slow connections maintain some sort of visual feedback that something's still going on.
As our creative director, Chris Lo always says, "We should strive for excellence in everything we do." One of the ways to do that is to always look for ways to improve performance and user experience when building websites. Often with some strategic planning and a fresh approach, extremely elegant solutions can be found to what might have otherwise turned into very complicated problems. Whether it's for websites, web apps, mobile apps, or other applications, interface design is about providing users with convenient and easy ways to accomplish their goals. If they have to wait for something, it should be as brief and pleasant as possible. Common choices should be right up front, and less common choices should be easy to find as well. Recognizing problematic interface designs is largely just a matter of approaching the system from the perspective of a first-time user who doesn't know how things are put together behind the scenes.
About Matcha Design
Matcha Design is a full-service creative agency specializing in web design, print, identity, branding, interface design, video production, still photography and motion design. Using our passion for excellence, multi-cultural background, and award winning practices, we consistently provide high-quality, custom, innovative solutions to meet the diverse marketing needs of our clients. For more information, visit www.MatchaDesign.com.