So, You've mastered the text editor, you've overcome it's quirks and are more comfortable with some of the more advanced tools available to you but your content still doesn't look very "professional."  The big problem most of our clients have with content is that they simply don't know the various guidelines that have developed over the years to give your site a clean, consistent look.  Today I'm going to go over some of the various pitfalls that can befall you and how to avoid them.

Start with an idea.

When designing the content of a page, it is often helpful to decide in advance what elements on the page are going to be most important down the the least important elements on the page. We can then order the content on our page according to what we want the users eye to first be drawn to.  Although we can use color and images to draw the users eye to sections of the page, it is easier (and simpler,) to arrange our content in what is known as the F pattern.

Studies have show that when an end user views a web page that the normal viewing pattern is not reading each line from top to bottom; Instead, users scan down the page in what has become known as the F pattern, named for the general shape you can see above.  The image above is what is known as a "Heat Map."  Specialized hardware scans test users eyes as they view a page to map where they are looking at the screen. 

So what does this image tell us?  The most important areas of the page are the top left hand corner of the content.  Notice I said content and not page.  Statistically, visitors to your site will immediately scan down to where the content begins. 

You may have also noticed that as you go farther down the page, the hot areas taper off.  What this shows is that users don't necessarily read your content;  they scan down the page looking for the information that interests them.  What can we take from this?  It's pretty simple.  Keep your pages short and sweet, and place the most important information on that page at the top left. 

That also means that unless your content is something along the lines of a Blog post or a news article, the stuff at the bottom is most likely not going to be read.

So, Lets make this a rule. 

Stick to your color pallet- Stick to your Fonts.

When the theme was designed for your website, a color pallet was created and a family of fonts were selected.  This is to ensure that the colors and fonts used throughout the site are consistent.  Below I am going to show you two examples of the same content

The first example, while colorful - looks unprofessional and is glaring to the eyes.  It is important to remember that your website is often the first time a potential client experiences your business.  Make sure your first impression is a good one.  Remember, simple is almost always better.  Don't try to "Pretty Up" your content.  Keep it simple, pleasant and consistant.  You should never use more than two fonts - one of which is the font used in your logo.  You should also only use colored text for headings or hyperlinks. 

In the text editor there is a drop down "Style" box that is preset with specific text styles based on your theme.  Stick to those and your text will look slick and professional.

So second rule?

Images, Images, Images.

Scenario:  You've got images on your page, and they just don't look right.  Furthermore, your page takes FOREVER to download.  On top of that, your images all look jagged after you resized them in the editor.  They looked fine before, and you took them with a High Definition Camera!  What the heck!!!

Ok, heres what happened.

When an image is displayed in a web-browser 2 things happen.  First, the web browser downloads the original image from your website. Second, the browser then either stretches the image or squishes the image to fit into the dimensions you set for the image.  This results in the image becoming  pixelated (also known as "the jaggies".) 

This is pretty easy to fix. You should always make the image the size you wish it to appear on the website before your upload it.  Image editor programs such as Adobe Fireworks®, Adobe Photoshop®, and Gimp® let you resize the images and save them with very little degradation in quality.  However, these programs have the disadvantage of being either expensive, complicated and time consuming to use, or all of the above.  Thats where www.picresize.com comes in.  It's a free service where you can upload an image, choose the dimensions, apply a couple of cool effects, and then download a compressed and optimized version of your image.  Upload that image back to your website and your good to go! 

So I guess we are ready for rule 3.

Know when it's ok to break the rules.

Just like in life, sometimes you have to be able to break the rules.  For example, a design based on Typography will use different font sizes, colors and text in place of images to create the graphical pieces of the page.

Replacing the graphic elements of the page with different types of text can create a distinct look that sets you apart from your competitiors.  However, an image based site should minimize typography and a Typography based site should minimize images.  You never want to overwhelm your visitors. 

You may also have a Kids website.  Mixing fonts and bright colors on a kids website is more acceptable (kids tastes aren't going to be as refined as an adults.  Always tailor your content to your target audience.)  

Large images are more acceptable if they are opening up in a photo gallery. 

Conclusion

Using these guidlines will help you keep your site looking great.  As you gain experience you will know when it is ok to start bending and breaking the guidelines. 

If you are still skittish about adding your content we do offer a new service called Rollover Hours where you can have our trained designers handle your content for you at a heavily discounted rate.  Call our sales staff to find out more.

Call toll-free 1-888-636-7333 in the US
Call local 208-629-2921 in Idaho