Steve Grothmann's Blog

Benefits of Peer Usability Reviews

Tue, 17 Nov 2009 00:00:00 -0500

As often as possible Newfangled holds professional development sessions for the Project Management teams to focus for an afternoon on a single area of web development. These valuable sessions have allowed us to step out of the workflow and exchange ideas about different aspects of our roles here at Newfangled. During a discussion about web usability I was struck by the variety of my coworkers' impressions about any given site's usability. As project managers we agreed on general practices, but as users, some individual preferences stood out. Sometime after this session my colleague Katie Jamison suggested that she and Jason Adams and I meet weekly to pass around our current prototypes and trade ideas about information architecture and usability. These meetings have proven so valuable that I now consider them a necessary part of every site-building process. In even a fifteen minute review, two new sets of eyes clicking through a prototype can pinpoint usability issues that those closely involved might miss. It is surprisingly easy for simple efficiencies to be invisible, and since there is not usually time to leave a project and return with an objective eye, usability review sessions are an efficient way to get fresh ideas.

A Recent Example

On a current project for SteriPEN that is now in the whitescreen phase, the client's marketing team and I discussed how to display external links to online retailers that may carry different combinations of SteriPEN products. Before two internal review sessions, on the Product pages, links from sidebar widgets went to a Buy Online page where users could filter the online retailers by the category and product.

Here is a Product page at that stage of the prototype, with Buy Online in the sidebar...

...linking to this page, where the correct retailers were to be pre-filtered.

It took a fresh reviewer to suggest pulling the filtered retailer links right into the sidebar of each product page.

In a third review, another set of fresh eyes suggested that the retailers maybe should not be placed in the sidebar, since the sidebars could be reserved for more universal callouts rather than the page-specific function of displaying retailers for this individual product. So we placed the retailer links across the bottom of the page.

It's no news that objective critique can aid any creative process, but I am still amazed by how little time it takes a short review session to produce significant ideas for improvement.

A Home Page Redesign for DataSynapse

Fri, 23 Oct 2009 00:00:00 -0400

DataSynapse will soon roll out this new homepage design, which began in the need to focus attention on four of the business's strategic areas. Our designer Justin's work was well received, and I think we really pulled off a focused upgrade that refreshes the look and meets practical needs (see the scrolling customer feature strip below.)

Here are some before and after screenshots showing how this site met the strategic goal of highlighting four specific aspects of this business while also updating the look and general usability of the homepage.

Here is a before shot of the top of the homepage. The various features were all still serving their purposes; customer quotes were rotating through, the most recent news releases were being featured, etc, but four specific business-areas needed emphasis and it simply seemed like time for a new look, without undertaking a total site redesign. Also, some rebranding was required due to a recent administrative change.

Here is an after shot of the top of the homepage. Users now change the top marquee message by simply mousing over the four large buttons that signal a new strategic initiative for the company. The buttons click through to the appropriate pages. This feature is very easily controllable in the back end; slides are simply uploaded and destination urls typed in.

Here is a before shot of the bottom of the homepage.

Here is an after shot of the bottom of the homepage. DataSynapse customers are now featured in a strip along the bottom that scrolls left and right, while each customer box clicks through to a case study that is already part of the site's content. On mouseover, customer quotes popup, with the "More" link also clicking to the case study. The open content area, great for a general positioning statement not covered in the top marquee, is still prominent, to the left and under the new stategy buttons. Resources of various types can be picked to become homepage features to the right.

Note that some resizing of images will be necessary for the customers strip below, but all in all this upgrade does not require much content entry at all, since the features in this bottom part of the page all draw on content types that already exist on the site. The new homepage offers a fresh design to better use the site's existing resources.

Going live, servers and DNS for a Newfangled Site

Fri, 02 Oct 2009 00:00:00 -0400

While building a Newfangled site, the team has been looking at first the prototype and then the actual site on our development server, housed here at Newfangled Web Factory. When we go live, we will move the complete site and all the content to two servers (one webserver, one for the databases) dedicated to us at Rackspace. We've contracted with Rackspace for its Zero-Downtime Network™ and Tier 1, SAS70-certified data centers. We also use Rackspace's premium Rackwatch system to monitor all of the major systems running on the server. If our servers have an issue with one of these systems at 3 a.m. on December 25th, for example, someone from Rackspace will be physically present to immediately notify us and remedy the situation.

With Newfangled sites the DNS settings are typically left to the control of the client. Each domain (or url, like www.yoursite.com) that a client has registered has an "A record" that will need to be pointed to the Newfangled Live Server's IP address AFTER we have moved the dev site to the live server. Before going live, the Project Management Team always makes sure that the right person on the client's side has access to the DNS administration account and is ready for the call to change the A record.

The staging site will remain on our server here at Newfangled, and we will use it to preview any work that we do on the site. Note that as soon as you make a content change on the live site, the live and staging sites' content will not be the same again. When we make an upgrade, only the functionality will be transferred over from the staging site to the live site, not content- so after going live the content on the live site is the only content that matters.

Below is a diagram to clarify.

Below are some specifications for our hosting setup.

Hosting
Newfangled hosts it's customer's sites on shared servers and networking equipment that is managed by Rackspace. Newfangled handles the day-to-day operations and Rackspace is responsible for all the hardware and network connections. Rackspace guarentees 100% uptime on the network and 1 hour hardware replacement for the server.
For more details:
http://www.rackspace.com/solutions/managed_hosting/index.php

Backups
Daily backups are done using a third party system from i365.com ( formerly evault.com ). The i365 system remotely backs up the Newfangled web server to their remote storage facility and using AES-256 encryption end to end. Seven days of backups of the site's files and database are kept.

Platform
We are using two server's to host Newfangled sites: dedicated web and database servers.

Web Server Specs

HP DL585 G2
Quad Socket Dual Core Opteron 8216 2.4 GHz
8 GB memory
Raid 1 - 2x10Krpm, 73GB, OS
Raid 5 - 3x10Krpm, 270GB, Sites
Red Hat Linux ES 4
PHP 5.2.8
Apache 2.0.52

Database Server Specs

HP DL585 G2
Dual Socket Dual Core Opteron 8216 2.4 GHz
4 GB HP RAM
Raid 5 - 4x10Krpm, 400GB, database
Red Hat Linux ES 4
Mysql 4.1.22

Server Networking

Cisco 2960 Gigabit switch
Cisco PIX 506e Firewall

Mood Boards

Tue, 30 Jun 2009 00:00:00 -0400

At Newfangled we recently began using Mood Boards as a first step in our design process to establish a site's branding, typography, imagery, color palette and other design elements. Mood Boards have been compared to an interior designer's initial swatch panel showing the fabrics and colors that will be used to design a room; a mood board can set the aesthetic course of a site, but does not represent any actual architecture like a page design mockup does.

Once a look and feel has been established, we proceed to lay out the home page and a few key interior pages, applying the approved �mood�. The images in our mood boards are not necessarily ones that would be used on the site; they could be used, but they are meant to establish and support the visual feeling of each independent board.

Here is a moodboard approved by the client.

And here is a final, approved design.

Note that the design does not include all of the elements indicated in the mood board--those elements may be spread across the site, and the board is also a jumping off point for a few rounds of design, so naturally things change. But the board established a palette and type of imagery that gave the designer a clear direction.

Another thing I need to note is that it is essential to make sure the client is completely aware of the difference between the mood boards and the actual designs yet to come. In one instance a client responded very positively to the mood board, which was presented via a template full of straight lines and square-cornered elements. After delivering some more organic-looking actual designs, we realized that the client's team loved the mood boards in part because they felt the sharp corners and precise lines fit their brand, and our designs had to be adjusted in that direction.

Google's Own Tips on Meta Descriptions

Tue, 16 Jun 2009 00:00:00 -0400

While browsing a useful doc on SEO basics I came across these guidelines for the Meta Description field. Clear basics to help with the Meta Data tab in Newfangled's CMS.

Handy Google Functions

Mon, 07 Jul 2008 00:00:00 -0400

Posts referencing posts...content referencing content...

Newfangled's Chris Butler recently pointed out some of the Google's many functions that I did not know about. For movie showtimes, type in movies and a zip code. Airline flight status, package tracking information, local weather forecasts and many more types of information are quickly available.

See Google's page on its many features that you might not know about and Chris's post on the topic.

The insights of a low-fi person person going tech.

Thu, 12 Jun 2008 00:00:00 -0400

Here's a bit of my background for context:

My gut instinct has always been against computers. As a kid I enjoyed Asteroids, Galaga and trading Atari game cartridges in my neighborhood (yes this dates me), but when some of my friends got into Commodore 64's I couldn't have been less interested. In high school I was in the sole computer class for a while, but I found absolutely no purpose or thrill in instructing a dot to move across a screen and repeat on command, so I transferred back to Trig where I could cut up again with my friends.

I was a Luddite. As a musician I scoffed at electronics (I still do, mostly) and I've never liked digitized music (a post yet to come).

But I've accepted much. A few years ago I finally decided to step into the present, at least with one foot, and now I'm beginning a career in web development at Newfangled Web Factory--a great setting with really nice, smart people who take a very human and educational approach to web development.

In this blog I hope to record "ah ha" breakthrough moments and post shortcuts as I learn them to benefit anyone. Nothing will be too obvious for inclusion. And I'll post some about music and culture too.

Airtight Interactive's Simpleviewer

Thu, 12 Jun 2008 00:00:00 -0400

I first saw Airtight Interactive's Simpleviewer on a friend's website (see Meredith Brickell's great art pottery) and was struck by its elegant simplicity. Its image navigation is intuitive, the images fade in nicely and the background and frames can be as unobtrusive as you want. Most of all, it's pretty simple to install and free. (There is a more customizable deluxe version which costs $45.)

At the time I was taking an introductory JavaScript class and was struggling to customize some code (lifted straight from the book) for image viewing. Little did I know that Simpleviewer was so easy to download, setup and customize. The directions are clear, even for a web-building novice, and once I had it up and running my site easily jumped to the next level on the "looks pro" scale.

I did hit one snag involving Macs only, but Simpleviewer's online forum proved very useful. The author, Felix Turner, answered my question quickly and pointed me to the fix, and several other users answered as well. Airtight Interactive also offers a few other very smooth looking, free image players.

A Digital Silver Lining for Live Music

Thu, 12 Jun 2008 00:00:00 -0400

So the business of selling recorded music is dying, as we can all see. The big guys are struggling (record company giants) and the small guys (local mom and pop record stores) are dropping like flies. In Raleigh there is only one independent store selling new CDs left, and in Chapel Hill a longtime fixture, Schoolkids, closed this year.

But maybe there is a good side to this.

First of all, I have to admit that I've never really liked CDs. They still sound too trebly next to my LPs--who needs that much in the the cymbals? And who can have an emotional connection to a shiny lightweight disc in a case designed for the plastic hinge tabs to break off? I still prefer great big cardboard album covers, warm, bassy sound, with pops and scratches I've inflicted myself.

MP3s sound even worse than CDs�but they're all about convenience�and as a listener I don't too much mind the move from discs to downloads. But everyone knows what downloads are doing to the business, big and small, and artists are making even less of the miniscule share that traditional record companies pay them.

So what's possibly good here?

Live music! You can't file-share a live experience, and more of the money goes directly through the performers. Maybe in a roundabout way the digital age will boost a non-digital side market, live music. Maybe recordings should be free or nearly free (they are anyway if you look hard enough) and from a business standpoint serve primarily as promotion for the live experience.