Monday, August 27, 2012

Five (5) cool new HTML5 text-level semantics elements

HTML5 adds to our web pages the new structural semantic elements like <header>, <aside>, <nav>, <section> and many other, which are pretty awesome. But what even more exciting are the new text-level semantics elements which change text visually without extra (and sometimes complex) coding. Below are the overview of five of them. Unfortunately only Chrome browser supports them in full today. 4 out of 5 work in Opera. Firefox and Safari support fewer, Internet Explorer 9 is on last place, and hopefully this will be changed in upcoming IE 10. Refer to the table of supporting browsers at the end of the post.


1. The "mark" Element


The <mark> tag is used to highlight or reference a run of text due to it's relevance in some other context. You can incorporate this tag into the search results page on your website or blog to enable your visitors to more quickly find the content they search for.


2. The "progress" Element


If you wish to define the progress of any task, such as weight-loss or project completion, consider using the new <progress> tag. You can specify the current and the maximum value.

Your download is 49% complete.

Code for this example:
49%


3. The "meter" Element


<meter> tag define the measurement value in HTML web documment.
Like the <progress> tag, the <meter> tag shows overall progress. You may consider using it on a multi-page survey or quiz, for example.

Your score is (21): F
Your score is (81): B
Your score is(91): A
Percentage meter: 

Code:
Your score is (21): F

Your score is (81): B

Your score is(91): A

Percentage meter: 



4. The "datalist" Element


The new <datalist> HTML tag allows you to create a list of data. Previously, you may have used a drop-down menu without anchor destinations to perform this function. The list appears similar to the text input and you can specify a list of values that appear when the visitor clicks the input. You may use this as a method to allow visitors to select an item from a list in a form. Try to type a car brand from datalist in the input field, e.g. BMW or Volvo:



Code:
  


5. The "details" Element


The new <details> tag in HTML is a handy tag that allows you to define details, such as a copyright notice, without using valuable real estate on your page. When used in combination with the <summary> tag you can show a summary that is clickable to reveal more details. An arrow denotes this section on a Web page.



Your Summary (click to expand or collapse).   Additional details go here.

Code:
Your Summary (click to expand). Additional details go here.

Enjoy!


UPDATE: As of September 5th, 2012 here is the table illustrating the major five browser support on my Windows 7 desktop:


Browser
<tag>Chrome 21.0Opera 12.02Firefox 15.0Safari 5.1.7IE 9
markyesyesyesyesyes
progressyesyesyesnono
meteryesyesnonono
datalistyesyesyesnono
detailsyesnononono

And it's getting better! January 2013 (IE10 on Windows 8, other browsers are on Mac):

Browser
<tag>Chrome 23 Opera 12.12 Firefox 17.0.1 Safari 6.0.2 IE 10 
markyesyesyesyesyes
progress yesyesyesyesyes
meteryesyesyesyesno
datalistyesyesyesnoyes
detailsyesnonoyesno
And if you want to see the comprehensive report of how well your browser supports HTML5 then visit this link: http://html5test.com/.

Thursday, August 23, 2012

Is it a problem of objective, or shoud UX designer know how to code?

Communication, understanding, and right message are very important from the beginning.

What I learned: have a strong and clear objective. Deliver it to right people.

Preface: I applied for UX Designer position in a large company. Then was given a call from HR, and during the conversation I mentioned that, yes, I can write the code on JavaScript. Follow up was the scheduling of a phone interview.

Phone ring… I was asked to open a link with some code editor window in browser. And the first question on the interview, which apparently appeared to be a strictly technical and coding interview, was:

- Are you familiar with JavaScript? Ok, write the code to implement event handling in JavaScript as if no implementation of event handling existed in JavaScript.
- Uh, what? What exactly in your mind?
- I want these two functions:
function addEvent(element, eventType, callback)
function fireEvent(eventType)
- Ok, we can create our own object and make these two functions be a public methods. Something like this:
function eventReadyObj() {}
eventReadyObj.prototype = {
    addEvent: function(el, eventType, callback) { },
    fireEvent: function(eventType) { }
}
var ourObj = new eventReadyObj();
But what exactly do you want me to do?
- I want this two:
addEvent(document.getElementById("foo_obj"), "foo", myEventHandler);
fireEvent("foo");
- I don't understand.
- [short tempered] What were you thinking applying for this position? If you not comfortable to program it's a wrong position for you. Good bye.

End of the interview and the story.

UPDATE: Found it!
AddEvent() solution was posted by Dean Edwards in his blog in 2005. http://dean.edwards.name/weblog/2005/10/add-event/.
This solution is the answer to the potential problems using addEventListener and attachEvent (in IE), including, among others, a potential memory leak, or unexpected results, due to their conceptual differences.
Dean Edwards is the guy who has created object oriented JavaScript framework, and made JavaScript his hobby and passion of his life.
But, seriously, why we have to understand how to invent a wheel? Today all major JavaScript frameworks, jQuery for instance, are resolving it very well.

Thursday, August 16, 2012

My Approach To Design

Here is my objective of what I do designing things, what makes me creative, productive, and helps to deliver an awesome result:

  • I am seeing myself as a pixel perfectionist with developer/technical background, and with the ability to understand the intersections of disciplines from multiple perspectives bringing the big picture to the table
  • I approach design with a simple, fun, and intuitive mindset.
  • I enjoy conceptualizing and designing clean interfaces.
  • I love simple, usable interfaces and appreciate the hard work that goes behind creating them.
  • I love to see my work come to life in front of a large audience.
  • I subscribe to the Less Is More (minimalistic) design philosophy.
  • I solve complex problems and drive company’s products experience forward.
  • I design simple experiences that delight users.
  • I am taking business requirements and translating them into customer experience requirements. I visualize them.
  • My goal is true innovation to help end users with sincere empathy.

Design is an iterative process intended to ultimately improve the quality and functionality, where the needs, wants, and limitations of end users of a product are given extensive attention at each stage.