NWM UX Blog

Today I want to address the awesomeness that is Google Custom Search Engines (CSE). Specifically, I will address how to use the Search Element option paired with a non-google search form that will send the query to the search element. I searched far-and-wide for this solution but in the end came up with my own with a little help from Javascript.

I recently moved a client off of a cheap, hosted search solution to Google CSE in order to cut costs and host the search engine results page (SERP) on their domain. Since Google is their target external search engine for which they measure the success of their organic campaigns on, I thought, ‘OK, CSE sounds like the right fit.’

Step 1: Sign Up and Configure with ‘Search Layout’ Option

First things first, to sign up for your Google CSE. Next, plug in some of the settings such as the domain, the pages to search (you can use powerful regex strings to have CSE index only the content that you want to be indexed). Add any Refinements (Labels) which can help your visitors refine their searches by different sections (I’ll deal with Refinements in a later post). Refinements are very powerful. You will either need to pay a very small fee (or be a registered non-profit or educational institute) in order to have an ad-free SERP.

Now, choose the ‘Look and Feel’ from the left-hand navigation underneath the Control Panel.

Google CSE Control Panel: Look and Feel. Select the ’search element’ option

Both the iframe and google-hosted page look-and-feel options would give you the code for both the search form and the results page. But, the SERP is limited and doesn’t give you the power and beauty of the custom search element. The drawback of the search element is that the search form and the SERP are included on the same page. It doesn’t give you a method for receiving the query from a global site-search form from any page within the site.
Read more…

7-Years

This month (February, 2010) marks seven full years of operation. Well, we made it this far.

We could not have done it without you – our customers, contractors and partners.

We’ve changed a lot over the seven years. We’ve evolved, we’ve changed – hopefully for the better.

I admit, it’s been tough, but we are still here – 7 years. Awesome.

Thank you, really. Thank you

Sincerely,
Jason Hoyt, founder and president

New Witness Media, Inc.

p.s. – mention our 7-year anniversary to me in person and i’ll buy you a drink

This article looks at a way to create an easy and flexible image + caption css style when the width of the image is either unknown or could change. This is particular useful for Enterprise clients who use large CMS or asset management systems.

Desired Result

Here is the desired result in a browser. A nicely packaged image and its caption without having to specify the width of the parent <div/> element.

an floated div with an image and caption

Here is our X/HTML code


<div class="image-caption-container"><img src="images/hands.png" alt="hands and camera" />This is an image caption that is longer than the image. By default, the floated parent <div/> container element will extend to the width of the text (as long as it can) if a width is not specified.</div><p>Lorem ipsum dolor sit amet,...</p>
and our CSS code:

/* begin content styles */
.image-caption-container {
float:right;
background-color:#fff;
font-size:0.8em;
padding:0.5em 0.5em 1em 0.5em;
margin:0 0 2em 1em;
-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
border:1px solid #860b0b;
overflow:auto; /* this is used to clear nested floated elements - more on this later */
}
.image-caption-container img {
margin-bottom:6px;
display:block;
-moz-border-radius:0.25em;
-webkit-border-radius:0.25em;
}

Read more…

So, you’ve got your client blogging, generating Fans on Facebook and garnishing followers on Twitter

How do you let them know that their efforts are worth the time and investment?

Enter: Bit.ly — the web analytics and c.r.o. consultants latest “online dremel kit of awesomeness”.

Let’s face it – blogging, tweeting, social networking is a client’s investment of time and money. If you are going to pitch social networking services, then you need to prove that it is working (and that it can pay off).

It’s All About the Conversion

Let’s say it together: “Conversion Rate Optimization.” You’re clients need it and want it – whether they know it right now or not. You’re clients need to convert more and you need to show them how. Multi-variate and Split testing (A/B Testing) should be in all your “I’m-going-to-wow-you-and-make-you-love-me” UX engagements. If you are going to do some seriously-rich and well-rounded testing then you need a more well-rounded set of metrics. Enter the fuller-web analytics picture. Read more…

New Witness Media (NWM) has created our first Facebook application – the New Witness Media UX Blog. The application is a simple widget that gives facebook profiles up-to-date access to the latest blog posts from NWM (this blog).

View the New Witness Media UX Blog application details and add it to your profile.

Facebook Application Help

Email us if you need help using our facebook app or if you notice a bug or a problem with it.

Enjoy our posts from right within Facebook.

Our new jQuery plug-in: blOverlay will help make visually-stunning, chunky, transparent, animated backgrounds for block-level text – especially useful over images. This design style is fairly popular at the moment, NWM even uses it on our home page.

New Witness Media, Inc. home page Feature Headline uses the NWM jQuery plug-in: blOverlay

We thought, hey, this is a beautiful and useful design style. Plus, we’ve recently converted our site to use the tenawesome jQuery javascript framework.

Read more…

In this series, NWM will take a look at the awesome value of Twitter for Online Experience Consultants (and designers, developers, small business owners, etc.).

When discussing Twitter, many people focus on Twitter’s first intent: providing your status updates to your network – let’s call this pushing. For a business, this is extremely useful – it helps keep your brand in the face of your fans and clients. For developers, you want to get the latest news, techniques and industry-related ideas pushed to you, meaning, you want to pull the freshest ideas and news toward you – and Twitter is a great tool for that.

In the old days, we had to actively visit different web sites to get to their content. Then, came the use of push technologies like email newsletters, listserv update notifications, etc. With the advent of XML technologies like RSS, we were able to subscribe to a site’s latest content without having to visit sites. I use the RSS aggregators in iGoogle – it’s highly useful and adds to my personal/professional dashboard for the day. I have my email, bookmarks, calendar and RSS feeds all presented in a single location – brilliant.

Read more…

While researching simple ways to create SVG images based on data visualization APIs we stumbled across Google’s Chart API.  We quickly became quite smitten with the easy tool.  The services creates a nice-looking, slightly-configurable PNG image based on a URI passed to it.

If the graph is to become part of a page then it can simple be the value for the src attribute of an <img/> tag.  In this post we will break down the URI parameters that we used to create the NWM Services Diagram graph on the “About Us” page.

Read more…

We spent hours and hours of our precious development time in order to be able to use Capistrano on a Windows XP development machine in order to Deploy a Ruby on Rails project, hosted on GitHub.com, to a Linux Server (Apache and Phusion Passenger) through a VPN firewall.

Granted, there are a lot of factors involved, but sometimes that happens in our beautiful, cross-platform development and design world. For our developers using Apple Mac OS X it was very, very easy for them. Since my Mac laptop’s hard drive went bust I was stuck using my Windows XP development machine. I’m writing this post in hopes that it will help others like me from raging and defenestrating our laptops.

One caveat: I went through a lot of different steps without bothering to go back over to discover if some of them are unnecessary. As such, some of the steps may be overkill. But at least it works and there should be no negative impacts. However, proceed with caution and at your own risk.

Configuration

Here is my current development configuration:

• Windows XP (version 5.1 SP3)
• Ruby version 1.8.6
• Rails 2.2.2
• gems version 1.3.1
• Capistrano version 2.5.3
• GitHub repository for our Ruby on Rails project
• SonicWall VPN (optional, only necessary for our client environment)
• Linux web server (in our specific case, the client was using FreeBSD*, a Unix-like OS) (thank to @Nighfly for the comment reminding me that FreeBSD is not Linux)
• PuTTY telnet/SSH client and Paegant (an SSH authentication agent for PuTTY)
• Msysgit Git Bash windows client (version 1.6.0.2-preview20080923) from Google Code
• Subversion svn version 1.4.4

Download and install these awesome tools.  If you don’t need to deploy through a firewall then ignore the Sonicwall VPN software – this was just to get into our client’s firewall to their Linux server.  Capistrano is an amazing deployment and task automation tool.  I highly recommend it, not only for Ruby on Rails projects, but for many deployment tasks related to other programming languages.  It simply rocks.

Getting it to work on a windows client, however, was another issue.

So far, you should install all of the above tools.  Follow Github’s instructions for setting up Git on windows.  Pay particular attention to the creation of your SSH-key.  Our git and ssh key configurations are stored in:

C:\Documents and Settings\username\
C:\Documents and Settings\username\.ssh\

Path Environment

Set up your user’s PATH environment like so:

• Add the path to your PuTTY executables: ;C:\path\putty;
• Add the path to your subversion installation: ;C:\Program Files\subversion\bin;
• Add the path to your Git client’s bin directory:  C:\Program Files\Git\bin;

It’s also possible that we had to add our ssh git keys to the Pageant executible – can’t hurt.

Capistrano Recipe

Here is the beginning of our example Capistrano Recipe (/config/deploy.rb):


set :deploy_to, "/usr/path/path/dir" #path on linux server

set :use_sudo, false

From there we just needed to establish our connection to the server from our client development windows xp machine using SonicWall VPN before running the deploy command:

cap -deploy

You should be prompted for the server username’s password and possibly your SSH key password as well depending on how your recipe is written.

We hope this helps at least one frustrated developer out there. Please feel free to post any comments, questions and other pointers regarding using Capistrano and Windows.

We recently updated the design of the newwitness.com web site.  We did it in a record 11 hours and 15 minutes.  No kidding.  We entered a new task in our cms (the now sunset-product Serena Collage  ) at 5:29 p.m. on 17 July, 2009 and finished deploying at 4:34 a.m.  Disclaimer:  we did actually take the PSD design from our now closed UK-based web site, but we updated the master template, CSS files, JS files and images in the above-stated time frame.  Not bad, we humbly admit.

Among the highlights of the change:

• Ported our AJAX/JS framework from prototype + script.aculo.us to jQuery and jQuery-UI.
• (Better) Re-aligned the UI design of our WP blog (this.blog)  with the rest of the site.
• More use of CSS3
• Dropped support of IE6 (site still functions, just using PNG-24 without a user-agent specific workaround.
• Still XHTML 1.1 and CSS3 valid