Hi there!
I would like to describe our Berserk HTML template development process. Currently, it has 400+ sales (released 2 months ago) and was on the “Weekly top Sellers” listing.
I’ve been an author for 5 years, and until this year I released only Drupal themes. I’ve worked in collaboration with HTML authors because my first attempts to make my own design and a Drupal theme was with label “Hard Reject” 
The idea to develop my own template and theme didn’t leave me during all this time. As a result of this, two years ago I’ve started the new project which we called “Berserk” - Multipurpose and E-Commerce template.
In our development process we are using:
- Design workflow - Invision
- Project version system - GIT with server synchronization
- Project building - GULP
- HTML structure - BEM methodology
- Page layout - Bootstrap
- Advanced CSS - SASS
- Cross-browser check - browserstack
- Production and Development servers - digitalocean
- Whole project management - Trello
- Quick communications - Skype
- Support forum - Ticksy
- File Storage and Share - Google Drive
All team members based in Ukraine. Our talented designer is also the ThemeForest author - Bohdan Bershadski.
First of all, we started from Shortcodes pages and at the same time, we were doing the WordPress version of these pages. I think this is a mistake - because it would be better to design all Demo Pages and after this create shortcodes. Minus of our method - not all shortcodes were used, some of them needed improvements and some extra new elements were created.
Our next problem was the revolution slider performance - It allows you to create anything, but it takes a lot of time for loading and also browser resources. This doesn’t create problems on small pages but on Front Pages - this caused low-performance issues and some animations (even scroll) were not so smooth as we expected.
To solve this problem we optimized a lot of our CSS styles and made a Revolution Slider as light as possible. As result, right now we are trying to create new pages without a revolution slider. It’s a good idea to provide a choice for customers - if you wish more “wow effects” then you can leave the Revolution slider, but if you wish to speed up your website - then choose something from our Sliders and Content Sliders library.
Another big problem was the Skin Colors: I really tired on my themes with tons of duplicated CSS files stored on their own folders and with only one difference - the color. We found that we can use CSS Variables for this issue. The small problem - it still didn’t approve by the W3C but supported almost by 90% of total browsers.
We decided to use this as the main solution, but keep original “old style” solution for users who wish to support as many old browsers as possible. This was done by writing our own GULP tasks.
Next on our list was the issue with performance and template easy customizations. I don’t like the idea that we always should know which CSS, Fonts, JS, and libraries used on the elements and should add them on each page. For example, you need to add a Slider and inside it, you have social icons. In this case, you need to add on the page: Slider CSS, Slider Js, Social CSS, and Social Fonts. To avoid this you can generate all CSS and JS files in one and add this bulk file on each page. We also tested this method, but this caused big problems with performance. As a solution for this, I’ve implemented the libraries - each element has it’s own library with a set of CS, JS, and other dependencies. The library name added on each element and our script search for this attributes, collect them and add all required files on the page load.
The minus of this solution - increased the amount of the queries. To decrease it, we moved the most used libraries to the style.min.css and scripts.min.js.
Some very heavy elements, like google maps and twitter - loads only by page scroll. This also saves a lot of page resources.
Of course, to decrease the page loading time we used Images lazy loading script - this is “must have” solution for any theme.
To allow users to edit the project without coding we integrated our template with the Novi Builder. But this takes much more time then we expected - it also doesn’t support CSS Variables. A lot of JavaScript codes, CSS and HTML Structures were updated and adopted, plus tons of weird problems and errors were solved. This was a real headache for us.
During this project, I have been working as CEO, Investor, Designer, Project Manager, Front-End Developer, WordPress developer, System Administrator, SMM, and Video Editor. I can’t tell that this was easy and if you are looking for an easy way to earn money - this is definitely not the best choice
Some facts about Berserk:
- Development time: 2+ years
- Team: 6 members
- PSD Files: 25GB
- Unique pages: 200+
- Already spent: $xx.000+
- Approve period on the ThemeForest: 1 month
- Amount of soft rejects: 5
I hope somebody found this interesting
Thanks.
P. S. I’m looking for authors (except WordPress - because we are doing this version and it’s almost released) who wish to convert this template to other platforms for selling on the ThemeForest.