As our content is scattered across sites like Facebook, Instagram, and YouTube, the idea of a single, standalone website is starting to feel a bit quaint. On the consumer side, we’re seeing that with products like About.me and Flavors.me, which try to unify your various social identities in one place. Now a digital agency called Sparkart is tackling the problem from the brand and business side, with a product called Storyteller.

Sparkart founder and CEO Naveen Jain says that Storyteller “is not a toy” — you need basic development skills in HTML, CSS, and JavaScript to use it, because you’re building sites that have the branding and functionality that you want. Right now, he says if website developers want to integrate content from other sites, they have to either manually integrate with the API of each and every site, or wait for their content management system to add the relevant upgrade or plug-in. Then, once they’re integrated, they’d have to keep track of any changes to the API and its policies. With Storyteller, on the other hand, they can access data from other sites while the platform does all the “heavy lifting.”

This was, apparently, something that Sparkart created for itself, having built websites for 300 customers including Bon Jovi, The Killers, Slipknot, Keith Urban, Ultimate Fighting Championship, and America’s Cup. Jain says the agency will be using Storyteller for every website it creates going forward. The team gave me a quick demo of the product by building a Bon Jovi site — since I’m not a developer, the product is a bit hard to judge, but they did get a nice-looking website up with YouTube videos, Tumblr posts, and more, in just a few minutes.

Storyteller is launching today in an invite-only beta. Jain says that he eventually plans to spin the product out into a separate business, so that he can avoid the problems (as he calls it, “a Jekyll-and-Hyde effect”) that agencies face when they get into the product business.

There are a lot of posts out there about identifying and hiring 10x engineers. And a lot of discussion about whether or not these people even exist. At Spool, we’ve taken a very different approach. We focused on building a 10x team.

We believe that the effort spent trying to hire five 10x developers is better spent building one 10x team.

10x matters because of the Economics of Superstars

The “Economics of Superstars” observes that in some industries, marginally more talented people/groups generate exponentially more value [0]

The Economics of Superstars phenomenon requires a distribution channel to move a large volume of goods. For superstar athletes, television enables endorsements and merchandise sales. For software developers, the Internet enables scalable distribution of digital goods.

Finding a way to be 10x better than median can now generate exponentially more value for people who make digital goods.

In software, the superstar is the team, not the individual

In the Economics of Superstars, if an individual has tremendous control over the outcome (points scored in a basketball game), that individual is the beneficiary. So Kobe gets a big chunk of the value he generates for the team, stadium, and advertisers.

Software development, however, is more like rowing. It’s a team sport that requires skill and synchronization. This applies at all scales. On a three-person boat, one person out of sync will stall your boat. As you get bigger, no single developer can impact your team’s performance, so again synchronization is key.

Making your team as efficient as possible is what determines long-term success. [1]

A bunch of 10x people != A 10x team

Most hiring processes assume that if you find a great developer and put them on a great team, the individual and team will do well. Good teams try to nail down “culture fit” but this is usually only based on whether the candidate gets along with the team.

Throwing together a bunch of great developers who get along does not make for a 10x team.

How to Think About Building a 10x Team

Building a 10x team is a different task than trying to make an existing team 10x more efficient. The hardest part about building a 10x team is that who you need next is a moving target because it’s a function of who is already on the team.

The following are the top three non-technical questions we (Spool) ask ourselves when considering a candidate:

Does this person extend the team’s one strategic advantage? Successful startups do NOT have world class design, engineering, sales, and marketing all at once. They tend to be phenomenal at one thing and competent at the rest. Eventually they upgrade talent for “the rest.” For example, Zynga first nailed virality with crappy graphics, then later upgraded their art teams.

Is there enough shared culture? – Communication overhead will cripple most teams. Hiring people with a common culture is the simplest way to solve this problem. For example, alums of a university tend to use the same jargon, think similarly, know the same programming languages, etc.. They will communicate naturally and are free to focus on higher order problems. It’s not a surprise that Paypal was mostly UIUC, for example. At Spool we’ve consciously hired mostly Stanford alums because Curtis and I are Stanford grads.Update: I apologize if I gave the impression that we don’t value diversity. As you can read in the comments, we’ve gone out of our way to build a diverse team. But there are many things that don’t impact your success early that you can short-circuit by picking people who have a similar enough background. Goldilocks Principle ftw

Does this person make other people better? A friend once told me that the best hire he made was a mistake. Had he properly screened this candidate’s technical ability, he wouldn’t have hired the candidate. But it turned out this engineer was so driven that he immediately made everyone else on the team more driven. Just by hiring him, the team became more productive, which far outweighed that individual being an average engineer. It’s sometimes worth trading off some technical ability to get a multiplier for your whole team.

What sorts of people make other people better?

When we were building Spool’s founding team, we looked for people who were technically solid but especially good at making other people around them better. The following are the types of people we identified that do this. There are probably others.

The Lead Engineer sets the technical standard. She will conduct the hardest interviews and will generally work technical magic. She will raise everyone’s technical bar. This is usually what someone says when they mean 10x developer.

The Hustler will bend the rules a little when need be, find loopholes in a system, find people you need to find, hack together systems to extract data, and set the standard for just getting things done. She challenges everyone’s thinking about how to get things done.

The Little Engine That Could refuses to lose. She manages to do great things through sheer determination. Sometimes she will tell you about this in an interview, but many times you will need to dig into someone’s background to get a read on this. She makes everyone else more driven, focused, and makes them believe great things are possible.

The Teacher soaks up and disseminates information. A teacher is constantly learning new technologies or synthesizing large amounts of information. She then distills the critical points and actively shares them with others. She makes everyone more productive almost immediately. This adds up tremendously over the years.

The Anti-Pinochio is willing to call b.s. on anyone, including the CEO. She is great at spotting b.s. and willing to ask questions of anyone. This keeps a team honest and a company transparent. This is different from being an asshole or a heretic.

The Energizer Bunny throws herself into a task fully and doesn’t have an off switch. She gets everyone to give 100% and is so enthused that everyone else becomes enthused. She sets the bar for effort and make everyone want to work harder just so they don’t disappoint her. This extends outside work too. She’ll be the first person at the party, the last one to leave, and will make everyone have more fun every day. Happy, enthusiastic teams are productive teams.

The Heart – this is the person on the team that everyone misses when she’s not around. She’ll bring cookies in for the office, she will remember birthdays, she will make people feel better when they’re down, and she will make people do great things because she’s just so lovable. People want to come to work to see this person everyday. Just having people look forward to showing up every day is a huge productivity boost.

In the following diagram, each color is a team-member rated from 1-10 on these characteristics. You can see that there’s a big hole with no color. I would gladly say no to a traditional 10x engineer to get one person with tremendous grit/determination on this team.

These personalities all play off each other. For example, a Teacher loves working with an Energizer Bunny because there is someone around to soak up all of that knowledge she shares. Or a Hustler and Lead Engineer can combine to uncover a new distribution channel because they iterate fast and are ruthless. As a result of having these people, you get massive productivity gains from complementary personalities and abilities. Combine these with your favorite/appropriate software development methodologies and you’ve got a killer team.

I’m sure there are other people who have techniques for building 10x teams. And the dynamics of what makes for a great team are going to be different across industries and stages of company. If you’re reading this and have thoughts, please do leave a comment. I’d love to incorporate it into our hiring practices.

For example, Kobe Bryant is in the 99.999th percentile of ability, while the median NBA player is in the 99.99th percentile. For that small percentile improvement in ability, Kobe Bryant generates millions more in ticket sales, merchandise, concessions, and tv advertising for his team. This pattern repeats every where and is starting to appear with software development teams and startups. If you’re good, you can be Facebook, Google, Dropbox, etc. If you’re not, you can’t get a series A to get off the ground.

A lot of people seem to have arrived at the conclusion that around seven people is the ideal size for software teams. I can’t find claims that one 10x person will outwork a highly efficient group of engineers (who have the basic minimum skills required for that field). For example, would you need a team of computer science ph.d.’s to get Digg built and off the ground?

Historically, engineer/product manager/designer salaries have been relatively constrained (red line below). This is because we lacked an efficient distribution mechanism to take advantage of their special talents, so teams had to be very large to achieve scale and no individual could easily have massive impact.

But we are experiencing the beginnings of a world where the Economics of Superstars applies for small 10x teams because a small team can use Internet distribution as leverage. What is really interesting is that retention packages now are not about the individual. They are about keeping 10x teams together. The people who are really getting great retention bonuses are the people who make 10x teams possible. They are either the leaders in a product or engineering organization that know how to build 10x organizations, or they are the employees who make everyone around them better, or they are key employees whose departure would be seen as a signal that the team is no longer a 10x team. These packages are also a defensive move to prevent competitors from acquiring the building blocks that enable 10x teams. Losing key members of a team will result in other members leaving, and will enable the competitor to aggregate a team that operates like a 10x team. It’s not about the individual; it’s about team dynamics.

Another example from Google is how well they reward great teams and keep them together. Google’s Founder Awards disproportionately reward the best teams internally for exceptional accomplishments.

It seems like we’re moving to a world where a great team of developers can make $300k+/year each. But not by just walking in the front door — it really messes with team dynamics and manager-employee dynamics to hire people with those sorts of salaries. But rewarding a team and keeping great teams together is much easier to justify.

[3] – More on Talent Acquisitions: Talent acquisitions are like record contracts

Startups eliminate the guess work that a large organization has in identifying teams with 10x ability. The startup ecosystem is as close to a meritocracy as we have — no bureaucracy, no legal department, no recruiting pipeline, minimal funding required to get started, etc. If a five-person team manages to build something and get any traction, they’ve accomplished something tremendous.

Identifying startups with 10x teams, is like a scout going through YouTube to find the next great band. If you find raw talent and give it the right platform (publicity, marketing, new instruments), you can turn that talent into something huge. Industries that have recognized their industry operates under the economics of superstars take these bets regularly – think about the English Premiere League, NBA, music industry, film industry, publishing industry, etc. If a bet pays off, you get Ronaldinho or The Beatles. Would you have given the following talented band $1 million/year and have full rights to all of the revenue they generated?

(This is The Beatles before they were The Beatles)

Again, because software is complex and you need teams to execute, the value aggregates in the team, not the individual. You rarely see Google hiring random individuals for $2.5 million over 4 years. Google, Facebook, Twitter, Groupon, etc. are paying to keep teams together and working on the things they’ve developed expertise in. These acquirers understand that it’s about finding 10x teams and giving them the resources of a bigger company. $10 million for four people over 4 years is worth it for many acquirers, because the incoming team has to be marginally better and the result will be exponential value generated for the acquiring company .

Social media, search engines and deep linking have all reduced the importance of your homepage. However, that doesn’t stop everybody from wanting their content on it.

Many home pages have become unusable because of demands from across the organisation to be featured on this page. This damages your brand, drives users away and demoralises those working on the site.

How then can you persuade stakeholders not to over burden the homepage?

Users have limited attention and that I am going to represent this fact my assigning the group 20 points of user attention.

One of the approaches I use is to run a homepage workshop.

Admittedly calling it a workshop makes it sound fancier than it is. Essentially I get all those interested in having content on the homepage in a room together and run through a fairly simple exercise.

I start by explaining that users have limited attention and that I am going to represent this fact my assigning the group 20 points of user attention.

Each element added to the homepage costs a minimum of 1 point of attention. Logo, search, navigation, news, products all cost 1 point to add to the page.

I allow them to add elements to the homepage using their points. I then show them the Yahoo and Google home pages.

I ask them which they feel is more effective and without fail people say Google. When you ask why, they will tell you that it is clearer and more obvious what to do.

I then tell them that they have just created something like Yahoo. Yahoo has spread users attention, while Google has focused all of their points on search.

They should spend more points on elements that they want users to pay more attention to.

I ask them to reassign their points. This time they should spend more points on elements that they want users to pay more attention to. For example Google has spent the vast majority of its users attention on the search box.

This is where things get interesting and you should sit back and watch. Allow those involved to discuss and debate how to best spend their points. They will quickly discover that in order to focus attention on more important things it means dropping some elements entirely.

Essentially you are forcing them into prioritising their content and teaching the importance of visual hierarchy. It also prevents you from being the piggy in the middle who receives contradicting requests about what should be most important on the homepage.

Right now, someone is tinkering with a billion dollar secret — they just don’t know it yet. “What people aren’t telling you,” Peter Thiel taught his classat Stanford, “can very often give you great insight as to where you should be directing your attention.”

Secrets people can’t or don’t want to divulge are a common thread behind Thiel’s most lucrative investments such as Facebook and LinkedIn, as well as several other breakout companies of the past decade. The kinds of truths Thiel discusses — the kinds that create billion dollar businesses in just a few years — are not held exclusively by those with deep corporate pockets. In fact, the person most likely to build the next great tech business will likely be a scrappy entrepreneur with a big dream, a sharp mind, and a valuable secret.

Where are the Secrets?

According to Thiel, there are two types of secrets: those about nature and those about people. Thiel dismisses the former as less interesting because they are less practical. “No one really cares about superstring theory. It wouldn’t really change our daily lives if it turned out to be true.”

But secrets about people have immediately practical applications. I believe secrets about human behavior, which provide insights into the way people act even though they can’t tell you why, are levers for creating user habits and competitive advantage. These kinds of secrets are also relatively cheap to uncover but can be the basis of massive enterprises.

Once, only large companies had the resources to discover monetizable secrets. Throughout the twentieth century, companies like GE, Dupont, Chrysler, and IBM specialized in discovering the optimal form of physical goods and their insights lay largely hidden in the discipline of industrial design. For these companies, uncovering secrets required massive R&D investment to find the best way to create a better, cheaper, or faster product.

But today, as software continues to eat the world, service industries are being upended by upstarts. A new crop of companies like AirBnB, DropBox, and Square exploits secrets gleaned not from industrial design, but from interaction and systems design. These companies remedy old problems by designing interfaces to create new user behaviors.

Change the Interface, Change the World

Whenever a massive change occurs in the way people interact with technology, expect to find plenty of secrets ripe for harvesting. Changes in interface suddenly make all sorts of behaviors easier. Subsequently, when the effort required to accomplish an action decreases, usage tends to explode.

A long history of technology businesses made their fortunes discovering behavioral secrets made visible because of a change in the interface. Apple and Microsoft succeeded by turning DOS terminals into graphical user interfaces accessible by mainstream consumers. Google simplified the search interface, as compared to those of ad-heavy and difficult-to-use competitors like Yahoo. Facebook and Twitter turned new behavioral insights into interfaces that simplified social interactions online. In each case, a new interface made an action easier and uncovered surprising truths about the way users behave.

More recently, Instagram and Pinterest offer examples of companies which capitalized upon behavioral insights brought about from changes in interface. Pinterest’s ability to create a rich canvas of images — utilizing what was then cutting-edge interface changes — revealed new insights about the addictive nature of an online catalog. For Instagram, the interface change was cameras integrated into smart phones. Instagram discovered that its low-tech filters made relatively poor quality photos taken on phones look great. Suddenly taking good pictures on your phone was easier and Instagram used its newly discovered insights to recruit an army of rabidly snapping users. With both Pinterest and Instagram, tiny teams generated huge value, not by cracking hard technical challenges, but by solving interaction problems.

From Discovery to Domination

Along with capitalizing on behavioral insights discovered from a change in interface, Instagram and Pinterest also shared another key attribute. They both grew to stratospheric valuations because they came to dominate their respective markets through a network effect. Defined as a system where each additional user on the network increases the value to all the other users, the network effect is a common trait among record breaking tech business of the past decade.

But where the titans of twentieth century industry could build competitive advantage in a number of ways — owning intellectual property, building a brand, deriving scale cost advantages, and the network effect, for example — most young companies today can only afford the last option. The nature of interface-driven innovation is that many of the old competitive advantages don’t work. The byproduct of the massive investment required to building cars and turbines was an increasing market dominance with each sale. Each closed deal spread the fixed costs of protecting patents, building a brand, and manufacturing equipment, thereby making it harder for new entrants to compete.

But today, consumer web startups have no such advantages. They must quickly create habitual users and build a network effect before their competitors do; it’s their only hope. Software production doesn’t offer scale cost advantages, the patent system is a mess startups can’t afford to navigate, and spending on branding prematurely is foolish. Only after a network effect business has secured its place in users’ everyday lives does it make sense to build its brand through advertising. Twitter’s recent foray into television commercials promoting its NASCAR partnership is a good example.

Though we’re living through an age when new insights about user behavior abound, the methods for building a long-term business advantage has narrowed. The kind of secrets that build big businesses today must support a plan to build a network effect business. Without a network effect strategy, secrets don’t stay valuable for long.

Saul Cullen, GoSquared employee Number 1, has been heading up customer support for the past year. In a recent internal hack hour he put together a guide to help the team be truly awesome when speaking to customers who have a support issue.

What is it that makes us loyal fans of the websites and apps we love? When we sat down to answer this question for ourselves, we found that the websites and apps we truly love have one thing in common: soul. They’re humanized. They have emotional intelligence designed into the user experience. And this emotional intelligence is crafted through thoughtful interaction design and feedback mechanisms built into the website.

These elements give the website or app personality and earn a spot in our hearts. In our opinion, it’s not going too far to say that giving your website or app soul is the key to earning loyal fans. In this article, we’ll look at some of the best examples of these emotionally intelligent interactions and how they infuse personality and soul into the websites and apps where they’re found.

(Smashing’s side note: Have you already bought your copy of our brand new Smashing Book #3? The book introduces new practical techniques and a whole new mindset for progressive Web design. Written by Elliot Jay Stocks, Paul Boag, Rachel Andrew, Lea Verou, Stephen Hay, Aral Balkan, Andy Clarke and others. Thank you for your time and your support.)

What Are Emotionally Intelligent Interactions?

An emotionally intelligent interaction is any state (or change in state) of a website/app where the messaging or functionality includes attention to details that create a user experience that feels organic and human. These interactions can be a big experience (like when an entire website is down), or a very small experience (such as when an error state on a form element appears). They can be derived from different elements, including messaging and copy, color and design, and responsiveness to user inputs and system outputs.

Combining each of these crafted experiences creates soul and personality for a website. And it’s that emotional connection with users that builds lasting loyalty, and raving fans.

EXAMPLES OF EMOTIONALLY INTELLIGENT INTERACTIONS

Note: Several of the examples and images are from this brilliant website: Little Big Details. It’s one of the many must-reads and I recommend adding it to your favorites if you haven’t done so already.

BottlenoseA new Web-based Twitter client that gives users a new way to explore and use Twitter. The app does a great job of walking users through the first run with the application, explaining the features in a way that is clear and humorous. The confirmation buttons use phrases like “Makes sense” and “Got it” which create a sense of personality and confidence with the user, a far better choice than the typical “Next.”

WufooWufoo uses a combination of smart messaging and subtle touches on UI elements to create a more friendly and personable experience when creating Web forms. Here are just a few:

Each page title is accompanied by a line of poetry. While it may seem random, the poetry actually reinforces the elegance of the Wufoo solution. It’s a unique way to bring personality to an otherwise tedious task (creating forms).

The new report button’s punctuation. Think of the word “report”, and you’re next thought is most likely “TPS.” But Wufoo adds an exclamation point to the button. This gives it an element of energy and fun, reinforcing its value as a reporting feature.

The reports screen with no reports. Instead of a blank screen, Wufoo takes the opportunity to deliver some true personality through its messaging, and gets you on your way towards building your first report.

MailChimpAs one of the best examples of emotional intelligence baked into a user experience, MailChimp takes every opportunity to infuse soul into its application, as well as giving you a pitch-perfect way to make it all disappear.

404 Page:MailChimp’s 404 page is brilliant: excellent copy, empathetic design, and a prominent call to action to get users on their way. It’s clever, functional, and takes the sting out of 404’ing. Current MailChimp 404 Page.

Send Campaign:MailChimp celebrates and encourages the user just as they send out an email campaign. The copy “This is your moment of glory” is a perfect encapsulation of the fear and anticipation that goes into deploying this.

Twitter Page:Recently when MailChimp went down, they deployed a special background on their Twitter page that showed a sad chimp working furiously to fix the problem. Because people naturally turn to Twitter to learn about why things are broken, the background extended the personality of that service to their Twitter account, creating an emotionally intelligent experience for the user.

PinterestThis red-hot social network infuses personality into its website with a thoughtful interaction during account creation. Instead of using the typical password confirmation patterns, the app responds with “Looks good!” as passwords meet their requirements and match. It’s a small touch, but one that humanizes the sign-up experience, and empathizes with the user who is creating their account.

PathOn Path’s original website, the icon for the sign-up button arrow changed to a smiley face when it was clicked on. This small change created a personal and welcoming moment during one of the first interactions a user had with the application. It’s a thoughtful detail added to a step that is often overlooked by designers and users alike, and it set the tone for the rest of the user’s onboarding experience.

HootsuiteThe friendly owl mascot for Hootsuite is more than a cute face—the mascot is the representation of the service itself, much like the chimp from MailChimp. Hootsuite taps the Twitter API to pull data into its app, and because Twitter has API limits, Hootsuite intelligently stops making requests after long periods of user inactivity. When this occurs, the Owl lets you know that he has taken a nap, and will wake up when you need him again. It’s a clever way to turn a potential negative experience (non-continuous updates) into a positive one that brands the company, while providing the app with personality and soul.

FeedburnerFor newly created RSS feeds in Feedburner, the stats page takes the lack of stats to create a personal interaction with the user. Many websites miss these opportunities because they feel this state isn’t core to the experience. But Feedburner knows that most new users are interested in seeing their stats right off the bat—stats that don’t exist yet. So when a user visits the page Feedburner has fun letting them know that stats aren’t quite ready yet, while creating an emotional connection with the user in this process. It’s a huge win for the company in light of the alternative: a lifeless, blank page with no data.

VisualHubVisualHub takes advantage of the Mac installation screen for user interaction, encouraging users to get acquainted with their user manual. Move the app to the Applications folder, and move the manual to your brain. So often this install process is written, a necessary evil to get to the application. But as we’ve seen, smart developers leverage these initial interactions to set the tone with the user experience moving things forward.

OS XApple has long been about attention to details, but typically the details are in refinement (not necessarily emotional intelligence). But the Text Edit icon contains a small Easter Egg for Apple fans—the words of the “Think Different” manifesto are inscribed on the notepad. It pays homage to their legendary founder, and reminds people why they love Apple. It’s a small touch that makes Apple what it is.

Highrise iOSDuring the install of 37Signals Highrise iOS app, you can play a game of Tic Tac Toe against the computer. Not only is this a thoughtful way to give users something to do while the app undergoes the necessary evil of being installed, but it’s also an homage to the film War Games, a hacker classic. It’s a simple and effective way to display emotional intelligence during a typically “dead” point of an app’s user experience.

Mint.comMint’s website maintenance page creates a charming experience for users during what could be a stressful time. Not being able to access your finances can create anxiety, and Mint uses that opportunity to create a fun yet effective notice that lets you know that your money and information is safe, even if the website isn’t accessible.

Deviant ArtDeviant Art uses the portrait metaphor as part of the interaction in setting up your Deviant Art profile. Not only does it tie in with the theme of the website (and connect with its artist community), but it also is a compelling metaphor and mechanic that encourages new users to complete their profile.

TumblrWhen listening to an audio file on Tumblr, the URL is appended with an appeal to its usersnot to download the audio file, so that they can continue to offer this type of content on their website. It’s a clever way for communicating to its users without the typical JavaScript pop-up warning.

Adding Soul To Your Website

Giving your website soul comes down to the interactions and the intentional craft you put into the design of those interactions. By being intentional about user experience in those small moments that are typically neglected, you can showcase the personality of your app, as well as building loyalty among users. Taking cues from websites and applications like those mentioned above will help you look for ways to infuse your project with emotional intelligence.

These services and developers have created loyal user bases due to their willingness to sweat out the details, and infuse their projects with emotional intelligence. The small things can really make a difference in the success of your website or application. Taking the time to create these well-crafted experiences is one of the most potent ways we know of to create fans, and bring your website to life with soul.

What is the web actually for? Man as a tool maker has the ability to amplify our inherent ability. The computer amplifies memory, problem-solving, calculation, projection, analysis

The Internet amplifies knowledge. The true potential of the Internet was revealed only when it became ubiquitously available.

A smartphone is not a smartphone, it’s a device to simplify curiosity. It’s always connected to an open platform accessible by anyone with a browser

“Hold on, Let me look that up. I just happen to have to sum of human knowledge in my pocket.” “The magic is in the palm of my hands”

The internet is what brings these devices to life. Without connectivity, these devices could only perform a limited number of tasks.

Technological revolutions require a level of plumbing. The web requires cables and connections, and so invention, implementation and market adoption influence what’s possible. It takes a long time to evolve the necessary plumbing to drive innovation.

in the future, everything will be connected.

Google’s Project Glass and other speech-and-voice interfaces show us how not every connected device will rely on a screen.

Old “thing” + connectivity + software + UI = New smart “thing”

It now costs next to nothing to make something smart or connected. Emerging chips don’t require a traditional power supply, meaning they can be embedded in anything.

“just in time” will replace “just in case”

Right now, we have to go to the web , but in the future the web will come to us. In the future, things will tell us information rather than us having to seek out information about the thing.

“We don’t want the app. We want what the app does. We could care less if we have the app, we just want the functionality.”

In the future, our devices load applications opportunistically that are accessed seamlessly.

No new technology fully replaces the old, it simply augments it.

The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable

content will need to flow like water.

Responsive design is just the beginning. It’s not just about flexible layouts, it’s about flexible content

The browser and web platform. It’s easy to forget how much infrastructure we’ve built into the web and browser. Things like forms serve an important purpose.

Things we add are often a response to change. Interface conventions change as technology becomes available. “We have a robust browser now, how do we navigate it?” Reader apps are a response to clutter

Proxy web browsers are giant polyfills. They add a lot of value as they bridge the gap between the capable and incapable.

Tools that bridge the gap to respond to change: “Reader” apps, UA switching on mobile browsers

The rise of more baked-in features, like HTML5 forms. They’re intelligent, responsive, platform-appropriate yet adaptable components. What if we applied this to other components?

Everything you add to the page is something you’re taking away from the latency profile of the page. Everything you add should have real value.

‘Back to Top’ links are useful and easy to implement for long mobile pages. Why aren’t they baked this into all browsers?

Social media widgets are currently implemented client-side. These should eventually be offloaded to the platform. They should be considered plumbing. Mobile is the needle, social is the thread. -Pew

There are only so many ways to re-arrange complex navigation. Some sites are just complex, period. What about a native trigger that fires up a default browser “menu” component, similar to datepicker, or select menu, etc.

Media formats aren’t adaptive enough. We keep forgetting about user choice. They are the best ones to determine what quality of media they want.

Look to Quicktime wired media (used connection speed and screen size) as a reference. Drop in a self-contained package that allows you to not have to worry about the logic

Cultural change more dramatic, but we tend to focus on the technologies themselves.

I’ve now had the opportunity to hear Stephanie present on multiple occasions, and every time I am completely blown away. This time, I was honored to make it into Stephanie’s slides in the form of a tweeting smart toaster. I’m very happy about that!

By Brad Frost on April 27, 2012

1. Hiding content

Because responsive sites share a single code base, they have a better chance of achievingcontent parity, which is great. However, that doesn’t mean that it’s all gumdrops and butterflies. There are still many responsive sites that hide or remove content for smaller screens in order to deal with screen real estate constraints.

Follow this simple guide: don’t penalise users for the device they happen to be browsing with. People are coming to our sites and services with expectations, and it’s our job to make sure they’re able to achieve their goals. Mobile users will do everything desktop users will do, but it must be presented in a usable way. So do all that you can to make sure as many people as possible can access your content and functionality.

It’s also worth noting that content that gets hidden with CSS still gets downloaded, which is terrible for performance and brings us to our next pitfall to avoid…

2. Bloating it up!

OK, so you’re not gutting content for small screens and you’ve made an effort to deliver a full experience regardless of context. All’s well with the world, right? Well no, because now you have a bunch of stuff to load and that takes time. 74% of mobile users will leave after 5 seconds (PDF) of waiting for a page to load, and the unfortunate reality is that only 3% of small screen versions of responsive sites are significantly lighter than their large screen counterparts. That means users bear the burden of a potentially massive download.

A normal page on Barack Obama’s responsive site weighs over 4MB. Four. Megabytes. This is unacceptable by any standard, but especially falls apart when you consider users who may be on EDGE, 3G or poor WiFi connection.

For a site whose goal it is to reach out to the general population (all with different mobile races, mobile creeds, mobile colours and mobile religions), this causes serious accessibility issues:

Sure, part of this is RIM’s doing, but these are real constraints that we need to be aware of

One of the biggest challenges of creating responsive web designs is the balancing act of delivering a full experience while still maintaining a snappy user experience across the board.Cut away the cruft, follow performance best practices, don’t assume a strong connection by default, and look for ways to exploit great techniques like conditional loading to keep initial page sizes down.

3. Ignoring contextual conventions

A phone is not a tablet is not a laptop is not a desktop is not a TV.

Each device provides its own unique form factor, interface conventions, constraints and opportunities. We need to be considerate of all these variables in order to create experiences that feel natural to the user. Now I’m not recommending recreating every platform’s native UI in the browser, but we do need to be mindful of how people hold their devices, what icons they’re used to seeing, and so on and so forth. A good responsive experience reaches outside of the sandbox that is the browser and is sympathetic to the user and the device context.

Responsive web design by definition is not mobile design, so it’s up to us to introduce contextually-considerate elements to our designs. That means handling responsive navigation in a way that makes sense to visitors across contexts. That means designing for touch. That means avoiding forcing mobile users to sift through ridiculously long amounts of disparate content just to find what they’re looking for.

Let’s account for the many differences across these devices, understand that some compromise is inevitable, but put forth a solid effort to be more considerate of context.

4. Serving a one-size-fits-all experience

Mobile is much more than just various small screens, and these emerging contexts unlock entirely new use cases, patterns and possibilities. We shouldn’t sell ourselves short by only creating responsive layouts. For example, we sometimes forget that mobile phones can get user location, initiate phone calls, and much more. Hopefully soon browsers on all these gadgets will have access to even more device APIs, further pushing the boundaries of what’s possible on the web.

5. Relying on device dimensions

The fact of the matter is that we don’t control what our visitors’ browser sizes are, nor what dimensions manufacturers decide to make their devices. Believe me, they’re trying every size in the book.

Why you should never rely on device dimensions

In addition, page height has always been even more of a moving target because of bookmarks bar, browser chrome and the Ask Jeeves toolbar. But now in the mobile web world, a web experience is often not seen through the lens of the browser at all. We visit links through Facebook, Twitter and other apps, each of which has its own custom chrome for containing web views. Of course hierarchy of content still matters and you want to get to the guts of the page as soon as possible, but you can’t get all worked up over the available pixel height, learn to let go.

In his article Fanfare for the Common Breakpoint, Jeremy Keith eloquently states that “it’s not about what happens at the breakpoints, it’s about what happens between the breakpoints.” That means our designs should hold together irrespective of any particular dimension.

Let the design itself sort out where breakpoints should occur. I absolutely love this advicefrom Stephen Hay:

“Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint!“

By letting the content itself determine the breakpoints of our responsive designs, we’re preparing our designs to look great in not just today’s landscape, but tomorrow’s as well.

Do the evolution

We’re at the tip of the iceberg as far as creating adaptive experiences go. While these pitfalls (and many more not covered in this article) exist, they are no reason to shy away from creating adaptive experiences. With more connected devices of all shapes and sizes come onto the scene every day, we as web creators have an opportunity to be there when they arrive. While it’s admittedly a bit daunting, we should accept the challenge and embrace the opportunity to reach people wherever they may be.

We’ve seen endless articles about how to market to Millennials. But how about the younger cohort right behind them, Gen C, the “connected generation”? This is the group (those born after 1998) that won’t be able to comprehend life before the Internet and won’t even remember life before the smartphone or tablet. Email will be for “old people,” and touch screens will be the norm.

This generation will push even farther the principles we are just starting to master to connect with Millennials. This group turns 18 in just 4 years. Will you be ready to reach them? Some things to consider:

Forget Facebook. Well maybe not completely, time will tell. But one thing’s for sure: To reach this audience, you’ll need to go beyond the “social staples”. The social landscape is fracturing (again), and now that Mom is there “friending” them, teens will look to other platforms to connect. Tumbler. Pinterest. Path. These may or may not be the right ones for your target; the key is to do your homework to find where they are most active — and continue to monitor because it will change and evolve.

Prepare for the 4th and 5th screens. Thanks to evolving telematics, the 4th screen will be in the car. Already, manufacturers like Audi and Ford are far along in developing in-car platforms that will deliver personalized information to enhance the ride for both the passenger and the driver. Wondering what retail stores may suit your taste on the street you are driving down? Want to find the best pizza in the vicinity? Need to know the fastest rush-hour route to your destination based on current traffic patterns? In the not-too-distant future, it may be your car making recommendations. It will be incumbent on brands to figure out how they can add value to the in-car experience without jeopardizing the safety (or sanity) of the driver.

The 5th screen will be in retail. Many retailers are already experimenting with interactive screens in-store to deliver personalized recommendations, “virtual try-on” options, or an “endless aisle.” The “5th screen” space will not likely be limited to just touch screen kiosks, but will need to include augmented reality to show off inventory that may not physically be in the store, recommend products that may best fit personal style and body type, or provide basic way-finding through a store.

Think 360°. Forget marketing matching luggage. Or specialty silos. We’ll be challenged to design campaigns that work across multiple platforms in a way that truly leverages the strengths of each channel. Those who master “multiplex marketing” that encourages iPad/tablet use while watching TV (or other streaming video), feeds off social interaction, and contains mobile elements that users can activate via screens outdoors or in retail will be the ones who capture the ADD attention of Gen C. In addition, Gen C uses technology as a tool to explore its desires, wants, and needs, so as marketers we need to be there and not just with a traditional search strategy. A move to a 360° perspective also means a move away from the traditional “pulse” campaign approach to the philosophy of being “always-on”.

Keep in mind this is a generation with an expectation of immediate interactivity; flat TV ads will be lost on them. Use all the marketing channels and hooks at your disposal — multiple screens, mobile, social, location-based — to capture and allow Gen C to participate as well as share. Which leads to the next point …

Put their creativity to work for you. Gen C’ers are often adept at making and editing their own video before they are even out of middle school. By the time they become adults, Forrester’s famous Social Technographics Ladder will be turned on its head. Gen C thrives on creative expression and the feedback it generates. No topic or concept is too personal for Gen C to explore. Figure out how to harness this creative energy in a way that values and respects this young talent. Create the right parameters, then put them in the driver’s seat. The opportunity will drive greater interest and participation than traditional “lean back” marketing.

Hyper-personalize it. Personalization doesn’t mean sticking a name in the first line of an email that Gen C will never read. The generation that expects immediate interactivity will also demand the ultimate personalization. Jaded by marketing, they will need to be convinced of why what you are selling is relevant to their particular areas of interest. To succeed, you’ll need to figure out how to allow Gen C’ers to customize product offerings or bundles to suit their needs.

These are just a few ways marketers will need to rethink reaching the next generation. Most importantly, we’ll need to break our own silos between traditional and digital, social and mobile, CRM and mass to effectively reach this target.