One of the smaller details that stood out for me, was the photo loading. Pinterest lazy load photos – i.e. they only bring them back when the user needs to see them in their viewport, based on how far down the page you are. It’s a common technique designed to take the pressure off bandwidth, and provide a better speed for users from the application. This is nothing new, and they’ve been doing it since way their inception.

What is new – are the placeholders behind the photos.

Each and every photo has a different coloured placeholder designed in such a way to match the dominant focus colour contained within the photo. You can see it from the screengrab below:

What is particularly interesting, is that the effort required to pull of something like this. What seems like a relatively small user experience benefit, requires a relatively large amount of engineering input.

For the more technical amongst you, Pinterest are having to determine the majority of colours contained in all the pixels of an image, (a technical challenge I was faced with recently for a personal project) and save that in their database with each and every pin of a photo, and for what?

Just to show a placeholder in the listings that is closest to the colours of the image which is about to be loaded into its place. This results in a slightly better experience for the end user, as the eye doesn’t have to adjust as much to the contrasts and colours contained within the final image loaded in. But it’s soo minor a change, many of you will not have noticed it, nor appreciated the engineering that had to be enlisted to make it happen.

I can only imagine the conversation coming from the design team asking the programmers to store a single majority colour for each of the images in their database. They’ve had to do it historically as well, so if they weren’t already storing this information (which seems likely) – then a process of running it over the millions of images contained in their network, likely took days if not weeks to run.

That’s what separates a good products from a great products, when the attention to detail on the smallest of details doesn’t go unchecked, and is a fine example of how great web companies are design lead.

Pinterest’s amazing attention to detail and why design should lead code. is a post from: Webdistortion

Allow me to digress slightly, to two real life examples of smart marketing that I’ve experienced from the high street – which can also be applied to the web. Yes, there’s actually things that can still be learned from the traditional bricks and mortar store.

Dating sites need not apply.

The $1,000 pizza.

There is a pizza place in New York that offers a pizza on its menu that you need to pre-order by a week. It costs $1,000 and contains ingredients soo exquisite and expensive they need to order them in – a week in advance. How many of these pizza’s do you think they’ve sold? It’s obvious though why this super pizza remains front and centre on the menu. A food critic would be hard pressed not to mention its inclusion on any review they write, it generates instant buzz around the restaurant, is unusual, extraordinary, and allows them to stand out from the competition as the luxury pizza place.

The £1 guitar sale.

In my home town, there is a music store, so small, that you wonder how it even manages to survive in its rural surroundings. Every year, they have an infamous Christmas sale, where the first person through the door can buy a £500 electric guitar for a single £1. Unsurprisingly, people grab their sleeping bag, flask of hot soup, and sleep out nights before in advance of this offer. The street is often lined with score of young musicians camping out. Again, word of mouth manages to attract attention with the people on the street being joined the morning of the sale with other curious shoppers. Attention attracts attention, and there’s a viral effect that helps the sale of the other products in the shop – including the ones with not so extreme discounts.

At its heart, both of these are PR spin, but the twist is that they generate PR subtly through their products by either being extravagant, or incredible value for money.

Some sites on the web have picked niches that are interesting to start with, and source products that are unusual, difficult to find (anywhere on the web or high street) and generate links and social shares naturally. Firebox, iWoot and ThinkGeek (see typical examples that Tech publications cream themselves over) come to mind as ‘quirky geek gift emporiums’ that have become popular organically due to their stock, and the products they source. These ‘link bait products‘ take many forms, but are fantastic at generating link equity directly into your product catalogue from around the web and improving SEO overall.

Of course, this concept doesn’t have to be applied to just e-commerce sites. eBay have had their fair share of link bait generated because they don’t have upper limits on price, or restrictions on the type of goods that can be listed. Anyone remember this Aircraft carrier listed years ago? Or what about this Jet-powered Go-Kart?

You too can take advantage of this trend, even if you are traditionally conservative in the content you list. Many of the sites which are listing the weird and wonderful have neither the actual product in stock, nor price it realistically.

Shoe Retailer online? Try listing something like this under an ‘unusual’ category. Car sales online? What about this? Classifieds? Yep, Gumtree have linkbait ready to roll. Jobs website? Yes there are interesting jobs out there outside the norm. Ultimately there is no telling in some cases when content has been planted, or when it has been user generated. Much like the pizza place I mentioned earlier, many of the clever sites out there are generating social traction by faking content, designed to attract attention and links from around the web.

Buzzworthy content that generates links – the $1000 pizza and £1 guitar. is a post from: Webdistortion

So.cl – the underground social network from Microsoft that came out from cover last week has only been around for a short time, and its not yet clear as to whether it will make any dent in the competition. In any case, its offering seems more of a Pinterest / Delicious hybrid than a serious social network of people connections.  However, whilst everyone thinks that it is going to be some kind of competitor to the likes of Facebook or Google+ –  I’m not convinced.

In fact, Microsoft have already got the beginnings of a true social network already, one that everyone has forgotten about – Skype. Let’s start with the facts, and the metric on the tip of evey analysts’ lips.

Users.

Skype has over 600 million users.  Google+ in comparison has a total of 500 million users putting Skype in a pretty powerful positions. A pivot into a social network by bringing Skype technology to a website rather than a desktop client is not only feasible, but would accelerate that growth further. Lower barrier to entry on signup, combined with addition features that only the web as a platform can provide.

Skype has all the components of a social network already there.  A social graph of connections between users, with many people using Skype to contact friends and family and business associates.  We’ve all experienced the enthusiasm around Google+ Hangouts, and Skype has the ability to shift into a network online that combines something similar with its pre-existing voice communication technology.  You can set a status ‘mood’ message, you can text message, use it as a group chat system, you can share files, photos and your computer screen.

One of the more interesting developments with Skype recently that the press haven’t yet picked up on, is the merging of Live accounts with Skype accounts for users not already on that pathway. For the recent version which is available on Windows 8, Skype force users to adjust their user account to sign in with a Live ID. That is, the same username and password that many people access their Hotmail account or Xbox account through.

It makes total sense to take those 600 million + users down that particular track, as doing so opens up FURTHER social connections which already exist inside the various people who you are emailing frequently. i.e. your Hotmail contacts. Indeed I was quickly informed of other users who had Skype accounts currently, and whom I could add to Skype. If that doesn’t look like smart user onboarding, I don’t know what does. Currently. inside the Windows 8 app store, Skype remains one of the most popular free downloads, and Microsoft have the control and influence to leave it there. Is this controlled algorithmically? Maybe. Maybe not.

Perhaps its too early to tell, but it wouldn’t surprise me at all to find that Microsoft are planning a much longer game for social. One that combines built in Windows 8 features, with Skype, Xbox and Windows Live all playing a fundamental role, especially if you consider the sheer volume of users that they have at their disposal already.

Forget Socl, Skype could be Microsoft’s secret social network. is a post from: Webdistortion

As an open source project Bootstrap continues to evolve, with 2.2.1 the latest version released recently, it has significant grounding in the development community, and is described by some as rapidly becoming the ‘jQuery of HTML frameworks’. Within a few months of its launch, the project grew to be the most popular project on the world’s largest social coding service, Github, and for good reason – it is a formidable framework for rapid development.

This collection of resources around the project showcase the best of what the web has to offer Bootstrap fans.

Design and Theming.

URL: http://bootswatch.com/

One of the main critisms when using a framework with pre-designed buttons and widgets – is that your end product can begin to look samey. Bootswatch is a free theme marketplace that aims to prevent that, with a number of bespoke Bootstrap implementations available to download for free. Its still the core Bootstrap product – just with a different skin applied. For designers who need inspiration on what level of customisation is available, Bootswatch is a pretty good place to start.

URL: https://wrapbootstrap.com/

Following in a similar vein – WrapBootstrap is a commercial theme marketplace, where you can both buy and sell your Bootstrap theme. It’s a great example of the niche communities burgeoning on the web around the product, and offers the ability to see how many other people have also purchased the same theme.

URL: http://bootswatchr.com/

Fancy a more DIY approach to customisation? Bootswatchr provides a visual interface for you to use to customise Bootstrap themes from the ground up. Think of it like a theme-roller (ala jQuery UI) – that lets you see interactively the elements being customised in front of your eyes. Tres handy.

URL: http://stylebootstrap.info/

Also offers a customisation tool set, with the advantage that individual URLs created can be shared with others, showcasing your theme.

URL: http://jetstrap.com/

JetStrap offers an extremely clean easy way to build Boostrap interfaces, and generate working Bootstrap code out the other side. It’s somewhere between a Mockup and Interface building tool, that takes the manual coding away, and makes it a snap to drag and drop Bootstrap components onto your page and generate a working HTML interface.  If you are in the early stages of product development, and are convinced that Bootstrap is the perfect framework for you going forward, then you’ll love how quickly JetStrap gets you moving.

URL: http://paintstrap.com/

PaintStrap offers and alternative approach to theming Bootstrap. If you are an avid ColourLovers or Adobe Kuler user, then you can simply input the theme directly into PaintStrap, and it wacks out a Bootstrap theme with those beautifully handpicked colours. Very simple, but very effective way to make the site look the part.

URL: http://jumpstartui.com/

Often the case with theme frameworks is that they focus on what is needed from a FrontEnd design perspective. Jump Start have taken the Bootstrap theme, and applied it to Admin interfaces, offering premium Bootstrap implementations designed to make your Backend systems really shine.

URL: http://www.boottheme.com/

BootTheme is yet another Theme generator tool, however Boottheme offers an instant preview approach, letting you see the effects of your changes in real time. You can also see how your changes will perform directly on multiple devices in a responsive way, which makes it useful in initial design decision making.

URL: http://ajkochanowicz.github.com/Kickstrap/

Kickstrap is a community driven project adding improvements to the Bootstrap frontend UI framework. Bootstrap has been adopted with wide spread arms by most developers on the web. While full of features, some thought it could do better, and while their suggestions and feature requests might have not made it to the Bootstrap core distribution, they have been found a home in Kickstrap.

Fonts and Typography

With fonts making such a fundamental difference to the standard BootStrap implementation, there’s no excuse not to customise them. This great article take you through the steps to achieving that with a custom icon library. In this particular instance, they’ve used the popular FamFam icon set; however you could feasibly use something else.

URL: http://fortawesome.github.com/Font-Awesome/

Font Awesome is an icon project designed to add some level of differentiation to Bootstrap. With integration into Bootstrap a sinch, Font Awesome also provides a custom CSS stylesheet for your project, so its a combo of both code, and icon snazziness.

 URL: http://pfefferle.github.com/openwebicons/

Like your icons more, well minimal? OpenWeb Icons started using Font Awesome as the inspiration, but morphed into a collection of other fantastic icons, particularly brilliant for more grayscale themes.

URL: http://fontello.com/

This tool lets you combine iconic webfonts for your own project. With fontello you can access large sets of professional-grade open source icons for use inside BootStrap.

Code Snippets.

URL: http://bootsnipp.com/

BootSnippr provides free HTML snippets for use with BootStrap. With everything from Signup Forms to User Profiles, you can literally copy and paste together a working prototype with minimal coding, letting you get on with the server side stuff.

URL: http://www.joostrap.com/

Joomla fans will be delighted to find that BootStrap themes, components and code snippets for Joomla are available at JooStrap. A must bookmark for Joomla developers.

URL: https://github.com/320press/wordpress-bootstrap

WordPress BootStrap is – yes you’ve guessed it, a WordPress BootStrap ready theme.

Design Templates

If you want to go all out and customise everything around BootStrap, then it may be worth getting your designer take a look through some of these. With Adobe PSD templates, PNG scalability with Fireworks to wireframing assistance, these links should help with the more granular aspect of Bootstrap customisation.

URL: http://www.extendingfireworks.com/?p=133

This fantastic Adobe Fireworks file provides a base UI Toolkit for Twitter Bootstrap with the entire UI recreated as vector images for Adobe Fireworks.

URL: http://gui.repixdesign.com/

Photoshop fans, worry not – there are plenty of PSD’s out there for the customisation of Bootstrap. This one from RepixDesign, is particular well put together and being Vector based makes it easily scalable.

URL: http://viget.com/inspire/an-omnigraffle-stencil-for-twitter-bootstrap-2

OmniGraffle if you aren’t already familiar, is a brilliant mockup and wireframing tool. This stencil now provides much need Bootstrap UI and navigational elements to your templates.

URL: http://www.arvendo-media.com/projects#c-twitter-bootstrap-design-template

If you are more of an illustrator kid, then this EPS should provide a decent start to creating Bootstrap ready designs.

UI Components

URL: http://exacttarget.github.com/fuelux/

Fuel UX adds some additional tidy Javascript components to Bootstrap, including a Combobox, Datagrid, Pillbox, Search and Spinner. Definitely worth a look at including for an extra level of polish.

Buttons

URL: http://charliepark.org/bootstrap_buttons/

Provides a Button ‘Customiser’ similar to that found in some of the custom Bootstrap themers mentioned earlier

URL: https://github.com/nostalgiaz/bootstrap-toggle-buttons

Bootstrap Toggle Buttons, for sexier iPhone esq switches.

WYSIWG Editors for Bootstrap

URL: http://wrapbootstrap.com/preview/WB0DFT966 

BootStrap Live Editor

URL: https://github.com/samwillis/pagedown-bootstrap

PageDown Fork developed to fit with Bootstrap principles.

URL: http://vitalets.github.com/bootstrap-editable/

If in page editing is more your thing, ‘Bootstrap Editable’ is a fantastic component for your CMS.

Notifications / Popups

URL: http://nijikokun.github.com/bootstrap-notify/

Although Bootstrap has its own notification engine, the code for creating them isn’t just as simple as adding a CSS class. This is what BootStrap notify brings to the party.

URL: http://bootboxjs.com/

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers

URL: https://github.com/Gild/bootstrap-tour

Thinking of giving product tours within your application for new users? Bootstrap Tour is an easy to configure site tour wizard which walks and guides your user around your interface, teaching them the tricker parts of your interface.

URL: http://jbutz.github.com/bootstrap-lightbox/

Almost all applications require a lightbox implementation of some sort. Whether it be a modal dialog for logging in without leaving the same page, or for showcasing large images.

SelectBox / Combobox / Pickers

URL: http://ivaynberg.github.com/select2/index.html

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent Chosen library.

URL: https://github.com/dangrossman/bootstrap-daterangepicker

Probably the coolest Date Range Picker you’ll find on the web, and better again its Bootstrap ready.

URL: http://jdewit.github.com/bootstrap-timepicker/

If your application has time sensitive input, then BootStrap Timepicker is a neat little UI enhancement that helps to ensure more accurate client side user input.

URL: https://github.com/danielfarrell/bootstrap-combobox

Bootstrap Combobox enhances the standard combo, by allowing users to type their input at the keyboard, and it auto selects the relevant entry. Subtle, but effective.

URL: http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-bootstrap.htm

A colourpicker and datepicker for BootStrap. The colourpicker is particularly nice.

Other Goodies

URL: http://bootstrap-arrows.iarfhlaith.com/

Need arrows in your UI?  This simple jQuery plugin provides Bootstrap with an easy way to include predesigned arrows at any angle within your designs, all through the use of particular CSS classes.

URL: http://botmonster.com/jquery-bootpag/

BootPag is dynamic pagination jQuery plugin for twitter bootstrap.

URL: http://blueimp.github.com/Bootstrap-Image-Gallery/

Bootstrap Image Gallery is an extension to the Modal dialog of Twitter’s Bootstrap toolkit, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.

URL: http://aozora.github.com/bootmetro/

Inspired by the latest incarnation of Windows Metro apps, Bootmetro provides the look and feel of Metro ontop of the core Bootstrap offering. Although, there are clearly some kinks still to be ironed out (from a responsive POV) it is still a worthy resource for those of you looking for something different style wise.

URL: http://bootstrap-forms.heroku.com/

Drag and Drop form builder for BootStrap, that outputs the HTML you need to bring it to life. Handy.

URL: https://github.com/davidber/twitter-bootstrap-sample-page-layouts 

Some additional page layouts not already included in the BootStrap framework. Samples can be viewed quickly here. 

40 Useful Resources for Twitter BootStrap Fans. is a post from: Webdistortion

For those of you unaware what the hell you are actually looking at – this is a topless man, dancing in the hurricane force winds with a wearing a fake horses head mask . He pranced happily in the storm in front of Weather cameras, who frankly – couldn’t do anything but laugh and shoot footage of this apparent act of indignance against the storm.

Then the Internet exploded.

Front page of Reddit.

Washington Post.

Numerous other outlets all grabbed a hold of the story, and it ran and ran and ran. Twitter went ape. Thousands of blog posts and articles were written in the small space of time that something so simple happened. Some (including this one) are still being written.

For any of you involved in content marketing, there are a couple of take home points that we can draw from this, from a viral marketing point of view. Why did this take off like it did around the web?

1) Offer Wreckless Abandon

This guy did not care what the world thought, and went and did it anyway. He caused a stir when the world was watching, and waiting for the worst, because  everything was doom and gloom – and he brought humour to the party.

Your content should do the same. Break a few taboos, go against the grain, address things that have never been addressed. Speak the unspeakable, Seek the unseekable. If you can, throw some humour into the mix as well, as this is a great way to make people care about your content. 

2) Stick it to the man

Every media outlet was telling people to batten down the hatches, and get yourself safe. This guy was an anti-establishment hero, who ignored that in pursuit of fun. Everyone loves the joker in the classroom who bends the rules in the name of fun every now and then.

Content that goes against the conservative view, doesn’t state the obvious and offers an alternative viewpoint to societies status quo always does well. Question everything, as people appreciate when others challenge traditional schools of thought.

3) Use the Odd and Random factor

If you seen this live on the T.V. when it was released, you know that you’ll never see anything like it again. Ever. It was so random and odd and crazy, the people could hardly believe what they were seeing. That fact alone makes people instinctively want to share it with others. ‘Hey, did you see that crazy guy on the Weather Channel defying the storm WEARING A HORSES HEAD MASK?’ makes for a great story

All great marketers are great story tellers, but to make your content stand out, you have to be prepared to do stuff that seems a bit mad. Research things that seem unresearchable, write content that has never been written. Be as unique as humanly possible in your content creation. When people find a gem, they want to share it with other people, because they know there’s a pretty good chance they’ll either not have seen it, or will appreciate something original being offered to them.

We live in a world of content knockoffs with duplicate articles circling the web. Do something original with your content, and see the results.

The Hurricane Sandy, Horsehead Man Approach to Content Virality. is a post from: Webdistortion

Clearly someone at Google are using their heads. No sooner than Windows 8 is out the door, there is a dedicated marketing campaign to putting Google back front and centre as the default search provider in Windows. The Landing Page domain takes visitors to a quirky video (with the ever so appropriate Jackson 5 hit music ‘I want you back‘ as the background theme).

The dedicated Windows app that this domain links you to has a number of features for the Windows 8 platform, namely:

• Google Search box – Type your search right from the app home screen, so you can find the answers you need more quickly.
• Voice Search – Use your microphone to ask Google anything and see the answer instantly.
• Search Charm – By installing the Google Search app, you can easily access Google from the Search Charm.
• Instant previews mode – Browse search results without having to visit each page.
• View Your Searches – Swipe from the top to see the sites you visited most recently, categorised by keyword.
• Google Apps page – Access all your favourite Google products from within the app with just the tap of an icon.
• Google Instant – No need to press Enter – see results instantly as you type.

Google rattled by Windows 8 release, launches ‘Get Your Google back’ campaign. is a post from: Webdistortion

Float like a butterfly, sting like a bee. His hands can’t hit what his eyes can’t see

As the fight progressed, Ali’s quick jabs to his opponents face, became increasingly disorientating, and as the rounds progressed, his ability to land punches that mattered lessened being absorbed by Ali (and more importantly the ropes) with minimal damage.

Although Foreman had strength on his side, Ali had speed, and was able to deliver both a higher volume of punches, as well as choosing where and when to place them.  As many of you will already be aware, Ali won by knockout in the 8th round, taking the heavyweight championship having tired his opponent sufficiently.

In a technology race, it is the agile teams, who can release faster, and get to market quicker that win out over those that take months to get their latest iteration in front of their audience. One of the masters of continuous iteration and constant change are larger tech companies such as Facebook.

In their IPO filing Mark Zuckerberg spelt out some of the internal culture and product ethos at Facebook, affectionately dubbed ‘The Hacker Way.’

The Hacker Way is an approach to building that involves continuous improvement and iteration. Hackers believe that something can always be better, and that nothing is ever complete. They just have to go fix it — often in the face of people who say it’s impossible or are content with the status quo. 

Hackers try to build the best services over the long term by quickly releasing and learning from smaller iterations rather than trying to get everything right all at once. To support this, we have built a testing framework that at any given time can try out thousands of versions of Facebook. We have the words “Done is better than perfect” painted on our walls to remind ourselves to always keep shipping.

That isn’t just a clever marketing line from Zuckerberg designed to make stock brokers excited. Facebook currently push new code live every single day, to millions of users, and yet maintain the level of stability that they do.  The below technical talk from Facebook goes into some of the technical and cultural things in place at Facebook to make that happen and is a great watch for any engineer curious as to how deployment works in larger organisations.

Using data and feedback directly from live traffic on features that may or may not be appreciated by users lets you see whether you are heading in the right direction quickly. A/B testing isn’t just a tool for increasing your conversion rate – in many cases it provides valuable feedback on product direction and interestingly Facebook do this at scale.

One of the more awesome features that this video illustrates, is an internal tool called ‘Gatekeeper’ which is software layer which facilitates certain users being able to see certain changes prior to it being pushed to the entire Facebook audience.

For example, there are conditionals in place so that only Facebook employees see certain changes, they can use IP whitelists, blacklists – geographical area – you name it, including a fun ‘Everyone but Techcrunch’ rule which exposes a different version to different audiences at a time minimizing disruption, and helping to test code whilst in production. They can ease in traffic onto newly released code live on the fly, providing it with 1% of the traffic, then 5% iterating the whole way to 100% of traffic so load testing is also much safer and log files and events can be watched. In essence, you could be sitting on a new feature without even knowing it, if you aren’t inside a particular bucket testing segment.

Facebook also have people responsible for examining key business metrics when a new release goes live. Key metrics such as Ad Revenue, Interactions, Email signups – are all monitored and tracked on individual dashboards by a designated employee after every release goes live.  This isn’t something left to chance, there are multiple data points scattered throughout their internal systems, many of which are more impressive to hear about than some of the public facing stuff.

Visualization of this data happens at both a systems and operations level in real time, so if a fault occurs, they can both find the problem and resolve quicker.

Essentially most of the tooling at Facebook goes towards minimising deployment risk, and getting things out there quicker and seeing if they are working. There are also clearly significant development resources being applied to developing internal tools. The faster you release, the more risk you carry, so automation, collation of data and working smarter rather than harder more often than not wins the fight and helps to prevent the application from falling over.

There are many parallels to be drawn between the smarts of an underdog boxer, and more rapidly deploying code to market. Like Facebook, Ali not only worked faster, but also smarter to win the fight. He released quicker than his opponent, timed his shots cleverly, adapted to the challenges of the competition, and strategically minimised his risk using the tools available to him.

Facebook’s Muhammad Ali approach to Product Development. is a post from: Webdistortion

This isn’t just about adding a simple ‘tweet this’ or ‘share this’ button to certain pages within your site; its about knowing what features you can provide that require some level of sharing of content as part of the overall experience – and indeed enhancing that experience or unlocking certain features.

Probably the best way to demonstrate this concept is through examples of companies that know how to integrate the best offerings of social networks directly into their product, and grow traffic as a result.

Building in Viral at Pre Signup.

http://www.launchrock.com

LaunchRock works on the very simple basis of a prebuilt landing page that collects pre launch signup email addresses, allowing a business or service to EXTREMELY quickly test the waters as to whether there is demand for a service. The sharing process is built into the product directly, so once you signup, the user gets a personalized link to the product teaser. The more people register through this link, the sooner the user gets access to the website.

Asking random people to evangelize a stealth, or partially unknown, service “can easily seem spammy,” says Eugene Woo, whose startup, Vizualize.me, creates personal résumés full of infographics. So he tapped LaunchRock’s platform to turn the promotion process into a competition: The more sign-ups people brought in (via a custom URL), the earlier they got beta invites. “My TweetDeck went nuts,” Woo recalls. “We signed up 15,000 people in one day.”

In a similar vein at prelaunch ‘Daubble.in‘ used the custom URL that users received as a piece of bait. If you wanted a popular custom URL address on their platform e.g. http://daubble.in/paul – ( a common user name ) then you had to compete for it. The more times you shared a particular URL, the more likely you would be to awarded primary access to it ahead of others. Making people compete for something via sharing is a smart way to build pre-launch momentum and a very easy way to turn one simple landing page into a viral marketing campaign quickly.

Offering users virtual credit.

Smart retailers have been offering discount for product pages which are shared socially. In fact CrowdWish have created a product designed to make this process much easier, and developed various e-commerce platform plugins to perform exactly that.

If your product doesn’t lend itself to discount codes, then what other incentives can you provide in exchange for sharing?

You may be able to reward the top social activity across your platform with an end of month financial reward, or if that isn’t feasible – a virtual league table of sorts that helps to create a competitive spirit within your community.

For example

‘user1245′ has shared their page on Facebook – 20 points
‘user1245′ has shared their profile on Twitter – 10 points
‘user1245′ has updated their profile description – 100 points
‘user1245′ has invited ‘user1246′ - 1000 points

You can begin to see how rewarding users with virtual credit has its merits. In essence you are creating a positive reinforcement of the things that you WANT users to do to help the overall growth of the site. The third example whilst not relevant in the context of social media, still provides you with additional content, improved SEO, and in turn more traffic – so understanding what people are doing and aren’t doing inside your product is imperative.

The example of one user being able to invite another – and potentially providing either a virtual or real currency kickback for doing so is also a powerful way to grow signups.

Stackoverflow, as I’ve mentioned before are a great example of a company that have successfully built game mechanics such as this into their product, and the badges both brings people back to the site, and offer a way to identify thought-leaders and great performers (from a useful / accurate content perspective) within their site.

Leveraging OpenGraph and Social Relationships

Whilst Facebook have stated that they are moving away from frictionless sharing, there are still plenty of opt-in applications which are interesting uses of the OpenGraph product. Fab.com is particularly social savvy, with a full fat OpenGraph implementation within their site.

Note the ‘Action Link’ which allows users to Favourite the product on Fab – one of their key interactions both on and off the website – which in many cases is a precursor to a sale.

According to this developer case study published on Facebook’s own blog – since launching with Open Graph in January, referral traffic from Facebook has doubled and membership has grown from 1.8 million to more than 3.2 million users, thats a pretty impressive figure that can at least in part be attributed to a good social integration.

Leveraging Blogger interaction

How do you manage to get bloggers to write about you? This is a difficult task for any website, particularly if your content isn’t that compelling. However, a great example of blogger interaction marketing at work is evident at ‘UrbanSpoon‘

‘Spoonback‘ (in homage to pingback) offers a way for a food blogger to get increased exposure on the UrbanSpoon site, by embedding a review badge within their HTML. This in turn creates an entry on UrbanSpoon. See under ‘Blogger Reviews‘. It also has the added benefit of being a rich source of quality content that is really useful to visitors, albeit available via a third party website.

Overall, it pays to try and think deeper at every stage of the product journey as to whether there is an untapped opportunity to get visitors to market your product and services for you as they interact with it. Whether that is through more traditional means such as blogs and third party websites, or by using the social graph is entirely up to you.

Bake Viral Directly into your Product. is a post from: Webdistortion

There’s no doubt in my mind that this is negatively affecting traffic hitting the official site particularly for those looking for schedule information, and I’ve ranted before in relation to this controversial development. That said, will Olympic goers and fans alike find it useful? I reckon so.

Olympics

Discus

Shotput 

It will be interesting to see exactly how Google handle integration of social data from Google+ and other real time sources during events – typically with an event of this magnitude, social data becomes all the more useful with the volume of conversations taking place. Whether they choose to use it, and whether that will be integrated more fully into the SERPs due to its volume remains to be seen, but will give a pretty good indicator of whether Google+ is providing a level of data to them now which will further empower the main engine.

Google Roll out Knowledge Graph for the London 2012 Olympics is a post from: Webdistortion

I love you. Really I do. But its time we talked.

Last month you cheated on me with Zamzar, a file conversion site, preventing them from enabling file downloads from the service, effectively making it largely defunct for 99% of its users.

Ouch. That hurt.

It’s not the first time you’ve broke my heart. What about YouTube MP3 , another service which allows audio extraction from video, which you insist on dragging through the courts, even though the good people of the web are trying to keep it alive and still love you.

To add insult to injury, tonight I discovered that if you upload a lot of video to the service – there is limited functionality for actually downloading my original file again. You put such an emotion strain on me. Downloads of MY VIDEO content are rate limited to two every hour.

I’m  caught me by the short and curlies, and deep down, it hurts.

I’ve tried alternatives, including third party software to download my videos, but it keeps giving me health problems. Just last week I caught a nasty virus and previous spyware. All because of your damn prenumptuals.

I get it, you need to make money. But you know, money isn’t everything. Wouldn’t it be nice if we could all get along without you being so greedy all the time?

I spoke to your friends to get access to my video, you know – the ones you introduced me to a while back? Those nice friendly guys at the Data Liberation Front? Well sorry, they weren’t much help. Talked the talk, but couldn’t walk the walk I’m afraid. Data Liberation. My arse. They’ve just setup a Google moderator board hidden away in the corner of the web, hoping that no-one notices.

I understand you need to protect yourself. No-one wants to see you get hurt less than me. I understand there’s all kind of bad men out there on the internet, trying to take advantage,  - upload illegal warez, and share video they shouldn’t, or trade copyrighted MP3′s. I thought you were staying clear of them, after all – you’ve been so busy trying to stop those other pesky internet sites that let you download content.

Can you imagine my horror, when I peeled back your bedclothes, and found these:

Siamese Dream Full Album – Smashing Pumpkins
Alanis Morrisette – Jagged Little Pill
Moby – Play
Rage Against the Machine – Rage Against the Machine
Rage Against the Machine – Evil Empire
JamiroQuai – Travelling Without Moving
Nirvana – NeverMind
Foo Fighters – Greatest Hits
Mellon Collie and the Infinite Sadness – Twilight to Starlight
Mellon Collie and the Infinite Sadness – Dawn to Dusk
Amy Winehouse – Back to Black
The Cranberries – Stars Best of
The Doors Greatest Hits
FleetWood Mac – Rumours
Led Zepplin – Led Zepplin IV
The Jimi Hendrix Experience – Are you experienced
Black Sabbath – Paranoid
Michael Jackson – Bad
Boards of Canda – Geogaddi
Boards of Canada – Music has the right to Children
Radiohead – ok Computer
Radiohead – Hail to the Thief
Pearl Jam – Ten
The Strokes – Is this it
Depeche Mode – Music for the Masses
Bob Marley – Legend
Eric Clapton – Cream of Clapton
Jeff Buckley – Grace

Looks like whatever legal team are looking after your terms of service, and busying themselves shutting other websites down, are clearly turning something of a blind eye to this action. Not to worry – as long as your bank balance is looking healthy, who cares about these schmucks right?

I’m angry, and this is just scratching the surface. We the collective internet who have given you this position of power, are now seeing your true colours.

You are just a bully, who uses anyone who comes into contact with you.

I’ve got options. Plenty of fish in the sea. There are a ton of other open video services on the web with a much cleaner business ethos. Ones that respect the people that put them where they are today, and ones that don’t claim ownership and hold your content to ransom.

That’s it. I’m taking a stand – I’m breaking up with you YouTube. No more video from me. We are through.

Dear YouTube – We Need to Talk.. is a post from: Webdistortion