User Experience for Mobile and Desktops

Positioning DIV to the center of Browser Viewport Sometimes I write some JS code to prepare my HTML mockups. In this post I am describing the step-by-step approach on how to position a DIV to the center of browser's viewport. Case Assume that you have a DIV and you want to show it upon clicking a link or button. And that DIV must appear exactly on the center of the browser's window. Technically browser's display area is called "View Port". So our aim is to display a DIV to the center (origin) of the view port. How to do this? 1. Create the DIV. 2. Specify CSS properties 3. Write a few lines of Javascript code to position the DIV 4. Insert an action "onClick" to a button or link in the HTML. Step 1 Write the HTML code for the UI and enclose the code chunk with a DIV. Specify some valid ID for the DIV. For example "AddUserDialog". Step 2 A DIV element, by default will be displayed inline. A dialog box or some other "windowed" UI require...

Improving RankQuest.com - HTML Validator tool UI Following my previous post about Improving User Experience in 2 hours, here is another UI which I designed for Rankquest.com’s HTML Validator tool. RankQuest is a great site for SEO Techies. They offer good articles, and some cool tools that are really useful for website managers and developers. HTML Validator HTML Validator is one such simple tool, which uses HTML Tidy in the back-end. Their front-end UI is pretty basic and the results closely follow the Tidy’s result pattern, which is difficult to read and grasp the overall result. My UI suggests a simple dashboard which says whether the URL given is OK or BAD using a single icon metaphor. And within a single line it lists the number of errors and warnings. Below the dashboard, there comes the RankQuest HTML Scanner. This is my idea of showing “where the error is” instead of a lenghty “Line 1 Coloumn 32: erroor”. This precisely gives the visual location of where the error is. A u...