Web Design Basics and WYSIWYG editors

Web Design Basics

Great website design is the result of careful thought and planning.

It doesn't matter if you're a beginner creating your first website or if you are an experienced webmaster and it doesn't matter if you build your website using a simple program like notepad or a WYSIWYG HTML editor like Dreamweaver - what makes the difference is your plan. You decide what to include on your website and how to present it. If you spend time thinking about your website's design before you start building it you will create an excellent site that visitors will return to again and again. 

Your website has to be quick to load, nice to look at, easy to use and navigate. People will remember if your website was full of useful information or if it was a jumbled maze full of pop-ups, pop-unders and flashing gifs that they could not make any sense out of. Keep this in mind as you create your website.

The Golden Rule of Website Design

So you might ask "How do I design my website?" The answer is to focus your website on solving a problem. People are on the internet to find answers - create your website to meet that need. Find a niche and provide high-quality, unique content people are looking for.

You can make your website a huge success by focusing on solving users' problems. Take Google for example - their website is an extremely simple, clean design that contains their logo and a box for you to enter what you are searching for - nothing on the webpage distracts the user from the solution they offer. When you visit google's website there is no question who they are and what they do. They are focused on quickly providing the visitor with relevant search results. That is why they have one of the most successful websites ever created.

All other elements of website design are secondary to filling the visitor's need. They will simply click away to the next website looking for a solution if you can't help them.

Getting started

What is the problem that you have the solution for? For instance: Do you have the secret to making money on the internet? Can you teach someone how to housebreak a pet? 

Decide what solutions you can offer and then write them down. This is your mission statement. Keep this list handy and refer to it often as you design your website so you don't get sidetracked. Users' needs are not necessarily hard to fulfill but one website can not solve all users' problems, so don't try to. Focus on the solution you offer the user and concentrate on how to deliver it.

Meeting expectations

Now that you've figured out what you can offer your users you have to focus on delivering that solution. People looking for answers want them now! Studies have shown that you only have a few seconds to get a visitor's attention and hold it before they click away - don't waste any time. Tell the user what you have to offer right away. Don't use intro pages that take too long to load. People want to get to your content and you should remove anything that gets between the user and the information. Guide them to their goal with as few "clicks" as possible.

Plan to succeed

Many people get frustrated when they try to create a web page simply because they don't do any planning. If you jump in and start writing HTML with no plan you may find yourself lost and so will your visitors. Before you start up your computer get out a pencil and some paper. Create a diagram that illustrates how your website will be layed out.

Build your website one page at a time focusing on one topic per page. As you add new content expand your website diagram adding new pages in a logical order. This will make it much easier for you to build your site and for visitors to find their way around. If you follow a plan you will avoid leading viewers to blank pages, dead links or having them run in circles trying to navigate your website.

Don't worry if you think your website is not perfect. No website is ever totally finished. You should always be fine-tuning and updating your content. You should continue to learn web site design from books and other websites. Website construction is an ongoing process. Build - review - add new content - repeat. 

Color schemes

Many people are terrified when it comes to choosing colors for their website. The vast selection of colors can be overwhelming - but it doesn't need to be. You make color selections every day - from what you wear to the color of rooms in your home. 

People have an emotional response to color so you want to pick ones that will complement your website's content. For example you should use bright, saturated colors for a children's page.

Reds: energy, passion, danger
Blues: calmness, tranquility, stability
Greens: growth, nature, freshness
Yellows: happiness, playfulness, sunshine
Browns: stability, earthy
Blacks: solomness, mystery, power

Basic color schemes

Monochromatic color scheme
The monochromatic color scheme uses a primary color to create an overall mood. Tints and shades of the primary color are used to enhance the scheme. This scheme is easy to balance and is soothing to look at. It can be used with neutral colors like black, white or grey.

 

Analogous color scheme
The analogous color scheme uses adjacent colors on the color wheel. The primary color is dominant while the others are used as highlights. The analogous color scheme is similar to the monochromatic scheme but offers a more vibrant look.

 

Complementary color scheme
The complementary color scheme uses colors that are directly opposite each other on the color wheel. This color scheme creates a high-contrast effect. It is best to use one color as the dominant color and the second color as an accent in your design. This technique will allow you to highlight important information and make it jump out at your readers.

Typography

Good typography is part of web page design and is necessary to communicate with your users. Your typography should be pleasing to look at and easy to read.


Designing for the computer screen offers unique challenges. Unlike text on a printed page, the web designer does not have complete control over how their text will appear on screen. Users can decide to change the fonts you have selected and their size. Another problem is that your webpage will appear differently depending on which browser it is being viewed. Keeping this in mind, design your website so that it will be legible with a wide variety of settings.

Typeface

The typeface you select will set the feel of your web site. Fonts are generally divided between two groups: serif and sans-serif.

Serifs are the extra lines added to the main strokes of the typeface. In print serif fonts are supposed to be easier to read because the serifs lead the eye across the text. The problem with this, is that printed pages can have a resolution of 2400dpi while a computer screen is limited to about 96dpi. This means that serif fonts on the screen can appear pixilated. Sans-serif fonts generally look cleaner on the screen.
The look of a font should reflect the content of the site. For example, Comic Sans MS is a whimsical font more suited to a children's page than to a corporate website.

Contrast

Contrast is the difference between the colour of the text and the background. Black text on a white background offers the most contrast and makes your text as clear as possible. Avoid using colour combinations that will make it difficult to read. The closer the values are between the text and the background the harder it will be to read.

Line length

Excessive line length can make it difficult to read from the end of one line to the beginning of the next. You can control line length by using BlockQuotes, laying out your page with narrow columns or using <BR> (break) characters where you want to force a carriage return.

Alignment

Text is more easily read if it is aligned left - also known as "ragged right" (the text lines up on the left hand side). Right aligned text and center aligned text are more difficult to read as viewers get lost when finishing one line and looking to find the start of the next.

Emphasis

When you want to draw attention to certain words or phrases you have several options but be aware that they can interfere with legibility. Use these sparingly:
Bold: The most common and effective method. Don't overuse or it will lose it's impact.
Italics: Be careful with italics since they can appear jagged and ruin legibility.
Underline: This can cause confusion as it's understood on the web that underlined words are links.
Colour: Colour can be an effective way to draw attention although it can also be confused for a link.
ALL CAPS: Rarely do this as it's considered rude and it's hard to read entire sentences or paragraphs in all caps.

Location is everything

Above the fold is gold. In the newspaper industry important stories are placed on the top half of the page - this is known as 'above the fold'. This is prime real estate because it's where readers first look. Use this approach when designing your website. Put your eye-grabbing content at the top. Don't eat up the top of the page with ads and graphics which force your visitors to scroll down the window to find out what you have to say.

Less is more

'Less is more' are words to live by. Since you only have a few seconds to capture a user's interest don't waste any of them with bloated pages that take too long to load. Potential visitors will just hit 'cancel' and move on to the next guy. Keep in mind that not everyone has a high-speed internet connection. Try to keep the file size at the bare minimum. That may mean you have to lose that 'really cool' graphic or flash intro - but ask yourself - does it add to what you are saying or is it just eye candy? Honestly, no one cares how long you worked on the razzle-dazzle - they just want to find the answer to their problem. Is the solution really going to be found in your photoshop masterpiece? If not, ditch it.

Be consistent

Make it easy for your visitors to find their way around by keeping navigation menus in the same place from page to page. The most common places are a vertical strip at the top left or a horizontal bar at or near the top of the page. Familiarity make users feel at ease, don't make them guess what to do with each page they load. The same goes for link colors - use the same color and style for links throughout your website so they know what is a link and what is not.

Break it up

Divide your content into logical blocks. Use headlines, subheadlines and paragraphs to guide your users through your copy. Nobody wants to fight their way through a big, grey wall of text. Cut it into bite-size pieces readers can digest.

Best practices

• Thoroughly plan your website around serving the user.
• Design webpages that load quickly.
• Simplify navigation.
• Be consistent with fonts, colors and menu locations.
• Use plenty of 'white space'.
• Preview your website on as many different platforms as possible to eliminate bugs.
• Don't make pages too long - users don't like to scroll down too far.
• Keep graphics to a minimum to reduce load times.
• Carefully select color.
• Keep sufficient contrast between the text and background.
• Use fonts that are appropriate to your content.
• Keep line-length at a comfortable size.
• Don't overuse flashing/animated graphics.
• Write as shortly and clearly as possible.
• Put your best content at the top of the page.
• Break text into logical blocks.
• Provide users with a way to contact you.

 Web Design Basics

Free website templates

You can download these free website templates and modify them for your own use. The only thing I ask is that you leave the link in the footer giving me credit for the original design. Thank you.

www.freewebsitetemplates.com 

www.websitetemplatesonline.com

 

Let’s have a look at 6 HTML WYSIWYG editors for the web:

Over the last couple of months I’ve become very passionate about WYSIWYG HTML editors. Mostly because I was forced to use a really bad HTML WYSIWYG editor called Sharepoint Out-of-the-box editor. I actually ended up just editing most of the stuff in plain HTML, which is though not the point of having a HTML WYSIWYG editor. A good WYSIWYG editor will produce clean HTML markup and will make the writer much faster in producing nicely formatted output.
WYSIWYG – A short introduction – For all newbies. What is WYSIWYG.
WYSIWYG Editors Are Evil – Advantages Of Clean Content Markup – Why would you care about the editor?

CKEditor

CKEditor is an open source HTML WYSIWYG editor that is also available with a commercial licence. It’s very popular and provides an integration for Microsoft Sharepoint 2010 & 2007. A lot of open source CMS’ like Drupal, WordPress, Typo3 provide modules or plugins to integrate the CKEditor. CKEditor is an opensource project. It’s free.

NicEdit

NicEdit is a Lightweight, Cross Platform, HTML Editor to allow easy editing of web site content on the fly in the browser. NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.

TinyMCE

Very similar to CKeditor. WordPress uses it out of the box. Nice and powerful yet fast editor and also freely available.

RealObject edit-on NG

This editor is Java based. It looks very powerful. Since is Java based it though takes some time loading everything. Can’t compare to CKEditor for example. edit-on NG is not open source. Licenses are pretty expensive (3000 $).

openwysiwyg

From the look and feel just like the CKEditor, but no support for Chrome! So this is a no go!

Xinha

Never heard of that one before. Here’s what the website says: “Xinha is a powerful WYSIWYG HTML editor component that works in all current browsers. Its configurabilty and extensibility make it easy to build just the right editor for multiple purposes, from a restricted mini-editor for one database field to a full-fledged website editor.”