Not long ago I wrote a post where I covered about the need of your QR codes pointing to an optimized web site. Here.

Optimizing your site for mobile is not a piece of cake, specially with an old running site. A post to cover that would be a bit ambiguous since it depends on many factors. However recently I had to make some adjustments to the mobile theme that Tumblr provides, here I describe the steps I had to take.

The Tumblr service

A few weeks ago I set setup a blog on Tumblr to host the Spanish version of our Flaretag and FlareCard posts.

I’m not sure I like Tumblr, there are some “features” that annoy me a lot. But that happens with almost any service, nothing is perfect.

But one thing I do like about Tumblr is that you can get a mobile optimized version of your blog by just clicking a checkbox. No plugins, no mess. You get a very simple version of your blog that is perfect for mobile devices. I have an old iPhone and that sets the threshold for my qualification of perfect, your threshold might be different.

The Tumblr iphone theme

Tumblr uses a different set of rules for styling your blog when visited from an iPhone (I know that they use the same theme for Android). Below you have two pictures of our blog with the default iPhone theme and a modified iPhone theme. You can see the original one is a bit boring and there is no logo, the tag line is broken and the video too big. Readable but nasty. So I needed to do some changes to the theme to get those things corrected.

On a mobile site you want simplicity. The changes I did are enough for me, I don’t want much more stuff there.

As you can see the changes are very small. It is up to you how much modifications you make. If you want to know the steps needed to apply the changes just read on.

Note: If you are new to HTML and CSS here’s where it gets nasty because that’s what you need to touch. It is not complex though, with the right tools.

Changing the default theme

Right. So lets try to get it done!

Step 1: Go to customize your Tumbler theme

Step 2: Create a new page called /iphone-theme

You should end up with something like the next two images. Make sure you close the Appearance sub-menu in case you cannot find the Pages option.

Make sure you select custom layout when creating the page. The big white empty area is where your customized theme will go.

Step 3: Introduce the same default theme we already have.

To pick the code go here http://bit.ly/JMG7ET and copy paste that code in the big text area you can see above. Save the page and then the theme.

Now if you go with your mobile to your Tumblr you should see it exactly the same as before. Right. As expected. We could start playing with that template right there, but I find it quite cryptic and it is not very fluent if you want to add new stuff or quickly test changes since everything takes place online pretty much.

By the way thanks to orangkucing for making that available in https://github.com/orangkucing

Step 4: Get something you can play with locally

Lets get a copy of your mobile blog to your computer so you can play with the CSS to verify your changes. To do that we need to use an extension to be able to change the user-agent our browser identifies with. We want Tumblr to believe we are using an iPhone.

You can install this extension with Chrome browser: http://bit.ly/zfHDli

After installing the extension select the right user agent. Find the extension, click on the iPhone option and select the iPhone4.

Then visit your Tumblr blog again, you should see the mobile version. Right click with your mouse and select “View Page Source”, then copy and paste that to your preferred editor. Save it with any name you want but ending with “.html”, for example “index.html”

Step 5: Start making your changes

Ok now it is time for the action. If you open that file you will find the CSS at the top and the HTML below that. You can start making modifications to that file and testing them locally! Every change you like needs to be written to the iphone-theme page we created before on Tumblr. Don’t go and copy the contents of this file as such because it wont work, you just need to introduce the small changes you make into the iphone-theme.

Depending on what you want to change you need investigate a bit around the components and styles used to be able to find the right spots. My preferred tool for doing that is using right-click on the Chrome browser and selecting “Inspect Element”. Then you can move around to see what elements and what styles are applied to them, you can also test some changes right into Chrome and then use them in your real file.

I pasted our FlareCard Tumblr iphone-theme here: http://pastebin.com/3ReijLWS

Summary

Well this post was ‘a bit’ more technical than usual. If don’t mind getting your hands dirty with HTML and CSS the steps above should guide you to get started. Step 5 is the tedious one but you can handle it!

Cheers.

In my last post How to get people to scan your QR codes I mentioned a very fundamental need of your QR codes, a call to action. In this one I will cover another very important requirement concerning QR codes, there should lead to a mobile site.

QR codes are meant for mobile.

QR codes are scanned with mobile devices, so behind a QR code there should be a mobile optimized website. If someone scans your QR code and it goes to a site that is not optimized for mobile it is very probable they’ll just leave immediately. A terrible amount of times there’s just a link to a “normal” website. I have even scanned a QR code that was taking me to a Flash site with not even a “normal” website alternative. And that was a real marketing campaign of a wine brand (goodbye Apple devices for that QR code).

Making sure the content behind your code is adapted for mobile shows the users that you care about the usability and presentation of your own content. And more important that you care about them.

Adapting your blog for mobile devices

The degree of complexity to make a site adaptable depends a lot on the site, but I’ll focus on blogs on this post.

Blog providers like Tumblr or Blogger have settings where you can select to provide a mobile adapted version automatically. If you are on WordPress you can use some plugin that helps you with the adaptation or use a responsive theme (a responsive theme will adapt the content automatically depending on the visiting device).

Here’s a couple of links to obtain more details and reviews about the options for WordPress.

• 11 ways to create a mobile friendly wordpress site (you can see a good list of plugins to adapt a WordPress site)
• Responsive wordpress themes (a large selection of responsive themes for WordPress. If you like a theme check the demo and resize your browser to see how the contents adapt accordingly, that is responsive web design in action)

Note: This blog is not optimized for mobile. I did spend a couple of hours trying different plugins and you must be ready to take some pain since their effectiveness depends on the current theme or template you are using. At least for our  blog the best option would be using a new responsive theme since the current template is heavily customized.

Regardless of your site being a blog or a traditional website there are several services that convert your site to mobile. As an example you can check http://www.howtogomo.com. It costs some money but I think they had some free period to test the results.

Responsive Web Design

The web design technique that deals with the adaptation of web content for different devices is called Responsive Web Design. If you are interested to know more about it here’s a link What is responsive design: What it is and how to use it. I think it is important for non technical persons to be aware of those basic concepts, specially if you are hiring someone to work on your site, buying a website template or website theme.

Summary

We covered two different but related topics here. The nasty pitfall of taking QR code users to non-mobile websites and some alternatives and background information if you need to optimize your site or blog to mobile.

As usually if you have concern or question regarding these topics feel free to ask.

Cheers.

This will be a very short post. The intention is to discuss an important need of your QR codes. It is a very simple thing but often does not receive the importance it deserves. This post in Spanish.

Do your QR codes have a call to action?

Think about it. How do you motivate people to scan your QR codes?

Can you imagine a web page with a button that just says “click”, with no text around explaining what the button is going to do? Very often you see QR codes placed on a website with no call to action at all, maybe waiting for some QR code freak to feel attracted to it? QR codes also deserve/need a “call to action”. Give users a reason to scan your QR codes and the possibilities will increase.

Simple solution

The solution is clear. Just make sure you place some text inviting the users to scan your QR code. As with any other “call to action” you can try different texts to see which one works best.

It is impossible to measure the effect that causes a text that does not exist, at least this way you will see the level of interest the information you present.

Cheers!

Flaretag, Inc. has launched a Real Estate Marketing Platform called RealtyGlue™. The new platform focuses on helping REALTORS® more effectively reach local customers by using mobile and social media channels.

“This is an evolution of our existing real estate platform.” – said Daniel, CEO of Flaretag – “We felt that this product needed a stronger name and focus in the Real Estate community to reflect our commitment with helping REALTORS® promote their brands.”

A REALTOR® most valuable asset is their local knowledge and presence. RealtyGlue™ gives you tools to reach the customers that matter to you, these are people that live or aspire to live in the communities you serve. Using social media and mobile channels, you can easily reach your local customers while promoting your brand and your listings.

Unlike some other listing sites, RealtyGlue™ showcases your listings and your brand without ads, other agents or any other distractions. Just your beautiful homes and YOU.

Current customers will see no change to their accounts, just a new website.

Learn more about RealtyGlue™ >>

Hi there, we recently started creating videos to present our products and to announce different features we add to our products. We have tutorial videos were the mood is instructional and videos were we use animated characters to present situations that illustrate the use of our products. Here’s a post about what we did to start making our videos.

Our requirements

We knew we wanted to give a sense of humor to our animated videos so we started looking for different alternatives.

There are a few services around that allow you to create animated videos for free or for a small amount of money. I tried some of them or watched any available video tutorials about the basic usage of the products. Several of the options were nice but finally we selected Xtranormal. I won’t mention the other options I checked since in the end it’s a question of personal preferences or must-have requirements. For example, we wanted a good text-to-speech incorporated into the selected service and Xtranormal has a quite good text-to-speech support.

It took a while to get to know their application, I created a couple of accounts to play with it and made a few questions on their support board. I got answers quite promptly from the Xtranormal guys. Really happy to get support when needed.

How much it costs

Xtranormal offers different subscriptions models and they also have a free plan. The basic idea is that you pay for your characters, scenarios, etc with “xp points”. To help you get started, you get 300 xp points for free. That is enough to pick two nice characters and a good scenario for your videos. It gives you the rights to use the characters and publish a video anywhere you want. You don’t pay for publishing a video. Since you don’t need to purchase again the same items to repeat videos with them you could make many clips with the same actors and scenario, but that could be a bit boring. If you want to extend your selection, then you can purchase more items. There are several xp bundles for you to purchase, for example with 10$ you can get 1200xp.

How to make the videos

With Xtranormal you have two ways to create a video:

• Movie Maker

With Movie Maker you can create your movies directly from your browser. It is quite handy and after picking your scenario and some characters you can start creating the video in no time. The user interface is intuitive and after playing a bit around you can get a good idea about how the process goes.

• Desktop

Desktop is an application for Windows that you can install on your computer to create the videos. This is my preffered option. You have more control over the clip and a few more features. The web app is ok but working with the desktop application makes the process easier since you get a better overview of what you are doing. As with the web based version you need your account and from the application itself you can get the items you need or even directly go to the support pages and tutorials they have.

What can the characters do

You have quite nice set of actions you can assign to the characters, they can speak, you can associate gestures to them and adjust things like duration or strength, you can make them take some positions so they don’t look so much like sticks. There’s a few tens of gestures and not so many positions but we managed anyway. You can make them look at the camera, smile, get angry, surprised, etc. With the Desktop app you can make them walk around also.

With some of the scenarios you can also place your own graphics behind. So if there’s a TV you can tell what to show there.

You can have many cameras in the setup and film from many positions, they are quite easy to control.

The selection of characters is extensive and we found the ones we liked. As per the voices they support quite a few languages but the selection is more limited there for some of the languages. We got our English and Spanish male and female voices but there was also French, Italian, Russian, Finnish, Dutch and many more.

How does it feel to make the videos

In the beginning it was a bit opaque so we had to make a test video to see where the video ends up, how you publish it and how you see your xp points going away.

So we created our first test video with the Desktop application. After creating it, you can export your video and get a copy on your hard drive. When you export your points go away (the first time) but you can export again and do any adjustments you need to adjust the results before uploading anywhere. There’s a quite nice selection of formats in which you can export. We wanted to upload the videos to youtube so we selected HTML 5 Video HD 1080P. There is also settings for aspect ratio and video size. We make some simple post-production with iMovie (Mac) so we need to convert the video to import it there. For the conversion we used Miro

Here you can see the end result of our test video. You can see that we started talking about our doubts with the application and it moved into talking about our product since it was getting funny to watch.

Click here to view the video on YouTube.

Then we created another one a bit more serious:

Click here to view the video on YouTube.

Gotchas

Making the videos is fun and easy. It doesn’t take much to get used to the application and you can start in no time. As you work you need constant testing of what you are doing so you ad a gesture and want to check how it looks, or change a line and need to hear how it sounds, etc. The biggest problem I had was the waiting times while the video needs to be regenerated, the process could be reduced by a lot if Xtranormal would optimize that part. The second video above took me maybe 14 hours. When the regeneration issue is optimized, I think it can take less than half the time I used. If you have to pay someone to create your videos that’s a very significant difference. I wrote to them and they are aware that this part needs to improved so I hope it is in some near release.

Conclusion

Xtranormal has many more features, like background sounds, character lips synchronization if using real actors for the narration, etc. We are gonna include videos in our email campaigns and keep using them to announce new features as we release them. Maybe later on we’ll find something else but so far Xtranormal is the selection for our videos. If you want to start making yours just give it a try, it is fun.

Cheers.

Here’s some useful tutorials to get started:

• Introduction to Xtranormal Desktop: http://youtu.be/mzZccidNzSo
• Marketplace and Camera Navigation: http://youtu.be/t27U3Zu9C_w
• Actors and Cameras: http://youtu.be/t27U3Zu9C_w
• Sounds, Voiceovers, Titles and Credits: http://youtu.be/juhekU9c9fw
• Pricing:https://xtranormal.zendesk.com/entries/197530-is-xtranormal-free-what-can-i-pay-for

In this video, you can learn more about FlareCard and how to use it. It will give you enough information to understand the main features of the service and get started with it in minutes.

Click here to view the video on YouTube.

Handing out your business card is not only good etiquette but it’s expected in most business situations.  It’s often the first point of contact between your brand and a new potential customer but often serves no purpose in promoting your brand or services. It’s merely a supporting element in your marketing. It won’t help you get new customers but ensures that if you’ve done some other things right, they’ll know how to get in touch with you.

However, let’s face it, in today’s digital age, we’re constantly bombarded with information. Chances are your business card is forgotten and another person offering similar services will be more recent in your prospect’s mind at the time your services are needed.

How are your current business cards helping you keep in touch and stay relevant with your customers? Chances are they aren’t helping much.

A Business card that helps you stay in touch

What we created with FlareCard is a digital companion to your business cards. It opens the door to not only your contact information but also your online profiles and activity. It gives your potential customers a better and more complete view of who you are and what you can do for them.

Our digital cards focus on two main goals:

• Improving the first meeting: By providing your new contact with information about you on different social networks, it’s easier to start a conversion around common interests or discover that you both have some common friends.
• Ensuring that you stay relevant to your contacts: Your new contact can follow your card and get brief periodic emails summarizing your online activity. For example when you write a new blog post. This allows you to raise above the noise and stay relevant to that person.

A new opportunity to connect

It’s often a good idea to follow up via email with the person you just met. We wanted you to make that connection as soon as possible after the initial meeting so that your impression is still fresh on your new connection’s mind. Our iPhone app allows you to easily send your digital card to somebody via Email or Text Message right on-the-spot.

This gives you an opportunity to remind the person how you can help them.

FlareCard is helping re-define what business cards are and how they help people meet each other. It’s a free service, you should try it out and see how it can help your next meeting.

Tom & Alice are our new friends at Flaretag. In this video Tom & Alice meet at an airport in a scene seen constantly across the world. After being approached by Alice, Tom tries to impress her and give her all possible ways to know more about him. Having failed at it, Tom learns the benefits of FlareCard for the modern business person… and then makes a fool out of himself again

Click here to view the video on YouTube.

We are very happy to announce that the FlareCard application for the iPhone is now available! With the FlareCard application you can download and use your existing cards on your phone.

A focused set of features

There was a very clear situation we wanted to cover with this first release:

Ideally you would have your FlareCard business cards on paper to effectively share them with the people you meet. That is a powerful way to tell about you and mix the traditional cards with the digital information they contain.

But we wanted to give you a way to share your cards without a physical card as well. Your FlareCard business cards are no longer just living somewhere in the Internet. Now they are living right inside your phone and when you need them you can send them by email, text message or show the QR code so it can be scanned from your phone.

If you just need to show some of your details you can show your card contents with the application. The data is stored in the phone so you don’t need to be connected to the network.

New Users

If you don’t have a FlareCard account yet don’t worry. Install the application and sign in with your Facebook account, authorize the application and it will not only create a FlareCard account for you but also create a base card automatically and download it to your phone.

Editing the cards

Because we wanted to provide this set of features soon enough you still have to edit your cards from the Facebook FlareCard application. But don’t worry the next release will allow you to modify your cards from the mobile application as well. And more things of course

So this was the topic today. We are delighted to share these news with you and we hope you are also happy.

If you have any questions or comments feel free to drop us a message!

Hi there, It’s been a while since our last post and it’s time to give you some good news!

We’re obsessed with promoting you

We are very excited to announce our latest addition to FlareCard. It is the first of a series of additions that will make FlareCard your best promotion tool, and truly the center of all your Internet activity.

We recently introduced the ability to follow cards so that your followers can be notified when things in your card change. But what if things change outside your card? For example if you publish a new post on your awesome blog?

You guessed right. Now FlareCard follows your blogs! And whenever you write a new post, your card followers are informed about it as part of the FlareCard update email.

Can you think of a better way to promote yourself and your blog? We think it rocks!

How to use it.

You don’t need to do much! Just make sure you add your blog to your FlareCard details, we take care of the complicated stuff and keep your followers up-to-date when your blog has new posts.

As you can imagine we are not stoping here. Our goal is to gradually expand on the details that you add to your FlareCard Business Card. We’ll be adding more social networks and services to fit your needs and your personality.

There will be some fine-tuning here and there but this new amazing feature is ready to be launched. So get your cards ready, start sharing them and getting followers because there’s a lot more coming!

Cheers!

P.s: We can’t wait to tell you about our the next update. Hopefully Apple won’t delay us too much