My app has been approved! Guide for iPad

[trudderham]

Apologies for creating this topic here - it appears the Google form on the Showcase page is broken.

My first app using the Baker framework has been approved! It's an interactive guide to the iPad that includes animated text, slideshows, Q&As and quizzes.

This time last year I published three interactive books in the iBookstore. All got to number 1 in the Computers section (you'd be surprised how few copies you need to sell to reach number one, for a couple of days I was out-selling the Steve Jobs autobiography in the overall charts with an average of 20 sales).

After publishing the books I spent six months investigating how I could turn them into an app. I didn't get anywhere until I came across the Baker framework. It's an amazing project, I wish I had the coding skills to contribute.

So, just a month after discovering Baker, here's the finished app: https://itunes.apple.com/us/app/guide-for-ipad/id611731275?ls=1&mt=8

It's called Guide for iPad, and is priced $0.99, but I have lots of promo codes if anyone would like a free copy for review. I'll also have a free, sample version ready soon.

At the moment there's a flashing bug when you double-tap on anything that's interactive or animated. I've managed to fix it for an up-coming update, and made a few other design improvements and tweaks. Hopefully that'll be available late next week.

The book uses color to help users navigate around. Each chapter is color-coded, with white blocks at the top of the screen to highlight the current position of a page in a chapter. I've used a few elements from the Laker Compendium, added animation and slideshows using the Royal Slider code (http://dimsemenov.com/plugins/royal-slider/), plus a basic javascript quiz to the end of each chapter.

Here's a website for the app with a bit more information: www.stopframe.co.uk/apps

Thanks to everyone here for the help and support over the last few weeks. This is such a great community and project, hopefully word will spread and we can continue making it better and better with each milestone.

Some screens:

[folletto]

AWESOME :)

Could you please try the form now? Seems working again (mostly to give us the promo codes to test). ;)

—

Would be also possible for you to detail how you removed the white flash? I'm sure other people here would love to read about that. :)

[trudderham]

The link is still down but I'll keep trying :)

I fixed the white flash by removing all the retina images and using smaller, standard iPad-sized ones. I have a lot of images on each page, on average around 1.2MB (multiple slideshows etc, background art etc). The flash is still there on pages with lots of content, but I've got it down to a brief flicker by really optimizing each image in Photoshop. I've lost some image quality but not enough to bother most users.

So, basically lots and lots of optimization!

However, one way to completely remove the flash is to not specify a body color, but then the iPad displays a grey background which I don't like. Desktop browsers display white by default when a body color isn't specified, so the grey color must be specific to iOS.

[folletto]

Uhm very strange, we just got another submission in. Well if this link doesn't work, then just send us an email. ;)

—

Thanks for the feedback on that. Yes we made on purpose the background transparent instead of grey as one of the steps in making the white flash less visible. In that way if you want a colour, you specify it in the HTML, but you can also use the background screenshot / image to minimize the issue as well. Not ideal, but still one of the few details we added to try addressing that bug on Apple's side. :)

[benoitchantre]

Wow, it looks great! Is it possible to receive a promo code to look at it?

[schlompf]

i'd appreciate recieving a promo code as well :)

[Sror]

just bought it. Great work!

[trudderham]

Aha, the submission is working for me now - I've sent in the details :)

Thanks Sror - really appreciated!

Feel free to email me, schlompf, via http://stopframe.co.uk/apps/?page_id=8

[benoitchantre]

I can't reproduce the issue #584 in your app, did you used the fix from waywalker?

[trudderham]

Hmm, I wonder if that's a bug specific to version 4? I'm using 3.2.2 for the current release - there was a bug in v4 that was preventing the index from scrolling vertically, which isn't present in v3.2.2.

[kkporter]

@trudderham I am not very good at coding, but am thinking also to include a quiz in my app under Baker framework, do you mind to share how you did the quiz in your app? thanks! :)

[trudderham]

Sure. I purchased this quiz: http://codecanyon.net/item/jquizzy-premium-quiz-engine/242295

Then customized the heck out of it to make it look like something you'd see in an app. So I made all the buttons larger and changed their appearance, then changed the fonts and got rid of the background image.

Hope that helps!

[kkporter]

thanks! @trudderham , i also tried to use laker starter package as my starting point, and tried to make it iPhone 5 compatible, however, I didn't managed to make it work by putting these into my CSS

/**** iPhone 5 landscape view *****/ @media screen and (max-width: 1136px) and (max-height: 640px) and (device-aspect-ratio: 40/71) and (orientation:landscape) {

width:100%; }

/**** IPHONE 5 portrait view *****/ @media screen and (max-width: 640px) and (max-height: 1136px) and (device-aspect-ratio: 40/71) and (orientation:portrait) {

height:100%;

}

Please shred some lights on how you did that in your app? and can someone point out what I did wrong? thanks!!

[trudderham]

In my case I'm only supporting portrait view. I didn't include any specific iPhone 5 CSS - the iPhone 4,4S and 5 automatically scale up from the original iPhone settings. So the code I have is:

/*
##########################################################################
##########################################################################
        Mobile Layout: 320px.
        Content-Element width: 292px.
        Gutters: 24px.
        Outer content margins: 14px.
        Inherits styles from: Default Layout.
##########################################################################
cols    1     2      3
px      68    160    252    
##########################################################################
##########################################################################
*/

@media only screen and (max-width: 767px) { 
    body {
        width: 320px;
        margin: auto; padding: 0px
    }

And then I've included Retina code so the page is automatically doubled on a retina device:

/*      
##########################################################################
##########################################################################
    Retina media query.
    Overrides styles for devices with a 
    device-pixel-ratio of 2+, such as iPhone 4.
######################################################################### 
##########################################################################
*/

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { 

}

The background images are set to the iPhone 5 screen resolution, which is why it might look like I've included some iPhone 5 specific code. That means if you open the app on an older iPhone you'll need to scroll down before getting to the page content.

Hope that helps!

[Simbul]

Closing down as this thread has seen no activity for a while.