February 28, 2012

CSS 4? Really? CSS 3 isn't fully released yet! What on earth is going on here?

It all started when I was fooling around with GIMP,
the extremely powerful free graphics editor. I took a public domain
image, re-sized it, gave it a transparent background and then added a
perspective shadow.

It is beautiful.

I wanted to see the image in "action" so I put it on a web page. But
because of the way HTML elements are rendered, there was nothing behind
my gorgeous image to demonstrate the transparency. I could have used a
background color but instead I gave the image an absolute position and
positioned it over a button:

It looks 3-dimensional but you can't click on the button with the
mouse. The transparent part of the image is like having a sheet of
glass over the button. You can tab to it and use the space bar but it's
really not useable as it is.

I recalled reading about the CSS pointer-events property. I assigned it to the image and voila! It worked…at least on FireFox. IE hasn't implemented this feature yet.

Here is a jsFiddle that shows it in action. If your browser supports pointer-events, you will be able to click the button:

February 20, 2012

This article is going to explain that, what User Experience Design and what User Interface Development actually entail.

What is User Experience (UX)?

User Experience is all about approaching applications as the user.
When a user comes to your website, how do they know what is important
and where to find the things that they are looking for? If they are
filling out a form, do they know that their first name is required? If
they don’t fill it out, how can they be notified that they must fill it
out before moving on without losing everything in the form? Are things
that belong together grouped together in a way that makes sense? These
are the kinds of questions that user experience development asks.

The answers are not always as obvious as you might think. Why else
do so many people have such a hard time using well-known web
applications like Facebook and MySpace? What is shown, what isn’t
shown, where they are shown, the relationship of one item to another –
these decisions can make or break the ease of use for your application.

There is also a level of psychology involved in the process. A 75
year old man may interact with a website completely differently than a 7
year old girl and have completely different expectations wrapped around
their actions. The perception of how things should behave is formed by
observing how other similar things have behaved in the past. For
example, when you scroll over a link, you expect the cursor for your
mouse to change and become a pointing finger.

This is something that
has been ingrained in our expectations from visiting thousands of other
websites with the same behavior. With a line of CSS, it’s possible to
make the cursor something else when you scroll over a link, but it
breaks with user expectations and makes them uneasy, unsure of what
their actions will result in and unable to use your application
properly. Similarly, as AJAX and AJAX-like JavaScript becomes more and
more commonplace, it is important to show the user that the objects that
trigger AJAX functions are “links.” This is again just a line of CSS,
but it makes all the difference where the use is concerned..

What is User Interface (UI)?

A user interface is what users see when they access an application. A
user interface designer may be someone who simply designs the look and
feel of an application by creating wireframes and mockups of the final
product or they may be heavier on the development side. Often a user
interface developer will have an array of skills in client-side
technologies such as JavaScript and JavaScript libraries such as jQuery,
jQuery UI, EXT JS, YUI, Prototype, or others.

User interface development ties in closely with user experience
development in that the user is the end-goal in both situations, which
means that simplicity in design is paramount.

Subscribe The Blog

Motto of Tech Impulsion

"AComprehensive technology blog with great articles, how-to's, how's on all things related to computer, personal technology, software and useful web apps.Purpose of this blog is to help you take maximum advantage of the software tools ,Apps and web technologies."