Spilled Milk Designs specialize in building custom Flash websites on the Showit platform. I was contacted by their founder Nick Haskins with an offer to work with them on a version of the site that could be accessed on the iPad since the device doesn’t support Flash. The main idea was to build a web app that would look and feel like a native iPad app written in Objective-C, Cocoa or what have you.

Because iPad’s main browser is Apple’s own Safari, we were able to make use of many neat, (term used loosely:) new web technologies, like: localStorage, SVG graphics (coming soon), offline cache and many CSS3 properties which allowed us to minimize the need for images for the app’s layout. The tricky thing about this project was designing for the device’s two orientations – making sure the whole page was inside the device’s viewport and only have certain div elements or iframes scrollable. For making these elements scrollable and scrollable with style, Matteo Spinelli’s iScroll script and comments were invaluable. As for making page elements adapt to different orientations, we relied on CSS3 media queries and JavaScript orientation (and orientation changes) detection.

Working on this project has been very rewarding not only because I have learned more about some HTML5 features, iPad’s JavaScript methods and design for the iPad in general, but also because Nick is such a great person to work with. I am really going to enjoy working with him on our future projects so you can expect more iPad designs here soon. 🙂

P.S. The app is currently in alpha stage at version 0.8. I am working on a new project with Nick and, when that is finished, we go back to finalize the SMD app before we move onto something special. 😀

  • Spilled Milk Designs
  • Spilled Milk Designs
Client
Spilled Milk Designs
Services
  • Layout Design – Photoshop
  • Coding – HTML5, CSS3, jQuery, PHP
Website URL
http://ipad.spilledmilkdesigns.com/