iPhone website for Good Beginnings

I just finished to develop the iPhone web version of a non profit organisation called Good Beginnings which provide information about parenting new born babies and look after children. The app seems to be very easy to create because it just has one page with the top banner and four tap lists for users to choose.

mockup vs final design

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

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

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.

2 Responses to “iPhone website for Good Beginnings”

  1. Ed says:

    Great article! Just one question as this seems to only apply to background images, how would you go about targeting images that are coded in html? —

  2. Hemmachat says:

    Hi Ed,

    I think it cannot be done using CSS. But you can use Javascript to change the “src” property of your image.

    For example:

    <img src="old-image.jpg" id="image1">

    and using jQuery

    $("#image1").attr("src", "new-image.jpg");

    Obviously, the easy way is to use image background with css.

    Cheers.

    P.S.
    See some discussion about it here
    http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css

Leave a Reply