A simple graphical representation of my portal’s Live Chat with a Doctor feature…

Four principles of Design: Balance, Emphasis, Rythm & Unity. Below are some tips on the same.

Read the rest of this entry »

Marrisa Mayer, Google’s Vice President (Search Products & UX) talks about how Google works at Google I/O Developer Conference. There are lot of things which we don’t know run in backgrowund when we search on Google. Marrisa keynote goes in detail from User Behavior to Why Google’s homepage is so small & simple.

Via: Digital Inspiration

A demo of an experimental UI for Mobile Firefox by Aza Raskin, Head of UX for Mozilla Labs. Excellent, it is… Zoom, Pan, Throw… Aza posted some prototype concepts for the Firefox Mobile UI/UX.

The user interface shown in the video is a working prototype and will change, but there are some worthwhile concepts—some borrowed from Apple, some borrowed from Firefox. The mobile browser is built for a touch screen and allows scrolling with a flick of the mouse like on the iPhone (although it is single-touch, not multi-touch). The need to type is minimized by displaying any number of pre-defined buttons at appropriate moments, such as “search Google”, “send email,” and “map this.”

Via: TechCrucnch / Mozilla

Well, I love technology in general and yes, I’m going to one of first who buys iPhone 3G when it comes to India. Being an AirTel customer, it is pretty good that I don’t need to change my existing number to move to iPhone 3G, earlier with news that Vodafone will be launching it, I assumed that I might have to move to Vodafone!… And again that updating contacts, new number stuff!

iPhone 3G will come around October this year in India. Earlier there was a news in media that Vodafone will be launching iPhone in India. But it is confirmed now via the PR on Apple web site  that AirTel will be launching iPhone 3G in India later this year. I guess Vodafone will be also launching iPhone 3G for their customers too later this year, but it is not confirmed yet.

Soon customers will be able to purchase iPhone 3G at Airtel Relationship Centers. Details of pricing and availability will be announced at a later date. Airtel customers who wish to receive more information on iPhone 3G can send an SMS with keyword "iPhone" to 54321

More: Press Release by Apple

Found something more sweeter than the simple CSS-only Horizontal Bookshelf I posted last week. Mike wrote a versatile 1kb horizontal accordion script can be used for menus.

The front-end mark-up

   1: <ul id="sm" class="sm">

   2: <li><img src="images/1.gif" alt="" /></li>

   3: <li><img src="images/2.gif" alt="" /></li>

   4: <li><img src="images/3.gif" alt="" /></li>

   5: <li><img src="images/4.gif" alt="" /></li>

   6: </ul>

To build the accordion call the function below onload…

   1: slideMenu.build('sm',200,10,10,1)

Demo & Download @ Mike’s Blog

I found a CSS Gallery somewhere on the web few days (I can’t find the link to that site, If found I will update the link here). It was pretty simple & starlight forward CSS to build an image gallery. Recently, I needed to put all supporting articles on BabyMagic in an easy navigation, Modified it a bit and out it under a rounded DIV’s. I wanted to create a bookshelf kind of UI so that anyone can easily navigate through the documents. A live demo is up, click the image at the end of this post see the demo. The good thing about this CSS Gallery is there’s no JS/AJAX, all pure CSS sweetness & it looks great! All the used images can be downloaded at Demo.

Here are the CSS & XHTML I used for it…

CSS for the Gallery

   1: #gallery {

   2:   padding:0;

   3:   margin:0 auto;

   4:   list-style-type:none;

   5:   overflow:hidden;

   6:   width:700px;

   7:   height:100px;

   8:   border:0px solid #888;

   9:   background:#fff url(../images/win_backh.gif);

  10:   }

  11: #gallery li {

  12:   float:left;

  13:   }

  14: #gallery li a {

  15:   display:block;

  16:   height:100px;

  17:   width:24px;

  18:   overflow:hidden;

  19:   float:left;

  20:   text-decoration:none;

  21:   border-right:1px solid #fff;

  22:   cursor:default;

  23:   }

  24: #gallery li a img {border:0;

  25:   }

  26: #gallery li a:hover {

  27:   background:#eee;

  28:   width:100px;

  29:   }

CSS for the Rounded DIVs

   1: .search_gallery {

   2:     text-align:left;

   3:     width:730px;

   4:     margin-left:35px;

   5:     position:relative;

   6: }

   7: .search_gallery .head {

   8:     background-image:url(../images/babytop.gif);

   9:     background-repeat:no-repeat;

  10:     width:100%;

  11:     height:35px;

  12: }

  13: .search_gallery .body {

  14:     background-image:url(../images/babyrepeat.gif);

  15:     background-repeat:repeat-y;

  16:     width:100%;

  17:     height:100%;

  18:     text-align:left;

  19:     padding-left:0px;

  20:     padding-right:0px;

  21: }

  22: .search_gallery .foot2 {

  23:     background-image:url(../images/foot1.gif);

  24:     background-repeat:no-repeat;

  25:     height:16px;

  26: }

XHTML for the Gallery

   1: <div class="search_gallery">

   2:     <div class="head"></div>

   3:     <div class="body">

   4:

   5: <ul id="gallery">

   6:

   7:         <li><a href="suppdocs/newborn.html"><img src="imagewin00.gif" alt="Sample Alt Text" title="Sample Title"/></a></li>

   8:

   9:         <li><a href="suppdocs/breastfeeding.html"><img src="imagewin1.gif" alt="Sample Alt Text" title="Sample Title"/></a></li>

  10:

  11:         <li><a href="suppdocs/breastfeeding_tech.html"><img src="imagewin2.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>

  12:

  13:         <li><a href="suppdocs/changesinbody.html"><img src="imagewin6.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>

  14:

  15:         <li><a href="suppdocs/comonprobs2.html"><img src="imagewin5.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>

  16:

  17:         <li><a href="suppdocs/comonprobs.html"><img src="imagewin4.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>

  18: </ul>

  19:

  20: <div class="foot2"> </div>

  21:   </div></div>

Rob Christensen from Adobe Labs has written a great article on Six must-see Adobe AIR Applications (AIR; formerly code-named Apollo).

The goal of Adobe AIR is to make it very easy to build desktop applications with the skills and technologies web developers are already familiar with such as HTML, JavaScript, AJAX, Flash, ActionScript and Flex. Just as Flash and HTML are designed to run the same on different operating systems, the objective of Adobe AIR is to extend that same concept to desktop applications.

Once the AIR runtime is installed, the same file can be installed on a Mac or Windows (Linux coming soon). Applications built using Adobe AIR have read and write access to the local file system just like a native application. Other features include local SQLite database, drag’n’drop between applications, clipboard support, a simple and painless install, native file pickers, code signing, support for embedding PDF’s and more. Since a web browser is built-in (WebKit), you can also use your favorite AJAX libraries to build applications entirely in HTML and JavaScript. Or, if you want more creative control, you can use Flash and Flex. There are several tools for building AIR applications including Dreamweaver CS3, Aptana (open source), and Flex Builder 3 (public beta). Since the command line tool for building applications is included in the AIR SDK, you can technically use whatever your code editing tool you’re comfortable with.

Rob Wrote: “Since the alpha release of Adobe® Integrated Runtime (AIR; formerly code-named Apollo) on March 19, dozens of next-generation rich Internet applications (RIAs) built on top of the Adobe® AIR™ runtime have been designed, developed, and distributed across the Internet. Internally, the development teams have been inspired by the imagination, creativity, and resourcefulness reflected in the Adobe AIR applications released so far.” …. more»

Rob listed 6 AIR applications, which are:

• Twitter | Download Twitter
• kuler desktop | Download kuler
• Fresh | Download Fresh
• Finetune Desktop | Download Finetune Desktop
• DiggTop | Download DigTop
• SearchCoders/Dashboard | Download SearchCoders/Dashboard

One more recently launched AIR Application I just saw is Pownce by Digg’s Kevin Rose.

Rob’s Article | Adobe AIR | AIR SDK | More AIR Apps

Make sure you don’t walk around without a properly formatted Head. While we cannot ensure that Google will properly index the contents of your brain, these earrings could help. Be W3C verified. Always close your tags!

Sterling silver earrings engraved with “<HEAD>” on one and “</HEAD>” on the other. They measure roughly 1/2″ wide and 27/64″ high, with an overall length of 1″ including the ear wire…

…I wish I had a HTML girl… lol

Via: Digg » Esty