“The change will decrease rankings for sites that we believe are violating Google’s existing quality guidelines. We’ve always targeted webspam in our rankings, and this algorithm represents another improvement in our efforts to reduce webspam and promote high quality content. While we can’t divulge specific signals because we don’t want to give people a way to game our search results and worsen the experience for users, our advice for webmasters is to focus on creating high quality sites that create a good user experience and employ white hat SEO methods instead of engaging in aggressive webspam tactics.

In short, here are simple actions you need to take to ensure your site is rewarded and not penalized:

1. Content is King – create compelling and relevant content on your site.
2. Play Fair – don’t use questionable tactics like keyword stuffing or linking schemes.

The easiest way to tell if Penguin has affected your website is by monitoring the volume of traffic from Google Organic Search.  Has it increased or decreased?  If your site traffic has decreased, you may want to consider an audit. Envano offers Search Engine audits which identify what you can do to improve performance including keyphrase usage, website architecture, broken links and organic rankings.

10. Customizable “About” Box: prominent placement allows admins to place custom content (we recommend a tagline and a website link)

9.  Highlight a Post: stretches a post across the entire length of your page (great for milestones in your organization’s or industry’s history)

8.  Pin a Post: locks a significant post to the top of your post listing (use for promotions or significant announcements)

7.  Admin Panel: integrates important information into a dashboard view

6.  Default Landing Page Setting: unfortunately….this functionality does not exist anymore in the new Timeline layout

5.  Tab Width Increases: allowing more real estate for custom promotions

4.  Private Messaging:  unfortunately, page admins can only send messages to fans who’ve contacted your Page

3.  New Tab Location and…2. Custom Tab Icons: higher visibility and customization for your tabs

And the #1 change to Facebook Timelines for Brands….Custom Cover Photo & Badge!  Much more real estate to work with, providing a very dynamic landing image for your fan page.

Honorable mention – these changes will automatically occur on March 30th, so update your pages and convert now!

What I am interested in is the technology behind the budget.

First let’s applaud the fact that they released a mobile friendly version. The technology used behind this mobile version is an application called jQuery Mobile. This is what makes it act app like.

It was a good choice. One of the primary design goals behind jQuery Mobile is that it provides a consistent interface across a wide range of mobile.

Now for the problems.

First, they used a very old version of jQuery Mobile. A huge performance boost could have been gained by utilizing a more recent version. Since the budget just got released and they are not doing anything complicated, by that I mean they are using a stock theme and user interface elements, so upgrading would have been a matter of a couple of hours and a few more in testing.

While we are discussing the user interface, let’s point out that putting the navigation at the bottom is a huge user experience issue on mobile devices, especially handsets. Since the toolbar is not positioned fixed to the bottom of the viewport, it scrolls with the content. We know how long winded politicians can get. I don’t want to scroll that far to navigate back to the home page. A better choice would be to have a top navigation, positioned fixed so the content scrolls under it, with a bottom navigation for those devices that do not support position fixed.

Finally, and the most grievous offense, is the QR code in the online content.

QR codes have a place, and when implemented well can be useful to a certain audience, but the way they have this implemented makes no sense. I can’t even provide you a URL that takes you to the correct spot, because those are not implemented correctly either. If you go to the link titled “The Budget Message of The President” you will find the offending QR code.

QR codes are great for printed material. So only have it show if someone prints the page. Don’t take up precious screen space with a QR code that can not be used in this context.

A little bit of mobile experience by the developers that implemented this would have made for a much better experience, despite the budget numbers.

Budget of the U.S. Government

Skitch

Skitch is a screenshot tool that allows you to capture, edit, and annotate images from anywhere on the web.  Here’s what I like:

• Easily accessed from a browser plug-in
• Quick editing tools available within the Skitch pop-up editor
• Click & Drag to save or send, especially in Gmail or Google Docs
• Owned by and integrates easily with Evernote
• Mobile version that supports multiple devices
• And lastly…It’s FREE!

Smartsheet

Smartsheet is a cloud-based light-to-medium project management tool that is like a spreadsheet on steroids. Here’s what I like:

• The user interface is intuitive and has adaptable templates
• Gantt Charting feature produces client-ready timelines
• Share projects with others online or export in a number of formats
• Can include line-item comments and attachments such as documents
• Integrates with Gmail, Google Docs, and Box.com
• Mobile versions for iPhone, Android and Blackberry
• Free 30 day trial!

Google+ Hangouts

Google Hangouts is the newest tool in our interactive toolbox.  It is a video chat tool that is integrated with Google+ and is great for communicating with co-workers who work remotely or in a separate building or floor.  Here’s what I like:

• Can see all your hangout buddies in preview thumbnails on the dashboard
• Main viewer automagically switches to the person who is talking
• Easily share and view screens with others in the hangout
• Share and watch YouTube videos and use Group Chat
• “Hangouts With Extras” integrates Google Docs and has shared notes/sketchpad

I am not here to tell you whether or not to meet via a mobile technology or meet face-to-face but rather to change your focus on how to make your meetings effective. Here are some general principles to remember whether it is a virtual or face-to-face meeting.

• Define the purpose of your meeting.  What is the result you want from this meeting?
• Make sure every meeting has a leader who is responsible for the success of the meeting
• Provide an agenda to all attendees
• Prepare!  Every participant should prepare for the meeting
• Focus, there should be no multi-tasking during the meeting

At the end of the day, we all have different opinions and preferences regarding which method to use when meeting but if the meeting has achieved the goal of the meeting and is effective, that is defined as success.

Here are highlights of the most important updates:

• Choosing text from page content rather than from headers or menus. Text Text Text!
• De-duplicating boilerplate link anchors – Links in headers, footers & blog rolls will not help your rankings and only be used once.
• Fresher, more recent results – Google will provide preference to newer time oriented content. Thus, blog and social media content needs more frequent updating.
• Better position for results related to specified date ranges – sites that list current events and up-to-date content will get preferential treatment.
• Official page detection – Official websites will rank higher, and industry leaders will get better placement in search results.

How does this affect companies and search results? According to Goggle, these changes will improve the search quality. Companies need to make sure they have high-quality, rich content on their website. They must also enhance their content regularly; inclusive of newly published pages, blog posts and social media updates.

Change, change and more change, which is why having Envano in your brand’s court is so valuable!

Making First Impressions

Let’s compare the Mini Cooper and Aston Martin door handles.

Both cars have unique door handles that provide experiences unlike those of other cars. The Mini Cooper handle has familiar affordances, or action possibilities, that imply the manner in which the handle should be used. Though the handle resembles those of other cars, it’s operation is unique. Mini does not take into account previously learned behaviors or the lack of focus most people have when using door handles. The handle must be squeezed close to the side with the keyhole before it can be pulled open. If you are to be a passenger in a Mini you may pull the handle incorrectly, then tell the driver it is locked before being told how to use the handle. This may leave you feeling annoyed or embarrassed depending on your circumstances.

Let’s contrast that with the door handle of an Aston Martin Vantage. The door handle of the Aston Martin lays flush with the surface of the car and at first glance has no obvious affordances. A subtle cutout that resembles an equal sign provides a visual cue as to an area where an action could take place. The handle is intimidating and not immediately user friendly. It seems that a user would become even more annoyed with this design than that of the Mini’s. The difference is that the Aston Martin door handle is like a secret handshake that when known allows you access to a $120,000+ sports car. The reward for your inconvenience more than makes up for any frustration encountered.

While the clever elegance of the Aston Martin handle design combined with premium materials creates an experience that turns a usability challenge into a positive brand experience, the Mini handle is more often viewed as unnecessarily difficult.

Making a good first impression also holds true for virtual doorways. Animated web intros that force a visitor to watch a bunch of bandwidth clogging stuff moving around their screen before allowing them access to the information they came to the site for sends a clear message to the visitor that their needs are not important. Another common trait of the narcissistic brand is the misuse of transparent walking out video. Having a little virtual person seemingly walk out onto your screen can be very attractive to business owners. It becomes a problem when the sole intent of the walking out video is to interrupt the visitor in order to push product or brand messaging onto the unsuspecting person. Think of it like someone walking into a business. They stroll in, look around a bit, and then some guy jumps out from behind a plant and starts loudly telling you about their products and services while completely ignoring your attempts to make him stop. Successful brands understand their customers and treat them respectfully. Is your web site a tool for connecting your customers to what they want, or is it focused on getting what you want?

It’s Not About You!

Whether you have one thing to sell or thousands, the manner in which you present what you have to offer your audience has a big impact on what people think of your brand. Clean, clear navigation is a great starting point.

GoDaddy.com is a great example of the self-centered brand. They flood all the available screen space with exclaimed offers and unnecessary information. Not only does GoDaddy want you to buy everything they sell all at once, they preselect a product that they would like you to buy. If you are confused about the mess of information on the page, don’t expect them to go out of their way to help. They don’t offer live chat and they won’t even do you the courtesy of giving you a toll free number to call. If you are wondering where in the site the screenshot above was taken, you would be wrong if you guessed that you were in the “My Account” section. The My Account section appears to be active yet it is actually a screenshot of the “Hosting” page. The dark horizontal banner below the main green nav bar actually serves as the page heading, yet it resembles a banner ad.

In contrast, Host Monster focuses on what the customer wants. They list their core services with the sale price and place a big button in the middle of the page with a clear call to action. Live chat and a toll free number are easy to find as well as the ability to demo the product before buying. Relaxing colors are used to group content making the information easier to comprehend. Host Monster’s site performs well by following many of the conventional rules of good web design. Brands like Host Monster need to demonstrate that their web services will be easy to use and they will have help when needed. So what if you have a brand that wants to break the rules and shake things up?

It is possible to break free from conventions and stand out from your competition. The risks of customer backlash are higher, but when done successfully that unique attribute can become a trademark that defines your company. Google is a good example of a company who has managed to do this successfully. Google took a risk by deciding to alter their logo to commemorate people and events. Very few companies have the brand recognition necessary to allow for such logo manipulation without causing confusion.

Naming Your Navigation

Whenever possible name your navigation clearly and concisely. It is a good rule of thumb to name links according to the action that will occur or the place the user will be taken to. Try and avoid naming navigation with internal company jargon or the overly generic “Click Here!”. Companies like MOO, do a very good job of clearly labeling navigation.

MOO interjects it’s brand personality with subtle playful surprises like a small animation that occurs when you hover over their logo in the footer. This friendly and somewhat silly brand carries the persona into every aspect of interacting with the company.

Even MOO’s confirmation emails break from boring conventions.

Google’s “I’m Feeling Lucky” button was one of the first big corporations that I can think of that took a risk in adding a little more fun to their product. It was clever and relevant at the time of it’s inception but as of late it has been rendered almost useless by the addition of Google Instant. The button that was once a reflection of Google’s nimble playful side is now a symbol of it’s clumsy corporate side.

It is possible to gain stronger relationships with a group of customers by intentionally bucking the system and stirring things up. Starbucks is a brand that decided to defy the popular convention through the naming their drink sizes. Their sizes from smallest to largest are: Short, Tall, Grande, Venti, and Trenta. This renaming makes it difficult for someone new to the brand to walk in and order what they had been accustomed to at other coffee shops. Ordering a “Small” places you squarely in the position of brand outsider. Depending on your personality, this break from convention can annoy you or make you feel as though you have been initiated into an elite group. The price of a Starbucks coffee is on the high end of chain stores, but not quite high enough to be considered excessive. This price point acts as a divider giving some people a feeling of brand intimacy while giving others just another reason to hate Starbucks.

The Velvet Rope

Locking out features or access can create excitement. Because I love cars I’ll revisit them again here. The Bugatti Veyron has the distinction of being the world’s fastest production road car. The price tag alone is enough to keep most people away at $1.3 million, but if that wasn’t enough exclusivity for you, Bugatti locks up the top speed of the car. In order to reach the Veyron’s top speed of 250+ mph a special key is required to physically unlock the speed limiter which is set to 200 mph. It makes race tracks and air strips irresistible to rich adrenaline junkies.

Many retailers have been offering special pricing to members only. Box stores like Sam’s Club use ID cards and security checkpoints to expand upon this feeling of having access to prices and products that everyone would love to have. They want you to believe that nonmembers are trying to sneak in to take advantage of the great deals. This model still is in practice today, but has been modified somewhat for eCommerce.

Fab.com uses a login screen to stop nonmembers from entering their store.

Exclusivity does not need to be an all or nothing tactic. It can be as simple as withholding the disclosure of a sale price until the item is added to the cart. Promo codes, emails, text messages, and even Facebook promotions that require the user to become a Fan before gaining access to contest entry forms, all work to entice users to go where others are not allowed. Be careful though, don’t password protect something lame or hide prices that aren’t very enticing or you will find this tactic will backfire. You don’t want to be labeled as a company that is simply interested in gathering people’s personal information without giving something of value in return.

Handling Failure

Failure will happen. Any system with multiple dependencies and a broad spectrum of users interacting with it is bound to experience failure at some point. It is how you handle those failures that are defining moments for a brand. During Twitter’s growth users became very familiar with the Twitter fail whale. The fail whale was a nice way to deflect some user frustration by making light of the situation.

Error pages on web sites, can be an easy way to interject your brand into all facets of your user’s experience. Simply giving some attention to a common 404 error page, can minimize frustration and provide extended usefulness to pages which are ordinarily dead ends.

If a web site or web app is created for a user with strict browser or plugin requirements, the experience for those users who fall outside those requirements can be detrimental to a brand. It is possible to identify problems and serve up alternative content to those who are not able to access all aspects of a site. “Fault-tolerance or graceful degradation is the property that enables a system (often computer-based) to continue operating properly in the event of the failure of (or one or more faults within) some of its components.” – Wikipedia. A common example is the substitution of static content for Flash animations. Not using Flash in the first place is a good strategy too – but I digress.

Are the user interfaces on your web site and mobile apps giving your customers or visitors the right impression of your business? Are you clever, or just attempting to be clever? Have you fallen victim to a fad that provides more entertainment for you than providing usefulness to your customer? Are you ready to get real about where your brand is failing and put strategies in place for overcoming them? Envano can help.

If you have been selling for awhile, you would probably agree that selling is the act of aligning your “solution” with another’s “problem”. This is easier said that done and the path to a sale, can be fraught with traps and blind alleys – equating to wasted time. The more you can learn about a prospective company in advance of your pitch, the easier you can determine if there is favorable alignment. Sales people that seek opportunities without a sales strategy are prone to wasting valuable time. So you are always seeking ways you can efficiently connect with potential customers.

We live in an age of abundant information. I remember my elementary education when “comprehension” was as important as “reading speed”. Likewise consuming content is necessary but using that information in a meaningful way can be the difference between sales success or sales mediocrity.

Sales leaders have the aptitude to not only fish where the fish are, but know where to find hungry fish. In other words, there are suspects and then there are prospects. Prospects are the ones that fit that special profile, that display compatibility with your organization and services/products. How can you tell which are a likely fit? One way is to determine how they engage with their customers. Social Media can provide a good deal of insight about a prospect. Are they active online, do they engage their customers, is there web site intriguing? It is likely that companies that place value on engaging with customers also value fresh ideas and innovation – seeking partnerships that support their mission.

Understanding Social Media is a “must have” to today’s sales professional. Knowing where to look and what to look for provides those clues that tell the sales pro which suspects can quickly become prospects – leading to increased sales. Solid research is essential to sales success and using social media can turn a cold call into a warm call.

So invest some time with Facebook, Google+, Twitter, Linkedin – and fill your pipeline with opportunities that you can effectively align with. More tips to follow in future posts.

CSS Border Art

One of the techniques used to reduce the number of images on a page is to use CSS borders. Borders can be used to create shapes such as triangles of varying degrees rather than using small background images.

Calendar Date

Border art was used in the blog section of the site to give the bottom of the calendar dates a bottom-angled look. The top image illustrates the “invisible” borders by using red, orange and yellow borders. The image below it is the result when the borders are set to the same color.

Here is the simplified version of the CSS used to create this effect. By setting the border width and color, many different types of triangles can be created.


.calendar:after
{
border-width: 23px;
border-color: #e5e5e5 #fff #fff #fff;
border-style: solid;
...continued
}


More Button

The “read on” buttons used on the home, services and blog pages also used border art to create their angled effect. The red, orange and yellow colors illustrate the invisible borders that are set to the same matching color in the final rendition.

This effect was created by creating a fake element in CSS and positioning it after the element to the left.


.more:after
{
border-width: 12px;
border-style: solid;
border-color: #fff #fff #fff #5a2d5b;
...continued
}


Ribbon

The ribbons shown on the home page and work section also use CSS border art to accomplish their effect. There is a total of four separate elements positioned to the right and left. The CSS for this was much more complicated than the previous examples.

Folded Corners

The folder corners effect on the home page uses a simple border to achieve this effect. This gives the illusion that the box on the page has a folder-over corner.

Below is the CSS used to do this.


.box-folded .border
{
border-width: 13px 0px 0px 13px;
border-style: solid;
border-color: #fff #fff #fff #2a4b09;
...continued
}


3D Box Effect

All of the social media boxes on the home page use four distinct elements to achieve their look. Depending on what direction the 3d effect should be pointed, different borders are turned on and off.

Below is a simplified version of the CSS used to create this effect.


.top-right .top-right-border
{
border-left: 12px solid #351A38;
border-top: 12px solid #fff;
...continued
}


Advantages To Using Border Art

While reduced page size is one advantage to using CSS and border art there is another advantage. Because the color, size and angle is controlled in the CSS file, should any of these properties need to be modified, a developer can update them without needing the source mockup file (PSD). The makes maintenance easier and faster saving clients money and making end-users happy with the decreased page load time.

Why?

When considering a Server-side language many think of the popular and common ones like PHP, Perl, or .NET, however, a new alternative has risen in popularity that allows the execution of JavaScript on the server-side and utilizes Google’s V8 JavaScript Engine. Essentially, it is a set of libraries on top of Google’s V8 and It is named node.js.

The most intriguing feature of Node is in how it handles I/O threads. Their site states, “Node will show much better memory efficiency under high-loads than systems which allocate 2MB thread stacks for each connection.” The result of this is that the server is less likely to freeze up or hang under high-loads like it might with most of the common server-side scripting languages. This means that even novice programmers don’t need to worry about holding up the I/O.

With it’s unique I/O thread handling, Node will never have to pause or stop and wait for a process. If there is a setTimeout command, Node will just move past it and execute the other commands while the code in the setTimeout command is waiting to execute. For example the following code in Node:


setTimeout(function() {
console.log("world");
}, 2000)
console.log("hello");

Will have the same results as the following code in PHP:

echo “hello”;
sleep(2000);
echo “world”;

Notice the placement of the “hello” and “world” text in the Node JavaScript vs the PHP file. This is a very simplistic example of how Node can handle threads more efficiently which in turn means it can handle heavier loads and produce faster results.

Though Node is not DOM driven as it is not processed in the browser, it has a similar process object that is at the core of it’s functionality. This process object is global and can be used to access vital functions to Node. The developers of Node also took special care to name their functions similar to those of DOM driven JavaScript so the transition for a front-end JavaScript developer to Node’s process driven javascript is easier.

Installation

Node is ridiculously easy to install and comes with package installers for Windows and OSX environments and can be downloaded here.

Setup

The basic server setup of Node may be difficult to comprehend at first as the developer has to build some of the elements that Apache or IIS web servers have at their disposal out of the box. However, by having to do this, the server can be optimized to containing just the functions and elements that the developer needs without any extra bloat, this can contribute to speed and performance.

Setting up the initial web server is pretty painless and there is a good example setup on node.js’s site. Here is the code for the initial “Hello World” server:

var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(1337, "127.0.0.1");
console.log('Server running at http://127.0.0.1:1337/');

An important piece here is the .listen  command. This tells the node server what port to listen on (in our case 1337) as well as what IP to listen on (127.0.0.1). To start the server on the node above, navigate to the directory the node file is in and use the “node” command to run it, this should output something similar to below:

-> node /path/to/node/script.js
-> Server running at http://127.0.0.1:1337/

Now if you type the IP in above in your browser, you should see “Hello World” text displayed on the screen.

Basic Tutorial

Next, let’s setup some basic routing and a theme using a combination of Tom Crinson’s “A Gentle Introduction to Node.js” tutorial and Rob Searles’ “NodeJS Tutorial”. To start out with this, you will need to install the theme-ing tool mustache.js to your node server directory:

git clone https://github.com/janl/mustache.js/

Before you get theme-ing, a couple of changes are necessary. First, rename the folder from “mustache.js” to “mustache”. Second, as stated in Tom Crinson’s tutorial, you will have to open /mustache/mustache.js and change the following:

var Mustache = function() {

TO

Mustache = function() {

After the above is complete, create a node server file at the top level of your working directory and place the following code in it:

var sys = require('sys'),
fs = require('fs'),
Url = require('url'),
http = require('http'),
querystring = require('querystring');
require('./mustache/mustache');
//Step 2 code here
http.createServer(function (req, res) {
var url_parts = Url.parse(req.url);
var html = '';
switch(url_parts.pathname) {
case '/':
html = router['/'](req);
break;
case '/addTime':
html = router['/addTime'](req);
break;
default:
display_404(url_parts.pathname, req, res);
}
res.end(html);
function display_404(url, req, res) {
res.writeHead(404, {'Content-Type': 'text/html'});
res.write("<h1>404 Not Found</h1>");
res.end("The page you were looking for: "+url+" can not be found");
}
}).listen(8000);

This sets us up for loading a mustache template as well as completing some simple routing actions. Make sure you don’t forget the display_404 function, if this is missing the server may error out looking for a resource like the favicon.ico file.

To finalize our script, we will setup the router variable as well as the action variables and mustache.js templates. Place the code below where the comment states “Step 2 code here”:

var html_template = "<html><head><title>{{title}}</title></head><body>{{{content}}}</body></html>";
var form = function() {return "derp<div id='container'> \
<form method='post' action='/addTime'> \
<ul> \
<li> \
<label for='element_1'></label> \
<div> <input name='activity' type='text' value=''/> </div> \
</li> \
<li> \
<input type='submit' name='submit' value='Submit'/> \
</li> \
</ul> \
</form> \
</div>"};
var index_view = { title : "Time", content : form };
var add_time_view = { title : "Time", content : "Success" };
var indexAction = function(req){
return Mustache.to_html(html_template, index_view);
};
var addTimeAction = function(req){
var formData = null;
req.addListener('data', function (post) {
formData = querystring.parse(post.toString());
});
fs.open("timesheet.txt", "a", 0666, function(er, fd){
var timeStamp = Math.round(new Date().getTime() / 1000);
fs.write(fd, timeStamp+':'+formData['activity']+"\n", null);
});
return Mustache.to_html(html_template, add_time_view);
};
var router = { "/" : indexAction, "/addTime" : addTimeAction };

Last, create a text file in your node server directory named timesheet.txt. Now Navigate to http://localhost:8000 and enjoy!

James Fuller also has a great more in depth tutorial on setting up a Node web server with error catching and dynamic page loading.

Closing Notes

Node is a great and powerful server-side scripting tool that has the potential to destroy the worlds of the other server-side languages. It’s speed and threading techniques outshine all of the other languages and it makes for a fairly easy language to pick up for anyone who has JavaScript front-end skills.

It may not be wildly popular yet, but that does not mean it won’t be as common as PHP or .NET in the next few years.