A blog by the Brick Factory The Brick Factory

Twenty Great 404 Error Pages

Human being are fallible creatures, so when surfing the web it is inevitable that they will occasionally mistype a URL or try to access a page that no longer exists.  When this happens visitors hit a site’s 404 error page which tells users and search engines that the page they are looking for can’t be found.

On most sites the 404 page is a throw away.  It is the last thing that web developers put together and not a lot of thought is put into it.  This 404 page from the Washington Post is an example of the sort of soulless 404 page you typically run into.

However some sites go the extra mile and use their 404 pages as an opportunity to connect with visitors by highlighting key content and/or showing some personality.  Here are twenty sites, presented in no particular order, that have taken the time to put together outstanding 404 pages.

(1) Hillary Clinton

On her Presidential campaign website Hillary Clinton uses her 404 pages to show her playful side.

 

hillary-clinton-404

(more…)

moving

Lessons in Requirements Gathering from our Search for a New Office

Since we launched the company three years ago we’ve made our home at an office building on 17th and M in downtown Washington, DC.  It is a nice space and the location is fantastic.  We are in the Golden Triangle area, which is walking distance from a variety of great DC sites and neighborhoods (Dupont Circle, Logan Circle, the Mall, etc.), near the Metro and close to more restaurants, food trucks and bars than we have time to try.  We have been happy here.

We found out a few months ago that our landlord will be tearing down our office building, along with 3-4 others, to build a new mega building that will be geared towards high-end corporate tenants as opposed to small businesses like ours.  We have to be out of our space by the end of the year, so with mixed feelings we began our search for a new office a few months ago.  We’re excited by the opportunity to craft a new space from scratch but apprehensive about all the work involved in moving offices.

As someone who has done project management in some form my entire career, when starting the search my natural instinct was to start gathering requirements in the same way I would when planning a new web program for a client.  As the owner of the company I had a pretty clear idea of what I wanted in our new space, but I needed to hear from the rest of our staff about what they were looking for.  I needed to conduct a discovery process.

As a first step, I put together a short survey that asked staff what was most and least important to them in the new office.  We have a distributed team, with half of our twenty person staff working out of the DC office and the other half working remotely and coming into the office a few times a year.  So it was important to construct the survey in a way that differentiated the needs of these two types of users.

The results mostly confirmed my assumptions.  We are a Washington, DC firm and our office needs to be in the city.  Metro and bus accessibility are critical, as is access to plenty of restaurants and bars.  But the survey revealed a few things that were surprises to me:

  1. Our current space has windows on only one side. And those windows are only able to be enjoyed by three people who have offices that overlook M Street. The survey revealed that the rest of the staff are starved for natural light.  Katie even went so far as to forward me articles about how a lack of natural light negatively impacts sleep patterns.  As one of the few people with an office with a window, I had taken it for granted and undervalued how important light is to those that don’t have it.
  2. Nobody really cared that much about building amenities.  Perks like a concierge and fitness center just aren’t that important to our staff. People don’t want or need a lot of bells and whistles.  These things were more important to me than the rest of the team.

Based on these survey results and my conversations with staff, I put together a requirements list. Since we need to work within a budget, it was important to prioritize our needs in the same way I would ask one of our clients.  I separated our requirements into lists of “must haves”, “nice to haves” and “don’t needs” that were put into priority order.  These requirements  were very similar to the lists of user stories we create when planning a web program for our clients.  Here is what the list  looks like:

Must Haves

  1. Office is in Washington, DC.  We do not want to move to Virginia or Maryland.
  2. Office is Metro and bus line accessible.
  3. Office has space for four private offices.
  4. Office has space for eight other work stations.  An open space plan is preferred over cubes.
  5. Office has a main conference room capable of seating at least eight people comfortably.
  6. Office has a kitchen with refrigerator, sink, microwave and dishwasher.
  7. Office has small storage room and server closet with room for a server rack.
  8. Office has space for 3-4 large filing cabinets.
  9. Office must have access to extremely reliable Internet Service Provider.

Nice to Haves

  1. Office has more natural light/windows than current office.
  2. Office is in same part of town as current office.
  3. Office has extra space/workstations for telecommuters when they visit.
  4. Office has a small secondary conference room optimized for four people.  Primarily used for small team meetings and conference calls.
  5. Office has main conference room capable of seating 16 people.
  6. Office has area where people can eat lunch together.
  7. Office has gym/showers in building that employees can use.
  8. Office has in building parking garage.
  9. Office has concierge.

Things We Don’t Need

  1. Office has a formal reception area.  Our company has a flat structure with no admin staff, so we don’t need to waste space with a reception area.
  2. Office doesn’t need large work room. We have one in the current office and it has basically become a place for Ron to indulge his hoarding problem.

We sent our requirements list to our real estate team who are using it to narrow down our options and to construct our space plan.  We started touring offices last week.

In the context of web development the goal of a discovery process is to surface requirements and priorities early on to minimize surprises late in the process.  Work done up front saves time down the road.

While not nearly as involved as the process of planning a website, I think the simple discovery process we performed in planning our office will pay dividends down the road.  It will help us focus our search and provide a solid framework with which to make our final decision.

How the Rise of Smart Phones and Tablets Is Impacting Our Clients

With the proliferation of smart phones and tablets over the last few years, the hype about the mobile web has gotten pretty deafening.  While overall industry trends are important, at the Brick Factory we are more interested in understanding how the rise of the mobile web is impacting our own world of non-profits, advocacy groups and brands.

In an effort to truly understand how smart phone/tablet usage is impacting our clients, the last few years we have taken an aggregate look at visitor trends of the websites we manage (60+ sites).  Below are the key findings from our look at 2014 traffic data.

Overall Trend

Cutting to the chase, smart phone and tablet visits to the sites we manage grew aggressively in 2014.  Just under 32% of visitors came from smart phones and tablets in 2014.  Here is a graph showing the trend since we starting tracking this in 2010:

tbf_mobile_visitors_final

After more than doubling every year from 2010 to 2013, traffic from smart phones and tablets only increased by 70% from 2013 to 2014.  While I expect the percentage growth to slow further this year, I still project that by the end of 2015 close to 50% of the traffic to the sites we manage will come from smart phones and tablets.

Variance

While the aggregate trend is obviously important, diving into the data it is clear that each site has its own unique story to tell.  Traffic from mobile devices ranged from 2% to 70% among our client base.  Here is a graphic that demonstrates how much the mobile/tablet traffic percentage varied from site to site.

tbf_mobile_variance_spread-final

The audience and goals of a site/organization has a huge impact of how much traffic comes from smart phones and tablets.

As an example, one of our clients is a company that focuses on professional development for large corporations.  Since their clients are primarily accessing their web properties from work computers during office hours, their mobile/tablet percentage was only around 15%.  Due to the nature of their work, their target audience tended to access the site from desktops/laptops more often than our average client.

Contrast that with another client that is a large advocacy group.  This client maintains an active blog, sends out daily email alerts and frequently comments on breaking news.  50% of their traffic comes from mobile and tablets.

Smart Phones vs. Tablets

Smart phones were used to access the sites we manage more than twice as often as tablets.

tbf_mobile_piechart_final

Interestingly, we saw a moderate increase in overall traffic from desktops and laptops.  This increase was just dwarfed by the more dramatic increase in accesses from mobile phones and tablets.  For our clients at least, the story isn’t that desktop and laptop usage is dying, it is that visits from phones and tablets are exploding.

Android and Apple

Interestingly, more people accessed the sites we manage from Android smart phones than from iPhones in 2014.  The iPhone was the dominant device from 2010-2013.  The iPad continues to dominate the tablet market.

tbf_mobile_tablet_mobile

Bottom Line

The conclusion here is obvious: responsive design is now the rule and not the exception.

Back in 2010 and 2011, when planning projects we treated making a site mobile-friendly as a nice-to-have for most of our clients.  The percentage of visitors coming from smart phones and tablets often didn’t justify the added time and cost required to make a site mobile-friendly.  Creating a great mobile and tablet experience is now very clearly a requirement for every project we work on.

Five Great Campaign Websites from the 2014 Election Cycle

Having worked in digital politics in a previous life, I observe elections these days with mixed feelings from a safe distance.

Working for political campaigns is hard, stressful and often demoralizing.  The long hours rewarded with below market pay.  But the highs are pretty high.  When you are working on a political campaign it is your whole life for a time.  The small victories, like watching the money come in after sending a good fundraising email, are often nearly as sweet as winning the election.  It is both completely awful and exhilarating at the same time.

Knowing how hard campaign staffers and consultants worked during the 2014 election cycle, I wanted to acknowledge some of the great work digital teams did this cycle.  So, without further throat clearing, here are the five best campaign websites I came across this cycle.

(1) Ed Gillespie (R-VA)

Mark Warner edged out Ed Gillespie in the Virginia Senate race, but I think Gillespie had a slightly better website.  I like the use of photography and the site’s responsiveness is a step above the default behavior you’ll get from most HTML frameworks.

My only compliant about the homepage is the video, which feels like something that wasn’t planned for in the original design and got thrown in at some point.

ed1

The entire navigation system is nicely implemented.  I particularly like the Take Action bar on the left that encourages users to volunteer, donate, share or sign up for the email list.  It is unique and nicely implemented.

takeaction

Like just about every campaign this cycle, the Gillespie team  had a look at the Obama donate page.  The layout and functional of the Gillespie donate page is pretty much identical to the Obama version.

eddonate

 

(2) Mitch McConnell (R-KY)

The Mitch McConell site features a giant background video at the top of every page that references Lincoln, coal miners, Kentucky, soldiers, McConnell and AMERICA.  I’ve made an animated gif of part of the background video below, but you should visit the site to see the full piece.

mitch

While I’m not sure it belongs on every page, I appreciate the boldness of the approach.

(3) Alison Lundergan Grimes (D-KY)

While it lacks the trippy background video, the site of McConnell’s opponent Alison Lundergan Grimes is probably better overall.  Great use of photography and the whole site is just solid.

alison

I particularly like the collapsed state of the navigation bar and the way the Get Email Updates and Support the Campaign call to actions stay fixed on the screen as you scroll down the page.

alison-2

(4) Nathan Deal (R-GA)

The Deal campaign basically ran back their site design from 2010, going with bold photography and minimal text.  It still works.

deal

The site works just as well on mobile as it does on desktop.  I particularly like the the mobile version of their menu.

deal-mobile

(5) Chris Coons (D-DE)

The Coons campaign site features bold photography and a unique icon-based navigation system.

coons-home

As with the Gillespie campaign, Coons donation provider Act Blue had a look at the Obama donation page.

coons2

What were your favorite sites from the 2014 cycle?

Complete Brick Factory Card Set

This Summer we’ve been posting mock baseball cards of our employees on our Facebook page.  We’ve done this partly as a way to introduce our awesome staff to folks, and partly to amuse ourselves.  You can check out the complete set below.  Enjoy, and follow us on Facebook for more weird stuff like this.

blog_post_2