I guess by now, if you followed the entire series of post on planning a site, you have noticed I’m going backwards. That’s why today I’ll talk you about web strategy.
I mentioned it when I explained content strategy because this step is at the base of everything else, it’s necessary for a long-term success and to avoid pitfalls on your way. Stick with me on this and you’ll see how it is important.

A web strategy has two basic functions: to help you focus on what’s the real purpose of your site and set some guidelines for the overall development later on.
Its importance goes beyond the creation of the site, it involves also long-term decision for what concerns the business and maintanance of structure and content.br /> In case you work inside an organization the web strategy sets up an agenda that help various team know what are the leadership decisions and avoids discussions over in time.
You shouldn’t think of this as a tool only for big corporate site or ecommerce, it’s useful for any kind of site, even a blog that needs to chose an editorial line and some tactics to increase the readership. I did some web strategy when I started planning this blog and it’s paying off.
It’s not just marketing, at all, you’ll see in the next steps that you’re probably already doing some when you design or think about a new site, but you need some more organization to plan it right.

web strategy in a nutshell

Greg Storey few years ago in an article on A List Apart wrote that the objective of a site should be one sentence and one sentence only in good english that communicate the purpose. For my blog I would write: to establish Designer Break as a reference for readers looking for tips, news, reviews of what concern web design and its related disciplines.
After that you should add a strategy to achieve it and at its most abstract shape could be summarized like this (citing Storey in his original article)

Your strategy will define how you are going to achieve the objective you just developed. When it’s finished, the strategy will outline the who, what, and why of the website. A strategy for the above example might look something like this:
To convince… anyone who wants to create better websites
to read… A List Apart
instead of… Reader’s Digest
because… A List Apart actually has articles on the subject whereas Reader’s Digest contains none.
That’s it. Strategy is served. As with the objective, the verbs in the top two lines of the strategy can be changed out but the last two lines must stay the same, because they identify your competitors and the rationale for choosing your site over the competition’s.

This is really about the concept of the site and, although a web strategy doesn’t get much into details, you can establish some more concrete guidelines for the overall creation process, have a look at this exemple form a library site of Berkley. in the next chapter I’ll show you some specific question you should ask your self to write down a successful strategy.

how?

So let’s get into details even if this is something theoretical that simply depends on you in the end.
I like the approach J.Owyang took to explain it. He says a good webstrategy is a balance of 3 spheres:

I. community

: you need to understand which is your audience, you’ll have to do some users research and review traffic reports. This is something that needs to be discussed in its own tutorial, but generally I can say you need to look at the demographics of your public and their habits. Don’t think you know your users, look at datas and learn about them. It’s easy to make general assamption on personal behaviour or of people we know, but it’s better to look at facts.
If you don’t have your own metrics because you are creating this sort of site for the first time do some research online, find papers on that. To know how your users behave is useful to give them content correctly.

On the other side, what you need to know about users is their goals. What they really want.
Why should they come on your site?
What are they looking for?
What needs of your users you can satisfy?
So, this first part help you decide what users wants and how to give it to them. This steps also extends to consider the community into which you’re placing your site.
Are there any competitors?
Who could be my partners on this?

II.business

: now think from your point of view. What’s your site for? do you really need a site?
It seems like a stupid question, but you should really think about it. Sometimes there are other ways to share your infos or service depending on what it consist and who is your clientele.
Assuming you need the site now define its goals. they can be both, long-terms or short term goals. For instance the long term goal could be to become the main reference blog in your niche and a small term goal would be to write 10 articles a week.

It really depends on your brand strategy and on your audience. Ask your self:
what makes my site better then others?
what’s important for my business? what experience and mood I want to communicate?
This involves also a market research to know who are your competitors and how you can do better then them.

Another important step is marketing. I’m not talking just about ads, even your personal blog could use some marketing if you want to increase your readership.
I’m quite sure you’re already thinking about Twitter. Well yes, social networks, Twitter, facebook can be very powerful to get traffic, but as usual consider your audience.
Do they actually use facebook and twitter?
For instance, this is a bilingual blog, I run the main version in Italian, but in Italy Twitter doesn’t seem to be a trend yet, I only have 4 or 5 italian subscribers there. Intead on my Facebook page the majority of fans are Italian.
Check which social network is the most used by your audience, don’t assume is the most famous.

Moreover, today twitter and facebook are often chose by readers as an alternative to RSS feeds. Another increasingly popular function of twitter is as a tool for customer care.

Don’t forget your site is either about content or about a service. How can you expand those two things beyond your domain?
If you’re offering a service you can go mobile and create apps for smartphone, you can create apps for facebook, you can create a widget and release an API for your developer fellas.
If instead you provide info you should create content that can be syndicated, which is reusable, which can be shared.

Monetization is something the most part of sites count on. There are many ways to earn money online, you should pick the most appropriate to your site model.
Advertisement is not really the most successful nowadays, but you can get the best from it by displaying targeted ad or ad campaigns.
Something similar is sponsorship, another company that is financing your project.
Syndication it’s an option, in both ways. You can get paid to diplay content from other sites or vice versa.
Affiliation is a technique used very often, you could have seen it when somebody was advising a particular webhosting and gave you a code, or more common, links to amazon books in a sidebar. You get paid for purchases.
Many successful sites have earned money by the so-called exit strategy, when they have been bought by other major companies.

III.technology

: you should have a general knowledge of all the tools needed to build your site at least to know which are the limits you’re gonna face (financiary and technicals).

What kind of site you need?
it’s enough a blog?
you need a static site to share basic infos and contacts of your company?
is it a site that’s going to be updated often and by many personel of the team, so probably requiring a CSM?
Are you planning to use a lot of multimedia content?
do you need collaborative tools on the site?
are you thinking to include third party tools (slideshare presentations, embed videos, widgets, and so on)?
Do you have particulare requirements for the design (i.e. keep the colors of our logo)?

To understand which tools and how they’ll be used it’s important to prepare your team, to decide deadlines, to estimate your costs.

Resonance from Continuum on Vimeo.

conclusion

You saw this is a technique that applies to any genre of site, but a company has different needs and goals then a blogger. Study in depth your case and do some research in advance.
You could have found a little bit daunting that to outline a good strategy requires a wide range of expertise, but as Owyang suggests, you can chose to learn what needed or you should delegate (which is not at all easy).
In my country we have a saying that goes:”when someone thinks he can do everything probably he’s good at nothing”, but my personal advice is to try to learn a bit of everything. You’ll be an expert of your own field but it’s useful to know the basics of all the other aspects involved in the creative project in order to have the big picture and take the right decisions.

UXmagazine is an Italian resource for User Experience lovers. It publishes monthly articles concerning a wide range of subject although the topic is always UX.
I believe this project is very interesting and professional, so I asked the editors to have a little chat and share with you this short interview. You’ll find some clever suggestions and thoughts.

DB: when do you had the idea to create UXmagazine and with which purpose?

UXmag: The idea of UXmagazine born in november 2008, aiming to create a channel of communication and insight for whom wants to get to know user experience in a simple way, through articles and a dedicated network.

DB: I know behind UXmagazine there’s Sketchin, a design studio focused on UX. Is this project helping you to grow in a cultural and professional level?

UXmag: right now we’re still in an initial stage where investments are greater then revenues as to human effort, but the magazine is giving us a chance to share ideas and experience with a lot of new people, and is also becoming a place where experts like to gather.

DB: you always feature high quality articles, maybe even more academic than on the easy-going style of blogs. Did you choose to adress an audience of UX professionals or do you think UXmagazine is also a good starting place for newbies?

UXmag: Actually we would love that print editions could be also a starting tool for whos not familiar with this subject.

DB: I noticed you have lots of authors and you’re always open to contributions.Has it been difficult to “recruit” at first or did you get a lot of sponteneous enthusiasm from the community? Do you have any suggestion for whom would like to join now?

UXmag: UXmagazine it’s open to everyone, a bit like basecamp is, because we believe confrontation is at the very basis of new ideas and therefore innovation.That’s why we don’t accept only material from experts, but from anyone who wants to share a specific experience of use, a case study, something useful for the community, as well.

Recruiting authors hasn’t been difficult, many came spontanously, others that we thought could add interesting incentives at the community accepted our invite to join.

DB: I’ve got a feeling that agile design is something you truly believe in and want to promote. Am I right? Any suggestion for us?

UXmag: that’s actually our biggest challenge, we’re including it in all our internal projects and towards our clients.
We promote it because we’re testing its abilities daily and we know it adds a value in the dinamic and creative italian market. Moreover it has the potential to be replicable in many contexts.

DB: you showed interest towards government sites, suggesting even a series of articles on that. Right now, UK’s government issued a guide to use twiter for it’s workers.
Do you think institutions are finally taking seriously their web presence according to their recent interest in a decent esperience for users and a better understanding of communications through social media?

UXmag: there’s the opportunity but it’s not adopted yet in our market other than as a trend.
We think it’s important not only to give the tools to the user but also show which are positive and negative consequences this brings. Institutions need to understand languages and applications for a correct use in singular cases.

DB: in several articles (TagMyLagoon, Progettare Apps per Iphone, Mobile e Interazione Precarie) you spoke about mobile design an the application tht could come in this field. Do you consider “mobile” as the keyword for the future of internet?
How do you see user experience spread from the web to real spaces?

UXmag: yes, we believe the trend is increasingly towards mobile and we think at a future of adaptiv and iperlocal interfaces.
In the medium-long term a good share of the value generation online will go back to locale and not global. An iperlocal web would be a web tailored on the needs of a particular city where people, services, infos would be highly contextualized by place and time, giving the possibility to visualize contingent interfaces and infos with a high informative-level for the user.
Nevertheless the possibility for users to meet.
You can read about this also in Un Web Iper Locale è Possibile and in Strutture e Interface Adattive (slideshare).

DB: UX is often misunderstood as a singular step in the design process while we know it’s more of a flow, a concept to consider and cover in every step of the project.
By your experience, today, how do behave singular professionals involved in a team regarding UX, giving everyone different task and background?
Has the culture of user experience been adopte in Italy?

UXmag: Unfortunately in Italy isn’t much clear that UX is the sum of all the aspects of a service in use by a user. Therefore everyone who’s involved (marketing, design, communication, development) is doing UX and should have some know-how of what he’s doing. That’s absolutely misunderstood in many european markets (and it’s actually what I talked about at EuroIA).

DB: On UXmagazine even if you’re focused on one subject you already covered many topics. There’s something you’re looking forward to write about?

UXmag: the integration between phisical/digital products and also the integration among digital/phisical architecture.
We’re open to submissions on these topics :)

DB: do you think to switch also to a printed version any time soon?

UXmag: we already two versions, one which is printable on Scribd and one printed on request that you can find on Lulu.

DB: Are you satisfied with how the magazine grew till now? Do you have any surprise for the future?

UXmag: Yes actually, we’re very satisfied because we keep going and we constantly receive suggestions. Right now we’re trying to create something special that embraces both UXmagazine and UXconference.

DB: your last advices for the readers: a couple of books someone who starts to study UX should read? A couple of experts and inspiring people to follow online?

UXmag: as to inspiration we suggest Morville and Pabini, while Designing Web Navigation by James Kalbach, Usabilità dei Siti Web by Michele Visciola, Web Usability by Jakob Nielsen, and Designing Interfaces by Jennifer Tidwell are the book I recommend.

Here I’ll show you how to plan a site for any mobile device. At least the theory, then obviously, since the huge number of models and their differences you’ll always have to adapt something, but that’s the whole point: creating a mobile site that it’s good for old cellphones and stunning for iPhones.

why a mobile site?

The same way some years ago businesses realized internet was a big thing and it was important to have a web presence, today is becoming clear that adressing to the mobile audience is the new must.
There are more then 3 billions mobiles, 4 times the PCs. The number is increasing, but most important, old phones are replaced with new one which means that a growing number of people have access to internet on their mobile devices.


source:BoxUK

Normal sites are rendered decently on latest handsets that have a web browser similar to the desktop version, but they are a usability nightmare. On older phones instead they probably don’t work at all.
Trust me, something specific for cellphones it’s not a waste of time.

what we are dealing with

When cellphones first got a technology to access the internet they were using an old set of web standards called WAP, which contained its markup WML and the protocol to serve it (WTL, WTPS). WML is based on XML and it’s widely adopted and although it’s “outfashioned” it’s not deprecated, so you can consider to code a version of your site with this markup as a “safe mode” The evolution of wap was WAP 2.0 which adopts xhtml-basic/MP and the common TCP/IP HTTP protocol of communication. xhtml-MP is very similar to xhtml and renders the same, it only has some more features useful to mobile devices.
The first version of wap didn’t have styling options, but WAP 2.0 introduced Wireless CSS (WCSS) which is a subversion of CSS 2.1 to integrate styles to xhtml-mp. it’s similar to css 2.1 but has less attribute and to be sure that it’s cross-browser stick to simple. It doesn’t work on wap 1.0.
Today last devices such as the iPhone, Andorid, etc that have the same web browser as the desktop version, render and accept the same mark-up you use for web sites.here’s a couple of link to a guide on xhtml-mp and on wcss.

how to get started

What do we learn from this bit of history?
That is not difficult to build a mobile site that renders well on all phones with some sort of progressive enhancement.My best advice is to code in XHTML-MP and use different stylesheets. WML is additional, you should check your metrics to be sure but generally if people have such an old phone they don’t use it to browse now that there are alternatives.Before I show you any code snipplet let’s consider some paper work.

i. web strategy:

Why you need a mobile site? Are you really offering something useful for a mobile user? Do you offer a specific service? Do you help a task?
Don’t get me wrong, it’s not all about utility, you don’t need to build an iPhone app to have a mobile presence, internet is also entertainement. Think at someone in a coffee shop who decides to browse your blog killing time. What I mean is that you should get rid of everything is useless or not suitable for this kind of device. Heavy graphics or pages of pictures are a bad choice.
So think about your business goals, why it matters for you to go mobile. Think about your users goals, how they’ll benefit from your mobile site. Consider the technology available and its limits.As this is the step from which you’ll plan your interaction design later, it’s a good moment to understand which will be your audience. It may help you to know in which circumstances they’ll use the site and – very important, which kind of device they’ll use.One last question: are you considering to create a separate site for mobiles or you simply want to use some techniques to adapt your current websites to be rendered on mobiles?

ii. information architecture:

keep it as simple as possible! Avoid long chains of pages, think about “click investments” because even on 3G it always take time to load a page so the patience of mobile user it’s quite short. Cut everything that isn’t relevant and use well labeled links or categories: if the user knows what he is waiting for he is more likely to wait for it. Basically limit the choices and categories, don’t get the user lost in a labirynth. The fewer levels the better. It might help you to create a “click stream” to visualize how the content will be navigated.

iii. mobile web design:

there are a lot of things you have to keep in mind designing for mobiles. First of allscreen sizes vary a lot but what mostly matters it’s the width so my best advice is to create a fluid layout. Use percentages intead of pixels. you can learn more about it on A List Apart.
A liquid layout helps you as well on iPhones and other devices with the orientation features. However, for older phones that have only a portait layout it’s a good choice to style your content accordingly, like how you should display info and break text into smaller chuncks.

Navigation is another aspect that should be reconsidered. Even in multi-touch devices it’s a bit awkward to navigate and it couldn’t be less on other phones with the limited pad.
A good idea is to use lists, always, and keep links to a max of 10 per page possibly adding accesskeys (these last ones won’t be useful on multi-touch devices).
Avoid multi-levels links because on small screens won’t show properly.
Provide escape links to home, next, and previous section, at the end of each page so the user won’t need to scroll back to top.

Resources and bandwith are 2 of the biggest limit of mobile phones. Avoid object and javascript when possible because they are not supported on old phones and on the new one they drain the battery.

Limit also the use of images because they add weight on the page, plus you need to consider which would be the right size for them. If you want to play safe stick to the minimum which would be 120px wide. Another option is to use the size of the bigger screen you expect your site will be browsed (let’s say 480px, the width of an iPhone in landscape orientation?) and then apply this technique to let it adapt at the screen like your liquid layout. Obviously it’s not a “best practice” because the browser should anyay download the big picture. The right way of doing it is to use images with fixed dimensions and resize it on server side if you have to. When you can, always use sprites for images (if you don’t know what I’m referring to read this article on ALA). As usual, don’t forget the “alt text” in case the image isn’t loaded.

I mentioned the page size, my advice is to stay between 10kb and 25kb. I’m talking about the basic devices, for smartphones it’s ok also 50kb and for touch phones even 100kb but it’s better to stay low and it always depend on the quality of the connection.Caching is also something that can help you a lot with loading time, try to avoid common resources to be always downloaded and control caching
<meta http-equiv="Cache-Control" content="max-age=300"/> . Fun fact: Safari on the iPhone caches only files under 25kb, so zip all you external files like the stylesheet and try to stay within that weight with your images sprites.

When you style your fonts I suggest you don’t specify sizes in pixels, rather use “small/medium/large” because every device knows what’s right for him.

let’s talk about links: on mobile phones there’s no mouse so no hovering, forget about the attribute “hover”. Something fun instead is that if you use “tel:” or “sms:” in links you can actually activate those function on the phone, which would be pretty coolin your contact page as by clicking a link they can call you. here an exemple

<a href="tel:43802948">call us</a>
<a href="sms:12125551212">Send SMS to 1(212)555-1212</a>

Getting a bit more technical the first rule for your site to be rendered correctly on mobile devices is to use the right doctype (XHTML MP), character encoding (utf-8), and MIME Type (application/html+xml).

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Site Name</title>
<meta http-equiv="content-type" content="application/xhtml+xml" />
<meta http-equiv="cache-control" content="max-age=300" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

For what concerns the structure of your body try to build semantically (in the order things appears) and avoid tables or frames.It’s best if you validate your markup, limit the link to external resources and please, don’t use popups.

detecting and addressing specific devices

Ok, what I told you till now was true for any device, but you may want to add something special or simply focus on specific devices that you know are using your site.
How can you recognize the devices and then adapt you content accordingly? First of all remember what I asked you during the planning stage: do you want to build a mobile site or adapt a web site to render on phones? if you decided to do everything I suggested in the designing process I assume you’re going for a mobile site (good boy) but if for any reason you want only to adapt, the easiest way is with CSS. Add a separate stylesheet for mobiles

<link href="screen.css" rel="stylesheet" type="text/css" 
media="screen" />
<link href="mobile.css" rel="stylesheet" type="text/css" 
media="handheld" />

@media handheld {#image1 {display: none}}

in this exemple we decided to don’t display an image with that id on mobiles and could be really useful if you’re adapting your web site. With the same technique you can address some particular devices by their screen resolution:

@media only screen and (max-device-width: 480px) {}

In case you want to be more specific in your adaptations and you need to know the models of phones that are visiting your site you can identify them by the infos they share in their http header, the “user agent”. Online there are several databases that contains all the infos about every user agent. For instance you can use the WURFL database which in an opensource project and shares an API that you can use in your server side code to adapt your site content and presentation to the specific device. Another database is DeviceAtlas which also shares its API and has various tutorials like this one to implement it in your PHP code.

iphone

Yes, I know there’s a lot of hype around it and i didn’t forget it. Here are some tips specific for this device.
The best advice is to keep the user experience close to that of the iPhone throughout your site. This doesn’t mean to avoid originality. What I mean is rather to use lists for your menus and keep buttons big enough to be tapped, this is a touch phone.As it runs Safari 4 you can code in xhtml and use CSS. Actually the fun part is to use all those CSS3 rules that aren’t supported elsewhere and the most common it’s obviously the rounded corners:

 div {  
     color: #bcbcbc;  
     padding: .5em;  
     -webkit-border-radius: 6px;  
     -moz-border-radius: 6px;  
     -khtml-border-radius: 6px;  
     border-radius: 6px;  
     } 

Start by adding in your the viewport in order that the page will fit nicely:

 
<meta name="viewport" content="width=device-width;
 initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 

Second step is to hide the address bar as we already have so little space for our content. We simply need a bit of javascript:

 
window.scrollTo(0, 1); 

Create a Springboard icon that represent your site if someone decide to bookmark it in their home screen. It has to be 57×57 pixels and you should add<link rel="apple-touch-icon" href="icon.png">
Something I think could be very useful is a small function that once detected an iPhone visiting your web site pop-ups a small window asking if they want to switch to the mobile site. A tutorial can be found here.
As an alternative, if you think a pop-up is too intrusive, you can simply show a message to inform a visitor that the mobile site is available. It simply detects the user agents as I explained before, but read more in this quick tutorial.After these first steps it’s up to your creativity. Remember to use big target areas in your links and buttons because users should be able to press it with their fingers. Use lists for menus and links, use columns for text and breaks it in chuncks. Actually keep in mind everything I said in the first part of the tutorial and apply it also to the iphone even if here you can push things a lot forward. Read the official safari web guide to learn about best practices and system limits of the iPhone. It’s short and it helps a lot.

If you need some help with the interface you can use some frameworks and tools. Check this resources:
Dashcode
iUI
Yahoo stencils for the interface

testing

To test what your sites the ideal option is always real devices but in case you don’t have them or that you’re working locale there are some other tools. For the iPhone is better to work on the SDK from Apple if you have a Mac. If you’re on windows test your results with MobiOne, a very nice emulator I use as well.
For other devices you should check if there are specific emulators, otherwise the MobiReadyvalidator by dotMobi is a very helpful resource to check how your site would render and rank in speed, weight, etc, on many handsets.

wordpress

In case you are running a blog on wordpress and you simply want it to render decently on mobiles I found a couple of interesting plugins:
iWphone it’s thought for the iPhone and basically adds a theme thatworks well on that device;the dotMobi Wordpress Mobile Pack is more complex and complete, it actually fully mobilize the blog making it xhtml-mp compliant, adding specific themes, it integrates with the DeviceAtlas database, and so on.

resources

There is the usual list in the enu below the article, but it was important to give some relevance to this particular resources that helped me a lot and could do the same for you:
the web developers guide from MobiForge, which contains everything you need to know.
another guide on developing mobile sites, more sinthetic then the previous one and with happy graphics.
MobiForge, the entire site it’s th best place to start your education on mobile sites.
At iphonmicrosites.com you’ll find some very useful tuts, eventhough they obviously focus only on the iPhone.
Speaking of iPhone, check on Nettuts the tips by Paolo Ranoso or the indepth article on Webdesignerdepot.

content strategy

The web is content. seriously.
People go on the internet to find informations, to do something, to solve a problem. Either way you’re looking for content. It sounds obvious that is the key element of your site, but usually, during the design process it’s the last thing we worry about. Why? Well, usually we think it’s somebody else’s job, or we’re going to use what the marketing has prepared or we think we pretty much know what we want to say. No biggie.
Wrong.
I’ll show you in a while why this is so important, but first let’s see what exactly content strategy means. Please, also remember that when I say content I refer not only to text or copy, but to data, video, audio, images, etc.

what does content strategy involves?

Quoting Kristina Halvorson, a real guru on the subject, “content strategy plans for the creation, publication, and governance of useful, usable content.
Content strategy helps you understand not only what content needs to be created, but why.”

It comprehend several aspects:

Ok, pretty quick and not very detailed, but that should give you the general idea of which are the expertise and functions of a content strategist.

ok, but why?

Yeah, but still I can’t exactly understand why this is so important and I should get into so much trouble for it.
Here some good reasons:

- SEO: don’t deny it, it’s an inflationated word but you do care about it. Here I don’t have any magic tricks, but you can style and organize your content to be more effective for search engines. You should be able to insert some keywords without ruining the quality of the copy. It’s very useful to get a very specific audience on your site which also mean that if you have targeted ads it’ll help your convertions having more click through.

- Design: ever wondered why the nice templates you show the client are never really the same once in production? That’s because you used some place-holders and Lorem Ipsum having just a general idea of what was going to be on the site. If you have the real content at your disposal you won’t break your very well planned user experience at the last minute.
Another reason to plan content before designing the site is that design actually tries to communicate something in relation to the content and the brand. If you don’t know what you’re designing for you won’t create something that helps the content and the brand spirit. (never mention Lorem Ipsum to content strategists, they literally loose their mind. if you do it by mistake, run.)

- Usability: yes, I love this word. And content has a huge role in it. I mean, it’s important to have a clear and understandable interface with simple navigation and so on, but then, if the content fails to be helpful and readable we wasted our efforts.

- Persuation: let’s face it, today everyone is a publisher and you need to catch your reader attention. You want to communicate something and if you can break through it doesn’t hurt.

- Brand: “good content add luster to the brand” says Colleen Jones.

All right, now we have a general idea of what content is and why we need some strategy.

teach me, baby!

Let’s get into the real stuff: How can I put in practice this concept? Karen McGrane is some sort of goddess explaining this and make sure to check the slides at the end of the chapter. I’ll try to summarize the most important steps.

She uses a very effective model to visualize the process that occurs planning a site from a content strategist point of view

I mentioned that you should do, and then keep updated, a content inventory. It’s really what it sounds like, a list of all the content you have on the site. Usually a excel table. Sarah Rice share her model here or Jeffrey Veen gives another exemple here. At the beginning of a project it’s useful to know what you’ll work with. List the content and try to categorise it by tone, accuracy, consistency, relevance, and so forth. It helps Information Architects that now have the means to know what is possible and what not in their planning, and it helps writers because they want to know where their work is needed, not just randomly write stuff.
For a more practical guide check the link to Veen I gave you few lines above, it gets into details about an optimal process.

quality content

The process for a content strategy we’ve seen so far it’s really good but I think you may like to look at it from another perspective: how to create some quality content?
Colleen Jones has written an article on UXmatter about that, let’s see if I can shrink it a bit for you here. To ensure content quality a style guide isn’t enough because it usually address only word choice and brand voice. We should instead use some content heuristics.

These are some useful guidelines but still, you should get an expert opinion, do usability testing and and check users feedback. Additionally always use a content inventory and analysis.

content analysis

Assuming you now have a general idea of the process for a content strategy and you may have already done your content inventory, you should check for significant problems with these content analysis heuristics that Fred Leise has listed on BoxesAndArrows.

There’s so much to say on this subject and I don’t have the space here. Check the reference I listed below as usual in the “Get to know more” section, but I would suggest as a good start the Braintraffic blog, Kristina Halvorson’s place, which has tons of practical tips on content strategy. Karen McGrane, Margot Bloomstein, and Jeffrey MacIntyre who runs Predicate, LLC are the other names to follow in this business if you want to learn more. Kristina Halvorson has also recently published Web Content Strategy, obviously a must read. I’ll soon get my copy.
finally, the Knol on Content Strategy is a wonderful starting point to found everything related on the web.

I hope you enjoyed this article and if you did share it so we can spread the word :) If you have any question I’ll try to answer everything in the comments or you can get in touch on twitter.

by Jasper Goodall | via Buamai

8 March byIunewind

Black Wood by Jordan Metcalf

Bolda Display by Morten Iveland

CMYK Lovers by Arbol Charyou

CrowdSourcing by Pablo Alfieri

Elevator Dubois meets Fugger by Darrin Umboh

Cups by Boey on Fubiz

Garamond III by Leonard Clagett


Since I saw her pictures she became my favourite photographer. The 16 yo Jacqueline Rivera has obviously a great talent. via BenTrovato

by Adolfo Correa

by El_Silencio photostream

Radical Element by Dr4oz

Try-Type by Til01

Wash Your Hands by BK1ll3er

Waste Not. Want Not. by Mike Campau

What Will You Defend? by kolOut

Caroline and Micah met at the Otis College of Art and Design in Los Angeles where they graduated after working together
on Thegoodsideof.us, their senior thesis and an online community where people can share stories of their good deeds.
Using their creativity to make the world a better place one site at a time is an attitude that they kept and earlier this
year they founded A Good Company, their design studio which brought us The League Of Moveable Type.

DB: Let’s talk about The League of Moveable Type. Please, introduce this project yourself.

Caroline: The League started when we saw this thread on Typophile calling type designers for an open-source font project. We saw the negative reaction that it got from a lot of people, and thought that we ought to do something about it. We thought that it was a great idea, especially with the possibilities of what we can do with @font-face, it seems like too good of an idea to just let die. We also realized that there are a lot of free fonts out there, but more than just giving away free stuff, being designers (and most of our work involve the web) we wanted to raise the standard of typography and design on the web. So we came up with the idea for an open-source type foundry, where we focus on quality not quantity, so we can provide people with hand-picked quality fonts.

Micah: It’s funny, it kind of started as a dare. Everyone was saying “that’ll never work,” and “what a dumb idea,” and the rebel in me was just shouting, “Oh yeah?!” So we came up with this idea, it exploded, and now we’re trying to push even further.

DB: Why you chose to support the distribution of open-source fonts on the web? Is there a phylosophy about the future of the web behind that?

Caroline: Well, you see, we’re communists. No, just kidding.
The reason we support the idea of open-source fonts, is not so much because it’s free, I mean, yes, we like free stuff, as much as the next guy, but we also like the idea of groups of people, from different backgrounds, all over the world, working together, not for monetary incentives, but for the common goal of making something work better than the way it does now. It’s already happening with software, and we want to do the same with typography and design.

Micah: That sounds pretty Communist to me. I love it. That’s what the internet was founded on, and I think that’s the way of the future. People are making money on the internet right now, for sure, but I think it’s just a phase. Eventually it won’t really matter.

DB: was it difficult to launch the site and find other type designers that wanted to join you?

Caroline: in terms of finding people to join us, well, we’ve gotten a ton of support from people who appreciate what we’re trying to do, and that’s been really encouraging for us to work harder on The League, and make it better.

But finding type designers who are willing to give away their typefaces for free, is rather difficult, especially when their livelihood’s dependent on selling typefaces. But we’re also lucky that some designers are actually quite generous with sharing their typefaces, we’re talking about our wonderful contributors, of course.

We’re super grateful that they’re willing to share their work with everyone, and we’re always on the look out for more designers who are willing to share their work or help us expand/finish/improve the fonts we currently have, because I believe that’s the way The League can sustain itself, if people come together and contribute to the open-source movement in some way.

DB: are you making some plans to expand this project in the future?

Micah: I think the biggest issue we want to face with our future plans is how to turn all the people who love typography but don’t consider themselves typographers, into typographers. If everyone who wants to help works together somehow, we can completely flip both the internet’s design community and the professional typography industry on their flippin’ heads.
We’re still very much brainstorming, so we’re trying to collect great ideas from anyone enthusiastic about the topic, and I cannot count the number of hours that Caroline & I have gone back and forth discussing crazy ideas of things we hope to do with this.

DB: how you think Moveable Type could help designers, why they should choose it?

Caroline: I think The League is useful not just for designers but for everyone on the web community. As a part of this open-source movement, designers, typographers, programmers, we can work together to improve typography on the web and elsewhere.

One of the things that I feel strongly about The League is that we want to offer more than just a site for free fonts. Yes, the typefaces are there for the taking, but free fonts is a finite resource, what we need is co-investments, we need people to also give something back and take away something other than free fonts, something like knowledge or collaboration between peers to make something awesome.

DB: what do you think about the .openfont idea by Tal Leming & Erik van Blokland? And about Typekit renting licences?

Caroline: I’ve been following the webfont discussion, and my personal take on it is this: type foundries, type designers, and entrepreneurs can use whichever solution they find most suitable for them, as long as it doesn’t mean getting rid of @font-face and forcing everyone to comply to one standard of webfont.

People should have choices. Leaving the playing field open will allow people like us (the type users) to come up with our own solutions. Companies and type foundries will continue to come up with different ways to deliver fonts on the web, from Typekit, to .webfont, to Fontdeck, as Johno of ILT says,

we’re all “just hacking away to find a solution that satisfies our demands until a workable standard… is eventually approved and we can all hold hands and sing songs.”

That’s fine with me, and there’s no reason why the open-source type movement should not jump at this chance and be just as active as those guys in finding a solution. I see this as a chance for the open-source community to work together and carve it’s own niche in the world of web typography. There are tons of excellent type foundries out there with high quality typefaces, there’s no reason why the same can’t be true for open-source type, I believe that one day “free” fonts (free in terms of freedom, not just price) will be as legit as typefaces released by a type foundry, it’s just a matter of time, and we’re just trying to do our part in it.

Micah: I have to say, Caroline’s much more open minded about it than I am. It didn’t occur to me until a week or two into the debates that it’d be okay as long as there was choice. It really seems to me that the big type foundries want to follow Microsoft or Columbia Records’ footsteps. They seem intent on DRM, which, in my opinion, hurts the users. I was in quite a tizzy about it all, truthfully. But I guess I’ll put aside my steam as long as The League is still able to do its thing. Cuz we’re gonna knock their socks off.

DB: is there a CSS3 property you are looking forward to be fully adopted? apart from @font-face

Micah: It’s just getting there, but I can’t wait till we use columns all the time. My personal blog uses columns, and frankly, it’s awesome.

DB: do you have any upcoming project you want us to know about?

Micah: Why, yes, in fact, we do! We’re playing around with this sweet new idea. Lettercase, we’re calling it, and it’s a social font manager. It’s in the earliest stages a project can possibly be in, but we think it could be intensely powerful, and while most of the details are still hush-hush, you should keep an eye on http://www.lettercaseapp.com

DB: last question, more of my interest then the audience: what music do you listen to while designing?

Caroline: I listen to all kinds of random stuff, you can see some of them here: http://blip.fm/chadilaksono

Micah: Dogs whining, to the rhythm of Bach’s Concerto in D Minor. Or Noah and the Whale, depending on my mood.

foto: © Lars Williem Veldkampf (photostream)

Introduction to webfonts:

When it comes to web design typography is a problematic subject. Since always designers have been limited to use those so called web-safe fonts.
When specifying typefaces in font-family property within a stylesheet you tell the browser to use that font to render the html text the property refers. As different OS have different standardly installed fonts we, as designers, were forced to use those more common and known to be available to the majority of visitors (remember that the browser seek for the font on the local machine of the visitor).
That’s also why we write stacks of fonts and not only one: we try to ensure that if a font is not available on that machine then the next one will be loaded.

This article by David Rodriguez better explains in detail the situation about web-safe fonts and its practice. If you want to improve your font stacks and try new solutions still inside the boundries of web-safe fonts I suggest you download the pdf over at Unit Interactive, it has become my reference since I read it.

Of course you may argue that you have seen on many websites different fonts then the usual verdana or georgia (just to cite a couple). That’s because there are some existing techniques like sIFR3, cufòn and image replacement to use not common fonts, but they all imply the use of flash or javascript or images with many disadvantages and they are therefore used only for headings generally.

i. alternatives

Today something is apparently changing things and all typophiles around the globe are shacking for the excitement (too much?).
I’m talking about @font-face, the new CSS rule that allows to embed fonts on your site.
I’ll give you a tutorial about how to use it effectively in a while, but first let’s see what is the situation at the moment in regard to the availability of fonts.

ii. webfonts proposals

ILoveTypography has a nice complete article about the subject which I’ll summarize here.
Microsoft in 1997 devoleped its proprietary Embeddable Open Type (.eot) format which was then supported from IE 4. They submitted the proposal at the W3C but was rejected mainly for security reasons.

Now Tal Leming and Erik Van Blokland proposes a new format, .webfont, which would consist of two files: a raw file of the font (i.e. ttf or otf) and a info.xml file wich contains the permissions about that site using that font. The browser read it and decides if it’s ok to load it or not.
You can read at ChezPorchez more in detail about how that works.

David Berlow of Font Bureau proposes instead permission tables for Opentype inserting permission infos inside the font file (so you get only one file) already embeddable by @font-face because it’s still a .otf.
One critic about these solutions is that we could edit the xml file to add permissions without owning a license.
Meanwhile Ascender has been working to evolve the EOT format of microsoft in a more friendly to use EOT Lite.

In latest news, the efforts of Leming & Blokland have joined those of Jonathan Kew (Mozilla Corporation) to give birth to the WOFF format, a unique compressed font file which contains meta-datas and private-use data. Here’s a quotation from the official document

The WOFF format is directly based on the table-based sfnt structure used in TrueType[1], OpenType[2] and Open Font Format[3] fonts, which are collectively referred to as sfnt-based fonts. A WOFF font file is simply a repackaged version of a sfnt-based font in compressed form. The format also allows font metadata and private-use data to be included separately from the font data. WOFF encoding tools convert an existing sfnt-based font into a WOFF formatted file, and user agents restore the original sfnt-based font data for use with a webpage.

Apparentely tools for the conversions of files are yet to be created, but that’s a step further towards a solution. The official document is here.

However the problem is that all of these solution must be accepted by W3C to be adopted in the future, but W3C will start working only on a proposal that is supported by the majority ot typefoundries and there’s not an actual type industry — commonly represented at least — so the decisions are always pretty indivualistic and this slow things down. Then of course we should wait that browsers support it.

iii. distributors solutions

Someone is already supporting @font-face rule by selling licensed fonts enabled to be embedded.
One is Typekit, which rents the font instead of selling completly the license.
You chose on which domain you’ll use it and then you’ll pay per domain monthly. In exchange you get a javascript code which embeds the font hosted on a third party server.
Typoteque is doing something very similar, selling licenses (not monthly but per domain as it seems) and hosting on a cloud the font. You’ll get instead of javascript a css code to add on your site. They also explain that when you pick the font you also need to select the language. This helps them eliminate the characters you won’t need and serving you a much shrinked file for fast loads.

Andy Clark over at For a Beautiful Web complains that typekit is a nice solution bu it lefts a problem for us designers: if we have a license that allow us to only embed a file on a site and we don’t own the font, how can we use it offline to show projects to our clients?
Actually he doesn’t care too much because he is also pushing his collegues to start working within the browsers which would also solve this problem.

Then of course there are some openfonts to use, free typefaces in some cases created as opensource projects or simply offered with free embeddable licenses.
On Webfont.info and Font Squirrel you can find some great list of available fonts for embedding. In particular on this site I use a couple of fonts hosted by The League Of Moveable Type and Cape Arcona, you can see which in my about page.
Jos Buivenga also offers a nice selection of fonts.

Can I use every font I want? No, you are obviously limited by End User Licensing Agreement (EULA) therefore choose carefully which fonts you use.
For instance you can’t upload online a font among those that came with your OS because they are generally licensed strictly for a use within desktop applications. By uploading them you would violate the license and also expose that font to be downloaded by anyone as it’s on a web server. Always choose fonts you know that are specifically licensed for embedding.
Always read carefully the EULA of the font you bought or found online, because even when you pay you’re not really owning the font but only a license to use it. On Font Feed they explain very well how to read an EULA with the exemple of the new version used at Fontfont.
If you find a font which is free and you are not sure about you can write a comment in your stylesheet near the @font-face rule asking for permission, as it is suggested on Hack.Mozilla.

@FONT-FACE: HOW TO USE IT

If you read the first part of the article you could think that everything is still very messy and we won’t use this method any time soon yet.
No, infact everything is ready and you can finally enjoy the new @font-face rule to style your body copy.
There are some limitations about the availability of fonts, but we already have a vast variety at our disposal, and many last generation browsers support it (Opera 10, firefox 3.5, IE since 4, webkit-based/safari 3.1.) You can find a detailed list at webfont.info

So, here it is how @font-face works: it’s a rule for your stylesheet that allows you to link to a font (a .ttf .otf .eot file) the same way you now link to codes and images. Your font file is hosted on a web server and @font-face load it from there to render your html text where you specify it.

/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
}

It has 3 declarations:
font-family: which is the referral to later use in your font stacks. It’s arbitrial, you can freely choose how to name it as long as you use the same name in the font-family property for the styled elements.
src: this is where you insert the path to the font hosted on your web server.
if you think the font could be already installed on visitors machine you can then use local(fontname) and maybe list some alternatives as well as the path to an hosted file.
format: let’s you specify which kind of file you are using (.ttf or .otf).
font-style: the standard value is normal but you can use this to chose between italics and bold. Actually if the font support it you can specify up to 9 weights.

If you need to know the exact name of the file to write a perfect path on Mac OSX and Linux you can simply click “font info” among the file’s options, on Windows instead you’ll need the font proprietary extention. However generally the name of the font is given by the family and the style (i.e. “helvetiva bold”).

To recap: Look a this exemple from HackMozilla

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), 
       local("HelveticaNeue-Bold"), 
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
 
body { font-family: MyHelvetica, sans-serif; }

You see that each @font-face rule has the 3 declarations. With font-family they assign a name to the font, with src they grant more then one place to find that font locally on the visitor machine or on the webserver, with format they specify that is a TrueType file or an OpenType.
Then they style the element “body” normally with the property font-family and they put in the font stack also the name we chose before, so the browser will recognize it and refer to what’s in the @font-face rule to load it.

ii. helping IE

IE, as usual, has its own rules. This time we have to admit they came first with their proprietary format Embeddable Open Type (.eot) and they support @font-face since IE4. Unfortunately that situation didn’t evolved much since then and they are the only to use that (.eot). Plus, IE doesn’t recognize the descriptor “format” and will ignore any @font-face rule containing that hint.

This means that to ensure crossbrowser compatibility you’ll have always to add a @font-face rule specifically for IE on top of the others, linking to a eot file and avoiding the format descriptor.

/* Font definition for Internet Explorer */
/*         (*must* be first)             */

@font-face {
  font-family: chunkie;
  src: url(type/Chunk/CHUNKFI0.eot) /* can't use format() */;
}

And where do you think you’ll find the eot files? nowhere, smile! you need to convert your ttf files with the Microsoft WEFT tool (I’ll explain you how shortly). This tool is only available on Windows, but here you can find the GPL opensource equivalent for other OS.
However this two tools help you convert only .ttf files in .eot, but what about Opentype .otf? you’ll need to follow the instruction of J.Malcolm in this comment.

As I mentioned a few lines above, let’s see how to use WEFT to convert .ttf files into .eot
Jon Tangerine explains here his way, probably the best.

iii. Optimizing for IE

Allright, you would have all the element to use @font-face successfully, but you would still need to use 2 selectors to support IE and this is not that beautiful. Moreover, even if you’re not so concerned by your code’s beauty, you may be about your performances.
Andrea Giammarchi early this week noticed that when IE read your @font-face selectors tries to load also the .ttf files simply getting a 404. You won’t notice this unless you check your server log but it’s still useless work for the server. Paul Irish comes on his white horse to save us with a simple solution: in one selector you can list first the src to the eot file for IE and then a local src which makes IE ignore the subsequent src to a ttf file for any other browser. simple, slick, beautiful. You can read about the whole testing process on Scott Kimler’s blog.
Here instead an exemple of the working code taken from Giammarchi’s page:

@font-face {
    // define the font name to use later as font-family
    font-family: "uni05_53";
    // define the font for IE which totally ignores local() directive
    src: url(../font/uni05/uni05_53.eot);
    // use local to let IE jump this line and
    // redefine the src for this font in order to let
    // other clever browser download *only* this font rather than 2
    src: local("uni05_53"), url(../font/uni05/uni05_53.ttf) format("truetype");
}

Conclusions:

That’s it, we have seen what was the situation of typography in web design until yesterday, what are the proposals for tomorrow and how to use @font-face today.
You have all the tools you need and even if it looks tricky reading such a long article I can assure you that it’s very simple.
So it’s time for you to contribute to a better Web with beautiful typefaces!

If something is not clear feel free to ask me anything in the comments or have a look at the resources I listed below under “Get to know more”.

Sox, Director of User Experience at vimeo has kindly accepted to answer a few questions to better understand his work.
He tells us how to plan a new project, how to have a good start in this business, and what happens behind the curtains at Vimeo. Plus, he has some good advice about wireframes that you can’t miss if you read Wireframes and Concept.

DB: First of all, welcome Sox and thanks for your time. Let’s get straight to the questions.
what’s your background? are you self-thought or did you attend specific studies?

Sox: I am completely self-taught. I did not study related fields in school. I bought few books but everything i’ve learned came from simply watching and doing. I am big fan of reverse-engineering. Seek out what it is you want to do, understand how it’s done, now try doing it yourself. there will always be people who are better than you at what you want to do. watch and learn from them.

DB: when did you start working?

Sox: I’ve started fairly early. In 1995 i got my first job out of school as a web designer for a small garage interactive agency in connecticut. Over the years i’ve worked at streaming Media Corporation, Priceline, Fotolog, and Vimeo. I have also worked as a consultant at few different places in between.

DB: could you explain to us what your job is and what it consist of?

Sox: I am the director of user experience at Vimeo. My daily responsibilities consist of overseeing and engineering the overall presentation and experience at vimeo.com. I perform product development ideation, user experience and design auditing as well as some design and coding work as needed. The main objective of my position is to keep vimeo as simple to understand as possible, as easy to use as possible, and as fun to experience as possible.

DB: How do you usually start a project? And do you have a method you usually follow throughout?

Sox: it all depends on the nature of the project. If it’s an enhancement task then the work starts from gathering as much user feedback as possible and making the necessary improvements that align with our overall objectives. For a brand new project, the entire cycle from ideation to delivery requires much more time and effort. Typically it starts from identifying an area of our service where we could add as much value as possible to our offerings without compromising our overall objectives (simple, easy and fun). We bring in all the stakeholders to discuss the project and come to a decision whether to move forward or not. Once the project gets a green light, then the hard work begins. Our working process at vimeo isn’t all that different from other product development cycles. We prototype, design, develop and then wash it through several iterations until it’s ready for polish and testing before it rolls out to the users. Perhaps the real unique part of vimeo process is just how agile and iterative the product development cycle can be.

DB: For someone who is just starting what are the most important advice you would give him?

Sox: learn by doing. Question why before how. Find your own reasons.

DB: What can you tell us about wireframes? do you use’em a lot? can you share some advice or technique with us?

Sox: I sketch a lot. For me it’s helpful because i cannot not think visually. They also help me examine the requirements and identify the limitations of work that needs to be peformed. Always keep the margins free. If you are not bumping against questions that need answers or problems that need solutions during the prototyping phase then you’re either extremely lucky or you’re not doing it right. Keep those questions and answers in the margins as you work. They’re far more important than anything you’ve already drawn.

DB: What does inspires you in your work? and there’s someone on the online world who had a big influence on you?

Sox: solving problems is immediately gratifying and addictive. I see most web sites as a sculpture. You have a vision of what it should ultimately look like. everyday you are adding or taking away a little bit of clay, shaping it a step closer to the ideal image you have in your mind. Then one day you look at your sculpture from a different angle and realize new questions, new problems and new possibilities.

There are many people whose work had inspired me over the years. Off the top of my head i would mention Jesse Garrett, Dan Cederholm, Douglas Bowman, Jeffrey Zeldman, and the folks over at Stamen Design.

DB: What is it like to work at Vimeo, what’s happening behind the courtains?

Sox: it’s fast paced and fluid. We have a very flat structure to our organization and everyone is working on their daily tasks or thinking about what they will be working on next. No one gets micromanaged and we trust and depend on each other to get stuff done. Everyone is tapped into an internal IRC system where we keep an eye on the health of various sub systems of our site and exchange ideas.

DB:There’s a difference in your job between working on a small site and a big one?

Sox: i’ve been on the both sides of the fence and i must admit i much prefer working in a small to medium sized group. In a larger organization, i’ve typically experienced more hierarchy and more stakeholders with varying or conflicting interests that stymied good projects from moving forward with energy, focus and speed they deserve.

DB: What you feel was the most challenging thing about Vimeo from your point of view?

Sox: in the beginning it was all about correctly assessing the vibes of the service and its community. I need to understand it and feel it resonate in my bones before i can start contributing. Taking this first step the right way is always important to me and it requires time. More recently, i’ve been spending more time focusing on the scalability of my ideas and how it would impact the general performance of the site (the most important part of any user experience work).

DB: What are the tools you couldn’t live without?

Sox: honestly I don’t think it matters all that much. I would probably say a good pen and some blank papers. The applications i use heavily on daily basis are Textmate and Firebug. We also rely on several internal admin tools to check, monitor and debug our work.

Your 5 favorite sites online?

Sox: you mean other than cycling related sites? Let’s see… google, gmail, google reader, tumblr and flickr.

If you want to take a look at some of Sox’s design and wireframes he has a stunning portfolio on Flickr. It’s also a good chance to check how Vimeo was created.

From Norway comes another project that shares the same principles of Chrome OS and it’s probably an alternative or accessorial to that system.
Opera Unite simply turns your computer into a server. You still use it as a normal computer, but you can also share all the datas you have on it with your friends and who you’re connected with.
This Article is related to Chrome OS: Revolutionary?

Opera Unite

At Opera they say it is also a way of owning back our datas and our freedom of decision-making on a certain level. Right now we have to rely on third party servers that host our materials or on third party services that host our contacts and make the rules with “terms of service” (i.e. facebook, myspace, etc).

Our computers are only dumb terminals connected to other computers (meaning servers) owned by other people — such as large corporations — who we depend upon to host our words, thoughts, and images. We depend on them to do it well and with our best interests at heart. We place our trust in these third parties, and we hope for the best, but as long as our own computers are not first class citizens on the Web, we are merely tenants, and hosting companies are the landlords of the Internet.
Social networking is important, but who owns it — the online real estate and all the content we share on it? How much control over our words, photos, and identities are we giving up by using someone else’s site for our personal information? How dependent have we become? I imagine that many of us would lose most of our personal contacts if our favorite Web mail services shut down without warning. ( … )
— by Lawrence Eng via Opera Labs —

Opera Unite instead makes possible to make connections straight from our computer to another without a third player.
Instead of using an online service you could just use an application that runs on your computer and on your friend’s one.

Let’s see a practical exemple to fully understand how it could work.
There is an application available right now (that you may not know but it’s clever so go check it if you’re interested) called Simplify. You install it and create an account. After that you pick which folders you want to share online and you open your favourite music player. If you have some friends running that application and you connect to their account you can then listen to whatever track they have shared and they can do the same with you (cool as hell, I tried and I really like it).
So basically it’s like you have at your disposal all those gigabytes of music, even if they actually are stored on your friend’s terminal.

Unite promise to do something like that (they also have a media player like Simplify but more lame) with the plus side to extend that to a huge number of possibilities as many application will be developed and will run on every operative systems where already runs Opera.

I have to admit that even if I love the project I’m a bit less excited by the fact that it really reminds me of old peer to peer networks. It’s obviously great that they are applying the concept to every kind of application, but the idea is not that new.
So we understand that the future is to be completely online, but Unite is taking a stand and a different direction from the current trends.

Chrome OS tries to project all our work online making it accessible from everywhere and to try to keep computers fast and clean. By that philosophy the logic association that comes to mind is cloud computing, with all our datas stored somewhere and the result of make them always accessible as well.
Opera Unite instead wants you to own back the power over your informations and online identities making the individual user the only player.

Two different approaches to a near future. What would you prefer? In your opinions what are pros and cons?