Today I wanted to give you something different in our blog and talk a bit about Bandwidth. Sounds like a scary techy word, but I assure you, it is not as scary as you might think.

OK, let’s break it down…

What is Bandwidth?

Bandwidth is a representation of the amount of things (photos, videos, etc) that your site can serve up to your visitors.  In other words, bandwidth is the rate at which data from your website transfers to your site visitors.

For example, if a visitor views a picture that is 100KB in size, that will use 100kb of your monthly bandwidth.

READ MORE

There are two types of users that visit a website. The first group consists of the informed users. These individuals already know what it is that they’re looking for on a given page, and are visiting to obtain something specific. The second group is the curious users. They reach your site through a search engine or a series of links from another page, and want to see what you’ve got going on. It’s important to optimize your site in such a way that you tailor to the needs of both groups without making it difficult to move around.

When the informed user loads the page, their eyes will more than likely go straight to your navigation bar. Oftentimes this leads to the idea that everything should be placed in the menu for easy location, but in reality it’s much more difficult to find what you’re looking for in a sea of links. Assume we visit the website of a dog breeder, and we want to get information about poodles. (Fig. 1)

Example Website

We’ve now read through all of those poorly organized links only to discover that there are no poodles. It would be much easier for the informed user if we had our navigation sorted out in a much easier to read manner and slimmed down to make important information easy to find.

example1

Now that we’ve established how to format our text in a way that pleases the reader, we can move on to planning and implementing color styles. Color can be either a powerful tool or a crippling weakness. The important thing to remember is that having a hammer does not make everything into a nail.

The example above seems to be very simple in terms of color, using 3-4 colors at most. The color palette consists mostly of different shades of brown, and the entire page follows that trend. By not throwing a plethora of different colors onto the page we can keep the readers focused on what we want them to see as they follow the natural flow of the page. Empty space also plays a larger role in defining areas of importance (such as the navigation menu).

READ MORE

At the Web 2.0 Summit in November 2006, Marissa Mayer of Google gave a talk on an internal study which indicated that a half-second delay in terms of page loading can cause up to a 20% drop in site traffic (a more in-depth description of her presentation can be found here for those interested). Since then, there’s been a swarm of development over tools related to trimming down websites, and subsequently decreasing load times, all without taking away from the desired user experience.

READ MORE

Text Example

There are a lot of different things one must consider when making a website. Many of these are specific to the sites purpose, but a number of general practices can go a long way towards making your page more accessible and easy to comprehend for your users. This post will focus on the styling and formatting of text to make it easy to read and enjoyable to look at.

For a few of these points, we’ll use the following image as an example:

Let’s start by looking at the title (“What Is Lorem Ipsum?”). It immediately draws attention because it’s larger than the body text and uses a Serif Font. Simply from looking at it we can infer its meaning and importance, and it manages to do this without breaking the flow of the page. The text remains aligned to the left, and feels consistent with the following content.

READ MORE

STYLE SWITCHER

Layout Style

Header Style

Accent Color