A blog by the Brick Factory The Brick Factory
boxer_top

Brick by Brick, Round 2

It used to be that when you launched a new website you would have two to three years before the design started to feel dated.  Given how quickly things are moving now, a design can start feeling stale after as little as six months.  The battle against dated design is constant.  While its design was only sixteen months old, we had gotten really sick of the design of our blog, Brick by Brick.   We needed a change.  So today we are pleased to launch a new version we think is a huge step forward (see a before and after here).  Following is a breakdown of the primary improvements we made.

Readability

I’m stating the obvious here, but your blog should really be about your content.  The design should get out of the way and let the posts be the star.

Our primary focus in redesigning our blog was to better showcase the content itself  by increasing readability.  To achieve this we:

  • Switched our primary font to Georgia.   We chose Georgia because it works well with the font used in our logo (Avenir), is a pleasure to read, and isn’t used on every site on the web like Arial. I think it adds a bit of elegance to the blog.
  • Jumped on the big type bandwagon and upped the sizes of our fonts throughout.
  • Switched from full justification of text to the justify left, ragged right style.  Full justification is more elegant and looks better on first glance, which is why it is still the dominant approach in book publishing.  Left justified, ragged right is easier to read online and has a bit more of an informal look, which we thought appropriate for our blog.
  • Changed to a one column layout.  Our previous blog had a sidebar with a list of recent posts and a subscribe box.  We found that very few people were clicking on any of that stuff, and going to one column gives us room for larger images to accompany our posts.

Illustrations

We have a talented team of designers that we frankly don’t utilize as much as we should on our blog.  To rectify this we decided to have our design team develop quick illustrations to accompany most of our posts.  They did the illustration for this post, as well as for this one and this one.  I love them.  I think they really add something to our blog.

Responsiveness

Our new blog is completely responsive, so that the layout adjusts along with screen size.  This means it looks great on a desktop, tablet, or mobile phone.  Nearly all the sites we are building now are responsive to some degree, so it made sense that our own blog would be.  We think this is how sites will be designed moving forward.

Let us know what you think.

Unit Testing In Drupal

PHP is a language that traditionally has not had unit testing as part of the development process. A large part of that was that way back when, there just weren’t any good tools for doing testing. Another major factor is that many of the learning resources for PHP do not mention doing things like unit tests, which is a major contrast to languages like Ruby. I personally think this has helped lead to the notion that PHP code is much harder to maintain than other languages.

PHP is nearly 20 years old now, and today we have the tools to do proper unit and functional testing without having to go through the pain of writing those kind of systems ourselves. At The Brick Factory, we tend to use the Drupal CMS quite a bit, and thankfully Drupal has a proper testing system built right in.

(more…)

rolling_momentum_buzz

Possibly The Greatest Article About Headline Writing Ever Written

With the rise of social networks like Twitter, Facebook and Pinterest the way content is discovered has changed dramatically the last few years. If you want to be successful, your content strategies have to evolve along with the discovery mechanisms.

From a content creation standpoint, one of the things that has changed the most the last few years is the the headline.

When I first started writing blog posts ten years ago I treated the article headline as an afterthought.  I’d spend hours on a blog post and then approximately thirty seconds on the headline.   As I got a bit more savvy I started writing keyword-rich headlines with search engines in mind.

As Facebook and Twitter have taken off, my focus has evolved further.  Facebook and Twitter users are barraged with hundreds of posts/links a day and make the decision on whether to click or not in just a few seconds.  To succeed in this competitive environment you have to make your headline click-worthy.  A headline has to grab readers attention and compel them to click.  A click-worthy headline is a way of pushing the snowball down the hill.

One media company that gets the importance of headlines is Upworthy.  Upworthy requires writers to draft 25 headlines for every single article.  They then test the headlines to see which ones generate the highest click rates and use that as the permanent article headline.  All the effort pays off.  Upworthy has found that “an item’s traffic can differ by as much as 500 percent simply because of the headline.”

Here are some examples of click-worthy headlines I found on Upworthy today:

The thing about these examples is that the content isn’t necessarily click-worthy in and of itself.  These aren’t listicles or articles about cute animals or Ryan Gosling.  These are pieces about immigration, the plight of our schools and poverty.  Great headlines are what make you want to click, not necessarily the subject matter itself.

As I work to improve my own headline writing, I’ve found these two simple tips to be helpful

  1. I consciously think about what all the headlines I write will look like when I post them to Facebook and Twitter.  I still consider search engines, but my headlines are now written primarily for social networks.  As a result, my headlines have gotten a bit more casual and tongue and cheek.
  2. I make myself write ten headlines for every article and take my time in choosing which one to use.  I haven’t gotten to the point of doing testing like Upworthy does, but by taking the time to brainstorm my options I’ve found the quality of my headlines has improved and I’m seeing more clicks (and shares).  I’m no longer just using the first headline I come up with or writing exclusively for Google’s bots.

I’m still not a great headline writer, as evidenced by the headline to this article.  But by giving more thought to the headlines I’m getting a bit better every time out.

stone_wide

Pounding the Rock: Lessons from the San Antonio Spurs on running a great digital campaign

I grew up in San Antonio and like everyone from there I’m a big fan of the San Antonio Spurs. Since drafting Tim Duncan in 1997, the Spurs have gone on an unprecedented run, winning four NBA titles and more than 50 regular games each season for the last thirteen years.  Led by their cranky coach, Gregg Popovich, the Spurs are celebrated for their unselfishness and commitment to team.

The following quote from Dutch American reformer Jacob Riis hangs in the Spurs dressing room and serves the team’s unofficial motto:

“When nothing seems to help, I go and look at a stonecutter hammering away at his rock perhaps a hundred times without as much as a crack showing in it. Yet at the hundred and first blow it will split in two, and I know it was not that blow that did it, but all that had gone before.”

In the context of basketball, the quote is an obvious call for players to put maximum effort into everything they do.  Winning an NBA title is the culmination of years spent taking jumpers in the gym when no one else is watching.  To be great you have to pound the rock.

The quote is also an accurate description of what it takes to build and maintain a great digital program.

There are tons of organizations that want a great, successful online campaign but don’t want to put in the work.  The truth is there really aren’t short cuts.  The truth is that building websites and running digital campaigns is hard work that requires a significant commitment.  A successful web program isn’t the result of one transcendent idea so much as it is hundreds of small ideas implemented well.

To be great you have to write compelling content every week, and preferably every day.

To be great you have to optimize your email messaging and design.

To be great you have to make sure your website works in all browsers (even IE) on all devices (desktop, tablet and smartphone).

To be great you have to experiment.

To be great you have to test and then test some more.

To be great you have to pound the rock.

How to Create Dynamic SVG’s with Raphaël

Over the last few years I have heard more and more good things about the javascript library Raphaël. A project I was working on recently afforded me the opportunity to experiment with it fully. I discovered that it is really powerful and actually fun and easy to work with. In fact, it feels like it replaces a lot of the functionality you could create in Flash, when that was the standard for robust, dynamic interfaces. But unlike Flash, mobile browsers are starting to support SVG across the board (from a few years ago) and Raphaël will convert the SVG code to VML for IE8 and below.

In this tutorial I walk through some basic examples of using Raphaël and then include code for a more complex example where I create a custom pie graph. This tutorial assumes that you have a basic knowledge in JavaScript code and that you are familiar with using jQuery. But before I get into the tutorial, let’s go through the basics.

What is Raphaël?

Raphaël is a JavaScript library that allows for creating SVG’s on the web. For browsers that do not support SVG, it will automatically convert the code to VML (IE8 and below).

What makes Raphaël awesome is how it fits very well with responsive design. Since it creats vector graphics, it can scale without losing clarity or stretching out pixels, like you find in raster graphics.

Getting Started

The first thing you will want to do is download the raphael.js file. I recommend using jQuery to help work with the dom, but jQuery is not required to use Raphaël. You will also want to bookmark the documentation page, as that will be useful in accessing different functionality and options for the library. I also recommend going through the examples they have on their site to get a feeling for what you can do with the library. In fact, if you can find an example that sends you in the right direction in what you are trying to do, I recommend starting from there.

When using Raphaël, you will always need to create a canvas to draw on. This defines the total area we have to work with. You will be referencing this object when you draw lines and shapes, so make sure you call this before those samples. With the Raphael() call, we are sending the id of the <div> where we want to draw the canvas.

Below is the basic html structure for a page that uses Raphaël, including creating the canvas, that I’m using with these examples. Note that the CSS here is very important, as we are using it to define the size of the canvas.

Drawing Lines

A key concept when using Raphaël is understanding how lines are drawn. There are different ways you can do this, and you will want to understand the different options. For the examples in this section, we will simply use Paper.path().

Keep in mind that all of the commands we are sending to this method are SVG commands. So as another option, you could use several software programs to generate these commands. You can reference the W3 SVG standards if you want a more in depth and technical description in what you can do.

Here is a sample command that draws a line. Underneath the code, I explain what each part of the command is doing.

M: This tells the system where to move the cursor. It then is followed by a 0 and 240, which are x,y coordinates. In human terms it is saying “From the top left corner of the canvas, move the cursor 0 pixels to the right and 240 pixels down”.

l: This is a lowercase “L” and specifies that we want to draw a line, relative to where the cursor is at. An uppercase “L” uses an absolute position from the top left corner of the canvas. With the code above, the command is saying “From where the cursor is at, draw a line 640 pixels to the right and 0 pixels down.”

With both of these commands you can use negative numbers. For the x coordinate, this would make it go to the left and for the y coordinate, this would tell it to go up.

Here are a few additional examples:

You can combine all of these into one path value. The only reason you might want to separate them is if you wanted to apply different styling or effects to each line. But in most cases in dealing with lines, you will want to combine them into one path, like this:

See the code in action.

Just like the “L” call, you can make the “M” call lower case. This makes the cursor move relative to where it is at currently. So we could draw a triangle in the center of a rectangle with this command:

See the code in action.

Drawing Shapes and Text

You could create shapes and text manually using the path() method. But there are much simpler ways for drawing basic shapes and text using the library. A few examples are circle(), rect() and text(). See an example that draws all of them on the same canvas below.

See the code in action.

Attributes

At this point we haven’t customized the look of the objects we have been drawing. What if you want to change the fill color of the object? Or the border? Or the cursor when the mouse goes over the object? For customizing the look of any object you draw in Raphaël, you will want to use Element.attr().

Here is some code that creates a circle and changes the fill color.

Or you could make the code look like this to accomplish the same thing.

You can change as many properties of the object as you want.

Once you have drawn an object, you can also add click, mouseover or any other jQuery events onto that object very easily. Take a look at this code to see a modified example that changes the attributes of the object and also modifies one of the objects when the text is clicked. From here you see the benefits in using jQuery with Raphaël.

Custom Pie Graph

Recently we created a custom pie graph directly in SVG. But the problem was that the SVG would not load in IE8. To get this working in IE8, we decided to redo this using Raphaël.

When tackling a complex customization like this, you will want to break the task into simpler steps that you implement one at a time. I first got a basic pie graph to display. I then implemented the different colors for each slice of the pie. Next I modified how far each slice goes out, depending on the value. Finally I created each section slice (to make each section clickable).

If you take a look at the code, you will notice that I am getting the values of each slice from a hidden html table on the page. This opens up the possibility in how to get your data into something like a graph.

See the code in action.

Once you get over the initial learning curve using Raphaël, you begin to realize the potential this library has to create some really cool, dynamic interfaces. And when combined with jQuery, implementing this becomes even easier!