Category Archives: Design Basics

A Consistent Style Improves Website Conversion Rates

A common problem on many amateur-made websites is a lack of a consistent style. This is more than just a style issue, though. It can hurt how well a website generates business.

As an example, a heading might be bold and red in one instance and then non-bold, black and all-caps in the next instance. Or a block of text will be flush left in one paragraph and centered in the next. I think you get the idea.

So What’s the Big Deal?

A lack of a consistent style causes a number of problems. First of all, it can make it difficult for visitors to make sense of the information on a page. A consistent style helps visitors visually organize information.

Additionally, a lack of a consistent style makes a page look disorganized, sloppy and unprofessional. Visitors are less likely to trust what you’re trying to tell or sell them. A website is like a job interview. You want to always look your best.

How Do You Create a Consistent Style?

Set Styles for Each Element Type

To make your site easier to read and look more professional and trustworthy, set a style (color, font face, font weight, background color, margins, padding, size, etc.) for each type of element. Elements include body text (aka paragraph text), top-level headings, subheadings, sidebar widgets, etc.

If your subheading in one section has a font-size of 24px and a line-height of 32px and a font-weight of normal, then the subheading for the next section should have the same exact style, unless you have a good reason for it not to.

Limit Font Faces and Colors

Also limit yourself to two or three different font faces, usually one serif and one sans-serif. Typically one font is used for all headings and the other is used for body text. Using too many fonts can create that ransom note effect. Don’t want to scare your visitors away!

You also want to limit your colors. Adobe’s kuler app is a great tool to help you choose a color scheme.

Repeat Non-Text Styles As Well

Other non-text elements (button styles, bullets, etc.) need to have a consistent style as well. So if one button has rounded corners (aka border-radius), drop shadows and a blue color, use the same style for all buttons. It helps to pull it all together.

Need More Help?

If you liked this article, be sure to sign up for your FREE subscription to the Nickel's Worth of Free Advice newsletter where we send helpful articles every Tuesday and Friday. You can either fill out the form on the right side of this page or visit the Nickel's Worth of Free Advice signup page.

We're also happy to provide assistance directly. Just send an email to dharma@zenpunkwebworks.com.

How Rasterized Text Can Hurt Your Website

Several years ago, web designers often embedded text in graphics (not just logos, but headings and other important elements) so as not to be limited to web-safe fonts. This is often called rasterized text. But there are several problems associated with this approach.

Rasterized Text is Bad for Search Engine Optimization

Google uses webcrawlers to search the content of websites to determine what each site is about. Google does this to rank sites based on their relevance. They rank relevant sites higher than non-relevant sites (based on search terms) because that’s what people are looking for.

Are you looking for websites on classic cars? Then Google searches for sites that provide relevant content on that topic and puts them at the top of the search results.

But if you put part of your content, such as headings, in a graphic format, rather than as searchable text, then Google’s webcrawlers will ignore it and not rank your site as high as similar sites with more searchable content.

Rasterized Text is Bad for Accessibility

For people who are visually impaired (including some who are colorblind), converting text into graphics makes this text unreadable. Yes, you can add alt values to the HTML image tag, which is something we should do for nearly all graphics. But using graphics for text is best avoided.

Readable Text Doesn’t Have to be Boring

We now have a much wider range of fonts to choose from thanks to web fonts. Lots of great, free fonts to choose from.

Also computers have many more fonts these days, so creating a font-family list in your stylesheet that degrades gracefully is easy. A great resource is CSS Font Stack.

Between web fonts and a good font stack, you have greater control over the look of your content, without sacrificing search engine ranking or accessibility.

Need More Help?

If you liked this article, be sure to sign up for your FREE subscription to the Nickel's Worth of Free Advice newsletter where we send helpful articles every Tuesday and Friday. You can either fill out the form on the right side of this page or visit the Nickel's Worth of Free Advice signup page.

We're also happy to provide assistance directly. Just send an email to dharma@zenpunkwebworks.com.

Proximity in Web Design

Proximity is the state of being close to something else. In graphic design and web design, proximity conveys how various objects (headings, form inputs, text, buttons, etc.) are related.

Not All Objects Are Equal

When all the objects on a web page are the same distance apart, it can be difficult to figure out what goes with what. You might think that a uniform distance is ideal, but it’s the visual equivalent of someone speaking in a monotone. Proximity creates a context for relationships.

On a well-designed page, objects that are closer together visually are more closely related than those that are further apart.

A classic mistake I’ve seen is where a heading or subheading is closer to the preceding paragraph than the one following, to which it should be associated. Here is an example:

A Heading

This is a block of random text from saganipsum.com. Consciousness emerged into consciousness gathered by gravity preserve and cherish that pale blue dot vastness is bearable only through love Tunguska event a very small stage in a vast cosmic arena, science, ship of the imagination, cosmic fugue a very small stage in a vast cosmic arena Euclid colonies gathered by gravity.

Another Heading

More random text. Take root and flourish, dream of the mind’s eye, Cambrian explosion Flatland Rig Veda the carbon in our apple pies from which we spring, worldlets brain is the seed of intelligence colonies descended from astronomers how far away made in the interiors of collapsing stars.

This can easily be fixed modifying the padding or margins of the objects in the CSS stylesheet.

Proximity Helps Visitors Find What They Need

Because of the overwhelming amout of information we encounter each day, people tend to skim rather than read, until something important catches their eyes. To make it easier for visitors to find the information they are looking for, always group related objects together. If you need help understanding padding and margins, visit the Box Model page on the W3 Schools site.

Need More Help?

If you liked this article, be sure to sign up for your FREE subscription to the Nickel's Worth of Free Advice newsletter where we send helpful articles every Tuesday and Friday. You can either fill out the form on the right side of this page or visit the Nickel's Worth of Free Advice signup page.

We're also happy to provide assistance directly. Just send an email to dharma@zenpunkwebworks.com.

Use Web Fonts to Spice Up Your Website

The Font Dilemma

For many years, web creators were forced to make a choice. Limit the use of fonts to web-safe typefaces that users are most likely to have on their devices (with a short list of fallbacks) or use rasterized text (graphics) to add a little more variety.

The problem with using web-safe fonts was that it was so limiting. Designers want users to experience their web creations the way they envisioned them, using specific fonts that users may not have access to.

Turning text into graphics meant that webcrawlers (programs used by search engines) couldn’t search those pieces of text. That can be bad for search engine optimization.

Web Hosted Fonts

Then came Google and a few others to the rescue. With the introduction of web-hosted (and licensed) fonts such as Google Web Fonts, web designers now had access to a much wider range of fonts that would always display the way they wanted.

To use a web font, one adds a link to the location of the font file (either on Google’s web font server or in a subdirectory on the website site’s own server) and then references the typeface in the CSS file.

Still, Less is More

While the introduction of web fonts opens up new possibilities, some restraint is still in order. You should still limit the number of fonts you use on your site to just a few. To do otherwise can create problems.

First off, using too many fonts (whether web-safe or web-hosted) can cause your site to look disorganized. Way too many can make your site look like a ransom note from a kidnapper.

Also, using more than one or two web fonts can slow page loads. With every additional web font you use, the browser has to work that much more. Google offers a meter that tells how fast a given font will load.

Other Hazards

Make sure the fonts you use are easily readable. When fonts are hard to read, users go somewhere else without so much as a “Fuck you”.

Don’t use faux bold or faux italic. For bold or italic text, make sure the fonts you use have those weights/styles available. Otherwise, your bolded or italicized text will look like shit.

Some fonts are for personal use only! Read the licensing on fonts. If you use a font for commercial use that isn’t licensed as such, you could get a nasty-gram from some greedy lawyers.

Have fun!

Explore the wide range of fonts now available. Check out Google Web Fonts, Font Squirrel and Typekit.

Need More Help?

If you liked this article, be sure to sign up for your FREE subscription to the Nickel's Worth of Free Advice newsletter where we send helpful articles every Tuesday and Friday. You can either fill out the form on the right side of this page or visit the Nickel's Worth of Free Advice signup page.

We're also happy to provide assistance directly. Just send an email to dharma@zenpunkwebworks.com.

Flash & the Dreaded White Box of Death

You have probably heard of the dreaded Blue Screen of Death, and possibly even the White Screen of Death. But are you familiar with the much-scorned White Box of Death? If you use Flash on your website, odds are your visitors are familiar with it.

What is the White Box of Death?

The White Box of Death is the white box that many people see on a website that uses Flash. If you had someone else build your site, it may be using Flash and you don’t even know it.

While Flash is a web technology popular in the late 1990s to provide animation and effects to a website, the problem is that a lot of mobile devices no longer support Flash. Other people whose devices do support Flash have turned it off to save on battery life and load times. Even Adobe, who purchased the technology from Macromedia, is no longer supporting it.

So when a person using a device that doesn’t support Flash (or has it turned off) comes to a site using Flash, they typically see a white box where the Flash content would be.

Why is it a Problem?

If you’re only using Flash to embed a video or provide additional, but non-crucial content, it’s not such a big deal.

However, if the Flash content is crucial to providing users with information or providing critical functionality (like navigating your site or signing up for a newsletter), then Flash is killing your site and driving users (read: potential customers/clients) away to the competition. Even using it to add a slideshow or as part of your home page banner can make our site look outdated and unprofessional. And who wants to do business with companies that are out of date and unprofessional?

What’s the Alternative?

CSS3 and JavaScript are much more versatile, and faster loading, alternatives to Flash. Learning how to use them can take time, but the results are well worth it. If you are intimidated by the idea of writing code, then hire someone with experience with these coding languages. Otherwise, you will be losing sales.

Need More Help?

If you liked this article, be sure to sign up for your FREE subscription to the Nickel's Worth of Free Advice newsletter where we send helpful articles every Tuesday and Friday. You can either fill out the form on the right side of this page or visit the Nickel's Worth of Free Advice signup page.

We're also happy to provide assistance directly. Just send an email to dharma@zenpunkwebworks.com.