“Mad Libs” Style Forms

Luke Wroblewski, Chief Design Architect at Yahoo! and author of “Web Form Design“, published a very interesting post about “Mad Libs” Style Forms and how he improved the conversation of vast.com by 25-40%.
This is how Luke tweaked the contact form:

Read the full post: “Mad Libs” Style Form Increases Conversion 25-40%
I wondered whether there is […]

Friday late night hacking

Pairing with Heineken on some cool stuff we will show you soon – live from Paris

Prost

Make your buttons look super awesome

Back in April, ZURB published the super awesome buttons to showcase what can now be done with CSS and RGBA. They are so awesome! They still look like images but loading speed and maintainability continues to benefit from normal HTML buttons. Below is what they look like:

Super-awesome-buttons-all

I started using these buttons in some of our projects and extended them to improve the cross browser compatibility. I added a nicer design for when the buttons get clicked, and removed the necessity to set to different background colors for different states of the buttons.

Here is how the even more awesome buttons look like, click’em!

| I’m just a link – Click me

This is how the css magic looks like

/* set an awesome color for the buttons */
button.awesome, 
input.awesome, 
a.button.awesome {
  background-color: #111;
}
/* Touch the rest at your onw risk. */
button.awesome,
input.awesome,
a.button.awesome { 

  font: inherit;
  background-repeat: repeat-x; 
  color: #fff;
  text-decoration: none; 
  position: relative; 
  cursor: pointer; 
  border: 0; 
  font-style: normal; 
  font-weight: bold; 
  line-height: 1; 
  
  padding: 5px 10px 6px;
  font-size: 13px;
  
  /* IE only stuff */
  border-bottom: 1px solid transparent\9;
  
  
  /* not all browser support these, but who cares? */
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25), -2px 0 1px rgba(0,0,0,0.25); 
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); 
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
  
  /* one image for all states 
     see http://www.alistapart.com/articles/sprites */
  background-image: url(awesome-overlay-sprite.png);
  background-position: 0 0;
  
  /* cross browser inline block hack 
     see http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *display: inline !important;
  position: relative;
  
  /* help IE to calm down a bit */
  zoom: 1;
  
  /*disable text selection (Firefox only)*/
  -moz-user-select: none;
}
/* hide selection background color */
.awesome::selection {
	background: transparent;
}

button.awesome:hover,
input.awesome:hover,
a.button.awesome:hover {
  background-position: 0 -50px; 
  color: #fff;
}
button.awesome:active,
input.awesome:active,
a.button.awesome:active	{ 
  background-position: 0 100%; 
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7); 
  /* unfortunately, Safari seems not to support inset yet */
  -webkit-box-shadow: none;
  
  /* IE only stuff */
  border-bottom: 0\9;
  border-top: 1px solid #666\9;
}

button.awesome.small,         input.awesome.small,          a.button.awesome.small 	        { padding: 4px 7px 5px; font-size: 10px; }
button.awesome.small:active,  input.awesome.small:active,   a.button.awesome.small:active	  { padding: 5px 7px 4px; }
button.awesome.medium,        input.awesome.medium,         a.button.awesome.medium         { /* default */ }
button.awesome.medium:active, input.awesome.medium:active,  a.button.awesome.medium:active	{ padding: 6px 10px 5px; }
button.awesome.large,         input.awesome.large,          a.button.awesome.large 	        { padding: 8px 14px 9px; font-size: 14px; }
button.awesome.large:active,  input.awesome.large:active,   a.button.awesome.large:active	  { padding: 9px 14px 8px; }

Turn a or a Link just by adding the ‘awesome button’ classes:

<button>button before</button> &rarr; 
<button class="awesome button">button after</button><br />
<input class="awesome button" type="submit" value="submit before" /> &rarr; 
<input type="submit" value="submit after" /><br />
<a href="#">Link before</a> &rarr; 
<a href="#" class="awesome button">Link after</a>



Link beforeLink after

Awesome Blueprint Plugin

These super awesome buttons play well together with the blueprint css framework. Simply get the files from github and put them in you blueprint/plugins folder. Works awesome.

Demo

You can find the latest version of the demo in the git repository or you can open it here.

Let us know what you think!

Stop wasting time – create Bug Tickets with Screenshots using Freshlog

I love bug reports with screenshots because you take one look and you know exactly what the problem is. There is no need to leave your ticket environment to reproduce the bug, you see it right there. You see the browser and you see the current site, so let’s start fixing!

But: I hate to attach screenshots to bug reports (don’t you?). Reason being, you need two tools to work. First, you have to create the screenshot, then you need to create a ticket and attach the screenshot to it.

Because creating and attaching screenshots is so frustrating, clients may not see the benefit in doing it, which results in tickets lacking screenshots and causes developers to waste time trying to understand a ticket, before being able to fix one.

The guys from freshlog.com created a neat solution for this problem: they simply combined ticketing and taking screenshots in one easy to use tool:

Welcome to agile bug reporting!

Take a screenshot, crop it, annotate it and upload it to a new OR existing ticket/to do within your favorite team collaboration tool like Basecamp, unfuddle or lighthouse. Simply enter you account credentials and ticket creation with attachments is only a keyboard shortcut away!

How to setup Freshlog for unfuddle

1. Add your unfuddle Account

Picture 7

This is what Freshlog looks like when you open it for the first time. It offers image hosting for your screenshots, however, you don’t need this feature for unfuddle as the screenshots will be attached directly to the tickets.

Picture 9

  1. Click on the Issue Tracker Tab
  2. Select https:// in the dropbox next to URL: (if you have a paid unfuddle account)
  3. Enter the subdomain of the unfuddle account you want to login
  4. Enter username and password of your personal account and hit save

2. Setup Preview as your default Image Editor

Picture 10

Click on the Application Tab and hit “Chose Editor”. You can use any editor you want but the build in Mac OS X preview application fits perfectly for screenshot annotations.

Note: You may need to enable annotations in your preview app:

Add-annotaction-to-preview

3. Take and attach a screenshots to a new or existing Ticket

Simply follow the video tour provided by Freshlog. The shown steps are the same for unfuddle.

Rotate Images and Stuff wit CSS only

Did you know you can rotate images (and all other html elements) by using nothing but CSS?

Simply add these CSS classes to your HTML elements for rotation in 90 degree steps.

  .rot0 {
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg);
    rotation: 0deg;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
  }
  .rot90 {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);
    rotation: 90deg;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
  .rot180 {
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg);
    rotation: 180deg;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  }
  .rot270 {
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }

You can also set the rotation origin for Firefox and Safari by using

  .rotate-me {
      -moz-transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
  }

Rotation for Internet Explorer works a little different as there is no rotation origin. The element is simply rotated and aligned with its new dimension, within the flow of the page.

Below is a proof for the concept of rotating an image and putting navigation tabs on the left site of the page. I’m sure there are plenty more useful things you could do, for example: rotating text to display the date of an artice.

Rotate-images-and-stuff-with-css

This example will work with gecko-based browsers like Safari and Safari Mobile on the iPhone, Firefox 3.5 and Internet Explorer 5.5 and higher.

ReCSS – AJAX friendly CSS testing

Back in the days when the web didn’t yet have a version number, David from dojotoolkit.org came up with a neat solution to reload your css without the need of reloading your page: ReCSS.

It’s just a simple bookmarklet that walks through all linked stylesheets and reloads them. This omits page reloads in order to test your CSS changes, very helpful for AJAX heavy sites. Here is what the code looks like:

javascript: void(function() {
    var i, a, s;
    a = document.getElementsByTagName('link');
    for (i = 0; i < a.length; i++) {
        s = a[i];
        if (s.rel.toLowerCase().indexOf('stylesheet') >= 0 && s.href) {
            var h = s.href.replace(/(&|%5C?)forceReload=\d+/, '');
            s.href = h + (h.indexOf('?') >= 0 ? '&': '?') + 'forceReload=' + (new Date().valueOf())
        }
    }
})();

This is one of the small things that makes my life easier, and I want to make sure that it does the same for you. Drag the following link to your Bookmarks toolbar and become a CSS rockstar: ReCSS