Two days ago I got access to tabs through my personal Gmail account and started using it.  Pretty much immediately, tabs changed the way I read my email. 

Let me back up. 

Gmail tabs automatically categorizes your email into five main groupings – Primary, Social, Promotions, Updates and Forums – that are presented along the top of the page.  The Primary tab houses all your emails from actual people while the rest of the tabs consist of emails from marketers and various notices you get automatically from social networks and sites you have accounts with.  Here is what tabs looks like on my account, with the Promotions tabs selected:

For me the impact of tabs was dramatic.  Within hours of getting access to the tool I stopped reading any email that weren’t sent by an actual person.  I stayed in the Primary tab all day along and ventured into the other tabs for a quick glance maybe once or twice a day.  I rarely opened any emails that weren’t in my Primary folder, although, somewhat embarrassingly, you can see a “Juicy Burger Day” Groupon grabbed my attention (As an aside, great use of “Juicy” in the subject – no way I open this email if it just says “Burger Day Deals”.) 

This is a significant behavioral change for me.  Previously all these marketing emails made it into my main inbox.  I certainly didn’t open or read all of them, but I definitely saw them as they came in.  I had to sort through them to get to my emails from my friends and family.

For email marketers, this means I have gone from a sucker who would occasionally get distracted and click on random marketing emails to someone that has stopped reading this stuff all together. 

For all you Getting Things Done nerds I understand that there were already ways to accomplish this kind of sorting.  I have a pretty robust system for filtering my work email and have played around with productivity tools like Mailbox.  But for whatever reason I never made any real attempt to optimize my personal email account.  Gmail tabs just did it for me.

I think Gmail tabs is going to take email productivity mainstream.  Three reasons:

1. It is dead simple.  It would have taken me hours to create rules to do what I’m able to do in tabs by simply setting up the feature. 
2. It works.  In two days I have yet to see an email get categorized incorrectly.
3. It is a core feature in Gmail.  Tools like Mailbox are like a cool indie band that only hardcore fans know about.  Gmail is the Rolling Stones.  Over the next few months everyone will get this feature.  And Gmail’s primary competitors will roll out their own versions of tabs to keep up.  This will become the default interface for email.

If my usage patterns are any indication, Gmail tabs is going to seriously disrupt email marketing.  As the feature gains widespread use I would expect a further drop in the open and click through rates for marketing emails.   People are only going to open and read emails from companies and organizations that they really care about.  Perhaps more importantly, peer to peer email marketing is likely to become even more effective as people are able to filter out all email communication from people they don’t actually know. 

What do you think the impact will be?

(1) The Problem with Wireframes

“This all wrong.Its too grey, it’s too boxy and I hate the font.” — Every Client who ever reviewed wireframes.#drupalcon

— Todd Zeigler (@debaser) May 23, 2013

I believe this was a quote from the Design Smarter, Not Harder session by Ken Woodworth.

This is obviously a bit of an overstatement, but in my experience around half of clients simply aren’t going to be able to provide you with good feedback on wireframes.  Wireframes are intended to separate the form from the function, and some folks can’t make that leap.  Wireframes are simply too conceptual in nature for some folks.

(2) Working Software Wins

“Working software always trumps documents about working software.” #DrupalCon

— Troy Swanson (@gerphimum) May 23, 2013

I believe this is from the Designing on Purpose session featuring Jared Ponch.  There is a place for specifications and planning and process, but the best feedback will come when you have something tangible to play with. Processes that give users things they can touch and feel sooner are what is needed.

(3) The Role of the Designer

.@jponch – “We can’t solve problems for our clients based on their personal preferences in color, typography & texture.” #drupalcon

— Todd Zeigler (@debaser) May 21, 2013

This is another one from Jared Ponch.  He compared designers to architects.  Architects ask clients what they are hoping to achieve, not what their technical approach to the project should be.  Web designers should follow the same process.

(4) The CMS Market

“Content management was commoditized as soon as open-source solutions reached sufficient competency at a no-cost price point.” #drupalcon

— Todd Zeigler (@debaser) May 23, 2013

This tweet came from Deane Barker’s presentation on Why the CEO Matters More Than the Developer.  Simplifying greatly, his point was that content management is no longer a point of differentiation during the sales process.  Instead, firms must “sell” products and services that move their clients bottom line through increased sales or increased efficiency.

(5) Visual vs. UX Design

Visual design and ux design are two completely things that require two completely different sills sets. #drupalcon

— Todd Zeigler (@debaser) May 21, 2013

I don’t really remember which panel this quote came from, but it really struck me.  Web design is a big field and different jobs require different kinds of skills. The person who can create beautiful illustrations for an interactive piece may not be the one you want designing your forms.

A photo of all the attendees standing next to the Drupal man.  This photo got passed around Twitter so I’m not sure who originally took this one.

This is what the free t-shirt all attendees got looks like.

Drupal project lead Dries Buytaert is up there somewhere giving the Day One keynote.  There were over 3,300 people at this year’s Drupalcon and everyone was there for Dries’ talk.

I can neither confirm nor deny that we may have indulged in some of Oregon’s craft beers.  Photo of an IPA from Burnside Brewing Company.

Chris and Todd at one of the aforementioned craft beer establishments.

A sign at the Green Dragon.

Mike, John and Chris at the Green Dragon.

We also ate well.  Jerk chicken at Burnside Brewing Company.

I have now been with The Brick Factory for about three months and believe I have made myself right at home. I have worked with USAgainstAlzheimer’s, Melcrum, Panthera,  and Podesta. I have truly enjoyed getting to know everyone at my office as well as the wonderful clients that work with The Brick Factory. I thought this might be a good time to make my full introduction.

My background in marketing, entrepreneurship and publishing, allows me to take a unique approach to managing a client’s digital strategies. With emphasis on campaign management, creative marketing techniques and on-point writing styles, I have an eye for tailoring a project to engage current readers, potential clients and prospective contributors to establish the proper intersection between the needs of the client and the follow-through of the audience.

I moved to DC following a nearly eight year stint in Nashville where I earned a B.B.A with a concentration in Entrepreneurship from Belmont University. In my spare time I enjoy writing, reading, and spending time with my wonderful husband and two rambunctious puppies.

While my experience getting to The Brick Factory was quite normal, a few interviews, a job offer, and a start date, the same cannot be said for the following young interviewees. Perhaps this is a new trend that I happened to luckily sneak out of, or maybe these are just some hiring managers with a twisted sense of humor, or lastly perhaps this is a true test of a potential hire’s character. Whatever the case might be, I am beyond thankful that the crew here at The Brick Factory did not put me through this torture – not yet anyway.

What do you think, could you get this job?

Summer Internship at Brick Factory

The Brick Factory plans and executes world-class digital campaigns for non-profits, trade associations, advocacy groups and brands. We believe in simple solutions, setting clear goals and objectives, and providing great service to our clients. We believe a good website or campaign is never done and the launch of a website is the beginning, not the end.

The Brick Factory intern will be responsible for supporting our Strategists in conception, implementation and analysis of many digital initiatives. This includes website, social media, email, mobile and other digital marketing efforts that support new business and client programs. This position calls for an individual with strong communication skills, analytic skills and creative thinking ability. This position requires a highly resourceful individual who can think on their feet and can focus under pressure.

What you can expect from this internship:

• To Work: Do not be fooled, you will be put to work. Researching, creating, outlining, and executing strategic plans to the highest ability will be your average Monday.
• To Grow: The Brick Factory has high expectations of all interns and believes that in order for you to get the most of your time here, meeting and exceeding mutually defined goals is of top priority.
• To Compete: A summer internship at the Brick Factory will provide you will the skills and experience necessary to compete in the fast-paced, ever-changing digital technology industry.

What we expect from you:

• You’re a fun person to be around.
• You have a passion for work in the digital industry and are excited to explore the digital-sphere
• You’re a problem solver. You would rather figure out the best solution than be told how to do it.
• You’re organized. You can manage multiple projects at once and are dedicated to hitting deadlines.
• You have some experience with HTML, marketing and sales research, and analytics tools.

What you can expect from us:

• A great work environment, with plenty of opportunity to learn
• A metro accessible office in downtown Washington, DC
• Compensation during the extent of your internship
• A fun team of enthusiastic and talented people

The Details:

Dates May 15, 2013 through August 15, 2013 (can be flexible for the right candidate)
3 days a week in the office

Sound interesting? Take a look around our website, blog, Facebook and Twitter. If you think we’d be a good fit please send a resume and cover letter to jobs@thebrickfactory.com.

So much lies in a word. A single word can stir emotions, spark excitement, cause a raucous, and make you stop and ponder, all within the meaning, purpose and in the web world, the design of the word itself. Below is a list of some of my favorite typography based websites. I chose these for the use of tailored fonts specific to their brand, the use of specific color to highlight their chosen text, and the seamless integration of just the right number of fonts used.

Clean. Sophisticated. Modern.  

The New Yorker

The publishing world understood the importance of perfect typography even before the web world caught on, and The New Yorker shows us just how it is done. I would go ahead and bet you can picture what The New Yorker type looks like. Their logo offers a perfect blend of whimsy, polish and just a hint of pretentiousness, and this trickles down throughout the entirety of the site.

Corsair Distillery

This one may be just a bit of a biased choice on my part, being that I am from Nashville and actually used to work in this same building, but that is beside the point. Not only is this some wonderful whiskey, but the way they explain the boldness of their spirits just in the font and placement of text on their site show some skills in the typography department. The perfect blend of simply black and white with well chosen pops of color leaves us wanting to know more about their product, and by this I do mean a taste test is desired.

Beast and the Hare

Let’s be honest, when you are hungry and looking for a great restaurant, you want to get straight to the good part – the menu. What do they serve, what cocktails do they have, and are they still open? Beast and the Hare spelled it all out on this one page layout of their perfectly descript site. Clever and cool, this site is easy on the eyes and it lends itself to believe the food would also be easy on the lips.

Circle Meetups

The point of this site is to spark creativity within a group, or circle. Easy. Get people together, get a speaker and get creative. When it comes to their site, they kept it simple. In its simplicity it is actually quite genius. This site provides the information needed in a way that almost resembles a meeting invite you would add to your Google calendar. Nothing too fancy, yet cleverly displayed. While this is personal taste, I actually really like the oversized font throughout the homepage. I don’t feel that they are screaming at me, I feel that I my participation is quite zealously wanted.

Warby Parker

While I am not 100% positive that I reside on the cool team able to wear these frames, I would like to think that I am. I appreciate the model and the site they have built. The pops of color mixed with the smooth type they have chosen showcases an essence of calmness and tranquility. This sense of ease makes my purchasing of a third, or fourth pair of glasses less stressful and more rational – right?

In 2005, we started using WordPress for blog sites, and later, in 2007, we started to use Drupal for more complicated sites. Both can, to varying degrees, be called application frameworks (Drupal considerably more so than WordPress), and using these tools allowed us to create many websites covering a wide range of needs for our clients must faster than we could have if we had to write everything from scratch.

Actually, at one point before we adopted Drupal, we started to write our own CMS tool, and stopped when we realized that the amount of time we’d have to spend building it to meet our needs would be considerably larger than just using an existing open-source platform. And even if we succeeded in building something that met our standards, ultimately, we’d just be re-inventing the wheel that Drupal, WordPress, Joomla, and 40+ other CMS systems (according to Wikipedia) have spent years refining. And where’s the fun in that?

So, we’ve spent the last several years refining our skills with Drupal, even contributing back a few bug fixes and a Drupal module (Splashify) to the community, and we think we’ve gotten pretty good at Drupal site and module design and implementation.

In December, we started planning for Sway, our next internal project. We have some ambitious goals with Sway, and we wanted to get something to market relatively quickly, so it was obvious early on that we had to use a framework of some sort. This meant we couldn’t use the internal workings of ImpactWatch or Training, as aside from a few reusable components, they were never designed and developed to the point of being significantly useful in other applications.

It also put Drupal out of consideration, as what we had in mind would require so much custom work that the strengths Drupal brought to the table would be outweighed by the time we’d spend working against it. Also, we wanted a chance to use the latest and greatest technologies. PHP 5.4 has been available for just over a year, and we wanted to be able to use it. Drupal 7, by comparison, doesn’t take advantage of many of the new features in PHP 5.3, let alone PHP 5.4.

Ultimately, we settled on Symfony, and in January, started developing Sway using Symfony 2.1 (and quickly upgraded to Symfony 2.2 in March after it was released).

As an added bonus, working on Sway will give us a head-start in learning to use Drupal 8, which is expected to be released later this year. Core components from Symfony are being used in Drupal 8, so we’ll be able to put some of our experience working on Sway to use on any Drupal 8 sites we start working with. Both Symfony 2 and Drupal 8 use the Twig template engine, so our designers will have time to become familiar with Twig before we have to start using it on Drupal sites.

We’re looking forward to what we’ll be able to accomplish with Sway, and with future versions of Symfony and Drupal. This should be an exciting year!

The approach to building website has evolved along with the technology people use to brose the Internet.  In the last few years Flash has gone from ubiquitous to scarce.  And HTM5 has gone from an experimental technology to a fairly common way to build websites.

The rise of HTM5 and the fall of Flash have had a particularly dramatic impact on Interactive pieces.

I remember seeing this Arcade Fire HTML5 interactive film back in 2010, and being blown away by the possibilities it presented. While it is still pretty great, pieces like this have become more and more common over the last few years.  Following are five HTML5 interactive pieces I’ve come across in the last few months that push the boundaries of what is possible in browser.

(1) Pi’s Epic Journey

This piece uses stunning photography and video to tell the story of the making of Life of Pi.

(2) Every Last Drop

This piece tells the story of how much water the average person in the UK uses in a given day.  All of the animation effects are triggered by users scrolling down the page.

(3) North Pole Exhibition

Uses a combination of text, photos and maps, this interactive from Greenpeace tells the story of an exhibition to the North Pole.

(4) Teacher Test

This online quiz tests you on whether you have the base knowledge required to be a school teacher.  An HTML5 take on the classic online quiz.

(5) Century of the Child

This interactive is an online version of the Museum of Modern Art’s Century of the Child Exhibit. Great photography and extremely easy to use.

$sql = "SELECT * FROM ".$tableName." WHERE id=".$_GET['id'];
$result = mysql_query($sql);

This is perfectly valid code. In fact, if you look at a lot of examples today you will see the same thing. There’s a huge flaw in these examples, and one that has given PHP a bad name when it comes to security. It isn’t the fault of the language but of the way that many developers learned how to do things. PHP makes it easy to shoot yourself in the foot and it doesn’t help that developers keep showing new developers how to do it. Get gun, point at foot, pull trigger. That’s essentially what the above example is showing you.

So, what is so wrong with the example code? The problem is that we aren’t validating anything. Do we know what $_GET['id'] actually is? What happens if $_GET['id'] is set to something that isn’t an integer?

// $_GET['id'] = 'bob'
$sql = "SELECT * FROM users WHERE id=".$_GET['id'];
// $sql is now equal to "SELECT * FROM users WHERE id=bob"
$result = mysql_query($sql);

When mysql_query() runs it will return false. Depending on how well your code handles a false return, someone screwing around with the query variables will learn that we didn’t properly make sure that the id query variable is being checked. At the very least they learned that changing query string parameters does cause the code to change. Depending on the setup of our code, it might even expose what database we’re using. If it’s MySQL, they can get crafty and do something like this:

// $_GET['id'] = '1 OR 1=1'
$sql = "SELECT * FROM users WHERE id=".$_GET['id'];
// $sql is now equal to "SELECT * FROM users WHERE id=1 OR 1=1"
$result = mysql_query($sql);

That little OR 1=1 bit will cause the SQL server to return all of the data in the user’s database. Let’s take this a step further, and say that we are authenticating a user. Most of the examples would look like this:

$username = $_POST['username'];
// Using MD5 to hash passwords is bad, using ONLY as an example. Look into something like PasswordLib for a modern password solution
$password = md5($_POST['password']);
$sql = "SELECT * FROM users WHERE username='".$username."' AND password='".$password."'";
$result = mysql_query($sql);

We’re doing one thing correctly (forcing this data to come through the POST array), but we’re still not really validating that $username or $password are actually good valid values. We can still do the following:

// $_POST['username'] = "admin' -- "
$username = $_POST['username'];
$password = md5($_POST['password']);
$sql = "SELECT * FROM users WHERE username='".$username."' AND password='".$password."'";
// $sql is now SELECT * FROM users WHERE username='admin' -- ' AND password='oasdnifniuh3h48puahergler' 
$result = mysql_query($sql);

We’re in, and as a user where we didn’t even know the password. Why? The -- will comment anything after it, so we dropped the AND password= portion of the SQL and do the select based on just the username. It will return a single value just like the code will expect, so your code never knows that it was altered.

Both of these attacks are called “SQL Injection Attacks”, and is part of the OWASP Top 10′s #1 attack vector. The sad thing is that these are really easy to combat against. I see all the time on Reddit and Stack Overflow people asking for help and seeing this same sort of code. In 2013 we should have been able to stop this, but with years of old tutorials out there it is an uphill battle.

The reason that it sad to see this as still the #1 attack on OWASP is that it is easy to combat. The first and foremost is to stop using the mysql_* functions in your code. The module that handles those is old, and it doesn’t support the best way to handle SQL injections. Yes, it has mysql_real_escape_string(), but that relies on the developer remembering to use it. Better security comes from the developer having to not remember to do it and it just being built in.

Since PHP 5.0, PHP has shipped with something called PDO. PDO is a database abstraction layer that makes it easier to write cross-database code. If you write your app for MySQL, you can more easily port it to something like Postgres or MSSQL by doing nothing more than changing the connection parameter (assuming you haven’t written any engine specific code like using LIMIT, which MySQL and Postgres support but MSSQL doesn’t).

PDO has another big advantage in that it has support for something called a Prepared Statement. With a prepared statement, the SQL query is parsed by the engine by taking a SQL statement and a list of parameters and putting them together itself instead of relying on a fully built SQL statement. This becomes much safer because the DB engine does all the work on properly quoting the values coming in. The side effect of this is that the worry about the developer being safe is offloaded somewhere else, so by using PDO and prepared statements the developer doesn’t need to worry about if a parameter has been sanitized.

Let’s go back to our first example, with the $_GET parameter. What would this look like with PDO?

$sql = "SELECT * FROM users WHERE id=:id";
// $pdo is our PDO connection
$stmt = $pdo->prepare($sql);
$stmt->execute(array(
    ":id" => $_GET['id']
));
$user = $stmt->fetch();

It’s a bit longer, but not so much that that there is a ton of extra work involved. What we did was create an SQL statement using placeholders, which in PDO can either be a ? or named like our example, which was :id. We run our SQL through the prepare() method on our PDO connection, which returns a statement object. This statement object gets executed, and at the same time we pass in the values for our placeholders. We can then get the user by calling the fetch() method on the statement.

We can rest assured that the SQL code is now safe from injections. That’s it! That is the single most effective way to combat SQL injections.

For older legacy applications switching out to PDO can be a major undertaking. Drupal did this in Drupal 7, where they replaced their underlying database abstraction layer to use PDO. Drupal didn’t use the database specific functions all over the codebase which made it somewhat easier to swap out, but if your application is riddle with calls to mysql_* or pg_* functions you will want to replace them all with PDO commands.

Do your part to help clean up the bad examples out there. If you ever do new code, use PDO. If you ever give examples, do it using PDO. Maybe we can make the internet a little better, and help knock SQL injections (and other injection types) off of the top of the OWASP Top 10.

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.