How You Present a Website Matters

Tuesday, January 31, 2012

How You Present a Website Matters

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 non-styled text while web fonts 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 web fonts 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 websitesweb apps, mobile apps, or other applicationsinterface 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 B2B agency with decades of experience executing its client’s visions. The award-winning company specializes in web design, logo design, branding, marketing campaign, print, UX/UI, video production, commercial photography, advertising, and more. Matcha Design upholds the highest personal standards for excellence and can see things from a unique perspective due to its multicultural background.  The company consistently delivers custom, high-quality, innovative solutions to its clients using technical savvy and endless creativity. For more information, visit

Related Tags

You Might Also Like