UI Design | Usability | Icons | User Interface Design » Journal

iPhone Nano Mockup

Stephan — Tue, 15 Feb 2011 17:18:13 +0000

Analysts are speculating that Apple may unleash a smaller and cheaper version of the relatively expensive iPhone that should be launched in the fourth quarter. The design of the iPhone could be based on its iPod nano music player. Currently a lot of mockups can be found showing concepts of Apples answer to Android. Impressed by some ideas I designed an iPhone nano mockup on my own.

Basically I reduced the size of the screen and kept the home button as it is. Unlike some other rumors I don’t believe that Apple will abandon its main navigation element. The mockup also shows the multifunction sleep/wake button on top of the device and the volume buttons on the left side. There is still a front facing camera for e.g. video conferencing. Enjoy the result!

Update 3

This is my favorite version of the mockup. For better ergonomics I moved the home button up a bit. Additionally I created a side view of the iPhone nano, showing the home button and the SIM card slot.

Update 2

The new mockup shows the home button on the right side – here it’s a little bit bigger than in the previous mockup. Reducing the screen size and screen resolution is a serious issue, so I did not change it in Update 2 (this will also make life a lot easier for developers).

Update 1

I recently updated the mockup and designed a new one that considers the aspect ratio of the display. In the new mockup I moved the home button to the right side of the device. I think that could work!

Mäxchen (Mia) now available for iPhone and iPod touch

Stephan — Thu, 20 Jan 2011 05:37:58 +0000

Mia (also known as “Meiern” or “Mäxchen”) is probably the most famous party dice game and available for your iPhone and iPod touch. It is played with 2 dice and sometimes the rules force you to lie – so are you the better bluffer?

Requirements
Compatible with iPhone, iPod touch, and iPad. Requires iOS 4.0 or later.

Languages
German, English

Rules

Mia is played with 2 dice in a clockwise direction. Each player has to roll a higher dice value than the previous player. Before passing on to the next player the actual player has to meld a dice value. This value can be true or lied.

The upcoming player has 2 choices: Believe the passer, roll the dice and pass it on, announcing a higher value, or call the passer a liar and open the dice cup to check the dice value. Then either the unmasked liar or the wrongly doubting player gets a minus point.

The lowest roll are mixed numbers (31, 32, 41, 42, 43, …, 64, 65). Next come all the doubles (11, 22, …, 66). The highest roll is called ‘Mia’, 21.

If ‘Mia’ is announced, the next player has 2 choices: Believe the passer and get 1 minus point (this will start a new round) or not believe (the unmasked liar or the wrongly doubting player gets 2 minus points).

The player with the fewest minus points wins!

Features

Play together with up to 30 players
Enjoy the impressive 3D graphics and sound effects
Use the build in accelerometer and shake your device to roll the dice
Score: See the ranking and actual points of each player
Facebook Connect: Post the ranking to your Facebook wall

Simple Tooltip with CSS and jQuery

Stephan — Fri, 14 Jan 2011 08:22:58 +0000

Recently I was searching for a tooltip plugin that provides the possibility to show an “advanced” tooltip for each title attribute. “Advanced” means that it should support HTML formatting, like bold, italic or a simple line break. There are several powerful (and over-engineered) plugins out there (e.g. jQuery Tools), however they did not fulfill my requirements. So I did it on my own.

The tooltip should support mouse tracking (the tooltip moves whenever the mouse cursor is moving) and should consider the actual width/height of the browser window (the tooltip should not dissapear when it is near to the browsers’ borders). The code should be self-explanatory and easy adaptable. So lets take a look at the result.

Include actual jQuery version

First of all, go to the jQuery Website and download the lastest jQuery version. Then include it in the header of your html file.

[html]

[/html]

Now we can start with the tooltip script.

Writing the tooltip script

With jQuery doing a simple tooltip is very easy. First of all we need to call the function when the document is ready and add some event listeners. In this example the function works for all title attributes. Of course you can change this according to the jQuery API Guidlines. This is the basic structure of the code:

[javascript]
$(function() {
// Default tooltip settings
var offsetX = 15;
var offsetY = 25;
var TooltipOpacity = 0.9;

// Select all tags having a title attribute
$(‘[title]‘).mouseenter(function(e) {

// Get the value of the title attribute
var Tooltip = $(this).attr(‘title’);
if(Tooltip !== ”) {
// Tooltip exists. Assign it to a custom attribute
$(this).attr(‘customTooltip’,Tooltip);

// Empty title attribute (to ensure that native browser tooltip is not shown)
$(this).attr(‘title’,”);
}

// Assign customTooltip to variable
var customTooltip = $(this).attr(‘customTooltip’);

// Tooltip exists?
if(customTooltip !== ”) {
// Append tooltip element to body
$(“body”).append(‘

’ + customTooltip + ‘

’);

// Set X and Y coordinates for Tooltip
$(‘#tooltip’).css(‘left’, e.pageX + offsetX );
$(‘#tooltip’).css(‘top’, e.pageY + offsetY );

// FadeIn effect for Tooltip
$(‘#tooltip’).fadeIn(’500′);
$(‘#tooltip’).fadeTo(’10′,TooltipOpacity);
}

}).mousemove(function(e) {
var X = e.pageX;
var Y = e.pageY;
var tipToBottom, tipToRight;

// Distance to the right
tipToRight = $(window).width() – (X + offsetX + $(‘#tooltip’).outerWidth() + 5);

// Tooltip too close to the right?
if(tipToRight < offsetX) {
X = e.pageX + tipToRight;
}

// Distance to the bottom
tipToBottom = $(window).height() – (Y + offsetY + $(‘#tooltip’).outerHeight() + 5);

// Tooltip too close to the bottom?
if(tipToBottom < offsetY) {
Y = e.pageY + tipToBottom;
}

// Assign tooltip position
$(‘#tooltip’).css(‘left’, X + offsetX );
$(‘#tooltip’).css(‘top’, Y + offsetY );

}).mouseleave(function() {
// Remove tooltip element
$(“body”).children(‘div#tooltip’).remove();
});
});

[/javascript]

That’s it! Now you can change the default settings of the tooltip (offset of tooltip, opacity) as you like.

CSS styling

Finally we will need some styling information for the tooltip element. As you can see in the inline comments I added a note from where you can edit the stylesheet information.

[css]
#tooltip {
position:absolute;
z-index:9999;
opacity: .0;
filter: alpha(opacity=00);
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=00)”;

/* Edit from here */
width :auto;
background-color:#efefef;
border:1px solid #cccccc;
padding: 3px;
-moz-box-shadow: 2px 2px 11px #666;
-webkit-box-shadow: 2px 2px 11px #666;
}
[/css]

Result

Now you can use HTML formatting in your tooltip! Download and have a look at the complete example.

Demo: Simple Tooltip

$(function() {
// Default tooltip settings
var offsetX = 15;
var offsetY = 25;
var TooltipOpacity = 0.9;