Gamification is exploding
Posted on October 28, 2013 by Sameera Thilakasiri
Gamification is one of the most popular, name-dropped buzzwords among marketers today. By definition, the concept is simple- by applying game mechanics to something (program, campaign etc.), you can promote users to take desired behaviours or actions. Game mechanics can come in many forms but usually involve fostering competition, rewarding users for reaching goals, adding narrative or managing user progress on leader-boards.
Gamification is exploding in the marketplace and being utilized by marketers, enterprises, schools and even governments to increase engagement and reach their goals.
So since it’s such a hot topic this year, we thought we’d arm you with some stats to drop when promoting gamification to your company, clients or that random marketer you befriend at your next networking summit. We collected these stats from top industry researchers like BI Intelligence, Gartner and M2 Research. These reports studied the effect gamification has on the everyday consumer and the predicted impact it will have on future marketing efforts.
12 SURPRISING GAMIFICATION STATS:
1. Although the term “gamification” was coined by Nick Pelling back in 2002, it didn’t gain popularity till 2010
2. More than 70% of the world’s largest 2,000 companies are expected to have deployed at least one gamified application by year-end 2014
3. The overall market for gamification tools, services, and applications is projected to be $5.5 billion by 2018
4. Consumer-driven gamification commanded more than 90% market share in 2011
5. Vendors claim that gamification can lead to a 100% to 150% pickup in engagement metrics including unique views, page views, community activities, and time on site
6. Over 2/3rds of employers consider gamification an effective strategy for encouraging their employees to improve their health
7. More than 30% of employers intend to adopt a minimum of one health-focused gamified strategy in the next year
8. 47% of vendors say their clients are looking to increase user engagement in their gamification applications
9. 80% of current gamified enterprise applications will fail to meet their objectives, due largely to poor design
10. The enterprise industry vertical already accounts for 1/4th of all gamification vendor revenues
11. 63% of American adults agree that making everyday activities more like a game would make them more fun and rewarding
12. 51% of American adults agree that if a layer of competition were added to everyday activities, they’d be more likely to keep closer watch of their behaviour in those areas
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Make @font-face Work on Android Devices and Apple Devices
Posted on January 11, 2013 by Sameera Thilakasiri
If you use FontSquirrel to generate @font-face kits you may have noticed that they abandoned the Smiley method of generating CSS in favor of newer methods like FontSpring or Mo Bulletproofer. This is great because CSS generated by FontSquirrel will now successfully render fonts in browsers on Android devices.
What if you want to update existing declarations to be Android-friendly? Instead of regenerating the entire @font-face kit, you can simply update your @font-face declarations manually to support Android devices. Here’s a code snippet to get you started:
@font-face {
font-family: 'MyFont';
src: url('MyFont.eot?') format('eot'),
url('MyFont.woff') format('woff'),
url('MyFont.ttf') format('truetype'),
url('MyFont.svg#webfontwTBKaDwa') format('svg');
font-weight: normal;
font-style: normal;
}
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: Android Devices | Apple Devices | Webfonts
Retina Display for Mobile Web
Posted on January 2, 2013 by Sameera Thilakasiri
As of late, I’ve been tasked with optimizing images for the iPhone4′s Retina Display. Retina Display has 4 times the number of pixels than previous iPhones and all other smart phone screens currently on the market. The text and graphics look amazing! This is due to the high pixel density of 326ppi.
Looking through various blogs and tutorials, I was unable to find a straight forward solution on how this is done for browser based mobile applications, NOT downloadable mobile applications. After figuring it out, I decided to post my version.
It’s actually quite easy with the use of Media Queries, CSS and simple a Photoshop procedure.
Step 1 – Images
Make two versions of the image you want to optimize for Retina Display. Make the first version as you normally would. Let’s name the first version image-mobile.png.
On the second version, double the size by opening the Image Size options in Photoshop and increasing the size by 200%. Save the file adding @2x to the name. i.e. image-mobile@2x.png
Step 2 – CSS
Define your styles and background image URL.
/* image styles */
.image-class {
width:64px;
height:12px;
background: url(/images/image-mobile.png);
background-repeat:no-repeat;
}
Step 3 – Media Queries
Use Media Queries to detect the pixel ratio, currently available on the iPhone4 and the next generation iPod Touch. It’s very important that the Media Queries go after you declare the styles and image URL. This is so the original styles can be overridden when the iPhone’s pixel ratio is detected. The most important part of this whole thing is including the background-size: property. You want to set this to the same dimensions as the original image size. In this case, it’s 64px 12px.
/* image retina display */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2) {
.image-class {
background: url(/images/image-mobile@2x.png);
background-size:64px 12px;
}
}
Basically, what we’re doing in the code above is detecting if the device has double the pixel ratio. If so, use these styles and this optimized image instead of the previous one. Setting the background-size: property will insure that the new double size image gets sized down to seamlessly fit into your interface.
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
What is retina display
Posted on November 29, 2012 by Sameera Thilakasiri
The Apple Retina display is a backlit LCD (liquid crystal display) that provides resolution levels of 220 to 326 pixels per inch. Retina displays are included in recent models of Apple’s mobile devices and the MacBook Pro notebook computer.
The Retina display includes an ambient light sensor that allows for automatic screen brightness adjustment for optimum viewing in environments ranging from darkness to sunlight. It has received mostly positive reviews, particularly the one in the third-generation iPad released in March 2012. That device’s screen has 2048 by 1536 pixels with a 9.7-inch diagonal measure, doubling the resolution for height and width from that of the iPad 2, whose screen had 1024 by 768 pixels with a 9.7-inch diagonal measure.
Apple has registered the name “Retina” as a trademark, although the displays are manufactured by LG or Samsung, depending on the particular device.
How to create retina images for your web site – good example
Optimizing Graphics for Apple’s Retina Display Using the CSS Background Size
Cross Browser Retina/High Resolution Media Queries
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Features in Internet Explorer 10 – IE10 Platform Preview-Review Features
Posted on November 15, 2012 by Sameera Thilakasiri
IE10 expands on Internet Explorer 9 functionality in regards to CSS3 support, hardware acceleration, and HTML5 support. It will be divided into two versions with different user interfaces: a new Metro app that will not support plug-ins, and a traditional desktop application that will retain plug-in support.
New CSS3 Properties
IE10 will support CSS3 gradients (W3C Draft Specification) and the following properties can be applied to element backgrounds:
-ms-linear-gradient
-ms-radial-gradient
-ms-repeating-linear-gradient
-ms-repeating-radial-gradient
Usefully, Microsoft has provided a CSS Gradient Background Maker on their Test Drive website.
If floated elements are causing you grief, IE10 will offer several alternative layouts methods:
CSS3 Flexible Box Module — or “Flexbox” (W3C Draft Specification)
CSS3 Multi-column layouts (W3C Draft Specification)
CSS3 Grid Alignment (W3C Draft Specification)
Flexbox and multi-column layouts are supported in other browsers (with vendor prefixes), so the technologies should become feasible if you’re happy to accept a downgraded appearance in IE9 and below. Assuming no other vendors beat Microsoft, IE10 will be the first browser to support Grid Alignment.
New User Agent
IE10′s new user agent string is:
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)
Mobile version
At the Windows Phone Developer Summit in June 2012, Joe Belfiore announced Windows Phone 8 due towards the end of 2012, which will include a mobile version of Internet Explorer 10 that offers four times faster JavaScript performance and two times more support for HTML 5 features. It includes Microsoft SmartScreen and supports touch in HTML5 apps
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.