Friday, June 18th, 2010

Scaling UI controls appropriately on the mobile Web

Category: JavaScript, Mobile, Usability

<>p>Using the mobile Web with modern devices that give you the “full Web” and allow you to zoom in and out on the page (if zooming hasn’t been turned off of course).

Sam Stephenson (of Prototype and 37Signals fame) has taken on the problem of the sizing of controls. If you zoom out, normally, controls are smaller in the same proportion as the rest of the content. In reality, you want nice large controls that are tap friendly. This is where his device scale technique comes in:

He also talks about how he takes hover elements and makes them tappable to get the same item shown or hidden.

Related Content:

3 Comments »

Comments feed TrackBack URI

Is this the original link?
http://37signals.com/svn/posts/2407-device-scale-user-interface-elements-in-ios-mobile-safari

Comment by Fyzbo — June 18, 2010

I love that touch dialog/menu shown in the screenshot. is there any plugin to do that?

Thanks!

Comment by javis — June 18, 2010

If your contextual commands are to be scaled when zoomed, oughtn’t their contexts also be scaled when zoomed? In a sense this becomes an argument for an interface which can’t be zoomed, or only unimportant elements to be zoomed (and then it raises the question why you’re displaying so many unimportant elements).

Comment by eyelidlessness — June 18, 2010

Leave a comment

You must be logged in to post a comment.