The HOME and END keys move to the top and bottom of the document instead of start or end of the current line as expected. The HOME and END keys lay dormant on the keyboard, because the need to move to the top or bottom of a document is, like -ALMOST NEVER !!!
Now, the shortcut key to the start or end of the current line in Mac OS is the CMD+RIGHT/LEFT ARROW shortcuts.

Too bad, these are not as easy to remember, oh well.

So anyway, if you’re going MAD like me trying to figure out a quick “end of line” key now you know. Hope this helps ! : )

Tags: Usability, User Iterface Design, bbEdit Tips by admin
No Comments »

Just a note in case your pulling your hair out. If you have a form that for all intents and purposes SHOULD be working but does not allow user input in a text field then perhaps this cold be your problem.

Try taking a look at the CSS on the element following the form. In my last encounter with this problem, it was a <p> that followed a form within a div.

The <p> had  a CSS declaration of float:left and was inside a div that was floated to the right.

Tags: CSS, Uncategorized, User Iterface Design by admin
No Comments »

I do not often have a use for the select element in front end web design. In this case, however, I was creating a user interface for a back end product control panel. It needed to be very compact with a lot of options packed into a small place. I ran into a problem when I needed to group four select elements together. The select elements all needed to be set to multi. Everything was fine with the exception of Internet Explorer 7 (big surprise!). IE would “leak” the contents of the select element outside of the element spilling into the surrounding div whenever it was floated in a div. I have not yet discover the exact conditions under which this happens as I was in a time crunch.

I spent about 20 minuets searching the Internet for someone who had come across the same problem but found nothing. So I thought I had better post how I decided to deal with this. Before I go on, I would like to mention that I did find a very good post by Nicholas Rougeux, called “Check it. Don’t select it“  . It is worth a look as it may be a better alternative in your case.

Cutting through all the “chase”, it boiled down to a rather simple fix. The only thing I could do was to encase the select multi in a div that had overflow:hidden. Note that this is not the setting of overflow:hidden on the select element set with multi. The overflow:hidden setting is on the div that immediately surrounds the select element set to multi. In this way, the garbage data that ie was leaking out from the element would be hidden away from view.

So, for what it’s worth, I hope this little post will help someone out there who is suffering from the woes of Internet Explore. Oh, and if you have any answers or better solutions, by all means contact me. I’m happy to share and be enlightened.

Tags: CSS, User Iterface Design, Web Design by admin
No Comments »

If you are implementing AJAX, you will likely run into the need to change the functionality of a button dynamically. There is not a whole lot out there on how to quickly accomplish this so here is a simple explanation.

Typically, you have an element such as an “input”, “a” or “select (options)” that has an attribute of “onClick”, “onMouseOver” or “onChange” with a value of some function that will execute upon the event represented by the attribute.

UPDATE: This has been changed to accommodate ie. The following way will work in both Firefox and Internet Explorer:

button_element.onclick = function() {doSomething();};

Thanks! to this post. (note: the answer is at the bottom of the post after some discussion.) Thanks for sharing

To assign a new value to the attribute, you need to identify the element you want to change like this:

elem =  document.getElementById(”myElementId”)

Then simply assign the new value to the attribute like this:

elem.attributes["onclick"].value = “myUpdatedFunction(’My parameter’)” ;

Now, if someone clicks on the element, the new updated version of myUpdatedFunction() will be called. Notice that you can even pass a parameter to the function this way. Just be sure to nest your quotes properly.

This method will also work for other attribute types such as onMouseOver, onChange an so on.

I hope this helps.

Tags: AJAX, User Iterface Design, javaScript Tips by admin
No Comments »

Recently I had a little problem stump me while designing the back end of a commercial site. The back end user interface uploads rather large image files so that the files can be processed for ‘Zoomify’( a fast way of showing a highly detailed zoomable image). After making sure the process was secure, I also needed to change a few settings in the PHP ini file in order for the system to allow files sizes of over 2 megs. All was working great on the local testing server. [Read more →]

Tags: PHP, User Iterface Design by admin
No Comments »

In web design, it is important to guide the user’s eye. Without a sense of “flow” a feeling of frustration takes over creating a negative experience. The art of subtly, and sometimes not so subtly, guiding the viewer’s attention is referred to as Precedence.

Since web pages are, for the most part, about the users getting information, how the information is presented is of great importance. There are several ways to do this, namely, [Read more →]

Tags: Usability, User Iterface Design, Web Design by admin
No Comments »

If you have ever spent a long time working on a design, you have probably noticed that after a while you may feel there is something “not quite right” about what you are working on but you just can’t seem to put your thumb on it. In most cases, this is because you “intuitively” know that something is wrong. But the image of what you are working on is “burned” into your retina. The image that is before you has become more dominant than that of your mind’s creative eye. I have discovered a little trick from my days as a fine artist to solve this problem. [Read more →]

Tags: User Iterface Design, Web Design by admin
No Comments »

Web 2.0 is a blend of new technologies that provide a much more rich and robust user experience. There are 3 main Components to Web 2.0 as described by Andy Gutmans, Co-Founder of ZEND.

RIA (Rich Internet Application) Andy Gutmans says RIA is “…how we bring the experience from the desktop into the browser.” What this means is this. You may have noticed [Read more →]

Tags: Usability, User Iterface Design, Web Design by admin
No Comments »

I frequently peruse for tidbits of inspiration. There are so many more beautiful, competent site designs than there used to be.  Setting aside a nice design and well thought out code, there is a common thread to be found that ties all of them together. They are all new.

Along with site design that is lean and beautiful come a few frustrations, however. Many designers find that after publishing an elegant user interface, they return to their client’s site a few months later only to find it cluttered up with gaudy graphics and inappropriate colors.

One of the ways to keep this phenomenon under control is by providing good documentation. [Read more →]

Tags: User Iterface Design, Web Design by admin
No Comments »