What you need:
– Basic knowledge in HTML and CSS.
– A Mac and Xcode (no programming skills required) for exporting the app.

Performance on iOS

Some notes on performance:

  • Avoid javascript animations
    When animating objects, use instead CSS-Transformations. CSS-Transformations are hardware accelerated on iOS devices, so they are much faster!
  • Animated GIF’s
    Animated GIF’s are  displayed as you expect in mobile safari. The smaller the image, the better the performance. Keep in mind that the frame rate will be slower compared to a desktop browser. The animations halts, when the user is scrolling and is continued, when scrolling stops. Scrolling smoothness will also be influenced by the animated GIF.

For additional perfomance information take a look at Thomas Fuchs’s notes on “making an iPad App and making it really fast”.

Keep in mind that performance differs on various hardware generations.

Laker is now on github! Please discuss issues, suggestions or tipps in the github forums of Laker. Thanks! ;)

29 Responses to “Performance on iOS”

  1. First of all, nice framework.
    I have build a small demo for iPad with it. I don´t have much content in a dossier, but the sites need 3 to 5 seconds for loading. Is there a solution to shorten the loading screen, because the content never need so much time to load?

  2. The loading time depends on hardware and on the complexity of the page. Try to minimize javascript and very long dossiers.

  3. Thanks.
    I canceled the Javascript on the cover-page and only got a JPEG (82kb). It still tooks 2 seconds of black screen before the iPad shows the content. Is there a way to avoid this loading page?

  4. Yeah, but that requires to rebuilt the xcode app. If you intend to do so, please keep me updated! ;) Or you could ask the Baker-guys, if they got something up their sleeves… ;)

  5. I saved your NYC-App (http://lakercompendium.com/nyc/01.html) as a WebApp on my iPad. Why i can not turn the page to 02.html by tapping the right side and pushing to the left side like every other WebApp based on the BakerFramework?

  6. Hey Danben,

    please read the guide more carefully. The BakerFramework consists of an app, which includes this features. Furthermore I disabled the click-to-chacnge-page, because it interferred with the content.

    cheers

  7. Hey florian, is there a way to preload all the pages and remove the need for the loading page?.. it would be really cool if you could swipe from page to page so that you can see one page slide out as the new page slides in… regards J

  8. Hey jon, the baker-guys workin on it.

  9. Hi Florian,
    I have tried out the jQuery Cycle Plugin (directly at malsup.com/jquery/cycle/).
    So far I experience relatively good performance on my iPad2 even with more than one transition going one. I didn’t try (yet) however with full screen images.
    Can you share your experience with your devices regarding these effects? They look too cool to be left in the drawer …
    Regards from Austria
    Erik

  10. Hey erik,

    Thanks for the link. There are a lot of these effects out there, but to run smoothly they got to support animation via css (css-transitions).
    If you play around with these, please keep me updated how it goes ;)

    Cheers
    Florian

  11. New iOS5 safari can accelerate JAVASCRIPT!
    I think it’s very good news for HTML5 solution.

  12. Aron…
    Brainwave about speed – remove the hyphenation.
    After removing the div and the javascript the page loads like lightning.

  13. Additional…
    I mean delete the line

    from ALL pages – don’t even give the script a chance to initialize.

  14. Hi Florian,

    Any news regarding the Jon Jonson’s comment?

    “is there a way to preload all the pages and remove the need for the loading page?”

  15. Yeah. I mailed with him. There were some forum posts which noted, that apple is a bit picky about books. Can’t verify that at the moment (I didn’t heart of the problem before). If someone got any problems, please report!

  16. Hi, I am trying to upgrade your source.. to put preload function.
    It’s not easy to handle the memory without problems. How did you do that?
    give me some hints, please

  17. Check out the Baker-Project on github. They already have a working version with preloading. As I’m not a xCode-Pro, I can’t help you with that, sorry.

    cheers

  18. Is there the possibility to build a “search page” in order to reach the dossier you want by “filtering” the titels??

  19. … titles??

  20. looking to solve the nav include not working ios 5.1 ipad3

  21. I think I fixed it: http://cid2556r1571.hs10.hosting.punkt.de/www.lakercompendium.com/2012/04/10/laker-1-3-released-fix-for-toc/

  22. I was wondering why you say not not use j query animations, do they not work on this framework or are they just slow. CSS3 transformations are suggested instead does the same go for CSS animations. I havent started building, just trying to figure out if this framework will work for a project im starting and already have the j queary written for.
    thanks

  23. Hey! JavaScript animations are not hardware accelerated and therefor sloooooow on mobile devices. Use CSS-Animations instead.

    cheers

  24. Hello… First of all congratulations for your work. I have noticed a little problem. I have made a demo with Laker and when I open it with Internet Explorer (my screen has 1280 width) it doesn’t seem ok… the elements aren’t in the right positions. Is there a solution for that? Thanks a lot!

  25. Hey there, sorry, desktop browsers are not fully supported.

  26. Hello thanks for the nice framework :). I was wondering how can we zoom in and out?

  27. i have set “zoomable”: true in books.json but it doesnot seems to work

  28. Is it possible to open a new window or use tag? might put an ads on my ebook

Leave a comment, suggestion or question.

You must be logged in to post a comment.