{"id":1390,"date":"2022-02-19T07:37:00","date_gmt":"2022-02-19T06:37:00","guid":{"rendered":"https:\/\/www.cashback.cat\/demo-toolbars\/"},"modified":"2023-05-21T20:46:14","modified_gmt":"2023-05-21T19:46:14","slug":"demo-toolbars","status":"publish","type":"post","link":"https:\/\/www.cashback.cat\/en\/demo-toolbars\/","title":{"rendered":"Demo toolbars – overview and tips to improve yours"},"content":{"rendered":"

There have been numerous on-going discussions to favor which are the best templates for Joomla, themes for WordPress or Drupal. However, there are none related on how to demo those great templates\/themes in their best shape.<\/p><\/blockquote>\nA<\/span>s one of the top Joomla template providers in the industry for the last 7 years, JoomlArt.com has changed the demo site presentation at least 5 times: starting from a very simple demo toolbar without any fancy animations, graphics to an extreme sophisticated toolbar including cool animation, screenshots and intro texts.<\/p>\n

From the recent experience, we have had the urge for a simple generic design, which would compliment with the rest of our current design and make it a global top bar across the site. We were actually inspired by the way Google updated its top bar and even Mashable had a similar simple one as well in which helped us to update our demo toolbar like what it is now.<\/p>\n

\"\"<\/a>JoomlArt demo toolbar<\/h6>\n

1. Why demo sites are important?<\/h3>\n

Like other template providers, the demo server attracts a huge traffic, which always comes in second after home page\u2019s traffic. It creates a fair playground for everyone to check out the product itself before spending their money on it, one can’t sell templates just by screenshots.<\/p>\n

\"\"<\/a>Google Analytics Screenshot<\/h6>\n

We shall go on with more detailed analysis of the demo toolbar design right after giving you a quick overview on some of the top demo site toolbars we have come across and got admired so far, please note its not the complete list.<\/p>\n

2. Some of the best Demo Toolbars<\/h3>\n

Last week we did a Poll on Facebook to pick out the best demo toolbars around according to others\u2019 vote. The following are some of them listed in alphabetical order.<\/p>\n

a. DesignerThemes<\/h4>\n

\"\"<\/a>DesignerThemes demo toolbar<\/h6>\n

b. Icetheme<\/h4>\n

\"\"<\/a>Icetheme demo toolbar<\/h6>\n

c. Gavick<\/h4>\n

\"\"<\/a>Gavick demo toolbar<\/h6>\n

d. RocketTheme<\/h4>\n

\"\"<\/a>RocketTheme demo toolbar<\/h6>\n

e. Shape 5<\/h4>\n

\"\"<\/a>Shape 5 demo toolbar<\/h6>\n

f. Templatic<\/h4>\n

\"\"<\/a>Templatic demo toolbar<\/h6>\n

g. Theme Junkie<\/h4>\n

\"\"<\/a>Theme Junkie demo toolbar<\/h6>\n

h. Themezilla<\/h4>\n

\"\"<\/a>Themezilla demo toolbar<\/h6>\n

i. Yootheme<\/h4>\n

\"\"<\/a>Yootheme demo toolbar<\/h6>\n

3. The In and Out of Demo Toolbar Design<\/h3>\n

Designing a demo toolbar is truly a hard work. The mockup\/UX prototypes of JoomlArt demo toolbar is one of the most difficult product decisions we have encountered so far. Why?<\/p>\n

Reason 1 \u201cIt has to be nice, but not overwhelming\u201d<\/p>\n

Bluntly true! Our visitors are interested in the templates demo, not the demo toolbar. Makes sense right? It has to be nice, but not meant to draw too much attention to it! We don’t sell the demo setup, we sell the demo-ed items.<\/p>\n

Reason 2 \u201cMaximum Height is 40px\u201d<\/h4>\n

…is what we said to our team. We need to save space for the demo product.<\/p>\n

Reason 3 \u201cUser friendly\u201d<\/h4>\n

Very important. User should be able to easily browse the templates from the demo toolbar and info indicating the CMS supported and versions supported etc. helps to eliminate the choices right there, saves a lot of time.<\/p>\n

Reason 4 A Screenshot is always important<\/h4>\n

A picture is worth more than 1000 words. Photo and screenshots are the most powerful information when you try to demo something. An impressive, nice thumbnail on hover of template name give a good impression of the product. A lot of company fail to sell the product just because of missing or bad screenshots.<\/p>\n

Reason 5 Make it very light weight<\/h4>\n

The performance of your products have great influence in the purchasing decision. Your demo toolbar will add extra load of the template\/theme. I prefer to keep the total size of the toolbar to less than 50kb. This condition makes the toolbar design harder to implement.<\/p>\n

Reason 6 What happens if you have more than 100 items<\/h4>\n

Now it comes to the hardest part. The more products you have, the more difficult to get all of them well arranged in such a limited space. It took us more than a week just to get our version of the demo toolbar done as we have 3 product categories (Joomla, Drupal, Magento) and each category has more than 100+ items (templates, extensions, modules) and for Joomla! as well as others we again have to highlight each product\u2019s features (1.5 or 2.5) and so on…<\/p>\n

4. What one can do to improve demo toolbar?<\/h3>\n

Frankly, we haven\u2019t got a solid answer to the problem. However, here are few very important things we have learnt and want to share with you guys.<\/p>\n

Tip 1 Don\u2019t be greedy<\/h4>\n

Please ask yourself how many items do you visit each time you go to above demo sites? We personally only checkout max 4 to 5 product demo out of all listed, even when we visit our own demo sites.<\/p>\n

Tip 2 Create an in-time follow up call to action<\/h4>\n

Now this what we are trying to achieve in our next version of the demo toolbar design. If you are reading articles at some big magazine like Mashable, TheNextWeb or SmashingMagazine, they always show a \u201cYou Might Also Like\u201d recommendation read box. Why don\u2019t we apply the same for demo site. If a visitor is viewing a News\/Magazine template, suggest him\/her to see the next news template in your repositories. The whole idea helps narrow down the choices for the user.<\/p>\n

Tip 3 A smart Filter\/Categories<\/h4>\n

If you have more than 50+ items, it is wise to provide a good sorting system so people can easily filter what they want to see. Based on version support (like in joomla 1.5 or 2.5 or 3.0), or regular categories viz business, blog, personal, portfolio and so on..<\/p>\n

Tip 4 Take advantage of responsive design<\/h4>\n

Among all of above demo toolbars, we have not seen anyone with responsive solution. Big & Wide screen are very popular these days, so why not let the toolbar and product thumbnails to resize based on user screen? Big screen users would be able to see larger and clearer thumbnails, increasing the chances of being clicked upon and higher click rates turns into higher buying rate. While the smaller screen guys still see what we have been offering for long. Have you ever built a Demo Toolbar before? Share us your ideas, as our team is planning to update our demo toolbar in the next few weeks. We have a few mockups ready in our kitchen and hope we can share with you very soon.<\/p>\n

Original post: JoomlArt<\/a><\/h6>\n
<\/h6>\n","protected":false},"excerpt":{"rendered":"

There have been numerous on-going discussions to favor which are the best templates for Joomla, themes for WordPress or Drupal. However, there are none related on how to demo those great templates\/themes in their best shape. As one of the top Joomla template providers in the industry for the last 7 years, JoomlArt.com has changed …<\/p>\n","protected":false},"author":1,"featured_media":1245,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[243,147,148,149],"tags":[163,209,210,211,212,213],"_links":{"self":[{"href":"https:\/\/www.cashback.cat\/en\/wp-json\/wp\/v2\/posts\/1390"}],"collection":[{"href":"https:\/\/www.cashback.cat\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cashback.cat\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cashback.cat\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cashback.cat\/en\/wp-json\/wp\/v2\/comments?post=1390"}],"version-history":[{"count":0,"href":"https:\/\/www.cashback.cat\/en\/wp-json\/wp\/v2\/posts\/1390\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cashback.cat\/en\/wp-json\/wp\/v2\/media\/1245"}],"wp:attachment":[{"href":"https:\/\/www.cashback.cat\/en\/wp-json\/wp\/v2\/media?parent=1390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cashback.cat\/en\/wp-json\/wp\/v2\/categories?post=1390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cashback.cat\/en\/wp-json\/wp\/v2\/tags?post=1390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}