Dynamic Typo

Using the overflow style attribute on the div tag is pretty common.  I used this on AroundCloud.Com to create a styled “listbox”.  I was surprised to learn the iPhone browser handles this in the most bazaar way.

The Problem:

I guess the first part of the problem is that if your user’s are browsing the site the iPhone OS2 or lower the overflow attribute is not supported.  If your user’s have iPhone OS3 or greater then you are in luck.  It is supported as a two finger scroll gesture.  Although supported, there no visual cue the user is has a scrollable area.  As the developer of the site I assume I could add arrows, signs, or something but this seems like an odd gesture to provide instructions for.

I guess this leaves the question of why does it act this way, what does it look like, and is there a solution?

The Facts:

1. Before iPhone OS 3 was released the div overflow tag didn’t work at all and simply displayed the content that was visible without the scroll.
2. iPhone OS 3+ Apple implemented a two finger scroll when a div with an overflow was found.

When reading the iPhone OS 3 has support for div overflows I was excited, I now didn’t need to re-write a section of my site for iPhone users.  But, what the heck is a two finger scroll?  Since this was a new one for me I figured I’d create an example.

The Example:

This div has overflow: scroll and will be a two finger scroll area Use the two finger scroll gesture anywhere the box is orange Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The Div Code:

<div id="example" style="border-right: black 1px solid; border-top: black 1px solid; overflow: scroll; border-left: black 1px solid; width: 500px; border-bottom: black 1px solid; height: 200px; background-color: #fa932f"> <p>Content Goes Here</p> </div>

How Does It Look?

What it looks like in your desktop browser?

What it looks like on your iPhone?

The Solution:

There really isn’t a, one size fits all solution.  Depending on the design of your site you might be able to use a HTML Select Tag, a list,  or a custom listbox style control.  For my project, I choice to implement an iPhone only experience using the IUI project’s framework to provide a native tableview look and feel. 

For me this was the right decision since provide a view based on the user agent is fairly straight forward with ASP.Net MVC.  You can read more about that here.

This is just one example of how the mobile web is impacting pretty common development practice.  The explosion of the mobile web will force us to look even designs we think are straight forward in new ways.

Got a great idea for an iPhone application? Have the perfect name? Well just remember the iPhone only allows you a certain number of characters to in your application name.

How many characters? I’m really not sure. So figured I’d fire up the emulator and try to figure it out.

The answer, your title can be somewhere between 12 and 14 characters. Since Apple’s font is not fixed, the width of the characters you’ve selected plays into the length.

For example, if you create an application with a name like “ReallyLongTitle”. You can see it re-formats the title to “Really…gTitle”. Since it is to long to display.

So let’s try a smaller name, such as “a thru m” all in lower case. You can get 13 characters in this format before it starts to re-format. I’m guessing you could get 14 characters if you just used the name iiiiiiiiiiiiii.

What is interesting is numbers seem to take up additional spaces. In the below example, I’m only able to get 12 characters without having the title re-formatted.

I’m not sure how Apple is handling fonts but, just comparing the sizes of the titles it appears when using numbers in your title they need one additional space.

I’m sure there is more documentation around Apple’s found and the rules for the maximum characters allowed, but I haven’t managed to track down that information yet. If you’re working on your next killer idea you might want to fire up the emulator and see how it handles your application title before spending to much time building your brand.

Please note the above is just a sample icons and is not licensed for distribution. If you use any images not created by you, please read the license carefully since many images have restrictions on use.

Like most developers I tend to be artistically challenged.  I’m not sure if it is a right brain verse left brain thing or if I traded my inner Van Gogh for dry erase whiteboard markers.  Anyway like most techies I feel more at home at the command line then in Photoshop. 

Unfortunately when developing an iPhone app battleship grey just wont cut it.  One look at Interface Builder, or any of the featured apps and you will know visual appeal is more of a requirement than an option.

Never to shy away from a challenge it is time to build my application icon.

Knowing that Apple has guidelines for everything I first wondered what format was required.  It ends up they actually need two images in different format.

1. The first image you need is a 57px by 57px png.  This image must be called Icon.png and is used in your mobile App Store listing.
2. Next you need a 517px x 517px jpg.  This image is used to list your application in iTunes.  Although your image must be in jpg format, the file is simply called iTunesArtwork with no file extension.

I recommend reviewing all of the details in the "The Application Bundle” iPhone Dev Center document.  You should also review the iPhone Human Interface Guidelines, and Creating Custom Icons and Images for iPhones for more details.

Given a lack of artistic talent I tried several “Online iPhone Icon Creators”.  They provided some beautiful 57px by 57px png icons.  The only catch was a 57px image no matter how good will not scale to a 512px resolution.

Having wasted a few hours on resolution issues, is seems best to create a 512px image then scale down to a 57px png.  This allows you to scale your resolution correctly.  Unfortunately to you are on your own in creating a 512px icon.  Below are a few Photoshop templates to get you started.

Handy Photoshop Templates 

• keepthewebWEIRD has a psd template for the 57x57 application icon available here.
• command-tab has a psd template for the 512x512 AppStore icon available here.
• NotLost has a psd template for the 512x512 AppStore icon available here.

If you are just experimenting with an icon and wish to see what it will look like in iTunes or the AppStore I recommend trying Midnight Mobility’s iPhone Icon Polisher available here.  They provide a preview of what your standard icon will look like after the Apple process has applied “polish” to your images.  I just wish they provided for downloads in the Apple "application bundle” formats.

I’m still finishing up my icon but will post more shortly.