Category Archives: CSS

Website Design Guidelines for beginners

This post describes some basis points of website design for beginners.

Before start designing of a website keep the below points in mind.

1) Keep the raw file (e.g. psd, ai, cdr) in RGB format. Create the site design with the original dimensions (e.g. for 800×600=780, for 1024, 768=970).

2) Try to keep text and images separate. Avoid overlapping of separate elements.

3) Keep text content more than image.

4) Always use web fonts like: Arial, Helvetica, Times New Roman, Courier New / Courier so that design at execution won’t look different from raw file.

5) Put some textual content and links in bottom of every page (e.g. copyright, sitemap, ).

6) Usage of Headings is also good practice.

7) Avoid using lot of graphics or images that are hard to load, instead use a thumbnail to show and a new page (or popup) to view full image.

8) Headline plays a significant role in attracting customers. Hence use catchy phrases for the headline, it’ll work well.

9) The most important is the content. Relevant content is the best way to keep the visitors hooked up and more over buy what you are selling. Correct use of words and sentences not only attracts the prospects but also helps the search engines to crawl it easily. Proper content, with relevant use of keywords is a MUST.

10) Determine the site navigation and its appearance before start designing. Also keep in mind we must use text as navigation, in case text is not possible images can be used but they must be small in size(kb), so that it wont take time to load.(Refer to yahoo home page).

11) User must should know where currently in site he is, show this by a textual bar like YOU ARE HERE

12) Avoid using gradient images in html page background, because it conflicts with site content and images at different screen resolutions.

13) Determine html link style (mouse over, normal) color and size.

Advertisements

Remove yellow autocomplete textbox background caused by Google Toolbar in Internet Explorer

Hey guys,

Recently i ran into this problem, some users of my client’s website complaint that in some web forms the name and email fields comes have a yellow background which hinders the readability of the field.

After getting into depth details of the problem I came to knew that it happens only in Internet Explorer having Google Toolbar installed. In Firefox, Opera, Netscape it works fine.

This is a feature of Google Toolbar that it automatically highlights the fields (e.g. name, email etc.) in the yellow background color which facilitate the user to autocomplete the specified field.

Using some server-side and client side tweaks you can restrict the field to become autocomplete but Google Toolbar will still show the yellow background. The Google Toolbar feature overrides nearly all the server-side as well as client-side tweaks for the Name and Email fields.

Workaround:

To avoid the field’s autocomplete:

You can set the AutoCompleteType property in the Html tag of Textbox like:

<asp:TextBox ID=”txtemail” runat=”server” AutoCompleteType=”Disabled” Width=”219px”></asp:TextBox>

Some enumerations for the AutoCompleteType property are :

BusinessCity – City in the business category

BusinessCountryRegion – Country/region in the business category

BusinessFax – Fax number in the business category

BusinessPhone – Phone number in the business category

BusinessState – State in the business category

BusinessStreetAddress – Street address in the business category

BusinessUrl – Web site URL in the business category

BusinessZipCode – ZIP code in the business category

Cellular – Phone number in the mobile-phone category

Company – Business name in the business category

Department – Department in the business category

Disabled – AutoComplete feature is disabled

DisplayName – Name to display in the user category

Email – E-mail in the user category

FirstName – First name in the user category

Gender – Gender in the user category

HomeCity – Home city in the user category

HomeCountryRegion – Home country/region in the user category

HomeFax – Fax number in the user category

Homepage – Web site URL in the user category

HomePhone – Phone number in the user category

HomeState – Home state in the user category

HomeStreetAddress – Home street in the user category

HomeZipCode – ZIP code in the user category

JobTitle – Job title in the user category

LastName – Last name in the user category

MiddleName – Middle name in the user category

None – No category specified

Notes – Extra information in the form

Office – Office location in the business category

Pager – Phone number in the pager category

Search – Keywords in the search category

Please note the difference between None and Disabled enumerations.

But setting the AutoCompleteType property will only direct browser to not to give options for autocomplete, it doesn’t removers yellow background.

Remove Yellow background

Any code used to set the background color of textbox will fail in following conditions (regardless of run time or design time):

a) Specifying BackColor

b) Specifying background-color in CSS or Style attribute.

The one and only perfect way to do is :

a) Specify a CSS class for the textbox, e.g.

.txtNameStyle

{

font-size:12px;

height:13px;

border-style:none;

background-color: #666666 !important;

color:#ffffff;

}

b) Now declare the text box control so that it looks like this :

<asp:TextBox ID=”txtName” runat=”server” CssClass=”txtNameStyle” Width=”219px”></asp:TextBox>

Note:

The if the background is !important in Css-Style, the input is not considered by Google Toolbar. That’s all what we need.

Now the last step is to just test the page into Internet Explorer.

That’s all for this post, hope you will like it.
Please leave a comment for any help.

For more articles updates and sourcecodes please visit dotnetcoderoom