Acmeous Blog of Web Technology, Designing, Marketing, Blogging and Money Making

Showing posts with label User Interface. Show all posts

Thursday, October 13, 2011

How to Color Alternate Rows in a Table with JavaScript and CSS

Tables should be used only when you are actually representing tabular data. Yes, we know that. But by default tables are not so much usable unless we put some addons and make tables usable. One of the best ways to make tabular data usable is to color alternate row backgrounds with different colors so that users don’t get lost while looking into long set of data. This not only helps users to remain on a specific track but also helps them interpret data precisely without generating much visual noise.

You can checkout the Demo of Alternate Table Row Coloring here.

Here is a very simple JavaScript script which can transform any existing tables on a page into tables with alternate row color backgrounds. This scripts check for specific class for a table on a page and puts different classes for different <tr>.
You can simply copy the following code and paste into the <head> section of your page.

Sunday, July 17, 2011

How to Create a Link To Smoothly Scroll To The Top of a Page by jQuery

"Go to top" is a very popular link that we use to put into web pages when pages tend to be long and users always need to go back to the top of the page to avail the options. Users can obviously go back by scrolling up and up and up. But we can also provide them with an option at the bottom of a page, clicking which will automatically take the user to the top of that page.

The most natural and effective way to do it is to place a "quick link" or "inpage link" which should be linked to the ID of the topmost element on the page.

Example of go to top link on a webpage:

Wednesday, June 29, 2011

Gmail Launches People Widget - Another Enhancement of Gmail or Just an Useless Addon?

Ya as you may have already guessed I am an extensive user of Gmail and none of the enhancements in it goes unnoticed by me. So this time its a new widget from Google which caught my eye. Actually, it was presented in such a way that it should caught the eye, something usual with Google product updates.

People Widget - shows up your contacts, who are mentioned in the current email you have opened, in the right top corner of the mail chain or as Google would say conversation list. I can understand Google realized it very strongly that emails conversations are all about the people you are communicating with. So they are showing additional information about that contact of yours.

So what additional information Gmail People Widget is going to show?

Those additional information includes the following -

Friday, March 18, 2011

Differences Between Strict and Transitional DOCTYPEs

Attributes which are deprecated in Strict DOCTYPEs:

align (allowed on elements related to tables only, like - col, colgroup, tbody, td, tfoot, th, thead, and tr)

target

language

background

link

hspace

noshade

nowrap

bgcolor

text

vspace

vlink

alink

height (allowed on img and object)

border (allowed on table)

width (allowed on img, object, table, col, and colgroup)

name (allowed in HTML 4.01 Strict, not allowed on form and img in XHTML 1.0 Strict)

Wednesday, March 16, 2011

Gmail Changes Refresh Link to Button - A Notable Use Case for Information Architects

Now this time it is a relatively small change in Gmail that caught my eyes, but definitely it was not that small to remain un-noticed. Yes, the Refresh feature of Gmail. Frankly speaking I used this feature very less cause I was in a habit of clicking the Inbox link rather, and it was from the time when Refresh feature was not even available to Gmail.

Wednesday, December 22, 2010

Difference Between XHTML and HTML4

HTML is the Hyper Text Markup Language which is rendered by any web browser you use to visit any website or web application. Whatever programming language, whatever platform a website or web application uses, it drills down to HTML only for your browser. So HTML is the building block of the World Wide Web which has not seen much significant improvement during last 2 decades except the Extensible Hyper Text Markup Language - the XHTML.

Here are the very basic differences between HTML and XHTML -

1) All documents must be well formed and properly nested

The food is delicious - Correct.
The food is delicious - Wrong.

2) Elements and Attributes must be in lowercase

Saturday, January 10, 2009

Google Changes their Favicon Again

Yes, Google now changed their Favicon again. Last year at the end of May they changed their initial minimalist Favicon with that simple G in caps within a border of different colors of the Google logo. Then they came up with a more minimal design of the favicon with small g in blue and nothing else, which they said to be compatible for iPhones.

Monday, September 8, 2008

How to Design stylish variable width Web 2.0 Tabs Menu for your Web Applications

We use to see several types of navigation around different websites. Tabs are also one of the attractive navigation styles prevailing today. Thought they are stylish and useful to users, they never take up much of your real estate. But whenever you are creating tabs, you should not create fixed-width tabs. Then you will need to assign the maximum width to all items. That is space consuming and many times becomes ugly.

Hence you should design tabs which will take space as per the menu items. Here is how you can do it easily. You can create tabs just as in this image in few minutes. First you have to get the design as you want for your tabs. Now you need to slice them out to get these following pieces which will form your tab.
Here are two sets of tabs, one for inactive tabs and another for active tabs. You can have the third one to set on mouseover condition.

Sunday, August 3, 2008

Delicious changes look and feel and improves its Usability

Delicious has re-designed their service website with many cool looks and huge Usability features. It seems that Delicious has decided to take a hands on to their competitors as well.

Delicious has a bold new design that is more powerful and easier to use, along with a revamped search that's faster and more robust. It's also full of useful features that people have been requesting for years

- says Delicious.

Pages

Spread the word