Jim is a recent Full Sail grad and brings with him a wave of new technology to add to our existing web development offerings. He is proficient in PHP, ColdFusion, JavaScript, XHTML/CSS, MySQL, SQL Server, jQuery, Linux Server Administration and a big list of other technologies but is quick to remind all who will listen that he is first and foremost an object oriented web programmer who simply will not allow himself to be defined by a specific technology or platform.

We knew Jim was a good fit early in the game when he was able to convince our team to change version control systems, AJAX frameworks and explain in detail the benefits of the nginx URL re-writing engine.

While his gaming skills leave much to be desired he has been a great addition to the team over the past three months. We hope to have Jim with us for the long haul and look forward to his growth as an application developer object oriented web programmer!

Welcome aboard Jim Pruetting!

For years I’ve been searching for the perfect task management tool. I’ve tried all the standards, from Bugzilla to Remember the Milk but I always ended up back with Notepad.

My .txt wasn’t available from ‘the cloud’, no logical groups or filtering, and there’s no notion history. However, Notepad is FLEXIBLE! I can add, organize and reorganize my tasks however I want, whenever I want. Crazy, eh?

Enter Todoist

Todoist.com has a lot of the same features as the other tools, but it let me do things MY way! I can label, tree, sort and re-sort to my hearts content. It’s got quick and natural keyboard short-cuts, cool date-parsing date boxes, a full history, the data are fully exportable and the the price is right at $3 a month! The site even has instructional videos for getting over the short learning curve.

Don't want to forget about lunch!

Oh, and plug-ins. I use the iGoogle Gadget, FireFox plug-in, and it looks great on my beloved phone. If only there were a Thunderbird plug-in, then I might just burst into flames. Flames of affection.

And the best part, despite the plethora of features, Todoist has a fast, intuitive and SIMPLE interface. It gets out of the way and lets me track my tasks how I want to. In this age of opinionated software, it’s refreshing for a software product to work for me, instead of against me.

2 thumbs up!

Great quote from Charles Eames.

When executed in a consistent manner, those eloquent details in a design can become a voice to your users. ”Hey, we’re glad you found us. Your user experience is important and we’ve gone the extra mile for you”. Those details can:

• Enrich the overall presentation of information
• Facilitate further understanding of hierarchy & functionality
• Entice a user to explore content
• Keep users (customers) coming back to your website with a deeper appreciation of your product or service

Here are a handful of some delicious design details I’ve stumbled upon lately.

Google Search Results Paging

The “o” above the current page changes from Yellow to Red. Could they have simply left “22″ black and bolded for page indication? Of course. But, they didn’t.

Tinder Navigation

Madebytinder.com’s very top navigation (the color swatches below) swaps the background color of the page. This isn’t earth-shattering functionality by any means, but the detail comes on the mouse hover state. The color swatch has a nice rollover movement, and the increased opacity of the underlying shadow gives it life and depth.

CNN Pull Quote

Extremely simple, yet effective. Love the styling of the graphical quote aligned bottom right providing the text with the perfect padding.

Facebook Loading Sequence

I’ve seen some agonizing and bloated pre-loading sequences during my days as a designer and developer. So, when I come across stripped down versions that are effective, I take notice.

Facebook has a nice touch to theirs. It uses basic rectangles, and displays them directly to the right of the option a user chooses.

The details of the sequence are compact, clean & light.

San Diego Zoo, Polar Bear Plunge

A complete 180 when it comes to pre-loading sequences in comparison to Facebooks. San Diego Zoo’s Polar Bear Exhibit is a rich experience of educational material & games.

When navigating from section to section, this preloader comes and goes so quickly that some awesome detail is probably missed (consciously). Look closely at the yellow/golden bar and how it moves left to right BEHIND the frozen snow directly above. What a subtle touch, providing great 3d perspective. I also love the shadow the overall bubble makes on the snow covered ground below and the font choice.

Kontain’s Sign Up Screen

The colored bands in the bottom left and top right align in proximity with the colors of the forms (orange = username, green = password) on Kontain.

These background images provide a fluid flow of color (from left to right) as a user submits information (from left to right). Slick.

BNET Header & UI Elements

I admire BNET.com’s overall look and feel. Maybe it’s because I love green, or maybe it’s because of the site-wide consistency of little abstract elements sprinkled around the interface.

Check out the very top of their website where they feature articles. The details popping out at me are the exceptional usage of gradients, and slight embossing that helps separate each article. The little plus sign indicates open/close functionality and the type has great contrast from the background.

That plus sign then changes appearance once the article preview is opened (below). And the article name (“The 7 Interview Questions You Must Ask”) is reiterated, larger and in a different font. There’s also a subtle border to the entire box differentiating itself from the elements underneath.

They also use this little arrow-cutout (for lack of a better term) throughout the body of the pages. It’s a prevelant feature to their overall look and feel – and they’re consistent about the treatment for the most part (the angle of the shadows changes occasionally).

Porsche Panamera

I wanted to save this website till last, as it’s the zenith of my examples of exceptional design detail. I could highlight over 100 features from this site because it’s truly remarkable. It was almost sensory overload from a designer’s perspective to see how eloquently everything came together.

So, if I had to choose just ONE detail from Porsche’s site, I would go with this rollover treatment for it’s “Next” button.

The OFF state…

…and the ON state (below) has a beautiful treatment and provides the user with “what’s next?” through some intro verbiage. The smoothness of the animation really makes the detail when navigating “Back” and “Next”. You must see it in action.

Could a basic rollover treatment worked in this area of the site? Of course. But would it be as engaging? Would it motivate users to keep clicking and inhaling the Porsche brand? A small detail that could have a serious impact.

At Caxiam Group, we’re consistently striving to go the extra mile for our customers. When we say “we’re all about the details“, we truly take that to heart. Enrich the user experience, provide quicker understanding of hierarchy & functionality, entice users to click and keep them coming back!

Well executed design details can make a good product great, and that effort up-front can have a major impact for your audience in the short and long term.

Learn more about our Branding & Design Services and thanks for reading! May the details be with you.

Since that time the site has evolved into a comprehensive resource for people to find true meaning and happiness in their lives, and Caxiam Group’s relationship with Paul has evolved into that of a true friend to the team. We are grateful for the opportunity to work with Paul, and are proud to present some of the results of our relationship.

Custom Design

It was important for us to create a design that matched Paul’s message. We shot for a look that was calm, light and uplifting, while at the same time remaining clean and easy to navigate. Here are a few screenshots of some key areas:

Paul’s Home Page acts as a portal directing new and existing visitors
to the areas they are looking for.

The “What Is It?” page sums up the purpose of the site to new visitors.

We created a custom Flash assessment to help new visitors determine
where they are in the Sacred Path, Joyful Journey process.

WordPress Integration

Working on Dr. Paul Dyer’s site has presented some unique challenges that motivated us to learn the inner workings of WordPress’s API. Much of the site is driven on custom programming elements that we feel really stretch the capabilities of WordPress as a CMS platform. Here are a couple examples:

In addition to a custom, tabloid-style layout, custom queries were relied up heavily
to pull supporting content in from other areas of the site.

Paul offers tools to help users along with their Sacred Path, Joyful Journey process. These tools are categorized under one of the three stages of the process, then further categorized by type of tool. Each type is marked by an icon, offering users a clear visual indicator.

Admin Interface

As the project evolved, it was clear that in order for WordPress to continue to be an effective solution, we needed to expand the capabilities of the platform – content no longer fell into the simple post vs. page model. In this regard, the More Fields plugin has been vital. Here’s how we were able to leverage it:

Custom Post Types

More Fields allowed us to create additional categories to organize content. No need to wade through hundreds of posts – Paul’s content is neatly separated into a set a several categories:

Custom Content Boxes and Fields

WordPress’s support for custom fields is a nice addition, but it’s out-of-the-box interface tends to be unwieldy and unintuitive for client use. More Fields allowed us to present custom fields in a clean interface with professional-looking fields that could be logically grouped into collapsible boxes. Additionally, it allowed us to hide WordPress elements Paul didn’t need to use, keeping things uncluttered and relevant:

To top things of, we also made use of the Admin Menu Editor plugin to more logically rearrange and organize the WordPress admin links.

It has been announced that WordPress 3.0 will offer support for custom post types out of the box, so we look forward to trying it out and seeing how the two solutions compare.

Wireframing is a big part of our documentation process, but finding the right tool to create wireframes with has been a long and ongoing process.

Visio

Microsoft Visio was one of the first tools that I put into my wireframing belt.  I started out here because I was already familiar with Visio for documenting process flows and I liked the simplicity that it had for quickly mocking up basic page layouts and step-throughs of process flows.  I still think Visio is a great tool for quick mockups, but it has limitations that prevent it from being a tool we can all use.  For one, licensing would get expensive quickly for more than a handful of users.  Any wireframes that I created in Visio I could only share with clients or other team members by exporting an image format, or somehow convincing them to install the Visio reader plugin on their workstations.  Visio also did not support any interactive features and although I could save a grouping of shapes, say for a “header”, if I needed to make updates to the grouping the changes where not communicated out to the other pages of the wireframe without me manually copying/pasting.  Not incredibly efficient.

Axure

We purhased an Axure license to try and circumvent the problem of non-interactivity with our wireframes, which somewhat crosses the line into Simulation.  Axure was (and still is) a great product for creating interactive wireframe simulations of web pages/applications and allowing client review by providing the wireframe as a click-thru experience.   One of the best redeeming qualities of Axure was the ability to create re-usable “includes” for common page elements (like headers and footers) that would automatically propogate updates to the master includes out to the wireframes that referenced them.   The frustrating thing with Axure was that one of its greatest assets; the ability to export an HTML simulation, made it frustrating to use for pure wireframing and offline reference.  The wireframe/simulations that Axure creates have to zipped into a multi-file folder for distribution, and the end user must unzip them and know to click the index.html file to bring up the simluation.  It is not the most intuitive experience for the non-technically savvy.

And so, the journey continued…

iRise

I will be honest and say that I didn’t spend a lot of time with iRise beyond a few hours of evalution.  The software is vast and seemingly without end!  My one impression from the time I spent with it was that it was not the right tool for the job. Where I needed a simple phillips screwdriver, iRise was an entire store full of tools.  Perhaps I will revisit iRise in the future as needs dictate.

Balsamiq

Balsamiq has been an outstanding wireframing tool.  The interface is simple, the shapes available are logical and appropriate to web application development.  One of the great advantages of Balsamiq is that it is so easy to build wireframes with I can use it in real-time during a client meeting and still participate.  For this same reason, the entire team can use the same tool and the licensing is very reasonable.

Pencil and Paper

The old standbys are what I started with are still some of the best go-to tools in the belt.  Pencil and paper tend to be less obtrustive in a meeting that sitting and tapping away at a laptop, with the added benefit of being able to scribble random addenda in the margins as the flow of the meeting dictates.  Most of my pencil and paper wireframes end up being rendered out in Balsamiq for final presentation.

“But I like the tidy, compact display of a select box,” you say? I agree, it does give you a quick and easy option of presenting a large number of choices without taking up a lot of real estate. But what if you want to maintain that unique look and feel to your site? You don’t want to just toss that ugly standard select box on the screen and call it a day. Sure, you can style it to some extent, but you’re limited in what you can do, and it will never look exactly the same from one browser/OS to the next.

There is a better way. And it’s quite simple. For this example, I’ve styled my select button to look pretty much like a traditional select tag, but since it’s not really a select tag, the styling possibilities via CSS are endless.

The Example

The HTML

As you can see, the HTML is rather simple and it consists of a containing div element, the primary “select” anchor and an unordered list. The list serves as the drop-down that contains all your “option” anchors.

1
2
3
4
5
6
7

<div class="select-menu"><a href="#" class="select-btn">Action</a>
	<ul>
		<li><a href="edit.html">Edit This User</a></li>
		<li><a href="suspend.html">Suspend This User</a></li>
		<li><a href="delete.html">Delete This User</a></li>
	</ul>
</div>

The CSS
First, style the containing element. This class will give the nested elements scope. You can declare a global width here and/or style widths individually depending on the initial option text inside your select button. Either way, you’ll need some kind of width or float to keep the select button from expanding to the full width of its parent.

1
2
3
4

.select-menu {
	display: inline-block;
	width: 100px;
}

Next, style the anchors.

1
2
3
4

.select-menu a {
	display: block;
	text-decoration: none;
}

And now the select button itself. I gave mine a background graphic to mimic the down arrow seen on a typical select element.

1
2
3
4
5
6

.select-menu a.select-btn {
	padding: 2px 6px;
	color: #555555;
	background: #FFFFFF url(select.gif) no-repeat right;
	border: 1px solid #CACACA;
}

The select button’s hover and selected state.

1
2
3
4
5
6

.select-menu a.select-btn:hover,
.select-menu.open a.select-btn {
	color: #555555;
	background-image: url(select_o.gif);
	border-color: #9F9F9F;
}

Here we have the drop-down list of options. By default, it is hidden and positioned absolute so as not to disrupt the surrounding layout. No need for an explicit width here. The drop down options will be as wide as they need to be, regardless of the width of the select button itself. (Take that, IE!). If you like, you can give it a minimum width so it is never smaller than the select button.

1
2
3
4
5
6
7
8
9
10

.select-menu ul {
	display: none;
	position: absolute;
	margin-top: -1px;
	white-space: nowrap;
	background: #FFFFFF;
	border-bottom: 1px solid #9F9F9F;
	border-left: 1px solid #9F9F9F;
	min-width: 99px;
}

And finally we have the “option” elements themselves. I gave mine borders, but you can style yours however you wish.

1
2
3
4
5
6
7
8
9
10
11
12
13

.select-menu li {
	border-right: 1px solid #9F9F9F;
	border-top: 1px solid #CACACA;
}
 
.select-menu li a {
	padding: 3px 6px;
	font-size: 11px;
}
 
.select-menu li a:hover {
	background: #EEF5DF;
}

Oh, and without this little bit, we have no dropdown. When the “open” class is applied to the parent div, the dropdown list will appear. How do you apply this? See the script below.

1

.select-menu.open ul { display: block; }

The Javascript
This script relies on the Prototype Javascript framework, so if you’re not using it, you’ll need another way to toggle the “open” class. The first function is a simple toggle. You can apply this to the onclick handler of the select button and the dropdown will show/hide when clicked.

1
2
3
4

function toggleSelectMenu(obj){
	$(obj).up(0).toggleClassName('open');
	return false;
}

This second function provides a more unobtrusive method for activating your select buttons. It will detect when focus leaves the select button and hide the dropdown, much like a traditional select element.

1
2
3
4
5
6
7
8
9
10
11

function initSelectMenus(className){
	var actions = $$(className);
	actions.each(function(item) {
		Event.observe(item, 'click', function(e){
			item.up().toggleClassName('open');
		});
		Event.observe(item, 'blur', function(e){
			setTimeout(function() {item.up().removeClassName('open')}, 250);
		});
	});
}

Just insert this line in a <script> tag at the bottom of your page and voila, you’re done!

1

Event.observe(window, 'load', function(){initSelectMenus('A.select-btn')});

The Conclusion
As you have seen, the markup and CSS are pretty straightforward and lightweight. And there are some distinct advantages over using a traditional select tag to navigate. First, you can style it however you like and pretty much guarantee the same appearance across browsers. Secondly, you have full control over the width. You don’t have to put up with IE truncating your drop-down options if you want the select box to be shorter in width. Finally, you don’t have to mess around with forms just to navigate from one page to the next. The links do the work for you.

GOOD.is may be one of the best organizations when it comes to infographic design. There’s some top notch stuff there, and I could spend hours browsing through their archive.

Recently, I found some fantastic SEO infographics on Elliance’s website. Whether you’re an SEO expert, an ameatur looking to boost your knowledge, or know nothing about how Search Engine Optimization works – I think you’ll find the below infographics helpful and/or interesting.

Also, check out this blog post on SEOmoz. This “4 Essential SEO Infographics” is a good read.

SEO Factors contributing to optimal rankings

Long Tail SEO

(Long Tail – what’s that?)

The Algorithm

Organic vs. Paid

Ecommerce SEO tips

Search Engine Click-Thru Behavior

Thanks Elliance – very inspirational stuff guys! View more infographics from Elliance

The great thing about the USIC project was that it was so much more than a one-off ecommerce store front. What we really built was a customizable, skinnable, ecommerce web engine that offers direct ERP integration.  One of the goals of this project was to create an engine that could be customized with very little design time. Because this ecommerce engine is meant to serve multiple markets for closed audiences (invitation only, employees only, etc.) the client was more concerned with functionality than with creative bells and whistles. These sites are not meant to serve your traditional retail customer.

Some of the measures of success for this particular client were time to market, cost to customize for other programs, and ability for developers, not designers, to create themed sites. This will allow a greater number of developers to release a greater number of customized themes in a shorter amount of time. If all goes as planned, this ecommerce engine will support hundreds of similar sites for this client.

Compare and contrast the above with some of our recent work for B2B ecommerce clients where design was more of a factor.

Checker Distributors – Not only did we provide them with a custom ecommerce design, we built for them a color analysis tool that catalogs the entire color spectrum found in each individual fabric found on the site. (Across 30,000 fabrics that represents almost 500 billion color values!)

Schweppe – Schweppe distributes professional kitchen products and serves a wide B2B market as well as a retail market. They needed a site that was polished but not overly creative for the B2B crowd.

Toolweb – This will forever be a favorite project of mine, if for no other reason than their requirement for us to make the pages difficult to steal product data from. They basically asked us to break every SEO rule in the book to ensure bots couldn’t easily steal their product information across tens of thousands of dynamically generated pages. We complied by building real-time image watermarking, velocity controls, and rendering all product descriptions in a Flash format that renders on-the-fly. We also built an engine that allows Toolweb to outsource their data to approved third-parties and have their own real-time image watermarking applied.

This is what I love about our group. Four ecommerce projects from four different clients ended up being nothing alike yet all were accommodated in their individual needs. This is why we love building custom solutions. Flexibility up and down the chain!

In the works are nine more custom ecommerce solutions for three different clients. We’re currently in the strategy and planning phase with these clients so I can’t share any more at the moment. My hope is that I’ll be able to share some of our strategy and planning methods once we conclude these sessions. Check back for details!

Though we sincerely appreciate recognition from such organizations, one of the true motivators for our team is really the recognition that comes directly from our clients. When our customer’s expectations have been exceeded and they are demonstrative about it, a warm smile is put on our face that a small trophy cannot replicate (though we do like shiny things to place in our new office).

Today the Caxiam team received this handwritten Thank You note from one of our Wholesale Distributor clients located in Indiana. Joe & Will helped shape this custom ecommerce website from the ground up, and provided exceptional customer care throughout the length of development.

Along with the above letter from the Classic President & team, Will was gifted a box of chocolates (that unfortunately for him, I got my hands on) and a board game for Joe. Awesome!

So what evoked such gracious gifts? Glad you asked.

We provided Classic Products with our custom ecommerce development services to build a retail shopping solution that interfaces with their existing wholesaler order and inventory management system (PRISM). The scalable solution gives Classic’s Custom Imprint division the ability to offer a retail shopping experience for their partners. Those partners can then provide their own employees with custom imprint clothing/accessory online ordering.

www.usicstore.com

Our ecommerce solutions are never boxed or off the shelf. We don’t implement a cookie-cutter solution nor do we believe that this type of web technology works for customers with unique needs. Custom Ecommerce Design and Development is about understanding the inherent needs of a business, and then customizing features and tools to meet those online needs. In Classic’s case, they needed a partner that understood their Embroidery Division intimately and then could build a solution to maximize their value to Classic’s partners.

We know how to make our customers happy, and apparently they’ve discovered that handwritten Thank You notes, board games and chocolates keep us producing solid work.

Learn more about Caxiam’s Ecommerce Solutions or Contact Caxiam Group today to learn more

Health First Pro-Health, located on Florida’s Space Coast, is a state-of-the-art health and fitness center dedicated to offering a positive, family environment to maintain or improve your fitness level.

The website features a custom calendar application that manages each of the 4 location’s fitness calendars.

Visit www.healthfirstprohealth.com or read more about the solution Caxiam provided