Local Business Battle: Weak vs. Strong Websites

So we’ve talked about typography on the web, but what else goes into making a website strong? The navigation, the content, and the layout are all major components that go into the overall aesthetic of a website and help differentiate between strong and weak pages.  

Let’s start by evaluating a poor website. Bear Rock Junction is a local business from where I live, and overall their website could use some help. http://bearrockjunction.com/

The navigation is located at the top of the page and, aside from being a little lack-luster in design, the titles of it are pretty straightforward and descriptive. However, there are two sets of navigation that become a little confusing. There are white links on the blue background which almost overshadow the main black-on-white tabs above. Also, the home button could be discarded if the logo was made into a link for home navigation instead.

The layout and the content of the page could use some improvements as well. The hierarchy of the pages need a little more work and clarity to distinguish between important information. There is contact information located at the top of each page that could probably be moved to a better spot, such as to the footer or a contact page because it is distracting from the navigation, banner, and logo.

The content gets the point across, but pictures are scattered and information is all over the place. The pages would benefit from better organization and location of information.  Also, I’m not quite sure what’s going on with the home page, but when you scroll over the content, it becomes active like a link. Some content should be combined in a better way to reduce the amount of pages and overall confusion of the layout.  

The whole aesthetic of the website feels very basic and beginner without much nod towards design, other than some vibrant (nearly blinding) colors thrown in there. Some smarter font choices should be made and the whole site needs to be designed in a more pleasing way to keep it from being overwhelming.

On the opposite side of the spectrum, we will look at another local Lehigh Valley business, Paisley Peacock, as an example of a strong website. http://paisleypeacockfloral.com/

When you first arrive at the homepage, it immediately has a more professional feel to it and you know what it’s all about. There is not a lot of content on the home page as the images tell the story. We are greeted with a scrolling banner and pictures that are used as links, thus showcasing the flowers and the work that they do.

Simple navigation is located at the top of the page with drop-down menus that specify further categories. The menus are hidden when you are not scrolled over them so that they don’t take away from the rest of the content on the page. The logo acts as a link to the homepage, and additional navigation is located on sidebars of the other pages. Also, there is a small link at the bottom of each page that directs you right back up to the top, preventing endless scrolling.

With a clear sense of hierarchy and the content in an appropriate font, the whole site has a consistent feel. It’s clean and simple with the colors of the flowers standing out, keeping it from being overwhelming like the other website.

Many more factors go into making a good website, but without a strong layout, content, and navigation, the pages are hard to get through.

Will it pass the typography test?

How do you evaluate a website for good typography? Is it simply the colors? The font? The size? There’s a lot more that goes into type design for the web. Let’s look at a few components that make up a typographically dynamic webpage using relayforlife.org.

Let’s start with the font-family. This page consistently uses a sans-serif typeface at various sizes and in different colors to differentiate between content while still creating a cohesive look. This use of size and color are what establish the hierarchy of the page, with the headings either purple or blue and in a larger point size than the gray text of the paragraph content.

The text is left justified, which is common and easiest to read, and the line spacing varies based on the font size to make sure everything is legible and doesn’t run together. The page uses appropriate font sizes throughout with nothing too large or too small. Everything, including the footer, is legible.

An appropriate amount of whitespace is used between information so that the content does not run together and sections are separated. There are also purple borders on the left and right of the page, centering the information on the screen and balancing the page so you aren’t overwhelmed with content displaying across the entire browser window.

The contrast is where this webpage can lose a few points, depending on who is reading it. There is enough contrast for me to be able to read it. However, I don’t know how easy the gray on white or the gray on gray content would be to read if someone is more visually impaired. It might be okay, it might not…I can’t be positive.

All of these elements-font-family, font-size, color, hierarchy, line-spacing, alignment, contrast, whitespace, etc.-make up the websites overall readability, or how easily the content can be read and understood. Overall, the Relay webpage is easy to read and grasp. The first thing on the home page that catches your eye is the scrolling banner of images with the slightly transparent text box anchored to it. All of the text on the page is legible and separated into its own logical section.

So what grade does this page earn on the typography test? I’d say it deserves a solid A…easily read and understood.

Relay For Life Home Page