When it comes to web design pricing I have long known there is some mystery to it. It’s not uncommon to find ads and offshore companies plugging $199 for a five page website to top brand agencies, only to hear later there is a “it costs $5,000 to even talk to us” retainer. Clearly it’s anyone’s guess as to how much it should cost to build a website, or is it? What goes into putting up a website? How much work does it take? Do they charge hourly or by the page or maybe even by the cheesy stock photography image? The fact is that there are many ways that companies sort out the pricing of a site project, and while some companies are on the up and up, some merely just shoot the moon. I think the age old motto still applies, “You get what you pay for!” Ultimately, the industry is diverse enough where there are a million different ways to categorize each company and likewise their pricing mechanisms. I can’t write that long and it’s almost my bed time, but I have done my due diligence to provide some insight to a few of the major categories that most web providers can call their own.

For $500 or less you too can have your very own personalized website. That is of course as long as you don’t mind there being 1.2 million others just like yours, albeit maybe with a few color variations. These types of offers basically have a few catches:

1. You have little to no say in the aesthetics of your site.
2. While you may not get charged a staggering amount for extras, these deals are for bare bones. It is essentially the car with no air conditioning.
3. I leave it to personal opinion as to whether this is a good thing or bad thing, but the odds are extremely high that the work is being outsourced.

The positive side of these providers is you get to have a billboard for your business for a relatively small expense. This is great for start-ups, small businesses and local business. It accomplishes just getting some basic information on the web and likewise gives people a fair chance at finding out who you are, what you do, and how to contact you. If you are trying to receive and/or market to a national audience this type of website will stand to hurt before it helps. Essentially, if you are driving traffic to your site that would otherwise never have heard of your business, it is essential to make a first impression that sticks.

The next main category is the “custom” web designer. Many companies attempt to exploit the word “custom” and essentially the word itself means little in regard to the context of the company that uses this moniker. At a minimum, a “custom” website should never mimic either the designer’s portfolio or any other website on the web for that matter. A custom design takes good and bad aspects of existing design trends and combines them with the client’s wants, needs, and objectives. Now what comes out on the other end depends on any number of potential factors from the company and/or designer’s artistic interpretation to the client’s desire to micromanage the process. As stated there are many companies out there that coin themselves “custom web designers.” To separate the gold from the dirt you have to consider one or all of several factors.

1. What is the process they use to get the final product? What kind of information do they gather? Do they do interviews, questionnaires, or a combination of both?
2.  Do all of the websites in their portfolio look the same? Did they actually do the designs in the portfolio or just update some text on the page at one point?
3. If needed, how is the revisions process handled?

All of the answers to these questions play into the final product you will eventually pay for. A good solid process backed with a company that has the skills to produce a truly unique web experience is going to cost more, but likewise it is the difference in separating your online presence from others. While a site my not always convert the masses that are only there to seek its beauty, a quality designed website creates an online branding and PR campaign not equally matched by alternative means. Pricing in this genre can really run the gamut. If a company is charging on the low end in this particular sector, there is usually a catch. Either they are a $499 web company in disguise or you are not getting the benefit of a process or team of skilled professionals behind the effort. If the price is on the high end, then it is important to make sure they have the portfolio and case studies to back it up.

The next and final iteration of a web industry sector is the full blown Interactive Agency. If the agency truly is representative of its place in this realm, this isn’t for the faint of heart, or pocket for that matter. There are very, very few agencies that are worthy of this categorization. With a true interactive agency a web site is no longer a project but a multi-faceted marketing campaign combined with print, social, branding, and traditional marketing elements. To get the most out of the cost of this type of company your place in the market share is now about brand awareness rather than traffic and conversions. You want the target audience to see and know you are there and the web is only a small part of this overall vision. Costs are a minimum of six figures if not seven and chances are about 99.9% your average five year old can name the companies that use a true Interactive Agency.

To make the best decision it is important to understand there is a return on investment through a carefully thought out combination of quality and budget. In the end with true Interactive Agencies aside, you are paying for quality, expertise, and current disposition regardless of their “marketing position”. A volume based company cannot truly fit in to the custom web design industry and an Interactive Agency can’t meet the pricing demands below that of a Fortune 500 company. In today’s web world you have traditional marketing companies experimenting with web, design firms pretending to be development firms, development companies pretending to be design firms, hosting companies offering websites, IT consulting and more, all trying to get their piece of the action. I circle back to the point that there are million of different factors that go in to web design companies and their pricing mechanisms. Any prospective web site client should hopefully understand the relationship between desired quality and budget, the rest is finding a prospective relationship that fits within those two elements.

jQuery does produce a buzz. Some people love it, some people… not so much Many more just don’t get it. We at lifeBLUE love it to death, and with good reason. We spend more time creating great interactive applications and less time trying to make those applications work across all browsers. It’s a win-win for our customers and our developers.

However, there are the detractors. While some of them dislike jQuery from a purely philosophical standpoint, most just don’t truly understand it. These misconceptions fall into three categories. Let’s take a look.

“jQuery isn’t JavaScript”
Yep, your right! It’s not JavaScript. That may just be because NOTHING is JavaScript JavaScript does not truly exist. JavaScript is a technology recommendation that nobody really follows. EVERY browser vendor changes how they implement JavaScript every major version change (be it ever so small). In fact, it’s EXACTLY like the “Code” in the “Pirates of the Caribbean” movies; it’s more of a suggestion and can change whenever the browser vendor decides it’s going to change.

So… jQuery is no more or no less JavaScript than anything else written by any other developer anywhere. In fact, one of its stated purposes is to bridge the gap between the various browser’s implementations of JavaScript. jQuery does not require any special technology a browser doesn’t already implement. It does not require any special configuration changes to a server. It’s as “plug and play” as JavaScript gets.

“jQuery is cheating”
Whenthe “rules” of JavaScript really don’t exist you can’t cheat, can you? In fact, to use jQuery, you have to follow standards. jQuery has been around long enough to have a mature feature set and API. It stands worlds above any JavaScript standard in terms of consistency and predictability. If anything, jQuery levels the playing field so that you don’t have to cheat. You can use the same code for every browser, no hacks required.

“jQuery has to much overhead”
Of all the arguments against jQuery, this one has the most validity. jQuery does use memory, bandwidth, and processor power. This point is conceded. However, so does any other piece of JavaScript ever written. The total download size of the jQuery library (in the minimized version) is about the size of a small logo (around 55k), so it does not take much bandwidth. As far as processor power, it does not take very much more or less than any other JavaScript doing the same operation. So while jQuery does take up some resources, it will only really be an issue on really old computers with really slow connections.

In short, jQuery is a great option for most everyday JavaScript tasks. You can produce clean, lightweight, effective code simply. What’s not to like?

For the first time here at the LB, I’ve decided to write a blog directly reflecting my role. Sure we all write about industry related topics, as a team, we all basically perform any and all duties we can to build a website. Whether it’s designing, coding, coming up with a domain name, or talking search engine strategies, we’re all in this together.

Allow me to introduce myself (better late then never, right)… I’m Shauna, our Front End Developer. For the non-nerdy type, that basically means I turn an image into a website, for the somewhat-nerdy, I take the completed design and build the “front end” of what soon becomes a functional website, and for the super-nerdy, I’m responsible for the HTML/CSS side of things.

As with most things, we all have our “style”, “habits” or “the way we think it should be done”. In coding, here at lifeBLUE, you can look at code and immediately know who did it. One of the things that I prefer to do, that can be done probably 20 different ways, is do all navigation in a “list” format. Again, super nerds let me speak your language, <li>’s. It doesn’t matter how simple or complicated a navigation is, whether its live text or images, horizontal or vertical, jpg’s or png’s, whatever the situation may be, I promise you, you can build it in a list. (subliminal message: feel free to prove me wrong, in which I will then show you how it can actually be done).

Why? Several reasons. The OCD in me says do it this way because aesthetically it’s cleaner code (oh, how pretty it looks), but the technical side screams for the search engine aspect as well. Search engines prioritize lists and recognize lists as being a navigational element. So we should take advantage of this and use it properly. It also allows us to associate text with what could essentially be image-based only nav, where you would then lose out on this important feature. It’s also easy for editing, all controlled by the CSS, allowing for simple additions, deletions, and complete makeovers.

So here we go, my time to prove I may know what I’m talking about…

CSS:

.nav {width:500px; height:50px; background:#e00260; font-family:Verdana, Arial, Helvetica, sans-serif;}
.nav ul {margin:0 0 0 18px; padding:0;}
.nav li {margin:0; padding:0; list-style:none; float:left; font-size:18px; line-height:50px; text-transform:uppercase; color:#CCC;}
.nav a {color:#FFF; font-weight:bold; text-decoration:none; padding:0 12px;}
.nav a:hover {background:#c80055; color:#FFF; font-weight:bold; text-decoration:none; padding:14px 12px;}

HTML:

<div class=”nav”>
<ul>
<li><a href=”#”>Home</a>|</li>
<li><a href=”#”>About</a>|</li>
<li><a href=”#”>Portfolio</a>|</li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

CSS:

.nav2 {width:500px; height:50px; background:#9101b0; font-family:Verdana, Arial, Helvetica, sans-serif;}
.nav2 ul {margin:0; padding:0;}
.nav2 li {margin:0; padding:0; list-style:none; float:left; font-size:15px; line-height:50px; text-transform:uppercase; letter-spacing:-.5px;}
.nav2 a {color:#FFF; font-weight:bold; text-decoration:none; width:125px; height:50px; background:url(nav2_bg.jpg); display:block; text-align:center;}
.nav2 a:hover {color:#FFF; font-weight:bold; text-decoration:none; background:url(nav2_bg_over.jpg);}

HTML:

<div class=”nav2″>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

CSS:

.nav3 {width:500px; height:50px;}
.nav3 ul {margin:0; padding:0;}
.nav3 li {margin:0; padding:0; list-style:none; float:left;}
.nav3 a {width:125px; height:50px; display:block;}
.nav3 span {display:none;}.nav3 li.home a {background:url(nav3_home.jpg);}
.nav3 li.home a:hover {background:url(nav3_home_over.jpg);}
.nav3 li.about a {background:url(nav3_about.jpg);}
.nav3 li.about a:hover {background:url(nav3_about_over.jpg);}
.nav3 li.portfolio a {background:url(nav3_portfolio.jpg);}
.nav3 li.portfolio a:hover {background:url(nav3_portfolio_over.jpg);}
.nav3 li.contact a {background:url(nav3_contact.jpg);}
.nav3 li.contact a:hover {background:url(nav3_contact_over.jpg);}

HTML:

<div class=”nav3″>
<ul>
<li class=”home”><a href=”#”><span>Home</span></a></li>
<li class=”about”><a href=”#”><span>About</span></a></li>
<li class=”portfolio”><a href=”#”><span>Portfolio</span></a></li>
<li class=”contact”><a href=”#”><span>Contact</span></a></li>
</ul>
</div>

Our marketing department is constantly putting ourselves in the mind of others. We spend endless hours thinking about what people want and what they are thinking. By trying to anticipate human behavior we can better understand the next “big thing” or what is the best move for a client. So I ask myself, “What are people thinking?” “What do people search for?”  “What does Google know?” In an effort to uncover the dirty truth I turned to Google suggested search.

Disclaimer: some of these are funny and some of it is offensive. However, it all says something about what people think and what they search for.

First I started out asking basic questions…

Who?

What?

When?

Where?

Why?

Most of these seem pretty normal and expected. I definitely laughed at “why” but I guess people are curious by nature.

Let’s take this a step further…

A major question here is who are Taylor Swift, Justin Bieber and Regina King dating as well as concerns about H1N1.

There are quite a few people wondering what they should do with their life.

“When will I die?” People really expect to find that on Google? Come to find out there are hundreds of quizzes ready to tell you when you will die.

“Where” seems to reflect what is happening in society now. Searches include Conan, 2010 Superbowl, the Olympics, Hati and Tiger Woods. My favorite is “where is Chuck Norris.”

“Why” is my favorite! These are such random questions. Everything from “why is my computer slow” to “why is yawning contagious” and “why are the kardashians famous”

I love these questions… Why do men have nipples? Why do people dream? Why do cats purr?

Then I thought I would see what people searched for about men…

How can you look at this and not at least smile? I am thinking this is mostly searched for by women, what do you think?

And now the women…

It seems people are just as negative about women as they are about men. Yikes.

There you have it, a look in to human behavior and what we ask when people are not around. This certainly says something about what is going on in the world, with quite a few searches in including Tiger Woods and the Olympics. It also gives an insight in to what people think about and what they take the time to research.

What do you think? Do you find this normal? Shocking? Humorous? Entertaining? Disappointing?

Wednesday, Feb. 3 will be a day that goes down in historic annals - future generations will still be talking about it. It was a day that lifeBLUE Media officially opened its doors to friends, clients, neighbors, family, government dignitaries and other distinguished guests. We cut the ribbon as a symbolic gesture of new business in the City of Allen, we welcomed our guests and showed them around, we ate delicious food and enjoyed amazing margaritas, we laughed, we told stories, we met many great people.

And so, in case you missed it, here are scenes from the lifeBLUE Open House. Our new office, perched above the shops at Watter’s Creek in Allen, TX, was on the drawing board for nearly two years, under construction for almost six months and we can all finally agree — it was well worth the wait.

Click to view the Open House Slideshow

Let’s face it. Form validation is about as much fun as playing tic-tac-toe against yourself. It is a dull task that has to be done but really isn’t that much fun. Mostly it’s just a thousand “if” statements. Of course, the bigger the form the bigger the pain.

jQuery to the rescue.

While there are lots of great jQuery plugins for form validation, you can do it simply without any of them. If form validation is complex, a plugin might be useful, but for things like “contact us” forms or forms with lots of text inputs but no complexity then this method works great.

First let’s do some HTML.

<form action="/the/target/file.php" method="post" id="form1" onsubmit="return checkForm();">
    <label for="field1" class="reqtext">Form Label 1</label>
    <input type="text" name="field1" class="req" />
    <label for="field2" class="reqtext">Form Label 2</label>
    <input type="text" name="field2" class="req" />
</form>

Notice the two CSS classes placed within the tags. These two classes, “reqtext” and “req” are the jQuery identifiers we will use to discover and then check each input field. Also notice that we put in an “onsubmit” element in the form tag. I like to use these instead of the jQuery.submit(). You can work either way. I’m just more comfortable with this format. Here’s the jQuery statements.

function checkForm() {
    // Initialize our error flag
    var error = false;
    // Cycle through the tags with the CSS class "req" in them.
    $('.req').each(function() {
        if($(this).val==()) {
            error = true;
        }
    });
    // If the error flag is set, set the titles for all required fields to a
    // nice shade of red to let them know which fields are required.
    if(error) {
        $('.reqtext').css("color","#922");
        return false; // don't submit the form
    } else {
        return true;
    }
}

Let’s work through the “checkForm()” function. First we set a flag to record if we have errors. Second we iterate through all the form fields with the CSS class “req”. If they don’t have any text in them, it sets the “error” flag. Lastly, after we finish checking things we provide the user with whatever visual feedback we think is required. In this case we set the text color for all the elements with the CSS class “reqtext” to red. You can take the last step as far as you want.

So there you go. A quick and simple validation that can be used for small forms and large forms alike. It allows you to validate what you want and leave the rest alone. Happy validating.

Simple rules and concepts that will improve the efficiency of your software and save you headaches

One great obstacle software development companies must overcome when setting their company standards and practices is the design of their programming architecture. Usually companies will initiate this process by accepting a set of programming standards specific to their needs, and then amend them as they find faults in their implementation. This revision process represents a top-down approach to architecture design.
At lifeBLUE we recently performed a major overhaul of our existing standards architecture from a bottom-up perspective with an emphasis on basic programming and software engineering principles. We reviewed all of our previous work and identified the needs and difficulties of our development team, and then associated these needs and difficulties with concepts that helped describe and associate them amongst one another. By doing this we were better able to define simpler and more robust solutions.

In order to assist others who are thinking of creating their own company specific architecture design, I have taken a collection of the notes we used during the research phase of revising our practices and summarized them for more general use. The following shows some of the most important concepts that we identified when designing architecture and popular methods of improving such concepts.

• Accessibility
  • Describes the degree to which a service or property is available for global use. Thiscan be as minimal as defining read/write access of a property, or can be as pivotal as confining database accesses to a small collection of database classes.
  • Improving accessibility does not necessarily mean making components more accessible,but instead applying proper access permissions to a component or module.
  • Examples
    • Separation of Responsibility
      • Database Tools
      • Logic Implementation Tools
      • Presentation Tools
      • Model View Controller
    • Accessor Methods
      • Get methods provide read permissions
      • Set methods provide write permissions and define writelogic
• Adaptability
  • Describes the ability of a system to incorporate new or different system componentswithout requiring the software architecture to be redesigned.
  • Increasing adaptability requires loose coupling of system components.
• Auditability
  • Describes the extent and measure of ease to which a system can be tested forperformance issues and programming errors.
  • Ease of debugging.
  • Ability of clients to easily identify problem areas.
• Compatibility
  • Describes the degree to which a new system component is functional with existing ornew components.
  • Examples of compatibility
    • Backward Compatibility
    • Forward Compatibility
• Composability refers to the ability of a system and system components to be assembledin various combinations to satisfy different requirements. The attributes that make components composable are:
  • Modularity refers to independence of a component from other system components.
  • Statelessness refers to the individuality of each use of such a component.
• Configurability
  • Refers to the measure that a component with system-relative constants can beconfigured.
  • Examples of sections that require configurability
    • Global Project Settings such as database connection strings.
    • Class Settings such as the number of allowed login failures before locking out a user.
• Correctness is measured by the accuracy of algorithms on a domain of inputs and theirknown outputs.
• Dependability is a measure of the reliability of a system component. It is measuredby the following attributes:
  • Auditability (see above)
  • Means are ways to increase the dependability of a system.
  • Threats are things that can affect the dependability of a system.
• Deployability is the measure of ease that a system can be deployed. It is measured bythe following:
  • Flexibility to changing deployment environments (Portability).
  • Minimizes costs of implementing predeployment features required to deploy a system orfeature.
• Efficiency
  • There are numerous ways and tools to measure the efficiency of a system or systemcomponent, and numerous areas that should be monitored for efficiency.
  • Examples
    • Runtime efficiency
    • Resource efficiency
      • Speed
      • Memory
    • Database efficiency
      • Spurious Tuples
      • Memory allocation
• Evolvability is a measure of the ability of a component to evolve and improve withoutbreaking existing functionality.
• Extensibility is measured by the ability of existing component features to be reusedin extending new components.
• Interoperability is the ability of components in a diverse system to interact witheach other without need of helper or translation methods.
• Learnability measures the difficulty of learning how to utilize and implement a systemcomponent.
• Manageability
  • Refers to the ability of a system or system component to manage data instances
  • Examples
    • Adding new instances
    • Editing existing instances
    • Removing or disabling existing instances
• Modularity
  • Programming concept that describes the extent to which software is composed ofseparate parts, called modules.
  • Modules represent a separation of concerns and enforce logical boundaries betweencomponents.
  • See modules section for more information.
• Operability
  • Ability to keep a system in an operating, safe, and reliable state
  • Examples
    • System requirements
    • Client specified operational requirements
• Portability is the ability of a system to be ported from one environment to another.
• Recoverability
  • Refers to the ability of a system to revert to a stable state when recovery is deemednecessary.
  • Examples of recovery methods
    • Database query reversal
    • Commenting out class modifications
• Relevance is the measure of how pertinent or applicable a component is with itsintended implementation and internal contents.
• Repeatability is determined by a one-to-one mapping of inputs to outputs.
• Scalability is the ability of a system or component to handle larger volumes ofrequests without increasing implementation costs.
• Seamlessness is the quality of being able to implement a system or system componentwithin other technologies without need of helper or translation methods.
• Security
  • Measures the protection of sensitive information from being accessed by intruders ornonrelated users
  • Examples of security
    • Encryption of identifier values and login credentials.
    • Hiding user information deemed sensitive from other users.
• Standardization is the process of defining a set technical standard to be implementedacross different system components.

One final important note: Make your developers aware of your new standards and practices otherwise this whole process is for naught. Giving developers a strong understanding of how things happen at your place of work will empower them and give them the confidence they need to perform at 100%. A poorly informed developer can be the pitfall of an entire project. Your lead developer or project managers (or both) should be provided adequate time to do routine checkups on project code segments as an audit of developer efficiency and pertinence.

Evaluation of practices should be performed regularly. Whenever a lifeBLUE project is completed we take time out to identify the strengths and weaknesses of the project from the perspective of every individual who has worked on the project. By resolving these weaknesses and implementing these strengths into future version of our software core, we slowly but surely eliminate reoccurring development issues. This allows us to focus on the most important piece of work: making a website that strongly and positively represents our client.

There is no such thing as a website overnight success. Mystery solved, blog for the week = done! Wait, I forgot to explain why! Let’s set the stage; in my experience in running a business for the past eight years there is no real overnight success in business, and even more so online. Fast growth can only come in one of a very few ways being:

1. A lot of capital.
2. An indescribable amount of man hours.
3. Really good people firing on all cylinders.

Sometimes its a combination, but its never without any of these attributes. The only overnight success in this world comes from gambling, the lottery or stealing, but I’m not taking my chance on beating Vegas, haven’t bought a lottery ticket in years, and likewise don’t feel like going to jail anytime soon. I don’t know where the average Joe stands but that is just me. Your Facebook, Myspace, Google, Amazon, Ebay or any other of the major apparently overnight online successes didn’t get their billion dollars a few days after their conception. Not to mention these ideas were unique at the time and have obliterated the competition for market share.

If you added the man hours of development and sweat equity for these gems of the Internet put together, you could circle the globe eight times. I can’t exactly prove that because the data doesn’t exists, but let me just tell you that none of these sites started out as even a reflection of what they are today. Facebook started as a crude version of Harvard “hot or not”, while Ebay was a cheap site for selling beanie babies (boy I’m glad I didn’t buy one of those) and Google is years worth of mathematical and search technology genius put together. The bottom line is you aren’t going to create a version of these sites and compete with these big dogs within the market place without a great idea and a truckload of benjamins. If you are still reading this and saying, “Duh, everyone knows that,” I will say that’s not quite true. Ok, so there isn’t an overnight success what now? A second part of this myth is that you can make money on the web with little or no investment similar to the California Gold Rush in 1849 that the money is just sitting there waiting for you.

While I will still contend that you can compete for a larger market share with less of a start-up cost of opening up a brick and mortar location, the online marketplace itself has become quite competitive. Simply put, unless you are a developer (or really good friends with one that is a pushover) the fact of the matter is that it’s probably going to take some capital and more than just a good idea to build a successful online enterprise. Driving traffic to your site is the second part of the equation and that takes an aggressive marketing campaign to get the users you need to find your site. The amount of money being put into online advertising year over year is growing by the billions. This means the marketplace is becoming more competitive, and unfortunately, to compete in a competitive market place revert to the three tools listed above.

If I burst anyone’s bubble I apologize. This doesn’t mean its impossible, its simply a matter of uncovering the fact that the web isn’t the haven for no cost, next million dollar ideas, those simply don’t exist anywhere. The web still remains a great place to invest one’s ingenuity, desire, and output of great ideas, this will remain true for long years to come. It just takes more work than the average bear might think to get there.