I began to recall fond memories from my childhood… memories of the all-too-seldom family vacation fireworks stop. At every exit with fireworks I would beg my parents to pull over and let me partake of explosive goodness. I’m not sure if it was the idea of blowing something up, or the large red arrow that caught my attention, but regardless…I wanted them…NOW.

Many organizations over think marketing. Clever slogans and one-liners seem to have lost some of their zeal. In today’s world, people are too busy, being pulled in too many directions to hunt down the value in your marketing initiatives. When I was a kid, the fireworks stand did not need an large marketing budget, just a piece of plywood and some paint was enough to catch my attention.

I wonder how many of us forget to provide visitors to our website with that large red arrow saying, “Fireworks Sold Here!” The clear call to action is the cornerstone of a successful website. Ask yourself if the call to action on your website fits the following criteria:

1-    Is it obvious?
2-    Is it something unique to your organization?
3-    Is it attractive and eye-catching?
4-    Is there only one call to action or do other items compete for attention?
5-    Does it address a pain, or evoke happiness?

Chances are for most of us, we cannot 100% claim that we have followed each of these criteria. That’s ok, but we can start thinking today about what unique call to action we want to convey. In then end, just remember that it doesn’t need to be clever, just clear and to the point. Once you’ve tackled this opportunity, go blow something up…that’s the real fun of fireworks!

If you’re not familiar with CSS frameworks, you should be. They create a baseline from which designers and themers can create websites, standardizing basic layout options with a common toolset and language. I was passionately opposed to them for the longest time because I feared we would lose the art and beauty of designing and XHTML/CSS coding. My opinion changed once I discovered the 960 Grid System.

As soon as you hit the 960.gs homepage, you see actual screenshots of websites using the framework with an option to overlay the 12 or 16 column grid template. The first link you see on the site is an option to download templates for Photoshop, Illustrator, and OmniGraffle — oh, and the framework itself is included as well. Finally, a framework for designers! I’m getting verklempt just thinking about it.

I’m no developer, but I felt right at home with 960 from the beginning. Instead of wasting time setting up guides in Photoshop and worrying about proportional structure, I can focus on bigger, more important issues such as what I want a user to focus on, how to get them to a conversion page, or what color scheme might make the most sense. For those just getting started or interested in learning it, I give you six of my favorite tips and tricks for designing with the 960 grid system.

1. Use your background space effectively

As the background of a website can exist outside of the 960 pixel container, it’s a wonderful place to experiment with unique visual elements and horizons, as seen on Bryan Veloso’s avalonstar. Designers now have some rote options for working with backgrounds, such as repeating horizontally a la Drupalcon 2009, highlighting your content by making an elegant centered background like on the Bellingham Real Estate site, or using a full photographic background like on Housing Works.

• avalonstar’s grungy background texture
• The DrupalCon cityscape background
• Large photography on Housing Works

The background is truly a freeform canvas. You don’t have to worry about browser widths or how it might work with dynamic content, so go to town.

2. Pull or push outside the grid

It’s hard to deny the cold and inescapable reality of the pink columns if you sit and stare at them long enough. But fear not! With the power of CSS positioning, it’s no problem to break out of those constraints.

In this example, I’ve moved the logo about 25 pixels outside the left edge of the grid container to help the design feel a little more free and flowing. It’s often helpful to limit the width of an element you are pushing or pulling to a specific number of columns. I measured the logo out to be about 9 columns in width (out of 16 available columns), which means a front-end designer can apply a grid_9 class to the logo and then position it outside of the grid using CSS. Easy for them, easy for me.

Being able to push and pull things can lead to some extraordinary things and helps you remember that you’re not as boxed in as you might think.

3. Mix 12 and 16 column grids in the same design

While the default 12 column grid template is fine for most projects, some designs might require the additional flexibility and finer control of 16 columns. Newspaper and magazine styles can benefit the most from the extra grid control, especially when you might need to nest multiple small columns. But there’s no rule that you can’t use BOTH the 12 and 16 column grid in the same design.

In this example I have a simple layout that utilizes both grid templates. The top section is more open and simple and worked well with just 12 columns. The bottom section gets a bit trickier. I really wanted 4 columns and some specific layout tricks that would have been more difficult using the default grid template. As you can see, it’s as simple as placing the 16 column grid in the design and having at it.

4. Rotate the template for a poor man’s baseline grid

Since the 960 grid has 20 pixels of margin between each column, you can rotate the grid template 90 degrees and get a nice vertical grid to work with. While the common baseline grid is based on 18 pixels, I find working with a 20 pixel vertical margin helps keep the overall structure standardized and clean.

I’ve modified the 12 and 16 column template that comes with 960 to include this baseline grid to have it readily available.

5. Perfect your proportions

One of the biggest benefits of using 960 when designing is there’s no guesswork over the general size of content areas. The most commonly used format for the web is 2/3 of the overall page width for the main content and 1/3 for sidebar content. In 960, that’s as simple as fitting your main content inside 8 columns and your sidebar content inside the remaining 4 columns. Easy!

Obtaining complex layouts without grids can be painful because alignments need to be acutely defined. Imagine having to deal with a complex 6 column layout and working through issues of a section being 230 pixels versus 235 pixels wide, and how that 5 pixel difference might affect everything else on the page. 960 takes away a lot of the guesswork and tedium and allows you to focus on information flow and overall look and feel.

6. Ditch the grid

That’s right, one of my favorite things to do when designing with 960 is to turn the damn thing off.  The template is great for setting up the general size of your content areas and for lining things up, but you shouldn’t get into a habit of leaving it on while you design. Those columns can literally start boxing you in, so ditch them and feel free to get curvy.

In Conclusion

If you’ve never designed with a pre-built grid and framework, now’s the time to give it a try. I’ve found the 960 Grid System to be a valid answer to shrinking budgets and timelines. Even though I was previously a spokesperson against frameworks, I now find them to be useful in many situations.

I’d love to hear what other people think, so leave your comments below. Is designing with a grid helpful or a hinderance?

January’s mixer proved to be a great success with over 100 attendees from various competing and complimentary firms, independent graphic designers and developers, and local tech enthusiasts. So successful, in fact, that we simply could not get people to leave! The centre{source} office, alone, proved to be a warm and inviting atmosphere for the event, and the added incentive of a networking competition for the Golden Kraut and Sivlery Beans Awards created an energy for the event that fueled repeat attendance for months to come.

For the past few months, we have seen many regulars showing up to partake in complimentary kegs of Yazoo, wine, gourmet cupcakes and munchies, and invaluable networking opportunities. Beyond the “repeat offenders,” we have welcomed many new faces from the local neighborhoods of Germantown, Salemtown, and Hope Gardens; newly unemployed job seekers coming out to share calling cards; friends and family members of c{s} employees; satisfied c{s} clients; and even a rare guest appearance from the newest member to our team, Brayden Holland, born to Nick and Brandi in February.

Each mixer has incorporated traditional interactive activities of hands-on competition through trivia, meet and greet score sheets, and coin hunts in competition for the coveted Golden Kraut and Silvery Beans Awards. Additionally, more “techie” interactive features have been utilized like wirelessly networked music throughout the house and live updating Twitter feeds using the #csmixer hashtag showing on big screens. More recently, the newly launched iPhone/iTouch application GPSAssassin has been a big hit, where people attempt to assassinate one another through GPS location used in the game.

With the advent of Spring and Summer weather, these mixers are sure to continue to grow in attendance, further solidifying the event as a staple of the local Interactive Community providing valuable networking opportunities and general camaraderie for anyone wishing to partake.

We hope to see you out at the next mixer! Bring a friend.

We have been a proud sponsor of ERFA for the past three years, specifically offering our web design and development services for their website, http://www.elliesrun.org.  This year, we were able to add a brand new system for accepting online registrations, donations, and volunteer sign-ups, including their “ERFA Heroes” system that allows people to sign-up to raise money, and then get people to donate in their name.

This year, ERFA has an ambitious goal of 1,000 event participants and raising $100,000.  It won’t be easy, but by teaming together, anything is possible.  As the ERFA slogan says: “DREAM BIG. TAKE ACTION.”

We’re asking that you Dream Big and Take Action with us.  Please consider donating to Ellie’s Run for Africa — only $25 helps put a child in school for a year!

http://www.elliesrun.org/teams/centre-source

While many projects can be successfully planned using by-hand sketches (and our simplest ‘portfolio’ sites are, in fact, prototyped this way), as the complexity of the desired user experience increases, so too increases the value of an online, “clickable” prototype rendition.  Axure RP’s integrated development environment (IDE) makes it quick and easy to create such prototypes.

When we’re drafting a prototype in Axure, we try to address (in order) the following considerations:

1. The top-level information architecture (read Site Map)
2. The navigation scheme
3. The home page
4. The interior page template
5. Key interior pages

By the time we have these elements captured in prototype form, we inevitably have a reasonable approximation of the client’s desired outcome.  What’s left is to merely fill in the gaps and begin the process of designing the aesthetic style of the home and interior pages as per the client’s preferences.

Without identifying the elements required for each key page (as well as the desired functionality of those elements), our developers would be left to interpret a relatively loose post-sales project scope that may be rife with uncertainty and ambiguity.  Planning helps alleviate this potential confusion and forces us to refine our understanding before any code is committed.

Check out Axure RP PRo at their website.

If you have yet to make a CentreSource mixer, we hope you make the next one. We’ll promote an invite soon (follow us on Twitter for the full scoop), but go ahead and mark your calendar: Thursday June 25th at 5PM.

Also, thanks to Nashvillest for a great summary of the May Interactive Mixer.

Finally, no mention of the Mixer is complete without a mention of our Golden Kraut and Silvery Beans winners.

Our Mixer Winners:

Golden Kraut — Justin Davis of GBOD

Silvery Beans — Matt Reed of redpepper

Our CentreSource Winners:

Golden Kraut — Morgan Zuehlke, Strategist

Silvery Beans — Chris Wage, Director of Operations

For the past several years they have struggled to find an online identity. The site had become stale and hard to use. With this new site, it was our goal to place F&C back on the mantle where they belonged. It was clear that a traditional realty site would not suffice. For those of you familiar with real estate you might know of a tool called the “MLS.” This tool allows users to search for houses in middle Tennessee. It would have been easy enough to simply display the results that were associated with F&C through an API…but why do something simple?!!!

Instead we set out to push the limits of what we could code and what the MLS could handle. It is safe to say that we broke down long standing barriers and the work speaks for itself. This site is rich with functions such as:

- Individual Agent landing pages that display listings associated with that agent
- Auto-populating closing listings over the past several months specific to an agent
- Unique dynamic slide shows of property listings
- An intranet that houses company announcements, frequently used documents, and contact directory.
- AMAZING design without sacrificing content management flexibility

Congrats to the centresource team who put in the long hours and to the Fridrich and Clark team for their hard work as well!

We partnered with Kent Creative in order to bring this project to life, and planned with implementation in mind — a fixed budget required that our Planning process work closely to expand scope as much as possible without exceeeding budget. As a result, we focused on building a clickable prototype, which helped us reduce surprises, elminate uncertainty, and streamline the development process. And we also enjoyed working closely with podcasts — a process which yielded new procedures for making podcasts even better!

Congrats to the team at AuTube for a seamless launch!

Utilities
Firefox (http://www.mozilla.com) - Browser
Azureus (http://azureus.sourceforge.net) - BitTorrent
FileZilla (http://www.FileZilla.com) - FTP Client
CLAMWIN (http://www.clamwin.com) - Open Source Anti-Virus
TightVNC (http://www.tightvnc.com) - Remote computer control

Communication
Pidgin (http://www.pidgin.im) - Multi Chat
Thunderbird (http://www.mozillamessaging.com) - Email Suite
Wordpress (http://www.wordpress.org) - Blog Platform

Entertainment
Miro (http://www.getmiro.com) - Media Player (HD Content)
Tremulous (http://tremulous.net) - First Person Shooter Game
LinCity (http://lincity-ng.berlios.de/wiki/index.php/Main_Page) - Sim City
FlightGear (http://flightgear.org) - Flight Simulator

Graphics
Paint.net (http://www.getpaint.net) - Image Editing
GIMP (http://www.gimp.org) - Image Editing
Blender 3D (http://www.blender.org) - 3D Simulator
Inkscape (http://www.inkscape.org) - Vector Graphics Editor (like Illustrator/CorelDraw)

Audio/Video
MediaCoder (http://mediacoder.sourceforge.net/dl/dvdcss.html) - Media Transcoder
Handbrake (http://handbrake.fr) - DVD Backup
Audacity (http://audacity.sourceforge.net) - Multi Track Audio Editor
VLC Media Player (http://www.videolan.org/vlc/) - Super Media Player, Caster

Productivity
OpenOffice (http://www.openoffice.org) - Office Suite
Bluemarine (http://bluemarine.tidalwave.it) - Photo Manager

Enterprise
SugarCRM (http://www.sugarcrm.com) - Enterprise CRM
Drupal (http://www.drupal.org) - Web Publishing, Content Management
Asterisk (http://www.asterisk.org) - Open Source Phone System
Zarafa (http://zarafa.com) - Exchange Competitor

Digital Nashville asked me to speak on the subject at their next Education Series. You can see the invite on Facebook (here) or on the actual Digital Nashville site (here). I’ll go through a variety of scenarios where Open Source technologies provide a wonderful solution - ranging from work-related to fun!