Archive

Archive for the ‘Internet’ Category

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.

CPG Brand Colors – Why is Diet always so boring?

February 10, 2009 4 comments

Head to the soda (pop, whatever) aisle of your local supermarket and take a look around. It makes for a fascinating study in branding, color trends, and CPG marketing in general.

Recently, I noticed something obvious, yet never really discussed. For each brand or flavor of soda, there is a distinct color, logo, and tone in design. With each brand’s diet flavor though every brand I could find did the exact same thing – took the normal style, and made it grey. They took out the color, desaturated the packaging, or just generally swapped neutral colors in for the bright bold colors the regular brands get. Some examples:

Comparison of regular and diet soda cans

Comparison of regular and diet soda cans

Is that really the best that millions of dollars ad budgets and legions of designers, art directors, marketing people, and brand managers can come up with? It gives you the distinct impression that the diet version will be a blander, less fun, less bold version of the regular. I understand you want to retain the value of the original, but surely there’s value in distinguishing the diet flavor as its own product, not simply to be a watered down, less interesting version of the regular?

Let’s see some originality here; there’s no rule (I’ve ever seen at least) that says diet soda has to look and feel just like regular soda. Give it a brand, give it its own personality! From my experience the consumer who regularly purchases diet soda may not even be interested in the regular version. Should they not be engaged and treated as well as the consumer interested in the regular equivalent?

Swiss cheese fonts for greener printing?

December 19, 2008 Leave a comment

The effort to go green is growing every day, and we can all do little things to reduce our waste and our energy footprints. But, have you ever considered the environmental ramifications of your fonts?

Well, a Dutch company has created a typeface called EcoFont that claims to reduce the amount of ink (and therefore energy used) in printing by 20%. They do this by literally punching little holes in the characters. At a large size it looks absurd, but the idea is that at a normal print size for office documents, say 12 or 14pt, it’s virtually indistinguishable.

ecofont

Does it really work? I’m a little skeptical that the resolution and precision of the average cheap inkjet or laser printer is fine enough to print a dot/line that can really utilize the holes in the characters. It also remains to be seen if the average office will swap their mainstay Times and Arial fonts for something they have to download and install themselves.

Regardless, I applaud SPRANQ for trying something different, and illuminating how we might make common little tasks more eco-friendly.

4 Steps to Better Feedback

October 28, 2008 1 comment

One of the most challenging things about working with or in a creative agency is dealing with feedback. At an agency like DigitalDay, there are numerous projects going on all the time. As each project moves through conceptual, design, and production stages, we solicit feedback from the client. Conversely, if you are the client, you’re given the opportunity to check and comment on projects as they progress.

Unfortunately, feedback doesn’t always go smoothly. One of the most frustrating comments I hear is “We’re not crazy about…” . Maybe we’re doing an outdoor themed piece, and the comment is “We’re not crazy about the clouds”. A comment like this is so vague that it’s almost worthless. Do you want more clouds, less clouds, bigger or smaller clouds, a different style, more prominent, less prominent, abandon clouds altogether? There’s so much room for interpretation that the designers, art directors, and project managers are forced to either contact the client for further clarification (wasting time and money on both sides) or make an educated decision based on knowledge of the brand, the project, etc (potentially choosing poorly, wasting even more time and money to fix it).

So, I’m proposing a few simple steps to improve the efficiency and usefulness of feedback. In the end, everyone wins with better workflow, lower cost, and better marketing pieces.

  1. For Everyone – Ensure your feedback is submitted on time. There are times where someone asks for feedback, gets a little bit and then moves on, only to have someone higher up in the organization respond later with significant changes. This is extremely disruptive, and results in costly redundant changes.
  2. For Clients – Be specific. Try to frame any comments you have in a proactive way, that leads to or directly suggests a change. Instead of “We’re not crazy about the clouds”, try “The clouds don’t fit our theme of an urban environment. We’d like to see a comp with more focus on the city below, so we see more details there.”
  3. For Agencies – Engage and educate your clients. Often times, your clients don’t have the experience and expertise you have, that’s why they hire you. Explain to them that you don’t understand what certain feedback means, and you need more information to improve their piece.
  4. For Everyone – Be honest. If something doesn’t work for you, don’t worry about stepping on toes or hurting feelings. Everyone involved is a professional, and as long as your feedback is relevant and constructive, it will only lead to a better product.
Categories: Internet, Web 2.0

Efficient design starts with efficient fonts

October 14, 2008 Leave a comment

Typography is a huge part of any well-done graphic design. Choosing the perfect set of fonts and styles for any given design should be intentional and informed, and therefore time consuming. Additionally, the size of a designer’s collection of typefaces grows over time. At an established agency like DigitalDay, we have literally thousands of fonts in our collection that are either supplied by clients, purchased for projects, or picked up from various software installs.

The best tool I’ve found for organizing and working with a large font library is FontExplorer X. It also happens to be free, which is a great bonus. The only downside is that there is no Windows version. There are similar tools for Windows, but for now Linotype’s program is Mac only.  Why do I need any font software, you ask? Well, there are several advantages over the built-in tools on either Mac or Windows.

First, if you have say, 1000 fonts, and they are all activated, it becomes very time consuming to select a font from an applications list. If you’re scrolling through, or just browsing within an application, it’s much more friendly to search through say 50-100 fonts than your entire collection. Loading all of your fonts every time also eats tons of memory. And when you have loads of design applications and files open, every little bit helps.

The true killer feature, for me, is the ability to make font sets or “playlists”. There are many times when I know I’m looking for a sans-serif font, or something very ornate, but I don’t know exactly which font I want to use. What I’ve done is break my entire collection down into different categories. I can browse through single categories at a time, which is an incredible time saver.

Additionally, if I have a large project that uses many different typefaces, I can group them together and activate or deactivate all at once. If you’re familiar with playlists in iTunes, the concept should be familiar. Browsing a few specific fonts instead of digging through hundreds of possibilities is a huge help.

Another nice feature is auto activation. Let’s say you’re working on a big style guide in your page layout program and you’re using many different fonts. You want to be prudent and not leave them active all the time, but you might occasionally forget to turn them on, or forget to add a font you use , etc. Not to worry. Font Explorer X will detect what fonts are used in your file and activate them for you.

Font management is an often-overlooked process, but it can be useful and an incredible time saver. Browsing quickly and intelligently will give you more time to find the perfect fonts for a better piece for your agency and the client.

Google Chrome browser – a boost to web designers and developers

September 4, 2008 3 comments

Google recently released their Chrome browser, to mixed reviews. In short, Chrome is an open source browser promising performance improvements, new features, and better integration with Google services like Gmail and Docs. There are many more details and reviews available, but regardless of how it performs or how people like it, it’s great news to those of us creating websites everyday.

What’s exciting to me as a web designer and (occasional) developer is that it gives users everywhere another viable, free, and well publicized alternative to Microsoft Internet Explorer, especially version 6 (IE 6).

Quite a few users still use IE 6, and most of them are probably content with it. For any company creating websites or web marketing however, IE6 is a monster that brings with it wasted time and resources, multiple versions of code, and severe limitations from both a technical and creative standpoint.

IE6 is an old, outdated browser. IE6 was released in 2001, and many of its shortcomings stem directly from the fact that it is simply outdated when compared to modern browsers like IE7, Mozilla Firefox, or Apple’s Safari. There are too many problems to list here, but security concerns, lack of PNG 24 alpha support, CSS layout inconsistencies and web standards compatibility issues are all sources of endless headaches for designers and developers here at DigitalDay and beyond. Additionally, there are interesting new techniques and creative approaches being discovered every day in the world of web design, but many of them are limited to newer browsers.

Some companies have officially just decided to stop supporting IE6 entirely, while others continue to plea their case to clients, etc. What ultimately matters though, is whether or not users can access the information and brands we work with. We don’t design for the brands, we design for the users. Unfortunately right now, approximately 25% of all users we measure are still using IE6. So, we have to keep them in mind with everything we do.

The exciting thing about Google Chrome is that it is a modern browser supporting web standards, with none of the headaches IE6 brings to the table. It is such a media darling that more than a few IE6 users who had never heard of Mozilla might give it a try. Every user who takes a step forward and downloads a modern browser will see what they’ve been missing, and the creativity and efficiency of web design and development across the board will grow.

Designing for the Mobile Web

August 12, 2008 1 comment

If you can remember the last time we talked about it, you’ll remember that the Web is moving to, well, people’s pockets. As more and more smart phones become capable of accessing the web, new design issues arise. How do you design a site for a screen with a screen resolution smaller than the eight-year-old 800×600 standard? The answer is very delicately.

It starts with your audience. Who are you trying to reach? Understanding who they are and what they’re looking for is the first step you need to take. As this guy weighs in, there are three types of mobile web user: the casual surfer, the repeat visitor, and the “urgent, now!” visitor.

1.    The casual surfer is looking for nothing in particular. Perhaps he’s playing with his iPhone waiting in the drive-through line, or she’s browsing on her Blackberry before her flight takes off. The point is that no one is that it’s an informal and short site visit—the information should be organized clearly and effectively or the visitor will leave.

2.    The repeat visitor is seeking new content. Regular updates will keep this type of user more interested and involved in checking your mobile site.

3.    The third kind of visitor is looking for information and they want it ASAP. If your information isn’t properly organized, they’ll simply find a better way to find what they’re looking for. It is critical you’re your site is easier to navigate than the sites of your competitors.

Once you’ve planned your site, it’s time for design. It’s best to keep it simple—the mobile Best Buy web site, for example, has just two search fields: one to help find a product and one to find the closest store. When designing for the online web, less is most certainly more.

Ultimately, your design is for your audience and not your portfolio. It is important to remember that in mobile web design form follows function. If your potential customers can’t easily navigate your site they’ll leave to find a site that will work for them.

The Benefits of Proactive Search Engine Optimization

July 30, 2008 Leave a comment

Here at our Cleveland-based web design agency DigitalDay, we’ve been talking about the importance of good page titles, meta tags, descriptions and alt tags for search engine optimization and it seemed like a good time to mention this blog post. Author Paul Elliot suggests that optimizing a site for search engines is far more effective if implemented at the beginning of the design process rather than post-launch—and he’s right.

While the temptation to rush a project through the design process may be enticing, the benefits of proper search engine optimization definitely outweigh the few weeks saved by cutting corners and not focusing on optimization efforts from the beginning.

Amit Singhal spills the beans about Google search technology in this recent post, giving a little insight into how the world’s most popular search engine can adapt user queries to find relevant information. As he says, search has moved from “give me what I said to give me what I want.” Even as technologies improve, if Google can’t find your site, your potential customers can’t find you either. Who your would-be customers will find, though, is one of your competitors.

As crawlers become more sophisticated, factors such as URL formatting, directory structure, file names of graphical elements, and even comments in HTML markup are becoming more important in helping spider-based search engines determine the fullest extent of a site’s content.

When designing a site with heavy use of Adobe Flash, AJAX or Javascript, it is important to think of the spiders and allow your site to be indexed with proper usage of page titles, meta tags, and descriptions. Although even now, Adobe, Yahoo, and Google have teamed up to make spiders index Flash .SWF files. This makes planning even more important as poorly organized .SWF files, once irrelevant to SEO, can bog down a site’s PageRank.

SEO doesn’t stop at the content development stage, however. As Paul Elliot mentions, “poorly formed code that is difficult for the spiders to traverse can negatively impact ranking performance.” Coding in CSS allows the relevant content information to be at the top of the page with everything else following it.

Keeping these SEO basics in mind can save a lot of headache later. Elliot compared “four projects in which optimization was a post-launch initiative to four projects in which optimization was include in the initial scope of the design…” and found that “on average, the post-launch method of search engine optimization led to incremental redesign project costs of roughly 30%.” This is no small amount of money for something that could have been avoided.

Money isn’t the only cost of delaying search engine optimization. The cost of lost opportunity can be far greater. “The process of ranking for competitive terms,” writes Elliot, “can take upwards of six months.” Elliot found that “the integrated approach to SEO, in which optimization activities are embedded in the redesign project scope, can shave roughly five months off of the time that is required to achieve top organic search engine listings.” This time is invaluable in getting your product or service to the top of Google’s PageRank, allowing you to inform the searching public about your company.

Like so many other things, it pays to do the job the right way the first time.

Categories: Internet, Search Engine Marketing Tags: