Archive

Posts Tagged ‘css’

Expanding basic web font stacks

January 25, 2010 Leave a comment

For years now, typography on the web has been pretty simple – unless you could use images for text, or something like sIFR, you were stuck with a very basic font stack: typically Arial, Georgia, Times and Verdana being the most prevalent. Countless great designs have been made with those basic tools, but designers have wanted to broaden their typographic resources for quite some time.

Currently, it’s an exciting time for type on the web. Tools like sIFR are still around, there’s also JS based techniques like Cufon, as well as commercial solutions like Typekit, and even @font-face embedding for modern browsers. Each of these has their positives and negatives, but a simple compromise solution comes in the form of simply expanding the basic font stack.

This has been written about before, but it never seems to have gained traction in the design community. That’s a shame, because there are some great options available.

Quite simply, this is the idea that instead of just choosing fonts that have 100% compatibility (which limits you to the common choices), specifying fonts that are very common (I’ve chosen ~80% or higher, though it’s up to your discretion), and then using traditional fonts as backups if a user doesn’t have the font in question. This is incredibly easy to code, degrades very gracefully, and doesn’t require a download or installation of anything for the user.

You have to be willing to accept that less than 100% of people will see your design with perfect accuracy to the original, but the payoff is that for 8 out of 10 it will be more interesting and offer a richer typographic experience, whereas 2 out of 10 will simply see standard fonts.

There are good lists of fonts available here (Windows) and here (Mac). Keep in mind you can use these together, specifying first a Windows-prevalent font, then a Mac version, then the more standard type after that. One of the most exciting choices is Arial Narrow (~89% on both platforms) which finally gives you an option for condensed type in HTML text. I’m also interested to see Franklin Gothic Medium (a classic in the design world, 97% on Windows), and Palatino/Palatino Linotype (gorgeous serif face, 97% Windows, 80% Mac).

On the Web, Size Does Matter

April 29, 2009 Leave a comment

Determining the appropriate width of a website has always been a tricky matter. Different monitor sizes, non-maximized browser windows, toolbars, adjustable OS elements all add to the variability. Early on there were some clever approaches, like this (just resize your window to the width of the image!). There were also many novice designers who built things at literal screen resolutions, say 800×600 or 1024×768. The problem is that with browser chrome and OS elements in place, your actual usable browser width was nowhere near that, more like 760 or ~960.

There’s also the long running debate of fixed width sites versus fluid or dynamic width sites.  There are several ways to implement a fluid width. Early sites simply didn’t specify a width, which on modern screens leads to absurdly wide columns of text which are awful in terms of readability. If you’re page is filled with content you could also break it up into smaller chunks and have them float to the right of each other, so that on a wider screen they’ll appear horizontally but on narrower screens they’ll cascade vertically.

Another more recent approach takes advantage of the CSS tags min-width and max-width to set limits, which help adapt the page to different sizes, but still retain the same general layout and readability (here’s a nice example). As usual though, these properties aren’t supported in IE6 so hacks and workarounds are used. In broad terms there are good reasons and cases for both types of layout, but in the CPG and other consumer marketing sectors we typically work in, brand guidelines and design specs usually lend themselves to the more tightly defined fixed widths.

For several years now, the predominant screen resolution for general purpose sites has been 1024×768, meaning that we could build sites at 960 – 980 px wide and fill those users screens fairly well. What we’re beginning to see though, is more diversity in screen sizes above 1024 wide. Widescreen monitors up to 30″ (both 16×9 and 16×10 aspect ratios), older 4×3 monitors, and people using HDTVs as monitors bring dozens of possible resolutions into play.

How do we accomodate these…what’s the new 960? Some people have picked conservative estimates, but those don’t seem to really utilize much of the space available on many systems. A counterpoint to that is also the success of netbooks, ie tiny laptop computers, whose screens are typically much lower resolution, though often widescreen in ratio. Bring mobile phones into the equation (some that use mobile styles and others like the iPhone that pull the full site styles), and you’ve just got a mess on your hands!

Different style sheets can help, and perhaps we strive for more use of min and max widths, but what are your thoughts on a new standard in fixed widths?  Is it time, or do we need more stats on larger resolution screens? Are we destined to work at 960 for years to come?

Design and Usability of the New Fox8.com Homepage

February 25, 2009 1 comment

Watching the morning news a few days ago the anchors kept promoting their new site, Fox8.com formerly MyFoxCleveland.com . I forgot about it for a few days, but I’ve had a chance to visit it several times now and I wanted to give a brief analysis of the new homepage from a design and (basic) usability standpoint. At DigitalDay we’re working on a comprehensive analysis tool for judging the effectiveness and quality of sites, but while that’s still being produced we’ll look at the site on a basic level.

Although not design related, the new URL is a significant improvement. The station brands itself as ‘Fox8’ on nearly all materials I’ve ever seen, so it makes sense that they’ve moved to this shorter and easier to read designation.

Overall Design

Fox8 homepage

Fox8 homepage

When the page loads, a couple things come to mind. The page loads quickly on a decent connection, which is good, and at first glimpse the site doesn’t seem nearly as cluttered as most tv station web sites, especially small to medium market stations. The background graphic is extremely compressed (probably an effort to save bandwidth…but the design could be more abstract so the compression artifacts weren’t so prominent). Unfortunately the site was not built with large monitors in mind.

picture-1

The background graphic fades to a solid blue, so they could have easily made the body background the same blue – white gradient for a seamless transition. I realize my monitor is wider than the average users, but it’s the little details that make decent designs good, and good designs great. I can’t say I’m the biggest fan of the deep blue and red color scheme, but that’s their palette and they’ve embraced it fully.

Typography

Fox8.com uses a simple sans-serif typographic system. Lucida Grande is the main font, and while I love Lucida, it’s disappointing to see that they didn’t specify Lucida Sans Unicode as the Windows alternative (Lucida Grande is ubiquitous on Macs but rarely found on Windows machines).

menucomparison1

Instead the font stack moves to Tahoma, which has very tight kerning when bolded and lowers the readability on the main menu in particular. Unfortunately this is the way most users will be seeing the site.

picture-3

Section headers are images, but I question if that’s really necessary since they seem to simply be white Arial bold text with a heavy drop shadow. Was the shadow really that necessary? If you’re going to use images for headers, you should get as much aesthetic and branding benefit as possible.

picture-5

Fox8’s type has several spacing issues as well. In boxes like the Popular Stories feature, there is not enough spacing between list items to clearly differentiate them. It’s also unnecessary that the text in boxes like Offbeat News extends to the very edge of the box it inhabits (spacing between list items would be very beneficial here as well). A little padding would not only look much better, it’s used in other sections like Featured Links, and would be a consistent style.

Usability

From a basic usability standpoint, there are a couple of red flags on the Fox8 site. First, in the main news section stories are cycled through, but there is no active state. An indicator of which story is currently being featured would be a welcome addition. Similarly, I would avoid relying on a rollover to indicate what is a link. A user should be able to easily determine what’s a link and what is not without having to rollover it. Combine that with the inconstent link styling on the site (sometimes they’re blue, sometimes black, sometimes blue is not a link, but blue/bold is) and you have a confusing system that could be much simpler and more usable.

Conclusion

I struggle when seeing sites like Fox8. It’s a mediocre at best site redesign that could be significantly better. They have made improvements and are headed in the right directions, but in areas like basic usability and typography they could improve so much with such simple changes. I’ll take a look again in a few months and see if things have changed.