FeedStitch

Wireframe Checklist

Last month I gave the uninitiated a crash-course on wireframes.   In the comments to that post, a former colleague, Kevin Lloyd, said that he was going to use the post as a kind of checklist for reviewing wireframes.  Before that comment it hadn't occurred to me to create a checklist and apply it systematically, but in one of those 'no-duh' moments it struck me that it's something I should have been doing all along.

Really? A checklist?

Really.  A checklist.  It's not going to solve all of your problems. You're still going to have to work and you're still going to miss things from time to time, but adding a degree of consistency to the review process will help you identify gaps and breakdowns in a design more quickly. 

Any good checklist is going to provide you with a comprehensive, if not exhaustive, list of points to address.  This list isn't going to do anything without us, and it can't identify all problems with a design, but by using a checklist you can ensure that you're going to at least think about every major point every time we review a wireframe.

Wireframes are complicated beasts in that they relate information about a number of the more abstract facets of web/software design.  Issues like navigation and way finding will often take advantage of the same design elements on a screen, but you can have one without the other.  Good design is all about gestalt, how the parts come together to form the whole, but if we don't narrow our inspection to one thing at a time it is easy to become overwhelmed.  By using a checklist we get a framework for "reading" the wireframes that helps us address each of the critical conceptual facets, one at a time, in relatively discrete chunks.

The Checklist

• Navigation - How a user moves around the site
  • Primary - Top level sections
  • Secondary - Subsections in the current section
  • Alternate routes - Different ways of getting around (most sites should have at least one)
  • Login/account access/log off (if relevant)
• Flow - How a user gets to the next thing they want to do
  • Primary action
  • Next suggested action
  • Alternative next action
• Orientation and Way finding - How a user knows where they are
  • Page Title
  • Primary/Secondary Navigation State
  • Spatial Context
  • Information Hierarchy
  • Clear branding
  • Clear primary content
  • Immediate recognition of central message
  • Clear secondary content
  • Clear connection between primary/secondary content
• Interaction - How the system invites and responds to user actions
  • Interactive component state
  • Success, Info, and Error messaging
• Layout - How content is arranged on the page
  • Realistic sizing
  • Breathing room
  • Graphic/text balance
• Behavior - How the system acts and makes decisions
  • Search result ranking algorithms (random, popular, etc.)
  • Destination of each link
  • Asynchronous calls/updates
• Content - What the user will see on the page
  • Content summary for each page
  • Specific language for
    • Feedback messages
    • Headlines
    • Primary Navigation Labels

How do I use it?

This checklist can be used at two points in the process.  For designers, before you start sketching, review the checklist and make sure you know how you're going to address each point in your wireframe.  For those reviewing wireframes, use this checklist to make sure all of all of the points are adequately addressed.  Think of this check-list as a launchpad for the design or review process.  It will help you cover bases up front and ensure your UX design speaks to the most important facets of information architecture and interface design.

Google Launches Improved Realtime Search

Google just re-launched it's realtime search results with a new look, URL , and features. Some key improvements include the ability to search by location or source (Twitter-only, for example), conversation view - giving you the all the buzz from start to realtime, and realtime alerts based on your chosen search terms and delivered up to the minute, daily, or weekly.

Could this be the end to many of the third-party social media monitoring tools currently out there?  Some claim that Google's realtime search already does what Twitter won't. I would venture to say that yes, Google realtime search will replace many tools out there, especially if Google considers rolling out some social media metrics tracking to go along with this (possibly synching it up more closely with Google Analytics?) Looking forward to what they have in store next for realtime search.

Play here: http://www.google.com/realtime

10 Omnigraffle tips you might not know (plus one bonus!)

Over the past four months, I've been using Omnigraffle as my go-to diagramming app. During that time, I've collected a small set of tricks that make wireframing and diagramming easier.

If you're a grizzled 'graffle veteran or someone who reads manuals, some of these might be old hat. But maybe not – so check them out. If you've got any of your own, post them in the comments.

Tip 1: Use style chicklets to clone styles

Occasionally, you want to apply all of one object's styles to another. Sometimes you just want the gradient and the stroke – but not the text or shadow. Here's where the chicklet tray comes in handy. 

When you select an object, its styles are shown in a tray at the bottom of the canvas. The first chicklet represents all styles for the shape. The others are fill, stroke, image, shadow, shape, font, font color and text alignment respectively. (whew!) 

Just drag the chicklets you want to the destination object. That's it. 

Tip 2: Select similar objects to operate on

Sometimes you want to monkey with the styling for a set of similar objects. Perhaps you want to change the border and shadow on all your sitemap's boxes at once.

Provided you've been pretty consistent about using stencils, you can quickly select those objects that have the same traits. Right-click one object and choose Select > Similar Objects. Style as needed.

Tip 3: Use character replacements as shortcuts

It’s a pain for me to find the little black triangle dingbat. And the arrow. You could spend the time wading through the Characters palette each time. Or you could build these little bits into a stencil. Using character replacements, however, puts these fiddly bits at your fingertips. Once these are set up, you can type a short abbreviation and have the system replace that with the chosen alternative. 

Just go to the Language & Text control panel and choose Text. In the left panel you can add new text substitutions. Right now, the ones I use are:

• “lor” generates a sentence of “Lorem ipsum” text.
• “|>” and “<|” generate dark triangles in either direction
• “->” and “<-” generates arrows in either direction

Tip 4: Manipulate objects with math

Occasionally, I want to divide a region on a page with a specific number of equal width columns. Or I want an object whose size is an exact multiple of another.

In these cases, I head to the Rulers toolbar where I can do basic math operations: addition, subtraction, multiplication and division. After selecting an object, go to the toolbar and tack on an operator and value – something like "*2", "/4" or "-10". Hit enter and see the magic.

Did you also know you can use the arrow keys in these fields to manipulate items in single pixel or grid increments? Try it.

Tip 5: Move a selection to a different layer

Moving objects between layers is not very clear in Omnigraffle. Fear not young Padawan, there are two ways to accomplish it. Either one will get you there but one might better fit your flow.

First, select the items on the canvas you want to move elsewhere. Then:

Option 1: Contextual Menu

Right-click the destination layer and choose "Move selection to layer".

Option 2: Outline + Canvas Sidebars

Turn on both the canvas and outline sidebars, if they're not already. As you select items on the canvas, you'll see them highlighted in the outline view. Click and drag the outline view icons(s) onto the layer you want.

Tip 6: Move a shape forward

As far as I can tell, Omnigraffle has the command "Move to front" but no "Move forward." This seems a strange omission to me, but you can use this hack to accomplish the same task.

Choose the item you want to move forward or backward. Then, with the Outline sidebar open, drag the object's icon up or down in the list. Up is forward; down is back.

Tip 7: Paste unformatted text

If you copy and paste text within Omnigraffle – or from other apps into it – you'll notice it carries its formatting along. I hate that baggage, so I use Edit > Paste and Match Style. This saves you from having to sanitize it through Textmate first. 

The keyboard command is funky, though. but you can override this in OS X's Keyboard Shortcut preferences. I use Indesign version: Command-Shift-V. 

Tip 8: Pin palettes open

Omnigraffle's palettes are the polar opposite of the double-rainbow, driving people to bouts of Tourette’s and uncontrollable sobbing. Learning to pin them open won’t solve your problems, but will make you less of a spectacle among your co-workers. 

Succinctly, you can open multiple tabs concurrently within a palette. Double-click the tab and a small lock will appear in the bottom right. Continue to do this with other tabs as you like. Double-click to unpin.

Tip 9: Make a custom color palette

Like most wireframes, mine are rendered in shades of gray with occasional splashes of color. Despite the limited palette, it's still hard to keep the the shades and tints straight. The swatch drawer is a fair place to keep these, but I find the little squares hard to distinguish. 

Instead, I created a custom palette based on a limited set of colors I use. Making your own is easy. Just draw out and color a set of boxes in Omnigraffle. Then select them all, copy and choose "New from clipboard".

Tip 10: Make master objects

I wrote about this before, but I think it’s freaking awesome. You can create objects that remain globally editable in Omnigraffle. Have a footer that’s positioned different on all pages – but has the same content? Make a master.

Just select the objects you want to make a master, right-click them and choose "Copy as PDF". Paste wherever you need. Edit it by double clicking it.

Bonus: Masking an object

Extending the capabilities of Master Objects, you can also mask those objects. This is especially nice for those cases where you need to show a bit of an object – but overlaying a white object of it won't work. 

Simply create your object or group of objects, then Copy as PDF. Paste it, then go to the Image tab. Choose the "Natural Size" button, which is the first one in the top row. From there you can drag and scale the object within the space. If you want to get more creative, you can change the shape of the mask using the Shape tray within the stroke panel. The example above shows a star-like shape masking a striped rectangle. 

Behind the Scenes: Lafayette College

Back around the time of the first and second North American blizzards of 2010 (more popularly referred to as the Snowpocalypse and/or Snowmageddon) we started working with Easton, PA based Lafayette College on a redesign of their Lafayette.edu website. It had been years (many years) since the site had a major overhaul so when we sat down with the varsity team of Lafayette stakeholders we knew this was going to be a fun project. Six months later on the heals of a new academic year the shiny new website was ready for primetime.

This was no small undertaking. There was much to figure out from understanding what made the college unique to improving the usability of the website. With much cooperation from the Lafayette internal team we approached the redesign from a few different angles. Among them, we looked at the site architecture, user interfaces of key pages, and brand personality/identity. We built out the website in HTML, CSS, and JS, implemented it in Wordpress, and then adjusted some of our design work based on user testing conducted by the college.

Based on that work the transformation was complete:

To dig into the visual aspects of the design, we first needed to better understand who the college was and what was it that made them special and unique. We learned that there was a strong desire for them to stand out among other small liberal arts colleges in the US. As we talked to them we learned that Lafayette College students and faculty had the following characteristics:

• Friendly and community driven
• There is a shared sense of altruism – students and faculty have helped out with disaster relief both inside and outside of the US
• They are a small college with large resources for both students and alumni
• The staff is committed to research and bettering their respective fields of practice
• They are known for Engineering but there is so much more to offer including a recent focus on the Arts
• The campus is beautiful (we visited to witness first-hand)
• They teach their students HOW to think, not WHAT to think
• Interdisciplinary studies are a tremendous asset
• Teachers work with teachers, students work with students, and teachers work with students – there is much collaboration at all levels

From that we focused on a few themes:

• Enriched Lives / Broadened Horizons / Leaders of Tomorrow
  Students who attend Lafayette are taught to think in ways they never thought possible. They focus on bettering their local community and prepare themselves for community involvement around the globe. In a unique way, this teaches them about building friendships, philanthropy, and environmental care. Students from Lafayette graduate and go to places all over the world to help improve living conditions in areas they never knew existed.
• Small College, Large Resources
  Founded in 1826 and located in close proximity to New York City, the college has a significant history. It may still be a small college by most measures but alumni support is strong and many have gone on to lead enriched lives. In addition to human connections, all across campus students have abundant access to research materials to help support their needs.
• Dynamic Environment / Interdisciplinary Activity
  Due to the close-knit community both on campus and locally in the town of Easton, students are encouraged to work with others to start new programs and initiatives. Individual students, student groups, as well as faculty and alumni are known to work together to think locally and act globally on a variety of needs. Collaboration happens at all levels to help create a truly unique collegiate experience.

Mood Boards

Pulling from each of these themes, we created these stylistic concepts to stoke a design conversation:

Final Design

Once the wireframes were ready and we had the feedback we needed from the Lafayette College team, we began to focus on the final design. Some key elements included:

• Navigation tailored to different audience groups to improve findability for various needs
• Showing students working together to solve problems
• Highlighting individual student profiles to give a more personal account of what student life is like
• Using imagery to help prospective students get a feeling of what being on campus is like
• Expanding the color palette in new ways
• Embracing history but focusing on the present and future
• Playing nicely with a new brand identity and logo mark (a separate initiative)
• Playing nicely with an existing but upgraded content management system
• Like all good redesigns, a fresh feeling

Here is what that looks like:

Home Page

Snippets

One final note, when we first met with our partners at Lafayette we joked about putting an easter egg into the design. Not ones to let this kind of opportunity pass, we just had to follow through. Without telling you too much about it, here's a clue to guide you where to look:

Visit the Lafayette College website to see more.

Clean Up Your Photoshop Swatches and Styles

I can't stand how Photoshop loads your Swatch and Styles palettes with a whole pile of useless defaults. They gunk up a feature that should, by its very nature, be as pared down as possible. I try to keep custom palettes for the sites I'm designing because it makes my work faster and more consistent. If you're always grabbing the eye-dropper to get colors and copying/pasting layer styles, chances are you're wasting time and getting innaccurate results to boot. So what's a good Photoshopper to do?

You could select each color and style individually and delete them, like I used to do. But there's a faster solution that is so easy, you'll kick yourself. I've created two empty palettes for you. Just download them and follow the directions below.

Download: Empty Styles Palette  |  Empty Swatches Palette

To empty your Swatches palette: Open the Swatch palette, select the More Options dropdown in the upper right, and select Replace Swatches. It'll prompt you to browse for the new palette. Choose empty_swatches.aco. It replaces the default rainbow of colors with a single swatch of black.

To empty your Styles palette: Open the Styles palette, select the More Options dropdown in the upper right, and select Replace Swatches. It'll prompt you to browse for the new palette. Choose empty_styles.asl. It replaces the default monstrosities with a simple "no styles" style.

That's it. Quick and painless. When you've built your fancy new custom palettes just go back to the options menu in the upper right and choose Save Swatches/Save Styles. Once you've saved them you can load them into any document you want.

Photoshop Scripts: Hidden Magic

This one's going to be short and sweet, unlike most of my posts. I just wanted to share a little something that I find myself using daily in Photoshop: Scripts. 

The ability to script Photoshop started all the way back in version 7, but still doesn't get the attention it deserves. Most people don't know it even exists, and fewer still realize it's possible to write your own custom scripts to automate tedious tasks. There are a few great resources out there if you're so inclined. If not, you can still take advantage of the ones that come pre-loaded and others available freely on the web.

Pre-loaded Scripts

Photoshop comes with a few handy scripts right out of the box. You can find them under File > Scripts. The one I use most often is:

Layer Comps to Files

This one does exactly what it says, outputting your Layer Comps to separate files. If you have never used Layer Comps, read up! They're a pretty fantastic way to create "snapshots" of your comp in various states. The script makes outputting those snapshots fast and simple. You can output to various file types including PSD, PDF, and JPEG. If you have clients who like to see everything in PDF format, there's also "Layer Comps To PDF" which outputs the layer comps into a single PDF document with multiple pages.

Add-On Scripts

Photoshop scripters have been generous, sharing freely and even writing scripts that people request. A few worth looking at:

Remove Copy From All Layers

I use this daily, and get giddy just thinking about it. Before installing this script I would manually go through and remove the word "copy" from dozens of layers every day. I HATE that Photoshop adds the word copy to a layer automatically when you duplicate something. HATE. But I love that I can run a script at the end of the day and get rid of all those ugly add-ons. It removes the word copy and also the number next to it, so "mylayername copy 12" becomes simply "mylayername".

Read more and download the script.

Delete Empty Layers

Another layer palette clean-up script, this one gets rid of any layers that have no pixel content in them. Which happens more than you might think, especially when the text tool comes out.

Read more and download the script.

Close Without Saving

Close one or more documents without saving - and without going through the prompt twenty times. This one is nice for times when you've opened a ton of images and done some futzing but just want to close out of everything. Use with caution, since it does exactly what it says - closes without saving. 

Read more and download the script.

These are small improvements, but they add up to a less tedious workflow. Which means a much happier Mindy. If something bugs you every day, a script might be the solution.

Do you have scripts you find useful for everyday tasks? I'd love to hear what everyone else is using!

Highlights from Emerging Languages Camp

I'm a programming languages geek, so when Emerging Languages Camp was announced several months ago, I knew I had to attend. Viget was kind enough to send me, so for two days in July I was in programming language heaven. All of the talks were excellent; here are some of my personal highlights.

Go, by Rob Pike

Rob Pike is one of my computing heroes, so it's no surprise that seeing him speak was a thrill. In his talk, Pike explored the history and ideas behind Communicating Sequential Processes (CSP), the concurrency model built in to the Go programming language. (For those who don't know, in CSP processes communicate by exchanging messages instead of sharing variables using locks.) He also praised the original 1978 paper on CSP by C.A.R. Hoare, stating that it has more ideas than any other ten good papers you can find.

Pike also gave one of the OSCON keynotes and spoke about the motivations for creating Go. He believes that mainstream statically typed languages (C++ and Java) are too verbose and non-expressive, so programmers are switching to dynamically typed languages like Python and Ruby, which are more enjoyable to use but can be slow and aren't type-safe. His thesis is that it's possible to fill the gap with a language that is as expressive and fun to use as a dynamically typed language yet has the speed and safety of a statically typed, compiled language. Go is an attempt to meet that need. You can watch this talk right now, and I highly recommend that you do so.

I've been surprised by the reactions to Go. When it was first announced, I expected many developers to embrace it, but that hasn't really happened. I suspect there is a profound misunderstanding about what the language is and what it's suited for. I haven't spent significant time programming with Go, but I've played with it enough to know that I like it and that it's indeed enjoyable to use. I'm looking forward to exploring the language further.

Frink, by Alan Eliasen

I think most attendees would agree that Alan Eliasen's Frink was the surprise hit of the conference. Frink is a programming language for performing calculations with units of measure. The idea is that you can specify your units (from a built-in library of hundreds) directly in your source code, and the runtime tracks them through all calculations. That's just the beginning, though. Frink also does arbitrary-precision math and interval arithmetic, calculates exchange rates, supports regular expressions and Unicode, performs translations via Google Translate, powers web sites via Frink Server Pages, and so much more.

Many programming languages are designed from the start to be general-purpose, but Frink is a great example of a language first designed to solve a very specific problem and later expanded to be general-purpose. As a result, Frink excels at its core goal (calculations with units) and then builds on it with a host of other excellent features. I think language designers would be well served by approaching their languages with the same mindset.

One final note: sadly, Frink is not open source (a mild irony given its presentation at the Open Source Convention), so the community can't contribute code or study the source to learn how Frink does its magic. However, Frink is written in Java and can easily be embedded in Java apps—so if Java is your thing or you're an Android developer, be sure to check it out.

Kodu, by Matt MacLaurin

Kodu is a visual programming language for creating games on Windows and Xbox 360. It's designed to teach programming to kids while also being fun for users of any age. Kodu programs are written using icons and follow (at least conceptually) a sort of event-based model: when something happens do some action. When I see a red apple, move toward it. When I see a green cycle, shoot it with a missile. The game world itself is the programming environment—with the press of a button, the game pauses and every object can be edited and reprogrammed.

Lately, I've been thinking a lot about how to better teach programming to non-programmers, and Kodu has really piqued my interested. Its visual programming model is surprisingly intuitive and needs virtually no explanation, so anyone can pick it up. It looks like the perfect educational tool for kids who are interested in computers and video games. If you're interested, be sure to check out the videos on the Kodu website.

Finch, by Robert Nystrom

Finch was one of the unscheduled talks given during the second day's afternoon break, and I'm glad I stayed for it. Finch is a dynamically typed, object-oriented, prototypal, bytecode-interpreted language inspired by Smalltalk, Self, and JavaScript. It uses message passing like Smalltalk but has a syntax similar to JavaScript and other languages in the C family.

Finch is a nice little language, but I remember this talk for two reasons. First, it was inspirational. It was immediately evident that Nystrom had a blast working on Finch, and seeing his excitement was a great reminder that programming is a ton of fun and that we shouldn't take it so seriously all the time.

Second, Finch is written in C++, and the code is just superb. If you have any interest either in programming language implementation or in how to write great code (and it doesn't matter whether you know C++), I highly recommend studying Finch's source code. Programming language implementation can seem like magic; Finch is proof that it's not nearly as complex as you might think.

~ * ~

Emerging Languages Camp was an absolute blast, and there isn't enough room here to cover all of the amazing talks and languages. Fortunately, all of the talks were filmed by Confreaks and should be available soon. I encourage you to check out the videos when they're available. Thanks to Viget for sending me to such an awesome conference, and I'll see you at Emerging Languages 2011!

You should follow me on Twitter here.

Boss Your Segments Around: Freebie, an ExpressionEngine Addon

I love how flexible ExpressionEngine URLs are — by not strictly parsing URLs, EE lets us send users to /whatever/long/url/we/want/ and find our own clever uses for the URL segments. We use this technique a lot at Viget for returning entries or specific templates, but it’s also great for setting page states, like showing unpublished entries by tacking a /preview/ segment onto a link or using /success/ to throw a "Form submitted!" message.

I recently wrote about Structure and how it gives clients more power and designers more freedom by directly assigning templates to pages. I also mentioned that it parses URLs strictly, which makes a lot of our old tricks much, well, trickier. In 1.6, we used NSM Safe Segments to 'hide' some segments from Structure and get around this issue, but the solution was less than ideal, and the upgrade to 2.0 found us searching for a new method.

Announcing Freebie

We made a wishlist of features we always wanted to see in Safe Segments, and the result is Freebie. Freebie prevents EE from parsing particular segments of your choosing, allowing you to use much more complex URLs without the risk of Structure choking on them.

Features

Wildcard segment names
'page-*' will match and ignore segments like "page-1" and "page-20"

'Breaking' segments
Set "blog" as a breaking segment, and EE will ignore all segments after it

Breaking on category segments
Freebie will (optionally) keep EE from parsing your 'category URL indicator' and any segments after it

Ignore numeric segments
Freebie can automatically ignore segments like "2010", "10", etc.

Access both original segments and parse segments
Ignored segments are saved as their own {freebie_1}, {freebie_2} variables, while the segments EE actually parses will still be at {segment_1}, {segment_2}.

Match against any segment
Check to see if any URL segment matches a string, using the {exp:freebie:any} tag.

Freebie is pretty new, so I'm interested in hearing what feature ideas the community comes up with. Free free to submit any issues or requests on GitHub or in the comments.

Download & Learn More

Download and read more documentation from Devot:ee or GitHub.

Viget loves you!

In case you missed it, here's some more free downloads from the Viget design/front-end team:

• Mindy's awesome design template PSDs
• A form-field placeholder JS plugin from Jason
• And an jQuery image scroller, YouTube player, and presentation plugin from the clear 'free stuff' winner, Trevor.

Consumption: How Inspiration Killed, Then Ate, Creativity

For creatives, the definition of the word "inspiration" has lost its meaning. It's no longer a spark of intuition to solve the uniqueness in a problem, but a search for the current and complacent solutions created by others.  As a creative collective the term "inspiration" has driven us to become lethargic to the realities, foundations, and intentions of our chosen craft.

The misinterpretation of inspiration is bred into our culture. In school we are taught by the examples of others, given information to digest and remember, instead of being handed problems to analyze and interpret on our own. As children we are taught to fear failure and to learn from the mistakes of others instead of experiencing them first hand. Many times curriculums centered around creativity and exploration are pushed out of the way to make room for ones rooted in practical application and applied theory. An example of this logic is painfully evident in design schools that focus more time on learning design applications than nurturing creative exploration and development.

The reality is that it's easier to be inspired than it is to create an original idea and we are hardwired to take the path of least resistance. It's easier to jump onto a design inspiration gallery site than it is to sit down with a blank sheet of paper and a pencil. It's easier to follow a pattern than it is to test-drive new options. It's easier to copy a style or idea that works than try something that might miss the mark or outright fail. Above all, it's cheaper mentally for us to rally around what's already been done and emulate it.

When we over-saturate ourselves in other people's work it short-changes our own creative development. For example, so many of the design inspiration sites on the web today serve up content in bite-sized chunks, resulting in a form of visual junk food. While the work featured on these sites can be some of the best our industry has to offer, the way that it's displayed usually throws concept and story out the window in place or pure visual sugar.  The story of a design (the problem and solution) are stripped away so only the visual execution is left to absorb. This view of design rots away the core foundations of our profession.

Design applications act in a similar capacity if you let them. The ability to jump right into Photoshop has cut down concept time purely because it's so easy to tinker and play in the app. This can lead very quickly to creating recycled and tired executions. Thought process and trial and error have been traded in for ease of use and familiarity. There seem to be so many designers that fear a pencil and paper these days. The worry of having to fill a blank space with ideas is only trumped by the want to arrive at a decision in the least amount of time, with the least amount of effort. This search for convenience often leads to "searching for inspiration" instead of fueling creative solutions through exploration and trial and error. The mentality that says "answers and solutions are just a few clicks away" cheapens the creative process as a whole and creates a vicious cycle of tired ideas.

This new form of inspiration is consuming creativity, but only if we continue to feed it. If we as designers can learn to fight the urge for quick answers and focus more on unique, lasting solutions that revolve around defining problems, there's a chance to  turn it all around. Finding new appreciation for both concept and execution (and their relationship to each other) will spark greater conversation within our communitity about how and why design is important in the first place.

Track Visitor Retention More Deeply in Google Analytics

<!--StartFragment-->

Recently Todd Moy, a member of our UX team, shared a cohort analysis chart, which illustrates whether a website is retaining its users and if it’s improving over time.  Cohort analysis is an easy way to visualize your site’s addict-ability. 

In this post, I’ll describe the best way, as far as I know, to use Google Analytics to get the necessary info for a cohort analysis.

In the chart below (roll over for larger image), you can see that the example site becomes more useful to new users over time: only 20% of January’s first-time visitors came back in February, but 39% of June’s first-time visitors came back in July, and 53% of October’s first-timers came back in November.  The site is improving.  

(Source)

Google Analytics *kind of* gives you information about visitor retention through the New vs. Returning visitors report, which shows you the proportion of returning visitors.  You could set your date range for January, note the percentage of returning visitors, and then set the date range for February, hoping that the percentage of returning visitors has increased.  

But what happens if you retain all your January visitors, but drive a ton of new visitors to the site in February?  Your proportion of returning-to-new visitors will go down even though you’re retaining visitors.

You can use GA’s custom variables to work around this problem and get the info to make your own cohort chart.  Caveats: 1) you can only track 5 months (or weeks, or whatever time unit you want) at a time and 2) you’ll max out custom variable capacity in GA, so this method is ideally for sites that don’t need custom variables to track anything else.  

Let’s say we want to track visitor retention each month, starting in August.

Step 1:  Call the _setCustomVar method right before the _trackPageview() method:

pageTracker._setCustomVar(
        1,
        "Month",
        "August 2010",
        1
    );
pageTracker._trackPageview();

The first “1” is your slot, which you will change each month (2 for September, 3 for October, etc.)  If you want to track visitors who come in January (month 6), then you’ll be back at Slot 1 again and the August visitor variable will be over-written.  The second “1” sets the scope to visitor-level, as opposed to page- or session-level.  For more nuts and bolts about custom variables, check out this Google Code page.  

Step 2:  On September 1, you’ll need to alter the code on your site.  Simply change the Slot number and the name of the month:

pageTracker._setCustomVar(
        2,
        "Month",
        "September 2010",
        1
    );
pageTracker._trackPageview();

Step 3:  When you have enough data to make your chart, view the Custom Variables Visitor report in GA.  If it’s the end of October, then set the date range to October and see how many visits you got from the August and September custom variables.   Then change the date range to September, and spend 5 minutes populating your own chart in Excel!  

This blog post provides a blank Excel cohort template, and this blog describes really well why you’d want to do cohort analysis in the first place.  If you have any more streamlined tips for measuring retention, please share them in the comments!

(PS: If you're interested in learning more about GA, check out our training session at Viget on September 23!)

Secure Ajax from Non-Secure Pages

Ok, here’s a problem: you have a login form on your web app that needs to be protected via SSL. In addition, on every other page – none of which use SSL – you have a miniature login form that submits via Ajax. Of course, the JavaScript same origin policy prevents you from making an Ajax request from your non-secure page to a secure page, even though they’re on the same site. You can’t just make the Ajax login use HTTP, because then you’d be sending passwords in the clear. So what do you do?

When David and I had to tackle this last week, we used a combination of <script> tag insertion and cryptography to rock this issue. We decided to make the Ajax request use HTTP, but encrypt the username and password. We thought of a few hashing schemes at first, but we quickly realized none were secure. We were going to have to have a shared secret that our JavaScript used to encrypt the parameters for the request and our Rails app would use to decrypt them. Then we were stuck with this problem: how do you have a shared secret between them that no one else knows?

First, we used SSL to transmit an encryption key and a reference to that key. We create the key in Ruby, store it in the database, and then transmit it with JSONP over SSL.

class CryptoKeysController < ApplicationController
  ssl_required :show

  def show
    render :text => 
      "#{params[:callback]}(#{CryptoKey.create.to_json});"
  end
end

In Javascript, we used two helper functions:

var setCryptData = function (data) {
  window.cryptData = data.crypto_key;
};

var submitFormWithCrypto = function (form, callback) {
  $.getScript('/profiles/crypto_key?callback=setCryptData', 
    function () {
      var queryData = {
        key_id: cryptData.id,
        encrypted: teaEncrypt($(form).serialize(), 
                              cryptData.key)
      };

      $.post(form.action.replace(/^https?:/, 
                                 window.location.protocol), 
             $.param(queryData), callback, "json");
    });
};

In setCryptData, we set cryptData to be a global variable so we can access it from anywhere. In submitFormWithCrypto, we use jQuery’s getScript to get the key by inserting a script tag. This way, we can use SSL to prevent the key from being sniffed.

We pass a form DOM object and a callback function to submitFormWithCrypto so that the user can specify what to do with the return information from the Ajax request. submitFormWithCrypto grabs a new crypto key via SSL, then serializes the form and encrypts the query string created from the serialization with the Tiny Encryption Algorithm. You could use another algorithm here, of course. We were just looking for something fairly secure that was pretty fast to encrypt and decrypt. Once the form is serialized, we pass it and the id for the crypto key with our standard Ajax request for submitting the form. This was important – we didn’t want to write a lot of new code on the server handling the encrypted request as a special case.

On the server, we have this in our ApplicationController:

class ApplicationController < ActionController::Base
  before_filter :decrypt_params

  def ssl_required?
    use_ssl? && (request.ssl? || !request.xhr?) && super
  end

  def decrypt_params
    if params[:key_id] && params[:encrypted]
      key = CryptoKey.search_and_destroy(
        params.delete(:key_id))
      if key.nil?
        raise UnauthorizedException.new
      else
        query_string = Crypt::BlockTea.decrypt(
          params.delete(:encrypted), key)
        unencrypted_params = \
          Rack::Utils.parse_nested_query(query_string)
        params.merge!(unencrypted_params)
      end
    end
  end
end

ssl_required? checks to make sure the request is either SSL-protected or an Ajax request if SSL is required. decrypt_params looks for the existence of a crypto key ID and encrypted parameters, and decrypts those and merges them into the normal parameters.

In under 100 lines of code, we have a secure method of passing parameters over HTTP, while using SSL to protect our shared encryption keys. Figuring out this sort of solution is why I became a programmer, and it was a blast to pair on it with a co-worker. You can look at all the code, including the Javascript and Ruby encryption/decryption algorithms in this Gist on GitHub.

jQuery Image Scroller Plugin

Building websites for PUMA has given me the opportunity to do some pretty cool stuff. The latest feature was dreamed up by Owen, and it turned out to be pretty easy to do with JavaScript.

These large individual product images work great for products like shoes, but when we needed to introduce clothing items we couldn't fit the entire product in without shrinking the image down until it was too small. Owen’s solution was to have a small thumbnail preview that you could drag over to view different sections of a larger image.

So with a little bit of jQuery, I was able to make that happen, and I made a plugin out of it.

If you just want to skip ahead, check out a simple demo and download the plugin.

Markup

So the idea is that we have a container (.image-scroller) with a fixed height and width, an image that is taller than the container (.feature-image), and a container (.preview) for the thumbnail of that image:

<div class="image-scroller">
  <img src="images/feature.jpg" alt="" class="feature-image" height="1280" width="960" />
  <div class="preview">
    <img src="images/preview.jpg" alt="" height="180" width="135" />
  </div>
</div>

Just a Dash of CSS

We really just need to assign some heights, widths, and positioning:

.image-scroller {
  height: 640px;
  -moz-user-select: none;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  width: 960px;
}
.image-scroller img {
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}
.image-scroller .preview {
  border: 5px solid #fff;
  bottom: 20px;
  height: 180px;
  left: 20px;
  position: absolute;
  width: 135px;
}

Once the plugin is applied, there is a span with a class of indicator appended to the small preview area which represents the area you can drag up and down:

.image-scroller .preview .indicator {
  background: #000;
  cursor: move;
  display: block;
  left: 0;
  position: absolute;
  width: 135px;
}

Make it Move with JavaScript

You’ll need to start by including jQuery and my plugin on the page:

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.imageScroller.min.js"></script>

Then, you can just call the plugin on the container:

$(document).ready(function() {
  $('div.image-scroller').imageScroller();
});

Options

There are a few options that you can pass into the plugin:

• preview: '.preview',

  Selector for the smaller preview image

• featureImg: '.feature-image',

  Selector for the larger image

• indicatorText: 'Drag Me'

  Text for the drag interface

So that’s it. Check out a simple demo and download the plugin. Let me know if you run into any bugs or have any feature requests.

CoffeeScript for Ruby Bros

Hello there, Ruby friend. You’ve perhaps heard of CoffeeScript, “JavaScript’s less ostentatious kid brother,” but it might as yet be unclear why you’d want to stray from Ruby’s loving embrace. Well, friend, I’ve been playing with it off-and-on for the past few months, and I’ve come to the following conclusion: CoffeeScript combines the simplicity of Javascript with the elegance of Ruby.

Syntax

Despite its compactness as a language, Javascript has always felt a bit noisy to me. Its excessive punctuation is pretty much the only thing it has in common with its namesake. CoffeeScript borrows from the syntaxes of Ruby and Python to create a sort of minimalist Javascript. From Python, we get significant whitespace and list comprehensions.

Otherwise, it’s all Ruby: semicolons and parentheses around function arguments are entirely optional. Like Ruby’s ||=, conditional assignment is handled with ?=. Conditionals can be inlined (something if something_else). And every statement has an implicit value, so return is unnecessary.

Functions

Both Javascript and Ruby support functional programming. Ruby offers numerous language features to make functional programming as concise as possible, the drawback being the sheer number of ways to define a function: at least six, by my count (def, do/end, { }, lambda, Proc.new, proc).

At the other extreme, Javascript offers but one way to define a function: the function keyword. It’s certainly simple, but especially in callback-oriented code, you wind up writing function one hell of a lot. CoffeeScript gives us the -> operator, combining the brevity of Ruby with the simplicity of Javascript:

thrice: (f) ->
  f()
  f()
  f()

thrice -> puts "OHAI"

Which translates to:

(function(){
  var thrice;
  thrice = function(f) {
    f();
    f();
    return f();
  };
  thrice(function() {
    return puts("OHAI");
  });
})();

I’ll tell you what that is: MONEY. Money in the BANK.

It’s Node

Though not dependent upon it, CoffeeScript is built to run on top of Node.js. This means you can take advantage of all the incredible work people are doing with Node, including the Express web framework, the Redis Node Client, and Connect, a middleware framework along the lines of Rack. What’s more, its integration with Node allows you to run CoffeeScript programs from the command line just like you would Ruby code.

CoffeeScript is an exciting technology, as both a standalone language and as a piece of a larger Node.js toolkit. Take a look at Defer to see what the language might soon be capable of, and if you’re participating in this year’s Node.js Knockout, watch out for the Rocketpants.

Talkin’ Pen Tablet Talk

Up until recently, I was the only one at Viget HQ to regularly use a pen tablet. So naturally it's a bit of a curiosity around here. And before I got mine I was very curious, but worried about buying a relatively expensive accessory like a pen tablet without knowing what they're really like to work with. There are a ton of reviews and information out there on the internet about pen tablets, but I thought I'd talk my personal experience with using a tablet, what's surprised me when I first started using mine, and why it's ultimately an awesome tool for designers.

So just what is a pen tablet?

An input device that works similar to pencil and paper, by drawing with a "pen" stylus on a tablet (or sometimes even directly onto a monitor, if you want to invest in the really expensive tablets).

Pen tablets are used as more natural way to draw on the computer. They're popular with designers and illustrators. (Specialty tablets are also made for some technical fields. They're pretty neat, actually.)

Pros

Better, faster, more precise drawing. The pen is pressure and angle sensitive, so it draws on the screen the way you really draw. I could explain this at length or I could just show you! Below, you can see a quick, one-minute drawing I did of an apple. They both use the exact same Phtotoshop brush: a 4pt round grey brush. The first is done with a mouse, the second with the pen:

(I was under a serious time constraint, and I'll be the first to admit my mouse skills have diminished since getting the tablet, but even so. One of these looks much closer to a minute's worth of my real sketching than the other.)

Cons

Takes up more real estate than a mouse pad. Depending on what size you get. There are some smaller tablets that are about the same size as a mouse pad. But the best-handling tablets seem to be, like the chairs in Goldilocks, not too small, but not too big. I have a medium-sized, widescreen Intuos; it takes up 16x11 inches of space on my desk.

There's definitely a learning curve to using it. Which brings me to...

The Learning Curve and You

The first time you use it, you won't draw as well as you do with a mouse. This is shocking and upsetting, since you just spent all this money buying it. But after years of drawing and working with a mouse, it takes some time to adjust. but with practice, within a couple days you'll have the gist of it.

Absolute positioning, hovering, and clicking take getting used to. Absolute positioning is the default way the tablet works, but it can be turned off. But once you get used to it, you'll never look back. With absolute positioning, when you touch the top left corner of the tablet, the cursor goes to the top left corner of the screen. Pick up the pen, move it to the bottom right corner of the tablet, the cursor immediately goes to the bottom right corner of the screen. This is amazing after years of dragging a mouse, picking it up and moving down after getting to the top of the pad, then dragging it some more to get the cursor to the top of the screen. It also feels really unnatural for the first few days.

Hovering the pen feels weird too. To move the cursor around, you don't actually touch the tablet, only hover the pen tip right above the tablet. You only touch the tablet to click or drag. At first it's hard to gauge how high you're holding the pen, how close you are to clicking, etc. These are all aspects of handling a pen tablet that feel strange for a week or so, then become second nature.

Pick the pen up, put it down, repeat x1000. When you use let go of a mouse to type on the keyboard, the mouse stays exactly where you left it, ready to resume when you are. This is one aspect of a tablet that nobody mentioned when I was researching tablets, but it's immediately one of the most distracting things. When you go to type, you have to either juggle the pen in your hand, or put it down and take the time to pick it back up. I handle this by putting the pen straight up in the "inkwell" stand that comes with the tablet, and keeping the inkwell right between my keyboard and tablet. My right hand goes by it and drops off the pen on the way to the keyboard, and on the way back to the tablet I pick the pen back up with minimal fuss, since it's already upright and ready to be used.

The quickest way to conquer the curve: stop using the mouse entirely.

Stop using the mouse completely! It's great! To get used to using the pen, I swore off of using a mouse for anything for a couple weeks. A couple weeks have turned into over a year and a half. On the downside, a mouse now feels awkward and jerky in my hand; but that is far outweighed by the fact that I have no more wrist pain. Holding the pen is a more natural position than handling a mouse, so I no longer have flare-ups of mouse-induced wrist soreness.

Using a pen tablet is a very different experience than using a mouse, and drastically alters your workflow. For the first couple weeks it'll feel awkward and cumbersome. But if you stick with it, with a little practice, it's completely worth it. Working on the computer all day is more natural and comfortable. And working in Photoshop is even better; with a pen I can work on files quicker, easier, and with inifintely better results.

Do you have a pen tablet? Are you similarly as dependant on it? Or is it collecting dust in a drawer somewhere?

Futher Information

Official Wacom Site
A good, detailed run-down on tablets

Middle School Marketing Recap: Getting Blog Coverage

During this month's MSM meeting we discussed the current state of blog coverage for products and services and how to shape stories to fit tech bloggers’ appetites. As blogs have transformed into more of a mainstream news source, it has become harder to gain the attention of the tech bloggers whom you wish to cover your product or service.  We came up with answers to common questions you might ask when figuring out how to sell your product or service to bloggers

1. How should I initially reach out to one of the "big" blogs?

Tech Blogs like TechCrunch and Mashable, and get several article “leads” on a daily basis. In order to stand out, it’s important to engage them in a personable way. Tell them a good story that they can latch onto and will want to write about. Provide them with visually appealing content, like videos, demos, or screenshots. Do the legwork for them by giving them the industry overview, competitive analysis, and raw numbers. Point them to other credible sources to back up your story.

2. Should I write the blog article myself and pass it off to the blogger?

This isn’t a bad idea. These days, many bloggers are receptive to the idea of leading paragraphs to help them get started. Start with two or three paragraphs how you would write the blog post. Most often they will take what you’ve written and put their own spin and opinions on it.

3. Is it better to target a big tech blog like TechCrunch or several smaller blogs?

Both big and small blogs have their pros and cons. But in the end, which blog you target depends on what you are trying to accomplish. If you want to increase visits and create general buzz, then it’s probably better to target a TechCrunch-like blog. Getting coverage on this type of blog will also serve as a credible source, giving you trustworthiness and legitimacy when you are pitching to other news sources online and offline.  


If you are trying to increase sales, you might get better results by targeting 10 smaller, niche blogs that attract highly relevant readers who are more likely to purchase your product. Of course, if you have the time and the resources to go after both, do it!

4. I have a small startup that hasn't gained much traction, how do I get covered?

It might be a little tougher for you to break through all the noise and gain blogger attention, but it is certainly doable. Similar to the first question, you need to write a good story. Find a compelling focus point such as a user case that proved to be extremely successful (e.g. this person used our service and increase X by 100%), or a critical point that you hit (e.g. we hit 10k users) and what you plan to do next (e.g. launch public beta). Or simply focus on how your product or service will change the way people do business in a certain industry, backing this up with stats like “XX dollars are being poured into this industry”, or “trends show that this industry will grow XX amount in 5 years.” Stats will prove that you have a big idea and the data to back it up. 

Remember that when it comes to reaching out to bloggers it’s not about who you know, it’s about what you know. If you have any additional tips on how to get blog coverage, please share with a comment.

DevNation Coming to San Francisco

On Saturday, August 14th, we’re taking the DevNation tour across the country for our first ever stop in the Bay Area. Our friends at Engine Yard will be hosting us for a day of talks, hacking, and discussion. The lineup is our finest to date, featuring, among others, speakers from Pivotal Labs, LinkedIn, Basho, and Yahoo! and capped off by a keynote from Chris Wanstrath (defunkt of GitHub fame). As always, breakfast and lunch will be provided.

If you’re in the Bay Area, we’d love to meet you. Registration is only $50 if you sign by this Saturday, so save your money for the happy hour and sign up now.

The Do’s and Don’ts of Twitter

Twitter has become one of the best ways to spread the word about your new business and increase exposure across markets. With such a flexible tool, it's easy to abuse such a strategy and consequently turn its power against you. Of course there are no Twitter speed limits, yield signs, or stoplights to control the speed and accuracy of your social media campaign. But as for any newly developed open market, there is a natural etiquette that emerges and continues to grow.

I've compiled a list of Do's and Don'ts from my own experience that may help in growing your follower crowd. Slackers be warned: this is not a get rich quick scheme. If you're looking to grab several thousand followers in a day and don't care who you pick up along the way (spam, robots, etc.) then there are tools out there for you. The following list is how to attract valuable followers that could potentially become customers. This "helicopter tour" list can grow and morph with time, so I encourage feedback and input.

Do

• Follow relevant people.

Maintain your "following" list to include users of interest. You can determine if a user is relevant based on their Twitter feed. Also, it's okay to follow people you don't know. A percentage of these people will follow you back because they monitor their follows and may be interested in what you have to offer.

• Watch your follower's tweets.

People like to see Twitter used as a platform for open conversation. As such, your follower's tweets should be of interest to you, whether you wish to @ reply, retweet, or direct message in response. Easy ways to monitor tweets include using a third party client such as TweetDeck. The more you monitor, the stronger the connection you can build between you and your potential customers.

• Pay close attention to @ mentions and Direct Messages.

If someone mentions you (public) or direct messages you (private), it means they're thinking about you (or using an annoying bot to auto respond to a follow). This is good news. Knowing when this happens opens the door for more direct and useful communication.

• Respond to important @ mentions and Direct Messages.

Not all mentions or messages are important to respond to. If you have thousands of followers that tweet about you all the time, this can be even more difficult. Identify key mentions and messages, and respond. Examples of criteria include shared customer complaints, praises, and questions.

• Pay close attention to your keyword search.

Services like TweetDeck allow you to have panels that monitor certain keywords, such as your company name, so you can keep track of what people say about your company. You can also do this by logging out of the Twitter web interface and using their search. This search not only mines tweets with @ mentions, but also looks at the inline text and condensed url's.

• Customize and personalize your profile.

Use your Twitter profile as another face for your company. Use your logo as your avatar, type a brief description of what you do or simply your tagline as your bio, and include your location. You may also customize your design settings by uploading a background image and editing the color palette to match your own site. People want to know that you're real, not a robot.

• Mind the gap between "Following" and "Followers."

You don't want to seem desperate. Desperation can easily be equated with low quality. If you go in the negative (following more users than are following you), make sure it's only by a small percentage of your total followers. If at all possible, you want to have a positive ratio of followers to following.

• Use #hashtags wisely.

Hashtags are a great way to get your tweets noticed by people that aren't already following you. Choose hashtags specific to your tweet and your overall goal.

• Provide relevant and useful information.

Whether it's your own blog posts, company pictures, product development updates, or industry related retweets, the more useful and helpful your information is, the more people will be likely to follow you. Too often people just tweet what they're thinking or feeling without considering whether anyone else cares. Does your big toe hurt? Don't just tweet it just because you think it. Tweeting takes only a few seconds, but you should spend more time than that making sure your followers will care.

Don't

• Become a "follow-spammer."

A follow-spammer is someone who follows anyone and everyone in order to get people to follow him or her back. This may produce a high number of followers, but followers that are of no value to you. Additionally, such a method is generally frowned upon by the larger community and will hurt your overall image, decreasing the likelihood that potential customers will follow you.

• Use an automated "follow back" service.

If you use such a service, you will end up following spam bots (non-valuable machines) and follow-spammers (non-valuable humans). You don't want these in your following repertoire.

• Set up automatic "thank you" DMs.

Automated messages that thank your followers for following you can easily work against you. No one likes to feel like a number. If you want to thank people, do it yourself.

• Tweet excessively.

No one likes to see his or her feed consumed by one person, especially when it's useless information. Make sure all your tweets are quality and aren't too frequent.

• Solely promote.

Twitter is a community tool, not simply an advertising board. If all you post is advertisements and promotions, you will likely see your followers hop off the bandwagon.

There's no overnight method that will grab all of your valuable followers, but if you're willing to work at it and play by the growing market etiquette, then tweet away.

Sass: A Designer’s Perspective

Let me start by saying that I am not a developer. Sure, I can write some pretty solid HTML and CSS, but beyond that I defer to our great team of developers. So when I first heard about Sass, the right side of my brain freaked out. While the idea of Syntactially Awesome Stylesheets sounds pretty cool, I was afraid that Sass was going to make writing CSS more like programming Ruby, PHP, or Javascript. If you've been scared away from using Sass for the same reason, I'm here to tell you that nothing could be farther from the truth. Sass actually gives us some really powerful ways of writing CSS more efficiently.

If you're looking for a tutorial on getting started with Sass, this isn't it. You can find everything that you need to get rolling on the official Sass tutorial. This post is also less technical and more about my experience, some lessons learned, and a few tips from an actual project. I'll be referring exclusively to Sass 3, the latest syntax that is also known as SCSS. This new syntax uses semicolons and brackets to specify blocks of code, so any standard CSS file is already a valid Sass file. (You're feeling better already, aren't you?)

It's important to note that Sass isn't going to be the best fit for every project by default. Sites with a lot of pages or application-based sites tend to be well suited for using it. These types of sites generally allow you to take full advantage of the efficiencies that are provided, like variables and mixins. It would be unnecessary overkill to set up Sass for smaller sites with fewer pages or less-common elements.

Now let's get on with the details, starting with some tips and techniques that I found to be helpful.

Use Variables and Mixins ... a Lot

One of my major complaints with CSS has been that I can't create variables for the common properties that are used heavily. Sass variables work just as you would expect. They are particularly helpful for defining properties like colors, font families, and common widths and heights that are broadly used throughout your CSS. You can enhance their power by using operations.

As much as I love the variables feature, Sass really grabbed my attention with mixins. Mixins are even more powerful than variables, allowing you to reuse entire chunks of CSS. If you're familiar with using HTML includes, you can think of it as creating includes for your CSS. For example, you might have a particular button style that is used throughout your site. The positioning or size of the button may change depending on where it is placed. The mixin below sets the colors and padding for the button, but leaves other properties like positioning to be defined by another mixin, class, or id.

@mixin blue-button {
  @include gradient (#5eb9d8, #2795ba);
  color: #fff;
  padding: 3px 10px;
  border: 1px solid #0c87b1;
&:visited {
  color: #fff;}
&:hover {
  @include gradient (#449bb8, #1f6b83);
  border: 1px solid #0b6482; 
  color: #fff;
  }
}

You may notice the "@include gradient (#5eb9d8, #2795ba);" on the first line of the mixin. That is another mixin defining a commonly used gradient style being pulled into the mixin that we're creating. Mixins mixin' with mixins? Amazing, I know! Try to contain your excitement. But the next time that you need this button style, it would be so much faster to write this:

.my-spiffy-blue-button {
  @include blue-button;
  font-size: $default_fsize;
}

Syntactically awesome! This is only the tip of the iceberg of what you can do with mixins and variables. I encourage you to dig into the documentation to get the most out of them.

Separate Your Stylesheets

Okay, I know what you're thinking. "Are you kidding? I do this already. I'm skipping ahead. Is it lunch time yet?" Just hold on. I'll admit that this is a pretty simple idea, but it's a powerful one when working with Sass.

On a recent project I created individual stylesheets for each major section, just as I might on a larger site using regular CSS. Soon I was up to 16 ... 17 ... 18 stylesheets and counting. My original intent of keeping my CSS simple and organized was actually causing more confusion with all of this segmentation. Rethinking the entire methodology, I started grouping styles based on their purpose rather than their location. So it looked a little something like this:

Some of the groupings are self-explanatory, but others require a little more description. Here are three stylesheets that are of particular note:

variables.scss

Grouping all of the variables together and loading this stylesheet above the others will allow you to use the variables in all of your stylesheets.

mixins.scss

Having a central repository of these CSS chunks makes it easy to quickly create and combine new mixins and reference them as you build out your CSS. On a larger site this is a task that you'll find yourself doing often.

modules.scss

Modules are those classes that you can apply to any number of tags in your HTML to avoid bloated code. These don't have anything to do with Sass, but check out Nicole Sullivan's OOCSS to learn more.

Additional stylesheets -- including basic.scss, forms.scss, and structure.scss -- were all separated into individual stylesheets because their functions on my project were very specific. Your project may be different, but the idea of grouping styles by purpose is key. After revisiting the code from the original fifteen section-specific stylesheets, I was able to simplify them significantly with Sass to fit manageably into a single stylesheet called sections.scss. There was much rejoicing.

Nested Rules

One of the simple yet powerful features that Sass offers is the ability to nest styles. This was far more difficult for me (a non-developer) before the latest version of Sass was released. The previous syntax used indentation to associate blocks of code. To me it felt a bit awkward and unfinished, like something was needed to finish the block of code.

Thanks to the latest version of Sass, the brackets and semicolons that we're used to seeing in CSS are back. But because we're not used to nesting styles, doing so without using indents is also visually overwhelming and difficult to follow. Making good use of indentation can have a profound impact on the readability of your CSS.

One final note on nesting -- it's easy to get caught in the trap of targeting a specific HTML tag like this: 

#sassy-id-name #wrapper ul li {
  color: #000;
}

With Sass, it's better to nest everything from the start, like this:

#sassy-id-name {
  #wrapper {
    ul {
      li {
        color:#000;
      }
    }
  }
}

Why does this make sense? It's simple really. Let's say that you decide to add a new container within #sassy-id-name, and you need to target it specifically. It's much easier and more concise to simply add the new rule within the existing nested group, rather than creating a completely new ruleset. So it might look like this: 

#sassy-id-name {
  #new-container {
    color: #333;
  }
  #wrapper {
    ul {
      li {
        color:#000;
      }
    }
  }
}

These are just a few of the things that I learned along the way while trying Sass for the first time. I know that I've only touched the tip of the iceberg with what can be done, so please share your ideas and tips below. 

Design Share 3 Recap

With another Design Share event in the can we thought we'd share a taste of the evening's amazing talks for those who couldn't make it. Our format mostly stayed the same featuring 4 short-format talks (roughly 10 minutes each) ending in a panel-style round-up with all the speakers at the end. This time around we saw and heard about how design can lead the charge for grassroots campaigns, how design wishes can become scary (but awesome) realities, what it's like to start designing for the iPad and similar devices, and how to rise above negative feedback to extend a rebranding effort.

The Talks

• From Mood Boards to Manhattan: A Love Story by Katie O'Brien, Fleishman Hillard
• Running with a PUMA by Owen Shifflett, Viget Labs
• Designing for the iPad: Approaching Application Design by Sarah Samsel, Washington Post
• Brand Experience: A Syfy Story by Stefan Poulos, Pappas Group

To see an archive of these talks plus talks from our previous events go to DesignShare.org and follow @designshare on Twitter for updates.

Special thanks to our intern Joseph Le who designed the title sequence and produced the video from this event.

Taking Traditional Design Concepts & Print Design Aesthetics to the Web: Advantages & Disadvantages

When I came into web design fresh off the print world, I wanted to make innovative and crazy looking websites that broke a lot of rules to create unique experiences for users. However, I forgot all about the importance of user-friendly navigation, functionality, usability, and practicality. On a daily basis, I am constantly faced with the dilemma of designing for the web and print media. It's an ongoing challenge for a noob like me to bring creative concepts and aesthetics from both worlds together in harmony.

From a transitioning designer's point of view, I've noticed that a lot of web designers are constraining themselves by sticking with the same old and boring web templates that look reminiscent of their competitors. Web designers are starting to lose the traditional aspects and foundational elements of design that makes a design visually engaging. This includes strong hierarchy of information, great typography, a solid grid system, color theory, and captivating artwork.

We need to bring back innovation and pioneer new techniques to break the aesthetic norm in web design while still maintaining user-friendly usability. If you don't want your website to be another can in the assembly line, then perhaps you should look at some print-inspired websites that retain a lot of traditional design for inspiration.

POSTER-LIKE & BLOGAZINE WEB DESIGN

Gregory Wood:

Florida Flourish:

(Yeah, I know. It's a lot of vertical scrolling.)

Carsonified:

Jason Santa Maria:

OTHER EXAMPLES:

http://thebolditalic.com/kategreene/stories/268-all-along-the-watchtower

http://dustincurtis.com/a-tour-of-my-brain.html

Now here are some of the advantages and disadvantages of taking the traditional design concepts and print design to the web.

ADVANTAGES

• Poster-like websites have the ability to entertain and grab the user's attention with engaging visuals that are lacking in a lot of contemporary websites. Adding a print-like vibe to a website can make it visually stand out from the crowd.
• A designer can create a unique and personal experience for the viewer by retaining the storytelling aspect of design that has a beginning and end.
• The design and layout in blogazines are more tailored to the specific content in each article. Allowing the content to dictate the design of a page will aesthetically refine the author's message in an interesting way. Presenting the content in a different fashion with varied typography, hierarchy, and layout keeps the viewer on his or her toes. 

DISADVANTAGES

• Poster-like websites may draw the viewer's attention faster, but they also increase the amount of time for the user to understand what the heck is going on and why the site looks different.
• Prior to entering a site, people have certain expectations for where interactive elements are located. If these elements are arranged in a big way for aesthetics at the expense of usability, then the audience will become more alienated from interacting with the site.
• Many print-like websites are too deadlocked and backed into a confined format without much interaction to lead the user into the next step. The general web audience wants to go to a site looking for easy to find information with which they can interact.
• Blogazines take a very long time to create because of the customized CSS for each article. HTML and CSS are purposely designed for structured content. Things can get really messy when designers try to break from the standard layout.

FINDING THE BALANCE

• A poster-like website is more appropriate for "blogazines", portfolio/resume, events, exhibitions, and unique articles. One potential idea for the future of Viget Inspire is to maybe embrace the idea of creating a blogazine-esque post system that will be significant to the content alone. This will better showcase our creativity and versatility.
• Since the iPad has no fold, viewing websites will become more fluid. In this case, we will start to look at websites with more interconnecting panes and extended layouts. Like print design, iPads have no scrollbar. A huge portion of a site can be viewed at once with the In Portrait option. This is a win for poster-like websites with extended landscapes.
• We can take the concept of visually breaking boundaries in print design and apply them to the web which is currently suffering from sites mimicking each other and falling into line like sheep. This includes rethinking usability and interaction without losing the audience's understanding.
• Owen Shifflett once told me to draw first, and then pull the trigger. To all of my fellow transitioning designers out there, we shouldn't stress over the idea of creating for the web or print. Otherwise, we will subconsciously restrict ourselves by relying on conventional practices to set the standard. Instead, we should just focus on making good design that works.

Yessir.