Don’t break rules, reinvent them

People build websites for many reasons: to reach a wider audience; to sell, promote, or express; to appease peer pressure. Novelty stopped being a reason circa 2001. In its place, we have of course: of course I have a website; of course you have to have a Facebook wall, Twitter account, LinkedIn profile, or Pinterest board; of course we all have email.

And, of course, web design uses HTML and CSS — two languages with which browser makers and designers find common ground. But many web designers create amazing variety with the same language rules by asking what if instead of falling into of course.

Others stick with what works.

Those who follow conventional wisdom use not only the language but the same sentences — in web terms, not only HTML/CSS, but Arial and Georgia, 960-pixel-wide layouts, or underlined blue links. Using such conventions isn’t wrong. But designers who don’t choose to use established patterns — who follow conventional wisdom without asking why — miss opportunities.

The standard structure

The standard, single-level structure has practical benefits. It’s simple, and simple is good for deadlines. More importantly, it’s familiar. Both the web-browsing public and web designers have an unspoken agreement on how websites work. Following the home/services/about/contact pattern serves designers and audiences alike by meeting their expectations.

Other notions are so obvious that they’re easy to overlook:

• People expect that clicking the word “contact” will present email or phone details.
• They know they’ll find a home link in the upper left corner of a page. In conjunction with a logo, of course.
• They’ll see copyright statements in the footer, often on the left, with a year.
• They know that websites scroll up and down, not side to side.

Plus, catering to learned behavior alleviates friction. But designers who follow conventions, with or without realizing it, reinforce the conventions themselves.

• Click the logo and get a contact form? “That’s not what I expected.”
• Click a link that says “read more” and get a pay wall? “Just give me the article.”
• Scroll horizontally instead of vertically? “That’s weird. Is it broken?”
• Most prominent graphic at the bottom of a page? “It’s upside-down.”

It’s easy to draw the obvious conclusion: Break convention and risk alienating people.

Yet not all conventions are absolute. Most websites follow the rules with their own stylistic differences. Not every link on every site is underlined blue text. Not every photo is sized the same. Not every layout uses the same arrangement of columns. People adapt because variations of convention are, themselves, conventions. People expect to find quirks between sites.

In that case, how do unconventional websites get away with breaking rank? Their designers invent new conventions that are easy to learn.

Adaptive thinking

The old adage, “don’t break what isn’t broken” is good advice until someone changes the definition of “broken”.

Since the beginning of the web, designers could rely on screens being at least 640 pixels wide. More recently, 1024 pixels and greater are commonplace. Starting in 2007 tiny gadgets put websites in people’s hands. Suddenly designing for 320 pixels was in vogue.

But forced to change and choosing to change are different attitudes. Creativity isn’t afraid to follow a path of greater resistance.

The Roberts Group’s website experiments with a grid-based layout. Users navigate their site with a “literal site map”. Text links provide a fallback for users uncomfortable with the grid.

How to break conventions

Not every risk pays off. Most unconventional web designs fail not because they break patterns, but because they fail to communicate new promises. The trick is to identify why the conventions came to be.

1. Put a home link with a logo in the upper-left corner

Problem: visitors to a complex site may get lost. A reliable home page link acts as the site’s reset button.

Conventional thinking: every page load begins at the top of a page. Because most web layouts scroll down, the top of each page is the most logical place for a reliable button.

Unconventional thinking:

• Use position:fixed to keep a home button at the same place on visitors’ browsers, not just the page
• Encourage people to scroll through content with a prominent home link at the bottom of pages
• Remove the home page in favor of a rich navigation bar

2. A list of articles will make their titles, images, or “read more” clickable

Problem: people need obvious cues to reach information that titles and descriptions promise.

Conventional thinking: titles and thumbnails best represent the content they describe. The shortest route to “I want to read more about that” is to make it clickable. Therefore, make titles and thumbnails clickable.

Unconventional thinking:

• Make the entire teaser — image, title, and description — clickable. Links with more surface area are good for mobile design and easy to create with CSS
• Turn it upside down: lead with one or two compelling sentences, then put the clickable title underneath in smaller text
• Rather than “read this one now,” let users add articles to a queue to be read at their leisure in the order they choose

3. Design a template before you write the content

Problem: aesthetics, not code or semantics, create a site’s first impression.

Conventional thinking: Design the site’s look first. Leave a space for content.

Unconventional thinking:

• Use typography and color to imbue the content itself with mood, voice, and character. Then design elements that reinforce that character, if necessary, like background textures and sidebars.
• Make the background part of the content. Change colors per page to reflect the mood, topic, or function.
• Hide or diminish sidebar information until the user chooses to pay attention to it.

Stories at Longboard World not only defies the “teasers must be text” rule, but learns a lesson from Fitt’s Law by making the entire notecard clickable.

Guidelines to rules

To break the public’s learned behavior is to renege on a promise. Conventions are synonymous with trust. The best way to break established rules, then, is not to break them, but to replace them.

1. Replace, don’t break, rules

To change convention, we need to respect why old rules worked.

• Early browsers needed to make links obvious, so they underlined clickable text.
• Lines of text wider than 400 pixels are hard for people to follow line after line. Not only do columns shorten lines, but they allow for more horizontal organization.
• Content-rich websites create organizational headaches. Search tools let people hunt for a specific phrase rather than dig through arbitrary categories.

2. Adhere to your own rules

Once people associate, say, orange boxes with links, the design should not vary from that promise. Every time clicking an orange box takes people to a new page, that rule is reinforced. Every orange box that does otherwise will degrade the rule.

3. Give it time

Both the public and reluctant site owners gain trust through exposure. Design can help that by lowering the learning curve — making the rules clear.

4. Use goals

Conventions work. They’re easy for designers and audiences alike. Breaking them for the sake of change does no one any favors. Rather, rethink the problems.

• Popular consensus is opposed to this legislature. If people visit the website, we have less than one second to win them over. How can we change minds that fast?
• We want to show more than 200 photos. How can we make that easy for people to navigate?
• Our products are safe, but we have a reputation for not caring about the environment. Press releases mean nothing. How can we show genuine concern in subtext?
• We have a glut of inventory. No one’s buying. How can we turn that to our advantage?

Evolution of the Web dares to break browsers’ “right-hand fold” by extending sideways. Animation at the start demonstrates to users what they’ll get for side-scrolling.

As web design evolves, obeying convention is riskier than experimenting. When the public notices unconventional designs that work well, mobile or not, they will also become aware of websites that limit themselves to the conventions of yesterday. Designers who acknowledge this can take great strides towards building better websites.

Do you break rules or play it safe? What rules of web design would you like to rewrite? Let us know in the comments.

Featured image/thumbnail, unconventional image via Shutterstock

Ben Gremillion

Ben is a writer and web designer who worries about not experimenting.