Messenger Web Design Blog

Motion Graphics

Thu, 02 Jun 2011 14:40:20 -0700

Wednesday, 1 June 2011

We just finished our 1^st foray into motion graphics with this short promo video. For the technically-minded among you, it’s HTML5 video with a Flash fallback, made using:

Adobe Illustrator & Adobe After Effects
Audacity to increase the tempo of the stock music & append the “static” sound effect
Handbrake for H.264+AAC+MP4 support
Firefogg for Theora+Vorbis+Ogg support
Miro Video Converter for WebM support
Flowplayer, to support older browsers

For the rest of you, that means it works on most (maybe all) desktop and mobile platforms. Take a look, and if you like it, why not drop us a line?

— Chris J. Zähller

Jiffy Squid!

Thu, 02 Dec 2010 15:25:27 -0800

Tuesday, 2 December 2010

I just submitted my 1^st Threadless T-shirt design today. Please visit Threadless and score my design!

— Chris J. Zähller

Video Captions

Mon, 01 Nov 2010 15:39:10 -0700

Monday, 1 November 2010

In the interest of making our site as accessible as possible for our clients, we’ve added captions to our recently announced Drupal video tutorials. If you are hard-of-hearing or deaf, on videos & accessibility.

— Chris J. Zähller

Drupal Tutorials

Tue, 26 Oct 2010 15:41:21 -0700

Tuesday, 26 October 2010

Just a quick announcement; we’ve started producing a series of video tutorials on using the Drupal Content Management System (CMS). Those clients whose sites were built with Drupal can jog on over there and start learning how to edit their website’s content.

— Chris J. Zähller

Food and Shelter Makeover

Mon, 18 Oct 2010 17:34:44 -0700

Friday, 15 October 2010

Kindergarten — Not!

The Old Logo, a.k.a. Warmed-Over Clip Art

Long-time client Food and Shelter for Friends was itchin’ for a change. Their logo looked like warmed over clip-art (because it was); their site design & function were sooo 1990s; none of their marketing materials sent the right message to either their homeless clients or potential partners/donors. In this article, we’ll look at the logo redesign; to read about the site design, check out our Client Gallery.

New Name, New Logo

The old organization name was clunky and, while friendly, did not convey a sense of competence or professionalism. The client felt the old name and look imparted a vibe that was more “kindergarten” than emergency community services. They chose a new name, Food and Shelter Inc., and asked us to redesign the logo. In our initial meeting, they asked us to incorporate this image into the logo.

Our intial design combined the “Hands in Circle” with silhouettes of common food items — a hen, apple, banana, fish — layered in the negative space created by the hand cutouts. The overlapping shapes in pure cyan, magenta & yellow created other primary and secondary colors. We also designed a matching logotype.

For the logotype, we chose the classic 1902 typeface Franklin Gothic for its solid feel and high legibility. Its clean, ornament-free design complemented the simplicity of the logo. The availability of a web license for the font meant we would also be able to use the font for the website headings.

The client liked the basic design, but asked us to incorporate an abstract house symbol in the center. We felt the house would be illegible at smaller sizes, so we offered this alternative, making the house the primary logo and placing the hands on the house front.

Final Logotype

The client asked for a quieter color scheme, feeling that the bright CMYK colors where still too “kindergarten”; they wanted friendly, but professional. We worked up some alternative colors for both the logo and the logotype. One final color scheme did the trick.

The client asked us to change the text in the logotype from “Food and Shelter Inc.” to “Food and Shelter” and to reset the type in mixed case letters; they loved the result and immediately commissioned T-shirts featuring the logo for their annual CROP Walk to end hunger. As usual, we prepared files for the client’s use in color, greyscale and black & white reproduction.

— Chris J. Zähller

It’s Alive!

Wed, 30 Jun 2010 12:01:04 -0700

Monday, 6 July

Well, not quite. If you’re reading this, then you are either a) myself, proofreading this post, or b) arriving too early to the party. I’m currently in the initial stages of designing this site, & I’m filling in some of the content areas so I can see how things look.

Since the site is still under development, there’s not much to see, but I did get the upside-down tabber jQuery plugin working. You can see it in action by clicking the ‘About’ tab at the top of the page. While you’re there, you can read about me, your humble author/designer. Cheers!

— Chris J. Zähller

About Web Fonts, Part 1.

Wed, 30 Jun 2010 12:01:03 -0700

Tuesday, 23 June 2010

Introduction: HTML and Fonts

There are 2 basic ways for specifying which typeface, or font, a web browser will display for a given block of text: the HTML <font> tag (now deprecated) and the CSS font declaration. Most Content Management Systems (CMS) add one or the other tag to selected text with the press of a button (fig. 1). Great, huh? You just declare which font you want to appear on the page, and that’s what the user sees. Wrong. Here’s why.

Fonts for web pages are loaded from the end user’s system. If you don’t have the font installed on your computer, the browser will substitute another font in its place.
Even if the end user has the font installed on his or her computer, s/he can override the page’s declared font in the browser preferences.

Historically, designers have compensated for the 1^st case by creating CSS declarations like this:

body {
	font-family: Georgia, "Times New Roman", Times, serif;
}

This tells the browser to display text using Georgia, but if Georgia can’t be found, subsitute Times New Roman, and if that font is missing too, use Times. Finally, if Times is unavailable, use the serif-style system font.

Fancy Fonts

Yet we’ve all seen fancy fonts on the web, usually used for display type, such as headlines. How do they do it?

The Wrong Way

The simple, and wrong, way is to set the text in a graphics program and make a picture of the words, then stick that on the page where the headline (or link) should go. This used to be the only way to ensure that all users would see the same fancy typeface, but it causes some significant problems.

Search engines can’t read the text, hurting potential search results for your site
Users with impaired eyesight won’t hear the text through their screen readers
1. According to this article, nearly 10% of computer users are affected by severe visual impairment
More people are connecting to the web without a standard web browser
1. Persons living in areas with limited connexion options (e.g., dialup) may use a non-graphical browser because of slow download speeds
2. Newsreaders and RSS-narrators typically don’t parse images, so chunks of text will be missing from the newsfeed
Images use more bandwidth than text, causing slower page loads

Failure to Launch: Font Embedding

Back during the Browser Wars, circa 1998, the companies behind the 2 major browsers, Microsoft and Netscape, each announced a solution. Font embedding was born.

The idea was to “embed” a copy of the font that resided on the remote web server, via a special embedding tool. When the user accessed the page, a copy of the font would temporarily download to the user’s computer and the page would display the text using the temporary copy.

Like I said, each of the companies announced a solution. And each solution was different, and incompatible. Microsoft, at least, offered their font embedding tool for free, but only for Windows® developers. There were various different tools available to embed fonts for Netscape, and they each cost a considerable sum. Neither solution ever caught on.

Image Replacement

The next batch of solutions relied on various scripts to perform image replacement, in which the page was marked up with text, then the text was dynamically replaced with an image of the words using the desired font. 3 problems with these techniques spring to mind:

If the user turned off scripting in his or her browser, the image replacement failed (but the text would still be there, so kudos for accessibility)
Images require higher bandwidth = slower page load
Running the scripts took additional time and resources = even slower page load

Another scheme involving the use of Flash® also slowed things down, and, as of the time of this writing, the future of Flash® is in question due to Apple’s policy of not supporting flash on 2 of their popular platforms.

@font-face to the Rescue

The CSS2 specification originally called for a mechanism to embed fonts, called the @font-face declaration. Had the spec been adopted by every browser maker, we would all be drinking champagne right now. Legal issues, however, caused the W3C to drop the spec. The controversy boiled down to the fear that the technology would allow commercial fonts to be distributed illegally.

In the past couple of years, browser makers and font vendors have reached an uneasy agreement on ways to allow font embedding with safeguards against illegal distribution. The browser makers are still offering competing solutions, but there are workarounds that allow developers to use the @font-face declaration to implement all of the solutions for cross-browser compatibility. I’ll show you how to embed fonts in your web pages in the next post.

— Chris J. Zähller

Writing (& Formatting) for the Web

Wed, 30 Jun 2010 12:01:03 -0700

Friday, 13 November 2009

How Users Read on the Web

They don’t. People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences. In research on how people read websites we found that 79 percent of our test users always scanned any new page they came across; only 16 percent read word-by-word.

— Jakob Nielson, Web Usability Expert

Thus begins Jakob Nielson’s article on how people read on the web. And thus our problem. The solution?

Scannable Text

People will scan, or worse yet, skip large blocks of text on a web page, so:

Use fewer words
- About ½ the words of conventional (print) text
Break up text with pictures or diagrams
Highlight keywords
Use bulleted & numbered lists
Use meaningful headings and subheadings

Limit Ideas

People won’t make it to the end of long, disorganized pages that force them to scroll endlessly. So:

Organize your topics
- Use the Inverted Pyramid style of writing
Limit each page to 1 main topic
Limit each paragraph to 1 sub-topic
- If there are too many topics or sub-topics, break the page up into multiple pages — 1 big idea per page

Other Reasons to Write & Format for the Web

Two other reasons to follow best-practices for web writing are:

Accessibility — a properly formatted page is easier to navigate for sight-impaired or physically challenged users
Search engine rankings — search engines typically use headings to determine the importance of information on a page

Writing for the web isn’t like writing for print, although it shares some similarities with journalistic writing and writing for research papers. Visitors need all the help they can get to find what they’re looking for. Organizing your thoughts, formatting the page and keeping it brief all help users to locate the meaning of the page.

— Chris J. Zähller

The Old Grey Browser

Wed, 30 Jun 2010 12:01:03 -0700

Monday, 24 August

We’ve added a Freqently Asked Questions section to the web site; we plan to updated it often as we think of (or get asked) more questions. In the meantime, I’ve written an article to expand on the aswer to one of the questions: “My web site looks funny on my home computer, but it’s OK at work … and what does that message about an old web browser mean?”

Other updates include slight tweaks to the layout (I removed a redundant border and widened the main content area into the space freed up), a dedicated “About Us” page, and text navigation in the footer.

— Chris J. Zähller

Why Should I Upgrade My Browser?

Wed, 30 Jun 2010 12:01:03 -0700

Monday, 24 August

Better Performance

Newer browsers handle advanced web technologies better than their aging counterparts. Javascript effects, such as the animated effects you see on this web site or the drop down menus on every page, can cause a significant slow-down on older browsers.

For fastest performance, if you are using any version of Internet Explorer (IE), consider switching to (in order of preference for improved performance):

Opera
Google Chrome or Apple Safari
Mozilla Firefox or Konqueror (Linux only)

Security

Older web browsers don’t receive regular security patches, as they are no longer maintained by their developers.

In the case of Internet Explorer, the problem is worse, since its use of ActiveX controls makes it particularly vulnerable. IE 6 and earlier are plagued by vulnerabilities. The current release at the time of this writing, IE 8, makes vast improvements in security — it may be the most secure browser available. Improvements include better protection against ActiveX exploits.

If you like spyware, malware and viruses, by all means, keep your old browser. Otherwise, upgrade.

Page Appearance (Rendering)

Because they don’t follow web standards, older browsers can render a page with unexpected results. Text may not be visible, components may become inaccessible, pictures may float off in unexpected directions. We’ve seen cases where text appeared in tiny, 3 pixel high letters, and the browser’s “resize” function didn’t work. Newer browsers are far less prone to these problems.

Functionality

Many new technologies for web pages were developed and adopted after older browsers were released. Today’s web pages are filled with dynamic or advanced content, such as:

Animation, including Adobe® Flash
Dynamic menus (such as the one’s found on this site)
Visual effects (e.g., drop shadows, transparency, blurred backgrounds)
Drag & drop components
Image viewers
Secure forms
Galleries
Ability to upload or download files
Sound and video players
Interactive games

Poor support for these components in older browsers limits the user’s ability to use them. In severe cases, they may hamper one’s ability to navigate the site.

Accessibility

By building sites that validate correctly to the standards, developers are much more likely to preserve accessibility for all users. If you are sight-impaired, have difficulty using a mouse or keyboard, or are viewing the site on a mobile device or other small screen, using a modern browser or screen reader is the best way to ensure that you can view and navigate all of the content.

— Chris J. Zähller

Form Design

Wed, 30 Jun 2010 12:01:03 -0700

Thursday, 9 July

We finished making the contact form & testing it this morning. We don’t have the mail server set up yet, so forms don’t go anywhere. So don’t bother filling it out! Use the contact link in the page footer instead.

This is our first attempt at implementing a ‘captcha’ system to prevent spammers from contacting us through a form. In the interest of accessibility, we’re including an audio option. Next step: figure out how to embed the sound, so no application has to open to play it.

— Chris J. Zähller

We’re Back

Wed, 30 Jun 2010 12:01:03 -0700

Friday, 7 August

Well, we’ve been busy. I also work as the entire staff of a monthly print and web magazine, which chews up a week every month. Immediately after putting the August/September issue to bed, we were given contracts for 2 websites, so we’ve had to put our own site on the back burner in the meantime.

The form now works beautifully, and the mailserver is set up, so if you use the form, your communication should reach us. Unfortunately, we haven’t discovered a way to embed the ‘Captcha’ sound, so the client computer/browser will need an audio player or plugin installed to use that feature.

We’ve also got Server Side Includes working, which should save on coding by allowing us to re-use code throughout a web site. Sexy! … and we’ve also set up a custom ‘404 Not Found’ page, which should help with those occasional broken links. I have to work with Trent to make it function with the Content Manager, though, because right now if you try to load a page with a url like ‘domain.tlc/?page=page.htm’ and it doesn’t exist, the page you are on simply reloads. Not sexy.

— Chris J. Zähller

New Stuff

Wed, 30 Jun 2010 12:01:03 -0700

Tuesday, 19 August

In between work for clients, we’ve created some new layouts for the site and added a little new content:

Flash galleries showing examples of our design
A sitemap
Added an RSS 2.0 newsfeed

We’re temporarily using the open source dfGallery 2.0, until we finish the content manager; our in-house solution will be better customized to our needs. But, we really do like dfGallery; our only complaint is that the provider doesn’t provide very good tech support.

So, if you feel like seeing some pretty pictures, take a look at the Web Gallery and the Logo Gallery.

— Chris J. Zähller

Messenger Web Design Blog

Motion Graphics

Jiffy Squid!

Video Captions

Drupal Tutorials

Food and Shelter Makeover

Kindergarten — Not!

New Name, New Logo

It’s Alive!

About Web Fonts, Part 1.

Introduction: HTML and Fonts

Fancy Fonts

The Wrong Way

Failure to Launch: Font Embedding

Image Replacement

@font-face to the Rescue

Writing (& Formatting) for the Web

How Users Read on the Web

Scannable Text

Limit Ideas

Other Reasons to Write & Format for the Web

More on This Topic

The Old Grey Browser

Why Should I Upgrade My Browser?

Better Performance

Security

Page Appearance (Rendering)

Functionality

Accessibility

Form Design

We’re Back

New Stuff