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>