Web Usability & Website Optimization

Web Usability and SEO
A blog on » Web Usability   » Website Accessibility   » Search Engine Optimization (SEO)

Tuesday, January 15, 2008

UXM and Me - The Journey so far, back to blogging

It's been a long time I couldn't blog and was really missing it. I hardly had any time for it because of my tight schedules in office and rest of the time playing with my new-born baby. Working for UXM Satyam was really great and I admit that I learned a lot in Usability space and now know a lot of guys in this area. The journey so far with UXM (User eXperience Management) was fascinating but sadly now it has come to an end, I have decided to move on with something of my own. Hopefully I would be able to give little more time to blog and do lot things in RIA area, but only if my daughter allows me :)

Labels: , , ,

Wednesday, September 26, 2007

jQuery

It is cool and amazing. jQuery is a light weight JavaScript library that does some awesome jobs in event handling, animation and Ajax interactions on a HTML file. They call it "The Write Less, Do More" JavaScript library which can do wonders if at all you are bothered about code optimization and adding some cool effects to your webpage. It is little complex but small and very powerful, lets take a look at following code:

$(document).ready(function() {
$("#Jmenu ul").hide();
$("#Jmenu li").filter("[ul]").hover(
function(){$(this).children("ul").show("slow");},
function(){$(this).children("ul").hide("slow"); });
});
The first line gets it ready for the Action. The second line searches for ul structures inside the parent ul with id=Jmenu and hides em all. The third line is the mouse over function on parent li nodes. The fourth line finds out if the mouse hovered li has child elements (ul) and if it has then shows them slowly (cool show effect) and the fifth line hides these elements again on mouse out. Don't forget to add jquery.js file in your html file, it can be found on their site. Now if I had to write the same code using typical JavaScript it would be hundreds of lines of code to get the same effect. That was just a small example of what jQuery can do, needless to say it can do many wonderful things that you might not have thought JavaScript can do.
jQuery programmers and enthusiasts have come up with lot of Plugins and the repository can be found at: http://jquery.com/plugins/
jQuery is happening and big thing, if you are a UI programmer, get acquainted with it, you will love it.

Sunday, September 23, 2007

Accessible DHTML menus (with Keyboard support)

I am a fan of DHTML menus. Dropdown menus like suckerfish as discussed on alistapart adds great value to the page. They are not typical javascript menus but HTML and CSS based menus that works on all modern browsers and with small javascript they will work on older versions too. And yes if you disable the CSS they will still work because of ul-li structure in HTML which will still show the links on the HTML page.
Good on Accessibility part, right? but hold on here, despite so many claims of these type of menus being highly accessible, they are NOT and two most accessibility disadvantages of them are:
1. Disable Javascript alone and they won't work in IE6.0 and below and may be other older browsers too.
2. These menus lack keyboard support, very important for users with mobility problems and those who really don't bother to use mouse, I am sure many are there, atleast in IT industry.

If we forget first problem and assume users will use modern browsers, we still have to solve the second one and give user freedom to use keyboard for navigation. jQuery is the solution I found for this problem. We will discuss more about jQuery and how powerful it is in next post. FatFish from pfirsichmelba is one such example for DHTML menus with jQuery that adds support for keyboard and here is the demo http://pfirsichmelba.de/artikel-scripts/dropdown/horizontal.html
So next time you are building a accessible menu using DHTML don't forget to add keyboard support.

Tuesday, December 12, 2006

Float:left does not work in Firefox/Netscape

HTML, CSS tips and tricks #II

The code might be something like:
<div>
<div id="”left”"> test text left or image</div>
<div id="”right”">test text right</div>
</div>

and style with properties:
#left {width:30%; float:left;}
#right {float:right;}
everything is perfect and works as expected in Internet Explorer, then what’s wrong with Firefox/Netscape?
There’s nothing wrong, IE is acting Smarter, it actually calculates and considers the width for ‘right’ div to be 70% but Firefox or Netscape takes it to be 100% which I think is logically correct as if we don’t specify the width=100% that means we assume the browser considers it to be 100%, and the same thing is happening here in case of Firefox and Netscape.

Well, now do I need to tell the solution? Pretty simple, assign width preferable little less than 70% e.g. 68% and everything will work as you want in Firefox, Netscape as well as IE.

Wednesday, December 06, 2006

text-align:center works in IE but not in Firefox

HTML, CSS tips and tricks #I

When things work in IE as we expect, we presume that it’s perfect and should work in other browsers too. text-align:center; or text-align:right; properties for layout works well in Internet explorer as we want but it doesn’t work in mozilla-family of browsers, why?

Well there is nothing wrong with Firefox or Netscape but something with IE, read the property again, text-align must be for alignment of the text inside an element and not the alignment of that element itself, right? This is why Firefox/Netscape will not align the element but the text inside it, and that’s perfectly alright! But IE on the other hand uses this property to align elements as well as text inside them to specified location, which is logically wrong as far as the alignment of elements is concerned.

Well anyways it works in IE, but then what is solution for Firefox/netscape if you want to align elements in the center/right?
It’s very simple, use margin:auto; (all margins top, right, bottom, left would be adjusted automatically) or use margin-left:auto; and margin-right:auto; to align the element in the center and use only margin-left:auto; to align the element to right.
Isn’t that logically correct? It is! It works for IE too.