Skin evolution: Turtle to Tiger

Responsive web design

is the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

Smashing Magazine

Although I am still evolutionist, I can't deny the new Tiger skin has born out of creation. The original goal was rewriting Turtle for responsive web design, but as time has passed, more and more code parts got rewritten, many functionality got changed and I´ve left out some features too, so finally I felt it´s wiser to call it a new skin, not just a new version. Although Turtle skin will be still maintained, the focus from now will be on Tiger.

The development has started more than 6 months ago and besides replacing the HTML structure to cater for responsive layout, the Java utility library has been rewritten from ground too in Javascript, just like any code in the skin. The only exception is the User Interface. At the beginning I was afraid using Javascript for the application itself, but turned out to be much smoother (and forgiving) than BeanShell – jAlbum´s original scripting language. It´s even speedier. Hopefully this will encourage other web designers with no Java knowledge getting involved in skin development.

The new skin is based on Turtle´s outlook, still more code came from the Photoblogger skin, which is newer and has more advanced features. Search, tag cloud, site-wide shopping cart, to mention a few. It also inherited Photoblogger´s database-driven architecture, which makes it possible to search for and show any photo on any page of the album.

I hope Turtle fans will like the possibility to reorder the sections on the index page to their taste. You can even add a custom section with any HTML content.

The vertically split layout of Turtle had to be removed, because it didn´t fit with the responsive design. This was very hard to handle on smaller screens, anyway. I hope you won´t miss that.

The User Interface has changed significantly too. I know it´s a drag for Turtle users, but Turtle´s UI got gradually more and more complex over the years to the point it was intimidating for new users. The new organization is intended to mimic the page layout, and you will find the settings and features under the corresponding tab, like Site, Header, Sections, Footer, Lightbox.

With the new “Full width” hero image the album fills in the window horizontally, and not just the hero image but the top menu bar and the footer too. (I called the “theme image” “hero” in this skin, because this is how it´s called in WordPress for example.) I must admit, I like this layout better than Turtle´s, but you can switch back to the traditional layout if you prefer that.

When we were talking about running the skin under a new name, I suggested David – jAlbum author – to introduce the skin family support in jAlbum for easier change between skins. This way when you switch from Turtle to Tiger you don´t lose your previous settings, and don´t fall back to skin defaults, like it happened in the past, instead the new skin tries to match as many settings as it can. Being Turtle the most popular skin of ours, I believe it´s utterly important to help users in switching. If you have custom pages, like About.htt or Contact.htt, you might need to repair them before “Make album” to fit for the new scripting language with this tool.


Sample album

Tiger´s styles were made to match Turtle´s on purpose, so you can seamlessly continue with the new skin in your album collection. Switching is good not only because of the new features and the for the benefit of mobile visitors, but because this new skin is based on today´s newest technologies, like Zurb Foundation framework, which makes these albums future proof, therefore Google will like your page too and put it higher in search rankings.

Due to the fact that Tiger is based on a “JSON” database, the local testing is limited to the built-in browser or FireFox. This is because in an attempt to protect your local files, the browsers block access to file types they don´t recognize. Unfortunately this prohibits previewing Tiger albums in Chrome and IE, and you will see only the first dozen of thumbnails and the album will dysfunction. You can still start Chrome in “less secure mode” – if you prefer that browser for previewing – by following the instructions in this sticky note. You can also install a web server, like Wamp on your PC, and access the local album through that, but it´s kind of overkill unless you are a web designer.

I hope you will like Tiger as much as you liked Turtle. Your feedback is welcome!

Laza

Sign in to post
Add your comment
Post comment