Pages

Thursday 17 January 2013

Basic Tips for Professional Webpage Designers

Basic Tips for Professional Webpage Designers

Are you a professional webpage designer? or
Are you new to webpage design and going to learn it?

Does not matter!!

Following are some basic tips which each webpage designer must follow. Webpage designing is very easy and interesting. You can learn webpage designing in no time if you take interest in it. You don't have to learn any complex algorithm or diagrams for this. Learning web design online is very easy. There are a lot of websites which will teach you web design from the scratch.

You will have to learn HTML, CSS and Javascript for web design. Flash, Photoshop will be a plus. Today, HTML5 has eliminated the need of Flash. CSS3 has now lot of advanced features which are provided by Photoshop like gradient effects, animations, rounding the corners of images etc.

You can get a lot of web design templates online. There are a lot of free editors available for HTML, CSS and Javascript which will help you in learning web designing.

For now, I have listed some basic points which each web designer must have in mind before designing any webpage.

1. Include Doctype in your webpages

The DOCTYPE defines which version of HTML you are using, and gives important information to your browser so it can render your page faster and more consistently.

The DOCTYPE declaration also allows validating software to check the syntax of your page.
<!DOCTYPE html>

2. Include Title in your webpages

The <title> element is one of the most important HTML elements. Its main function is to describe the content of a web page. It is important to the quality of your web site because it will be visible in search engine lists, the browser's title bar and user's bookmark.

The title should be as short and descriptive as possible.
 
When a user searches for a web site, most search engines will display the title of your web site in the search result. Make sure the title matches the content the user is looking for. Then it is more likely the user will click on the link to visit your web site.

3. Use Headers in your webpages

The <h1> element is used to describe the main heading of a web page. You can use <h2>, <h3>, <h4> etc to arrange your content in your webpage. This will be great approach for search engine optimization.

4. Follow CSS standards

With CSS, you can store all style information for your web site in one single document. Using Cascading Style Sheets (CSS) is the preferred way of separating content from style in quality web pages.

Using CSS will improve the quality of your web site and increases the readability for many different browsers. It will also greatly reduce your web site development costs.

5. Use Web Validators

A validator is a software program that can check your web pages against the web standards.
When using a validator to check HTML, XHTML or CSS documents, the validator returns a list of errors found, according to your chosen standard.

6. Do not use fixed sizes

Never use fixed size values. Always use relative size values.

The most important reason for this advice is that fixed sizes can not be resized by the browser.
Your visitors will have different monitors, different viewing conditions (light), and possible disabilities (poor eyesight).

Setting your default text size to 100% (or medium), your main headers to 140% (or x-large), your sub headers to 120% (or large), as an example, will make it possible for your reader to resize your pages to their best fit.

7. Take care of different date formats

Don't use dates like "04-03-02". This is confusing.

The date above could mean the 2nd of March, 2004. It could also mean the 4th of March, 2002. Or even the 3rd of April, 2002.

The International Standard Organization (ISO) has defined an international format for dates as "yyyy-mm-dd", where yyyy is the year, mm is the month, and dd is the day.

When you use this ISO format, you can expect most visitors to understand your dates.

8. Always take care of font-family, line spacing, letter spacing, color contrasts, foreground and background colors.

No comments:

Post a Comment