Articulated

Libraries and frameworks

There is no doubt that jQuery and other Javascript libraries (such as the less popular MooTools) have changed the way that the web-based user interfaces are constructed. They have made client-side engineering (once a term I never heard) possible. They have removed the need to address differences in the document object model and holes in the imperfect implementations some browsers (cough-IE!) employ. They have made event handling much simpler. Read the rest of this entry »

Mid-project debrief

Since the middle of December I have been working on a project design and help build an educational website for doctors. The project is a collaboration between a professional organization, a consultancy, a solopreneur, and the company I work for. The project has not always proceeded without problems and I’ve spent time thinking about how my work process and client interactions will change the next time I have a similar assignment. Read the rest of this entry »

HTML 5 takes us back to the future

The more things change the more things stay the same.

A collection of evolving technologies for media development are bringing us backwards in time, or perhaps around to, and ultimately through, the old promise of digital design and into a new world where designers can once again be designers, leaving the production to the professionals. Read the rest of this entry »

The visual display of… Part 2

Continuing with my review of Tufte’s “The Visual Display of Quantitative Information”, I turn my attention to an adapted theory of graphics. This part of Tufte’s thesis is delivered in several parts.

Maximize the amount of meaningful ink

This first rule in the theory of graphics is difficult to directly adapt to graphic design. The idea here is that meaningless graphic elements should be minimized or removed, clearing the visual field for “ink” that actually conveys information. In general, designers must realize that everything in the visual field contributes to the message that is conveyed by the composition. Designers, like cinematographers, must make smart choices about the items that appear in the visual field, adding or removing items to ensure that the message is not being distorted, muddied, or incorrectly conveyed. Ideally, every element in the visual field contributes to the original concept or the specific message. If there are elements that do not, the designer must ask if they are necessary and remove or replace them if they are not.

Avoid graphic junk

Often, there is a desire to “dress up” information. This kind of graphic excess generally has nothing to do with the original visual concept or the subject of the content. It is simply an artistic conceit or an effort to make something that is considered visually “boring” a little more interesting. Tufte’s theory indicates that, instead of making the content more interesting, this kind of graphic junk distracts from the content. Ultimately, there is no substitute for good content, and bad content will not be rescued by superfluous graphics. The best thing is to stick to the original concept and clearly communicate the content.

Make graphic elements perform more than one function

Graphic elements can be employed for multiple uses in a visual composition. They can simultaneously contribute to the form of the composition and the communication of the content. When constructing a composition, make the most of each graphic element. This approach improves the efficiency and effectiveness of the design.

Maximize the information density

This is perhaps the most difficult principle to generalize. You could simply translate this idea to “don’t waste space”, but the actual meaning is a bit more complicated. For data displays, this idea makes sense. The most interesting data displays deal with very large sets of data. Displays of very small sets of data are not very interesting. In a way, the principles provided above will lead to a maximum of information in the visual field.

In addition to these principles, Tufte offers a number of techniques that can be used to build data graphics. These principles should be very familiar to designers and are easily generalized from his specific concern about data graphics to the larger practice of graphic design.

1. Chose an appropriate format for you design. The appropriate format will be informed by both your content and your concept.
2. Integrate the content with the visual elements
3. Construct your composition with a sense balance and scale that fits your concept and content.
4. Make the information accessible. In other words, effectively communicate the content.
5. The technical construction of your design should be flawless
6. Avoid unnecessary, distracting graphic elements.

Occasionally, Tufte repeats himself. I am currently working through the second of my set of four Tufte books, “Beautiful Evidence”. Many of the ideas presented in “Quantitative Displays” are echoed in this second book. However, the repetition – the reminder – is beneficial. These principles of design, particularly the design of information and data, are critically important. Designers help communicate information in a visual manner. While it is important for designers to have a talent for artistic manipulation, that talent is ineffective if successful communication is not achieved. Designers should not overlook this obligation to the audience and always remember that the work we do is a service for the audience as much as it is a service for ourselves or our clients.

The visual display of… Part 1

I recently finished reading Tufte’s “Visual Display of Quantitative Information”. As the title suggests, the book is concerned primarily with the design of data graphics. However, while reading the book I could not help but think of my first few design classes at Pratt. These foundational classes provided a forum for exploring the basic principles of visual communication and graphic design. The principles of graphic excellence for data displays that Tufte promotes in his writing mirror or are analogous to the principles of general visual communication. From this perspective, I found his book to be a wonderful reminder. There are so many things a designer must be aware of in the creative process. It can be overwhelming. I think good graphic designers have practiced enough to have made this awareness part of their nature. Alas, I still need to be reminded. Often.

In this book, Tufte presents three distinct ideas which can be generalized for graphic design:

1. The principles of graphic excellence
2. The source of graphical integrity
3. A theory of (data) graphics

I’ve paraphrased/rewritten Tufte’s three ideas in a generalized form that is applicable for all graphic design.

The principles of graphical excellence

Graphical excellence is the well-designed presentation of interesting information – a matter of substance and design. Graphical excellence communicates ideas with clarity, precision, and efficiency. And graphical excellence requires telling the truth. (from page 51)

It is this last part that I find most compelling. There is a consistent and prominent moral component to Tufte’s analysis of data graphics and his theory of data graphics. He is concerned with honesty and avoiding both lies and deception. This is something that designers don’t often think about (or don’t really need to think about) as we are so often not in control of the content. But as creators of the media that communicates to large audiences, it is, I think, good to remember that there is an ethical component to our work.

The source of graphical integrity

Graphical competence demands different skills: substantive and artistic. Substantive expertise must participate in the design of visual communication if the integrity of the content is to be preserved and graphical sophistication is to be achieved. (from page 87)

Information will be most effectively communicated if the designer understands the content or works closely with a subject matter expert. If, as a designer, you do not understand the information, how can you possibly create a graphic design that communicates that information in an effective way. It would be like giving an English-speaking designer text in traditional Chinese and asking that person to create a page layout with that content. Designers need to work closely with their clients to understand the information and create effective and sophisticated graphic designs.

To be continued…

Web type, layout and testing

A List Apart’s most recent issue is about web type. There is a lot of chatter on this topic. Some of it has to do with the launch of Typekit, a web service that allows licensing of fonts for use on the web. In addition to Typekit, ALA also mentions Typotheque and Kernest. I’ve been using a few good free fonts from FontSquirrel for my websites along with my own font. Clearly, web fonts are going to explode in 2010. Along with mobile websites, this is clearly the next leap web designers have to take.

The articles also had numerous links to online resources for web designers. I liked:

• Web Font Specimen a tool for testing the display of fonts that are applied to a web page using @font-face
• Litmus a fee-based service for browser testing. This is a much more user-friendly and reliable version of what Browsershots does for free.
• 960.gs is a CSS resources for developing a website using the very popular 960px grid system. Grid systems are a good idea in general. This is just one of many possible systems.

The deep end

It could be a mistake, but I am attempting to construct my new website home page using Flash and ActionScript 3. Unlike the more accessible ActionScript 2, AS3 is a real programming language. I am not a real programmer. This could be a difficult project.

The difficulties begin with the documentation. I think the authors of the Flash Help pages assumed the readers would be programmers. Learning AS3 means learning to understand the terms used to describe the various objects, parameters, and methods provided for by the language.

Testing is also difficult. Some of the actions I want to enable are simple: button states, status checks. Some are more difficult. I have become a fan using interactions between Flash and HTML and the things that jQuery can facilitate. When I start incorporating AJAX requests, the points of failure in the test of any feature multiples. Is there a problem with my ActionScript, the JavaScript, or with the resource I am requesting through AJAX?

A starting point for solving these problems might be the development of a better error tracking scheme. Within the Flash authoring environment, I can use trace actions. Flash will also generate error message when something is wrong. JavaScript errors can be tracked using Firebug (something I have learned I cannot live without). But when a SWF file is being run within an HTML page, there is no easy error checking. Any error messages must be tracked with event listeners. The output needs to be displayed on the animation stage. Perhaps I should create a reusable widget that can be applied to any Flash file for tracking this information.

I am also struggling with justification for using Flash. Most (but not all) of the actions I’d like to enable with Flash could be done using HTML/CSS/jQuery. Why go through the pain of developing all or parts of my website using Flash? The answer I come back to is “so I can learn to swim.” Sometimes, the best way to learn something is to jump into the deep end. The knowledge could be valuable.

Script to script

Warning: this post is for client-side engineering geeks. This is not for designers. Run away now.

Using Flash, I have developed a widget that can easily be applied to a website. The widget loads data from an XML file and creates an interactive interface for viewing the data. For my latest client, I decided to modify the widget to read data from the HTML page containing the widget, rather than from an secondary file. I want the HTML page to display the data for visitors who do not have the Flash browser plug-in and serve as the source of data when the widget is displayed for visitors who do have the Flash plug-in.

To make this happen, I tried to send the HTML-structured data to Flash using SWFObject and flashvars. jQuery code identified the HTML element containing the data, assigned it to a variable, and passed that variable to Flash when the widget was loaded into the page. Within Flash, the function normally used to process XML was modified to parse the data in its HTML format. This was a failure. I was unable to get Flash to recognize the contents of the variable as and XML object.

For my second attempt, I tried something more sophisticated. I used jQuery to parse the HTML structured data and convert it into an array of objects. Each object represented a data point. I thought this would be easier. Instead of parsing the data using ActionScript, I could send Flash “pre-packaged” information. Unfortunately, I failed to realize the limits of the SWFObject and flashvars. Flashvars is an object but the object nodes must be strings. When I tried to pass my array to Flash using flashvars, the array was converted into one very long string.

Banging my head against the proverbial wall did finally yield a solution with many potential uses. Instead of trying to pass data to the SWF all at once, I used jQuery to process the data and pass each data point to the SWF as a function call. This is possible using Flash’s ExternalInterface object.

ExternalInterface allows Flash to interact with JavaScript in the containing page. In addition, you can access  ActionScript functions in the SWF by creating a reference to the <object> in the HTML that contains the SWF. Using jQuery, doing so is simple.

var pointer-to-swf = $("body").find("object").get(0);
(assuming the only <object> tag in the page is for the swf)

Once the pointer is created, you can access ActionScript functions like so:

pointer-to-swf.ASFunction(params);

To solve my particular problem, I used jQuery to gather data from the HTML in the page. The data was then passed to Flash as a function call. The ActionScript function accepted the data and added it to the display.

ExternalInterface is not a new thing. Communicating between ActionScript and JavaScript has been possible for a while now. However, jQuery has only recently made it possible to easily manipulate HTML and perform AJAX methods. Combining jQuery with the ability to communicate with and control Flash opens up some big doors.

The biggest discovery, for me, is an alternative to flashvars or data loading methods within ActionScript. I can, instead, pass information to Flash as needed using jQuery.

Mobile Me

Several friends have created their own start pages. There are online services that do this for you – basically a way to have online bookmarks. It’s a good idea. I don’t always work on one computer or with one web browser, and keeping bookmarks synchronized is not feasible. So a personal start page is a nice solution. It also allows you to design what it looks like and organize the content to fit precisely to the way you work – if you’re so inclined.

I finally realized that there were too many good links I’ve forgotten. I’ve used Facebook and this blog and my web browser to save links that I felt were worthy of remembering, but that’s too many places. I don’t always browse my bookmarks or read old posts, so the links are forgotten. By creating a personal start page, I can always have these links at hand. I’ll remember to return to these sites and see what’s new. And my personal page can accessed wherever I have an internet connection.

Which brings me to the next part of this endeavor. My connection to the internet is often my phone. So I should have the page bookmarked in a way that’s easy to get to. The iPhone provides a great way of doing that. You can create a button on the home screen of the phone that will link you directly to a web page. It’s like a bookmark, only better. And it works for any web page. Unfortunately, the default icon that the iPhone creates for a web page is a very tiny thumbnail of that web page. This is basically useless. I don’t understand why they didn’t just use the site favicon. Apple did provide for something very similar to a favicon. If you place a 57×57 pixel png file named “apple-touch-icon.png” in the root directory of your site, the iPhone OS will use that image as the icon for your bookmark button. The OS will even round the corners of the image and apply the “shiny surface effect” to the icon. More about how this works can be found in this blog post by Drew McLellan.

Of course, bookmarking my personal start page is only the first step. To do this right, my start page should appear properly formatted for mobile viewing when I am on my phone. The iPhone will display normal web pages, but they are not the most convenient for the small screen. When it comes to mobile web pages, one of the best examples is the ESPN website. They did an amazing job creating a first rate browsing experience for mobile viewers. Their site is complex, so they serve up a completely different set of pages to mobile viewers. I am creating a single page. I’d like to accomplish my goals using CSS.

ESPN will serve as a useful case study for a mobile site. I suggest using a development tool to load their mobile web pages on your computer and inspecting the code. They’ve done nice work. However, to differentiate the look of a site for different devices using CSS, I suggest starting with an article from A List Apart that was published earlier this year. They break down the basics. David Storey also has a good post about developing for the iPhone on My Opera.

I still have work to do, but the beginnings of my mobile stylesheet are in place. It seems to work like a charm. I’m going to have fun when I start developing mobile websites for clients.

@fontface resource

I stumbled upon an awesome website today. It is called FontSquirrel. FontSquirrel is one of the many online free font catalogs. Unlike the others, this website offers something unique: @fontface kits. A kit is a collection of font files and CSS code that you can download install for your website. This is a wonderful tool for website designers. The @fontface protocol is relatively new. It’s nice to see online resources finally providing fonts and tools for designers to take advantage of the capability. It really opens the door, at last, for online type freedom.

FontSquirrel also has a very interesting tool offered in as a “beta”: the @fontface kit generator. You can upload a font and have the website convert it into one of their kits, complete with proper font formats and CSS code. Obviously, they would prefer you to obey license agreements from foundries. However, if you’re like me and you have your own TTF fonts, you can have their generator provide you with the files required to deploy your font online. Way cool.