I read about the facelift of the Basecamp homepage on SVN and several small but important things jumped out at me when I broke down the layout of the page. So I’m doing my OWN critique and presenting MY thoughts on how I would improve the design.

There were of course several comments on the post, most either in favor of the design or discussing the ramifications of the A/B test 37s conducted to decide on the final design.

The things about the redesign I noticed immediately were:

1. the header: in my opinion, lots of wasted space. Though the tagline was very effective and grabs attention immediately, the icons and visual didn’t seem to clearly communicate the message. For an existing user, the icons make sense, but for a new user, they may seem a little more ambiguous. Finally, the initial CTA [See Plans and Pricing] is asking me to take action too soon.

2. The videos act as credibility builders but here, I’m invited view these videos before I have a real idea of what Basecamp is, and why I want to see how others are using it. Good asset and information, not the right placement on the page.

3. These are the assets I feel best illustrate the key messaging at the top of the page. The user sees these important bits only if they hang in after deciding whether or not to view the videos and then continuing to scroll down the page.

3a. I can see clicks coming from this point, but with an effective action point at top and bottom I would think there’d be no need for an action here. It also seems to break from the look, feel and style of the rest of the page with the watercolor brush texture behind the link.

Original Basecamp Homepage (Full Screen)

My Humble Solution

1. Simplify the header; focus on the key message; Grab their attention and give the user an immediate pitch and a quick leadin to credibility.

2. Move the screenshots up on the page; immediately present the user with the key benefits of the product

3. Now maybe the user has a good sense of what Basecamp is, give them a large obvious call to action option followed by a secondary option [Take a tour of Basecamp] to get more information before committing.

4. Now, if they still need more convincing at this point, the last half of the page groups together more credibility builders, supporting info and benefits.

Basecamp Homepage Revised (Full Screen)

Obviously this a rough, thrown together composition. I’m also of course not privy to any of 37s marketing goals or objectives but what I think this layout would accomplish is better focusing on the selling points of the product at the top of the page, presenting the primary benefits that support the key message and clearly presenting users with a primary and secondary call to action.

One of my main goals was to condense the header, which is one spot where I think I failed in my solution. My primary CTA button may be a little larger than necessary too but hey, it’s meant to grab attention.

As I said, this is simply my own personal opinion on what I would do to improve this page. Obviously 37s has done something right over the years so who’s to say their formula won’t work perfectly fine as is. It’s an exploration and an exercise in critique and discussion is welcome. I’d love to hear thoughts!

It just so happens we recently launched a website for Audet & Partners, so we had some good insight to share. Read the article at http://lawyersusaonline.com/blog/2010/06/29/choosing-pictures-for-your-website/

If you pay any attention to the cable industry / Internet industry you know there is a great speed race going on. All the major cable companies, communication companies, and Google are in a race to get high speed to the masses.

We’ve been told for the past few years that broadband is fast, just like DSL was fast and 56k was fast. But the truth is, there is a long way to go before we reach the possibilities of true high speed Internet. One thing is for sure though; everything will change with a true high speed Internet. Yes, that’s right. We are in for another technology revolution. We just don’t know what it will look like yet.

Google, it’s always Google.

Recently Google has launched a Fiber for Communities program that will deliver 1GB per second speeds to hand selected communities around the country. This program will cover anywhere from 50,000 to 500,000 people. The 1GB speed is approximately 100 times faster than current high speed connections.

Here’s the catch though, Google doesn’t have any plans to expand the Fiber for Communities program. So why would Google put time and resources into creating a 1GB network for only a small group of communities? In a word, discovery.

Google is about data, information, indexes, providing you with communication. And they want to provide you with that information and data 24×7, 365 days per year. Google will not be the Internet provider of the future, but they are preparing to provide everything else.

Google is doing what Google does, they stay ahead of the competition. By putting the Fiber for Communities program together, they can see what home and office user do with the newly acquired speed. They can provide special web services, portal, etc just for this community. What are the possibilities when you have 1GB per second? That’s what they want to find out.

The 10GB Age

Just for fun, what would a 10GB per second Internet world look like? Let’s take it a step further, what would a 10GB per second Internet AND wireless data look like? We’re talking instant data from any location on the earth.

Here are a few of my own guesses.

True “On Demand”

As much as our current cable companies want us to believe that they are providing “On Demand” services, they aren’t. When I go to my current cable company On Demand menu, there are a few hundred movies there and they are constantly being removed and updated in a cycle. Not exactly revolutionary.

In the 10GB world you would turn on your TV go to “On Demand” and be able to search for every movie ever made from the beginning of cinema. Every TV show, every commercial, every video game, every everything! It would be delivered to you instantly with a click of the button in HD quality. In the 10GB world you can also throw out the wired restrictions. How about getting a full HD movie delivered directly to your cell phone in perfect quality? Now that’s true “On Demand”.

As you can imagine the numbers of movies, tv shows, etc, would be extremely large. There would be so much data and information that we would need a logical, accurate way to browse and search. Google anyone? Yes, the future On Demand might be provided by your Cable Company but don’t be surprised if the search engine is ran by Google. That Fiber for Communities program is not sounding like such a bad idea now, is it?

True Video Phones

I keep stating “true” in front of the title because we don’t actually have the services we think we do. The corporations do a good job of making us think we have these futuristic devices, but we really don’t. How many times did Captain Kirk have a dropped call on the Enterprise? You see my point.

In the 10GB world you will have a high resolution video camera that will instantly stream your video and voice over the phone to anywhere in the world. Your picture and audio will show up on the receiver’s video phone in perfect quality and tone. No dropped calls, no pixilated videos, no delays. Just true video calls on a handheld phone.

Data Centralization

My biggest complaint about all the technology I use now (office computer, home computer, email, phone, iPod, car navigation, etc,.) is that they can’t and don’t communicate. I want my GPS navigation system to be able to instantly access any address I have in my address book, email, or on my phone. I want my home computer and my office computer to be in sync all the time. I want to be able to send my wife a song instantly from my iPod. I want instant transfer and sync from all my devices, all the time.

The 10GB world will provide instant data centralization to all my devices. Even the devices I can’t imagine yet. How about setting your DVR from your car’s computer system? How about checking the grocery list stored on your refrigerators computer system while at the store?

The Death of the Internet

…as we know it. The Internet isn’t going anywhere, it will still be here. You just won’t recognize it. The Internet wasn’t created with high speed in mind; the entire infrastructure was built to delivery small files over large distances. Web pages were created because they were simple and effective. But web pages are not essential to the Internet, they aren’t even logical. Web pages in the future will be phased out very much the same way that the newspaper and print world is dying a slow death. It’s inevitable.

As humans we want to see, hear and experience our media. It’s natural. When I go to the NFL website, I want to see videos, watch highlight, hear analysis. Yeah I’ll read articles sometimes, but I would gladly watch a video on the same subject.

That’s true of the vast majority of website we visit each day. We want video, we want audio, and we want instant streaming video updates. Instead of going to a website and reading the introduction about a company or product, we will be provided with a video that let’s us experience it. That’s the future.

The Big Merge

Now that the 10GB world has killed the Internet as we know it, where does that leave us? It brings us to the big merge of Internet and Television. Yes, in the 10GB world there will be no difference between and TV and a computer. Your living room TV will be able to provide you with everything your computer can and vice versa. Instant data, instant communication, instant everything, all the time.

The One Thing I Know For Sure

It’s fun and natural to look down the road to see where our technology is taking us. By looking at our technology today, we can see what’s possible in our future. However, the one thing I know for sure is that the biggest benefit of the 10GB world is not listed in this post. That’s because it hasn’t been invented or thought of yet. That’s the real exciting idea of the true high speed world; someone will invent something we won’t be able to live without. Just like most of us couldn’t imagine living without our current inferior Internet now. Someday we will look back on these medieval days of technology and wonder how we got anything done. I can’t wait.

But for now, I’ll just get back to creating websites on my slow 8MG “high speed” connection.

BTW

Just for kicks, here are few more bullet point ideas on what I think the 10MG world would provide:

• Live events streamed from hand-held devices, instantly to computers around the world.
• Advertising and commercials will be more personable, they will be directed at you as their target audience. You will click on commercials within a TV show or a product within a TV show which brings up information instantly. Want to know where to buy that jacket that Brad Pitt is wearing? No problem, just click on it.
• At first all the data will be noise, but the smart companies will figure out how to make it organized. Enhanced, easier, smarter.
• Robot Ninjas. Not really anything to do with 10GB world, I just would really like to see a robot ninja in action.

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

When shopping for quotes most times a client’s first question will be “how much does a web site cost?”. This is much like walking into a car dealership and asking how much a car costs. Which car? With what features? You may find what you are looking for at two different places for a minimal difference in price but one dealer may upgrade the wheels, the other may throw in air conditioning. Which is a better deal? Well, do you live in Alaska or Arizona – it all depends on your needs and your perspective of what is important.

A web site can be just a web site, but if you really assess your businesses needs it can be so much more. When the focus of building your web site becomes meeting customer needs, improving the qualities of your brand and bringing them to life online through design, content, and functionality, “How much does a web site cost?” becomes “How much of an investment should we make to achieve our businesses goals?”

For your clients, a website can provide a compelling, interactive experience with your brand, product or message – at a very affordable price by comparison to alternative forms of marketing such as television, radio or print. It’s online marketing. It’s advertising 24 hours a day, 7 days a week, 52 weeks a year. Advertising that your customers can control and influence in some cases. Only through an effective web site are your customers able to directly interact with your brand and every interaction your customer has with your brand can provide your business with valuable insight into their needs, habits, concerns and suggestions. In the long run, the investment in your web site can pay off in improved customer loyalty, greater brand awareness and a healthy bottom line.

Now these two talented individuals have come together to create a highly focused, creative web development agency – what we like to call a freelance partnership. We are *12foot Interactive.

We started a conversation about our individual thoughts and plans for our freelance careers and found a lot of common ground in terms of our individual philosophies, how we wanted to run our businesses and the focused skillsets we wanted to provide to clients. In a little less than a month we found ourselves collaborating on different projects and decided simple collaboration wasn’t enough. We came to the conclusion that if we were to create a formal partnership, we could greatly expand the offerings of our two operations and service clients even more efficiently.

*12foot Interactive will forge ahead with the sensibilities, flexibility and drive of any motivated pair of freelancers with the added benefit of our agency experience in problem solving, following a tried and true design process, success in delivering various project sizes for a wide range of businesses and budgets, and knowledgeable and responsive client communications.

With our complimentary skill sets, there are very few services we found that we couldn’t provide for our clients, but our focus will be on user centered creative front-end design and interactive experience site design & development.

We are excited about what the future will bring for *12foot interactive and we look forward to being a leading and active member of the web development community and providing design solutions that foster financial success and brand engagement for our clients.

The project required a quick turnaround and a very tight deadline. We happy to report we were able to deliver the project on time without a hitch!