As part of our series on how we built Queued, today we’re going to talk about theming the Queued application, and touch on a few examples of what made putting the skin on Queued so much fun.

The foundation for the beautiful theme for Queued was laid down by colleagues Damon Dimmick and Torrey Rice, and their amazing wireframe and mockup work (respectively) provided the building blocks for laying down Queued’s skin.

(more…)

Visual Translation

As with every SitePen project, we started out Queued with a set of written requirements that defined what the app should do. From that set of requirements, the design team began to define common user goals and create wireframes that detailed how the user would achieve these goals.

We created a set of wireframes for every screen in the app and then the visual fun began. What should it look like?

(more…)

Sometimes building an application from scratch is easier than building on an already existing interaction model. For Queued, our goal was to take the Netflix user experience and port it to a lightweight desktop application, while adding some modest enhancements.

Creating an alternate interface for an already well-known web site carries some unique responsibilities. First, unless there is something seriously wrong with the original site, straying too far from the established model can be counterproductive. Second, innovating on existing features becomes more important than replacing them. And third, adding new interface functionality without obstructing existing interactions remains a crucial consideration.

For the Queued project, SitePen faced the additional challenge of showing off features of Adobe AIR that might not necessarily lead to the most fluid interaction, but which were powerful enough to merit inclusion as a demonstration of AIR’s powerful capabilities. We’ll discuss a few of our interaction changes here, though these aren’t the only modifications that we decided to implement.

(more…)

Last month, we announced Queued, an open-source application for managing your Netflix Queue. Queued is a desktop application created with web technologies and techniques including the Dojo Toolkit, and it is distributed as an Adobe AIR application to provide several performance boosting benefits from living on the desktop.

At SitePen, we help our clients build great web applications. Most are not available for public consumption as they live behind company firewalls and/or require licensing. On the other hand, Queued is free and open-source software, BSD-licensed, and hosted on Google Code.

(more…)

Dijit has a tremendous wealth of high quality and feature-rich form elements providing key functionality including validation, time calculation, spinner controls, calendars, and much more. Furthermore, Dijit gives you a set of themes to choose from: Tundra, Soria, Noir, and Nihilo.

(more…)

From the perspective of a web designer with experience predominantly in HTML and CSS (the content and presentation layers), the behavior layer can seem a bit mystical. The behavior layer focuses on interactivity; unfortunately, it is a layer that can easily get lost, overlooked, or simply ignored in the collection of obligations that lay at the web designer’s feet—especially those who work for themselves, or who are within an organization as the sole “web person.” To all the multi-hatted, multi-tasked designers out there, this article is an introduction to Dojo, a JavaScript toolkit that makes adding oomph to the behavior layer (and so much more) really easy to do.

(more…)

The new Dojo Search is now live. I worked on creating this with the goal of showing how much information there is out there about the Dojo Toolkit and supplying a way to aggregate that information in a central location. Now you can search all of Dojo’s Resources instead of dojotoolkit.org alone. Most of the time if you have a question, it’s already been asked and answered!

The Dojo community is large and there is a lot of great information spread out across the vastness of the web. The Dojo Toolkit has been around for a while and has undergone numerous additions and improvements since its inception. Unfortunately, some of the documentation and valuable data needed by users and enthusiasts is decentralized. Dojo Search is designed to help alleviate this problem.

(more…)

The design and styling elements that make up the Web 2.0 mantra have been defined by—among other things—rounded corners, transparency, and drop shadows. These three concepts have been key in many CSS-driven web applications or sites. (For examples of some great CSS-driven work, check out cssvault and cssBeauty.) Following the CSS2 recommendation, for years we’ve been using a combination of code and images to make these types of things possible.

My colleague, Torrey Rice, has touched upon unofficial CSS advancements in Safari 3.1 in his discussion about CSS animations, so I’ll focus on advancements that are part of ongoing CSS3 drafts. While CSS 3 as a whole is much maligned, we can use some of the properties that have already been implemented in today’s browsers with just a few simple lines of CSS. Dijit Themes for the Dojo Tooolkit already take advantage of these enhancements where it makes sense. Of course, you can also customize or write your own theme taking advantage of CSS3 wherever possible.

(more…)

Today we’re continuing our series on finding the best tool for creating wireframes, mockups, and designing interaction in a collaborative development environment. Since we’re primarily interested in solutions that fit the kind of fast and lean development environment we have at SitePen, we’re skipping some of the established solutions in favor of more down-to-earth software tools that are suitable for smaller teams and organizations.

Last time we reviewed OmniGraffle from the OmniGroup, which is SitePen’s swiss-army knife, the go-to application that we use for most of our initial wireframing and interaction design.

(more…)

A frequently overlooked and underused feature of Dojo’s Drag-and-Drop (DnD) module is drag handles.

DnD is commonly implemented as a set of draggable elements where the entire DnD item (usually a subtree of DOM nodes) can detect the drag action. In some cases, this is not desirable:

• DnD items that contain active elements: links, text areas, buttons, check boxes, other common form elements. The drag action can prevent normal interactions with them, e.g., text selection inside text boxes.
• Large DnD items that occupy most of screen. Frequently these items have collapsed and expanded states, and should not be dragged while expanded.

(more…)