GavickPro’s latest app template, MO, has been released, and individuality is its aim. But what use are customization options if no-one knows about them? Time for a in-depth, yet non-technical, look at the features on offer in this shiny new template. So, as always, grab a cup of your favorite brew, and let’s delve into the wonderful world of Joomla! templates and see what there is to find.
I’m not.
Apart from that one guy in the crowd scene of Monty Python’s Life of Brian, we are all individual. Unique, in the old sense of the word; one of a kind. It might not seem this way at times, when daily life grinds us down and demands that we all walk the same path, value the same things. Conform, in other words. But the needs of society only extend so far; there are a myriad of ways to express oneself, to highlight one’s passions and desires that reiterate that we are not, in fact, a collective; we’re just really good at working together. For some, their individuality is expressed in the way they dress, or the music they listen to; the food they eat or the places they frequent.
There is another way that people may express their individuality; a way that the majority of people use; through the way they work. Whether it’s the language used, the choice of topic, the tone of communication or the motivation for excellence one expresses, our daily working lives contain numerous ways to develop our own personal identity whilst still contributing to the overall success of our company, or just society in general.
The work you do should receive an appropriate showcase; something that expresses your values, that reinforces your identity in tandem. Success in the eyes of others is often measured by impact; the amount of money one makes, the cultural influence. Success in terms of the self can only be measured by oneself; it is up to you to decide the values you want to focus on, to ultimately decide whether success means monetary gain, or something more, like defining your persona.
MO steps to the plate
It is with this concept in mind that the latest Joomla! template from GavickPro, MO, has been designed. Customization is the name of the game; create a simple, effective website design that can be moulded to suit every individual. Often, purchasing templates has an additional frustration beyond the stress of actually creating a site; without some extra custom work, your site is going to look fairly similar to many other sites out there. By making personal customization of a template easy, MO encourages users to develop their own online identity.
That’s the theory at least; I will need to take a look at it before I can say if this is the case. Opening up the page, my first impressions are positive; there’s no instant ‘Wow’ factor as there was with Game, that had a huge background slider to open proceedings, but often a business website or more technical or seriously-toned blog will work better without excessive flash; in such cases quiet restraint may be much more effective. It does however have a pleasant fade-in animation for all the elements, that lends some dynamism to proceedings without overpowering the template’s presence. MO’s overall feel is based on flat-design, which is a more modern, restrained design choice that continues the theme of calm, dignified design displayed in the header, with simple but evocative illustrations for iPads, monitors and the like. In many cases, less is more.
Scrolling down the page, there’s a full width static image with overlaid text, and an abundance of icons; this is in fact one of the big draws of MO; several illustrations and icons have been provided by our design team and from Pixel Love, who create snazzy iOS 7 icons that are surprisingly effective despite their minimalist style; in fact, we liked them so much we’ve used them on our own website! It’s just another way to guide and inform users without falling back on walls of text or images, that ultimately contribute to page-load. Still scrolling; there’s a simple documentation introduction section, again with a nice icon rather than images, and nice, clear sections and an easily-locatable ‘read more’ button, that is satisfyingly large; this is a boon when working on a mobile or tablet screen as I don’t have to waste time trying to tap the right link. Scrolling down some more…
…wait a minute…
…it occurs to me then that there’s another benefit of the template that isn’t immediately noticeable; the template is long. Reeaallly long. With so many areas available on the frontpage, a user can place all pertinent information in a immediately accessible way, rather than needing to put information in various sub-sections that can only be reached via the menu. When a user visits a news site, they’re expecting to have an overwhelming amount of information to be available to them at a moment’s notice; it becomes necessary to fill up your page with as much news as possible. Conversely, when you are selling a service or an app, then overloading the page with data will distract people from the core purpose of what you offer. By laying out data in a clear, easy to understand manner new users can become instantly acquainted with what you have to offer, what its benefits are, and where to get it.
There’s some interesting typography at work here; every button is like the aforementioned ‘read more’ button; big, chunky buttons that are easy to tap on a touchscreen. There’s also a space-saving horizontal list that would be great for bulletpointing all your apps major features. The benefit here is preventing unnecessary scrolling; with a horizontal list all information is available at a glance for desktop users, whilst mobile users will see a standard vertical list to prevent the need for horizontal scrolling. The lists can also be highlighted in multiple ways; the live demo provides examples of icons above the main title of the item, or block quotes above the image of a user to display testimonials or other quotes, as well as standard numbered lists that add a dash of color. It seems that customization really is the driving force behind MO, with every element seen thus far providing multiple options for switching layouts, looks or design aesthetics.
Making things easier
Here’s where it get’s interesting though; MO has some game-changers to bring to the table. For starters, there are in fact 3 different headers to choose from; a flat-design header with illustrations, a standard image header with overlaid text, and an image header with icon links to social media. Switching between them on the live demo is instantaneous at the press of a button, but doing so in the template itself requires some additional work, though it is surprisingly easy; a simple custom HTML module in the header position with a particular class, depending on the type of header you desire. It would be nice if such options could be integrated into the template options for beginners like me, but this would require a large amount of development and the solution provided by GavickPro is far simpler than it first appears; in fact, changing the header only took a minute thanks to the extensive documentation for the template. Adding the animations to the header took a bit longer, but that’s where the next innovation comes in…
Remember those fade-in animations I mentioned earlier in this review? As it turns out, animating is not as hard as it seems. At least, not anymore. By using custom code created by Julian Lloyd distributed via GitHub, the syntax required to make animations becomes much more logical for non-developers such as myself. For example; I wanted to have an image that came in from the left and moved into position. Usually, the syntax would be some ungodly dense code that made no sense to me, but with the new engine provided in MO, it’s as simple as adding an attribute to an element, then writing exactly what I wanted the animation to do: “Enter from the left and then move 25px”. And that’s it; animation created. I must admit, I’m still not comfortable with using pixels as a measure of length, but at the same time I really can’t think of another way to define distances when screens come in so many different sizes. Still, it feels a lot more comfortable for newcomers than the previous animation engines used in both GavickPro’s templates and others, and much easier to decipher. I was also a bit uncomfortable stepping into the code; with my current lack of experience I prefer to be as hands-off as possible where code is concerned. Thankfully, guides have been provided in the live demo specifically for the animation feature and header swapping, so it wasn’t as painful as it could have been.
Conclusion
MO doesn’t break any new boundaries with regards to visual flair, though it certainly is easy on the eye, and the flat-design aesthetics lend a modern feel to the template. Where it truly shines though is in what the user cannot see; with loads of illustrations and icons included, multiple headers, colors, menus and a simplified animation engine, the website owner can easily make MO their own. In short, MO offers something far more profound than any other template before it: freedom. To be an individual, to promote your own ideals and persona to the online community without spending years studying HTML, CSS, PHP and Javascript. For some, this may make it the most attractive proposition of all our templates.