After reading a news from MacWorld, I decided to give it a go last night. It was an unsuccessful buying because App Store said something wrong with the payment. Later this morning, I try it again. This time I can buy it and it is now sitting on my Macbook Pro 15″. Let’s try to create a very basic banner for iPhone. First, create a document size of the portrait iPhone size 360×480 from the document size lists and change the height to 50px.

Then insert a background photo of mine which is a photo of lady bug from my macro photo collection when I went to Botanic Garden, insert some texts to test the fading opacity and image rotation that show on their website tutorials. I have done some Flash, so I understand about how to work with key frame to create the animation. Now we are ready to go.

I did a test by creating a Thai phrase and it can display correctly. So, there should not be any problem with other  languages too. Preview on Firefox and Safari browsers on my machine without any problem except the loop. All banners need to be infinite loop from start to finish. I checked the menu Animation->Loop Playback, but still the banner does not loop from start after finishing. I went to check on their website and found this post that I needed to manually set the movie to do the loop.

Now it loops! I did a further test on iOS simulator but the simulator display the banner incorrectly. However, testing on the real iPhone was a successful. The demo is here.

That was impressive. I played with it about half an hour to create a basic banner and found it easy and intuitive  to use. However, after checking the asset files, I found that the software did not optimise my photo. It is still very large size and the software did not create any masking or clipping on the image. So, users must beware to optimise your asset files before using this software. The rest are very good for create the animated banner that can be view on iPhone/iPad. But if you want something more fancy that Flash can do, you will need to wait for the next version. I give it five-star rated and feel sorry for Windows users because now the software is only for Mac.

So, the fast and easy way is to use my own photos to create the poster that will attract restaurant patrons by their visual that grabs the interest.

The restaurant has the problem about the upstairs which has a spacious area for big groups of people to have a small party, but nobody knows about it.  So, the goal is to create the links between the patrons and the room which I came up with the concept of the wine glasses and big table after looking through my photos. The glasses mean the party and entertainment and the reflection from my off-camera flash create the depth and dimension to make the photo looks real and approachable. The point of view that I took the photo was the same position as someone was sitting at the end of the table and watching their friends and the glasses line up to create point of interest to the upper right corner of the photo. So, I put the caption at that area and left the two first wine glasses to be the main actors that lead the viewers’ eyes. The colour of the room which is red is quite suit the feeling of the party and celebrations and make them feel hungry.

The other poster was the poster for the courtyard. I wanted to create the feelings of comfortable and make patrons feel like having food at their private garden in a lazy Sunday morning. So, I choose a photo of the wine glass and plate with chopstick to persuade viewers and create the link between the restaurant and the viewers by using cutlery. I also want to create a little dynamic and movement to grab their interest, so I rotate the photo a little bit and put the captions on the left. The tree in the background works very well with the wood tables and the chairs. The mirror look strange for me but sorry I could not remove it.

You might think those posters are too easy to create. Yes, you are right. Because I used the photos that suit the themes very well. Why don’t we create simple things that are very useful and beautiful. This was my first time using Illustrator to create something vector design but it came out very good. The result of the posters are very good, the restaurant owner told me that after putting my posters to show, the wait staffs had to do more work for upstairs and the courtyard because they had more customers coming at lunch and the evening party too.

mockup vs final design

Then I finally choose to use jQuery Mobile to create the touchable web for smart devices which is now has released version 1.0 alpha 4.1. I have experience with jQTouch which has version 1.0 beta 2. Those two frameworks seem very compelling, however jQuery Mobile seems to release more often updates than the jQTouch according to their websites last updated.

jQuery Mobile screenshot

This is just a draft version after inserting the touchable framework and I need to wait for the company to send me the banner that will put on the header. One week later, I just got the banner and ready to go.

I try to minimised graphics by using CSS3 gradient that WebKit engine already supported and use my favourite Quicksand Bold font to be embedded using font face generator from Font Squirrel. This makes the text look beautiful and has the feelings of childish, as the same feelings as the campaign website.

Finally I decided to remove the right arrow because it does not slide to new content, it just leads to the new web browser window and insert a lovely icons from Smashing Magazine. Thanks to SM for the always best content. I am your fan and I got your SM book #1 and #2 already.

The tap menus still look dull and not very attractive so I looked for some beautiful CSS3 gradient button and found this article.

screenshot-final

Then we finish the look and feel of the mobile website. Now comes to retina display of iPhone 4. Retina display has double resolution, so we need the double resolution of all graphics including the banner and the icons. What about if users rotate the phone to landscape mode? How our banner will be automatically re-sized?

So, here comes the media query from CSS3 to check the retina display and the width of the view port.

/* default portrait */
.g-banner{
    width: 320px;
    height: 122px;
    background: url(images/iPhone3-320px.jpg) no-repeat center;
}
/* iPhone 3 landscape */
@media only screen and (min-width: 480px) {
    .g-banner{
        background: url(images/iPhone3-480px.jpg);
        width: 480px;
        height: 150px;
    }
}
/* iPhone 4 portrait */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .g-banner{
        background: url(images/iPhone4-640px.jpg);
        -webkit-background-size: 320px 100px;
        height: 100px;
    }
}
/* iPhone 4 landscape */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 480px){
    .g-banner{
        background: url(images/iPhone4-960px.jpg);
        -webkit-background-size: 480px 150px;
        width: 480px;
        height: 150px;
    }
}

The iPhone 4 graphics will have double resolution and I use

-webkit-background-size: 320px 100px;

to constraint it to be normal size. The result will show a high resolution images on retina display.

And the icons too that need to be double resolution…

.donate{
    background: url(images/donate.png) no-repeat 10px;
    -webkit-background-size: 48px 48px;
}
.fund{
    background: url(images/fundraise.png) no-repeat 10px;
    -webkit-background-size: 48px 48px;
}
.spread{
    background: url(images/spread.png) no-repeat 10px;
    -webkit-background-size: 48px 48px;
}
.terms{
    background: url(images/terms.png) no-repeat 10px;
    -webkit-background-size: 48px 48px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .donate{
        background: url(images/donate@2x.png) no-repeat 10px;
    }
    .fund{
        background: url(images/fundraise@2x.png) no-repeat 10px;
    }
    .spread{
        background: url(images/spread@2x.png) no-repeat 10px;
    }
    .terms{
        background: url(images/terms@2x.png) no-repeat 10px;
    }
}

You can see it live here.

It took about 10 hours to develop and 70% was to tweak the design and the look and feel.

Thanks to the web communities and open source world.

Test post 2