Wednesday, March 26, 2008

Understanding Web Design

We get better design when we understand our medium. Yet even at this late cultural hour, many people don’t understand web design. Among them can be found some of our most distinguished business and cultural leaders, including a few who possess a profound grasp of design—except as it relates to the web.
Some who don’t understand web design nevertheless have the job of creating websites or supervising web designers and developers. Others who don’t understand web design are nevertheless professionally charged with evaluating it on behalf of the rest of us. Those who understand the least make the most noise. They are the ones leading charges, slamming doors, and throwing money—at all the wrong people and things.
If we want better sites, better work, and better-informed clients, the need to educate begins with us.
Preferring real estate to architecture
It’s hard to understand web design when you don’t understand the web. And it’s hard to understand the web when those who are paid to explain it either don’t get it themselves, or are obliged for commercial reasons to suppress some of what they know, emphasizing the Barnumesque over the brilliant.
The news media too often gets it wrong. Too much internet journalism follows the money; too little covers art and ideas. Driven by editors pressured by publishers worried about vanishing advertisers, even journalists who understand the web spend most of their time writing about deals and quoting dealmakers. Many do this even when the statement they’re quoting is patently self-serving and ludicrous—like Zuckerberg’s Law.
It’s not that Zuckerberg’s not news; and it’s not that business isn’t some journalists’ beat. But focusing on business to the exclusion of all else is like reporting on real estate deals while ignoring architecture.
And one tires of the news narrative’s one-dimensionalism. In 1994, the web was weird and wild, they told us. In ‘99 it was a kingmaker; in ‘01, a bust. In ‘02, news folk discovered blogs; in ‘04, perspiring guest bloggers on CNN explained how citizen journalists were reinventing news and democracy and would determine who won that year’s presidential election. I forget how that one turned out.
When absurd predictions die ridiculous deaths, nobody resigns from the newsroom, they just throw a new line into the water—like marketers replacing a slogan that tanked. After decades of news commoditization, what’s amazing is how many good reporters there still are, and how hard many try to lay accurate information before the public. Sometimes you can almost hear it beneath the roar of the grotesque and the exceptional.
The sustainable circle of self-regard
News media are not the only ones getting it wrong. Professional associations get it wrong every day, and commemorate their wrongness with an annual festival. Each year, advertising and design magazines and professional organizations hold contests for “new media design” judged by the winners of last year’s competitions. That they call it “new media design” tells them nothing and you and me everything.
Although there are exceptions, for the most part the creators of winning entries see the web as a vehicle for advertising and marketing campaigns in which the user passively experiences Flash and video content. For the active user, there is gaming—but what you and I think of as active web use is limited to clicking a “Digg this page” button.
The winning sites look fabulous as screen shots in glossy design annuals. When the winners become judges, they reward work like their own. Thus sites that behave like TV and look good between covers continue to be created, and a generation of clients and art directors thinks that stuff is the cream of web design.
Design critics get it wrong, too
People who are smart about print can be less bright about the web. Their critical faculties, honed to perfection during the Kerning Wars, smash to bits against the barricades of our profession.
The less sophisticated lament on our behalf that we are stuck with ugly fonts. They wonder aloud how we can enjoy working in a medium that offers us less than absolute control over every atom of the visual experience. What they are secretly asking is whether or not we are real designers. (They suspect that we are not.) But these are the juniors, the design students and future critics. Their opinions are chiefly of interest to their professors, and one prays they have good ones.
More sophisticated critics understand that the web is not print and that limitations are part of every design discipline. Yet even these eggheads will sometimes succumb to fallacious comparatives. (I’ve done it myself, although long ago and strictly for giggles.) Where are the masterpieces of web design, these critics cry. That Google Maps might be as representative of our age as the Mona Lisa was of Leonardo’s—and as brilliant, in its way—satisfies many of us as an answer, but might not satisfy the design critic in search of a direct parallel to, oh, I don’t know, let’s say Milton Glaser’s iconic Bob Dylan poster.
Typography, architecture, and web design
The trouble is, web design, although it employs elements of graphic design and illustration, does not map to them. If one must compare the web to other media, typography would be a better choice. For a web design, like a typeface, is an environment for someone else’s expression. Stick around and I’ll tell you which site design is like Helvetica.
Architecture (the kind that uses steel and glass and stone) is also an apt comparison—or at least, more apt than poster design. The architect creates planes and grids that facilitate the dynamic behavior of people. Having designed, the architect relinquishes control. Over time, the people who use the building bring out and add to the meaning of the architect’s design.
Of course, all comparisons are gnarly by nature. What is the “London Calling” of television? Who is the Jane Austen of automotive design? Madame Butterfly is not less beautiful for having no car chase sequence, peanut butter no less tasty because it cannot dance.
So what is web design?
Web design is not book design, it is not poster design, it is not illustration, and the highest achievements of those disciplines are not what web design aims for. Although websites can be delivery systems for games and videos, and although those delivery systems can be lovely to look at, such sites are exemplars of game design and video storytelling, not of web design. So what is web design?
Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.
Let’s repeat that, with emphasis:
Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.
She walks in beauty
Great web designs are like great typefaces: some, like Rosewood, impose a personality on whatever content is applied to them. Others, like Helvetica, fade into the background (or try to), magically supporting whatever tone the content provides. (We can argue tomorrow whether Helvetica is really as neutral as water.)
Which web design is like that? For one, Douglas Bowman’s white “Minima” layout for Blogger, used by literally millions of writers—and it feels like it was designed for each of them individually. That is great design.
Great web designs are like great buildings. All office buildings, however distinctive, have lobbies and bathrooms and staircases. Websites, too, share commonalities.
Although a great site design is completely individual, it is also a great deal like other site designs that perform similar functions. The same is true of great magazine and newspaper layouts, which differ from banal magazine and newspaper layouts in a hundred subtle details. Few celebrate great magazine layouts, yet millions consciously or unconsciously appreciate them, and nobody laments that they are not posters.
The inexperienced or insufficiently thoughtful designer complains that too many websites use grids, too many sites use columns, too many sites are “boxy.” Efforts to avoid boxiness have been around since 1995; while occasionally successful, they have most often produced aesthetically wretched and needlessly unusable designs.
The experienced web designer, like the talented newspaper art director, accepts that many projects she works on will have headers and columns and footers. Her job is not to whine about emerging commonalities but to use them to create pages that are distinctive, natural, brand-appropriate, subtly memorable, and quietly but unmistakably engaging.
If she achieves all that and sweats the details, her work will be beautiful. If not everyone appreciates this beauty—if not everyone understands web design—then let us not cry for web design, but for those who cannot see

Findability, Orphan of the Web Design Industry

Findability is to Search Engine Optimization (SEO) as “web standards” is to “table layouts.” In a web whose vastness exceeds comprehension, sites with findable content win. The good news is that everyone on your team can help make your site findable. Get a taste for this essential discipline from Aarron Walter, author of Building Findable.

Websites: Web Standards, SEO, and Beyond.

Labels: , ,

Silverlight XAML

Overview
Extensible Application Markup Language (XAML) is an XML based declarative language that is used in the Windows Presentation Foundation (WPF) and Silverlight to define the user interface and animations. Silverlight implements a subset of features that are available in the .NET Framework 3.0. Thus, certain features used with WPF, such as markup extensions using the curly braces ({ and }), are not available in Silverlight.
The goal of this document is to highlight the main differences from other XML formats you may be familiar with and the syntax you will need to understand to read and create XAML files.
Syntax
Namespaces
The following table lists the namespaces used by Silverlight XAML.
Namespace
Description
http://schemas.microsoft.com/winfx/2006/xaml
The general XAML namespace, usually prefixed with "x".
http://schemas.microsoft.com/client/2007
The Silverlight specific namespace. Note that this is different from WPF even though they share some of the same elements.
Silverlight 1.0 requires that the root node of the document be a element. The following example shows a minimal XAML document.
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">



Property Element Syntax
Standard XML lets you set values of elements using attributes or by using the content of an element. Property element syntax is a way to let you specify complex values for object properties. For example, setting a gradient with multiple color stops as a plain string would require specialized formatting that would not easily map to the underlying gradient object. It would also be extremely difficult to extend this format in the future while maintaining backwards compatibility. Property element syntax gives us an easy way to read values and an extensible mechanism that also maps to the actual objects used when manipulating the object in code.
The basic syntax is demonstrated below.


...



...



Thus our gradient example would look similar to the following. Note the use of property element syntax for both Rectangle.Fill and LinearGradientBrush.GradientStops. Rectangle.Fill contains a LinearGradientBrush object and its GradientStops property contains a collection of GradientStop objects.





















While the resulting code required tends to be verbose, it is much more readable for humans than attempting to shrink all of the information above into a simple string. It also leaves the content of the element free to hold the actual visual children that it may contain.
Attached Properties
Attached properties are a way to specify properties on any element, even if element does not natively have that property. Most often you'll see this used to set properties that are related to the parent of the element.






...







...



For example, setting Top and Left properties are actually dependent on the container in which the element is placed. In the following example, Top and Left are a feature of the parent where the resides.
If the was placed within a different type of layout container, such as a (not supported in Silverlight 1.0), the Top and Left properties would have no meaning as the placement of the object would be based on the Column and Row of the parent grid.

Height="50" Width="50" Fill="Maroon" />

Height="50" Width="50" Fill="Maroon" />


Another example is often seen with animations. A needs to know the target object and property of an . Note the use of parentheses to target an attached property.

To="300" Duration="0:0:1"/>

To="300" Duration="0:0:1"/>


Events
Events are defined in XAML using attributes in a similar fashion to HTML. The following example attaches the MyCanvas_Loaded() event handler function to the Loaded event of the element.
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="MyCanvas_Loaded">
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="MyCanvas_Loaded">

It is important to note that in Silverlight 1.0 the event handler functions must be in the JavaScript global scope. As this will make it impossible to create object oriented applications, it is usually better to hook up event handlers in code to achieve better encapsulation.
Triggers are also a way to start an animation purely in XAML without the need for event handler code. See Animation Basics for details including limitations.

Labels: , ,

Silverlight : Overview

Overview
Silverlight is a cross-browser, cross-platform browser plug-in to create Rich Internet Applications with support for vector and bitmap graphics, animation, and media playback. Silverlight applications consist of two main parts, the UI declaration using XAML and the program code. Silverlight is a subset of the Windows Presentation Foundation available in the .NET Framework 3.0.
Programming Prerequisites
Silverlight 1.0
Working knowledge of JavaScript
XML basics
Silverlight 2.0
Working knowledge of .NET and a managed language of choice
XML basics
Supported Client Platforms
Windows 2003/XP/Vista
Internet Explorer 6/7
Firefox 1.5/2
Windows 2000. Silverlight 2.0 only.
Internet Explorer 6
Firefox 1.5/2
Macintosh OS X 10.4.8+. Note! Silverlight 2.0 only runs on Intel processors.
Firefox 1.5/2
Safari
Linux, Project Moonlight (announced)
Firefox
Konqueror, WebKit, Opera (planned)
Mobile support has also been announced, but currently Microsoft hasn't released any specifics.
Supported Server Platforms
Supported web servers must be able to deliver .html, .js, .xaml, .zip and .dll (Silverlight 2.0) files along with any desired media assets. This includes Apache, Microsoft IIS, and other web servers.
Silverlight 1.0 and Silverlight 2.0
Silverlight 1.0 and the next release, currently numbered 2.0, share similarities in terms of using XAML as the declarative markup language, but differ vastly in their programming model.
Silverlight 1.0
Uses the browser's JavaScript engine for all code execution.
Is essentially a rendering and media playback engine.
Silverlight 2.0
Programmed using managed code running on the .NET managed Common Language Runtime (CLR).
Many languages to choose from: Ruby, Python, C#, Visual Basic, JavaScript, and more.
Client application level performance.
Expanded feature set.
Design & Development Tools
The minimum requirement to develop Silverlight 1.0 applications is a text editor. Silverlight 2.0 runs managed code which must first be compiled. Free .NET compilers are available in the .NET Framework SDK. However, there are many tools for both designers and developers available on the Windows platform.
Microsoft Silverlight 1.0 SDK
Microsoft Expression Suite
Microsoft Visual Studio
XamlPad, which is part of the .NET 3.0 Framework SDK, and similar tools
Adobe Illustrator to XAML export plug-in. This plug-in can create XAML for both the Windows Presentation Foundation and Silverlight.
Silverlight 1.0 and Case-Sensitivity
Please note that while XAML is case-sensitive, JavaScript used to script Silverlight 1.0 is not. This means you will have to make the decision whether to use JavaScript style camel-casing on method and property names (object.theMethod) or .NET style Pascal-casing (object.TheMethod). If you intend to port your Silverlight 1.0 application to 2.0, you may wish to use Pascal-casing to remove one extra step.
Our samples use Pascal-casing as this is the format used in the Silverlight SDK documentation method signatures (but not examples!) and this is what you'll see in Silverlight 2.0.
Further reading
Related information on the web is listed below.
Silverlight on Microsoft.com
Microsoft Expression Suite
Silverlight Reference on the Microsoft Developer Network
Moonlight, the Silverlight implementation for Linux
How to create Silverlight 2.0 Applications with Notepad
Sessions from MIX07