It must be able to fulfill all that visitors would to like to know and in the manner as they may prefer. In addition to this, it must be borne in mind that search engine visibility matters a lot in making site reach its target audience. Therefore, in this article, we are going to dwell on certain important considerations that help creating quality Portfolio sites.

Points to Consider While Designing a Portfolio Site

Understand the Target Group

It is not always possible to cater to every type of customer. Every designer has a niche and can serve a particular segment of clients efficiently. It is important to first understand what your target audience is and then analyze their expectations to design the portfolio site so that it appeals to them and your chances of getting work are eased out.

Design a Unique Logo and Develop a Catchy Tagline

A logo is such a powerful tool in creating an identity that it must be utilized to its true potential for a portfolio site. Adding a star to the logo is an effective tagline that best describes your work in a simple way. The logo, even if it consists of the initials of your name, should be designed to catch the visitors’ attention.

Take Care of Navigation

Navigation is one such aspect of web design that is bound to find mention as it allows users to easily move back and forth on a site and helps them to locate the required information. For a portfolio where you wish your clients to know about you, go through your work and then place the order, it is essential to offer them a smooth way to navigate.

Categorization of Work is Important

If you wish to give a clean presentation of your work and prevent users from getting confused, then categorizing your work is important. This will help them know the kind and scope of work you have done. Allow them to view samples category wise and facilitate a better understating of the service you render. Also make sure that you display the best of your work. What else do you require to do for striking a deal.

Updating the Site should be Easy

As you need to showcase more of your work and replace the older samples with new ones, your site should allow carrying out these things in an easy manner. Updating the site from time to time is a healthy practice and it must be designed to include those features which make it quite simple to undertake changes. For this you can use a quality CMS which suits your requirement.

Optimize the Site for Search Engines

To reach the target customers, the site must be visible in search engines for which it is essential to optimize it. Use the necessary keywords wherever applicable in the content, chose appropriate titles for different pages, take care of the site’s speed. These are useful from SEO point of view and will help the site in attracting traffic.

Carefully Choose the Typography

Stylishly written but difficult to read content cannot serve the desired purpose. It is often seen that designer in their effort to be different, try stylish fonts. However, the right practice is to use suitable fonts and sizes to ensure that the content is legible as well as readable. This increases the usability of the site, again an important consideration from SEO’s angle.

Highlight Call to Action

Unless you make prominent the action that you desire your customers to take, they are not going to buy or hire the services. Customers always require a push factor and for this effective Call to Action buttons can be well utilized. These buttons must be clearly visible and designed to grab the users’ eye.

Lastly, Allow Visitors to Easily Contact You

There is no use having an excellent Portfolio site but which doesn’t allow the visitors to establish a contact. Make sure that in addition to a contact/order form, you provide a valid phone number and an email so that visitors can contact you. You can also mention about your profile on social networks to get connected to your clients and earn work.

We hope that you find the above information useful and in case you have some more suggestions for creating an attractive and effective portfolio site, feel free to share them with us.

While a designer put in a lot of efforts for creating a novel and aspiring design, it also requires him/her to select the right typeface as it constitutes an important part of a website. But making this selection is not an easy job which is further complicated by the fact that there are several typefaces available. As it is something which cannot be avoided at any cost for it directly affects the users’ experience for whom the website is meant, it becomes imperative to carefully select the typeface which fits the purpose and complements the design.

Here we are going to discuss the various factors that should be considered as well as few tips that come handy before choosing a typeface.

Factors that affect the choice of Typeface

Legibility

It is concerned with the design of the typeface and refers to those features (x-height, counters, stroke width, character, style, letter shapes, etc) of a typeface which make it recognizable by the readers. It takes into account the ability to distinguish one letterform from another. The choice of typeface also depends on the intended meaning of the text for which it is used. To say for example, a decorative typeface can be used for a headline or to draw attention to any part of a site but when it comes to body text, it should be highly legible.

Readability

Though readability and legibility are often confused to be the same thing but they are different. Readability refers to the degree to which a text is easy to read and combines the various properties such as style, color, tracking, spacing, etc. It matters a lot as the content not easy to read is of no value to the user and will not serve any purpose. It is thus important to choose a typeface that offers high readability.

Nature of the Typeface

Some typefaces are designed for a particular intention; therefore before using them it is wiser to gain knowledge about them. For example, a typeface which is popular for its usage in headlines or in magazines, posters, etc may not be appropriate to be used for web. So it is good to check whether the typeface that you are going to use is suitable or not.

Users Expectations

No matter how good a typeface is but if it doesn’t fulfill the expectations of the target readers then it is not fit for usage. It also depends on the subject matter of the site.  If the site deals with a serious topic, say insurance, the use of light font like Comic sans will not be considered rather the designer should go for a sober one.

Mood to invoke

Typeface with other factors like readability and implied meaning can very well invoke the desired mood from the readers. It is therefore important to identify what mood or emotion a site wish to elicit from the visitors and then choose the typeface.

Tips to select the right Typeface

Define the Content Hierarchy

It is important to establish the hierarchy of the content first in order to decide what typeface/typefaces would be required. Analyze how you wish to structure headings, sub-heading, body text, call to actions, etc before making a selection.

Go for Extended Type family

Extended Type Family ensures that your typographic needs will be fulfilled well in time if required. Also it proves beneficial for long term projects.

Observe other sites that belong to the same industry

It is a good idea to observe and take note of what other designers have used for the sites. However it must be noted that the sites are of the same industry/field as yours.

Don’t look for the correlation between the typeface and the subject

Most designers commit this fallacy and choose a type simply because of its relation to the subject. It may not produce the desired result with chances of doing the opposite of what you have thought.

To be on safer side use classic combinations

It is better to use those typefaces which are much in use and are accepted rather than choose one which may make you regret later. This is helpful especially when you are running short of time.

This was our brief guide for the readers with the intention to help them select the right typeface for their web design. We would be glad to receive comments and views.

Why About us page is important?

Simply, because a user will definitely visit this page to ascertain the credibility of the service provider/company and will take decision if the information presented satisfies him/her. Also, about us page is important because it an efficient means by which one can convey necessary details and create a favorable image among the target customers.

Though there are different ways to create about us page but here we are going to have a look into some of the well designed and interesting ones to help the readers get an idea as to how they would like this page on their site to turn up.

Mail Chimp

The about us page displays a fine balance of a big photograph and short and precise content. While the picture captures the interest and makes users wait there at the page, the text answers their queries subtly.

Example of About Us Page - Mail Chimp

Twitter

It is a perfect example of a comprehensive About us page that aptly describes what all a user can do with this micro blogging site. The opening line itself “Twitter is the best way to discover what’s new in your world”, sets aside many doubts followed by a brief explanation of various aspects of the site.

Example of About Us Page - Twitter

Facebook

Just like Twitter, Facebook too offers a lot of information to the users about itself but does that in an interesting way. It presents a demo exhibiting its feature and giving a view of what users will have once they start using the social networking site.

Example of About Us Page - Facebook

Google

With Google offering a wide range of services to its large and diverse user base, it’s about us page offers links to the various pages and a user may click to get the information according to the specific need. It has done an effective categorization to lead different users to the information they desire.

Example of About Us Page - Google

Squiddo

This publishing platform has it all on its about us page. First it describes itself and then offers other details which are relevant to the users and increase their understanding of it. The information flows down and finally acquaints the user to its team members. It is informative but does that in a playful manner.

Example of About Us Page - Squidoo

These are just a few of about us page that were interesting and different from the several others that we come across every day.

Now it is up to you whether you would like to create about us page of your site taking inspiration from the above ones or will go for a totally unique one. You have one more option and that is to follow the league and create yet another boring and dull about us page as are available everywhere.

We would love to know which of the above about us page would you prefer and in case if you have something else in mind, we would like to come across your ideas. Who knows your simple idea may turn into a benchmark.

Similarly, If you wish to check out how to create effective design for FAQ page, which is also an important part of a site, then follow the link http://www.xhtml-css-code.com/best-practice/understanding-why-and-how-of-a-faqs-page-of-website

However one point to be noted here is that the decision to opt for a single page website must be taken after considering a number of factors such as nature and quantity of content. Also it is not implied that such sites present the best solution and can replace the multiple page sites. Rather depending upon the purpose, one may think of having a one page site.

In this article we are going to take a closer look at Single Page sites, what makes them different, what points to take care while designing them and what advantages do they offer.

But first clear the confusion…..

A Single page site is not a Mini Site

Though there might be some overlapping features but it would be incorrect to refer a single page site as mini site. The latter contains a couple of pages with one main page which contains the purpose of the site. On the other hand a single page site has only one page and easier to maintain than a mini one.

Points to Consider for a Single Page Website

Least Amount of Content

It is highly important to judiciously place the content on a single page site and that too in specified content areas. Too much content will lead to clutter and the site will lose its essence. In sharp contrast to this, minimal and necessary content is the need of such a site.

Make the Transition Clear

The various sections of the site must be clearly distinguishable and the transition from one to another must be clearly visible to the visitors. This can be done using white space, bars, headers or even drawing the line to separate the different sections/areas.

Use Large Backgrounds

Large Backgrounds in a single page website helps creating a uniform look and thus can be advantageously used. In addition to this, they also help in separating content areas on the site.

Utilize Ajax and JavaScript

Both are useful tools that help organizing the content while taking care of accessibility and SEO. Also they come handy if the single page site has a bit more content than usual.

Go for Horizontal Scrolling

Horizontal Scrolling is useful especially if the quantity of the content is more as it helps in presenting the content in a clear manner without any clutter.

Benefits of Single Page Sites

Provide Easy Navigation

With all the required information embedded in one page, it is much easier for visitors to navigate the site. A user can quickly go through the content and doesn’t need to move from one page to another to find relevant information.

Maintenance is Easy

As the site comprises of only one page, its maintenance is easier in comparison to multi page sites. One only needs to focus on quality.

Work Best as Single Product or Purpose Site

If the site is meant to focus on one product only or has some central focus, it is good to construct a single page site. Doing this the concentration remains on the key objective and visitors get what they desire to know.

Can Create the Positive Impact

As single page websites are less commonly found, they can be used to create a positive and desired impact on the visitors with their unique designs and appeal. Therefore they are increasingly being used as Portfolio sites.

Given that users’ demands have to be catered to and with much focus on mobile web, it is likely that single page websites will gain more prominence. But whatever may be the case, the decision rests with the designers who may challenge their own creativity to develop a powerful website of one page or with the clients who may opt for single page promotion of their product/service.

Therefore a designer while formulating a design for an ecommerce site or an online store must bear in mind the interest of the users and should include those features that offer a friendly experience.

In this write-up, we are going to mention some important points that should always be remembered while designing a commercial site to increase its effectiveness.

Essentials for Your Ecommerce Site

Organize the Site to Present a Clear Picture to Buyers

The site must allow the buyer to easily understand the offerings as well as enable him/her to find the desired information or product without much effort. The various features of the site should be organized in a way which offers clarity and easy comprehension. This helps the users/buyers to take quick decisions. On the other hand if the layout is too cluttered with various options, it only confuses the visitor who might leave the site without reaching a conclusion as to what and how to do. Thus every element on the site be arranged to increase the understanding of the user.

Buyers Love to See the Shopping Cart -Make it Noticeable

A visible Shopping Cart instills confidence among the buyers while they are adding purchase items to the cart. They can see whether the item has been added or not. All through the shopping process till they checkout, they can keep a check on the list of items and other related information if the cart is visible to them. Therefore it is important that users are easily able to locate the Cart on the page.

Effective Call to Action Buttons

Action buttons are the driver of sales and therefore it is highly important to design them in accordance with users’ point of view. They must match the buyer’s thinking and prompt him to take an action. Call to action buttons can be made effective by:

• Selecting the Appropriate Words – For an ecommerce site, “Add to Cart”, “Click to buy” are suitable rather than words like, “Know more”, “Get details”, etc.
• Color – Colors do play a crucial role and should be selected to enhance the appearance of these buttons and help them stand out. Also color of the action button must compliment the overall design.
• Positioning & Size – It is also equally important to choose the right place and size for call to action to get maximum sales. Both these factors should be made to draw users’ attention.

Search Box with Auto Complete Function

Let the visitors find the product/service with the help of Search box. As the users type their queries, Auto Complete function by making suggestions enables them to get relevant results and   it also saves their time.

Simple Navigation Path

For sites dealing with multiple product categories, a navigation path which makes it simple for buyers to move and forth to find the various products and buy them is a prerequisite. It will prevent them from being lost on the site and will ease out the buying process.

Let Buyers Personalize their Shopping Experience

It is beneficial for an ecommerce site to allow its visitors to shop the way they want. Every buyer has his/her own set of requirements or preferences and if a site offers ways to meet them, it gains favorability. Thus buyers should be given the option to personalize their experience and search for items by Price, Brand, Reviews, Bestsellers, Color, Gender, etc.

Product Pages – Quick Preview Option + Images + Apt Description

Adequate attention must be given while designing Product Pages as they are the most significant part of the site. Providing the option to quickly preview a product aids the shoppers to smoothly browse the site for what they are looking for, without consuming much time. As visitors first wish to see the product, it is vital to use appealing images along with displaying a suitable description.

Display the Price of the Product and Availability

Price is the major factor that determines the buying decision and most shoppers wish to know the price first. It helps them make a quick comparison with other options and reach a conclusion. Another aspect which should be made known to customers is availability. If a visitor knows that the product is currently not available, he/she will move on to search for another, saving his time and effort.

Enable Fast Checkout

Often the long and tiring Checkout process where they have to go from one page to another to complete a transaction compels shoppers to make a move which adversely affects the sales. Therefore it is necessary to simplify the whole process and allow the customers to have a fast checkout. It is advisable to restrict the checkout to single page.

Ensure Fast Loading

A buyer would not wait for a long time for the pages of the site to load and will move back to some other site which offers him a quick shopping experience. An Ecommerce site thus needs to have a high speed and enable fast loading for users to collect information and then buy products/services.

These are some of the useful ways that assist in designing an effective Ecommerce site which can drive sales and turn out to be profitable.

Default

Default HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml"> <head> <meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Formatting</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div>
The quick brown fox jumps over the little lazy dog.
The quick brown fox jumps over the little lazy dog.
The quick brown fox jumps over the little lazy dog.
The quick brown fox jumps over the little lazy dog.
</div>
</body>
</html>

Note: Here we have used ‘div’ tag in HTML, but you can apply the below-mentioned CSS style properties to any tag created to contain text.

Default CSS Code

 div.sample { width: 500px; height: 100px; border: 2px solid; border-color:
 black; } 

Default Output

Default Output

Text Indentation

You can indent the first line of text using ‘text-indent’ property. This can have following values:

1. pt – A Point (pt) is the unit of measuring font-size on the papers. Printing solutions like Microsoft Office, Open Office, Adobe PageMaker, Adobe FrameMake etc. make use of pt to measure the font size, indentation, hanging, line spacing etc.  You can use ‘text-indent: npt’ to indent the first line with n points. Please replace the n with the numeric value. For example, text-indent: 30pt;

   

   The first line is indented with 30 points

2. px – measures the indentation size in pixels. Use ‘text-indent: npx’ and replace n with numeric value. For example, text-indent: 30px;

   

   First line indented with 30 pixels

3. % - indents the first line according to the % value specified. It measures the indentation according to the width of parent tag and if no width is specified then it takes width as 100%. In our test, the width of div is 500px it means ‘text-indent: 10%’ will indent the first line with 50px (10% of 500px).  text-indent: 10%;

   

   First line indented with 30% of 500px width of div

4. em – is equal to the size of indent or font in question. 2em means two times of the default size of indentation. text-indent: 2em;

   

   First line indented with 2em using text-indent: 2em;

5. inherit – inherit the text-indent value of parent tag. To demonstrate ‘inherit’ attribute, we’ll create a paragraph using <p> tag inside div. The div will have ‘text-decoration:line-through’ and the child <p> tag will have ‘text-indent:inherit”. The code and output will be as under: -

   HTML Code

   <div>

   <p> The quick brown fox jumps over the little lazy dog.
   The quick brown fox jumps over the little lazy dog.

   The quick brown fox jumps over the little lazy dog.
   The quick brown fox jumps over the little lazy dog. </p>

   </div>

   CSS Code

   div.sample { width: 500px; height: 100px; border: 2px solid; border-color: black;
   text-indent: 10%; }
   

   p.test { text-indent:inherit; }

   Output

   

   paragraph tag inherited the text-indent value of div tag

Text-Transform

You can change the letter case of text using CSS. Use text-transform property to transform the letter case. For this property, we will create two different <p> tags.

1. capitalize: capitalizes the first alphabet of every word.  text-transform: capitalize;

   HTML Code

    <div> <p>
   This is first p tag without text-transform CSS property.<br />
   

   The quick brown fox jumps over the little lazy dog.

   The quick brown fox jumps over the little lazy dog. </p>

   <p> This is second p tag with text-transform.<br />

   The quick brown fox jumps over the little lazy dog.

   The quick brown fox jumps over the little lazy dog. </p>
   
   CSS Code

   div.sample { width: 500px; height: 160px; border: 2px solid; border-color: black;
   }

   p.test { text-transform: capitalize; }

   Output

   

   paragraph tag with text-transform:capitalize;

2. uppercase: converts lowercase letters to uppercase. Code Update in second <p> tag. text-transform: uppercase; Output

   

   text-transform: uppercase; applied at second paragraph tag

3. lowercase: converts uppercase letters to lowercase. Code Update in second <p> tag. text-transform: lowercase; Output

   

   text-transform: lowercase; applied at second paragraph tag

4. inherit: inherits the text-transform property of parent tag.
5. none: does not apply any text transformation and restricts the parent tag to apply text-transform on child tag.

   HTML Code

   <div> This is parent tag.

   <p> This is first p tag restricting parent tag to apply text transformation
   using 'text-transform:none;' property.<br /> </p> <p>
   This is second p tag inheriting text-transform property of parent
   div tag using 'text-transform:inherit'.<br /> </p>

   CSS Code

   div.sample { width: 500px; height: 160px; border: 2px solid; border-color: black;
   text-transform: uppercase; }

   p.none { text-transform: none; }

   p.test { text-transform: inherit; }

   Output

   

   Output of text-transform:none; and text-transform:inherit;

Stay tuned to XHTML-CSS-Code for such exciting tutorials on CSS to enhance your Web designing skills.

Read this article once to improve your designing skills even if you’re an experienced Web designer. You can paste the code in a CSS file, and link it to a HTML to test it.

How to Link CSS with HTML?

You can use following ways to link CSS with HTML.

• External Linking – Create a separate CSS file and add following code in the tag of the HTML file. Replace ‘test’ with the name of your CSS file.
• Internal Linking – Type the style sheet properties between tags inside <head> .

<style type=”text/css”>
<! — write your  code here –>
</style>

Inline Styling – Include Style properties inside any tag.<div style=”color: red; border:1px solid black;”></div>

Note

For this article, we have linked a test CSS file to a sample HTML. We will only change the CSS code for demonstration except the situations where we need to modify HTML.

Default Code & Output

Default HTML Code

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Text Formatting</title>
<link rel=”stylesheet” href=”test.css” />
</head>
<body>
<div>
The quick brown fox jumps over the little lazy dog. The quick brown fox jumps over the little lazy dog.
The quick brown fox jumps over the little lazy dog. The quick brown fox jumps over the little lazy dog.
</div>
</body>
</html>
Note: Here we have used ‘div’ tag in HTML, but you can apply the below-mentioned CSS style properties to any tag created to contain text.

Default CSS Code

div.sample
{
width: 500px;
height: 100px;
border: 2px solid;
border-color: black;
}

Default Output

Default Output

Text Alignment

You can use text-alignment property to align the text. Following are its values:

Left Aligned Text - text-align: left;

center – aligns the text in center. text-align: center;

Center Alignment – text-align:center;

right – aligns the text to right. text-align: right;

Right Alignment – text-align:right;

justify – sets the justified alignment to the text. text-align: justify;

Justified text alignment - text-align:justify;

inherit – inherits the text-alignment property of the parent tag.To demonstrate, inherit alignment we will create a paragraph using <p> with right alignment.

Code:

HTML Code
<div>
<p>
The quick brown fox jumps over the little lazy dog. The quick brown fox jumps over the little lazy dog.
The quick brown fox jumps over the little lazy dog. The quick brown fox jumps over the little lazy dog.
</p>
</div>

CSS Code

div.sample
{
width: 500px;
height: 100px;
border: 2px solid
border-color: black;
text-align:right;
}
p.child
{
text-align: inherit;
border: 1px solid;
border-color: red;
}

Here <p> tag will inherit the ‘text-align’ property of the parent <div> tag and right align the text as shown below.

Output

Text inherited the right alignment of the tag

Text Color

You can use ‘color’ property to give color to the text. However, you should memorize the color codes for HTML. Noteworthy that the HTML editors like Adobe Dreamweaver and Aptana Studio display the color combination on-the-fly.

Adobe Dreamweaver displays color palette on-the-fly while using color property in CSS

You can either enter values in hexadecimal form like
color: #330066;

Text Color changed to #330066

or
provide separate values for RGB (Red, Green, and Blue) like
color: rgb(48,48,48) ;

Text Color changed to rgb(48,48,48)

or
enter color name like
color:red;

Text Color changed to red using color:red;

Text-Shadow

You can apply shadow to the text content using ‘text-shadow’. This property is firstly introduced with the CSS 3. The syntax for shadow is:

text-shadow: h-shadow v-shadow blur color;
h-shadow – value for horizontal shadow.
v-shadow – value for vertical shadow.
blur – value for blur in shadow
color – color of shadow. This value can be in hexadecimal form, color-name, or rgb(r,g,b) code form.

Note: You can enter h-shadow, v-shadow and blur values in these forms – pt, px, em, and %.

text-shadow: 2px 2px 4px red;

Shadow using text-shadow property

You can visit W3School HTML Color Page to see the color combinations and their respective values. In addition, W3School Color Names describes the name of each color. You can also use Microsoft Paintbrush to get the RGB values of any color.

In addition to above syntax, you can also add following values to ‘text-shadow’ property.

• inherit – A tag inherits the text-shadow property of its parent using this attribute. To demonstrate ‘inherit’ attribute, we’ll create a paragraph using <p> tag inside div. The div will have ‘text-shadow:2px 5px 2px yellow;’ and the child <p> tag will have ‘text-decoration: inherit”. The code and output will be as under: - HTML Code <div class=”sample”>
  This is parent div tag.
  <p class=”test”>
  This is child p tag.
  The quick brown fox jumps over the little lazy dog. The quick brown fox jumps over the little lazy dog.
  The quick brown fox jumps over the little lazy dog. The quick brown fox jumps over the little lazy dog.
  </p>
  </div>
  }CSS Code

  
  div.sample
  {
  width: 500px;
  height: 100px;
  border: 2px solid;
  border-color: black;
  text-shadow:2px 5px 2px yellow;
  }
  p.test
  {
  text-shadow:inherit;
  }
  

  Output

  

  tag inherited the text-shadow property of parent div tag

• none – It does not apply any shadow on the text and restrict the parent tag to apply shadow on the child tag. If we replace “text-shadow: inherit;” with ‘text-shadow: none;” then tag will not have any shadow. Code Update p.text{text-shadow:none;} Output
  

  tag does not show shadow using text-shadow:none;

Text Decoration

You can use ‘text-decoration’ property to apply the overline, strike through, underline, and blink formatting to the selected text. This property has following values:

• overline – to apply a line over the text. text-decoration: overline;
  

  Overline applied to the text using text-decoration:overline;

• line-through – to strikethrough the text. text-decoration: line-through;
  

  Strikethrough applied to the text using text-decoration:line-through;

• underline – to underline the text. text-decoration: underline;
  

  Underline applied using text-decoration: underline;

• blink – to blink the text. text-decoration: blink;
  

  Text will appear and disappear, means blinks with text-decoration:blink;

  • none – to restrict a text from applying any decoration value. You can use this value to stop the anchored text from changing color.
  • text-decoration: none; To demonstrate ‘text-decoration:none’, we will create property for anchor (<a>) tag and apply this attribute. The code and output are shown below.

  HTML Code
  <div><a href=”">1st Anchor Text</a> The quick brown fox jumps over the little lazy dog. <a href=”">2nd Anchor Text</a> The quick brown fox jumps over the little lazy dog.The quick brown fox jumps over the little lazy dog. The quick brown fox jumps over the little lazy dog.</div>

  CSS
  
  div.sample
  {
  width: 500px;
  height: 100px;
  border: 2px solid;
  border-color: black;
  }
  a.url
  {
  text-decoration: none;
  }
  
  Output

  

  text-decoration value of a.url overridden the default anchor text formatting to underline

  Here, the ‘1st Anchor Text’ used the property “text-decoration:none” of a.url and restrict default underlining. On the contrary, the “2nd Anchored Text” is displaying with default property.

  • inherit –the text-decoration property of the parent.text-decoration: inherit; To demonstrate ‘inherit’ attribute, we’ll create a paragraph using <p> tag inside div. The div will have ‘text-decoration:line-through’ and the child <p> tag will have ‘text-decoration:inherit”. The code and output will be as under: -                                                                                                               HTML Code
    <body>
    <div>
    <p>
    The quick brown fox jumps over the little lazy dog. The quick brown fox jumps over the little lazy dog
    The quick brown fox jumps over the little lazy dog. The quick brown fox jumps over the little lazy dog.
    </p>
    </div>
    CSS Code
    div.sample
    {
    width: 500px;
    height: 100px;
    border: 2px solid;
    border-color: black;
    text-decoration: line-through;
    }
    p.test
    {
    border: 1px solid red;
    text-decoration: inherit;

    }

    Output

    

  Hereby, our team expects your valuable feedback, comments and suggestion about this post. In future, we will post more text formatting articles to make you more familiar with CSS. Stay tuned to XHTML-CSS-Code.

Here, in this article, we will discuss few most common mistakes that should be avoided in web designing.

Undesired and Unprofessional Designs

Keep in mind that you are designing your website for your visitors or target audience and they are the ones who are going to judge it.  So, the website should be designed keeping in mind the potential users of it. The website should be neat and clean with proper balanced images and flashes and it should not seem overloaded. Moreover, before actually launching the designed website, you should get some feedback with the help of a sample work and ask people to comment about it. Do not launch it before usability testing, as, you have put in your valuable money and time.

Poor Loading Speed

True that one should have some patience as a positive factor. But as far as business is concerned, time is very precious for all and no one would keep much patience if your website is taking too much time in loading. In fact, it becomes a judging factor, and instead of waiting the visitor will switch to some other option. Now what could be the reason for this poor loading speed? The reason can be overuse of design elements or too many images and flash.

Poor Navigation

One very big reason as to why web users can switch to another option is that they are finding it difficult to explore your website.  If they find broken links and pages with errors or find themselves confused and lost somewhere in the process of browsing your website, they will get completely annoyed. So, keep your website error free and free from broken links so that the website navigation is simple and easy.

Complex Fonts Should Be Avoided

The fonts that you use for your website should be such that the readers do not get confused. They should be clear and simple enough to read

Improper Meta Tags

To be popular and visible among good number of web users, it is necessary that you use relevant keywords and phrases, this will help your website rank better in search engines. The title of your website and the entire content should be keyword rich, but avoid keyword stuffing.

Lack of Fresh and Proper Content

One major factor that visitors look for, in a website, is the quality of content. No one will take interest in your website if they feel that you have the same old repetitive content or topic of discussion on your website for a long period of time. So, always keep your website updated with new and fresh content which is qualitative enough to attract readers. If your website doesn’t require constant update, you can get a blog integrated to the site, to keep your site updated with fresh and useful content. It’s good in both visitors as well as search engine’s point of view.

Avoid Complex URL Structures

The URL for your website should be simple and relevant as; this factor will help to enhance your website ranking and also the readers will be easily able to find your website.

CONCLUSION

These are some of the mistakes to avoid while designing your website; however there are so many other considerations while constructing a site. But it is always good to start with the basics; I hope the post was useful. Comments and feedbacks are welcome.

Consistent Navigation Bar

You should have a proper navigation bar in your website so that your visitors are always clear about a couple of things-where they are and how they can go to the intended page, because any page of your site may get indexed any time by the search engines and therefore, the visitors that your website attracts might land on any indexed page of your website. Moreover, you can also have a consistent vertical navigation bar for all your pages. These bars should be easily found when a visitor is navigating your website.

Avoid Irritating Ends

It’s better to place links to different pages of the site at the footer of the website, generally visitor  once reaches the bottom of any page, finds it difficult to again scroll to the top of the page to navigate to other pages of your website. I know this is just a small issue, yet, even a small issue from your visitor’s end can cause a huge impact.

Search Tools

Information should be easily available. An internal search tool can be most helpful which you can add to your site. The visitor can enter the query in that search box, and then, not in more than few seconds, he will get his answer.

Simple and Right Instructions/Directions

No doubt that your website should be creative and attractive, but you also have to keep in mind that it should be simple when it comes to giving Instructions/directions to the visitors. The directions/instructions that you provide in your website should be in a simple way. If you try to be over creative in this, you might mislead your visitor or confuse him in a way that he switches to some other option. So, avoid being over creative when giving directions to your visitors. Use simple terms and icons and be clear while providing links.

Keep a Track through Breadcrumbs

When your visitors are browsing your website and are half the way, they might wish to find a way back to any previous level.  Breadcrumbs are horizontal texts of links which tell you about the locations. With the help of these breadcrumbs, the users can easily keep a track of the pages they have visited.

Site Map

A site map in a website helps a lot when the website has many sections. If the visitors are able to access this map, it becomes a lot easy for them to navigate through website easily.

Easier Website navigation is an important feature of any website, it helps the visitors to crawl your website smoothly and easier navigation helps in reducing the bounce rate of your website.

Microsoft released IE7 in 2006, and the subsequent version, IE8, in March 2009. IE8 offers a number of improvements in RSS, CSS and Ajax-based designs. The latest version offers support for various Web standards. IE8 supports Accessible Rich Internet Applications (ARIA) specification for enhanced accessibility in Ajax-based RIAs. All these factors make IE8 more flexible and easy to work with.

IE6 faces a number of compatibility issues in today’s Web design environment. It does not provide the transparency required in PNG imaging. There are different CSS styles applied for IE6, adding the woes to Web site designers. Also, IE6 does not support some of the latest CSS and HTML features. As a result, the Web site design does not produce the desired impact.

We could use JavaScript fixes for the transparency issues in IE6, as well as a number of fixes available for other issues. The question is: how long? Why not look for a whole new option instead of fixing the old ones? I think, it’s time to rethink our strategy and make a step forward in favor of higher versions.

With the popularity of Firefox, Mozilla and Google Chrome, there are more arguments in favor of upgrading the browser. Several leading developers have stopped supporting IE6. Google’s decision to stop supporting IE6 in 2010 has in a way encouraged developers to look for the new browser. With this announcement from the Internet major, developers are a bit relieved from the difficult task of fixing IE6 bugs in CSS. Popular Word press platforms like Woo Themes have already dropped their support for IE6. Many are likely to follow their footsteps to bring the wonderful results of today’s Web design applications to users’ Web sites. IE6 is also not the option for mobile applications developers like Apple’s Mobile Me.

The only good news for IE6 supporters is that the old browser still remains the favorite choice for several users. This leads to another question: Can IE6 still be the browser option for you? Well, it can be, if your Web site does not demand high levels of interaction with customers. You may wait till most users upgrade their browser. In this case, you will have to find out how much you lose and calculate the loss against the additional development time required to upgrade to IE7 or higher.

Many developers are reluctant to say ‘good bye’ to their favorite browser they have been quite familiar with. They admit there are developmental issues and compatibility concerns, yet they are willing to cope with it by applying fixes.

In light of so many challenges with IE6 and also with growing popularity of later version of IE, IE6 market share is dwindling with time. I would say now is the time that we start looking beyond IE6.