1stwebdesigner

---

Contests Can Create Real Engagement – A Personal Story Posted: 30 Jan 2012 01:00 PM PST Are you looking to get more people engaged and excited about your brand? Aren’t we all… Over the past 6 months I’ve been running an online contest for one of my clients. My client’s goal was to generate more activity from their Facebook community. They know that if they can get their Facebook community more engaged in their brand they can generate more sales for their products and services. Over the past 6 months we have blown away all expectations for the amount of Facebook activity the client was hoping for. Knowing that many of our readers have the same goal as my client, I wanted to share this personal story with you. In this article we will review our marketing strategy, discuss the day-to-day tasks required, and finally share the results. By the end of this case study you should have everything you need to do this too! Marketing Strategy for Generating Online Engagement With a goal of generating more online activity from my client’s Facebook community I went to work developing a sound marketing strategy that could work to achieve their goal. Here are the steps I followed: Channel Analysis – What are the best marketing channels to leverage for this program? Engagement – What type of activity do I want to see from the audience? Offer – Will an offer be needed to encourage the sort of activity that I’m looking to achieve? After running through all of the steps above, my strategy was beginning to form. I would use Facebook, blogging, and Twitter to reach my audience, communicate my message, and encourage engagement in my client’s brand. An online contest with a monthly prize drawing would serve as the strategy that I’d use to achieve my client’s goals. Contest Planning Any time you decide to implement a new marketing strategy you should take some time to plan how you will execute your new program. Here are a few questions I asked myself before implementing this new contest strategy: How will I explain the contest to my audience? How often will I promote the contest? What will my call-to-action be? What will I offer the winner? Will the winner change monthly? How will I select/notify the winner? How will I fulfill the offer? By asking yourself these questions prior to launching your contest you’re more likely to have success. Nobody wants to participate in a poorly thought out contest. Running an Online Contest Once you’ve taken time to plan out how to execute your contest, it’s time to implement it. Here’s what we did: We used our client’s blog to explain the rules for the overall contest and each new monthly contest. We published a new article at the beginning of each month explaining the rules for the monthly contest and the prize to be awarded. We decided to run the contest through Facebook since our goal was to generate more activity from my client’s Facebook community. We had our Facebook fans participate by leaving comments on our Wall Posts. We used other tools like Twitter, e-Newsletters, and in-store promotional materials to drive traffic to the contest. We came up with new contest activities each week (falling within the theme of the overall monthly contest) in order to keep engagement up throughout the month. We didn’t want someone to participate at the beginning of the month but then have no reason to keep participating throughout the month. We put it in our rules that you had to participate in one activity each week to be entered into the drawing for the prize. It took some time to get our process fully worked out, but after the first two month’s of running the contest everything was running like a well-oiled machine. Marketing a monthly contest definitely takes some time, but positive results make it worth it. Be sure to keep your contest ideas fun, and your weekly tasks simple. You don’t want to scare people off with tasks that are too difficult. Once the month is over its time to select a winner. Contest Winner Selection, Notification, and Fulfillment At the end of each monthly contest we entered everyone who participated in each of the weekly tasks into a drawing. We then selected 1 grand prize winner and 2 consolation prize winners. If you have a lot of people participating in your contest it’s important to have consolation prizes so that more than 1 person can win something. Here’s how we go about notifying the winners and fulfilling their prizes: Since the contest runs through Facebook, we use Facebook to notify winners. We leave a Wall Post on our client’s Facebook page announcing the winner and we send each winner a Facebook message. We include a little blurb about the winner in the next contests’ blog article Depending on the prize and location of the winner, we usually collect their mailing address via a Google Form that we send to all winners and then mail them their prize. We also ask our winners for a picture of them holding up the prize so that we can use it in promoting future contests. If the person lives locally we may actually ask them to meet up for a picture and to give them their prize on the spot. Contest Results So far the contest that we set up for our client has been an overwhelming success. The level of engagement by my client’s Facebook community has far exceeded our expectations. Here are some of the data points that we are tracking: Average Participation Rate: 10% of fans participate in weekly contests Facebook Business Page Growth Rate: Growing page ‘LIKES’ by 5-7% per month Facebook Page Impressions: Up 35% since starting the contest Overall the number of “LIKES” are growing steadily each month, which means we are attracting new contest participants/Facebook community members on behalf of my client. Contest participation is very high compared with an industry average of a few percent. The amount of people seeing our message has skyrocketed since starting these contests. Our labor is starting to pay off as our contest is seeing increasing traffic from Facebook to their website and online sales are increasing. Should I Run an Online Contest? Depending on your goals I would recommend that the majority of website owners at least consider running an online contest. Contests can be a great way to engage your online community, as well as, get them to spread your message to their friends. Follow the steps that we laid out in this article and you’re sure to have success. Watch out! 1stwebdesigner will be launching contests for designers this February!

jQuery Mobile – What You Need to Know Posted: 30 Jan 2012 02:00 AM PST jQuery Mobile version 1.0 finally launched this past November. Don’t know if you heard about it, but if you are planning to do any mobile app or website development, it’s better to get started with it right now. I’m sure you’ve heard about jQuery. So, its mobile version is pretty close to what you already are used to, but with a lot of enhancements for mobile screen events (like touching instead of click, and there is no hover) and browsers (this one is tricky since there are plenty of browsers and devices out there) and capabilities (pluggable components). The crazy thing is how simple it is to initiate and build a fully working mobile site. Actually, we’ll be talking about concepts, tips, codes, and in the meantime you can build your own app, in no more than one hour. Yeah, noob to ninja in one hour, this is what you’ll get here :) So, let’s rock! jQuery Mobile’s Main Concept Cross browsing, a nightmare that was coming back Those who used to code anything between 2001 and 2008 (while < IE6 was pretty huge, and Firefox / Chrome were just the new kids on the browser block) faced the nightmare of cross-browser issues. I mean, if you think that putting a vendor prefix before CSS code is cross-browser, try to get things working well on IE5.5, IE6, Opera and Firefox without CSS / JS hacks. That, dear Padawan, was crazy. Back to 2010, mobile was getting bigger and bigger. So were the types of browsers out there. Each smart phone and tablet has its own capabilities and its own particularities. Try mixing that with touch oriented screens and a huge range of screen sizes. Sound familiar? Then, the hero arrives Credits: bizior (photo) & Rochester Oliveira (edit) jQuery Mobile comes with a huge compatibility table, with lots of devices and platforms well covered. All you’ve got to do is include their libraries, and try to stop your jaw from hitting the floor when you see the amazing features. Oh, and it’s not just about cross browsing. It also covers a lot of UI elements that are already standards out there. And if you want a little more customized look you can easily change that, without messing up functionality. Awesomeness proven, let’s code! Ok, now you know why this project is so great, let’s take a look at some of the overall effects, components, good practices and code that you may want to use. Basic structure Just to get started, let’s grab our files from jQuery’s CDN. We’ll need just 3 files: jQuery Mobile stylesheet jQuery JS jQuery Mobile JS So your code will look like: <!DOCTYPE html> <html> <head> <title>Starter page</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>Lorem ipsum</p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> </body> </html> As you may notice it uses HTML5 markup and data-* attributes to get things working. This snippet will output this (all tests done with iOS 5.0.1 @ iPod): Important note, any “traditional” jQuery call should be placed before the call for mobile framework. Basic UI components jQuery Mobile uses data-* attributes to define UI components. Actually you just saw 4 of them above. Let’s see a small list of them and their correspondent data attribute: data-role=”page” : you can set divs inside your HTML page to behave as pages. SO what we’ve done above is to create a page “home” inside our file data-role=”header”: used to mark divs as top toolbars. You can set up data-position=”fixed” as well so it’ll behave as fixed toolbar data-role=”content”: the main part of your website / app. Images, buttons, actions and all the magic happens here! data-role=”footer”: defines a toolbar at the bottom of current page. May use data-position=”fixed” too so it’ll force to stay at the bottom of the screen data-role=”button”: it’ll be useful together with elements. You may use also data-transition to define how it’ll load next page. Options: slide, slideup, slidedown, pop, fade, flip. Another cool thing is data-icon, which gives you a lot of default icons. You may also reduce its size using data-inline=”true”. data-theme=”a/b/c/d/e”: Define color scheme used for elements. Let’s wrap up all those attributes in a simple 2-page linking. Output: Second page: Code: <!DOCTYPE html> <html> <head> <title>Starter page</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="home" data-theme="b"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>Lorem ipsum</p> <p><a href="#second" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right">Second page</a></p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <div data-role="page" id="second"> <div data-role="header"> <h1>Header second page</h1> </div> <div data-role="content"> <p>I'm second page!</p> </div> <div data-role="footer"> <h4>Footer second page</h4> </div> </div> </body> </html> Navigation, Lists, Form & Dialog Components Then we have a bunch of other default components that are easily implemented with jQuery Mobile: data-role=”navbar”: Used to create menus. Then you should place a ul item with li’s and a’s (BTW, that’s the way you should create menus, always) data-role=”listview” + data-filter=”true” : Awesomely easy way to create searchable lists. Really useful! data-role=”fieldcontain”: This is a container for form elements select  data-native-menu=”false”: creates a cool select element as “floating” element instead of default select which stole half of screen area select  data-role=”slider”: Creates a “on / off” slider, useful for options pages input type=email, tel, number, url..: accepts any HTML5 data format, and adjust keyboard to better fit data type input type=range: same as before, but this one uses new HTML format and creates an actual slider, good for numbers range inputs data-rel=”dialog”: is an anchor attribute that makes target page opens as dialog box. data-add-back-btn=”true”: add this attribute to your page and you’ll have a “back” button. Cool, huh? Now we’ll edit our demo file a little bit. It’ll be 4 pages now: Home screen will have a dialog box Form elements page will use all we have mentioned List page will have a searchable list so you can try it Alert page has target content when user clicks the alert link Previews: Alert page: Form page: Lists page: <!DOCTYPE html> <html> <head> <title>Starter page - 1stWebDesigner.com</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="home" data-add-back-btn="true"> <div data-role="header"> <h1>Alert element</h1> </div> <div data-role="content"> <p><a href="#alert" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-theme="b" data-rel="dialog">Open alert</a></p> </div> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#form" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Form Elements</a></li> <li><a href="#list" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">List element</a></li> </ul> </div> </div> </div> <div data-role="page" id="form" data-add-back-btn="true"> <div data-role="header"> <h1>Form elements</h1> </div> <div data-role="content"> <div data-role="fieldcontain"> <label for="name" class="select">Choose:</label> <select id="name" name="select" data-native-menu="false"> <option value="value1">option1</option> <option value="value2">option2</option> <option value="value3">option3</option> </select> <label for="slider">Select slider:</label> <select name="slider" id="slider" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> <label for="email">Email Input:</label> <input type="email" id="email" name="email" value="" /> <label for="num">Number Input:</label> <input type="number" id="num" name="num" value="" /> </div> </div> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#home" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Home</a></li> <li><a href="#list" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">List element</a></li> </ul> </div> </div> </div> <div data-role="page" id="list" data-add-back-btn="true"> <div data-role="header"> <h1>This is a list</h1> </div> <div data-role="content"> <ul data-role="listview" data-filter="true"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Aliquam vitae leo metus, quis suscipit nulla.</li> <li>Maecenas accumsan urna sit amet justo commodo accumsan.</li> <li>Nulla vitae lacus augue, vel eleifend tellus.</li> <li>Integer at ligula turpis, at fermentum nisl.</li> <li>Nam dapibus risus at massa sagittis egestas.</li> <li>Praesent hendrerit purus vitae enim faucibus tincidunt.</li> <li>Curabitur sit amet lectus neque, id facilisis elit.</li> </ul> </div> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#home" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Home</a></li> <li><a href="#form" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Form element</a></li> </ul> </div> </div> </div> <div data-role="page" id="alert" data-add-back-btn="true"> <div data-role="header"> <h1>Alert!</h1> </div> <div data-role="content"> <p>I'm alert page!</p> </div> </div> </body> </html> Custom font embedding Probably no method will beat @font-face. So I suggest you go to Font Squirrel and generate your font files. Compress images You should do this all the time, actually. But when you are designing for the mobile world, even a few kb’s makes big difference. So save your user’s bandwidth and compress not only your code, but all your images. JPEG mini has the best compressing service I’ve ever seen, and it’s quite easy to use, you should give it a try! Remove components We talked about just a few of many jQuery Mobile’s components. So it’s more likely you won’t be using them all. The good news is that you can easily remove them, by making your own build :) Now it’s your turn? So, how are you planning to use jQuery Mobile? Have another cool tip to share? Don’t be shy and comment!

You are subscribed to email updates from 1stwebdesigner - Graphic and Web Design Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610