“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;}

Read Case Study

After 2.5 years of abuse, the time is ripe for a fresh redesign at Repeat Penguin. I’ve made little attempt to keep this undertaking private, nor to keep the reasons behind it off the internets. Let’s face it, the wallpaper was pealing, the flooring was curling up and the rooms were drafty (or at least that’s how it started feeling to me).

It was a bit of a sprint squeezing in this redesign, amongst client projects, side projects and general craziness, but alas, we are here and I couldn’t be more excited to share.

Design Notes

There were two primary objectives leading this redesign effort. 1: Create a more content oriented design framework that would allow for both easier reading of articles and greater flexibility for content. 2: Reinvigorate the overall brand and create a space that would make me want to write more. The second of these two was certainly wrapped up in the first, for me.

With these objectives laid out in front of me, I had a clear path to order. Or did I? The fact is, this clear path actually tripped me up on this particular site. As a designer, my mind goes immediately from functional problem solving to design problem solving and the test in redesigning Repeat Penguin for me, fell almost entirely in the design arena.

Repeat Penguin Old Design

Repeat Penguin Old Design Notes

The previous iteration of this site was a little different from most projects I’ve worked on. When I initially set out to design the first rendition of Repeat Penguin, I followed a path no designer should. I pushed forward full-steam, headed towards anti-design.

Anti-design is a funny term and it is arguably subjective. However, there are a few qualities found in anti-design that seem to cross-over the subjective boundaries. These are: 1. Form before function. 2. A conscious effort from the designer, to do what shouldn’t be done. Whatever your interpretation of anti-design, I think we can all agree that this is just not something a Web designer should strive for. And well, that’s precisely why I did.

The result of this endeavor, I learned as I sat down to draft my first sketches for the redesign. I found myself visually boxed in, in a way I hadn’t anticipated. While the overall design of the current site was intentionally uglified and awkward, it had a quality in it that was so well branded. I was finding this hard to leave behind and doubly hard to evolve. My design blockage led me back to the drawing board, or should I say planning room.

Back to the basics

Being your own client has advantages and disadvantages. I can be my best client and I can be my worst. With a clear idea in mind, I’m a delight (except for that not knowing when to stop working part). But when that clear idea eludes me, I become an impossible perfectionist, nitpicking every detail and spinning myself into the mud. This is when my years of working with clients has really started to pay off.

We all exercise a measure of structure and discipline when working on client projects, right? We also, as creatives, sometimes fail to practice the same principles when working on our own stuff. Maybe not total neglect, but certainly shaving a step here or there. At least, I’ve been known to do this. This redesign project brought that to a halt.

After several failed attempts to embark on the redesign, I had put the effort aside for a while. A 6 month while. Granted, this is not a luxury afforded to paid work, but the time definitely cleared my head and I realized where I had been going wrong.

In my previous attempts I was consumed with the idea that the next iteration of the site had to promote a linear evolution in the brand I had created (though it feels silly to call it that). This evolution was very literal in my head. I liked the logo, the colors and the overall affect it had. What I wanted in a way, was to re-appropriate it in the new design. It wasn’t working.

This prompted a long period of avoidance and then ultimately a return to basics. Basic for me usually starts with lists. Identify what problems I need to address, what message I want to convey. Then contrast this with the problems and message present in the current brand.

The problem with the current brand was that it was visually stifling. It needed to evolve the brand on a conceptual basis, not a linear one. This led to two seemly obvious decisions. 1. Completely redesign the logo. 2. Revisit typeface selection and color palette. It’s funny, but holding onto one, was necessarily retaining the other. They both needed to go. So the challenge now, was in how to retain the overall affect, while completely changing the visuals.

Strategy Notes

In addition to redefining the visual and functional design of Repeat Penguin, there were some important questions I had to ask myself. At the top of the list was “just how does the personal blog fit into my life?”

There’s no denying it. My personal blog had taken a backseat to many other things and this wasn’t entirely due to the constraining affect it had on me. This was mostly due to the multitude of other outlets that occupied my time and those that satisfied a similar need, such as Twitter.

So I had to ask myself, what purpose does my blog serve for me? While I was giving this some serious thought, I came across an entry Ben Ward had posted, about this very topic.

This was an interesting reflection on the state of the personal blog and useful in my own assessment. I’m a strong believer in reduction. I would prefer not to be scattered across multiple web services and multiple applications. But until there is a viable alternative, this is the way it is. So my strategy for the new site was to aggregate more of this external content into my blog, without overshadowing or doing away with the actual function of the blog. At some point, I think Ben’s idea for a lifestream is optimal, but for now I’m happy with a more organized aggregation on the site.

So what you’ll find in this iteration of Repeat Penguin is more aggregated content, mostly present in a beefed up footer. I’m pulling in my streams from del.icio.us, last.fm, Upcoming, flickr and of course Twitter.

You will also find a cleaner separation in entry topics within the blog and a friendlier presentation for article content. I divided the site into two primary blog sections. Under articles, you will find more in depth posts about Web design and development. While under distractions you will find post of random amusement, interesting finds and reflections and a more comprehensive list of my recent bookmarks.

Together, these provided a more rounded view of my streaming life. I have consciously left out some facets of this stream, but I think this is a good overview. My goal was to create a personal hub for all of my activity around the Web, without doing away with the personal blog and I think the new design is a good starting point. Though the exact application and utility of the site may evolve over time, the framework is now flexible and adaptable.

I’ve been thinking redesign for quite some time. It’s not that I’m unhappy with my current design. It is because I’m unhappy with my current design. Well, at least with the limitations it presents and how it influences how and what I write. So, I’m thinking it’s high time to take action.

Approach

Approaching a blog redesign can be a complicated process, so I started with two lists: one, a list of the problems the current design presents and two, a list of the design and branding considerations I wanted to preserve. The result, is a somewhat general requirements document and a somewhat more focused strategic plan. Yes, even for my own blog, I commit to some strategic planning.

I won’t publish these lists in their entirety, but the basic problems I would like to address in the new design, are centered around drawing more focus to the content of the articles, in other words, implementing a better use of white space, reducing superfluous clutter and providing greater expanse for the types of content on the site. The complicated part of redesigning a blog, is what to do with the archives. Do you port them over to the new design? Or, do you let them stay in their original environment and risk incongruity with the new design?

This question relates to the concerns in both of my lists, but at the same time, could be restricting in my design process, if taken as a primary concern. So, for the time being, I think I’ll put it aside. Instead, I want to focus on architecture, UI and branding.

To assist in this process, I thought it would be helpful to look at a few of the blogs that I read regularly, that have undergone recent redesigns.

Recent Redesigns

jasonsantamaria.com

I recently had the opportunity to sit down and talk to Jason Santa Maria about his new blog redesign, at An Event Apart San Francisco. The particular problem he was aiming to address in his redesign, had to do with the challenge of story telling by design.

Jason said he was interested in solving the problem of disassociation between design and content, that is often found on the web. Primarily, the design you find on the web can be starkly contrasted to that found in print, wherein print design tends to be much more contextual, in that it supports content it relates to. The biggest factor responsible for the divide between print and Web, is arguably that of technology and convenience. That is, until recently.

It may not be appropriate in all situations, but Jason has embarked on an experiment of sorts, with his blog. His goal was to bring a contextual relevance to his design, specific to the article or post. By taking advantage of the flexibility of Expression Engines’ tag structure and some smart coding, Jason is able to easily customize his design to suit each particular post. He writes more about this, on his blog.

While I’m fascinated by the idea, I think this could also be restrictive or even commanding over what and how I write, since I am both author and designer, and primarily because I have a hard enough time making time to write, as it is. However, I do think there is a lot to be gained by Jason’s experiment and always look forward to his next post.

Departing from Jason’s emphasis on telling stories through design, I have found that there is a strong trend in minimalism among recent blog redesigns. I mention redesigned blogs, as apposed to new blogs specifically, as an issue of authority. Decisions made in a redesign are usually made to address certain problems that the previous design presented. For this reason, I find recent trends in redesigns to be informative on a level new designs are not.

www.emilychang.com

Among the blogs setting this trend in declutterfied redesigns, is Emily Chang’s well known blog. Factors that led her to return to a cleaner presentation, were centered around content and her relationship to the site.

…changes in the works have to do with the content, focus, and my relationship with the site. It’s been feeling a bit stale for me so I’d like to shake it up and start lifeblogging.

~ Emily Chang

For me, this was an interesting insight, as it sums up quite nicely how I’ve been feeling about my own site and what I suspect to be the underlying motivation for other designers and organizations who embark on redesigns. A redesign is a unique opportunity to reassess the direction you have taken and evaluate which aspects are working and which are not. A redesign, like a soft revolution, is a valuable step in the evolution of a site and integral to maintaining a healthy web presence.

In addition to our objectives to refocus information architecture, broaden the scope of content and strengthen the personal relationship between the author/publisher and the blog, we find that the purveyance of brand recognition becomes a strong component in a redesign.

clagnut.com

Richard Rutter’s recent redesign of Clagnut is a shining example of persistent brand evolution, through redesign. What makes Richard’s redesign of Clagnut interesting, is that he was able to both give his site a complete redesign, from layout to color palette, and yet still retain, if not strengthen the overall branding. In a sense, this is the true test of good branding. When it’s done correctly, it gives you a feeling that this is how it’s always been, how it needs to be.

This kind of brand retention is weighing in pretty heavily on me as I consider redesigning Repeat Penguin. While I certainly want to allow myself the freedom to rethink the site as a whole, the intuitive carryover in brand is a big factor. I think all three of these sites have handled this very well and they have all given me a lot to think about when working my own redesign.

I’m looking forward to making the time.