The most important feature is the possibility to change the grid setup by simply chaning some -blueprint-grid parameters.

/* Grid setup */
$-blueprint-grid-columns:24;
$-blueprint-grid-width:30px;
$-blueprint-grid-gutter:10px;

There is no documentation right now, but i want to share at least the grid.scss with you.
If you want to try on your own ensure you have at least SASS version 3.1 installed as this snippet use custom SASS functions.

/* Grid calc function */
@function -blueprint-grid-width($n) {
	@return $n * $-blueprint-grid-width + ($n - 1) * $-blueprint-grid-gutter;
}

/* A container should group all your columns. */
.container {
  width: -blueprint-grid-width($-blueprint-grid-columns);
  margin: 0 auto;
}

/* Use this class on any .span / container to see the grid. */
.showgrid {
  background: url(src/grid.png);
}

/* Use these classes to set the width of a column. */
.column {
	float:left;
	margin-right:$-blueprint-grid-gutter;
}

/* The last column in a row needs this class. */
.last { margin-right: 0; }

@for $i from 1 through $-blueprint-grid-columns {
	.span-#{$i} {
		@extend .column;
	}
	.span-#{$i} {
		width: -blueprint-grid-width($i);
		@if $i == $-blueprint-grid-columns {
			margin-right:0;
		}
	}
}

/* Use these classes to set the width of an input. */
input.span {
	border-left-width: 1px;
	border-right-width: 1px;
	padding-left: $-blueprint-grid-gutter / 2;
	padding-right: $-blueprint-grid-gutter / 2;
}
@for $i from 1 through $-blueprint-grid-columns {
	input.span-#{$i},textarea.span-#{$i} {
		@extend input.span;
	}
	input.span-#{$i} {
		width:-blueprint-grid-width($i) - $-blueprint-grid-gutter - 2;
	}
}
@for $i from 1 through $-blueprint-grid-columns {
	textarea.span-#{$i} {
		@extend input.span-#{$i};
	}
}

/* Add these to a column to append empty cols. */
@for $i from 1 through ($-blueprint-grid-columns - 1) {
	.append-#{$i} {
		padding-right:-blueprint-grid-width($i) + $-blueprint-grid-gutter;
	}
}

/* Add these to a column to prepend empty cols. */
@for $i from 1 through ($-blueprint-grid-columns - 1) {
	.prepend-#{$i} {
		padding-left:-blueprint-grid-width($i) + $-blueprint-grid-gutter;
	}
}

/* Border on right hand side of a column. */
.border {
  padding-right: $-blueprint-grid-gutter / 2 - 1;
  margin-right: $-blueprint-grid-gutter / 2;
  border-right: 1px solid #ddd;
}

/* Border with more whitespace, spans one column. */
.colborder {
  padding-right: ($-blueprint-grid-width + 20) / 2 - 1;
  margin-right: ($-blueprint-grid-width + 20) / 2;
  border-right: 1px solid #ddd;
}

/* Use these classes on an element to push it into the next column, or to pull it into the previous column.  */
.pull {
	float:left;
	position:relative;
}
@for $i from 1 through $-blueprint-grid-columns {
	.pull-#{$i},.push-#{$i} {
		@extend .pull
	}
	.pull-#{$i} {
		margin-left:- -blueprint-grid-width($i) - $-blueprint-grid-gutter;
	}
}

@for $i from 1 through $-blueprint-grid-columns {
	.push-#{$i} {
		margin:0 -(-blueprint-grid-width($i) + $-blueprint-grid-gutter) 1.5em (-blueprint-grid-width($i) + $-blueprint-grid-gutter);
	}
}

/* Misc classes and elements
-------------------------------------------------------------- */

/* In case you need to add a gutter above/below an element */
div.prepend-top, .prepend-top {
  margin-top:1.5em;
}
div.append-bottom, .append-bottom {
  margin-bottom:1.5em;
}

/* Use a .box to create a padded box inside a column.  */
.box {
  padding: 1.5em;
  margin-bottom: 1.5em;
  background: #e5eCf9;
}

/* Use this to create a horizontal ruler across a column. */
hr {
	background: #ddd;
	color: #ddd;
	clear: both;
	float: none;
	width: 100%;
	height: 1px;
	margin: 0 0 17px;
	border: none;
	&.space {
		background: #fff;
		color: #fff;
		visibility: hidden;
	}
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */
.clearfix, .container {
	display: block;
	&:after {
		content: "\0020";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		overflow:hidden;
	}
}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }

How to use:

<select name="network" >
 <option value="1" img="img/network.png">The first entry</option>
 <option value="2" img="img/network.png">The second entry</option>
 <option selected="selected" value="3" img="img/network.png">The third entry</option>
 </select>

<select name="something" >
 <option value="1">The first entry</option>
 <optgroup label="Group 1" img="img/network.png">
 <option value="1.1">The first entry</option>
 <option selected="selected" value="1.2">The second entry</option>
 <option value="1.3">The third entry</option>
 </optgroup>
 <optgroup label="Group 2" img="img/network.png">
 <option value="2.1">The first entry</option>
 <option value="2.2">The second entry</option>
 <option value="2.3">The third entry</option>
 </optgroup>
 </select>

The example has been built and tested with blueprint 1.0 and jquery 1.4.3. It should also work with older jquery/blueprint versions and porting to other JS-libraries should be easy.

Here is the example page.

Goto Example.

Go for the CSS file. Download .css file.

Go for the JS file. Download .js file.

yeah.. but what?

Nothing happened, this is maybe a bit unfair, but from a user’s view, really nothing happened, even simple design and UI-rules have not been followed and the old problems of the interaction design are still the same or worse (A nice new game is, “Find the Save-button”). I do not want to bash Typo3 or it’s developers, but the following points prevents me from using Typo3 as a base for new platforms.

1. Who has the smallest…… icons?

Is anyone able to explain me why are there still more than 20 buttons on the left-navigation-bar? What is about a common application-layout and a categorized menu? (have a look at Webedition)

The icons are to small and they are simply not modern (Even Joomla has this kind of glossy icons). Everyone knows the bigger-is-better Web 2.0 aesthetic and it simply works, if you do a direct comparison of web-user-interfaces (content-management) and you compare WordPress with Typo3, Typo3 simply sucks. WordPress is easy-to-use from the first minute and for more advanced users it still have advantages too. F.e. if you do a lot of publishing, you will be much faster with WordPress than with Typo3.
You might think i am comparing apples with oranges but from a editor’s view, where is the difference?. HtmlArea vs. TinyMCE, Categories vs. site-tree, these things are all the same for an editor…

2. Performance, User-experience
One statement in the release notes is, that the performance of the worflow has been increased. There were several points listened, but i want to mention one. The AJAX-driven-site-tree. Ok, it’s cool, but in 4th year a.O (this is my personal time period of Web 2.0: “b.O” means before O‘Reilly mentioned Web 2.0 and “a.O” for after O‘Reilly… ok sad joke) it should be a standard for rich-applications. But if you have ever worked with the “Categories”-Panel in WordPress you will recognize how bad the tree is made in Typo3. Even if i work alone on my local test machine(Core2Duo, 4Gb RAM, Win x64) the whole Typo3 interface is so annoying to work with, because of the high response times after an action, that i always think that no Typo3 developer uses his own system to work in a daily workflow.

I have an execise for you.

Take your “blog” and move it to Typo3, than write at least 3 articles a week with images inside and some common layout-elements like lists, after a period of one or two month move your blog to a blogging-software like WordPress or MovableType and do the same again. You only have to do this if you don’t believe me that you will never go back to Typo3 for this kind of use.

3. Workflow, no… not for developers, for those who have to use the system daily

From a developer’s perspective Typo3 is a great system, modular, extendable, Open-Source, well-written-codebase, etc. etc. But a developer only sees the system a short time and afterwards the editor’s have to spend most of the time with Typo3.
In the last years i have met a lot of Typo-developers and Typo-editor’s and the major problem i recognized is complexity.

Complexity, not only from a editor’s view, also the average developer is overstrained with the system. Nearly every Typo3-setup i see was not done by an Typo3-expert. Most of the time a small web-agency has to follow the wishes of their clients and lots of them have heared from Typo3. “Ouh i have heared about a CMS, it’s completely free and it’s superduper easy to use and you have nothing to build on your own, so it will be very cheap to build our new site with it….”. Wuäh…. i hate this statements from the marekting-executives.
The problem is, that all this “cheap”-setup’s are completely misconfigured and after a period of time, most of the editor’s are completely disappointed by Typo3. This is a real problem. I does not happened once or twice that a client asked me for a Typo3 alternative because they are not able to use it…. So, a Typo3-expert will have problems to sell his profession.

I think, this is not what the Typo3-association wants!

My suggestions

One solution could be, to preconfigure an easiest-to-use Typo3-setup that is as simple as WordPress to install and configure.

Next step should be asset-management. Have a look at the WordPress-image-upload. It should be that easy to include images, videos or sound.

Improve the speed of the UI and improve the UI-design. Have a look at libraries like extjs, i think it’s easier to develop a new frontend with it than to develop your own UI-solutions.

Reduce the options a user have. F.e. if i want to write an article with text and an image, why i have to choose a lyout before i could start to write. I want to include images, videos and sound on-the-fly during i write an article.

A tabbed menu should never be needed, i don’t think that an editor should be in a position where he has to make 3 great decisions for one article.

Increase the size of all fonts and start to layout Typo3 menu/sites from a typographic/interaction-designer-perspective.

Increase the size of all buttons and take well-designed icons.

Make heavy and right use of AJAX.

Animation is not an overload if you use it well.

Instantly show context-sensitive-help-bubbles if you move over a button, and do not use the typical “title” or “alt”-tag html solution, A real-context sensitive help should include more information than the button-name.

And finally, work on the steps to publish a new article. Why should i create a categorie or page before i can start to write an article. In Typo3 there is the possibility of “already-opened-documents”. Sort this documents in tabbed layouts (look at some of the great new RIA’s developed in the last months).

Some of this points above, are not the fault of the Typo3-developers. But an application like Typo3 could only be succesful if the editor’s like it. And the great problem of misconfigured Typo3-systems has to be solved. I think the decision that has to be made is, “hide complexity from the user” !

http://www.marchofdimesbaby.org/

Carmen Treichl, Camera, Motion Design & Print


Thomas Beyr, Photography & Video


Daniel Triendl, Design & Interactivity

Aviary describe themselves as follow

“Aviary is a suite of web-based applications (RIAs) for people who create. From image editing to typography to music to 3D to video, we have a tool for artists of all genres.”

I first read about Aviary 2 or 3 months ago. Nearly everywhere in the net, developers create some new stunning RIA’s, but i was never that impressed than i first have seen the Aviary project. Cool icons and graphics, well designed project pages and great palette of upcoming tools. Look also at their blog, there a lots of cool YouTube videos and great examples of images made with Aviary tools.

I get my Early Bird Invitation for Phoenix last week, which includes 5 additional invitations. First five comments will get an invitation from me, if you don’t want to post your mail here(we all know why), simply write me an email.