github.com/cykod/Webiva
P. 617.398.0513
Webiva
319 A Street, 3rd Floor
Boston MA 02110
Boston MA 02110
Social commerce seems to be all the rage these days. But really, what is social commerce? Today, we're delving into the world of social commerce-- what it involves, how it works, and some of its key players.
The What:
According to Wikipedia, social commerce is a subset of electronic commerce that involves using social media, online media that supports social interaction and user contributions, to assist in the online buying and selling of products and services.
Let's break that down, shall we? First off, social commerce is a kind of e-commerce. That's a given. Next, it uses social media-- that's Twitter, Facebook, and any other method for users to share with other users. Then, it takes advantage of the social properties of social media to increase sales.
The How:
So far, a few kinds of social commerce sub-genres have arisen, that work in different ways. A major player in social commerce is that of group buying, where a certain number of people have to purchase an item or service online in order for them to receive a "sale" price. Another form of social commerce, widely used across e-tailers, is allowing customers to share specific items or even entire wishlists across their social networking channels. Yet another kind of social commerce site is that of the private flash sale site, in which members have to be invited by another member to join, and then receive access to exclusive, limited time offer, sales on designer or luxury items.
The Who:
Groupon is possibly one of the widest-known social commerce sites. Like other group buying sites, Groupon provides its subscribers with deals that require purchase by a certain numbers of members before the deal is "activated." Other group buying sites include BuyWithMe, Tippr, and Living Social.
While e-tailers like Amazon have quick sharing of items and wishlists via email, other sites geared toward a younger crowd, like Modcloth.com, offer users the ability to share particular items with a variety of social media sites, including Facebook, Twitter, Polyvore, and StumbleUpon. This is a great way for online retailers to increase the reach of their products with no extra effort on their end, and to harness the power of user recommendations.
Finally, there are the private flash sale sites, including Gilt Groupe, Haute Look, Rue La La, Ideeli, One King's Lane, and Snappy Tuna, to name just a few of the burgeoning number. For each of these flash sale sites, members must be invited by another member in order to gain access to the exclusive and time-sensitive sales. Once a member, users can share their code to gain access via social media, which again allows the sites to increase their reach with no extra effort or marketing campaigns.
A great e-commerce landing page is attractive, but more importantly, easy to navigate for all users, with a minimum of complicated details and a clear call to action. These five ecommerce stores offer a variety of goods and services, but but each provides their users with a great starting point, ultimately leading to a positive user experience and a higher conversion rate than their competitors.
37 Signal’s landing page for their Basecamp product epitomizes a concise yet creative landing page. While this could easily have been a boring, text-based page, Basecamp utilized both text and a large, easily-interpreted graphic and paired it with a call-to-action button that can be found almost immediately.
Metricly provides a measurement system for Twitter and other social network statistics. While their landing page is more text-centric, it still provides a clear idea of the product: a dashboard for your statistics (as demonstrated by their screenshot graphic), a variety of websites that can be monitored (shown by the icons just above the fold), and a clear call to action.
CB2, a modern furniture store, echoes the store’s products in its landing page design. The landing page is sleek, including minimalist amounts of both text and images, and offers consumers with an easily-navigable roadmap for their time on the site.
Blank Label, a local startup offering bespoke men’s fashion, recently performed a majorhaul of their landing page, and it made a huge difference. Their new landing page is now clear, focused, and uncluttered. Product examples are front and center, and the user spends almost no time looking for how to continue with creating their own product.
While My Fonts doesn’t sell a physical product, their landing page very clearly highlights their offerings for sale. Their menu only contains three categories, which makes browsing the site simple. Scrolling further down, more popular fonts are featured graphically, accompanied by widely-used tags to help users search for their desired fonts.
We’ve all gotten invitations for Farmville, seen the sponsored ads on Twitter, and marveled at the multi-billion dollar valuations of social networks. But is what’s occurring on social networks truly social commerce? Or is it just an added feature of social networking?
Facebook is possibly the best-known social networking site that has built up a system of social commerce, both on and off-line. From Farmville to Mafia and everything in between, Facebook embraced the rising trend of social commerce in the forms of users purchasing credits to use towards games and various Facebook applications. Facebook credits are even available for purchase now at big box stores like Target! Additionally, in 2010, Facebook rolled out what they called F-commerce. Essentially, F-commerce is a way for businesses to turn their fan pages into actual ecommerce stores. While Facebook doesn’t earn a profit off of these stores themselves, they earn a great deal of revenue from the companies advertising their F-commerce stores through Facebook ads.
YouTube has adopted social commerce in its own way, adding their form of product placement called “Plinking,” or product linking. Plinking allows for videos to link to featured products, and viewers can then click on the “plink” to purchase the products they’re interested in.
On Twitter, there are paid-for Promoted Tweets for companies, pay-per-Tweet advertisements for users, and a growing number of companies like Twitgift.me that allow users to send real-life gifts to their Twitter friends without even knowing their addresses.
2011 looks to be promising in the expansion of social commerce by way of social networking. Do you think you’ll ever make a purchase through Facebook, YouTube, or Twitter?
No matter what your e-commerce shop is selling, attractive and professional product photography is a must. We've rounded up some tips on how to display your products to create a better user experience and examples of sites that are doing it right!
When websites provide photographs of products styled in different ways, it allows customers to envision how they would use the products in their own lives, rather than just the abstract product on a white background.
(IKEA)
(Williams-Sonoma)
By using high resolution professional photographs in combination with customer-submitted action photos, these companies not only provide high quality product photos but also positive customer testimony through product-in-action photos.
(ThinkGeek)
(Threadless)
There’s really no reason to not to use video! It gives your customers a better idea of color and scale and adds a more personalized element to your product pages.
(Daily Grommet)
Your images should be the primary focus of the product page, not lengthy descriptions and minute details. Use text to support your products, not to overwhelm them.
(ThinkGeek)
(KidRobot)
By providing multiple views of each product, you give your customers the confidence that they know exactly what they're getting.
(Apple)
(Zappos)
With the holidays just around the corner, what better time to set up your e-commerce shop to be prepared for the holiday rush? We've written a step-by-step tutorial for you on how to get your shop up and running in no time.
As always, if you have any questions, you can reach us at info@webiva.com!
So you’ve designed your website, followed our chop tutorial to put it into Webiva, and you’re ready to launch. Before you pass “Go” and collect $200, though, here are a few pre-launch tips to make sure your website is in tip-top working order.
Our top 4 must-do's are:
The rest of our pre-launch action items include:
Now that HTML5 has introduced over 100 elements (both semantic and containers) to our programming resources, programming vocabularies have become wider and more varied than ever before. Despite all the new elements, at first glance there seems to be an apparent lack of elements available to describe actual people, places and things. Rather than create new elements for specific objects (such as addresses or organizations), HTML5 encourages the use of something called Microdata to annotate your existing HTML markup.
According to the Mark Pilgrim's Dive into HTML5 e-book, “Microdata annotates the DOM with scoped name/value pairs from custom vocabularies.” In essence, the use of Microdata allows annotation of your HTML in a way that creates additional information attached to your elements.
Instances you might want to add microdata to include:
For example, say that we at Webiva wanted to expand our company information that appears in search results. By using microdata, we can tell Google to notice details like our address, region, telephone numbers. Here's an example markup we could use on Webiva.com:
<article itemscope itemtype="http://data-vocabulary.org/Organization">
P. <span itemprop="tel">617.398.0513</span>
<a itemprop="url" href='http://www.webiva.com'><span itemprop="name">Webiva</span></a>
<div itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">56 Roland Street</span>, Suite 309<br/>
<span itemprop="locality">Boston</span> <span itemprop="region">MA</span> <span itemprop="postal-code">02129</span><br/>
</div>
</article>
From the front end of the site - this information will just show up as a name, link and address (check out the bottom of our website), but because we've added additional information to the HTML via `itemtype`, `itemscope` and `itemprop` attributes, we've given this information additional semantic meaning
What’s the point of adding all this extra information to your HTML if no one will ever see it? Well, the fact of the matter is that search engines will see it. You can use Google's Rich Snippets Testing Tool to see what extra data Google will glean from your site. While Google currently only displays additional data in search results for reviews and social networking sites, it does crawl it and index it (See what Webiva.com looks like.) By including microdata attached to, in essence, your code identifying people, places, and things, you give search engines more-- and more specific-- information from which to provide rich search results to their users.
For explanations on how to use microdata, take a look at Google’s webmaster central guide or Mark Pilgrim’s Dive into HTML5.
I’ve been blogging, on and off, for about 10 years now. It all began back in the early paid-account days of LiveJournal, then on to Myspace blogs (what was I thinking?), then back to LiveJournal before a short stint on Blogger, an even shorter stint on Tumblr, and then my most recent landing place, Wordpress.
Wordpress never felt like “home” to me, though. I’d still admire other sites where people had created landing pages, linked to their portfolios, and even sold handmade goodies on the same site as their blog. While Wordpress allows you to do most of that, my limited programming knowledge certainly did not. Sure, I could easily update a post, but I hated the way the backend looked so I didn’t want to spend any more time necessary struggling with code to add more functionality. The proverbial straw that broke the camel’s back for my experience with Wordpress, though, was the lack of free -- and attractive-- themes that didn’t feel like cookie cutter templates.
And then, Webiva came into my life (cue dramatic lighting and chorus of angels). I had my doubts at first: not about its functionality, but about whether or not I would be able to figure out out. Those doubts were assuaged one Friday evening, though, when I was tasked with making changes to our website. Yes, our company website. That’s a big deal for someone like me, who not only has no programming chops, but also has a huge (and somewhat irrational) fear of “breaking” the site. I hesitantly changed some text before realizing that I needed to actually add a new content paragraph to the page. Taking a deep breath, a selected the paragraph, added it to the main content section and... voila! It worked!
It took me a minute to realize that I had successfully altered the website without rendering it totally unusable for the next 5 days, but once I came to that realization, it was like I’d had an epiphany. For once, I could --and did-- successfully change and update a website! Exploring the system some more, I discovered that not only could I easily update pages, create new landing pages, and add content, but that I could also use the substantial analytics tab to track incoming and outgoing traffic, optimize my site for search engines, implement my own storefront (if I decided to sell my crafty wares), and even more importantly, create and customize my own pixel-perfect themes.
Using Webiva is truly a boon for any blogger with the desire to control their blog themselves. Want to add a new header image? No problem. Time to change your TypeKit font and track your traffic? Done and Done. And updating your blog? It's as easy as it gets.
This blogger? Converted.
For examples of Webiva-made blogs, check out Cykod or my (in progress) blog, BirdsiViews!
According to Wikipedia, metadata is “loosely defined as data about data.” So why, you might ask, is metadata important in the world of websites? Websites use meta descriptions and meta keyword tags, found in the <head> of the site’s HTML, to describe or summarize their content. More specifically, meta descriptions are brief and concise summaries of a site’s content, while meta keyword tags provide a list of the site’s keywords. These bits of meta information are then picked up by search engines and used to index your site accordingly.
Currently, none of the major search engines support meta keyword tags any longer. You can thank spammers in the 90’s for this, who abused the algorithms valuing keywords by stuffing their keyword tags to the brim with related-- and also totally unrelated-- keywords for the sake of their search engine rankings.
In the case of meta descriptions, they are the first item shown below the hyperlink to your site in search results, if your description contains some of the keywords someone searched for. There is no limit to how long meta descriptions can be, but Google only displays about 150-200 characters, so that’s a good number to keep in mind. While search engines won’t always display your specified meta description, you can increase the odds of them doing so by including some of the key terms you hope will lead people to your site. Although they don't improve your search result rankings, meta descriptions, when written correctly, can help persuade searchers to click through to your site. It’s also important to write unique meta descriptions for each of your pages. Visitors to your site won’t always come straight through your home page, and because each of your pages is unique (we hope), you should provide unique meta descriptions for each page to bring in additional viewers.
A quick example of "good" meta tag descriptions versus "bad" meta tag descriptions can be seen in our search for "Boston baseball camp" below:
This screenshot of our Google search displays the first result with a coherent and informative description, which will entice searchers to click through. The second result, however, simply pulled related content from the website, rather than displaying an intentionally specific and keyword-driven description tag.
As with any SEO technique, crafting your meta tags and meta descriptions aren’t magic bullets to get your site showing up at the top of Google’s search results. The best suggestion? Add this information to your arsenal of SEO techniques, and keep creating great content!
You’ve seen it happen (or, if you’re particularly unlucky, it’s happened to you): a client goes to a designer/developer and says I want my site to look like X, Y, and Z, with these pictures, these colors, and these fonts. Fast forward a few weeks later, and the client receives their pretty coded website.... except it’s filled with a bunch of strange-looking Latin mumbo-jumbo.
You see where this is headed, don’t you?
The client is (hopefully) satisfied with the design and knows that all they need to do is add in their own content. With this best-case scenario, however, the issue comes once the client adds in their painstakingly-written copy, expecting the website to look the same as it did filled with lorem ipsum... prepare to be disappointed.
The problem with designing without any notion of content is that more often than not, even the roughest version of a site’s copy would give the client a better idea of what their site will actually look like. If the designer has no idea of the length/scope of said content, they’re stuck picking an arbitrary chunk of lorem ipsum text which may or may not be anywhere close to the length of the actual content. Ultimately, this disconnect can result in some major design issues if the client tries to add, say, 50 rows of text in a box designed for 15.
This isn’t to say that lorem ipsum is evil. There’s a reason it’s stuck around for so long. However, including actual copy —no matter how rough it may be— can help to streamline the process, from designer to client, and prevents that moment of content replacement “sticker shock” for the clients.
