Sharkbite: Design · Branding · Web Strategies

Request a Quote

Does "Above the Fold" Even Apply Anymore?

Posted on May 9, 2012 0

If you've ever laid eyes on a kid whipping through a webpage on an iPad, then you're probably very aware of how fluid the web experience is through the eyes of a 9-year old in cyberspace; even the most static content is set in motion as the web-savy mind searches and digests content at the flick of a finger. I'm also pretty sure there's not a mouse in production today that doesn't have a scroll wheel built into it.

So why then, are there still people asking us to design everything "above the fold"?

~ ~ ~

What is "Above the Fold"?

The term "above the fold" is a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper. Most papers are delivered and displayed to customers folded up, meaning that only the top half of the front page is visible. Thus, an item that is "above the fold" may be one that the editors feel will entice people to buy the paper. Alternatively, it reflects a decision, on the part of the editors, that the article is one of the day's most important. By extension, the space above the fold is also preferred by advertisers, since it is the most prominent and visible even when the newspaper is on stands.

In the days before scrolling web pages were the norm, this same concept was applied to the layout of a site, and designers needed to be aware of the most common screen resolutions and how best to keep content visible while still maintaining branding and design considerations - all "above the fold". Today's web usability research tells us that people don't mind scrolling vertically through pages, and it could be argued that any web exploration is done with finger and eyes in perfect harmony.

No one navigates to a site, pulls their hands back and reads hands-free.

The most basic rule of thumb is that for every site the user should be able to understand what your site is about by the information presented to them above the fold. Positioning clear communication, branding, action statements and menu options in this area is a no-brainer. If someone can't figure out what you do from the moment they land on your site, then you need to rethink your web strategy.

~ ~ ~

Case Studies

Take this example from CBC Music. There is plenty of action content above the fold (stuff we use constantly!), but much of the content is accessible by a hit of the scroll wheel or a flick of two fingers. We expect our content to "roll out" and have no issue sourcing our content this way.

 

Or how about Apple? They know a thing or two about design, and they choose to allow scrolling below the fold without fear of shareholder rebellion.

 

In fact, the design convention known as the "fat footer" (designing to ensure that there is visual interest + content available at the bottom of the page) is in common use today because of the way we roll through websites. (BTW - one of our favourite examples of a fat-footer in action can be seen here at TapBots).

Research debunking the myth of "all content must exist above the fold" is starting to pop up, and a great example of this is this report available on ClickTale.com (Unfolding the Fold). In it, the researchers used their proprietary tracking software to measure the activity of 120,000 pages. Their research gives data on the vertical height of the page and the point to which a user scrolls. In the study, they found that 76% of users scrolled and that a good portion of them scrolled all the way to the bottom, despite the height of the screen. Even the longest of web pages were scrolled to the bottom.

 

Our favourite quote from ClickTale.com:

"Web designers and usability professionals have debated the topic of web page scrolling since 1994. At the early days of the web, most users were unfamiliar with the concept of scrolling and it was not a natural thing for them to do. As a result, web designers would design web pages so that all the important content would be "Above the fold" or even worse, squeeze the entire page into the initial screen area. This practice of "squeezing" continues today."

~ ~ ~ 

The Bottom Line

The bottom line to our clients is to stop worrying about the fold. Less content above the fold may encourage more exploration below the fold.

Don’t throw your best practices out the window, but stop cramming stuff above a certain pixel point. You’re not helping anyone. Open up your designs and give your users some visual breathing room. If your content is compelling enough your users will read it to the end.

 

Regrettable Album Design

Posted on Mar 1, 2012 0

These were all created by the grand fraternity of the design community, so it's with a small degree of uncertainty that we share these on a design site, but feel like the laughs are well worth the association.

 


 

Just "Ken". We love Ken - the whole leisure suit and hair helmut and creepy distant gaze. Did Ken make it into the Rock and Roll Hall of Fame yet?

 


 

It's great when 14 year-old boys are in charge of the art direction.

 


 

Non Gracias por la horrid jumpsuit and boot combo.

 


 

Thank goodness there's someone out there with the courage to sing for this overlooked segment of the animal kingdom!

 


 

Jazz flute?
Hairy chest overtop of beer belly?
Bald and sweaty?

Well fellas, I think we've got an album cover for the ladies now don't we?

 


 

Who are four guys who like to pretend that the past didn't really happen like that?

 


 

Yes, trees talk too. Especially through a wooden Michael Jackson puppet.

 


 

"Warm" and "mellow" may not be the most obvious words that spring to mind.

 


 

Oh Tino... look at you...

 


 

This is really Hansen before they re-jigged their look.

 


 

I'm pretty sure I saw all four of those outfits at Value Village last Sunday

 


 

Regrettable copywriting at its finest.

 


We could stare at this artwork for hours.

Size matters

Posted on Nov 3, 2011 0

Put aside those causes for now...

  • Suspend the occupying,
  • hold the protesting, 
  • take a break from freeing Tibet - we need your help.

Companies worldwide are trying like hell to convice you that you need to carry THEIR particular plastic member card around in your wallet, and it's becoming increasingly clear that as our personal collection grows, it does so with a uniformity that gaps every country and culture. Everywhere you go in the world, the "credit card" plastic card is universally understood to exist at its chosen size.

Business cards were supposed to grow extinct in our paperless world, but the reality is that eventhough we may choose not to add them to our Rolodex any longer, they still have the necessary staying power to migrate and often find homes in our wallets.

So why then, are they sized to not co-exist in perfect harmony?

It seems an easy enough problem to solve, but if you go to any printer and ask them for a rounded corner, credit card sized business card, you'll be charged through the wazoo for such an incredible request.

Sharkbite is committed to ending this great divide and will endevour to make harmony in this critical area.

Peace out.

Fonts That Must Be Stopped

Posted on Sep 21, 2011 3

Drum roll please....

This was way cool in grade 4 when we would stencil our name using the pencil crayons we ripped off of that Jenkins kid in the back (the one with that scaly recurring rash), but unless Uncles Sarge's Army Discount needs a quick sign for the sale bin - this font needs to die quietly - or loudly, we don't care.

 


Oh dear god... please take this font and banish it to hell.

 


OK, so maybe it's not the worst out there, but it was so widely used in the 70s that it is now (even after all these years) overplayed and it must be killed.

 


Like a savage force moving through my cousin's colon after pork day at the company bar-B-Q, we must unite to strike this tricky little "distress-edge" typeface from our collective memories. Unfortunately, the art director responsible for Avatar resurrected it for their marketing campaign, and now it's back. 

 


Blech... yuck... chunky, piece of turd. 

 


It's widely agreed amoung almost everyone on earth at once that this font needs to be crushed. A favourite article by Mike Lacher says it all (warning, explicit writing if you follow this link. Also there's some swear words): http://www.mcsweeneys.net/articles/im-comic-sans-asshole

 


BE GONE CURLY FONT, BE GONE AND TAKE YOUR UNATURALLY CURLY HAIR WITH YOU!

 


Affectionately known as "Mr. Al"... you are no longer welcome here. You are hideous and continuously show up at that strange fusion deli two blocks from my house announcing some discount on goat ball soup. Your services are no longer needed.

 


Admittedly, we have used this font... but we are ashamed and repent all sins for this oversight. Keep moving... nothing to see here. What's that?... sure, take the whole pack.

 


It's over. The lights are out and the rabble have left. Show's over.

It's our number one choice for bad font, based almost entirely on the fact that the capital letter "B" looks like someone sticking their butt out of the window of the Partidge Family's bus.

Red-flagging Clients

Posted on Jun 14, 2011 0

How did we not see the signs?

We've been doing this job for over two decades now. You lower your guard for what seems like a split second and in it came; the dreaded suck-the-life-out-of-everything client.

Every designer knows this adversary... rash-like negativity, time-sucking sensibilities, "thrifty" disposition... the absolute epitome of despair. Perhaps the greatest issue at hand is how we actually managed to miss the signs.

Let's review:

1. First Contact

Client makes contact through a Google search, emails are exchanged, information requested... all good. Project turns out to be website redesign; all info is available online or through email, but client insists on meeting in person and insists on their office. Not a big warning... we're going to be kind and only give us a little warning here:  

2. Initial Meeting

Check the route to the meeting. It turns out that the location is somewhere just a tad north of Middle Earth.   

Arrive and find the "office" is cleverly disguised as some dude's condo.  

Condo-office is not office at all, but a true dude pad complete with three extremely dour dudes in there. Tension is tight and all the usual ice-breaking jokes go cold. We're now a cheap six-pack away from a bad night out with the boys.  

Offered seat on a blue "pleather" couch. Three dudes take their place in dining chairs directly across. Squishy couch sucks me down far below normal sitting level, feel much like Sid Dithers, but way lower.  

Client's business turns out to be manufacturer of kid related products. Dour dudes look way out of place... David Suzuki selling Hummers would be a more natural fit.  

Mid-way through meeting, client produces site mock-ups that were done by another company. "Why weren't these used?"... "things didn't work out", they say.    

Meeting goes past 1.5 hours... "president" offers up words like "hmmm" and "mmmm", followed by excessive chin scratching.   

3. Project Process

Estimate is approved. Deposit request is made. After 3 weeks, requested deposit for 50% of the project doesn't show up. Order closed.    

Requested deposit shows up 2 weeks after project is closed.  

Project begins.

Proofs go out. Phone calls come in to describe requested changes. Suggest email, but client no like email. Client uses phrases like "we want these changes made, but don't feel we should have to pay for them." 

4. The End

Proof limit was intended to be 3 rounds, but we go 12. After this many rounds feel like Apollo Creed, but with way better acting lessons. 

Hours go WAY over estimate. We eat 20+ hours at next staff get-together. Produce invoice. Client no pay.   


Three strikes. Blog post. Cleanse out icky feeling and fall back into bliss with normal clients.

Related post: "Loving Your Clients"