Category: Design and Layout

HTML line break tag – when and how to use it

August 4th, 2009

HTML line break codeA lot of beginners to website design want to know how to create a line break using HTML. And while the tag used to create a line break is easy to remember, knowing when and how to use it correctly is a little more complicated. In addition, there are many times when you shouldn’t even use the HTML line break code at all.

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?

Read on…

The best website fonts for legibility

August 2nd, 2009

Best fonts for website legibilityIn a previous post titled The best fonts for websites, I talked about how to choose the best fonts for your website so that no matter which operating system your visitor is using (Windows, Mac, Linux, etc.) or which version (Windows 98, XP, Vista, Mac OS 8 through 10.5) they will be able to see exactly what you intended.

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:

Read on…

The best colors for a website’s content

July 30th, 2009

eyeNothing can influence your website’s visitors more than its colors. Colors create the mood and set the matching tone for your content. The right colors in the right places can excite, inspire, and encourage your visitors to dig deeper into your website. On the flip side, the wrong colors in the important places can destroy all of the hard work you put into the graphic elements of your website design.

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.

Read on…

What are web safe “hex” colors? (Plus an HTML color chart!)

July 29th, 2009

Chart of web safe hex colorsAs a beginner at website design, I remember the first time I encountered phrases like “web safe colors”, “HTML colors” and “hex colors.” Obviously the last term, “hex colors”, has nothing to do with using colors to bring ill-fortune to those so-called friends who wronged me in the past. But as a newbie to website design, how was I to know the truth? ;)

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!

Read on…

Internet Explorer 6 must die!

July 26th, 2009

die-ie6I’ve been pondering for some time about writing this post. And while browsing one of my favorite blogs today I came across an article that is exactly in line with my recent thinking: IE6 Must Die for the Web to Move On

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:

Read on…

The best fonts for websites (web safe fonts)

July 26th, 2009

The best fonts for websitesBeginners to website design often scratch their heads in confusion and ask themselves “What are the best fonts for web design?” The answer to this question is both easy and a little complicated. You see, while there are some good fonts for websites, there are also the highly necessary standard fonts for websites as well. Throw into the mix the fact that you can have any font on your website using images and you’ll undoubtedly scratch the hair right off your head.

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:

Read on…

What’s the difference between vector and bitmap (rasterized) images?

July 24th, 2009

Difference between vector and bitmap imagesThere are two types of images that you’ll need to understand as you get deeper into website design and graphic design: vector images and bitmap (rasterized) images.

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.

Read on…

Web design techniques: Tables vs. CSS Boxes

July 21st, 2009

A table of boxesBeginners to website design are faced with a big choice before laying out their first website: should I build my website using tables or should I go the CSS “box model” route? Many years ago when I was just a beginner to website design and was searching high and low for information on how to design websites, I often read posts by designers touting the benefits of either one web design technique or the other. Quite baffling to say the least, especially since I had absolutely no clue what these people were arguing about!

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.

Read on…

Creative use of negative space in logos

July 18th, 2009

Negative space - white space in logosNegative space or white space are the areas in a design that have no actual objects or images. But don’t think that negative space or white space isn’t important. They can help focus a reader’s eyes exactly where you want them to go, give some “breathing room” to a design, and when used creatively can produce some truly memorable logos.

In this post, I’ll be presenting some very cool logos that use negative space to their advantage. As you study the images, take note how your eyes seem to fill in the white space with the missing content. These logos were created with that firmly in mind.

Read on…

Behold! Some creative navigation!

July 8th, 2009

From time to time during my web-surfing excursions I come across some really creative website navigation. The website for the dConstruct 2009 convention is a prime example of such navigation:


To really appreciate this website’s navigation, head on over and click on some of the links in the main navigation (located at the top in the green bar.)

Check it out here: dConstruct 2009

What is an HTML attribute, tag, & element?

July 7th, 2009

An HTML tag?As I prepare to write the next post in the “My First Website” series, it dawned on me (after my sixth cup of coffee) that I need to explain some website design jargon — specifically: what is an HTML attribute, element, and tag. I need to explain these terms because I’ll be using them quite often as we work through the series.

Of course, if you are not following along in the series you’ll still need to know what an HTML attribute, an HTML element, and an HTML tag are. Without this knowledge, trying to understand the other lessons and tutorials here on NWD will just make your head spin in a very unpleasant and slightly nauseating way.

Let’s begin:

Read on…