Houston we have a problem. Many of today web interfaces lay on :hover controls to keep the clutter to a minimum. As you may know, iPhone/iPod Touch as well the iPad lacks of :hover event so you should figure something else to preserve the same functionality. There are some solutions but most of them have an ugly implementation and the user experience suffers.

DOWNLOAD SOURCE

*use mobile Safari or any Webkit browser like Safari/Chrome.

Build an iPhone like Table View with HTML/CSS

So we want to create a Table View like the one in the iPhone SDK but with some custom actions. Let’s supose it’s gone be used for displaying the latest articles in our iPhone web app. It will be a unordered list with the items used as rows where we show the article title and a few meta informations like date and author. The actions are there but for the moment those are hidden.

Most of the CSS is basic, only the -webkit-gradient can give you headaches if you never used it before. Read more on Webkit Gradients. It’s cool to create gradients from CSS without images, faster and easier to update.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="table_list">
    <li>
        <div class="actions">
            <a>edit</a>
            <a>settings</a>
            <a>other action</a>
            <a>delete</a>
        </div>
        <div class="title"><a>Phasellus ut lorm aci nibh tincid uniteye convallis.</a></div>
        <div class="meta">07/01/10 by Sebastian Tibichi</div>
    </li>
</ul>

CSS

1
2
3
4
5
6
7
8
9
10
11
#table_list{ line-height:20px; font-size:11px; color:#999; border-top:1px solid #ddd; margin:0 -10px 20px; clear:both;}
#table_list li{ background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), color-stop(0.5, #fafafa), to(#eee)); height:40px; -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,1); border-bottom:1px solid #ddd; padding:9px 41px 9px 10px; position:relative; overflow:hidden;}
#table_list .current{ background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffe), color-stop(0.5, #ffe), to(#ffc));}
#table_list .title, #table_list .actions, #table_list .meta, #table_list .t_meta{ height:20px; font-size:15px; white-space:nowrap; overflow:hidden;}
#table_list .actions{ display:none;}
#table_list .actions a{ color:#333; margin-right:10px;}
#table_list .meta, #table_list .t_meta{ font-size:11px;}
#table_list .meta a, #table_list .t_meta a{ color:#999;}

Add some pure CSS3 icons

I like to design minimal interfaces without images and CSS3 makes it easier to code even icons. We need two for each end of the row that when pressed these should show/hide the actions.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul id="table_list">
    <li>
        <div class="icon"><span class="vr"> </span></div>
        <div class="actions">
            <a>edit</a>
            <a>settings</a>
            <a>other action</a>
            <a>delete</a>
        </div>
        <div class="title"><a>Phasellus ut lorm aci nibh tincid uniteye convallis.</a></div>
        <div class="meta">07/01/10 by Sebastian Tibichi</div>
    </li>
</ul>

CSS

1
2
3
4
5
6
#table_list .icon{ width:30px; height:40px; margin-top:-20px; position:absolute; top:50%; right:5px; overflow:hidden;}
#table_list .icon span{ background-color:#999; width:4px; height:16px; position:absolute; top:12px; right:13px;}
#table_list .icon .hr{ -webkit-transform: rotate(90deg);}
#table_list .current span{ background-color:#ccc;}
#table_list .current .vr{ display:none;}

We’ll create the plus (+) and minus (-) signs with CSS instead of using the font characters because these will look sharp and awesome this way. But not least we’ll learn how to rotate an object with CSS. The example is build for a Webkit browser so we’ll only use the -webkit-transform: rotate(90deg) to rotate our vertical bar and here’s the plus sign.

A little jQuery magic and the recipe is complete

For now we have the HTML and CSS but why nothing is happening? It’s time to spice up the interface with some smart jQuery effects. The code is simple and easy to understand but it makes the user experience alot better.

So when the plus or minus signs are pressed we want to slide down the actions but still keep the user in context and let him know what title had been pressed by adding a yellow background.

HTML

1
2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="misc.js"></script>

JS

1
2
3
4
5
6
7
$('#table_list .icon').click(function(){
    var icon = $(this);
    icon.parent().toggleClass('current');
    icon.siblings('.meta').toggle();
    icon.siblings('.actions').slideToggle();
    icon.siblings('.title').toggleClass('t_meta');
});

Code explained: If the plus icon is pressed we select the parent (the <li> tag), highlight it by adding the class ‘current’ and show the minus icon instead. We do some selections, getting the siblings by class name and applying different effects to achieve de desired animation. With the minus icon we’ll do the reverse.

If you modify the code keep in mind that the touch events are not currently supported by jQuery .live().

*use mobile Safari or any Webkit browser like Safari/Chrome.

Now is your turn to tell the story: what methods do you use to declutter iPhone web interfaces without :hover support and what do you think about this one?

Further reading and help:

Tagged with: , , , ,