The adventurous conquest of Themeforest spot: publishing an HTML theme

myGame

We are happy ThemeForest customers: building web sites and application in the WordPress framework, ThemeForest is a useful repository of themes. We too wanted to create a custom theme for game’s sites, and as a step in this direction, we started creating an HTML template. We want it to be responsive, based on Bootostrap, and provided with Pupunzi’s components.

We put together what we thought was a beautiful template, My Game,  and we were almost sure that it would have been approved once submitted. After all, making websites is our job since the beginning of the web.

Creating the theme – the positive phase

Our plan was first to place in the Themeforest market a package of HTML templates focused on facilitate the development of websites dedicated to games and then realize a WordPress theme based on those templates.

We applied several good practices to our code using Bootstrap (the most famous  responsive framework) for the pages structure, jQuery as javascript library, HTML5 for the semantic; Less to compile the CSS to easily define new skins and colors; we create a special font set to collect all the specific icons to be used in the theme; we paid a paranoiac attention to the design trying to create something unique making it responsive for all the devices; we realized a detailed guide on how to use the theme.

We were so happy and gratified by the good work we had done and after some final revision to make the templates work even on IE9 it was the time to submit it to the market.

Submitting the theme – the discomfort

After a week from the first submission we received an email from the Envato team saying that our theme was rejected.

What! Rejected??

No motivations or explanation for that decision. Simply “rejected”… In Envato speech, it was “hard rejected”.

What is wrong on the work we did?

That response has forced us to think on what could have been the cause. We looked at our work from the user perspective trying to figure out if the theme we were proposing was satisfying his / her needs.

Moving the point of view from developer to end user we discovered so many things that we were omitting to make the theme adaptable to different uses cases.

What the end user needs in an HTML theme

Who is looking for a good HTML theme to buy is probably someone with no skills on design and HTML developing;  they want a complete solution adaptable to their needs and easily configurable. The theme should offer a variety of elements and tools to cover almost all the scenarios.

Templates

When we did the first submission to Themforest we packaged a theme with 4 page templates: 2 different homepages, 1 press kit page, 1 general content page. We thought that those could have been enough and that starting from those anyone could create another page type. No. We were wrong!

As previously mentioned, who is going to use your template may have a really basic knowledge of HTML coding and design capabilities, If you don’t provide a good variety of layouts, of styled elements, of pre-composed solutions they will be lost.

We have two possible ways to accomplish this requirement according to the modern concept of web design:

  1. Create a theme based on the Single Page Site concept where all the needed information are available in a single page one above the other.
  2. Create an exhaustive number of page layouts focused on the possible needs your target users have.

The first case is of course the simplest as everything is defined into one page but anyway you should consider to give different solutions for the content disposition and for widget behavior.

The second case requires more work but gives a more consistent perception of the quality and accuracy of your theme and probably reach more attention in the market place. And it can include a single page site solution as well.

Layouts

By layout we mean the way contents are displayed and positioned on the page. Creating your theme for the market you must consider that the end user should not enter into the details of how the elements renders in the page on different screen resolutions and different devices. your theme should guarantee the correct display of any used and styled element in the page itself.

One mistake we made working for the first submission of My Game is that we styled only the elements we used for our demo forgetting all the common element a user could use for his site.

Any possible HTML element should be styled to make sure it will display nice in the theme environment:

Headers, quotes, form elements, buttons, lists, images, labels, box, head-line, captions, column text and many other HTML elements should be ready to use on your theme without any bad surprise.

Design

The design is what can give your theme the uniqueness and that can make the difference. That is true… but for a theme the most important thing is that it should be adaptable to different solutions; not just for the one you are imagining. Keep it simple, work on details. Of course the design you are proposing is probably the first thing considered for the purchase and the way you are solving the layout solutions via the design is the signature of your creativity but that should never prevaricate the readability of contents, ease of navigation and ease of use.

Widgets

You should offer different widget ready to use as for example photo galleries, header sliders, video players, tabset,  popup windows, animated rollovers, masonry wall and so on.

Especially for a theme dedicated to a specific intent it is important that all the peculiarities of that sector are taken into consideration to offer solutions readily applicable from the end user.

Make the code simple

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand. (M. Fowler)”.

The code you write should be clean and simple; the end user should be able to understand which part do what; should be able to copy and paste parts of code to make his custom solution and everything should work.

In our case, for example, there are some features that need some javascript to be initialized once the page is loaded. To facilitate the end user work we introduced some DATA attribute on the involved tags containing all the variable needed for the initialization. We then make the “dirty” part via javascript only if required. This behavior is also useful to inject the javascript only if it’s really needed by the page. That way the code remain really simple for the end user even if it requires a more complex process.

Documentation

Writing a well explained documentation is as important as the design is. Everything you did in the code must be clear to  the user and if you explain how to obtain a layout or how to create a special element using your code that would be really appreciated.

Conclusions

Publishing a new theme on the Themeforest marketplace is hard!

We are used to work for clients, making sites from well-defined prerequisites and with a definite purpose. In order to create a theme that is able to adapt to different solutions we have to change the point of view and imagine what the end user wants to realize based on what we are offering him.

I am writing this article mostly to remind myself what must be considered to get a product that not only is effective but also useful and complete.

I hope my considerations are helpful for anyone trying to make a theme that can be usable and effective.

P.S.: The My Game Theme, at the time of writing, has not yet been resubmitted to ThemeForest :-); we are working on it to solve many of the points discussed on this article and hope for the next submission everything will be solved.