Your Snap! Website look and feel

Alexis Wilke's picture

Today I wanted to talk about something that's quite important for your Snap! Website but that quite many people do not follow to the letter.

When you are a business and use the services of a professional to create your website, then he or she will enter the content for you. Notice that a professional looking website will have very strict guidelines in regard to content styling. This is what I want to talk about here.

All pages, including squeeze pages, must follow a good styling to be viable and no, I do not pretend I know all the ins and outs in that regard, but I know a certain number of things that you shouldn't do.

The editor in your Snap! Website gives you a way to change the style of your content. For instance, I highlighted my keywords making it BOLD. It is still easy to read yet it makes them more visible and with a little luck makes you remember them. Not only that, search engines do take bold and italic in account (unless your whole page is written in italic or bold which obviously cancels the concept.)

Initial T by Paulus Frank circa 1601
Initial T
by Paulus Frank
circa 1601)

The following shows you a quote by Pablo Picasso. I changed the style in the very specific context. As you can see, the Font is similar to hand writing. I used Comic Sans MS. I also changed the font style and made it italic. Finally, to clearly show that it is not a regular paragraph I used the Quote button to indent the text.

Every child is an artist.
The problem is how to remain
An artist once he grows up.

                - Pablo Picasso1

This is all good use of the style capabilities available on the web.

Now, there are people who use styling without thinking that the designer of the theme defined a default style for their pages that visually works. By changing the styling, one breaks the look and feel that the designer wanted to give his theme. This also means that your readers will not be as pleased as you'd otherwise expect.

So, an example would be to write something in a really big font...

...imagine that once in a while I change the size of the font in my page and expects that it fits on one line on your computer... just would look a bit weird! Doesn't it look weird to you? Ah! And often people do that in their title and make the title go awry on many computers. You have to remember that HTML is rendered differently depending on the computer used and the browser used. Therefore writing in very large characters will most often create broken lines on some computers even if it is not broken on yours (and no, everyone is NOT using Internet Explorer, about 40% of the worldwide surfers use FireFox.)

It could be even worse, change the background (highlight) or change the color of the font which results in content harder to read (can you read this one?). By this, I do not mean that you should never ever do that, but it's not generally good practice. Also, many people have different computers settings, different monitors, large ones, small ones (think iPhone for a minute...) and if you have a CRT monitor the brightness is much higher than an LCD monitor, so you see color contrasts better than others.

The three styles that you can use safely are:

  • Bold
  • Italic
  • Headings 2 to 6

Headings should be used to separate different parts in your posts (See Snap! SEO—how to improve your Snap! Website content). The bold and italic styles are interchangeable, also bold is generally more visible and thus used for more important things. Italic is very often used for things that are not exactly proper in the language you are using and for quotes. Again, there isn't really any rules, it all depends on what you are doing on your website and on that specific page.

Église de Saint-Germer-de-Fly, France
Église de Saint-Germer-de-Fly
with a mix of two styles:
Ogivo-roman (left) and Gothic (right)

by Sanchalex

For instance, there are cases where I like to use a different color for the font, but I make sure it matches the theme colors. There is an example in the Turn Watcher documentation. I used 3 colors: the normal theme color, a blue color for Menu item references and a dark brown plus italic for tips. (There is also a green for new features added in a specific version of the software. That's harder to read, but that information is less important!)

I know that many people think that if they highlight all sorts of things2 on their front page then it will catch people attention better and thus get them a greater chance to sell them something (or at least to get their name and email address which is the usual online.) This is true in some cases, but not always, and if you are not a designer, it is likely that you will not do it right.

By the way... do you know of a case where we use a color? Yes? Good. Links are pretty much always in a different color than the rest of the text in a page. This is part of the design though, therefore you have nothing to do about them.

Okay! Now... How can I do it right then?!

A good way to know how to do it right is to copy another website look and feel. Let me tell you that it is not that easy... but at least you will see what works and what doesn't. When you land on a site, you quickly see whether you like it or not. This is what I'm talking about here. Copy the website you like, and maybe make notes of what you do not like in the other websites so that way you can refer to your notes and make sure you did not do anything like that on your own site!

As an example you can check out our Snap! Websites home page.

I will talk about other tricks available with the Snap! editor and the Snap! filters. I already mentioned the Glossary which uses a special style and the notes as you can see below pretty much each posts (I just can stop myself from writing notes everywhere!)