Archive for the Web Development Category

Shameless PromoTion: Sapo Pond

It’s been a while since my last Shamess PromoTion, where i highlight projects created by friends, mostly from Portugal. The project i’ll be describing today was developed by SAPO, where some good friends managed to deliver one of the most solid web applications i’ve seen lately, specially considering that Lisbon isn’t exactly Silicon Valley.

pond

So, what’s Pond ?  It’s an aggregator and publishing tool for social media services, that allows anyone to manage their social graph on a single place. You can import your friend list from social web services, merge friend contacts and update your social web status on the web, mobile or desktop.

mobile_lineup

The wide range of platform support is certainly the highlighted feature:  Besides the web, Android, and Symbian mobile apps are available (iPhone soon) and desktop software (Mac, Windows and Linux) will also be released.

Currently Pond supports Twitter, Flickr, SAPO Fotos, YouTube, SAPO Vídeos, Facebook and SAPO Blogs, as well any RSS or Atom feed. It will surely be a great way to introduce the power of social web to a wider portuguese audience, since the application is sponsored by TMN — the largest mobile carrier in Portugal (disclaimer: TMN is a Fulllsix client) — PT Comunicações and Meo (it will be interesting to see a social app on a IPTV service: social TV).

With smartphones becoming more affordable, growth on the social web will be fueled by mobile web with centralizing services like Pond or Vodafone 360 taking full advantage our digital identities. I only wish i could add more metadata to my friends info, like birthdays, tags or events. Give me that, and i’ll be a happy ? Ponder ?

Great work, SAPO team!

P.S.: the service is on beta — invitation only for the moment — with early registration for TMN clients.

Shameless PromoTion: Sapo Pond

Create Your Canvas

If there’s one place where creativity excels is on a blank canvas. You “just” have to figure out what to make of it.

mycanvas

Fashion brand Land’s End is here to help with a new website developed by EVB, taking full advantage of Facebook, Twitter and Flickr to help you unleash creativity. Altough they should have used a password anti-pattern with Twitter like OAuth (there’s no way i’m sticking my Twitter password on a brand website) the Facebook Connect showed me just how my friends are the new paintbrush.

mycanvas-fb

Oh, and they sell clothes too.

And just in case you didn’t notice the writing on my painting, Portugal’s main Online Advertising Award is up for voting at http://premios.sapo.pt/.

Create Your Canvas

Sequence redesigns a new web experience

Even if this blog has focused mostly on Flash based interactive experiences, that doesn’t mean i have anything against web standards. Quite the contrary, with XHTML+CSS being preferable in most of the cases, unless your idea uses media that is best fit for a more interactive technology.

And since what really matters are fresh ideas, here’s the redesign from Sequence, a San Francisco based design and strategy agency that excels on using modern web standards to create a dynamic website, with a unusual approach to navigation, that many would thought impossible a few years ago without using Flash.

sequence-home

Under the hood the website is using HTML5, CSS (with an iPhone optimized version), Javascript (Mootols) and Cúfon, a font replacement technique based on SVG (VML on IE) and JSON.

sequence-team

We’ve come a long way in web standards, and even if XHTML 2 is no longer, there’s plenty of innovation out there, from Mozilla Labs to the multi-platform reach of Webkit. So you’d better think of a pretty damn good excuse to develop a site only in Flash.

Sequence redesigns a new web experience

Social, Portable and your mom

oauthmom


The enormous growth of social media services, with Facebook now over 175 million users and Twitter having a yearly growth rate of 1382%, validates the need for companies to start using these social platforms to engage with customers. And with more people joining these platforms, the amount of content created and shared also increases, with users becoming more sensitive on the way they build their personal network.

At first, users are driven to sign up by curiosity or bombarded by constant friend requests, joining their close circle of contacts. The trouble is that it doesn’t stops here. You then become a fan of your favorite author, start following you favorite basketball player on Twitter or discover that old colleague from trainee years.

The social network, once reserved to our closest friends, is now growing beyond any reasonable Dunbar number and providing much more value that keeping us connected and building group stability.

Friending is a social verb

We can’t deny it: we love groups. We need to belong to a social circle. Bigger online social circles usually imply an increasing complexity of filters and preferences necessary to make it manageable, with revised criteria for friending people. As personal networks grow in size and influence, we also get to the see how artificial barriers to entry are built, with cultural groups creating psychological boundaries (from celebrities to intellectual prejudice).

From Coleman’s concept of network closure as social capital to today’s social media rise, we’ve kept the need to include in our social graphs both weak ties and strong ties. What changed was the way both geographical and social circles were affected by the Internet. Twitter, for instance, favors an asymmetric behavior regarding groups, by not requiring two-way acceptance to get updates. Facebook, on the other hand is focused on a reciprocal relationship that implies social approval.

The nature of these social network relationships also changes according to the stage of a person’s life, with younger demographics having fewer and closer friend evolving to adult life with connections more essential to structural sustainability and innovation. Linkedin, a professional social network, is based on more private conversations and encourages these weak ties, quite valued on today’s economic uncertainty.

In most of these online social networks, users put a great deal of effort to perfect their profile, showing that it goes beyond fine tuning preferences, it’s also a public expression of the self. At social music service Last.fm, your playlist is a pretty good psychographic profile of who you are. Or at least, how you want to be seen by others.

But all these profiles, filters and preferences, where users spend hours so they can have a better experience, are mostly useless. Useless in the sense you can’t easily get this data out of centric platforms.

Portable me

These platforms have been evolving slowly, from pre-api times were each user had to login on services and invite all his relevant social circle to today’s APIs with password anti-patterns and OAuth Support.

If Facebook started providing closed filtering and grouping mechanisms, Google has pushed even further by releasing Portable Contacts. The open standard makes it easier to access your social circle information in a safe way, using existing standards and libraries (OpenSocial, OAuth, vCard).

Users can port in their existing network of friends and see who they know is already using a site. It goes beyond the Facebook feature of optional grouping when adding a friend, by enabling 4 system groups for each user, accessible by service providers. Any user can manually add contacts to the Coworkers, Family, and Friends groups; the My Contacts group contains contacts added to contact groups by the user.

Your mom

What’s your mom have to do with this? Well, let’s put it bluntly: most of us don’t want to share some of our social network updates with our mom, the same way most of us as teenagers didn’t want her to know who we started dating. Or as Clay Shirky mentioned last year at Web2.0 Expo: “What filter just broke ?”  As experience architects, we should be thinking on providing context to social circles and encourage the integration of third-party applications that respect this behavior.

Your mom probably doesn’t have a clue what Microformats or Data Portability is, but she still would love to have a future where she could setup a TV with her media preferences, thanks to a simple Facebook Connect on a Boxee device. That way, you don’t need to worry that she messes your remote when staying for the weekend.

With each consumer defining proper contexts, with new tools and better ways to manage their portable profiles, brands and services that encourage this open portability will get to build better behavioral approaches to this ubiquitous vision. The structural holes that will be detected once the data starts flowing will provide immense growth opportunities and gains in productivity, as each person starts connecting their networks with the appropriate context.

Cross posted at DraftfcBlog
Revised by Andr3

Illustration remixed from Mags and Bryan Veloso

You can also Discuss on the Facebook Page. (See what i mean: the irony of writing this post ad inviting people to closed conversations)

Social, Portable and your mom

Progressive Enhancement with Flash

pef

As promised, here’s the presentation from yesterday at RIApt AUG, on a 30 minutes talk about why you should care about Progressive Enhancement and how it can be applied to websites developed with the Flash platform.

The sample code (with SWFObject, SWFAddress and XSLT samples) is also available for download.

Update: As Marcos rightfully points out, the Slideshare link isn’t that “accessible”. So here’s a PDF or ODP for download.

Progressive Enhancement with Flash

24ways.org, a web design advent calendar

During this month, some of the most established names in web design and development have been publishing a daily article at 24ways.org, keeping the tradition of previous years.

24ways

From Jeffrey Zeldman to Drew McLellan (not to be mistaken with Drew from Marketing Minute), the 24 articles are one of the best web design resources created this year, with solid tips from beginner to advanced for web professionals or just to impress your friends.

Highlights to the articles by Jason Santa Maria on Making Modular Layouts and a art direction beginner class by Mark Boulton. A edgeofmyseat.com production, it was edited by Drew McLellan and Brian Suda, with design by Made by Elephant.

24ways.org, a web design advent calendar

Scope Creep

Meet John Scope and Emma Creep.

Scope is tidy and well structured, with nothing disturbing his world order. He completes his duties on a very efficient and resourceful way.  And even if we scramble their world view, things don’t fall apart.
On the other hand, Mrs. Creep is quite flashy, very liberal and never stays too long on the same place. She loves to please her friends and clients, even though she doesn’t succeed every time.
Here’s our Scope Creep couple, a vision of what goes on in interactive projects.

Scope starts at the activity definition, with an overview of required resources. It then continues to create the processes that are agreed among all parts towards a final goal.
And then comes the Creep, with the chance of being hit by last minute change requests, way beyond the initial briefing or suddenly being confronted with a reality that wasn’t present as the project started.

Scope creep usually happens when the initial requirements and resources are incorrectly defined or when unforeseen changes and tasks appear along the project, requiring new functional adjustments and project rescheduling.
The saddest truth, at least for interactive projects, is that scope creep is bound to happen. There’s no sure way to avoid it, but one could start by finding out why it happens, instead of just focusing on the final project stages (with programmers or producers getting all the blame), where each change requires a profound restructuring of what’s been developed beforehand, whether it’s animation, programing, rendering, etc.
The most reasonable approach to scope creeping in web projects is to focus on the whole process, instead of the individual .

How to deal with Scope Creep?

We start with risk analysis, a rather common technique in project management, establishing the details before the project gets started and actually produced. But with more complex projects, the greater this risk analysis becomes. On what interactive projects are concerned, the complexity gets really huge. The web has only 10 years but it’s constantly changing, with teams having to deal with several different browsers, platforms and a variety of programming languages and product release cycles of months, if not weeks or days.
Keeping the pace with all this innovation, with lack of talented or trained team collaborators and still being able to deliver projects on short schedules is a challenge that many agencies and digital studios face these days. On top of that, the constant stream of change requests and approval process are wearing out interactive teams.

John Scope could try to get things right by setting a project duration in regards to historical records, but that just doesn’t work. No two projects are the same, no two clients are the same, no two programmers or web designers are the same. He might also try some fancy new techniques like SCRUM, and while it might work for some teams, it’s really just dividing bigger problems into smaller ones so they get more manageable.
Web projects don’t seem to have a way out of the rabbit hole, as long as the creative process is based on visual comps, storyboards and those pesky JPEGs sent for client approval.

Integrating and early planning

I stand with 37 Signals, and their “no-Photoshop” approach, using fast prototyping and wireframing on web applications and services. Focus on functionality, not visuals. Worry about what really brings changes on the process, not what is the result of the process. Unless creative agencies start rethinking their silos there’s no way out of scope creep. These days, most RIAs have drag and drop capabilities, Rich text editors or javascript libraries that can bring a client or creative into the production process to perform live edits, shortening the iterative release cycles.
This process also empowers other project members, presenting them tools and concepts that they were not aware of.

And before writing the first line of code, be sure that all interested agents have the same expectations regarding the final product. The earlier you do it, the earlier you’ll finish it. And have it written, with client, agency and production team with one common agreed goal.

It’s hard, it requires everyone’s commitment, but once we get in the flow, i’m sure you’ll make John Scope and Emma Creep happier.

Scope Creep

Baby Routan

As if it wasn’t enough that CP+B grabbed Brooke Shields for their VW Routan Campaign, they partnered with Oddcast to create RoutanBabyMaker.

On this genetic online mashup, with careful attention to interactive details (loved the buttons), the user is invited to upload mom and dad’s photos to envision how their baby would be.

A simple but great use of this technology, and spot on at the van’s target audience. That’s how interactive briefs should be interpreted – ask not what can technology can do for your campaign, but what the campaign can do for technology.

Source: FWA

Baby Routan

Fly A Baloon – the browser as a theater

Head over to www.fly-a-balloon.be
Don’t resize your browser.
Watch what happens.

One of the best examples on how to use the browser and web technologies as a creative medium. Simple javascript effects and carefully synced video can do wonders for your interactive experiences.

Fly A Baloon – the browser as a theater