After the design, Tim coded each site. The main corporate site, leavittpartners.com, is built using WordPress and features three Custom Post Types: the slideshow on the homepage, the homepage content and the Team page.

The main Team page is broken up into staff levels but each worker is entered into the system the same way. A checkbox is used to differentiate their level. Also, another checkbox is used to flag if the worker is part of one of the several different sub-teams in the Leavitt Partners corporation. The individual team page highlights the workers accomplishments and also calls in their author RSS feed from the blog as well as any news highlights.

The blog is a straight forward WordPress install that functions like a typical blog. The newsroom, powered by NewsCactus, is a custom theme built around the NewsCactus framework.

We are very pleased with the result and hope these three sites will help Leavitt Partners continue to grow.

Leavitt Partners Homepage

Leavitt Partners Team Page

Leavitt Partners Team Single Page

Leavitt Partners Newsroom

Leavitt Partners Blog

Chad, 22 Tools for Testing Your Websites Usability

Luke, Analytiks iPhone App
A little while ago I stumbled upon this little app for my iPhone. For those of us that don’t sign in to our Google Analytics often but know we should this app will be very valuable. Analytiks shows me just the important information I’d like to know about my websites on my phone. I can check it quick and get back to whatever else is going on that day. The interface is quite nice. I would ditch the rusted sign look myself but other than that it is fantastic. It is 99 cents in the app store.

Benjam, impress.js
It’s not much in the way of content, but the way that content is displayed. It’s simple… yet eye catching and very intriguing. Makes me very excited about where the web is heading.

Methods Return the jQuery Object
It’s important to remember that most methods will return the jQuery object. This is extremely helpful, and allows for the chaining functionality that we use so often.

$someDiv
.attr('class', 'someClass')
.hide()
.html('new stuff');

Knowing that the jQuery object is always returned, we can use this to remove superfluous code at times. For example, consider the following code:

var someDiv = $('#someDiv');
someDiv.hide();

The reason why we “cache” the location of the someDiv element is to limit the number of times that we have to traverse the DOM for this element to once. The code above is perfectly fine; however, you could just as easily combine the two lines into one, while achieving the same outcome.

var someDiv = $('#someDiv').hide();

This way, we still hide the someDiv element, but the method also, as we learned, returns the jQuery object — which is then referenced via the someDiv variable.

The Find Selector
As long as your selectors aren’t ridiculously poor, jQuery does a fantastic job of optimizing them as best as possible, and you generally don’t need to worry too much about them. However, with that said, there are a handful of improvements you can make that will slightly improve your script’s performance. One such solution is to use the find() method, when possible.

// Fine in modern browsers, though Sizzle does begin "running"
$('#someDiv p.someClass').hide();

// Better for all browsers, and Sizzle never inits.
$('#someDiv').find('p.someClass').hide();

The latest modern browsers have support for QuerySelectorAll, which allows you to pass CSS-like selectors, without the need for jQuery. jQuery itself checks for this function as well. However, older browsers, namely IE6/IE7, understandably don’t provide support. What this means is that these more complicated selectors trigger jQuery’s full Sizzle engine, which, though brilliant, does come along with a bit more overhead. Sizzle is a brilliant mass of code that I may never understand. However, in a sentence, it first takes your selector and turns it into an “array” composed of each component of your selector.

// Rough idea of how it works
['#someDiv, 'p'];

It then, from right to left, begins deciphering each item with regular expressions. What this also means is that the right-most part of your selector should be as specific as possible – for instance, an id or tag name.

Bottom line, when possible:

• Keep your selectors simple
• Utilize the find() method. This way, rather than using Sizzle, we can continue using the browser’s native functions.
• When using Sizzle, optimize the right-most part of your selector as much as possible.

Context instead?
It’s also possible to add a context to your selectors, such as:

$('.someElements', '#someContainer').hide();

This code directs jQuery to wrap a collection of all the elements with a class of someElements – that are children of someContainer – within jQuery. Using a context is a helpful way to limit DOM traversal, though, behind the scenes, jQuery is using the find method instead.

$('#someContainer')
.find('.someElements')
.hide();

I hope this first installment has been useful to someone out there in the interweb, and if not, maybe my next few will be!

Luke, Tuesday Total Textures

Tim, Magento Project Guidelines for Designers
Magento is a beast and we all know it, however, TutsPlus comes through again with a great walk through of the basic Magento views. I have been guilty of overlooking the seldom used views, but this guide will walk you through all of them to be sure your design elements are consistent throughout the site. The part I like most about the article though is the FREE PDF download that I highly recommend sending to a client as soon as you can to help educate them about the ins and outs of Magento.

Benjam, New to PHP 5.4: Traits
PHP 5.4 is right around the corner, and one of the new features added to this version are class traits.  I won’t go into too much detail, you can read the blog post for that, but it makes reusable OO code even more reusable by allowing multiple unrelated classes to pull in the same traits from a master trait object.  Like built-in mixins.

Here’s what happened. Every Saturday morning for a month the site shut down. When we called the hosting company, we were put on hold to talk with someone, like that credit card commercial where the man says “This is Peggy.” We were told there was an out of control script running. After multiple weekends we finally got them to tell us what the script was. It was the index.php file which is their homepage. So apparently the hosting company promised unlimited hosting, but had a cap on CPU usage and when people came in droves to the site on the weekend to get information on their product, it shut the site down. We’ve seen this over and over with only slight variations to the story.

What I think is interesting here is to look at the economics. In order to host a bare bones cheap price, the formula is always the same: huge mass marketing, customers are one of thousands or millions, outsource the call center out, and limit access to control the hosting. Though these methods are great for lowering the cost of hosting, they make it nearly impossible for your developers to do much if the site comes down.

What I think people seem to be missing is another calculation, what is the cost of your site coming down? As I mentioned earlier, we saw this again recently but with another company. It was exactly the same kind of thing, the marketing firm said use our cheap hosting, client does, site goes down during their peak traffic of nearly 4,000 visits to the site. My guess is, in this client’s case and the other one I mentioned, literally thousands to tens of thousands of dollars may have been lost in sales in order to save a few hundred dollars a year in hosting.

My point? This is business 101: Don’t step over a dollar to save a penny. Hosting often falls into this category and people think they can go cheap on it. We disagree. If you own a premium website and you are deciding on hosting, ask yourself, if it shuts down how much do I lose an hour? If that number is high or even more than a few hundred dollars an hour, here is what you should do:

1. Find a hosting company that your developers can work with, including support from people who’s true native tongue is American English, or at least the language you speak.
2. Make sure the developers (if they are smart) can fully access the server so that when it is down they can do something about it. If they are not smart, your problems may be greater than just hosting.
3. Monitor the server to make sure it stays up and have the monitoring service text them if it is down, so they can jump in to fix it.
4. Pay your developers or System Administrators to keep the server up to date with patches and other scripts to help prevent malicious attacks on the server.

Unfortunately all of these things do require a small premium, but for most of our clients, the value far exceeds their cost and buys peace of mind that their internet presence is better protected and monitored. If you are really short on cash I think a better idea rather than going cheap on your hosting might be to cut your scope down. If you are interested in our hosting and/or other services let us know. We’d be happy to get you a free quote or consult with you what you should be doing.

When it comes to site performance, there is only one caching plugin that needs to even be talked about and that is W3 Total Cache. This plugin is so complete that it is shocking. It is packed with features and accounts for every type of WordPress user. It is very easy to configure and it actually works! I run a Lacrosse news website where I recently installed W3 Total Cache. According to the Google Analytics Site Speed metric, from September 17 to October 16, the average load time was 3.47 seconds. From October 17, the day I installed W3 Total Cache, to November 16, the average load time was 2.36 seconds. That is a difference of 1.21 seconds! The plugin also shows your Page Speed Report on your Admin Dashboard so you can see how well your site is performing. Every time I visit the site I am pleased with the results.

Every once in awhile, a WordPress install will be compromised and hacked. This can cause huge headaches and hassle if you are unprepared and don’t have a backup of your site. The remedy for the problem is to backup your database and files regularly. For database backups, I use WordPress Database Backup. It is very easy to use and you can customize what database tables will get backed up. Usually you want to backup all of them. I also love it because I have automated the process so I don’t have to worry about it. The plugin can be configured to send backups on a schedule that you choose. You can have it send Once Hourly, Twice Daily, Once Daily or Once Weekly. I have my lacrosse send it Once Daily. To continue the automation, I have setup a filter in Gmail to automatically archive the message so I don’t see it come in but I know it’s there! To backup files, I have to do it manually through FTP but most hosting services will offer a solution in some form or another.

Everyone who owns a site wants to have visitors and be found on Google. I’ve found that the WordPress SEO plugin is top notch when it comes to SEO. I love how it adds an admin box below your post or page that is stacked with options. It even provides a snippet of what your page will look like when people see it in on Google Search Results. You can also set a Focus Keyword, SEO Title, Meta Description and Meta Keywords. The Focus Keyword is cool because the plugin will tell you if you are using that keyword in your Article Heading, Page Title, Page URL, Content or Meta Description. Using this plugin will make you actually think about your SEO rather then just inserting words.

Along the same lines as SEO, I highly recommend having a sitemap for your site. For this, I use Google XML Sitemaps. I like how the plugin tells me the last time a sitemap was generated. It also tells me if Google, Bing and Ask.com were successfully notified. It’s a great little plugin that will help your site get noticed.

You’re probably saying to yourself, “What about a social plugin?” To that question, I would simply reply that I prefer to use the tools provided by the developer. I think that Twitters Tweet button and the Facebook Like button are perfect. If those two don’t tickle your fancy, then I would probably use AddThis or ShareThis.

What plugins do you use?

Mark, Your Landing Page Sucks!
When we do our planning here at Code Greene we always wait until the end to do the homepage with our clients. The homepage of any website in my opinion is often the very most important page of the site. The homepage acts sort of like the grand unification of the website. I see the purpose of the homepage is to be a place that user’s initial reaction is “oh this is a good site” and secondly its used to point them to the most important parts of the site. In some cases a site can be really flat and the homepage  or landing page may do almost all the work of the site, in those cases it has to be perfect. Recently I saw an article on landing pages and thought it further delved into some good examples. Check it out and rethink your homepage or landing page if it sucks.

What all this has meant to us at Code Greene is that finally more and more of our customers are asking us to design and build for these devices in addition to regular browsers. It has been our philosophy to not venture down dark and lonely roads, so we will often sit back a little to see where new technologies are headed before diving into a pool with potentially only one foot of water in it. Admittedly there have been times we’ve missed waves, but there are other times we’ve ended up saving ourselves a lot of wasted energy. We are at the point that cross device compatibility is now a well lit path we are going to travel on.

There are three different paths that can be taken to develop for these different technologies which are:

1. M.versions approach
2. App development
3. Adaptive/responsive design

It is sometimes hard to decide which path is best so I will explore each and tell you what we will most likely do the most of and why.

M.versions stands for Mobile Versions.  It is basically an approach where the server asks the device what are you? If it comes back saying I am a mobile device, it will then call up a mobile version of the site, which will be smaller and is usually a cut back version. The downside to the m.versions in our opinion is the potential for double work. Coding a regular version and an m.version(s) will inevitably will lead to more coding.

The App approach is probably the most difficult (at least if you are doing an iPhone app), the process to register with Apple and review your app with them is tedious, time consuming, and you could be rejected. Nevertheless, apps have a place and we see people making fortunes through apps. Nonetheless, because our focus is typically on more of a results driven basis, we don’t see a lot of business app requests. The other thing to consider, which to me seems like common sense, but sometimes isn’t seen by the customers, is if you build an app version of your website, at the very least a customer will need to find that app and download it. If you were selling online for instance, where most decisions are being made impulsively, there is high risk that in those two steps you could lose a sale. To support this, I recently read a review of the Magento Mobile version where it was reported that 66% of people surveyed would rather have a browser version than go to all the trouble to download an app.

Lastly, adaptive/responsive, though not a new idea, has re-birthed itself better. For a long time it has been possible to code a site to scale to different browser widths. Now it is just easier. The old process was significantly more labor intensive, requiring several little calculations.  In contrast, the new process works using percentages, eliminating the tedious work, making this a viable and good option. In our opinion, the adaptive technology couldn’t have come at a better time. However, there is a sort of a catch.  If a person has already coded their website, the entire site would have to be recoded to accommodate the adaptive/responsive functions. So, to put it simply, this is something that should be decided upfront and planned, designed, and coded that way from the start. Otherwise, you might be best off with options one or two as an add-on to a current site.

In summary, we feel increasingly more convinced that the growth on the new devices cannot be ignored, and we are primarily recommending the adaptive/responsive approach when making a choice between the three options. If you are interested in learning more or want us to plan out your next project, let us know.  We’d be interested in helping you accommodate your customers who may be seeking your products or services through other devices beyond the traditional browser.

Which version of a mobile website have you tried? Sound off in the comments below.

Mark, Art and The Web Texture
I thought this was a nice article and analysis of Textures by Nick Petite. Though to many people texture may seem like a subtle thing we feel it is an important part of a website for creating the right mood. The thing that Nick points out is how much more dynamic a website can seem once a more interesting texture is added. In web design, I personally really like the layered texture strategies because it helps to neutralize an otherwise potentially overbearing texture, Nick covers the gambit of options and provides some examples, check it out.

Brian, JavaScript Powers Linux In A Browser
I get asked all the time ‘Why Linux?’ and ‘How lightweight it is?’. My usual reply references how Ive seen a Linux web server run off a 2GB thumb drive, but this article trumps even that. With all the overhead the operating systems of today require, people usually assume a servers absolute minimum is even higher. Running Linux in a client-side script like this just blows my mind!

Saxton Horne came up with the design and user interface, opting to go with a one page site that scrolled vertically. A sticky left navigation helps users get to where they need to go. The Work section displays the latest spaces that have been transformed. It utilizes a hover state and jQuery toggler to open and close the section of content, allowing for a compact portfolio that gives the user only what they want to see.

The Product section utilizes more jQuery to shuffle through some of the products Inside Out uses when they develop a new space. A simple About Us infographic and a simple Staff section, followed by a blog complete the overall user experience.

A footer with a Google Map and social media links round out the site. In just a few moments, a user knows everything they need to with excessive clicking or page views.