Presenting ideas to a client is really at the core of a design firm’s success or failure. How this should be done is an area of much discussion and debate. There are those who prepare and present a number of directions to the client, allowing the client to reflect upon them and choose which they like best. There are others who feel one direction should be presented, with a singular train of thought.

Continue to article

I promise, I will post a more detailed write up on the specific highlights, design and functional, in the new design, but for now, let me just touch on some of the key differences. First off, updating the site (which had a code base at least 3 years old) was a great opportunity to take advantage of all of the wonderful advancements with HTML5 and CSS. So one of the biggest enhancements with the new site, from a front end engineering standpoint, is the upgrade to HTML5. While the HTML5 specifications are still in the works, support is rapidly growing and the benefits can be profound.

In addition to the technical enhancements to the website, we also made some strategic design changes to the presentation and display of content on the website. This is probably most notable with our blog. We really wanted to bring our company blog up a notch, are publish more compelling content. With this in mind, we wanted to visually pull the blog out from the other content pages, but still have it feel fully integrated with the rest of the site.

We did this on two levels. On the blog landing page, we removed the branding from the header and dedicated the entire layout to blog articles. The second level is the article pages themselves. For the article pages, we really wanted to draw all the attention to the content of the article, without the distraction of complimentary material. So, we removed everything else, centered the article and provided a simple area for comments and categories underneath.

We welcome you thoughts.

“Just in time for the New Year! At long last, we can share with the world a taste of the Tagged Tanakh (TT) prototype!” JPS Interactive

We spent the better half of 2009 working with JPS to develop the Tagged Tanakh prototype and at long last, we can give you a sneak peek.

The Tagged Tanakh prototype has a pretty healthy base of core functionality that we hope will compound under future development. The prototype allows users to interact with the English version of the Jewish Bible, by adding remarks, using tags to contextualize the relationships between their remarks and their selection from the Tanakh, respond to remarks left by other users and create custom feeds to follow the users and/or topics of interest to them. In addition, we have also developed a fairly intricate rank and moderation system, that will help users find discussions and topics that are relevant and of interest to them.

Social networking features, integration of third party data sets, Hebrew text, and the release of an API are all in the pipline and we’d love to get your first impressions. You can read more in our working case study.

If you are interested in supporting the Tagged Tanakh, you can make a donation directly to JPS.

This is a fantastic opportunity to come out and mingle with other microformatters, learn what it’s all about and share your ideas.

Sponsored in part by: Object Adjective

Celebrate the 4th birthday of microformats.org!

Come out and join us in celebrating 4 years of doing it with class. This evening, Friday, June 26, 2009 at 7:00pm is the Microformats.org fourth birthday bash. In honor of the great achievements the organization and its voluntary community of contributing developers have made, there will be a party at B Restaurant and Bar in San Francisco. If you love portable data and semantic markup, we’d love to see you there.

To help out with or attend the party, please add your name and RSVP.

Sponsored in part by: Object Adjective

Object Adjective is please to announce the launch of Change the World for Ten Bucks. Once again, Chronicle Books approached us to help them build an community website, this time to help change the world.

“We Are What We Do is a new kind of movement inspiring people to change the world one small action at a time. It’s not just politicians, institutions, and big business that change the world – it is also ordinary people like you and me.”

The opening paragraph on changetheworldfortenbucks.com alone, sums up our feelings on the matter and we were incredibly delighted when Chronicle Books asked us to develop the community website for this campaign.

Ready Case Study

The project we’ve been working on with the JPS, called the Tagged Tanakh, entered the early development stage at the beginning of the year. We are now rapidly approaching our the internal prototype release and the excitement is buzzing in the air.

The Tagged Tanakh will create digital versions of the ancient Hebrew text. It will allow visitors to expand the discussions around this text, by adding remarks and contextualizing the relationships between the original text and the surrounding discussion, through the use of tags.

JT Waldman writes more about the Tagged Tanakh and some of the early user group testing scenarios on Yavnet.

The art of arranging type is perhaps one of the most important studies for a graphic designer. Typography is such a complex and sophisticated examination, you can easily lose yourself in the finer intricacies of this study. You can also amass quite an extensive personal library of type faces and spend exorbitant amounts of time hunting and sifting for the right font.

This is where font management software comes in handy. Or at least, that has been the idea.

Personally, I have found managing my fonts to be somewhat burdensome. The issue for me has been less about balancing shear volume and more about having quick and easy access to the particular font I am looking for. And more so, for the font I don’t know I’m looking for. To this day, I have not found a solution that handles either of these particularly well, but I’ve narrowed the pickings down to two font managers that seem to do it better than most, Lynotype’s FontExplorer X Pro and Bohemian Coding’s Fontcase.

FontExplorer X Pro

I was eager to try out the new FontExplorer X Pro, which was released by Lynotype early last month. The previous, free version FontExplorer X was pretty good and the Pro version was set to introduce new features, better functionality and compatibility with a network service for font sharing and management over a closed network.

Overall, FontExplorer X Pro is pretty easy to use. It is compatible with both Mac OS 10.4.x and 10.5.x. The application view is pretty straightforward, if not a little boring. It is familiar and easy to use, and it allows you to sample fonts and customize how your sample is displayed, down to kerning and color.

FontExplorer X Pro

Some of the nicer features of FontExplorer X Pro are, smart sets and activation control with application-based sets. With smart sets, you can create custom font sets based on a number of criteria. This could be by Family Name, by path, by designer, by comment and so on. With activation control for application-based sets, you can automate the activation and deactivation of fonts, based on which applications you are using at any given time. For instance, you may have a considerable number of fonts you only use when working in Photoshop or Illustrator. With activation controls, you can have these fonts deactivated unless you are using one of these applications.

Another nice feature of the FontExplorer X Pro is having direct access to the Lynotype store, where you easily add to your library. This is particularly nice when working with the available plugins for Illustrator and Photoshop.

On the down side, FontExplorer X Pro does not allow you to contextualize your fonts much with meta data, which seems like a no-brainer requirement. While having the manufacturer, designer, font name and style are all important as meta data goes, on a practical day to day stand point, they have little value to me. On the other hand, adding my own meta data, in the form of tags, would be hugely useful.

There is one painful and limiting workaround, but again, it is painful and limiting. You can use the custom comment field for individual fonts as a single tag field and manually enter a specific tag for each font inn your collection, such as ‘slab’ or ‘sans-serif’ or ‘retro’. Then, you can either sort your list columns by comment or set up smart sets for your tags. Again, very tedious and it prevents you from identifying a font as both ‘sans-serif’ and ‘retro’, for example.

Fontcase

Following my quest for a good font manager that makes use of meta data and tagging, I came across Fontcase, by Bohemian Coding. Touted as being “designed to be an iTunes for your fonts”, Fontcase is a beautiful application that provides multiple views of your font information, including: thumbnails, lists, detailed inspections and glyphs and comparative side by sides. In addition, it divides these views into character, header text and body text, not to mention viewing fonts by tag and genre.

Fontcase Font Meta Data Form

Fontcase List View

Fontcase Thumbnail View and Character Glyph Detail

Fontcase Comparative Side by Side View

Aside from the most comprehensive application of meta data for font management and the added bonus of a full-featured glyph table built right in, Fontcase allows you to share your fonts libraries in the same way you share iTunes, without the need for a centralized server and with a preview option before downloading fonts, and it allows for beautiful printing of all of your fonts, together with their meta data, in your own paper font book. This I thought, was extremely cool.

Drawbacks? Well, there are a few. One, there is no direct access to a store to buy new fonts and two, there are subsequently no plugins for design applications to help you find missing fonts. For me, that’s not all that bad. The primary thing I want my font manager to do, is help me manage my fonts. Fontcase does an awesome job at this.

Fontcase is compatible with Mac OSX 10.5 or higher.

The Future of Alphabet Soup

So where does this leave the future of font management software? This has been obvious to me for quite some time, but I think for now, Fontcase is doing a pretty good job and definitely headed in the right direction. However, if you know of a better tool out there or have your own way of managing fonts, please drop a note. I’d love to hear what others are using and why.

With the increase in standard, out of the factory screen resolution for computer displays from 800px by 600px to 1024px by 768px, web designers across the internets were freed to make use of a wider canvas on which to design beautiful websites. And we loved it. This is anything but news.

A tiny oversight

Most web designers have been designing for 1024px by 768px for quite some time now. But around the time this became standard, some other wonderful things were happening. In particular, web browser support for CSS and web standards had made a small jump. This too, was wonderful.

However, along with these improvements in the industry, one tiny little layout consideration has been commonly overlooked by web designers, when building out websites. This layout consideration has to do with both the increased standard in screen resolution and the newly supported min-width CSS attribute.

New websites were being designed for 1024px by 768px screen resolution. With the lower resolution of 800px by 600px no longer being considered a priority for a majority of sites, many developers failed to notice a minor oversight in coding practices, that was being exploited by the inclusion of min-width support.

This oversight relates to how browsers set the default for the <html> element. By default, <html> is given a width of 100%. When a web page with a canvas area greater than the width of the browser window is viewed, the content of that page is forced to go outside of this 100% width. This can cause some unsightly and unpredictable behavior in how the page is rendered. The result of this oversight will vary by layout, but under certain situations this can cause some usability problems. For example, if you have white text on a dark background and that background color does not cover the full width of the canvas, the text in that area would then be illegible.

Refer to the examples below. And please note, I am in no way trying to criticize the developer of this site or the company. I merely needed an example to demonstrate what I am referring to. I have seen this problem on many sites, by many very talented web developers, developers who I admire and and inspired by.

Website (Rendered Correctly)

Website (at 800px by 600px) showing <html> issue

A simple solution

If you haven’t already guessed, the solution is extremely simple. All you need to do is define a min-width for your <html> element, presumably at the width of your canvas.

html {min-width: 960px;}