As the climate against fast food chains – especially burger joints began to reach the point where companies were truly beginning to see a dent in their bottom line, a couple of players decided that rather than try to fit their round burgers into a square salad bowl, they’d buck the trend and just be – shocker – burger joints.

Instead of pretty, overly art directed images of perfectly manicured burgers next to a bottled water, yogurt parfait and a fruit cup, their campaigns featured sloppy, double and triple-patty burgers next to a Super-Gulp size drink and large fries.

They accepted the fact that they couldn’t please all of the people all of the time and they simply couldn’t cater to those who saw their offerings as pure evil. They had decided they were going to stick to what they do, do it well and please the people who wanted what they had to offer. Those that preferred a healthier alternative? Have a diet Coke with your burger…

The triple patty burgers of the design world

Even at the standard 1024px wide resolution, users will only get an eyeful of lead image on the tastefully super-sized idsgn.org

As I take note of site designs that I find appealing, more and more often I see sites that are stunning in their own right. But as I break down the elements of the design and coding, these incredible creations are often the antithesis of the best practices we most often strive to adhere to. Huge, mildly optimized images; images for every button, background, bullet and text title; tons of Javascript, pngs everywhere with unapologetic exclusion of a png fix; (gasp) all flash sites; sites, in short, that could care less about validation, search engine optimization, page rank and frankly, what you, I or anyone else thinks. These are the triple patty burgers of the design world. Designers will serve these up, other designers will rave about them, phones will ring off the hook and clients will line up to have one done.

The bottom line is that these sites were launched with the blessing of either the client, the designer or both. They aren’t trying to fit into anyone’s ideal of what a proper site design is. They’ll tell you, if you’re looking for the healthier alternative, you’ve come to the wrong place. Their aim is to reach their client and their client’s audience. Often potential clients will see the aesthetically pleasing samples in a designers portfolio and not realize the standards and SEO no-no’s an eye-candy-heavy or full flash site will likely contain, but they’ve determined what is important to them is having a site that appeals to their personal senses or a certain design trend regardless of any drawbacks it may present.

Flash has probably suffered the most through this movement towards standards and “healthier” websites. The Flash development specialist has become more and more scarce over the past several years and those that are left are the true bad asses doing some really top notch work. Again, with Flash there is a certain time, place and audience to appeal to – but the fact remains it still has its place. When done well, a good flash site is the ultimate supersize combo – aesthetics, marketing, eye-candy, wow-factor… the the 2lb burger and shake combo that’s completely unnecessary, but so satisfying when done right.

One size may not fit all. And that’s not bad…

I think even these types of designs are valuable to our web development ecosystem. Even though the strict standards based, best practice, ultimate optimized site is in most cases the best route for a business looking to see results in sales, conversions, leads etc., sometimes aesthetics are what drives a clients motives. Ultimately, the triple patty burger is what’s going to satisfy their web design appetite and they are fully willing to pay for it. There is a portion of the market that is simply interested in having an aesthetics driven site.

Sometimes you just need to fit in where you fit in. Embrace who you are and what you do. As much as the web community evangelizes standards and best practices for practically everything related to web development, it’s time to consider that one size will not fit all. And maybe, this isn’t such a bad thing.

Hidden Calories

YouLove.us was all about the innovation factor with the latest version of their website. So popular it was, they finally wrote a post detailing how they did it. With its oversized – and scrolling background image and png image text titles, it’s surely not the poster child for a load optimized site, but no doubt its brought them new clients looking for a highly creative solution.

Looks Good Enough to Eat

Anyone that knows me will tell you I’m never one to count bytes so I wouldn’t even begin to try to investigate how well MetaLab Designs web sites are or aren’t optimized. But they’ve developed a trademark style that delivers heavy on the graphics and eyecandy. My guess is that there are probably just as many people out there who despise the signature shiny / textured / layered / drop shadow look it as much as there are who love it, but it would be no stretch to guess, the clients that come to them for just such a look are rarely disappointed.

The Pastrami Burger, Unecessary But Worth It

The FWA site itself is not necessarily any example of the this super sized phenomena, rather it’s validation that the all flash site is far from dead and when done well is still revered and admired.

Being the Interactive Director, and Partner, I get to create all the cool stuff (ssshhh don’t tell Sean). I’m also the developer in this partnership so I do my fair share of PHP work, Database work, XHTML/CSS, etc,. However, my passion has always been in dynamic, interactive, animation based front-end work. FLASH!

Up until recently Flash, AS 3 was my weapon of choice for anything interactive or animation based. After years of developing code, I’ve compiled solutions, libraries and classes for almost any type of Flash project you can think of. So of course I would go to Flash for any work that required animation or front-end interactivity.

But let’s face it Flash is not exactly quick to develop, you have to open up the IDE and get your classes set, testing, debugging, etc,. It takes time to do all that. Flash also hinders Search Engine Optimization. I know that Google now indexes Flash, but who really believes that text embedded in Flash is as SEO friendly as text in a DIV? Not me. Not to mention you should be pulling in all your text for Flash via XML.

Enter jQuery. I can’t remember exactly who recommended jQuery to me (ok it was my partner Sean, but let’s not give him a big head), but I can say that I will never look at front-end animation, interactivity the same.

Quick, SEO friendly and just plain cool!

jQuery is quick. jQuery is lightweight and executes quickly within the page, but that’s not what I mean by quick. jQuery is quick to develop. Really quick. I find myself developing high-quality animation, interactive SEO friendly features within minutes. No need to open an IDE, just include the jQuery files and write the code. I’m astonished by the number of lines I end up writing for jQuery. With nice design touches and 10 lines of jQuery code you can make jaws drop.

As for SEO, jQuery doesn’t disturb your mark-up. No need to change your mark-up to accommodate jQuery. That means we can layout pages with lot’s of text, contained within heading, div’s and paragraph’s. What more could you ask for?

How what about a quick example?

My current favorite jQuery example is from right here on this website. It’s not the home page jQuery rotation banner, although that one is cool too, it’s the simple effect found on our Work page.

Why is this my favorite jQuery example, you ask? Because it’s only 8 lines of code and took me 5 minutes to build! When you combine a great design style / imagery to the power of jQuery, you get awesome results with little fuss.

Let’s take a look under the hood:

$(document).ready(function(){
	$("div.jq-example a").find('img:eq(1)').hide();
	$("div.jq-example a").hover(function() {
		$(this).find('img:eq(1)').fadeIn(400);
	}, function() {
		$(this).find('img:eq(1)').fadeOut(400);
	});
});

<div class="jq-example">
	<a href="/2009/07/disney-theme-parks/">
		<img src="/wp-content/themes/12ft/images/disney-small.jpg"  />
		<img src="/wp-content/themes/12ft/images/disney-small-over.jpg" />
	</a>
</div>

<div class="jq-example">
	<a href="/2009/07/fox-house/">
		<img src="/wp-content/themes/12ft/images/fox-house-small.jpg" />
		<img src="/wp-content/themes/12ft/images/fox-small-over.jpg" />
	</a>
</div>

jQuery is contained within an opening .ready function statement and a closing });. Essentially that code initializes jQuery.

The 2nd line of code looks for any DOM element div’s with a class by the name of featured-portfolio-image-alt , then looks for any “a href” link within that and selects the 2nd image within that link. jQuery then hides that image which is essentially the same as the CSS declaration of display: none; .

The code img:eq(1) refers to the 2nd image. Why does it refer to the 2nd image when it has the #1? It’s because the numbering starts at 0. So the 1st image would be found at img:eq(0).

Now the cool part, jQuery let’s us have a rollover and rollout state for our DOM objects. In this example we used an “a href link”, but it could have as easily been an img, div, or paragraph. In line #3, jQuery selects all the “a href links” (as specified above) and sets a hover function to it.

Line #4, is the code that’s executed for the selected “a href link”. By using the $(this) code we are able to select the currently hovered over “a href link”. Our find(‘img”eq(1)’) code selected the 2nd img within that link. Finally the fadeIn(400) code tells jQuery to animate in / reveal the img over 300 miliseconds, which gives us a nice animation.

Line #5 closes the hover function and starts the hover out function. Line #6 again selects the 2nd img, but this time it fades out in 400 miliseconds.

That’s it!

So no more Flash?

Ha, not likely. I would not give up Flash that easily and besides there are still plenty of cases where Flash is preferable over jQuery.

jQuery is cool for fading in and fading out, and lower level animations and functionality. However, Flash should handle the rest.

Flash does extremely well with elaborate animations, intensive interactivity, etc,. But it’s great to have other options, quicker options that can make our workflow that much more robust and streamlined. I (heart) jQuery, and they lived happily ever after.

As designers we are well aware of why spec work is bad for our business and if common sense isn’t enough then there are many sites dedicated to reminding us why (http://www.no-spec.com/)

It’s not difficult to understand why working for free is a bad idea for designers, but on the surface this practice seems like a win-win for the Client. Right?

It may shock you to find out that there are some very compelling reasons for Clients to stay away from spec work when choosing a designer.

Desperate Designers

In my experience the majority of designers who participate in spec work are very new, in-experienced designers. Offering up spec work is a good way for them to get in the door on a project. If you, as a Client, don’t mind working with someone who is learning on the job then this could be a good fit. However, if you have an important project that you need done by a professional, then beware of anyone offering spec work.

The Joke’s on you

Although most spec work is done by in-experienced designers, there are some established designers who will do spec work. Be very careful. Nothing is free, and although they may design a comp for free to “sell you”, there is almost always a cost. You’ll end up paying more over the life of your project. They have to make-up their lost hours somewhere. You’ll end up paying more for it.

Can I get fries with that?

In the world of web design it’s absolutely true that you “get what you pay for”. If you are looking to get a fast design from a bunch of designers, for free, then you are going to get a sub-par quality. A typical design mock (good quality) will take a good designer anywhere from 6 to 8 hours. A designer working on spec will put, at best, 2 hours of work into your project.

You might say, “That 2 hours will give me a sense of what they will ultimately design for me”. Wrong.

Roll the dice

The first phase of any successful project is a thorough Information Gathering / Interview phase. For our projects, this phase will usually add up to around 10+ hours. There is no way we could create a design and layout a framework for a project without this phase. When you cut this phase out and ask the designers to jump right into the design, you are essentially gambling that someone will get lucky and come up with a design you like. That’s no way to start a successful project.

It’s Your Job!

As a professional, looking for a web designer or firm, it’s your job to find the right designer. It’s your job to ask the right questions, provide the right amount of information, set the correct budget and choose the final designer. Basing the entire project off of spec work is the ultimate in “cutting corners”, and it sets a standard for the type of effort you plan on putting into the project.

You are being interviewed too

If you are serious about hiring a professional, high-quality designer or design firm then you need to understand that you are being evaluated as well. While you are looking at us and determining if we are a good fit for your project, we are evaluating you as a prospective Client. If we see a prospective Client isn’t putting a lot of thought, or time into selecting a valuable designer then it raises red flags for us. We know from experience that these projects take much longer and cause more headaches. Our price quotes go up, plain and simple. Asking for spec work is the largest red flag you can raise up.

Ok, so what should you do?

If you are looking to hire someone to design / develop a website then this information below is golden. These are the traits and processes of every success project and Client that I can remember (going back 12 years).

• Checkout the portfolio: Any professional designer / developer will have previous successful projects to show you. If you don’t see enough to convince you, then ask for more samples of work. A portfolio of past work will show you what level of design you can expect for your project.
• Read the designers website. Here on our site we put a good amount of time and effort into making the site an extension of ourselves. Put in the time to read about us, about what we can do. Read up on all of your options.
• Setup a phone call. Talk with all the designers you are considering working with. You’re going to be able to get a very good sense of if you would work well with us, just by a phone call.
• Determine a budget, discuss the budget, give details on your project. This is a topic for another post in the future, briefly however, putting the work in to provide the designers with a good amount of information on what you want is always a good idea. Be as specific as possible when discussing your project and give any information you can. Work with each designer to narrow down a budget range.
• Ask for a detailed proposal and fixed cost.
• Check references. Ask the designers for references of previous Clients. We’re always happy to provide references.

Go with your gut

After you’ve gone through the process above, you should have all the information you need in order to feel confident about choosing a designer. If you are still torn between a couple of designers then go with you gut. It’s what we all have to ultimately do when we need to make a decision. Trust me, going with your gut is far more reliable than rolling the dice on spec work.

I think something like this not only gives your company a chance to communicate to potential clients the kind of work that will really excite you, but it’s also a great way to share with potential clients the type of projects you want to work on and will likely put even more of your passion behind.

So without further ado, here’s ours…

1. More Micro and Experience Sites: sites for which the sole purpose is to be creative, engage, create buzz
2. More Wordpress: We really want to explore and dig deeper with customized Wordpress development.
3. More small and medium business site redesigns: We enjoy working on the big name stuff but we really like helping bring that professional look and feel to small biz and entrepreneurs that takes the business to the next level.
4. Progressive Start-ups: Looking to work with some ambitious web 2.0 start-ups that understand and desire some of the more contemporary design & development trends and aesthetics.
5. Sports related sites: We’re big sports fans, and we’d love to get involved with some sports related projects – especially football.
6. Working with more high-profile brands: We’ve had the good fortune to do some work with Panasonic this year and other big names in the past and we look forward to working on more high-profile projects with more brand names in the coming months.
7. Partner with more agencies and design houses: This is not really a project type, but it is a major goal for us next year which will likely lead to a lot of the types of projects on this wish list!

Seven is a good lucky number so I’m going to leave it there for the moment, but be it through good luck or hard work, we’re definitely planning to make the things on this wish list happen for us soon!

Photo © Steve Ford Elliot