Recently I started a new gig with Randall Reilly as a front end web developer, my first big project was to replace an antiquated Flash flip book magazine with a skeuomorphic html5 and CSS3 modern and mobile compatible product. We had some hurdles, but the project is finally done! Driver Job Leads now has a nice new HTML5/CSS3 flip book which is fully compatible with iOS and other mobile devices!
For the core I used the turnjs framework, but that is just the starting point. We are using PHP to dynamically populate the pages of the flipbook and fill the four columns across two pages with unique content for our growing client base. I’d like to go over some of the obstacles just in case another designer is using a similar product for their flip book.
All our videos were hosted on YouTube so no worries about Flash, right? Wrong. Presently, the ads and much of the usability for YouTube isn’t 100% compatible with desktops so the default is Flash. You can force the player into HTML5 player but as of this writing the player control buttons show up as white boxes. Finally, the Flash version of YouTube would have z-index issues resulting in the video always being on top of everything else! Well, how do we keep this compatible with mobile and desktop? I took advantage of the SWF Object library to first use a Flash player I created earlier and fed it some Flash vars to dynamically import the correct video.
We Wanted a map which displayed the hiring area for each company, so I started off with a Flash map using flash vars pulled from the database and creating this dynamicly created map. Again, I used the SWF Object library to load the map, then for non-Flash users display a list of the states. This all works just fine; however, I wanted this to be 100% iOS compatible so I explored some options. If you’re doing something static go SVG, but since I was creating this on-the-fly, I ended up taking advantage of the Google Charts map API. Their instructional documentation is really hard to understand, but once you figure it out it’s actually pretty efficient. End result: a simple gif which you can control just about every aspect of. I just skimmed the surface, but if you’re looking into using this technology the potential is endless!
Well this was a fun experiment, we wanted each company to have their own unique color which is pulled from their logo and used to customize the colors of the states they’re hiring in, the buttons of the page and the headers in the page. When creating the database of companies we added a field for company color- no fancy color grabbing code here, sorry. Then, we utilized some color math to create dynamic gradients and PHP to write dynamic in-line CSS styles for the pages.
These are the largest hurdles we had to conquer but there were many more. To learn more about turn js and follow it’s development, visit the repository on git hub.
As a designer/ web developer, I found this interesting; it’s always interesting to see how your work is marketed…
You can play around with it here