A blog by the Brick Factory The Brick Factory

Is the Homepage Slider Dead?

The homepage slider has been a design staple in the political and public affairs space for the last half decade, at least. 

For those not familiar with the concept, a slider is an area of a website that allows visitors to scroll through different options like they would a Powerpoint deck.  In the politech space, these sliders are commonly used as the central element of a site’s homepage.  Here is an example from the current www.greenpeace.org.  The Greenpeace site allows you to scroll through the slides using the little arrows and dots in the bottom left.

  greenpeace

Sliders have become popular because they solve a common problem.  Organizations want their site to make a strong visual impact  while at the same time they want to feature a gazillion different pieces of content.  Sliders allow you to have things both ways. 

The concept was all the rage in 2008, with both the Barack Obama and John McCain sites featuring similar tab based sliders.  Here are screengrabs of both sites at this time around four years ago.

2008

In 2012, both the Obama and Romney campaigns have abandoned the slider and gone with a simpler, more streamlined approach.  Screenshots below.

2012

As I’ve watched some large sites abandon the slider approach, I’ve started to look at the data and think about whether sliders are the best approach in our own work.  From my perspective, there are three main reasons I see organizations moving away from sliders.

  1. The dirty little secret of sliders is that visitors rarely see any content beyond the first slide.  Very few people will click through your slideshow.  Even if your slider auto scrolls, most people aren’t going to be on the page long enough to see that great content hidden in the third or fourth slide.  This issue is made worse by sliders like the one used by Greenpeace, where the user has no idea what the content of the next slide is.  The McCain and Obama 2008 examples at least let visitors know what content they were clicking to access.
  2. Sliders don’t really work that well on smartphones or tablets. Try using the Greenpeace slider on your mobile phone.  Sure, you can make touch friendly sliders, but I’d much rather scroll up and down on my smartphone than try to navigate a touch friendly slider.
  3. Sliders are often in a misguided attempt to get critical content “above the fold.”  I think most people now understand that users are willing to scroll.  Longer pages are the norm now, so people don’t feel the need to cram all their content into a single slider that appears on screen when you first hit the site.

So should organizations abandon the homepage slider?

I would not go that far. 

But I do think most organizations are using them in the wrong way. 

Too many are burying critical site information in the third or fourth slide of their homepage slider, insuring that the  majority of visitors will never see the content.  If you use a slider, think of the information presented on slides 2-5 as bonus content for visitors that take the time to explore your site.  Think of the slider as a way to add a little interactivity to your site as opposed to as a critical part of your content delivery strategy.  Don’t use the slider as an excuse not to make editorial decisions about the content on your site.

If you do implement a slider and want people to actually see your content, don’t use little dots and arrows as the only navigation tools.  Give people a hint as to what they are getting into.  The charity:water site has a great, usable slider on their homepage.  It works because they don’t surround it with clutter and the headlines/thumbnails below give users a clear idea of what they will get when they click.

charity_water

In the end, I think sliders can still be used effectively.  They just need to be thought through strategically, and designers and content creators need to understand their limitations.

This is the End: Last Call for the Obama and Romney Campaigns

You don’t have to go home, but you can’t stay here.

We’re finally in the home stretch of the 2012 Presidential election and like a Chili’s at last call, it’s all about some action now. The lights are on and Smilin’ Joe Biden is looking less debonair than he was a few hours and drinks ago, but it’s time to fish or cut bait. The two candidates’ sites are similarly stacked with opportunities at this late stage to pitch in and help with the final push (while seeming to give the appropriate amount of real estate to the Hurricane Sandy relief effort). I haven’t taken a fresh look at the Obama and Romney efforts in a while because I feel like I’ve perhaps been getting just enough of their giant heads on tv lately. That changes today as I bravely pull screen grabs of the sites and make comments on the successes, failures and oddities (Biden inexplicably wearing someone’s shades for the glamour shot/ Ryan nowhere to be found).

To state the obvious, the numbers on the site screenshots correspond to the comments below.

BARACKOBAMA.com

obama_grab

  1. FORxWARD. I’m not sure how long this cutesy tagline edit has been up, but I see what you did there. I’m surprised that this element has been placed as the heading of the site. Healthcare wasn’t a prominent part of any recent discussion or even a highlight of any of the three debates but it gets the star treatment now.
  2. Smartly positioned and localized call to vote early.
  3. Puzzling image of VP Biden looking as if he left his bomber jacket in the limo. It might be me, but Joe looks like a South Park character in this photo.
  4. Donating at this stage seems belated, but these ads need to keep running through Tuesday night, sadly.
  5. Call Voters prompt. She wouldn’t be making that face if she called me.
  6. Under (and part of) the Hurricane Relief banner I am asked to Find An Event, which is intriguing because I’m unclear what kind of a volunteer opportunity to help victims I might be able to…oh. Find a campaign event. Nothing to do with the hurricane. Huh.
  7. Quick Donate! I don’t know this strategy, but I like it. A quick hit 5 dollar donation aimed at young people so they can feel that they are part of the movement. I would like it better ( and it would be funnier) if they placed a comma after Quick.
  8. The old Action Items are now pushed down the page a bit to allow for those same actions to be highlighted in a slightly different and louder way above the fold. This tactic is used by everyone in politics because it always works.
  9. The President shown prior to his victory 4 years ago brings a positive feel to the dull lower half of the homepage.

MITTROMNEY.com

romney_grab

  1. Where Obama went with Rx in the header as the campaign’s final tagline, Romney’s team pushes more jobs and take-home pay.
  2. The deliberate absence of Paul Ryan is curious here.
  3. Joining the team at this late stage might seem pointless, but emails with more volunteer opportunities will go out immediately.
  4. Mitt is surrounded here like Custer. Action Items everywhere you look. You have to assume (if you’re cynical like me) the placement of the Red Cross banner was agonized over for maximum effect.
  5. Again, some of the original Action Items are repeated directly below the newly designed versions.
  6. To me this looks like a an image reserved for the after party website.
  7. A variation on the Obama positive vibe layout with a choice to load more of this content if that was something I felt was needed. I don’t.
  8. The only mention of Paul Ryan that I can find on this homepage.

I think the most interesting aspect to the stretch runs of these campaign sites is how incredibly similar the strategies are. Down to controlling the order in which your eyes scan these pages, both camps are careful not to swing too far out of what is tried and true. On the plus side (for me, at least) there’s a sweaty, smiling desperation to the sites that even the best photographers and copywriters can’t hide. Except for the delirious and perplexing confidence of Joe Biden’s Top Gun photo, the swagger of the debates is now replaced with focus group tested methodologies and old school panic.

What does a Sci-Fi site do when it is taken out by Frankenstorm?

io9 is a Gawker-owned site that covers science fiction and related culture, science, and other geekiness.  In an interesting turn of events, the Hurricane/Super Storm Sandy wiped out the power to the site’s data center.  Thus, the site went down.

It seems kind of fitting that a sci-fi site was blasted off the planet by some freak weather event nicknamed “Frankenstorm.”  That seems much cooler than them saying: “Sandy didn’t like what we said about hurricanes.  Then she knocked out the power to our data center.  She could’ve just left a comment on our site or tweeted her rage…”

In all seriousness, io9 (and its Gawker site siblings) found a decent solution.  Granted, the Gawker people likely freaked out when their data centers went down and their sites were displaying 503 error pages.  However, it is clear that they calmed down and thought of a way to continue despite the situation. The error pages now state what happened and now point people to their back up sites using Tumblr that the staffers set up to continue publishing content while the data center situation is straightened out.

io9_503error

For instance, the io9 503 error page now automatically redirects to the io9 Updates site; its introductory post io9 Has Survived Frankenstorm! states:

Welcome to io9’s emergency space station data center. When storms took out our New York City data center, we had to start broadcasting from low Earth orbit. We’ll be here for as long as it takes for the engineers working planetside to get io9.com back up! Welcome.

This was some smart thinking with a splash of the site’s personality.  I’m sure that Gawker will explore options in geographically distributing their hosting and data center solutions more after this mess all ends to hedge against another Sandy.

As I think about it more… io9 claims to come from the future.  I’m sure that the staffers from the future chose Tumblr to remain compatible with our “vintage” or “retro” (let’s give ourselves credit and not rely upon unhip terms like “obsolete”) technology.  However, if they truly come from the future, why didn’t they see Frankenstorm coming and prepare in advance by using data centers out its path?

Regardless if you and your organization can or cannot anticipate future events that seem straight out of sci-fi, following Gawker’s example won’t hurt if you’re caught in a similar situation.  Hat tip to the peeps at Hubspot for their recent Internet Outage Crash Your Website? The Marketer’s Response Plan post, too.

Obama vs. Romney: Mobile Donation Page Showdown

With the rise of the mobile web making your website work on smartphones and tablets has gone from a “nice to have” to a “must have”.   While it is universal understood at this point to be important, best practices haven’t completely emerged yet as to how best to build for the mobile web.  Speaking generally, there are two common approaches to optimizing a website for mobile:

  1. Implement a responsive design that automatically adjusts the dimensions of the site based on the size of the display window. 
  2. Design and implement a dedicated mobile site.

In an election season defined by a lack of civility, it is unsurprising that the Mitt Romney and Barack Obama have taken opposite approaches to building for mobile.  The Romney campaign has created a mobile-specific website while the Obama team has implemented an ambitious responsive design

When I noticed this a few weeks ago I got really excited and began writing a blog post using the Romney and Obama websites as a jumping off point for a discussion of the merits of the two approaches.  As I was doing research I came across this incredible post by Brad Frost on the topic.  His post is far more thorough than the one I was planning to write, so, humbled, I scrapped my piece. 

However, his post didn’t cover one thing near and dear to my heart: donation pages.  So as a supplement to Brad’s post (which you should go read), I’m going to take a quick look at the mobile donation pages on the two candidate sites.  Here are the candidate’s pages, side-by-side.

pres_mobile1
To start off, I think both campaigns have done well here.  These are well designed pages that I suspect enjoy good conversion rates.  Some specific observations:

  • In the header area I like that the Obama team has removed all site navigation elements other than the account information.  All distractions have been removed.  All the user has to focus on is filling out the form.  If I were the Romney campaign I would remove the social sharing options. You want users to donate, not update Twitter.  Encourage people to share after they make the donation.
  • Team Obama has included some intro text and a photo on the donation page, while the Romney campaign focuses on getting users into the form process as quickly as possible.  I’m torn here.  I know from desktop testing that pages with good photography and messaging enjoy higher conversion rates than pages without.  But on a smartphone my instinct would be to minimize scrolling and get users to the form as quickly as possible. 
  • I like that both campaigns have touch friendly interfaces for choosing donation amounts.  Interestingly, the Obama campaign’s max pre-selected donation option is $1,000 while the Romney campaign goes all the way up to $5,000. 
  • I think the layout of the form itself is superior on the Obama site. The Obama form uses large fonts and form fields, making everything really easy to see on a mobile phone.  The fonts on the Romney form are a little too small and the spacing of the elements are a little too tight.  From a usability perspective the Obama form is better.
  • On the plus side for Romney, his form is more compact and requires less scrolling from beginning to end.
  • Like the rest of the site, the Obama donation page is responsive and looks completely different on desktops than mobile phones.  Indeed, the desktop version of the form is a four stop process while the mobile version is simplified down to a one step form.  As a developer I really appreciate the degree of difficulty here.  I’m positive that getting the page to work this well was a time consuming and challenging endeavor. 
  • According to Mobitest, both pages load in around 10 seconds on an iPhone 4.  However, the Romney page is 446 kb versus 266 kb for the Obama page. 

Overall, I would give the slight edge to the Obama form simply because it is easier to read.  Post election, it will be interesting to see if campaigns release mobile donation data.  I’m interested to find out how much was raised on the various devices and to see if Republican or Democratic voters are more likely to give via mobile device.

Four Reasons App Developers Build for Apple Before Android

Over the last few years Android and Apple have come to dominate the smartphone market.  A recent comScore report found that 85% of mobile devices run on either Android (52.5%) or Apple’s iOS (34.3%).  Blackberry and Windows have seen their market share evaporate over the last few years, and at this point Android and iOS are the only mobile platforms that matter.

Yet despite Android’s  52.5% to 34.3% market share lead over Apple, nearly all app developers you talk to recommend building for iOS if you have to choose between the two platforms.  Why?

(1) Developing for Android is more complicated, and thus more expensive than building for Apple.

Since iOS only runs on Apple products, there are a relatively small number of devices you have to account for (iPhones, iPads and iPods). In contrast, there are an estimated 3,997 distinct Android devices produced by 600 brands. Screen sizes vary widely among these Android devices. This diversity makes it difficult to build something that will provide a good experience on all phones.

The situation is further complicated by the fact that Android users are much less likely to keep the operating system on their phone up to date than iPhone users. If you develop an app in the latest version of iOS, you can be confident that the vast majority of iPhone users will update and run the app. The same cannot necessarily be said for Android users.

(2) When you build for the iPhone, you are also building for the iPad.

iPhone apps can be run on the iPad.  So by building for iOS you are able to reach both smartphone and tablet users.

(3) Web statistics reinforce the dominance of iOS.

According to recent research, iOS devices are responsible for 65% of all mobile web traffic.  The statistics for the websites we manage show a similar trend.  Over 65% of our mobile traffic comes from Apple devices while only around 26% comes from Android.

While the app market is clearly a different animal, when you see one operating system dominating another to that degree it will impact your app strategy.

(4) Apps built for the iPhone make more money than those built for Android. 

This tidbit from a recent Forbes column sums up the disparity pretty well:

“Distimo, a mobile consulting firm, estimates that the Apple App store generates $5.4M/day for the 200 top-grossing apps while Google generates just $679K for their top-200 grossing apps.  That is almost a 8:1 revenue ratio.”

Further, it is estimated that  92% of mobile purchases are made from iOS devices and 84% of online gaming revenue is generated by iOS devices.

If you are a developer who wants to charge for your app, iOS is the only choice.

Conclusion

The most recent numbers I have seen show Apple with significant leads over Android in total apps (500K to 440K) and total app downloads (25 billion to 10 billion).   Until Android becomes easier to work with and closes the revenue gap significantly, I would expect developers to continue building for Apple first.