A blog by the Brick Factory The Brick Factory
newspapers and responsive

Are newspapers embracing responsive design?

I was born and raised in San Antonio, TX so for years I’ve visited the website of the city’s largest newspapers, the Express-News, every few days.

This hasn’t been a particularly pleasant experience, as the Express-News has long pursued an ill-advised portal strategy and made its content available through the hideous www.mysanantonio.com. As someone who builds websites for a living I would sort of hold my nose as I read stories about my high school and my San Antonio Spurs on My San Antonio.

A few months ago the San Antonio Express-News got a much needed divorce from www.mysanantonio.com and launched its own website.  And, pay wall aside, it is kind of awesome.   Easy to use.  Lightening fast.  Attractive.  Fully responsive so it works well on phones and tablets.  Design-wise I would put the new Express-News site up there with any newspaper site out there.

The use of responsive design in particular impressed me.  While responsive design has been around for a long time, it has only really become common place in the last few years with the explosion of mobile.  Planning and implementing responsive designs is difficult and time consuming, so you have to tip your hat that a site the scale of San Antonio Express-News was able to pull it off so well.

The Express-News site got me thinking about how newspapers are adapting to the new mobile world.  Traditionally newspapers have optimized their sites for phones by creating design themes that are specific to mobile visitors.  So instead of having the site respond based on screen resolution newspapers have designed a completely different version of their sites for mobile visitors.  The use of responsive design on the Express-News site got me wondering whether this was the exception or the rule.  Are newspapers abandoning mobile themes and moving towards responsive designs?

After analyzing the sites of the top 100 newspapers in the United States the answer is that it is probably too soon to tell.  This graph summarizes my findings:

graph_todd

Frankly, I’m not sure these findings tell us much.   I’m not sure totally sure whether the 10% figure represents an embrace or rejection of responsive design.

While I don’t have concrete data my guess is that the 10% figure represents a significant increase over what I would have seen a year or two ago.  And as more time passes I would expect the number of newspapers that go with a responsive design strategy to increase dramatically.  I suspect the current, relatively low percentage is a reflection of the relative newness of the trend and the massive amount of time it takes to implement a responsive design on a site the scale of a newspaper, rather than a rejection of the strategy.

Interestingly, none of the sixteen largest papers in the country have implemented responsive designs.  The largest newspaper to have a responsive design is the Tampa Bay Times.

You can view a Google Doc of my research here.  I’ll update my research again in the future to see how things are evolving.

Note: The Express-News is a Hearst newspaper.  I later found out the design of the new site is a template that is also used by the San Francisco Chronicle.

Content First

I’ve been building websites for a long time.  What that means is that I’ve made a lot of mistakes, some more than once.

One seemingly small thing that can actually ruin a site’s design is the disconnect between what content looks like in concept versus what it looks like in reality.   Web design is often done with critical text in placeholder form (the ubiquitous “lorem ipsum” text).  Wireframes and design comps are often reviewed and approved with this “lorem ipsum” gibberish still in place.

Sometimes this process works fine,  but just as often it doesn’t.  The problem is the text that actually gets written often doesn’t match the designer’s idealized version of what it will look like.  Two sentence branding statements end up becoming three paragraphs.  Blog headlines end up averaging ten words instead of four.  Intro blurbs end up needing to be 200 characters instead of 100.  As all these littler differences add up, the end product can often seem like a pale imitation of the pixel perfect comps that were shown initially.

We’re in the process of redesigning our Brick Factory site, so I wanted to use the comps we are currently working on as an example of how things can go sideways.  Below is a comp of the top part of a new version of our homepage.  The concept is to have a really cool piece of Brick Factory artwork be the initial visual, with a complementary mission statement to orient visitors.  In the comp below, the mission statement is in “lorem ipsum”.

 gomepage-redesign-blog-post1-a

I love it.  So far so good.

But what happens when the actual text is 3-4 times the length we are planning for?  You end up with something like this.

gomepage-redesign-blog-post1-b 

You can’t even see Freddy’s awesome illustration.  Kind of a mess.

If I had already built this website by the time I got the copy, I would be kind of screwed here assuming the text is sacrosanct.  I would either have to spend a bunch of time reworking the design to fit the actual text or just end up with a site that never looks quite right. 

There is a really simple way to prevent this problem from happening.  Write your critical content before starting your design process.  Always have your design team work from real content.  If you aren’t at a point where you can provide copy you probably aren’t at a point where you should be working on your site design.

If you follow this content first process, you’ll end up with a much better end product. 

That’s what we did on our new Brick Factory site, which is shaping up really nicely I think.

gomepage-redesign-blog-post1-c

tabs

Did Gmail Tabs Just Kill Email Marketing?

A few weeks ago Gmail rolled out a new inbox optimization feature called tabs.  I have too many miles on me to get overly excited about new features in Gmail, so I made a mental note that tabs was coming and continued living my life.

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:

gmail 

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?

Drupalcon Tweets

Five Tweets from Drupalcon

I went to Drupalcon in Portland a few weeks ago and am still processing everything I learned.  I hope to have time to write a few longer posts in the coming weeks on some of the larger themes from the conference.  While I procrastinate I figured I’d highlight some of the more interesting tidbits from the sessions I attended.  Since I was on Twitter, these are going to take the from of tweets from myself and others.

(1) The Problem with Wireframes

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

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

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

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

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.

Photos from Drupalcon

Last week five members of the Brick Factory team descended on Portland, Oregon for Drupalcon.  We learned a ton, and will be sharing some insights the coming weeks.  While we put together our thoughts, here are some photos from our time at the conference.

drupalcon

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.

(more…)