Follower Media

Refresh Your Javascript Without Refreshing Your Browser

Tue, 26 Jun 2012 16:22:07 GMT

I was so excited when I figured this bit out. I just had to share. The concept is simple, but if you have never done it before, figuring out how can be terribly frustrating. Thankfully, that is no longer the case. I hope this helps you out! Let me know if you have any questions.

var docHeadObj = document.getElementsByTagName("head")[0];
var reloadScript = document.createElement("script");
reloadScript.type = "text/javascript";
reloadScript.src = '/path/to/script/script.js';
docHeadObj.appendChild(reloadScript);

SEO Value

Fri, 27 Apr 2012 13:21:03 GMT

Our friend at SEO News, Greg Walker, was kind enough to write an article that actually makes sense. Thank you Greg. The SEO game is such a mess. Seriously, who ACTUALLY reads Twitter, Linked-In, Google +, Facebook, Pinterest, and every other social media site that you 'just have to be on' in order to get a decent ranking? If I read all of that spam, I'd never get any real work done. Sadly, I have no choice but to add to the spam in order to drive visitors to sites. It's just wrong. Ranking should be based off of two things: (1) The age of the site (2) The quality of the content. That's a vote for DMOZ, but those hacks have refused to give me a link three times now for my own business site. Their criteria is as cryptic and ridiculous as Google and Bing.

Unfortunately, we can't do anything about bad policy served up by the corporations that control the web any more than we can do something about having to choose between two candidates that are equally worthless and self serving. Actually, we could go 'Fight Club' on search engine data base servers and then stage a coup to retake our country and establish a government that is for the people's greater good rather than for the people's vote. Like that's going to happen...

I'll leave you with this quote from our friend Greg: "the fact is that if you focus on providing value in every piece of content that you produce, you'll not only write better content, but you also write better SEO content"

Click Here to read Greg's article.

Getting Hip with the jQuery Masonry Plugin

Tue, 24 Apr 2012 12:48:07 GMT

I had the opportunity recently to work with this plugin. I have to say.... I was impressed. As far as being 'hip' goes, it's on the crest of the wave. Now you can make every one of your clients look like they have their own pinterest site. Fun times! Right?

Check it out yourself. I especially like the infinite scroll bit, and the append/prepend functionality.

http://masonry.desandro.com/demos/infinite-scroll.html

cfdump and structKeyList start garage band

Sat, 14 Apr 2012 14:29:52 GMT

When Macromedia made the custom tag, cfdump, into an actual coldfusion tag, we were grateful. Well, here's something they should* add to the attributes of the tag: structKeyLoop="yes". Here's a great way to spit out a structure that's simple and easy to read. It's true... cfdump already does this, but if the structure is HUGE, the output can be daunting, and unreadable if your layout isn't accommodating.



<cfoutput>


     <cfloop list="#structKeyList(YourStructure)#" index="loopIndex">


          <h3>#loopIndex#</h3>


          <cfdump var="#YourStructure[loopIndex]#" label="YourStructure #loopIndex#" expand="no">


          <hr />


     </cfloop>


</cfoutput>

It's simple, it's easy, and IT'S USEFUL!

ColdFusion HTTP Methods

Wed, 22 Feb 2012 20:23:49 GMT

ColdFusion new 'REST' now allows us to lock down CFC methods to a particular HTTP request type (get/post). That's great if you're working on ColdFusion 10. But what do you do if you're working on an older version of ColdFusion? Well, where there is a will, there are CGI variables and the getHTTPRequestData() function. Either method may be leveraged to verify how the request to your cfm/cfc was made. Here's how you do it:

<cfoutput>
    <h3>CGI Method Output: #cgi.request_method#</h3>
    <cfset cfset thisRequest = getHTTPRequestData()>
    <h3>CodlFusion Method Output: #thisRequest.method#</h3>
</cfoutput>

Accessing the request_method variable in the cgi scope is pretty strait forward. Using the getHTTPRequestData() function is just a hiar more complex. If you dump 'thisRequest' (<cfdump var="thisRequest" expand="yes" label="getHTTPRequestData data output">), you will find that 'method' is one of the keys in the returned 'thisRequest' structure. Leveraging 'thisRequest.method' should yeild the same results as leveraging 'cgi.request_method'.

The Seven Worst Web Design Mistakes You Can Make

Tue, 27 Dec 2011 17:55:17 GMT

In my first five years as a web developer, I worked for the Department of Defense. Having to work with legacy government employees is the ultimate crash course in dummy proofing web designs. If anyone can find a way to cause an error in a well thought web design, it's them! Below is my top seven list of the worst mistakes a web developer / web designer can make.

1. Malformed Site Indexing Tools

People are people. Right? You have to allow your search engine to work in such a way that your users can make any mistake they can possibly make and yet still get the search results they desire. Step one, ADD AN INLINE SPELL CHECKER TO THE SEARCH FIELD. Also, your seacrch engine should consider the quality of the content, not just the quantity of the indexed keyword within it.

2. Using PDF Files For Content

I'll give you three reasons why this is a bad idea. One: Users don't like to download content. It takes longer, and it may cause them to leave. Two: Users may not have Adobe Reader. Don't take for granted what your users may or may not have installed on their computer. Three: Search engines can't read the content of the PDF file, and therefore, your content won't be found if a user Googles the keyword associate to your content.

3. Using Print Style Text

If you have too much text, it will seem like a book and not like a web page. The whole point of the web is speed. Get your message across quick, and give the user the opportuniity to read more if they choose to. The best way to draw users into the text is to make your text 'scanable'. Here's how:

use subheads
use bulleted lists
highlight your keywords
use short paragraphs
use a simplistic writing style

4. Poor SEO

The 411 on SEO is here. It's the quick and dirty. Learn it, love it, live it.

5. Consistency

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. If your user isn't comfortable on your site, they WILL NOT stay there.

6. New Browser Windows

Simplicity is the key. Users don't like to have more than one window open. Picture this, they click a link, it opens a window on top of the window they were in. They realize they didn't want to be there and they click 'back' on their browser. Guess what? It doesn't work, and they don't understand that the window they want is burried under the window they have. While this is less of an issue thanks to browser tabs, it is an issue still. Keep your users where you want them, ON YOUR SITE.

7. Not Answering Users' Questions

If a user finds your site, they are looking for something. If they can't find it fast, they'll leave. If that happens, all of the time you spent on SEO was a complete waste of time. SEO isn't just to get the user on your page, it's to keep them there. If the keyword of your page is 'snicklefritz', that page shouls scream 'SNICKLEFRITZ!' If snicklefritz is a product, they'd better know how much snicklefritz costs and how long it will take to get snicklefritz to their door.

11 Inspiring Minimalistic Designs

Tue, 13 Dec 2011 17:00:45 GMT

Keep is simple stupid. KISS is not a new concept. But it is a concept we, as web designers, should keep at the forefronts of our minds.

Minimalism and simplification draw the end users attention to those elements which matter most. Face it, if there is a great void, the elements within it will be focused on more than the void its self. Plus, busy pages bother people. Me in particular.

26000 Vodka

A Woman in the Mirror

Black Estate

FRKT

Have You Flossed Today?

Gradient Backgrounds with CSS 3.0

Tue, 29 Nov 2011 19:17:48 GMT

I am so excited to see what's happening in the world of web design, especially with CSS 3.0 and HTML 5. This blurb is about gradient backgrounds. You don't need images when designing links as buttons for websites.

CSS3 | Styled To Match Firefox's Default Inptu Button Style


.linkButton {	
	/* IE10 */ 
	background-image: -ms-linear-gradient(top, #fdfdfd 0%, #cfcfcf 100%);
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #fdfdfd 0%, #cfcfcf 100%);
	/* Opera */ 
	background-image: -o-linear-gradient(top, #fdfdfd 0%, #cfcfcf 100%);
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fdfdfd), color-stop(1, #cfcfcf));
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #fdfdfd 0%, #cfcfcf 100%);
	/* Proposed W3C Markup */ 
	background-image: linear-gradient(top, #fdfdfd 0%, #cfcfcf 100%);	
	border: 1px solid #333333;
	border-radius: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	padding: 2px 7px 3px;
}

.linkButton:hover {	
	/* IE10 */ 
	background-image: -ms-linear-gradient(top, #e4f4fc 0%, #acdcf7 100%);
	/* Mozilla Firefox */
	background-image: -moz-linear-gradient(top, #e4f4fc 0%, #acdcf7 100%);
	/* Opera */
	background-image: -o-linear-gradient(top, #e4f4fc 0%, #acdcf7 100%);
	/* Webkit (Safari/Chrome 10) */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e4f4fc), color-stop(1, #acdcf7));
	/* Webkit (Chrome 11+) */
	background-image: -webkit-linear-gradient(top, #e4f4fc 0%, #acdcf7 100%);
	/* Proposed W3C Markup */
	background-image: linear-gradient(top, #e4f4fc 0%, #acdcf7 100%);
}

HTML | The End User Will Not Know That This Link Is A Link, And Not A Button


<a href="http://www.followermedia.com/index.cfm?home-Web-Design|Fort-Collins-Loveland-Greeley-Colorado">Follower Media Home Page</a>

The Finished Product Will Look Just Like A Firefox Button

Link Without 'linkButton' Class

Follower Media Home Page

Link With 'linkButton' Class

Follower Media Home Page

CSS 3 - Rounded Corners and Drop Shadows

Tue, 22 Nov 2011 18:34:05 GMT

You have to love this. No more images to make round corners. Just add a simple bit of code to your css and you are off and running.

CSS 3 Rounded Corners

-moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;  border-radius: 7px;

Browser Support

Chrome 5+
Explorer 9+
Firefox 1+
Opera 10.5+
Safari 5+

CSS 3 Drop Shadows

-moz-box-shadow: 3px 3px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 3px 3px 4px #ccc;

Browser Support

Chrome 5+
Explorer 9+
Firefox 1+
Opera 10.5+
Safari 5+

jQuery Way Points

Tue, 22 Nov 2011 18:16:32 GMT

I am loving this! What a great plugin! I especially like the Dial Controls and the sticky elements. I am going to have to find something to implement this on quick. It's slick, and best of all, the action is very smooth.

Download jQuery Way Points HERE.

Emulating IE7

Mon, 21 Nov 2011 20:53:37 GMT

IETester is buggy, browserlab doesn't let you interact with the page, switching to another application or virtual machine takes away your flow, but... throwing this in lets you test IE7 from IE8 by adding &emulateIE7=1 to the url string. Sorry, IE6 is still a thorn in our sides, and there still isn't a simple, quick solution to test it.

Use the following snippet to quickly emulate IE7 from IE8/9:

<cfparam name="url.emulateIE7" default="0">
<!------- *if url.emulateIE7, render as IE7 ------->
<cfif url.emulateIE7>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</cfif>

Quick and Dirty Ajax via ColdFusion

Mon, 21 Nov 2011 20:52:06 GMT

Have you ever wanted a quick and easy way to access a coldFusion page without reloading the page you're on. Well, you are in luck, because it's here.

The Link:

<p>
	<a onClick="ColdFusion.navigate('ajax.cfm?id=1234','myBox')" style=" cursor: pointer; color: #069; text-decoration: none; ">
		Click Here to Change Content
	</a>
</p>

The Container:

<cfdiv id="myBox" style=" border: 1px solid maroon; min-height: 100px; min-width: 400px; padding: 7px; ">
	<h3>static content</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare egestas arcu eu auctor. Integer mauris nulla, euismod suscipit scelerisque id, ornare eget sem. Ut hendrerit, urna at sollicitudin egestas, nunc dui porttitor est, sed ornare sem urna eget lectus. Mauris a lorem mi, ac facilisis augue. Curabitur odio ante, mattis ut venenatis non, rhoncus sed neque. Mauris accumsan tincidunt purus sed tempus. Pellentesque orci massa, egestas ac pulvinar vel, varius commodo nisl. Curabitur lacinia eleifend lectus at imperdiet. Etiam pharetra semper libero eget hendrerit. Quisque felis est, condimentum vitae scelerisque bibendum, feugiat nec dolor. Etiam rutrum accumsan arcu, non blandit neque fringilla nec. Quisque porta iaculis orci, ac venenatis urna cursus quis. Integer sit amet sem id nunc tempor posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam viverra semper lorem in euismod. Donec sit amet ligula mi. Nullam erat odio, faucibus at iaculis vel, tincidunt eu felis.</p>
</cfdiv>

ajax.cfm

<h3>dynamic content</h3>

<p>The ID passed in is <cfoutput>#id#</cfoutput></p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare egestas arcu eu auctor. Integer mauris nulla, euismod suscipit scelerisque id, ornare eget sem. Ut hendrerit, urna at sollicitudin egestas, nunc dui porttitor est, sed ornare sem urna eget lectus. Mauris a lorem mi, ac facilisis augue. Curabitur odio ante, mattis ut venenatis non, rhoncus sed neque. Mauris accumsan tincidunt purus sed tempus. Pellentesque orci massa, egestas ac pulvinar vel, varius commodo nisl. Curabitur lacinia eleifend lectus at imperdiet. Etiam pharetra semper libero eget hendrerit. Quisque felis est, condimentum vitae scelerisque bibendum, feugiat nec dolor. Etiam rutrum accumsan arcu, non blandit neque fringilla nec. Quisque porta iaculis orci, ac venenatis urna cursus quis. Integer sit amet sem id nunc tempor posuere. etc... etc... etc...</p>

CFC's, Ajax, jQuery, and Query Results

Mon, 21 Nov 2011 20:49:22 GMT

Accessing data on the fly is more and more prevelant now than it has ever been. No one likes to wait, and reloading pages makes us do just that. Using the method outlined below, you can work with queries on the fly via Cold Fusions built in Ajax functions, and a bit of jQuery.

The Script:

<cfajaximport>
<cfajaxproxy cfc="com.directoryName.cfcName" jsclassname="jsObj" />
	
<cfoutput>
	<script type="text/javascript">
		function getPage(pageName) {
			alert('pageName: ' + pageName);
			$('##cpnTbCntnt').empty();
			$('##cpnTbCntnt').html(pageName);
			var cfcAsAjax = new jsObj();
			var cfcReturn = cfcAsAjax.getCoupon(page=pageName,dsn='#request.dsn#');
			document.getElementById('cpnTbCntnt').innerHTML = cfcReturn[0].Paragraph;
		}
	</script>
</cfoutput>

Note: When calling cfc's in this manner, you will need to pass in the dsn, even if the cfc is predefiend in the application.cfc and initialized with the datasource.

The Container:

<div id="cpnTbCntnt" style=" width: 100%; height: 100%; "></div>

Web Design Tip 000001

Mon, 21 Nov 2011 20:38:13 GMT

Compress, Compress, Compress!!!

I just stumbled across a really nice little tool. If Adobe's Photoshop isn't compressing your images enough for your likeing, you may want to riot. That is, you may want to look into criosweb's FREE Radical Image Optimization Tool. I gave it a shot just for fun and I was pleasantly surprised. With a few small tweaks to the settings, while keeping the quality at 95% of the original, I saw a 65% reduction in file size from an image optimized for the web via Adobe Photoshop CS5. If my opinion matters, that's pretty darn cool!

Search Engine Optimization Basics

Mon, 21 Nov 2011 15:11:57 GMT

You could buy a book to learn SEO. Or... You could just follow this post.

Keywords The key to SEO Success.

What is a keyword?

A keyword is a word or phrase which describes a product or service which is indexed regularly by end users via search engines, such as Google and Bing.

My primary keyword is ‘Web Design’. I am an application developer with extensive back end experience. I’m also very good at design, but I am not just a web designer. Well… I pushed the pride of my title aside for ‘Web Design’. Why? For one, I want and need business to provide for both my family and the families of those who work for and with me. Further, and much more relevant to the case, because every day Joe doesn’t know the difference between an Application Developer and a Web Designer. All Joe knows is that he wants a web site, and that that’s what Web Designers do. So when Joe searches, Joe is going to type in ‘Web Design’. That’s why it’s so terribly important to research…

Research

Consider and compile a list of words which accurately and succinctly representation the products, categories of products, and or services which your website purveys. Once you have compiled your list, Google it. Here’s how:

Begin typing your keyword into a Google search. If I were to type my primary keyword, Web Design, I would amass the following as I typed in the word:
1. Web Design
2. Web Developer
3. Web Design Denver

Based on Google’s auto suggest feature, you may find keywords that you wouldn’t have considered otherwise. In this case, I hadn’t considered ‘Web Design Denver’, since my focus was on Northern Colorado.

With your revised keyword list in hand, log in to Google. If you don’t have an account, you’ll need one. You’ll find that Google’s keywords tool is quite intuitive and easy to use. Note how many searches are executed for each keyword. I suggest searching each keyword individually, since you will be offered even more alternatives here as well.

Selecting Your Finalized Keyword List

Your primary keyword should be that which most accurately and succinctly represents the products, categories of products, and or services which your website purveys. That, and it should be one which receives the greatest number of searches. That being said, compile your list in descending order from greatest relevance and search count to least.

How Many Keywords?

Seven is the number I cater toward. Any more than seven and my content wouldn’t reach the optimal saturation point. Any less then seven and my content would be much too repetitive. My site, http://followerMedia.com, isn’t terrible large. The optimal number should grow or shrink with the size of your site concurrently.

How to Focus Your Primary Keywords

Your primary keyword should be focused on your front page. Each additional keyword should be focused on another page. Only ever focus on one keyword per page. Do, however, include the other keywords on each page. (Link each of these keywords to the page which is the focal point for its associate keyword). Each additional keyword should be focused on another page within your site. ONLY EVER focus on one keyword per page.

Where to Focus on Your Keywords

The <title> tag.

Place the primary keyword in the title tag of each page. If you desire to focus on locality, do so as I have with the bar delimited list following the primary keyword.
<title>Web Design | Greeley | Loveland | Fort Collins | Colorado</title>

Keywords in meta tags:

<meta name="description" content="Web Design | Greeley Colorado" />

<meta name="keywords" content="Web Design | Greeley Colorado" />

Within the content of the page.
1. <h1-6>Carry greater weight/relevance respectively</h1-6>
2. <strong>Carries greater weight than plain text.</strong>
3. <em>Carries greater weight than plain text.</em>
4. Total saturation within content should be between three and five percent. Do not fall short of three percent or exceed five percent.
5. Place anchors on all keywords within content, linking them to their associate pages.

Check your keyword saturation with a keyword density tool.
<img alt=”keyword” />Place your keywords in the alt tag of your images.
Include keywords in your url string and/or page name. I’ve built a dynamic script for populating my title tag and my meta tags based off of my url string. My url’s look like this: http://followermedia.com/index.cfm?home-Web-Design|Fort-Collins-Loveland-Greeley-Colorado

Submissions

Submit your completed sit to the following:

Tools

Google Analytics
Woorank SEO Analysis (Firefox Plugin)

Site Maps (Included at root of site)

HTML Site Map
XML Site Map