A new HTML5 Admin Teamplate(html5admin.com)
html5admin.com
A new HTML5 Admin Teamplate
http://www.html5admin.com
28 comments
It might be more acceptable if it was a lot more blurry. But right now, my eyes keep trying to focus on the big "A", especially since the image first loads and then the buttons are shown.
I agree, it actually hurts my eyes to look at it. There's probably some science behind this...
I don't know if you're being sarcastic or not (I'm not!) but this is the same as putting on spectacles of the wrong prescription. Everything is fuzzy and your eyes try to compensate for the lack of focus.
I found my eyes kept trying to focus the image - especially the A - and I felt a visceral frustration when they couldn't do it.
It's like the feeling I get when I see one of those faces with two sets of eyes (http://www.illusionspoint.com/wp-content/uploads/2010/09/fun...).
Ouch! Exactly.
I think it has to do with text over it, so your pattern recognition thing in brain gets thrown off because it needs clear edges. I find it unsettling as well.
On the other hand I was toying around with idea of blurred backgrounds about a month ago based on several things I saw people were trying to do with it. It can be extremely pleasant if it's not upsetting outlines. Here's what I quickly proto'd based on what I saw elsewhere in several instances: http://cssdesk.com/VYN67
On the other hand I was toying around with idea of blurred backgrounds about a month ago based on several things I saw people were trying to do with it. It can be extremely pleasant if it's not upsetting outlines. Here's what I quickly proto'd based on what I saw elsewhere in several instances: http://cssdesk.com/VYN67
It's not the text. It's the fact that when the page first appears, there's nothing but the blurred image. Our eyes immediately set to the task of focusing, which can't be accomplished.
The reason I don't believe it's not the text over a blurred image is because our eyes deal with this on a daily basis.
Any time you look at an object (like someone's face) where the background is distant, you're seeing a foreground object on a blurred background. Depending on lighting, visual acuity, and the use of glasses, the DOF of the human eye can be startlingly small (less than a foot), or it can be very large (practically infinity). It's the cognitive portion of our visual processing that makes the difference. Our brains do a great job of filtering out what we're not focused on.
My recommendation would be to ditch the animation on the HTML5 logo, tagline, and buttons. I think if you do that, this becomes a non-issue for the vast majority of people.
The reason I don't believe it's not the text over a blurred image is because our eyes deal with this on a daily basis.
Any time you look at an object (like someone's face) where the background is distant, you're seeing a foreground object on a blurred background. Depending on lighting, visual acuity, and the use of glasses, the DOF of the human eye can be startlingly small (less than a foot), or it can be very large (practically infinity). It's the cognitive portion of our visual processing that makes the difference. Our brains do a great job of filtering out what we're not focused on.
My recommendation would be to ditch the animation on the HTML5 logo, tagline, and buttons. I think if you do that, this becomes a non-issue for the vast majority of people.
I found the 100px radius acceptable, personally. I wonder what the tipping point is. Perhaps it's when it's no longer possible to do feature detection.
I have a hunch it has to do with the contrast of background and foreground element.
I feel like there's too much contrast in the blurred background itself.
I normally like that blurring in the background effect but this was really jarring. It actually hurts to look at. The blurred background is too prominent and trying to draw my focus.
(I'm being completely serious, this actually hurts my eyes to look at).
(I'm being completely serious, this actually hurts my eyes to look at).
Looks ok, but I feel this one is by far the cleanest, usable and extendable. https://wrapbootstrap.com/theme/detail-admin-responsive-them...
i don't think so.
Plus: I HATE TEMPLATE MARKETPLACES. They are starting to ridiculously rip developers off with their fees.
Wrapbootstrap can legally steal up to 75% (seventy five percent) of the earned amount. Making a developer earn 25% (twenty five percent) of a product that he ENTIRELY made and market (created images, advertising material, etc.).
It's freaking ridiculous.
Plus: I HATE TEMPLATE MARKETPLACES. They are starting to ridiculously rip developers off with their fees.
Wrapbootstrap can legally steal up to 75% (seventy five percent) of the earned amount. Making a developer earn 25% (twenty five percent) of a product that he ENTIRELY made and market (created images, advertising material, etc.).
It's freaking ridiculous.
That's not accurate. 75% is the maximum commission for sellers with 55% being the starting rate. 35% is the minimum and applies to themes sold non-exclusively.
https://wrapbootstrap.com/help
https://wrapbootstrap.com/help
Still sounds quite a lot for doing "the marketplace job" which in the case of wrapbootstrap is allowing a developer to simply sell with paypal.
A minimum of 35% (due to exclusivity) and a maximum of 75% to have a "buy with paypal" button. Now it's more accurate...but still sounds like ripping developers off to me. (that's, obviously, why HTML5 Admin is not listed there or themeforest or whatever)
A minimum of 35% (due to exclusivity) and a maximum of 75% to have a "buy with paypal" button. Now it's more accurate...but still sounds like ripping developers off to me. (that's, obviously, why HTML5 Admin is not listed there or themeforest or whatever)
If you build it, they won't necessarily come. Marketplaces provide a channel for discovery.
what do you mean with "If you build it, they won't necessarily come"?
Gaining exposure is difficult and it's not guaranteed that people will flock to what you've built.
agree. but it shouldn't be a reason to get a min of 35 and a max of 75%.
Just wondering tho...are you working at wrapbootstrap or themeforest? ...or...have you ever tried to sell a template?
I own WrapBootstrap.
now everything makes more sense. (but i still believe in what i've said)
Plus: since i've the honor to talk to you...i was thinking about joining wrapbootstrap...but you have ACE Admin (and others) which, for people that just upload their first template, are "way too much on top".
That really didn't help me (and really doesn't help new comers)...it's what i actually believ being a big problem of wrapbootstrap.
Do you see that as well?
Plus: since i've the honor to talk to you...i was thinking about joining wrapbootstrap...but you have ACE Admin (and others) which, for people that just upload their first template, are "way too much on top".
That really didn't help me (and really doesn't help new comers)...it's what i actually believ being a big problem of wrapbootstrap.
Do you see that as well?
The competition is getting intense but new themes are often able to gain footing on the frontpage. Genyx, Genius, and PIXMA are examples of themes released in the last few weeks that now hug the top half of the frontpage.
OK, that's cool...and new, right?
Now we just need lower fees to make developers happier...or a service that can match the high fees (eg. possibility of create and manage affiliates, more payment methods, discounts, etc.)
Now we just need lower fees to make developers happier...or a service that can match the high fees (eg. possibility of create and manage affiliates, more payment methods, discounts, etc.)
I've tried many beautiful admin templates, all of them are visually nice, quite suitable for integrating as dashboards and "read-only" panels. But very few of them actually tries to solve the "hard" problem: how to transform "rational" row based data into read-writable web forms.
Server-side & client side interactions, validations, cascading events, descriptive forms, etc. Given two or three slightly sophisticated m2m models you get stuck either to re-write from scratch or re-invent your own.
Server-side & client side interactions, validations, cascading events, descriptive forms, etc. Given two or three slightly sophisticated m2m models you get stuck either to re-write from scratch or re-invent your own.
That's because, functionally, that sort of interaction does not belong on a dashboard. Dashboards are meant to succinctly summarize what's going on under the hood. "Bakery 47 is running low on cinnamon rolls" && "Coffee shop on Main is your #1 seller this week" - Rolling up your sleeves and manipulating that data is best done in a bespoke screen/view.
dashboard is only a subset admin templates
They are mostly read-only, useful for OLAP data. Admin templates are useful for OLTP data.
They are mostly read-only, useful for OLAP data. Admin templates are useful for OLTP data.
That doesn't address use cases. A Dashboard is the first thing a user sees. If it's not, you're doing it wrong. Furthermore, in-depth slicing & dicing of data, manipulation, etc, should always be done in bespoke screens, not on a dashboard. Combining that stuff with an analytical view that the dashboard provides leads to kludge. Every single time.
i agree
I'm actually considering designing a Bootstrap admin template myself. Do you have any suggestion or example of the kind of data interaction you need from a template like that?
Well,
Suppose we want a web based UI for editing an email compaign to promoting an app of yours
For campaign: title, content, etc.
For recipients: you have to design something like Django's admin inline, user name, email, maybe facebook/twitter id.
Here a simple demo for inlines: http://admin:[email protected]/host/hostgroup/add/ from the project https://github.com/sshwsfc/django-xadmin which is basically Django on steroids
Now recipients are growing, you can't hold them all on one page inline, you wanna filter the inline, but only on the client side.
Then you need pagination on the inline.
Then you need grouping recipients like folders
Next folders suck, let's re-organize them by tags.
Soon your product line expands, you have to support Android platform as well. Each user has installed either android or iOS app, or even both, so each user as associated one or more `device_type` attributes. Filter the inlines. Don't send iOS emails to Android users.
Then you want to set the campaign to iOS version with greater than 5.0 users. (How to design greater than or equal to logic visually?)
Now you want your message to be i18n supporting more languages, e.g. more collapsable textarea on the form
Now you want your message to be selected randomly from a pool of messages for A/B testing.
Then your messages are provided by a third party. You need a review board for external messages, as well as supporting inhouse messages.
I didn't even mention marketing feedback loops from real-time statistis, and that requires much more blood and tears making dashboards.
How to make a admin UI like that? The associated information grows with your business. Generic admin templates are not enough.
The basic problem is that those widgets, are not composable, nor nestable. even if nestable, not sortable.
Even if all goes well, widgets not splittable, but we often split data horizontally or vertically. And much more complex transformation like from a collection of items to uniformed array, nested array, dict (for grouping), sorted dict, nested sorted dict, dict with local & remote values, etc.
How many inline widgets can automatically support re-open itself in new window and communicate back with window.opener? What about switch from new window to in-page lightbox via history.js and ajax?
Suppose we want a web based UI for editing an email compaign to promoting an app of yours
For campaign: title, content, etc.
For recipients: you have to design something like Django's admin inline, user name, email, maybe facebook/twitter id.
Here a simple demo for inlines: http://admin:[email protected]/host/hostgroup/add/ from the project https://github.com/sshwsfc/django-xadmin which is basically Django on steroids
Now recipients are growing, you can't hold them all on one page inline, you wanna filter the inline, but only on the client side.
Then you need pagination on the inline.
Then you need grouping recipients like folders
Next folders suck, let's re-organize them by tags.
Soon your product line expands, you have to support Android platform as well. Each user has installed either android or iOS app, or even both, so each user as associated one or more `device_type` attributes. Filter the inlines. Don't send iOS emails to Android users.
Then you want to set the campaign to iOS version with greater than 5.0 users. (How to design greater than or equal to logic visually?)
Now you want your message to be i18n supporting more languages, e.g. more collapsable textarea on the form
Now you want your message to be selected randomly from a pool of messages for A/B testing.
Then your messages are provided by a third party. You need a review board for external messages, as well as supporting inhouse messages.
I didn't even mention marketing feedback loops from real-time statistis, and that requires much more blood and tears making dashboards.
How to make a admin UI like that? The associated information grows with your business. Generic admin templates are not enough.
The basic problem is that those widgets, are not composable, nor nestable. even if nestable, not sortable.
Even if all goes well, widgets not splittable, but we often split data horizontally or vertically. And much more complex transformation like from a collection of items to uniformed array, nested array, dict (for grouping), sorted dict, nested sorted dict, dict with local & remote values, etc.
How many inline widgets can automatically support re-open itself in new window and communicate back with window.opener? What about switch from new window to in-page lightbox via history.js and ajax?
Great insight. I suppose such extensive admins require a really specific UI to be usable, and can only be solved on a case-by-case basis, while maintaining a constant feedback from the front-end user and the back-end data provider. Generic templates usually need both a visually attractive UI and easy-to-configure widgets to be marketable and sold. But it's worth trying developing a more intricate and data-focused interface.
I will remember your scenario while developing my Boostrap admin template. Thanks.
I will remember your scenario while developing my Boostrap admin template. Thanks.
whenever you have your product ready:
if you're thinking about selling it and if you want to try to avoid losing a big % because of marketplace fees...you can get in touch with me ([email protected]) :)
I thought the typo in the title ("Teamplate") was another annoying neologism, almost made me glad to realize it's just a typo! :)
eheh. happy......and sorry about it. it's a typo.
> A new HTML5 Admin Teamplate
And I thought this is a new way of collaborative ("Team") template creation. :)
And I thought this is a new way of collaborative ("Team") template creation. :)
woops. sorry about that.
I like it. Nice and clean though, I'm not too big a fan of "flat", it gets the job done without too much fluff. For a developer strapped for time, something simple to slap on the back (no pun intended) definitely works.
Tinsey nitpick in UI http://www.html5admin.com/demo/ui.html , spacing between the input fields in "Inline form" could help, but that's definitely an easy fix.
Tinsey nitpick in UI http://www.html5admin.com/demo/ui.html , spacing between the input fields in "Inline form" could help, but that's definitely an easy fix.
Thanks for pointing that out.
I'll be on the quick patch this weekend :)
Like Bootstrap itself, this would greatly benefit from having the line-height in body set to 1.6 or 1.7.
Test it with Inspect Element: http://www.html5admin.com/demo/ and http://getbootstrap.com/css/
Test it with Inspect Element: http://www.html5admin.com/demo/ and http://getbootstrap.com/css/
Yeah, sure. Metronic clone.
http://themeforest.net/item/metronic-responsive-admin-dashbo...
http://themeforest.net/item/metronic-responsive-admin-dashbo...
Those don't even look remotely similar other than the general "flat ui" style.
thanks joshuacc!
they arent identical IMO, similar styles sure. plus so many of these admin themes share elements/styles.
I'm unsure of how you classify this as a 'clone'? They are both admin templates. That's the only similarity is it not?
it needs a bit more polish but already it is head and shoulders above metronic
This is a good compliment, thanks! (FYI: i didn't even know about metronic)
to be more specific, you need to go through it with a fine tooth comb, for example, in UI, the inline form's spacing is totally borked
http://www.html5admin.com/demo/ui.html
http://www.html5admin.com/demo/ui.html
NO. I can ensure you i did the whole template from scratch. I don't even know what metronic was until now.
Your definition of "clone" needs a bit of adjusting, methinks. Also, your history of posting one-sentence replies and dismissals isn't terribly productive.
thanks for noticing that eksith.
Am I the only one who thinks that those one-size-fits-all solutions (esp. Bootstrap) are really not the way to go? Sure, it drastically reduces the development time, but using templates for specific purposes are meant to fail, aren't they?
"Meant to fail" is a bit of a strong phrasing; like in all things, it depends. Bootstrap and the like are ideal if you just need to get something up and running without looking terrible, I've used it in both my current and previous project. For an end-product though, I'm not sure if it's ideal. In my previous project, we ended up hiring a CSS jesus who single-handedly created a Bootstrap-like framework (or based it on Bootstrap) for the entire company's web projects (a large international bank). In my current assignment, we use Bootstrap with a number of customisations and custom parts. In both cases, Bootstrap was used to create something pretty, fast - without again falling into the 'how to css positioning' rabbit hole.
It's good but I think it needs a bit more work. I have found a couple issues.
Sliders do not work in firefox, they are missing the handles.
The switches or very difficult to understand whats active. However I guess that's a common issue with switches like these.
Some other things seem broken for me too. The html5 date picker "Works on every HTML5 device" doesn't work along with the colour picker.
I do like that ink filepicker though. Not seen that before, very useful.
Personally I would go for something on wrapbootstrap eg: https://wrapbootstrap.com/theme/ace-responsive-admin-templat...
Sliders do not work in firefox, they are missing the handles.
The switches or very difficult to understand whats active. However I guess that's a common issue with switches like these.
Some other things seem broken for me too. The html5 date picker "Works on every HTML5 device" doesn't work along with the colour picker.
I do like that ink filepicker though. Not seen that before, very useful.
Personally I would go for something on wrapbootstrap eg: https://wrapbootstrap.com/theme/ace-responsive-admin-templat...
What version of FireFox are you using? I'm using FF24 and the sliders and date picker work as expected. Can you provide steps for reproducing?
Here's a screen shot. http://sdrv.ms/16sGL2Z
I'm using FF24. When turning off box shadow or opacity the handles show fine.
I have a feeling it could be a rendering issue with the GPU?
I'm using FF24. When turning off box shadow or opacity the handles show fine.
I have a feeling it could be a rendering issue with the GPU?
Yep. I just switched off GPU acceleration restarted FF and it now renders fine.
good to know.
same here.
Font Awesome stuff fails to load for me in firefox 24 for this site. If you are associated with the site, this might be the problem. http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxc...
Thanks for pointing that out.
I'll add it to my TODOs.
That's a really nice, really usefully thorough admin template. Good work dude.
Small suggestion - I found the demo pages very, very busy and tricky to parse at first. Perhaps a few sample layout pages with a bit more space on them could be a good idea before people get to the "kitchen sink" style pages?
Small suggestion - I found the demo pages very, very busy and tricky to parse at first. Perhaps a few sample layout pages with a bit more space on them could be a good idea before people get to the "kitchen sink" style pages?
mh. good thought. I'll work on it this weekend!
Thanks!
I like what I saw until I saw that it wasn't open source and based on Bootstrap. This saddens me.
It's nice, but did that page really need 30 seconds for the text and images to render at all?
bluehost
I think the DesignModo guys set the standard for paid themes with their FlatUI pack which is also Bootstrap based.
http://designmodo.com/flat/
The flat design and teal colors remind me of twm:
http://www.tuxradar.com/files/LXF2.roundup.twm-1.jpg
http://en.wikipedia.org/wiki/Twm
http://www.tuxradar.com/files/LXF2.roundup.twm-1.jpg
http://en.wikipedia.org/wiki/Twm
This template needs about 2x as many features (really just integrating other's libraries, like all other templates) if it's going to compete with other bootstrap templates out there (which sell for less).
"2x as many features". Mh. Ok. Examples?
I can't tell the difference between the different licenses. The description for each seems to be exactly the same, so what's the difference between them?
Finally a free admin bootstrap theme! These are stinkin' hard to find, actually this is the first I've seen. Well done sir. Btw, were is the github link?
It's 15-55 EUR for the theme
http://www.html5admin.com/download/
http://www.html5admin.com/download/
-_- The search continues!
I have a few that are kind of free:
http://portnine.com/bootstrap-themes
I actually just googled after my last comment and found your site. Very nice. Looks like more options are popping up since I last looked. Thank you sir.
:) The First version of HTML5 Admin was for free and opensource (https://github.com/ricricucit/html5admin) but it's never really been supported by the community...it's still there...but kinda old
Not one of the best designs, especially at that price.
really?
20EUR to save you -at least- 1 week of work or a paid professional guy to help you out with HTML/CSS/JS while you focus on back-end code?
Seems reasonable to me.
Seems reasonable to me.
That's one thing that has always bugged me about some developers. Some have the attitude that they should never pay for anything, and that "I could code this in a few days myself" instead of paying $20 and have it implemented in an hour.
Well, one problem is that you never really get it implemented in an hour. If I buy this, then I have to go through this massive design, figure out how they're doing things and figure out how it fits in my coded implementation and then go through an actually wire up all the code that I already have in place to actually make these templates work.
I'm really just trading one week of development time for one week of implementation time. Will the end product look prettier? For some people, sure. But for others, it's a massive leap of faith. And since I have no free entry point to wire things up with without first dropping the cash (in Euros, what is that in real money? ;) ), it's a huge barrier to entry.
I was about to go and grab this for a project I'm working on. The interface is clean and nice and I really like it. But since I can't evaluate it with my actual production codebase, it's a nonstarter. In a world with millions of free templates (of varying quality), one paid template is a big deal.
But you are right. I'll drop thousands of dollars on things that WILL make me slightly more productive as a developer. But I won't drop $20 on something that MIGHT potentially make me more productive.
I'm really just trading one week of development time for one week of implementation time. Will the end product look prettier? For some people, sure. But for others, it's a massive leap of faith. And since I have no free entry point to wire things up with without first dropping the cash (in Euros, what is that in real money? ;) ), it's a huge barrier to entry.
I was about to go and grab this for a project I'm working on. The interface is clean and nice and I really like it. But since I can't evaluate it with my actual production codebase, it's a nonstarter. In a world with millions of free templates (of varying quality), one paid template is a big deal.
But you are right. I'll drop thousands of dollars on things that WILL make me slightly more productive as a developer. But I won't drop $20 on something that MIGHT potentially make me more productive.
Well...where i say "DEV Friendly"...i mean it.
The steps to create a new page would be: 1) grab the "boilerplate template page" 2) start doing your own stuff 3) check out examples in other templates. (5 minutes?)
Plus: all extra JS and CSS are in their place...so you won't take more than 5 minutes to understand where to look at. All the rest is simple custom code (HTML,JS or CSS)...but it's pretty straight forward.
What i'm saying is...i am a developer and i really think it's much more "developer friendly" than all the other templates (10-12) i've been using before creating HTML5 Admin.
JFYI: Even creating your external inclusions of the "top menu" and "right menu" with eg. top-nav.php and left-nav.php won't take you more than 10 minutes.
Apart from that...i invite anybody that criticize the price to build an Administration Template.
Once everything's done (and well commented and well organize) prepare the scripts for distribution, define licenses, prepare the commercial website for selling it, etc. and just then........let me know how long, all that, took and how much is their price :)
We are not machines.
The steps to create a new page would be: 1) grab the "boilerplate template page" 2) start doing your own stuff 3) check out examples in other templates. (5 minutes?)
Plus: all extra JS and CSS are in their place...so you won't take more than 5 minutes to understand where to look at. All the rest is simple custom code (HTML,JS or CSS)...but it's pretty straight forward.
What i'm saying is...i am a developer and i really think it's much more "developer friendly" than all the other templates (10-12) i've been using before creating HTML5 Admin.
JFYI: Even creating your external inclusions of the "top menu" and "right menu" with eg. top-nav.php and left-nav.php won't take you more than 10 minutes.
Apart from that...i invite anybody that criticize the price to build an Administration Template.
Once everything's done (and well commented and well organize) prepare the scripts for distribution, define licenses, prepare the commercial website for selling it, etc. and just then........let me know how long, all that, took and how much is their price :)
We are not machines.
thanks maaaats.
[deleted]
I was thinking I would have to write something like this. With all the backend admin pages you would think there would be a nice template for it.
Good job!
Good job!
thanks!
Not sure what the licensing pricing is telling me here, it looks like all of the licenses are the same except the price?
thanks - I was already thinking it's just me not getting it :-)
same here - and the checkout doesn't seem to work either, getting the "card is empty" message in chrome and ie.
bluehost + wordpress + did not expect to have these many visits.
There might be problems in the CSS of the main website (apparently it's not one of the greatest WP Templates i've ever bought)
anyway...here's an image that shows you the prices options as they should be:
http://i.imgur.com/p6YzPHw.png
http://i.imgur.com/p6YzPHw.png
Am I the only one who doesn't like this? IMO for an administration site its pretty bad.
Nope, not only does half the widgets not work on my Chrome, it's actually very hard to look at for longer then 10 seconds.
about the "10 seconds thing" i guess it's a matter of taste.
but widgets are working.....you might have too many Chrome plugins installed...
You are not alone.
What I'd like to see is someone fixing Active Admin to work with Bootstrap.
Nice work. Are you selling it on any other websites or just html5admin.com?
just http://www.html5admin.com/download can i ask you "why this question" ?
you've clearly ripped off themes from wrapbootstrap http://wrapbootstrap.com/
identical icons, graphs, colors, animations.
identical icons, graphs, colors, animations.
The icons come with Bootstrap, the graphs appear to be open-source libraries like Flot, etc.
thanks for explaining.
First of all: NO, and guess what?
I can prove it with my nice bitbucket commits history.
Second: I won't prove it to someone that is clearly not able to spot the difference between original and ripped-off versions of products.
Second: I won't prove it to someone that is clearly not able to spot the difference between original and ripped-off versions of products.
he/she didn't rip them off. they just used the same libraries. font-awesome/glyphicons for icons, flot for graphs, etc.
thanks brndn
I wasn't surprised when Microsoft did it (they never had much design sense), but it was a surprise to see it in iOS.