How to Build an Interactive HTML5 Ad in 10 Minutes

Today we’d like to demonstrate how to build an interactive HTML5 banner ad.

This was a project we did for Carlsberg a while back, which we think can be useful for designers and programmers interested in front-end design work.

Carlsberg is a multi-billion dollar, global beer brand that employs over 40,000 people around the world. Besides the household Carlsberg brand, they also house other brands such as Tuborg, Somersby (cider), Kronenbourg, and Dali Beer (a fast growing brand in Asia).

What Is An Interactive Ad?

Let’s do a quick recap. In the old days, we had text ads, which are basically a short text blurb with a link to the advertiser’s page, product or service.

Next came static banner ads. These are typically static images. They’re more compelling that text ads, because images are worth a thousand words. The main formats come in a 300×250 pixels (box), 728×90 (wide) or 90×728 (skyscraper).

Then, Flash technology game along on the desktop browser. Flash was revolutionary, because it enabled a wave of animated banner ads, as well as interactive ones. Animated ads captivate user attention resulting in higher click through rates (CTR). Players could even play a micro-game such shooting something, or throwing a ball into the hoop.

In 2010, Apple convinced the world of the virtues of switching to HTML5, and with giants including Google following suit, Flash technology quickly declined.

Ad technology companies see the huge growth potential in mobile, and hence started implementing HTML5 into a new, cross-platform ad unit. This unit is called the HTML5 interactive ad, supported by new industry standards such as MRAID, MRAID2, and such.

Long story short, an interactive HTML5 ad, is an ad that now works on smartphones, tablets and desktop browsers.

So What’s This Carlsberg Ad About?

Here’s a link to video, showing the interactive ad running on an iPhone:

The goal of this interactive ad is to drive awareness of the World Rugby Sevens Tournament, an annual rugby event that happens in Hong Kong. The best of the best teams from all around the world compete annually to win the top prize. Carlsberg is one of the main sponsors.

The ad experience is simple. Users see a glowing Carlsberg beer bottle. A message is asking the user to tap on the glowing bottle.

Upon tapping on it, a short animation plays of a rugby player carrying a cold, iced bucket of Carlsberg beers.

A fun brand slogan appears: “Are you beer ready”?

Users can then tap on the ‘Find us on Facebook’ link to visit the advertiser’s page for more information.

Back To Our Regular Programming

An interactive HTML5 ad consists of 5 main elements:

  1. index.html (main entry point)
  2. main.js (the javascript that contains the logic)
  3. main.css (the CSS stylesheet)
  4. assets (visual assets)
  5. the outbound link (where the ad should take users to)

Let’s start building the ad…

Part 1: index.html

The index.html consists of standard HTML declarations.

See the Pen Carlsberg Interactive Ad Demo – index.html by Ben Chong (@marketjs) on CodePen.

What matters here are the meta viewport, and the linking to main.css and main.js

As you can see, it’s fairly simple. Nothing out of the ordinary.

Part 2: main.js (The Meat And Bones )

The main.js is a Javascript file that drives all the interaction with the ad.

See the Pen Carlsberg Interactive Ad Demo – main.js by Ben Chong (@marketjs) on CodePen.

At the top, we insert jQuery’s entire minified JS. Note that you can use the latest version of jQuery from

jQuery will be helpful for most of the DOM manipulation techniques we use.

Next, we create a simple image based preload function.

We preload a bunch of graphical assets related to the ad.

Now, on to the logic. When the ad loads, you’ll notice we create 2 divs, called scene1 and scene2.

scene1 contains the div of the glowing bottle. When it’s clicked on, it transitions to scene2, via the gotoScene2 function

scene2 itself contains the tagline div, which redirects to the Facebook page of Carlsberg, when tapped.

That’s basically it. Very simple logic is needed.

Part 3: main.css (The Stylesheet)

The main.css file contains all CSS-related styles.

See the Pen Carlsberg Interactive Ad Demo – main.css by Ben Chong (@marketjs) on CodePen.

In this example, we did some of the cool animations you see via CSS

For instance, the glowing beer bottle uses the blinker value from the -webkit-animation property

We also add a few standard algorithms that users tend to love, such as bounceIn and bounceOut

Part 4: Visual Assets

Interactive ads require fun visuals that are brand-related. Hence, it’s advisable to work with a designer on interactive HTML5 ads.

In our case we used: The blank green background; The bottle; The background with the rugby man holding a cold ice bucket of beers; The call to action graphics.

Part 5: Call To Action (CTA)

This is the most important parts to any interactive ad. The call to action has to be designed to well, that users actually want to click through to find out more.

It has to be a compelling message that ties to user’s curiosity.

For emphasis, here’s the final CTA look:


We hope this article is useful for the community. As you can see, this interactive ad is really easy to build and takes not more than 10 minutes to assemble yourself.

Click here to download the project files and source code.


The Freelancer’s Guide to Success and Happiness

In 2016, 34% of the US workforce worked as freelancers, and by 2020, it’s estimated that number will rise to 43%. Freelance opportunities aren’t going anywhere, and more professionals are swapping in their office key cards for a home office.

While the idea of sitting around in sweatpants or relaxing on a beach while working sounds like perfection, freelancing isn’t always a walk in the park. From juggling business responsibilities and invoices to finding your next gig, freelancing comes with its issues. Despite these challenges, a few tips can help you find success and happiness in your career.

1. Believe in Your Worth

Particularly when you’re new to freelancing, it can be intimidating to set your fee. While some projects or jobs may entail negotiation, it’s best to set your rates and stick to them. Depending on your niche, you may work on an hourly rate or quote per project. Set a rate that’s on trend with your industry rather than settle. While you may find more gigs when charging less than the industry average, you’ll experience more stress trying to juggle enough projects to meet your income goals.

2. Network Even When You’re Not Seeking Work

Networking is the lifeblood of freelancing; it’s necessary to keep your business alive. Even when you have contracts, freelancing jobs can be unpredictable. You may have ten small projects one month and three ongoing projects another month.

Finding yourself low on projects can be stressful to your mental health and your wallet. Keep networking with other professionals, freelancers, and potential employers even with plenty of projects on your plate. This effort makes it easier to find a job when you’re looking for your next gig.

3. Hire an Accountant

If you make a single business investment, hire an accountant. Unlike W-2 employees, who have a portion of taxes paid by their employers, freelancers have to cover all of their own taxes and manage their own expenses.

During tax season, it can be confusing and overwhelming to determine the tax credits for which you qualify and what taxes you owe. Working with an accountant not only makes it easier to track expenses and save on taxes but also gives you clearer insight into how much you’re earning after taxes.

4. Set a Schedule and Stick to It

Working the standard nine-to-five Monday through Friday can feel restrictive, but businesses are onto something when they adhere to a consistent schedule. Whether you prefer to work late at night or early in the morning, set a regular schedule for your work week, including the days and hours you’ll work. Aim to schedule four days of work and one day for handling administrative tasks, such as following up on emails, taking care of bills and invoices, and networking. A regular schedule helps you get into a work mindset each time you start your day.

5. Don’t Skimp on Business Necessities

Working as a freelancer means wearing a business-owner hat too. While it’s tempting to cut back on costs wherever you can, it’s worth investing in the tools you need to do your work efficiently. One service you should never skimp on is a reliable high-speed internet connection for communicating with employers and completing projects. Take the time to find the fastest internet in your area and calculate your bandwidth needs based on the type of work you do. With a fast connection, you can complete your work faster and avoid the frustrations of lag.

6. Don’t Be Afraid to Say “No”

When you determine your income, it’s easy to make the mistake of taking on too much work. If you’re tempted to take on another project for the additional income, consider the cons: additional stress and less time to decompress. Don’t risk your mental health for a bump in pay. Before agreeing to any new project, look to see if it will realistically fit into your schedule. If it won’t, turn it down or explain what deadline would work for you.

Working as a freelancer is an exciting career move, offering independence and opportunities to challenge yourself and enhance your skills. While freelancing isn’t the easiest gig, following these helpful tips can help you find happiness and success in your career.


8 Sites That Work Just Fine Without JS, Thank You

Gather ’round, ladies, gents, and children. Lo, before your very eyes, we shall reveal several freaks of the Internet! Behold! Websites that don’t need JavaScript to display their god-given content!

Oh, you think I’m kidding? Websites that are presented by plain old HTML and CSS are becoming increasingly rare. At this juncture, I don’t know who to blame, and is it really worth blaming anybody? I could point finger at whomever or whatever I think is to blame, or I could point fingers at creative and sometimes large websites that do it right!

Now, what do I mean about “doing it right”? Some of these sites, you might notice, do implement some things with JavaScript. But here’s the secret: if you turn JavaScript off, these sites still work just fine. The content doesn’t just disappear. The JavaScript effects and features have fallbacks! Sites are progressively enhanced, or they degrade gracefully.

Either way: they work. And they’re kind of hard to find, these days.

1. Amazon

You might expect a site with as much information present on any given page as Amazon has to use a mountain of JavaScript to, in some way, organize it more efficiently. Not so. Turn off the JS, and you can buy stuff just fine.

2. The Warren Trust

The Warren Trust is another one that degrades quite gracefully. With JS on, the site uses AJAX techniques to load content from other pages without technically leaving the home page. Turn off the JS, and it won’t work quite like it does with the JS on, but it does work. You can still see every page, but, you know, on its own page.

3. Stuff & Nonsense

Stuff & Nonsense was created by known and self-admitted web designer Andy Clarke. So yeah, it work with and without JS just fine. It’s a lovely example of a site that (mostly) works perfectly fine either way.

The only thing that doesn’t work when JS is turned off is the audio player. That is kind of to be expected, really. I can’t take many points away for that.

4. Mike Mai

Mike Mai’s site is proof enough that your site can be plenty creative—if a little odd in this case—with or without scripting. And I do mean “odd”, and I really do mean “little”.

It may not be the poster-site for visual accessibility, but it does show what kind of things can be accomplished in plain old HTML and CSS by those just crazy enough to try it.

5. Solace House

Solace House is a sobering example of a site that absolutely needs to work any time, under any circumstance, no matter which technologies are or aren’t working. It’s a suicide prevention center, after all.

You might be able to argue that your target demographic should just have JavaScript enabled at all times in some circumstances, but there are some services that are just too vital to ever leave to chance.

6. Twitter

Yeah, that Twitter. It was while researching this article that I found out Twitter works well enough without JavaScript. Well, their solution is a bit convoluted, perhaps, but it’s effective.

In short, Twitter will actually redirect you to a pared-down, mobile version of Twitter. It’s fully functional, except for features like feeds that update live, and so on. Who says social media needs JavaScript?

Truth be told, Twitter never felt faster.

7. Slack

You might need JavaScript to actually run a Slack chatroom, but the rest of the client-facing site looks and works just fine. It even has a condition in the URL for no JavaScript. And when you need to enable JS to make things run, they tell you! They actually tell you!

No seriously, it’s a thing that lots of sites would rather let you stare at a blank page than even say, “Woops! Looks like the JS broke, or you need to enable it.” I dislike this thing.

8. WebdesignerDepot

No, seriously, try it out. You’ll see a few visual downgrades, but everything essential looks fine, and works well. This is what it’s all about, people!

I’d love to take some credit for that, but I just write here on occasion. I guess this is my official letter of congratulations to the designer!

In Conclusion

I just wanted to show people what could be done. That’s it. I’m not saying you should ditch JS entirely, but I do believe that we should be a lot more considered about what we do and don’t implement in JavaScript.

Look at the sites I’ve listed here. Look at your own. For every thing you implement with a script, ask yourself if you really, really need to make it a script. For that matter, do you really need HTML?

Okay, okay. That’s going way too far.


Should the Web Have a Universal Design System?

Unlike mobile applications, the web has no set design guidelines to which a designer can refer. Instead, each web project tends to be a blank canvas. There are frameworks like Material, Bootstrap, and others which provide a base, but no set guidelines which span the web as a whole.

The result is a wide-ranging and diverse web, but one with a lack of cohesiveness, particularly in terms of user experience. Navigations differ in placement, structure, and overall design. Layouts alternate in width. Text sizes and typographic scales vary wildly. And a wide range of differing components, interactions, and user interface elements are used.

Design systems ensure consistency between apps, resulting in a more cohesive product

The lack of a set design system for the web is due to its open source nature, and lack of ownership. No company or organization has the power to enforce guidelines or standards. The closest anything or anyone comes to impacting the way we design is Google, who can affect your search rankings based on factors such as user experience, responsiveness, and code structure. On the other hand, mobile operating systems like iOS and Android have the power to enforce certain application structures, user experience practices, and standards. Design systems ensure consistency between apps, resulting in a more cohesive product, and one that is easier to use and understand for the end user. It also enhances performance and optimization, as well as accessibility.

Despite such a defined set of guidelines in both cases of iOS and Android, designers still find ways to differentiate through aspects like color, layout, and design details. In these circumstances it’s still entirely possible to achieve outstanding  and unique designs which still fall within the guidelines.

Conversely, the web is an absolute blank canvas. There is the ability to take a design and user experience in any direction desired. On one hand, it’s what makes the web so attractive, diverse, and abundant. On the other hand, it can lead to a confusing experience for many people: one that is highly inaccessible, inconsistent, and uses a variety of sub-optimal and dark user experience practices.

The case of iOS and Android show just how rich and diverse a digital product or ecosystem can be, even under such regulation and moderately-strict guidelines.

This poses the question of whether a set of open source guidelines should be introduced for the entire web. Whether it comes from W3C, is a unified effort between major browsers, or is devised by a group of designers, it could improve the web for all. There would still be great scope for producing unique designs, while ensuring the web reaches much more acceptable levels of accessibility and usability as a whole. Designers and user experience professionals could contribute to this as an open source project, pushing forward the progress of the entire web.

It’s not just web applications this system should apply to. Whether it’s a blog, portfolio, landing page, or wiki, they are all still usable products. They still require important user experience considerations such as accessibility, navigation, color practices, and typography scales. Many companies consider such aspects, while many ignore them either through choice, misjudgement, or lack of consideration. It’s an area which is so fragmented under the current system, and does not work appropriately for everyone. That includes those with a disability, visual impairment, or lack of familiarity with computers and the web. These users should be designed for first.

As it stands, the primary consideration is often the design visuals: making something impressive, unique, and eye-catching. Often this desire to differentiate can lead to oversights with user experience, and design choices like unique navigation solutions which are confusing and unfamiliar to most.

Google is a prime example of a company who have developed a set of guidelines and applied them with absolute consistency across mobile and web. Whether you switch from Google Keep on iPhone, to Google Drive on the web, the user experience and design elements remain consistent. Then when switching between products on the web like Play Store or YouTube, it again remains consistent.

This ease of use and transition from one product or site to another should be a model to follow for others. It puts the user first, making for an entirely accessible and understandable experience. Google is beginning to take this even a step further, as they introduce Android apps and web-based equivalents that work at desktop size. With products like Chromebooks, it makes the transition between devices even more seamless.

The closer we can get to a cohesive design system across the web…the better it will be…for all parties involved

The closer we can get to a cohesive design system across the web as a whole, the better it will be in the long run, for all parties involved. This means having systems span much further than just one company.

IBM or Airbnb may perfect their design systems to the nth degree and apply them with excellent consistency. However, as soon as a user switches to another product or service, their design system is likely to be wholly different, from typography and layout, to navigational practices. That’s why it needs to be looked at as an issue from further afar. And apps are the closest example we have to how successful this can be as a means to improve the everyday lives of users.


Kinsta Review: Real Test Data + My Likes And Dislikes

Kinsta is a performance-oriented managed WordPress host that’s powered by Google Cloud Platform, which is the same hardware running Google’s own products (maybe you’ve heard of Google?). In the past, Kinsta was almost exclusively a premium host, with prices starting at $100. That’s changed now, though. Beginning in November 2017, Kinsta completely relaunched with an all-new pricing plan that starts at…. Continue Reading

The post Kinsta Review: Real Test Data + My Likes And Dislikes is written by Colin Newcomer and appeared first on WPKube.

What’s New for Designers, January 2018

Start 2018 by deleting some of those old tools from your computer that you never use in favor of some fresh, new options. While old favorites can be great for a while, there are so many great new elements out there that can streamline your workflow, or help add more creative spark to projects.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!

Let’s Enhance

Do you ever have an image that is just too small for what you need? Let’s Enhance is here to solve that problem. The free tool allows you to upload an image—just drag and drop—and it will remove JPEG artifacts and upscale by up to four times the original size without losing any quality. (And it actually works!) State of the art neural networks are used to help removed image noise and imagines missing details for images that look totally natural.

Design Principles

The open-source Design Principles project is a collection of resources that are the basis for good projects. According to the curator, “Design Principles help teams with decision making. A few simple principles or constructive questions will guide your team towards making appropriate decisions.” You can browse more than 1,000 principles and examples already in the database or submit your own.


Hexi-Flexi is an SCSS component built on the CSS grid layout that creates a lattice of hexagons. Without JavaScript, you can customize the number of shapes, cells and rows to fit your design or content. It also supports auto-populating backgrounds.


Snippetnote is a note-taking app that allows you to copy snippets for later. You can copy private snippets and change the layout as needed. Notes are available offline and in a drag and drop interface that’s easy to use. The interface is streamlined and simple without ads or social prompts.


Manta is a simple invoice-building app for Mac, with sleek design and customizable templates. Users can drag and drop items in invoice fields, include an SVG logo for better printing, and export invoices to a PDF or email format. (Plus, it’s a totally free-to-use invoice tool if you are looking for a simple product to streamline billing, which can be great for freelancers.)

Sketch Elements

This free iOS user interface elements kit has everything you need for your next app project. The kit includes 35 screen designs, 45 icons and 175 symbols. Plus, every element can be further customized so that your project feels unique. The kit is made for Sketch 48 or later.

Minimalist Icons

Themeisle has a set of free, minimalist vector icons that you can download and use in a number of projects. Each icon comes in a line-drawn, colorless style with a variety of options. The pack includes more than 100 icons.


Keep up with the status of critical services in one location. Get real-time notifications that you can see on screen or have them emailed or messaged to you. The ticker supports more than 145 services.


Looking for Instagram-style images for your projects? Instagram.css is a complete set of Instagram filters in pure CSS.

Epic Spinners

These simple CSS-only loading animations are fun and functional. Just grab the code and you are ready to use them.

Buy Me a Coffee

It’s like Kickstarter for creatives. Buy Me a Coffee allows you to showcase work and ask supporters for a small donation to fund the project.


Keepflow is a team-based project management tool for design freelancers and agencies. Currently in pre-launch beta, the software is designed to help you onboard clients and then manage a project – from an information-gathering questionnaire to the final product.

Tutorial: Using SVG to Create a Duotone Effect

CSS-Tricks has an excellent new tutorial that helps you navigate the world of SVG and create a trendy design element at the same time. The tutorial breaks down how to create a duotone effect in both the traditional manner using Adobe Photoshop and with SVG filter effects.

Product Manual

Product Manual is a collection of resources that help you build and understand the process of creating great products. The website is packed with resources by category—you can also add your own—so that every project can start here.

One Year of Design

Pixels collected a pretty cool collection of great website designs from 2017 all in one place. The retrospective is a nice bit of design inspiration.


Need a special character? Rather than digging through typefaces or struggling to remember keyboard shortcuts, use CopyChar to click and add a special character right to your clipboard. Special character options include everything from letters and punctuation to math and numbers to symbols, arrows and emoji.


Dulcelin is a simple script that’s available free for personal use. It has a nice structure that’s readable and comes with a set of 177 characters.


Kabrio is a fun sans serif with the added bonus of having multiple corner options for typeface styles. The alternate variant features slightly rounded corners, that become even more round in the soft variant. Abarth features cut corner for a more mechanical, cold look. Each variant has seven weights and italics.


Promova is a blocky sans serif that would make a nice display option for website projects. The typeface includes regular and italic styles with wide character sets. The type family includes upper-and lowercase letters and is highly readable.

Studio Gothic

Studio Gothic is a nice sans serif with a rounded feel. The free version includes Extra Bold Italic and the Alternative Regular variations. The pair have an extensive character set and would work nicely for a variety of project types.

Sunshine Reggae

Sunshine Reggae is a lowercase typeface with a brush-stroke handwriting style. The limited font includes just 26 lowercase characters without any extras or frills, but it can make a fun display option.


Popular Design News of the Week: January 8, 2018 – January 14, 2018

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Best WordPress Design Trends for 2018


5 Typography Trends for 2018


Coke’s New Font is Design at its Worst


Company Tricks People into Swiping Instagram Ad with Fake Strand of Hair


Golden Ratio. Bring Balance in UI Design


Gradient Cards – A Simple and Beautiful List of Editable Gradients


The 7 Best Design Case Studies of 2017


Goodbye IPod, and Thanks for all the Tunes


I’m Harvesting Credit Card Numbers and Passwords from your Site. Here’s How.


Inboxer – A Clean, Open-source Desktop Client for Google Inbox


Spotify for Developers


So your Website is Slow? Let’s Fix That.


Building Our Sketch Library


Low Poly Art – A Free Collection


Beginner’s COurse: JavaScript for the Web


Designers, Here is Why You Want to Limit You Tools


Simple Mockups – Minimalistic Devices Mockup Pack for Sketch & Photoshop


Workplace Hygiene in Sketch


How to Fix Facebook – Before it Fixes Us


5 UX Books that’ll Change How You Think About Design


How to Use Variable Fonts on the Web


Inspiration Feed: The New Designspiration


Challenge: To Create an Illustration Style


The 8 Greatest Ideas of CES 2018


A UX Career is a Business Career


Want more? No problem! Keep track of top design news from around the web with Webdesigner News.


Comics of the Week #423

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Shot of tolerance

Liquid inspiration


The multitasker

Can you relate to these situations? Please share your funny stories and comments below…


7 Great Uses of Gamification in Web Design

Gamification as a concept has been around just long enough for a number of experts to come out of nowhere. There was a brief moment where everybody wrote an article or five about it, and then it more or less became the preserve of “gamification experts” and business blogs.

The thing is, we should still be thinking about it. Buzzword or not, it’s often incredibly effective.

So, for the beginners: gamification is the practice of putting game-like features, mechanics, and sometimes UI elements into your website or app.

In this article, we’re taking a look at several different forms of gamification, and how they’ve been implemented across the Internet. You’ll probably have seen some of these before, but you might not have thought of these as game-like features. Also, I’m sticking to websites and web apps (you almost have to try to find a mobile app that doesn’t have some form of gamification).

1. Habitica

Game elements: experience points, levels, upgrades, gear, and more.

Habitica is probably the single most direct application of game design principles and mechanics that I’ve seen in a web app. Why? Because it basically is a game. Well, the app’s stated purpose is to help you form new good habits, and kick bad ones.

They attempt to do this through the rather direct application of roleplaying game mechanics. Spend time on your new habit, you get points. Succumb to old habits, lose points. Enough points gets you upgrades, and so on.

2. Zurb

Game elements: object finding, achievements.

Zurb is probably the best example of game mechanics implemented in a site that is more “site” than app. Simply put, you go looking for cows, which are hidden all over the site. There’s a page where you can track all of the cows you’ve found. It’s probably the most fun way of getting users to read or skim through every page that I’ve seen to date.

3. LinkedIn

Game elements: competition, completion.

Okay, you might not think of this as a “game mechanic” but LinkedIn (and almost every other social media site out there) implements a mechanic designed to encourage you to complete your profile. It treats filling out each part of your profile a bit like an achievement, and gives you a status bar to show just how full (or not full) the profile is.

It’s designed to trigger your “completionist” instinct on one level. Also, these sites often state that people with fuller profiles are more successful at networking. On the one hand, it’s good advice. On the other, it hits your competitive instincts a little bit.

They’re subtler aspects of game design, but they do fit the theme.

4. Klout

Game elements: competition.

Pretty much all social media is gamified to a limited extent, but Klout takes it quite a few steps further. In fact, it takes the rampant popularity contest that is social media, and adds a numerical value to everyone’s popularity.

It drives interaction by allowing you to connect all of your social media accounts, showing you how much more popular industry leaders in your fields of interest are than you, and giving you ways to easily post and boost content to raise your number.

5. Zoho Motivator

Game elements: competition (hard mode).

Zoho Motivator is a cheerfully-named tool from the Zoho online office suite. It takes data from Zoho’s CRM tool to measure how each of a company’s salespeople is doing. It calculates leads generated, potentials created, and sales completed. And then it pits them all against each other in a friendly competition.

Well, depending on the corporate environment, that could be friendly competition, or a cutthroat race to see who can get the most sales by any means possible. Forget the problems inherent in the world of social media. This is where I start to wonder if we shouldn’t be a bit more careful with how we use gamification.

6. Interland

Game elements: quizzes, puzzles, platforming, and more.

Interland is almost cheating, as far as examples go. It’s literally a site filled with educational mini-games designed to teach Internet safety and courtesy to new Internet users, and is primarily directed at children. This is, perhaps, not an approach that can be used for most sites. For educational sites, though, I’d say it’s pretty effective. Learning through play is a proven concept.

7. Quizzes in general

Game elements: quizzes (heh), competition.

Following that last example, it would be wrong of me to ignore one of the oldest forms of gamification on the web: the online quiz. Some of the most famous applications include Facebook quizzes, Buzzfeed quizzes, and quizzes from The Oatmeal (some of which may be NSFW—or life). For a clean quiz example, try this literary guide to Britain.

While the quizzes themselves usually don’t drive business-related interaction directly (though they can), they are often used quite effectively as marketing tools. I dare say that Buzzfeed and The Oatmeal especially owe their success in part to the viral quality of quizzes.

Bonus: Purely visual gamification

Game elements: purely visual.

Lastly, we have an example of sort-of-gamification that doesn’t require much input on the part of the user. You just have to scroll. I’m talking about Robby Leonardi’s interactive resume, a site that looks and feels a lot like a side-scrolling platformer.

I don’t know if this really counts as gamification, but it sure is pretty.


9 Expensive Ecommerce Mistakes to Avoid

An online shop’s shipping methods or rates have a significant impact on decreasing cart abandonment rates and driving up additional sales. Customers are just as attracted by low shipping rates, fast shipping options, and good packaging, as they are enticed by competitive market rates of products.

Ecommerce sites that have not yet mastered the complexities of shipping are unable to reach their full sales potential. Many new business owners grossly underestimate the importance of shipping cost, which can have the most impact on the overall expense it takes to get a product moving. Moreover, these online shops risk their business being run down as a result of the costs due to shipping mistakes eating into their profits.

Fortunately, with a little research and careful planning most of these mistakes are easy to identify and avoid. Avoiding the 10 common shipping mistakes listed below can help any online shop owner become a savvy e-retailer.

1. Not Letting Customers Choose a Shipping Option

Customers enjoy having multiple shipping options since every customer is likely to have different delivery expectations. Some may have an important event, like an anniversary or birthday, just around the corner so they will prioritize fast shipping to get the ordered gift on time. Others may be more interested in saving some extra bucks through free shipping. Your shop will automatically become undesirable if it does not provide suitable shipping options to accommodate customers with specific parcel arrival time or shipping cost preference.

2. Ignoring Customer Feedback

Customer feedback/reviews can make or break an online store. Consumer reviews not only help other potential customers to gauge their expectations with your online store, but their feedback can also help you modify your business methods and policies for greater efficiency. For instance, if customers are constantly complaining about delivery delays, then it’s time to upgrade to a better or higher-end shipping package/service provider. On the other hand, if your parcels are always delivered ahead of their delivery schedule then you can safely downgrade to a more economical shipping option and save on those shipping costs.

2. Not Providing Free Shipping

Customers are always on the lookout for the most economical and discounted product. Providing further discount via free shipping serves as an excellent incentive for these customers to proceed with the cart checkout. If, your store completely ignores free shipping, it can significantly increase cart abandonment rates and overall drive down your sales conversions. Remember, your competition can always steal away your customers by offering them a more economical solution (with free shipping included).

3. Using The Wrong Packaging

Packaging is a critical feature of the entire shipping process – from encasing consumer products into a box/bag to delivering it to the customer’s doorstep. Packaging not only serves to protect the product from damage during transportation, but it also contributes towards building your brand reputation. The type of packaging used also serves as an indicator for how much you’ll be charged by the shipping carrier.

In the past, delivery services were charged based on parcel weight alone. However, today’s carriers charge on basis of whichever description fits best, either by package weight or its corresponding dimensional weight. New store owners often make the mistake of underestimating the shipping cost of dimensionally large, but otherwise lightweight items. Sometimes business owners also try to save on shipping costs by placing items in inappropriately sized boxes or skip protection like bubble wrap. This can result in damaging the item during transportation. A good estimate is to leave around two-inches of spacing for protection to secure the item.

4. Estimating Shipping Expenses

Sometimes shop owners are neglectful of the DIM weight pricing and pack the items in whatever box is at hand; even if it’s slightly bigger in size. This can generate overhead shipping costs as such business owners are likely to break their shipping budget. Pay close attention to the sub-charges included in the shipping carrier’s package such as fuel surcharges, weekend delivery, residential delivery and recipient’s signature. If these services are not important or relevant to the customer base, there is really no benefit to paying for these additional shipping costs.

5. Not Keeping Track of Shipping Supplies

Suppose you’re effectively managing store inventory, but if no one is keeping track shipping supplies then it will be very difficult to ship out items to customers on time. Moreover, by keeping an eye on the shipping supplies, you can effectively establish re-order points at the right time and ensure that your supplies stores are never depleted.

6. Being Unprepared For Changes In Shipping Package

Shipping carriers make changes to their package prices and shipping policies annually. Most of the time, these changes happen at the beginning of the year, but they can also occur in mid-year. So it’s best to frequently get in touch with your shipping carrier to remain updated about any relevant alterations.

7. Manually Managing the Shipping Process

Creating shipping labels while simultaneously managing shipping demands can be a strenuous job. All of this stress can be easily avoided by automating the shipping process with the help of ecommerce shipping software. Try to take full advantage of the shipping software—create customized invoices and package delivery slips to give your product packaging a more professional feel.

8. Overlooking Customer Address Validation

The address registered by the customer may be wrong and should always be validated by the business owner. If this is neglected, the item will be shipped to the wrong address or returned to the business warehouse. As a result, the customer will be unhappy and may demand a refund or a new piece to be sent via expedited shipment. Businesses pay heavily for this mistake as this not only damages brand image, but the business owner will have to pay out of their own pocket for the second shipment. This mistake can be easily avoided, especially if your business uses some notable shipping software since they have built-in address verification features.

9. Failure to Audit Shipping

Many new business owners are often surprised to discover that parcels are delivered late at much higher rate than they anticipated. In such cases, there is a mechanism in place that ensures some compensation for the affected business owners, but still many fail to avail this. Shipping carriers do not voluntarily offer a refund for late shipments. However, if a business owner has done proper auditing of shipments and makes a request for refund for late delivery with proof, their request will be easily met. Moreover, auditing shipping and carrier bills can help business owners to check for duplicate receipts, invoice mistakes and other shipping failures.

Final Thoughts

If you pay close attention to shipping details and avoid these common mistakes, then your business can effectively source products in such a manner that it generates comfortable profit margins. However, if you are not successful the first time around, you can always play around with different package delivery services, shipping software, and carriers to find the right combination for your business.