In this post we’ll take a look at line breaks, what is the HTML tag for one, and when to and not to use them.

(By the way, if this is your first time visiting Newbie Website Design, then I encourage you to check out the My First Website series to learn how to build websites the right way.)

Let’s get learn more about HTML line breaks, shall we?

What is a line break?

A line break is a special HTML tag that will force the very next the next character (or sentence or paragraph) to appear on a new line right below the one above. It is similar to pressing the “return” key when using a word processor.

It isn’t gonna work

If you’re using a text editing program like Notepad (Windows) or TextEdit (Mac) to write the HTML for your website, then pressing the return key in order to create line breaks isn’t going to work. You could press the return key a hundred times and you still won’t see those line breaks when you view your website with a browser. To get the desired line-breaking space that you want you either have to use the special HTML line break code or use CSS to do it for you.

The HTML for a line break

Here’s the HTML tag you need in order to make a line break:

Pretty simple, huh? Just plop this where you want a line break and you’re done!

Or are you…

The wrong way to do line breaks

Now, before you go adding the HTML line break code all over your layout, just remember this: if you ever decide to change the design of your website, then you may have to go through all of your pages and do some nasty hunt and replace.

For example:

Let’s say that you added two line breaks after all of the <h1> heading tags on your website. Later, if you decide that you only want one line break after the heading tags, then you have to erase all of the extra HTML line break code from every page. And if you have added line breaks after subheadings, paragraphs, and other layout elements, then let the editing nightmare begin!

The better way to do line breaks

Instead of relying on HTML for your line breaks, let an external CSS file handle the task. You won’t be using the <br /> tag. In its place you’ll be using a padding-bottom to get the job done right. By using CSS in an external file, you can control the height of this “padding” all throughout your website from one location.

(NOTE: to learn more about what an external CSS file is and how to make one, I strongly suggest going through the My First Website series here on Newbie Website Design. Post #5 talks specifically about how to add an external CSS file. )

The “non line break” line break

Okay. Okay. So we’re not technically going to be adjusting the line breaks. But what we are going to do is control how much white space occurs after an element such as a heading or a paragraph. We do this by using padding-bottom in our CSS. It’s easy. Take a look:

This CSS simply tells the browser that all <h1> headings will have an extra 20 pixels of padding below it — right after the closing </h1> tag. Any text that follows the heading will be pushed down by 20 pixels. You can do this after paragraphs, too:

The p represents the paragraph tags in your HTML. After a closing paragraph tag (</p>) the very next element — be it a subheading or another paragraph — is pushed down 15 pixels.

When to use an HTML line break

Personally, there are only two times when I use an actual HTML line break in my designs…

#1: One-shot deals

If I need a little extra space in a design and I know 100% for certain that it won’t be repeated on other web pages I’ll use the <br /> tag. Before you add an HTML line break, be certain that it will never become a repeated part of every page of your layout.

#2: Proper text layout

There are times when you just have to make sure that the text of your layout flows correctly. Since all browsers won’t display your text exactly the same way, you can use HTML line breaks to ensure a clean look. A good example of this is when you have a centered heading that contains a lot of text. For example, this looks just horrible:

The word “system” hangs like deadweight at the bottom — stranded and all alone. But with a few line breaks we can make it look much, much better:

Here’s the code (keep your eyes peeled for the HTML line break code):

Conclusion

Line breaks aren’t that hard to create with HTML. Because of that, they are extremely easy to add to a design. The downside is that by using them too much you might make updating or altering your website’s design and layout a major pain down the road. Start off right by adjusting the padding-bottom in an external CSS file and all future headaches will never cross your furrowed brow.

In this post, however, I’d like to talk about which font style is best for legibility (i.e. which font is easiest to read on a computer monitor.) But before reading deeper into this post, I encourage you to check out the post mentioned above (The best fonts for websites) as well as the post titled Different types of fonts. They both contain information that will help you understand this post.

All done? Ok! Let’s uncover which fonts are best for website legibility:

Serif fonts: The crowned ruler of the paper kingdom

If you’ve ever read a typical magazine or book (that was actually printed on paper ), then you will have seen a serif font in action. Serif fonts — the kind of fonts with the little “slashes” at the ends of the letter strokes — are the best fonts for the printed word. Why is that? Because the little serifs actually help to make the letters flow together and make reading much easier on the eyes. Some common serif fonts that you probably know include Times New Roman and Georgia.

The computer monitor conundrum

There is one thing that many computer monitors lack that makes using the above mentioned serif fonts the perfect choice for your website: adequate resolution. Resolution is basically how many pixels your monitor can display. The more pixels there are, the more details you can have. For example: my monitor has a resolution of 1600 x 1050 (which is pretty darn good.) But not everyone has such a high resolution monitor. And in order for those little serifs to make reading easier, a large amount of detail is required.

Back in the day (which, in computer years, means about 10 years ago), the best monitor resolution was around 800 x 600. Not that great for serif fonts. And nowadays, devices like Apple’s iPhone (320 x 480) and the new genre of computers called netbooks (most being 800×480) — both of which can be used to surf the Internet — also have a somewhat “limited” resolution to accurately display those detailed serif fonts.

Sans Serif fonts: The masters of all computer monitors

Since not everyone has a high-resolution monitor to surf the Internet, we’ll have to avoid using serif fonts on our websites if we truly want the pure text (i.e. the sentences and full paragraphs of text) to be easy to read and easy on the eyes. That’s where the Sans Serif fonts come to the rescue.

For many years, sans serif fonts have been the main style of font used for the pure text of websites. Since they all lack the little “slashes” of the serif fonts, they don’t become garbled on lower-resolution monitors. This makes them the perfect choice for the pure text of your website.

Looking at the first list from the post titled The best fonts for websites you can see only four serif fonts that all operating systems of all recent versions can display. Those are:

• Arial
• Helvetica
• Trebuchet MS
• Verdana

If you stick to using one of these for the pure text of your website’s content, then you will have almost guaranteed the legibility of your text. Your visitors may not directly thank you for it, but they will be much happier when reading the inspiring words you so arduously brought forth from the creative depths of your mind.

Many beginners to website design ask “What are the best colors for a website design?” Well, before you can even decide a total color pallet for your website, you need to know what are the best colors for your website’s content.

After reading this post, you’ll know.

It’s all about the eyes

What’s the number one reason a person visits your website? Is it for the ultra-cool graphics and design? Nope. People come to your site for one thing only: to read your content. Granted, your eye-popping graphics many intrigue a visitor enough not to click the back button on their browser right away. But if your content (the main text of your website) is hard to read, then they’ll abandon your website and you will have just lost a visitor for good.

Choosing the best colors your website begins with choosing the best colors for your website’s content — colors that make reading easy on the eyes. But just what are the best colors? Before getting into that, let’s look at some bad color choices.

What not to do

If you really want to strain people’s eyes and annoy them to extremes, then by all means do any one of the following:

• Put white or light text on black or dark background
• Use two colors that have little contrast between them
• Have lots of black text on a yellow background

Take a look at this example:

I don’t know about you, but reading that white text on a black background really bugged me. And you know what? It bugs most website visitors.

Here’s another:

One more:

The best colors for a website’s content

I realize that it might not be the most flashy and eye-catching, but the best colors for a website’s content are black or dark-gray text on a white or very light, pastel-colored background. These combinations create the right amount of contrast for reading while avoiding or lessening the strain on the eyes. (By the way, Newbie Website Design uses dark-gray text on a white background. The headings and bolded text are in black.)

Final thoughts

As stated above, the main reason people visit your website is to read your content. Even if your graphics are stunning and the design is top-notch, no one will stick around or visit again if the text is hard to read. Make it easy for them by choosing dark text colors on a very light or white background.

Now, the only thing you need to worry about is writing good content!

In this post, I’ll clear up exactly what web safe and HTML colors are and what exactly are “hex colors” (a.k.a. hexadecimal colors).

So put down your voodoo dolls and let’s get into it!

What are web safe html colors?

Back in the day when not everyone had monitors that could display millions of colors, a consensus was made as to which colors should be supported in browsers. In total, they came to 216 colors. By using these colors (called web safe colors) designers could be sure that there websites would look the same on all computers, all browsers, and all operating systems.

Nowadays, there really isn’t much of a need for web safe colors, but it still doesn’t hurt to use them for background color and text color. Although, you will need to understand the hex (hexadecimal) numbering system when you create your CSS file since CSS uses hexadecimal numbers for color.

What are hex (hexadecimal) numbers?

First, let me relieve your boggled mind by saying that you really don’t need to know how to count in hex (hexadecimal) in order to get different colors on your web pages. There are many ways to get the code (more on that in a bit.) But for the inquisitive mind, here is the answer to the above question:

Hexadecimal numbers are made from 10 digits (0 1 2 3 4 5 6 7 8 9) and these six letters: A B C D E F. They are combined together to make a 6-digit code that represents a color. (Hence the name “hex” or “hexadecimal”… which means “6″.) Here are some examples:

#000000 (black color)
#FF0000 (red)
#00FF00 (green)
#0000FF (blue)
#FFFFFF (white)

Getting those nasty-looking hex color codes

If you use Photoshop, then you can find the hex color codes by looking on the lower right-hand corner of the color picker window (NOTE: your color picker in Photoshop may look different depending on your settings):

If you’d like to lock Photoshop into using only the web safe html colors, then check the box in the lower left-hand corner. Like this:

If you don’t have Photoshop (or don’t need to use it when you’re just hand-coding a website) then there are many free software programs for both Mac and Windows that you can download from the Internet.

Web safe html color chart

No post on web safe colors would be complete without a chart of HTML color codes. So, here it is:

Now why am I, and millions of other website designers, being so harsh toward Internet Explorer 6?

Oh… where to begin!

The list of negative points in many designer’s books can stretch for miles. But let me give you the highlights:

• Horrible security
• Web designers must use hacks to get their pages to look right in IE6 (a major waste of time)
• Cannot display the more recent web technologies
• Forces major companies to hold back in their web designs
• No support for CSS 2.0
• No support for .PNG image files (much better than .GIF)

And that’s just the tip of the iceberg!

Amazingly, about 27% of the visitors to NWD are using Internet Explorer 6. So, if you are one of those 27%, please, PLEASE either update to Internet Explorer 8 or try out some of the other (and in many web designer’s opinions, better) browsers like Firefox, Safari, or Opera.

Here’s the link to the full article that I read today:

IE6 Must Die for the Web to Move On

In this post, I’d like to clear up the confusion and offer some solid “web font” advice to help make choosing your website fonts easier (and to prevent premature balding as well.)

Let’s begin with a little background information:

Text vs. images

The first thing you need to know is that you can safely use any font on a website provided that it is part of an image. How can you tell the difference? Easy: if you can use your mouse to select individual words or even letters of the text your see on a website, then what you have is pure text. Below is an example:

You can easily select this text.

But below is an image that contains text. You can’t select individual words or letters because they are part of an image:





The font used in the image above is called “Moderna” — and you probably don’t have it on your computer. But since it’s used in an image, you can see it just as I do.

Which brings me to the next point:

If they ain’t got it, they won’t see it

So, you just downloaded the coolest grunge font from your favorite free site. You then decided to make all of the main headings (<h1> </h1> tags) on your website this font. Awesome! But when showing your masterpiece of website creativity to your friend at his house, your eyes widen in shock. “Where is my font?!”

If you read the post titled You actually DON’T visit websites then you’d know that, in truth, websites come to you. And if you don’t have a font installed on your computer that a designer used for pure text on his website, then you won’t see that font. Instead, your browser will replace it with some other font that is on your computer.

Common fonts for websites

Since not everyone is using the same operating system, it’s actually a little challenging to prepare a list of web safe fonts that you can use as pure text on your websites. Some people use Windows Vista or Mac OS X. Others use Linux. And others are still using older versions like Windows 98 or Mac OS 8! So to keep things safe, here is a list of the most common, standard fonts for websites that even people using ancient operating systems can see:

• Arial
• Courier New
• Georgia
• Helvetica
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings

Here’s an image of what they look like:

I realize that this is a pretty short list, but remember that these fonts are to be used as pure text and not as logos or other fancy website design elements.

If you’re sure that most of your website visitors are using more recent operating systems, then you can also add these common website fonts to the list:

• Andale Mono
• Arial Black
• Century Gothic
• Comic Sans MS
• Impact
• Tahoma
• Zapf Dingbats

Here’s an image of what they look like:

(There are a few more, but I’m the kind of website designer who prefers to use fonts that everyone can see.)

Final thoughts

In answer to the question “What are the best fonts for web design?” I would recommend for pure text that you stick with the most common fonts in the first list above. This will ensure that everyone visiting your site can see it the way you intend it to be seen. For your website logo, navigation, and other website design elements, you can use any font you want as long as it’s part of an image.

Under normal conditions, one usually cannot tell the difference between a vector and a bitmap image. It’s only upon closer inspection that you can actually see those differences. But more importantly, it’s what vector images and bitmap (rasterized) images are that will allow you to use them correctly in graphic design.

Bitmap (rasterized) images

The data of a bitmap image (a.k.a. rasterized image) is saved using a “grid system”. Each and every pixel in a bitmap image has a location on an X/Y coordinate system:

In addition, the color value at each pixel location is also saved. Because of this, bitmap files can be extremely large. Bitmap images are perfect for photographs since all of the color data is accurately saved.

Here are some common bitmap file extensions:

• BMP
• GIF
• JPG, JPEG
• PNG
• PICT (Macintosh)
• PCX
• TIFF
• PSD (Adobe Photoshop)

Vector images

The data of a vector image is saved using geometrical primitives such as points, lines, curves, and shapes or polygons, which are all based on mathematical equations. Because of this, vector image files are much smaller than bitmap image files.

The downside to vector images is that they are horrible for photographs, since much of the detail is lost. Vector images are best for clipart and logos. (Sorry for not having an example of a vector image, but it’s hard to display an image of a bunch of mathematical equations! )

Here are some common vector image file extensions:

• AI (Adobe Illustrator)
• EPS (Encapsulated PostScript)
• CDR (CorelDRAW)
• CGM (Computer Graphics Metafile)
• WMF (Windows Metafile)
• SWF (Shockwave Flash)

Resizing bitmap images

Take a look at the following bitmap image:

Now, if we try to enlarge this bitmap image, we’ll get this result (it’s only a partial image):

When you enlarge a bitmap image all you’ll get are jagged lines — making bitmap images a minor headache to resize (see the post In Photoshop, go from big to small for some tips on how to decrease the head-throbbing.)

Resizing vector images

On the other hand, vector images — being based solely on mathematical equations — can be resized as much or as little as you like without losing any detail:

Final thoughts

If you are designing for the web, then you will have to use some form of bitmap image (JPG, GIF, or PNG) in your final draft. But during the design process, you are free to use vector images until they are ready for the web. Photoshop has the ability to “rasterize” a vector image (changing a vector image to a bitmap image) by right clicking on a vector layer and choosing “Rasterize Layer” from the menu.

If you really are a beginner, have no idea what I’m talking about, or are contemplating which of the two to use, then this post is for you.

Table-based layout

We all know what a table looks like. No, not the kind that supports the weight of your computer, your empty pizza boxes, and your head when you fall asleep from watching one too many YouTube videos — the other kind. They look just like this:

Unknown to many beginners to website design, these tables (which normally hold numerical data) can be used to hold together the elements of a website. Take a gander:

To accomplish this, all you have to do is to start with a table that has the maximum number of rows and columns needed (usually the number of navigation elements you want) and then merge other sections to create headers, sidebars, and content.

The nice part about table-based layout is that they are very easy to create and very easy to understand for beginners to website design. Most WYSIWYG editors make it quite simple to create the table, merge cells, and then add the content. This is how I first began building websites in my early days.

The drawback of table-based layouts is that they produce bulky code, can be a major headache to debug, and if you decide to redesign your website, then you have to redo every single page.

CSS box model layout

The CSS box model is the new, hip, and very cool way to build websites. Instead of using the cells of a table (or tables) to hold the content of your website, you use “boxes” . These boxes are created using the HTML tags: <div> </div> Check out this typical website layout:

Hidden from your eyes are the <div>s that hold this layout together. The red squares in the following image show you where these “div boxes” are located:

The beauty of the CSS box model is that whenever you want to change the layout of your website all you have to do is change the single CSS file and some of the images (for the most part.) Case in point: Newbie Website Design is now in its fifth redesign. Each time all I had to do was to change the images in Photoshop and then the CSS file. Done!

The bad part of CSS is that there is a slight learning curve. And if you began your website design life using the table-based model, then you’ll have to go through a paradigm shift to wrap your mind around the unique CSS way. In addition, Microsoft’s Internet Explorer 6 and Internet Explorer 7 have buggy support for CSS. Thankfully, they finally added full CSS support in Internet Explorer 8. Other browsers such as Safari, FireFox, Opera, and others have had full CSS support for many, many years. (Why did it take Microsoft so long? )

Make your choice

As you ponder which website design technique you’ll use as a beginner to website design, please keep in mind that as you get better and better at your craft, you’ll most likely want to switch over to the CSS box model for its power and flexibility. If you just want a quick and easy website, then using a WYSIWYG visual editor with the table-based layout will get the job done to simple satisfaction.

Further reading:

Here are some posts that will held explain a little bit more of my recommended web design technique, the CSS box model:

CSS – Cascading Style Sheets
Boxes – The building blocks of websites