The jQuery library has a collection of methods built for animating and manipulating the DOM.  These effects implement styling changes to produce transitions like fading or element movement.  The full list of methods are available on the jQuery website.

jQuery also contains a nifty method, animate.  Animate allows you to make a timed transition from one style to another.  This comes is handy when other effects methods don’t quite behave or lack needed functionality.

Consider the two snippets:

1: $(‘h1′).fadeOut(1000);
2: $(‘h1′).animate({opacity:’-=1′},1000);

Both perform the same transition, and in one second, the selected element transitions to being transparent.  However, the fadeOut method has a feature that sets the element’s display attribute to none when opacity reaches zero.  This especially becomes an issue if you need the element that fades out to maintain its structure in a template.

The animate method is also capable of manipulating multiple styles in one method.  If we needed to make an element slide on the page while coming into view from being transparent, this can also be done with a single line, separating multiple style changes by a comma.

$(‘h1′).animate({opacity:’+=1′,marginLeft:’+=15px’  },1000);

Relatively and absolutely positioned elements can make use of the left/top CSS styles, but should be used to what works within your template and layout.

Animate and jQuery effect method’s all support callback functions which makes movement order easy.  The snippet below will result in the same animation, but the left margins are not animated until the transparency becomes fully visible.  These can be nested within one another to avoid using setTimeout and setInterval coding.

$(‘h1′).animate({opacity:’+=1′},1000,function(){
$(this).animate({marginLeft:’+=15px’},1000);
});

During recent projects, integrating fonts for the right look and feel has shown to be troublesome for Internet Explorer. After implementing a font file into a CSS file, Internet Explorer 9 would provide the following error and not show the embedded font:

CSS3114
@font-face failed OpenType embedding permission check. Permission must be Installable.

This error is listed on MSDN and states that:

 The font-face does not have permissions to install with the current webpage.

And to fix:

Obtain the correct permission or licenses for embedding the font.

The only help this really provided was narrowing my search results.  Luckily, I found a nifty program that can be run from the command prompt to correct this error in IE9.  Be aware however, as stated on the publishers download page:

Changing the embedding value does not give you license to distribute the fonts. You should only change this setting if you are the font creator, or something like that. Use at your own risk.

Download embed.exe

Program Useage:

1. Download the executable and move to the desktop with a copy of the font file.
   (Alternatively, you can drop this in your Windows/system32 directory)
2. Pull up a command prompt window.
3. Navigate to the desktop within the prompt
4. Execute by typing: embed.exe fontfilename.ttf
5. Viola, your font should be ready to use in IE9.

More on Font Embedding from MSDN »

The Beacon Staff wrote nearly 200 blog posts in 2011!  So we are highlighting our Top 10 and want your help to identify the “Beacon Blog Post of the Year”.  Please check them out and leave a comment telling us which one you enjoyed most and why.  Some of these were actually written in 2010, but received enough views in 2011 to make the Top 10 List.

Top 10 Posts by Views

1. Slick Pop-up Video Player using GreyBox & Flowplayer by Thomas Brinegar

2. Google Analytics Event Tracking in a Template File by Eric Westerman

3. Google AI – Artificial Intelligence is the future of Google Search by Jeff Pickle

4. Robots.txt “Disallow” and “No Index” Meta Tag: What ‘s the difference? by Andrea Cole

5. Best PPC Call to Action Keywords by Jeff Pickle

6. Instant Messaging in the Workplace by Annette Fowler

7. XSL for Formatting pubDate from RSS feed by Tiffany May

8. TOMS Designs More Than Cool Shoes by Rick Boccard

9. 100 Call to Action Keywords for ad campaigns by Jeff Pickle

10. Facebook Developer Tools – URL Linter by Tiffany May

As a software development project manager at Beacon, I’m also proud to say that I’m both an NPR and data geek, so I was elated to hear a story this week that united all of my passions:  Google Searches Are A Window Into Our Culture.  The tool “Google Correlate” is actually a fascinating window into how people are searching for not only one specific term, but an entire web of other related (or maybe not-so-related) terms.

The political example given in the story was somewhat predicable (Democrats– veggie-loving, fitness buffs; Republicans– meat-loving, weight-loss program participants), but my own searches turned up some interesting results on Google Correlate.  I am just starting work on a new website redesign for a well-known business school and was wondering what kind of associations I’d find if using terms related to that school (thinking I might be able to use this information with regard to site design and features).  Here’s the terms I tried:

• business school– while many of the U.S.’s top business schools are listed, I was surprised to see the appearance of “art schools” and “art colleges” as correlating terms.  Wonder if my client has considered cross-promotion with this demographic?  Could a more “artsy” site design have benefits in this area?
• management school– like the “art” association listed above, I was suprized to find “hospital association” as a correlation with “management school.”  Perhaps another marketing opportunity here?  Would a site feature that included possible hospital careers be helpful to these visitors?
• mba school– oddly, this was a much more common search term in Utah than any other state.  Not sure how we can leverage this, but I’m sure we’ll bat it around for a while!

Also, don’t miss the comic book on the Google Correlate site – fun!  The most important point that the comic book emphasizes and bears repeating here– “Remember:  Correlation is not causation.”  Google doesn’t attempt to explain the correlation between terms, just show it to us in a manner for us to interpret and leverage.  Happy correlating!

Flash is officially not being supported on mobile devices anymore. It’s a good thing for performance and battery life. It also opens up the door for more interesting ways of introducing techniques and effects to your audience.

So, that brings up the question on what people and clients ask. Should we update our site to be mobile friendly? In a short answer yes for the best reach of audience. The amount of people using mobile devices is growing and continues to do so at an astounding rate.

Here at Beacon, we have a team of professionals that can update your Flash site or Flash elements with cross browser and mobile device friendly code. Your site will feel more refined and can even be implemented to work with our great Cascade Server (CMS system). Staying ahead of the curve and keeping your site fresh will keep the visitors and customers coming back for more.

I had a hard time finding an answer for this today and thought I’d share the solution. Please see the original article I found that helped me link to original article. My code did turn out to be slightly different given the positioning of the Google +1 in the footer of the Beacon main site but it was based on the code in Danny’s article.


First I needed to find an icon like the one requested. Here are a few more options on where to find good icons:

• IconFinder – I was unable to use the version from here but they do have others
• wplift – I was able to find a good version here
• Designrfix – I found this after but it looked like a good selection

Now on to the code. I used Googles customize your +1 button to get the google parts of the code I needed.

I first placed this part of the code in the head of the document

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Then I took Danny’s HTML code and changed it up a bit to include my unique URL and placed it where I wanted it on the HTML page

<div class="googleplus">
<div class="googlehider">
<div class="g-plusone" data-annotation="none" data-href="https://plus.google.com/u/0/b/112352004720495408285/"></div>
</div>
<img src="images/googleplus.png" class="mygoogle" />
</div>

Lastly I took Danny’s CSS code and also changed it up a bit so that it worked in the footer of the main Beacon site.

.googleplus {position: relative; display:block; float:left; padding-right:5px; width: 35px; height: 35px;}
.googlehider {opacity:0; height:35px; width:35px; position:absolute; top:0; left:0; z-index:3; visibility: hidden;}
.mygoogle {position:absolute; top:0; left:0; z-index:2; top:1px;}

Here at beacon I am a Developer. I have always wanted to be some type of artist but as I grew up found that my technical and problem solving skills for code and programming well outweighed my artist skills. I do however still like to try and learn as much as I can and see if I can get better with practice. I was really struggling with doing things you would normally do in Photoshop in Illustrator. Not that I know what to add or where to add it but I was failing before I even reached that point because I didn’t know how to. Our new Designer Jennifer Calogero sent me a link to some tutorials that really helped me learn to accomplish these things. Seeing them and actually accomplishing them are two very different things and I think for me I actually have to do it step by step to get a feel for what I am doing. After the tutorials I definitely feel more confident in my ability to add some of these small but very important details in illustrator. I have attached my end product after playing around with a few of the items and I encourage anyone learning Illustrator to actually go do some of these tutorials as well.

The article is located at: http://vectips.com/tutorials/creating-seamless-textures/

You can download my ai file by clicking here. Please note I played around with settings after doing each tutorial so the results are not exact.

According to new research from HTTP Archive, which regularly scans the internet’s most popular destinations, the average size of a single web page is now 965 kilobytes (KB), up more than 30% from last year’s average of 702KB.

This rapid growth is fairly normal for the internet — the average web page was 14KB in 1995, 93KB by 2003, and 300KB in 2008 — but by burrowing a little deeper into HTTP Archive’s recent data, we can discern some interesting trends. Between 2010 and 2011, the average amount of Flash content downloaded stayed exactly the same — 90KB — but JavaScript experienced massive growth from 113KB to 172KB. The amount of HTML, CSS, and images on websites also showed a significant increase year over year.

There is absolutely no doubt that these trends are attributable to the death throes of Flash and the white knight, if-only-the-internet-was-a-damsel-in-distress emergence of HTML5 and its open web cohorts. It’s curious that the amount of Flash content hasn’t shrunk, though, which suggests that this year’s 33% increase in web page size is mostly down to a significant increase in website complexity and functionality, and not some kind of wholesale shift from Flash to HTML5.

The only real problem with the data is that HTTP Archive only began operating in October 2010 — and so there’s no way to find out the long time growth (or decline) of Flash. HTTP Archive, incidentally, constantly scans 16,000 websites — a list that was cobbled together from sources like Alexa and Fortune 500 — and records the total data downloaded, the number of individual HTTP requests required to fetch all of the content, the size of the JavaScript, Flash, and image content, and a bunch of other metrics. If you’re wondering about the odd spike towards the end, that’s where HTTP Archive increased its sample size from 16,000 to 50,000 — so presumably, the web’s top sites are smaller (or better written?) than the dregs.

So, what’s the actual significance of web pages that are almost 1MB in size? Not a whole lot, when you consider that caching will reduce that amount by 70 or 80% — and the more important statistic, at least as far as latency and rendering times are concerned, “total requests,” only increased from 74 to 85 over the last year (and again, caching will reduce that by 70% or more). One valid concern is mobile 3G and 4G surfers, where carrier data caps certainly haven’t increased by 33% over the last year — but even then, many popular sites have mobile versions that use significantly less than 1MB, and again, caching!

We would now expect the size of web pages to slow down a little, too. 2011 will have been the year in which many developers switched from Flash (or other technologies) to HTML5, and it’s unlikely that their first attempts will have been all that optimized. In 2012, JavaScript libraries will be refined, and cleaner ways of using CSS and HTML will be popularized. Even so, expect more mobile offerings that compress data, like Amazon Silk and Opera Mobile, to emerge as well.

“Nothing to Excess” -carved into the front of the temple at Delphi.

Without getting too geeky, the golden mean or golden ratio is simply a mathematical formula that dictates proportions that are found throughout the natural world and believed to be the foundation of what we find to be aesthetically pleasing. Many artists, sculptors and architects since before the Renaissance have proportioned their works to approximate the golden ratio. From the leaf of a fern spiral and its relationship to the other leaves on that same curved stem, to the arms of a spiral galaxy, these proportions can be found everywhere.

Thinking Out of the Box

In web design we are often limited by the use of boxes or box shaped areas that become containers for information, but that does not mean that the placement and proportions of these boxes can not utilize the mathematics that so greatly influence the harmony and balance of organic shapes. The functional structure of data is the king of everything in web design, but all of the header, sidebar, footer and main content areas can be laid out in a way the embraces the golden mean and detailed with graphics that have some semblance of the visually captivating, organic detailing of the natural world.

Symmetry Can be Boring

There is a time a place for symmetrical design. Sometimes it is the best way to wrangle in unruly content (an even number of columns in uniform widths, for example), but often times it is not the most visually interesting solution. A layout that is close to symmetrical (in that is doesn’t have a huge chunk of content on one side and then a slim cramped sidebar but instead maintains proportions closer to the golden ratio) will channel content in a way the provides a visual hierarchy. It is important that is not too out of balance yet is also not purely symmetrical.

Finding a Happy Medium

Creating captivating visuals doesn’t have to mean sacrificing functionality, and a data heavy site with a great deal of functionally does not necessarily have to be visually boring in order to be usable. With proper planning, a happy medium can be established that communicates information with a efficient hierarchy that allows the user to effectively engage with the content. You do not want overwhelmed users having to struggle to sort information on their own, but at the same time you do not want to bore them or not provide enough information. Nothing to excess; everything in moderation.

If you are looking for a design resource that helps you implement the golden mean into layouts check out the ever-famous 960 grid system – complete with Photoshop plugins.

I am going to preface this post with something that I really should not have to say:  You need to be tracking your web-based inbound phone calls.  If you are not aware of how many calls/leads your website is generating for you, then you have no idea of the true ROI of your website.  Phone tracking is best done by creating a unique number that is available only on the website – this way you know that any calls to that specific number were generated by users who viewed the website.  You do not need a call center or a huge phone plan to do this.  You can get these unique numbers (along with increased tracking features like volume, caller length, and even caller ID) from great companies like IfByPhone that offer these services for very affordable rates.

For most of my clients, it is also critical to track not just volume, but volume by source.  That is, how many calls came from organic, PPC, specific referrals, etc?  The best way to do this is by using dynamic phone tracking.  With dynamic phone tracking, different numbers are displayed to different web visitors depending on the source of each user.  Some companies, like IfByPhone, offer this code as part of their services (others do not), but most have limitations as to how many numbers you can dynamically track on a page at one time.  This does not work for me, as I often need to track local & 1-800 numbers for every page.

No worries, I have written a bit of JavaScript that solves this problem.

First, a few caveats:

1) You must have at least one trackable phone number available to you.

2) This script only works with tagged links.  That means you have to put your parameter on the inbound link to your site.

3) This script is session based.  This means that user will only see this number the first time they come the source (i.e. PPC) you want to track.  If they come from a different source the next time (i.e. direct or organic), they will not see the same dynamically generated number that they did the first time.

4) This script will not work if the user goes to a page through a redirect.

Please note that items #2 thru #4 are not impossible to alter, just a little more complicated than the script I am giving you here.  Feel free to contact Beacon or myself with any questions if you would like to delve deeper.  If you doNow, without further ado…

Begin by placing the following JavaScript in either as a script in your HTML head or as a referenced external .js file.

var current_page = document.URL;
var sourceConfirm = current_page.indexOf(“?source-track”);

var phone_num=”XXX-XXX-XXXX”;
if (paidConfirm != -1)
{
document.cookie = “Track this Source”;
}
else
{
}

var cookieCheck=document.cookie.indexOf(“Track this Source”);

if (cookieCheck != -1)
{
phone_num=”YYY-YYY-YYYY”;
}
else
{
}

Replace “?source-track” with whatever parameter you are using to tag the inbound link with.  Replace XXX-XXX-XXXX with your default number.   Replace YYY-YYY-YYYY with the variable number that you would like tracked.

Next, where you want the number to display, place:

<script>phone_num</script>

And that is it.  Your default number will display for all users except for those who come to the site via the tagged link.

Merry Christmas!

- EW, follow me on twitter @ejwestksu