This is not how things work, right?

But it’s exactly how it works on the web. You have to type a password before using your laptop.You have to login before you can access Twitter, you have to login before ordering anything on Amazon, you have to login before using Facebook. And then, if you work in an office and don’t like to mix your job and your personal life in a single identity, you need to log out of all your accounts and log in again to your professional ones.

This is because the web today is based on logins. We are more then 10 years into the internet age and still we are identifying ourselves with usernames and password, a method that has already demonstrated to be incredibly difficult to manage for everyone, because the “good password policies” are too hard to apply for a normal person that just wants to send a photo to his grandmother.

Is the login paradigm a failure? Yes, and you’ll find plenty of evidence online. One of my favourite is this report form Trusteer (PDF) that shows how 73% of people share the critical banking username with other online services and 47% of them share both username and password. From a completely different perspective there are recurring discussions on where’s better to put the registration, because that boring detail hugely influences adoption. Check this excellent presentation by Joshua Porter on this very topic. Of course, this model served us well up until now. But this is not enough anymore.

I believe we should move away from logins, and embrace identities. Or, without getting too philosophical, move towards an interaction paradigm that looks more like real identities and less like cypher codes from Mission Impossible.

I’m surely not the first person thinking and talking about this, and even more there are lots of people out there working directly on this specific topic, taking one stance or another on how to solve the problem. There are products like 1Password and Passpack and there are also big companies like Google trying to push forward solutions, plus efforts like Mozilla BrowserID that are headed in this very direction.

This indicates two very interesting things: first this is a huge problem that’s felt by almost everybody; second, there are a lot of problems to solve before reaching our end.

What I’d like to do here is to connect all these different approaches together under a single umbrella, to help everyone head in the same direction. And this vision is excatly the shift from logins to identities.

Identity

How could we do that? Well, one step at time. The first step is quite simple, and requires an incredibly simple interface in your browser. That’s what I want to propose today, and I’d love to start a discussion, in order to create a better web for everyone. I don’t have all the answers, but I believe that this is the right way to go.

This is how I think identity should appear on your future browser version:

Did you notice the top-right corner?
This browser window, knows who I am.

There isn’t much more to add, that’s what the user has to do to login. Nothing. This browser window is logged in with your personal identity and will instruct any websites you visit accordingly.

It’s so simple that the part about the basic user experience ends here. It just works.

What’s great about this way of managing identities is that you can easily switch from one to another. Plus, you can have multiple windows open, each one with a different active identity.

Private browsing will be just another identity, not a special mode anymore, giving a clear signal that you can still browser without disclosing anything at all.

Switching from one identity to the other might be locked with a password, and it might be possible to add an option to automatically logout to Privacy mode after some inactivity time.

For convenience, let’s use a name for this identity-based approach. Identity 2.0 is taken by OpenID. So, instead of Identity 3.0, let’s use the more meaningful Seamless Identity.

How does Seamless Identity work?

As it often happens with transparent interactions like this, there is a hidden complexity underneath. There are technical challenges that connects with two topics: privacy and security.

While I know a bit of both, I’m not expert enough to have a definitive answer for a service that could potentially work for every person in the world. That’s why I’d love to have feedbacks on the model I’m describing here and build together a solid standard.

One of the API could be a JavaScript API, and could work like this:

1. By default, it exposes a low security identity token generated for a specific domain. So any website will be able to associate data with you and you alone, without any risk to lose it, since that token will be stored with the identity. I imagine that this token will be generated with a cryptographic algorithm in order to be both secure, unique and not sharable between multiple domains. In this way, nobody will be able to track your movements even if your identity is active, because each token will be unique and different (and possibly, revokable).
2. If the website wants to know more about you, it has to ask. It’s not much different than a waiter asking your name to take your booking, and it will be available at the push of a button. I think that the next level up is “email”, since too many services right now need it for things like notifications. Notice however that there could be a service attached to this identity module creating special emails that could be invalidated, protecting in this way your real email address.

It’s interesting to note however that most online services will be able to provide most of their features with just the first level token, since the important thing is to uniquely identify you. The need to provide an email address is in many cases just a byproduct of the login paradigm and its compulsory registration. Think about it: you would still be able to access the whole of Twitter, Facebook or Flickr even if they didn’t have your email, right? The important thing for these services is to know that you are really you, in order to grant access to your data.

PROS:

1. Transparent user experience.
2. Increased safety against phishing: since you never have to type anything or disclose twice your credential to a website, they can’t ask you twice without looking suspicious.
3. Your data will be inputted only once in the Identity Manager provided by the browser, and you’ll never have to type this information again. So, nobody could steal your password, email or credit card, since you’ll never type these details again. This would also allow automatic detail change the next time you visit the website. The browser runtime will protect the data for you (this is an important point of course for the browser implementation).
4. A new class of services will be enabled, and the adoption barrier will be lowered to almost zero. There will be no registration process to slow you down: you’ll open a website and you’ll be able to start using it immediately.
5. Facebook, or other identity providers, won’t be the gatekeepers of your data anymore. They could instead be cloud services offering more services on top of this identity mechanism.
6. It will allow peer-to-peer authenticated exchanges, since the identity is now in the device and not in the service you’re registered with.
7. No website will have to store your credit card data anymore, since it will be provided ad-hoc by the Identity Manager when needed.

CONS:

1. You will still have one password, the one protecting your device(s).
2. The identity will be a cryptographic information stored somewhere: if you lose it, it’s gone with all the accounts you ever created, and you’ll have to retrieve them with site-specific requests.
3. The identity needs to be transferred to every device you own.
4. If you don’t have your identity with you, there’s no way to login by default. Exactly like if you don’t have your identity you can’t buy alcohol, or you can’t get on a plane.

However the cons aren’t so bad and can be easily mitigated:

• Points 2 and 3 might be mitigated by a backend based on a standardized cloud service to store the identity. Data would be encrypted before being stored so that not even the company providing the service could access it (see Passpack as an example of how this has already been done transparently). The service would allow retrieval in case all your hardware is lost. If you think about it, it’s in some way what already happens with Android/GoogleAccounts and iOS/iCloud.
• Point 4 might be a problem for some users, but it might be less relevant since there’s a growing number of users that uses smartphones, and well, a feature like this could be ported to non-smartphones as well.
• Point 4 can also be mitigated by the services themselves, enabling different login mechanisms to allow non-identity based authentication (i.e. sending you an SMS with a token). This isn’t new, and it’s usually well developed in the best password recovery systems.

It’s worth noting an interesting detail: a lot of people are already using the browser built-in feature of Saved Passwords, or systems like 1Password. WIth these you get basically all the cons above, with a minimal advantage compared to what would be possible with Seamless Identity.

Use cases overview

What’s even more interesting is that while SeamlessID is intended and works as a replacement of logins, certain services such as banks might still require additional security systems and ask for nonce passwords. Also, the “password recovery systems” of today, will be “identity reconnect systems” just in case you need a one-time access from remotely or reset your identity connection. These will be provided as today by the services, because they will store different data (a recovery for a bank will be different from a recovery for Twitter).

That’s entirely fine. This is just a first step.

This diagram shows at a glance different use cases and how SeamlessID solves the problem easily.

As it’s now probably clear, there’s no way logins can help you in having the very first level of identity. That’s missing, because it’s too slow. It’s also one of the reasons why a lot of systems like Facebook are closed gardens: once you’re in, that first sight identity is granted. Once you’re in.

All the middle ground of identity is covered by logins as well, however SeamlessID will be simply quicker, by providing information at the click of the mouse and in a more secure way.

Seamless Identity API draft

This is a draft I thought that might enable this kind of service. It’s worth noting that while this is a JavaScript API, it’s possible to suppose that the browser could send the token inside the HTTP request header as well, thus providing this feature on systems without JavaScript. But that’s an advanced topic for another time.

It’s also worth noting that there are a lot of similarities with the Session API from Mozilla BrowserID, even if the Session API is still based on a login model instead of an identity model and seem still delegating the identity management to the website.

window.id.token

This property will provide the unique token to initiate the first level of identity exchange. As said before, this is unique within a domain.

The token could be an alphanumeric string like a md5 hash.

If the domain is blacklisted, or the user is in Privacy mode, the token property will return false.

As you can see this is similar, technically, to what already happens today with cookies, but the difference here is that now is the browser that generates the token from a private key and not the website.

This is huge, because it means that the identity doesn’t expire and the user has control over that identity.

Effectively, it means that you can trust any data created with the token, because it’s already you, and you can at a later time decide to keep that data, reset the token, upgrade the registration with the website or else.

window.id.get(<required>, <optional>, callback)

This will be a function to request the user to explicitly disclose these information. The application can request one or more fields, each one identified by its name.

For example:

window.id.get(['name', 'nickname'], callback);
window.id.get(['name', 'nickname'], ['avatar', 'country'], callback);
window.id.get(null, ['avatar', 'country'], callback);

When this request is issued, the user will see an overlay generated by the window chrome (not the page – for security reasons) asking if they want to allow that domain to access these details from that moment on.

window.id.getOnce(<required>, callback)

This function works exactly like window.id.get, with the same ability of ask for one or more fields from the Identity profile, and the same popup.

The difference is that these informations are returned to the web app only once, and every request needs to be authorized again.

Certain class of values, like credit cards, might only be available under the “getOnce” call. It might also be that this function will work only if the website is under HTTPS.

window.id.<field>

Once requested at least once with window.id.get(), each of the details will then be available directly at API level. This is useful also to handle updates: if for example the nickname changes, the system will be able to lookup it and verify it changed, updating its internal value automatically or after a confirmation.

This works well because we are talking about identities, and when some detail about you change you expect anyone you are in touch with to automatically get that update, or at least ask if you want that update to happen.

Notice also that I used “window” instead of “navigator” because the idea is that each window can use a different identity and this would make it cleared. However this is really just a detail managed by the browser engine itself. It could be “navigator” as well.

Native support

Another important thing about this approach is that identity will switch from being just multiple logins to memorize to being an operating system level feature, like the KeyChain feature in OSX.

In this way, once ready, Firefox, Chrome, Explorer, Safari, Opera and the other browsers could just provide an interface to that identity system.

This is even more relevant because for security reasons it is important to have all the interactions with the Identity Manager to be outside the website part of the screen: in this way they couldn’t fake any interaction with it (even if, as stated, you’ll have to push just one button, not type private data directly in the website).

This last thing is easy on a computer, but it’s hard on a smartphone where most of the screen estate will be used for the website. In this scenario, it will probably need to slide away like happens with the multitasking bar of iOS, in order to show the controls outside and maybe showing an image that you setup, and that a phishing website couldn’t know.

What will it mean for developers

Think about what happens today: you are developing an idea to help people do something. Today, you can’t really start if you don’t have a registration system of some kind. Even if you use a library, you have to take it into account.

Even worse, you will have to find ways to motivate enough your user to overcome the registration barrier and use your service, or create a smart system to allow your user to demo the system before registering, with all the complexity that it might mean.

With Seamless Identity the registration barrier disappears.

For your earliest prototype, you might even just take the token and work with it, without any registration or any additional detail. You will be able to test the platform and build only one code path. There’s no split between app and demo, it’s all app, working, without any barrier.

And all of this will cost you a single call to window.it.token.

Wouldn’t that be amazing?

Could you imagine all the services that could exist thanks to this?

Adoption

While I was writing this article Google published a very similar idea to handle multiple Chrome users. You can see their solution here. This is a good early confirmation that this approach is good, even if I’d put the login on the right corner because it’s where we usually expect it to be and I don’t want it to be confused with the app itself. However Google Chrome’s solution vision is limited to Chrome. What we are talking here instead is a new layer for the open web.

I think that Mozilla has the right culture, technology and freedom to move forward this shift to identities and create a standard that will be adopted by all the other browsers… and hopefully operating systems as well.

Mozilla is already working on BrowserID, and this could potentially be the backend for this kind of identity shift, and after reading this article by David Ascher now I’m even more sure of this.

There’s of course a risk: the risk that each browser manufacturer will try to create walled identities, forcing users to use only one browser forever, with no ability to switch. You can clearly see that this will basically kill this concept, and will delay the adoption of an improved identity system for more years.

It’s important, if not critical, that the identity is easily transferrable, with a one-click way to do it: “Do you want this browser to use the Identity X?”, done. Even better if it will be a OS-level library. And BrowserID is again already trying to solve this problem by federating the concept of identity.

Otherwise… it will be just a way to trade one kind of fragmentation for another. Let’s work together. This should be a standard foundation for the future web. Identity must be in your hands, not in the hands of some external entity.

Even if I believe that Seamless Identity is the correct next step, I’m not focused on this specific implementation, just on this specific user experience and the fact that the code usability needs to be excellent, but even that is open for discussion. I believe that identity needs to make a step forward in being seamless and transparent, and that’s what I want to see. If it’s delivered in a different way, that’s still great.

~

If you think about this, the switch from logins to identities will also close another gap between native applications and web applications. Today you don’t have to login to an app you downloaded on your Android or iPad, and why should you if it’s local?

Moving from logins to identities on the web will allow this seamless experience for web apps as well, everywhere, on mobile and desktop. And on mobile it will be even more powerful.

I see a huge potential.

Do you know any browser developer? Participate in the discussion (on Twitter we are using the #seamlessID tag), link this article to them. I’m sure they will be interested, and you’ll help to change the web. ;)

Updates from the comments

1. Storage: what wasn’t clear enough probably is that this system by default stores everything in a secure space on your device. There’s no need to sync or put it on the cloud, you are in complete control. This already happens with Password Managers. If you want to think about this in a different way, SeamlessID simply makes transparent and more secure your Password Manager.
2. Device-less access: on the completely opposite side, there might be situations where you either don’t have your device, or you can’t access one. In this scenario, it’s also simple, because SeamlessID doesn’t mandate any restriction on the fact that the account might also be synced remotely. You might be able to log-in temporarly with a remote account, like a special privacy mode. The stress point here is that the browser should handle this layer of complexity, not the user. This already exists: OpenID logins, Facebook logins, Twitter logins, Google Account logins are all doing this.
3. Is it a replacement? No, not at all. Yes, this idea is designed to completely replace logins for normal usage, but logins will still be available as an alternative. Consider also that with SeamlessID in place you might still need a way to access a service without your authenticated device with you. The way will be the equivalent of the current “password recovery”, with the difference that will generate a one-time access instead of resetting the password.
4. Identity vs Identity certification: the fact that today we are using logins means that when someone says identity they often refer to “identity certification”. However, that’s a different thing: one thing is the neighbour that knows you by sight, another thing is the airport check-in that asks for your passport. That’s why SeamlessID has different access levels and doesn’t mandate any certification: it might be added, or not. The important part is automating the task so it’s not anymore the user that needs to remember that, but the Identity Manager in the browser or operating system.

To me, seeing this post with 10 creative uses of the new Facebook profiles is telling just one thing: people want to express themselves, their identity. And Facebook, as I’ve already stated, isn’t doing that well.

Identity is a fundamental building block of social networks, ignoring it as much as Facebook does is a little troublesome for me due to their size and impact on so many people, even if they think of themselves as a “platform”.

They use Facebook as a utility. They check Facebook when they wake up and check it before they go to bed. But their profile on Facebook looks just like everyone’s profile.

A Tumblr is self expression. Jessica’s looks different than Emily’s, mine and the Gotham Gal’s. That’s powerful. And that is what I think is driving Tumblr’s popularity. Self expression matters.
— Fred Wilson (2010) Self Expression Matters

Self expression is just an external observation of a more psychological dynamic: identity.

I’m saying this since MySpace started to raise: identity expression is a critical element in any social networks. That’s why it’s one of the four elements of Social Usability.

Just to give some more pointers:

• MySpace: gets it, and it was the biggest selling point… and still is. That’s exactly why still millions are using it.
• Facebook: completely misses it. But that’s what they want: they keep saying that Facebook is a development platform. So be it.
• Twitter: gets it in a simplified way.
• Flickr: misses it. If you’re wondering why so many personal pages services for photographers exist today, the answer is simple: Flickr isn’t providing any customization.
• DeviantArt: misses it.
• (you can grow this list as much as you’d like)

Of course, I’m not saying that you must build an identity feature in anything even remotely social you build, I will be as wrong as the ones not getting it. Instead, you have to think if you need it. But that should be a negative answer to an understood concept, not complete ignorance.

And of course, the Social Usability Checklist exists to help you in the process.

Process

As any good project, I’ve started thinking about what should be the best, leaner and simpler process that I should have followed. I came up with this one, loosely on the lines of The Elements of User Experience:

1. Define the objectives
2. Find and analyze good solutions, good designs and best practices
3. Define the user experience — UX Design
4. Define the information architecture — IA Design
5. Define the interaction model — Interaction Design
6. Define the graphic layout — Graphic Design
7. Learn/update to the state of the art development techs
8. Develop

To support this I created a checklist. First on paper, then on Things. (but also The Hit List or paper again are good alternatives).

It’s of course a simplification: all those phases aren’t sequential (argh!) and aren’t separated, and some of you might also argue that interaction design is a part of user experience design, etc. This isn’t an essay on the One True Mighty Process, but a small analysis on how even a simple thing like this can – and should – have all those pieces, and for a good reason.

Objectives

At first I thought that the objective was just to show some skills within the design itself, but soon after I told myself that it would be pretty stupid, so I defined a more detailed outline:

1. Identity: build a space to be more “mine”
2. Discussion: build a space to show and discuss ideas
3. Process: build a structure that allows both rich articles and small notes

The objectives are in order by priority, and to tell the truth even at this time, writing this article, this list still makes me think (is it right? I’m sure? too much? not enough?).

There’s also a third point, but it’s more about content than an objective by itself: it’s spreading knowledge. If I feel good in something, I love to teach it. I think also that in any good teaching process the speaker receives something valuable. ;)

Not everything is measurable, but I think that it’s important to try defining some kind of metrics to be checked. I’ve defined a few simple ones:

1. Views and pages/visit
2. Discussions with interesting people (comments, mail, twitter, whatever)

The term of paragon is my previous blog, of course. In a broader sense, everything should be observed and analyzed. Metrics are just a simple and straightforward way to do that. Also, I don’t want any kind of advertisement: I’m not interested on money. I’m interested in quality. Quality can’t be intrinsically measured.

Find and analyze

Now that I knew what I wanted, it was time to find good solutions and good designs. I wanted something simple but powerful and the first one that came in my mind was – and still is – Daring Fireball:

It is simple, clean, very content-oriented but without killing the freedom of handling additional content. At it has a great brand identity. Also, every technical detail, if present, is well implemented.

Of course, one example isn’t enough, so in a few month I’ve collected many websites that in a way or another interested me.

I choose them for many reasons: layout, aesthetic, content, architecture, technical details. I was gathering every possible interesting idea in order to make a synthesis from them.

There are many interesting things: I liked the redesign cleanness of Evan Williams‘ blog by Vitor Lourenço, the free form of Dustin Curtis‘ pages, the physical feeling of the paper of Andrea Gandino, the amazing elegance and cleanness of Sean Sperte’s Geek & Mild, the typographic attention of John Boardley’s ILoveTypography, the layout structure of Area17 and iA, the simplicity and communication directness of Sofa, and so on.

I’ve analyzed them, reduced them, taken all the things I thought were interesting and checked they could work in some way together.

User Experience Design

I know quite well how users navigate inside many kinds of web sites, and I know it better inside my websites – even if in this case the numbers probably aren’t high enough to be statistically significant.

I chose to optimize four flows:

1. Homepage flow: blog homepages are often dull, while news websites are often driven by the attract-attention plus make-pageview pattern, that I don’t think it’s good for a quality-aimed website. I wanted to make the user able to get a global idea of all the content from the homepage and be at the distance of one (or two) clicks from the content itself.
2. Reading flow: I wanted the single article page to stand as a standalone document, without anything distracting the reader or luring it into making another click or discovering more. It’s the single content by itself should drive the reader to the bottom.
3. Discussion flow: the comment part is often something “attached” at the end of the post, in a way that makes it an appendix of the article. I wanted something that was clearly a comment, but that was also able to go on with the reading, like a text build by many hands. I wanted to make it a first class citizen in the page.
4. Discovery flow: I wanted to make the content discoverable without interrupting the reader. So the discovery of other content should be in specific points: at the end of the article, in the home page and in the menu. Nothing more than this.

Let’s not forget the other side of the website, often neglected:

1. Writing flow: I wanted to be able to add both long and detailed articles (such as this one) and short quotes and comments. I’m convinced that lowering the barrier to writing something is critical and that isn’t just a matter of usability, but also of mood. The way you think about your blog auto-selects the content you’ll write on it.

I also decided that I should start with a website a bit less “social” than I thought it would be. Maybe in the future I’ll add some integration with Twitter or Facebook. But I prefer to do it in small steps.

Information Architecture Design

A site like this is quite simple, but still you should think about what you really want to say and show. After a few reshuffling and analysis of what I wanted to write and how I wanted it to be displayed, I’ve defined this architecture:

• Home: the door of this website, but also the most important navigation key.
• About: the description of myself. I think this is quite important, both because it’s the first thing I read after finding an interesting blog and it helps in building a good trust relationship.
• Projects/Portfolio: a synthesis of the projects I’ve worked on, with lots of screenshots and a few insights.
• Articles: full thought out texts, like this one.
• Traces/Notes: links, comments, quotes and things I’m still thinking about.

Nothing too complex. What I find interesting and very useful are the “two ways” of writing expressed by articles and traces. I took this idea mainly from Gruber and Sperte and I think it works very well both from a reader point of view and from the writer point of view.

Interaction Design

In the various draft of all the structure above I’ve started also thinking how this could work all together. I’m a visuospatial person, so I had to visualize it on paper:

I already had an idea about the articles page from all the previous designs I made so I worked on the navigation part and the home page, the two critical parts in this project.

The most difficult part was about adding details but at the same time keeping everything clean and simple. I often reshuffled the designs after adding something because it cluttered too much the UI.

The idea of the top search dashboard came in mind just after one of those reshufflings.

At one point I noticed that I wasn’t anymore arguing about what and how the content worked on the pages, but I was thinking about the visual result. So I stopped making sketched, I took the best ones and I’ve started the graphic design phase.

Graphic Design

As I’ve already said, my first try was about learning the details of Daring Fireball and try to build upon them to make something unique.

As you can see it’s not the same, but you can perceive a feeling of it (also, at this time I didn’t know yet that the blog will be just in english and the logo wasn’t finished). I choose a dark blue instead of a slightly cold dark grey and I’ve reversed the logo position in order to give more value to the content. There’s also a small shading and a small colored bar on top.
The old images would have fit well also on a dark background (thanks to the alpha border I used), that was nice.

But as much as I like contrasts, dark isn’t really for me: I think it’s cool for a while, but in the end it doesn’t work out. I already went through this a few times. I tried on an inverted version of this layout (with white background) but it wasn’t as good as this one.

In the meantime I completed the logo so I started over and after a few iterations and some feedback I came up with the final layout.

Development

I’ve decided to try directly all the interesting things that I’ve seen and filtered in the last months, so I tried and then built upon some recent interesting technologies.

Crossbrowser

I usually skip past this part, since I assume that *anything* must be developed on one of the most standards compilant browsers, Firefox for me, and then tested on any other.

For this task I found very useful Internet Explorer Collection (all the IE versions installable on the same machine, from 1.0 to 8.0) with the Microsoft Internet Explorer Developer Toolbar, everything installed on a virtual machine, maybe VirtualBox.

960.gs

960.gs is an interesting approach to speed up development. The first HTML+CSS master was based upon it, but after a few checks I decided to use my own classes, incorporating the 960.gs maths I choose (39px column, 12px gap): I didn’t use the standard 960 grid, because I wanted a 600px wide default text column.
For me 960.gs is interesting but I think that a similar logic is intrinsically behind the best layouts, using meaningful CSS rules instead of “columns”.

Also, I think that building the “body” of the article using a grid system could allow dynamic page layouts (like Dustin Curt’s posts, see Smashing Magazine’s article about posts visual design) with a smaller development effort. On a flexible grid-based template you’ve something like a rough version of an InDesign grid, more easily controllable than custom CSS.

I designed this blog allowing a few “exceptions” to improve the overall layout.

HTML5

I decided to try HTML5 out. The last “push” was reading the online draft of “Dive Into HTML5″ by Mark Pilgrim and I noticed it was already possible to do something interesting (while, for now, I discarded CSS3 for anything with the exclusion of some minor features).

I don’t like the workarounds to use the new tags on Internet Explorer *sigh* (it’s JavaScript based) so I worked on a CSS that uses both tag declarations and class/id declarations (something like: “article h1, .article h1″). Using those “double declarations” I could switch quite easily between “<article>” and “<div class=”article”>” without rewriting any CSS rule.

I’ve validated the code using html5.validator.nu and the structure using the html5 outliner (thanks Matteo).

I’m still not sure on real-life usage of some tags, but I think I did a good guess with this site. Let me know if you would have done something differently.

Microformats

I wanted to use more Microformats, but in the end I’ve settled on just one, a hCard in the footer. Check it with a simple bookmarklet.

jQuery

For me jQuery is the script with the best code usability around. Simple, efficient and to the point. The few JS tricks on this websites are of course jQuery powered.

Custom Plugins

To ease the usage of the additional CSS styled boxes (the one on the side and the one with the big text) I developed a small WordPress plugin, bundled with the theme, that adds two buttons on the WYSIWYG writing interface and inject some CSS in order to display it in a good way inside the editor itself.

Print

I prepared also a print CSS, in order to show a clean and well-formatted page, without navigational elements and things completely unuseful on printed paper.
I optimized the article page in order to get the article well optimized for readability.

Optimization

I’ve optimized the page in a few ways:

1. I’ve put all the javascript code in a single file. In fact I’ve just added the libraries (jQuery) on top and just after my code and the initialization code.
2. When possible, I’ve used sprites in order to load more smaller images with a single HTTP request. Unfortunately it wasn’t possible to put everything on a single image – also for maintenance reasons – so at lease the icons are sprites with default and :hover states.
3. I’ve used the new Google Analytics asynchronous tracking code. For now, it seems working well.

There are also some optimizations here and there, but these are the most important ones.

IE6 dying and transparent PNGs

Internet Explorer 6 is, luckily, dying. IE7 still has some issues while I didn’t have to make *any* workaround for IE8. It seems that a new era is coming. About IE6: the support will last for a while but the stats are going down:

• December 2009, worldwide:
  20.99% (NetApplications)
  11.44% (W3Counter)
  14.04% (StatCounter)
• December 2009, Italy:
  7.97% (StatCounter)

My own stats are way lower, but I still wanted to give a good experience to IE6 users. So a few CSS hacks and a JavaScript library to allow transparent PNG in an easy way (Belated PNG).

Well, in synthesis, that’s all.

Any question, suggestion or hint? :)

My problem raises from the fact that I don’t have a vertical interest in anything. Well, yes, there are fields that sees me more “present” in some ways, but in the end they’re quite wide.

Having many interests and many things to be passionate about may seem a good thing. Well, it is, from a personal point of view. But from a communication point of view it’s a big issue. You can say you’re a programmer or a graphic designer in 140 chars, but trying to express all the complexity behind different passions is hard.

It’s also hard for other two reasons:

• profession: if you’re a vertical kind of person it’s easy to communicate yourself, so when someone “needs” someone like you, it’s easy that you’re the one that will be called.
• time: pursuing different interests is very enriching, but it takes a huge amount of time.

The simple answer is that I often “choose” between the different skills I have. Sometimes “I’m the interaction designer”. Some other times “I’m the developer”. Some other times “I’m the graphic designer”. And so on.

So, I’ve tried to think about something else. I’ve tried to abstract a bit.

Smart?

Many people tell me that I’m quite smart. Even if this were true – I leave this as an exercise for the reader ;) – you can’t tell anybody “I’m smart”. That’s a really bad presentation and it usually triggers a response very different to the one you’d like to have. In fact, “smartness” can’t be communicated, but only acknowledged.

Discarded.

Hypercritical?

The piece by John Siracusa “Hypercritical” in May 2009 was something that really made me thinking.

This acute awareness of deficiencies colors all my memories of childhood. Toys, in particular, were a focal point of dissatisfaction. I didn’t understand why toy manufacturers couldn’t see the countless ways that their products differed from the on-screen characters, machinery, or structures that they were based on.

I felt very similar to Siracusa here. But still there were two problems:

1. Being “hypercritical” isn’t a flattering explanation, by itself.
2. It still didn’t felt quite right.

Discarded.

Doubt?

I love doubt, by itself. I think that doubting is the driver of improvement. If you don’t doubt, you’ll never think that “maybe there’s a better way”. If you’re sure, there’s nothing more to add. Slip in some doubt and voilà, you are able to make the right question.
As you can see, the philosphy is interesting… but “doubt” by itself isn’t a skill!

Discarded.

Synthesizer?

No, not the musical instrument. I once thought about myself that my rational part is a huge synthesizing machine. I throw things inside it and it loves to find relations, abstract things, reduce to single words or sentences, etc.

There are many things that could reinforce this hypothesis:

1. I’m fast in remembering paths and I draw mental maps of the places where I pass through.
2. In any situation I’ll try building up an “abstract” structure to hold anything together.
3. I often use this ability passively, simply acquiring information (lot of) and notions in order one day to elaborate a result.

Yes, I’m sure to be quite good at this.

But still, the term is awkward.

Discarded.

More abstraction, less abstraction

I needed something more concrete than the “synthesizer” line of thought and something more abstract than the simple profession. In the meantime I was also thinking about the logo and I was analyzing the lists as I’ve explained in the post about the making of the logo of Intense Minimalism.

During this time I was also looking at the “lists” on Twitter that has me added. It’s quite interesting: interaction design, usability, social media, graphic design, user experience, speaker, tech, geek, and so on (yes, Twitter Lists are probably more useful to see how the others “categorize” you).

Then the “synthesizer” thing jumps in. I wrote the formula:

It’s nice. Complex, but simple in its form. Disciplines above the line and approach below. Simplicity is the result of some kind of complexity synthesis, so together they’re a pair.

Double checking

I think that the “Hybrid  Designer Formula” above is quite on spot, and it’s confirmed by some other sources.

Simplicity is something all around in the design field, almost in any kind of design.

Progress means simplifying, not complicating
— Bruno Munari

The simplest way to achieve simplicity is through thoughtful reduction.
— John Maeda, Law 1

Simplicity is a function of your scarcest resource at that moment.
— B.J. Fogg (2009)

Complexity is also there, while its important role isn’t always acknowledged.

Good displays of data help to reveal knowledge relevant to understanding mechanism, process and dynamics, cause and effect.
— Edward Tufte (2005)

The most important part is the relation between the two:

Simple design, intense content.
— Edward Tufte (2005)

Simplicity and complexity need each other.
— John Maeda, Law 5

The three elements above works in the means of the two below the fraction. Their interaction isn’t obvious sometimes, but it’s there. You have a technology, you have people (psychology), you have to make them interact somehow (design).
This is true for architects, industrial designers, visual designers, artists, engineers, while probably any of them will tell you a different story from a different point of view.

The term “Hybrid Designer” emphasizes the cross-relation between different fields. Still, it’s just for communication’s sake: for me, a good designer already does this. And the greatest already do and teach this. Any good designer must be intrinsically hybrid.

Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while.
— Steve Jobs

A designer is a planner with an aesthetic sense.
— Bruno Munari

More emotions is better than less
— John Maeda, Law 7

Good design is aesthetic
The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.
— Dieter Rams, Ten principles for good design

We as designers … we cannot do it alone, we need entrepreneurs, working together with good engineers.
— Dieter Rams (2009)

The more you feel that you can control your environment, and that the things you do are actually working, the happier you are
— Joel Spolsky (2000)

If you can design one thing, you can design everything.
— Massimo Vignelli

So, I can now explain something about me and my professional side in 140 characters.

I think that it’s, for now, a good way to tell something about me.

• What do you think?
• What about you and your identity? How have you solved this problem?