Default Admin Theme for D7
Drupal has an option I haven't seen in any other CMS: You can set a theme for the admin section to your liking. As nice as it is, it raises serious UX problems especially for new users, if admin and frontend theme is the same (see UX study Baltimore: Where is my site?) There has been talk and action to cure this in a simple way: get a default administration theme into core.
Having learnt that core issues require determination and endurance, I'd like to make a fresh start (apart from an existing issue about that:(http://drupal.org/node/79023) by introducing some possible guidelines and candidates.
Guidelines
So what is this all about? Apart from seperating Front- and Backend optically, why should we want a seperate Admin theme and which requirements should it meet?
1. Clever use of Space
One thing that bugs me about Admin and settings pages in Drupal is the waste of space. Everything is rendered in a vertical manner, a lot of space is wasted because often only a third of the horizontal space is used. On the right see a typical example from the comment settings: the descriptions could easily also flow inside the red-lined area.
Though I understand the reason for this: Modules can easily insert new settings into this because everything is vertical, I hope one day we will see the use of all that horizontal space. For the time being, how to improve the use of space without having to change the forms? Well: Paddings should be small, Fontsizes can also be set to 11px for many things.
This is one main reason I never use Garland for admin section: The fonts are way too big and a lot of unnecessary paddings (that are fine for frontend) are there.
Here is an example from a theme I've done myself: The simple trick to set the font size in the blocks table to 11px makes the table much smaller and nicer, still it is very readable.
2. Optical Hierarchy
There is lots and lots of elements in Admin section. So how can you emphasize more important things and diminish less important? Not too hard to say. Use Font coloring: text can have many shades of grey, and can use color (at least the major color, which would be blue in Garland), text can be smaller and bigger. Headings can be big headings and smaller headings. Very importand messages can get an Icon, which is easy to understand for its symbolic character. See the examples from pixture for the icons. These make a lot of sense for messages which are normally very important.
3. Candidates
These first guidelines imply that a lot of work has to go into detail in an admin theme: font sizing, how to present tables and tabs. Other than a front end theme, the primary focus is not on looking nice. Well sure it should look nice. But furthermore, it must be rational and have a very good Information hierarchy, readability and so on. So far I know three themes that present themselves as Candidates, of which one is not ported for D6 and maybe never will, but is still useful as an example. These candidates so far are RootCandy, Pixture and Aquasoft (which is not ported to D6).
Realizing that this gets too long for a single blog post, it will be a series ;) So in the next issue we will have more guidelines and a look at the candidates and the skills they get onto the dancefloor.
- Log in to post comments
Kontakt
rufzeichen-online.de
Kommentare
I approve, very good
I approve, very good iniciative! It whould be great to see an admin theme in core.
PR
Nice post and a worthy conversation. I just wanted to point out that the theme you refer to as Pixture is in fact "Pixture Reloaded", which is a fork (sanctioned by the original author of Pixture). The original is built with tables whereas PR is pure CSS, and only PR has the fancy icons (Lullacons).
pixture reloaded
Yah, I always mix that up. Maybe Jim Burnz and Hide will come to terms do drop the table version... Oh, fancy Icons are not in the original? Shame...
Another thing is that if
Another thing is that if there's a really wide table in the main content area (ex. Permissions), the body element should expand to include the whole thing. Don't try and use an overflow technique that either completely hides the content, or causes a scrollbar to appear outside of the viewport.
Serious canidates?
I must say, I dont entirely agree with this. It makes sense to just add an admin theme, to go for the mental model of users. But, isnt a small visual change enough?
Using color, smaller text sizes, shading ect? I am not sure what this is all about, but I have no idea how that could fix the admin theme other then adding more visual clutter.
Having looked at all the admin theme's, I dont concider any of them core worthy. Maybe your experience from clients is diffrent, but I dont see how an admin theme could happen for D7 nor if it should.
Thorough approach
Well, see the "candidates" in quotation marks. I just use them because they were the best I could find up to now and following the guidelines I try to depict.
I have been actively using aquasoft for quite some time and at the moment pixture reloaded and am quite happy with it. Would be interested what other themes people have used successfully as admin themes, this could bring light to preferences people have concerning what it should be like.
Sure: to really pull this off we must aim higher. But from the experience with long-standing discussions it is better to have a starting point to improve on. And as that, I believe the mentioned examples do their job quite well.
Maybe I can bring some light with the coming up issues of this series... (the post is not meant as a standalone statement)
My main objective is to find criteria that can help build a featureset that must be met by a coreworthy admin theme. It is a bit puristic to just call that "visual clutter" ;).
Look at the wordpress node edit form and how far they get by introducing about five or six optical "layers" that can be zoomed into (I mean different points of attention made with color, size, shape, weight and so on.) You can instintively always find the submit button and all kinds of things. That's what I mean by "information hierarchy".
But you are right: we gotta work hard. The world was not won in one day.
Decreasing font sizes
Decreasing font sizes doesn't improve usability, it will only cause eye strain.
I agree that the theme should be both elastic and as compact as reasonably possible, but that will be difficult for such a flexible system.
Thanks for posting the
Thanks for posting the tutorial.
If I have any questions, may I come back here to ask?
Go ahead
Well, why not. As long as it is embracing the topic...
dynamic font size
maybe it would make sense to have a dynamic font-size.
what i mean is using 'em' in the CSS file instead of 'px'. but this should be tested deeply with different browsers.
Mind the fact that css is
Mind the fact that css is very tricky across different browsers. i always test my sites in IE because i look at it as Murphy's Law (anything that could go wrong, will)
@walter Agreed. I often use
@walter
Agreed. I often use firefox,IE, and safari to take a look, and it surprises me how different the result can be. For a while I was also forgetting to clear the cache, and I thought changes were'nt taking effect. But by checking it really helps.
Themes and Templates
Thanks for the layout tips. They are very helpful us newbies. Are their any good templates that have adsense built in.
That's a nice feature
That's a nice feature actually. Without it is was simply confusing at times. Drupal will eventually take over as the number one CMS.
Great
Wow well written tutorial, I could easily follow it.
Such a great topic
Thanks for this useful information. superb!
This is a good topic
Thank you for putting this up for us.
I have to agree
I agree with wordpress land, can be confusing
Totally Agree
I totally agree with all those 3 guildilnes. thanks for this. very helpful.
Great work, keep it up. I
Great work, keep it up. I love returning back to this site and reading the quality content you always have on offer.
Action Movie
So cute! Keep up the good work!
Updates
Hiho, greetings. Are there any updates on this project? The last comment seemns to be rather old, just wanted to know if there are any updates.
Your tutorial was so easy to
Your tutorial was so easy to follow on. Thanks a lot. Keep up the good work.
This is good Articles.
It makes me clear about the D7 CMS. Thanks
This is useful tutorial
This is useful tutorial its make me more understand in drupal. I think drupal is very good cms, but for me it difficult to adjust.
Hard to switch?
Every time I see a well written tutorial like this I ask: is it hard to switch from WP to drupal? I've been thinking for some time and love the Drupal community but am worried about switching.
How much has Drupal changed since 2 years ago?
I tried using Drupal a while ago for a personal site of mine and to be honest I really wasn't liking it. I couldn't make heads nor tails of it - this theme looks a lot simpler though maybe I'll try it again.
Havent been using drupal
Havent been using drupal much but certainly looking forward to use it at once. Use WP a lot but intending to switch to drupal.
Can ay one point out to some basic web designer tutorials about drupal????
Thanks and regards
sam
http://www.bevyhost.com/forum
Drupal
Thanks for posting this information. I've been trying to find out more online about both wordpress and drupal. This tutorial was of help. Thanks! -Phil
re: Default Admin Theme for D7
Nice Post! Thanks for the comments.
Defualt
I actually went back to wordpress because drupal just seems to be way too complex.
sweet
I really like it but something about the layout is not simple
Nice layout
Admin areas are never the nicest of things to look at, but this has been thought out well. Good work. For the record i have a Magento Backend, and that is nicely designed too.
Magento
Ah, so yours is a magento shop? Looks nice.
Layout tips
Thanks for the layout tips. I'm a newbie at this so this was appreciated. I currently use WordPress (no expert there either)cos the hotel I work for in Prague uses it. Keep up the good work.
Interesting tips
Drupal default theme is nice, anyway you have made a great explanation.
Super
Informationen hast du hier zusammengestellt. Danke für die Tipps kann ich sehr gut gebrauchen.
thanks
Excellently written article, if only all bloggers offered the same content as you, the internet would be a much better place. Please keep it up! Cheers
العاب بناتبناتستار اكاديمي 6
Hello! - First I would like
Hello!
- First I would like to say, great articles you've posted today.
- Second, your bumping your posts to the top of Drupal planet, somehow!
I'm using the drupal planet feed and your articles keep poping up has changed content, and on http://drupal.org/planet they keep being bumped to the top. I don't know what's happening, but you guys need to sort this out. It's starting to be anoying...
Hey look, 3 new content on drupal planet! Let's check it out! DOH it's the same 3 articles, from this morning...
- Third, keep posting articles, they are always of great value to someone!
Thanks!
No to admin theme by default!
WHile admin themes are great options, I do not think that they should be enabled by default and themers SHOULD cater for the admin pages too - if they just cater for a basic uncluttered site, they will miss out many levels of complexity of their themes and the layours may break on more complicated site pages that are not admin pages.
In short, the admin pages are a quick stress test for the theme and if the theme cannot pass on them, IMO the chances are there will be trouble on the road ahead with that there.
I basically have totally
I basically have totally converted to the zen style of theming, but last time Zen was a candidate for inclusion as the default theme, Garland is what we ended up with. There's no reason we can't create a really polished colorable subtheme based on Zen. Although clearly we can't just remove Galand, removing themes that just don't make sense anymore is a good thing.
I want to create a front page
I want to create a front page that's styled differently from the rest of your site? Perhaps you need a separate admin theme? Or how about a login page which only shows the login block and nothing else? With a little PHP knowledge these problems are easy to solve.
Drupal 7 is great!!!! Thanks
Drupal 7 is great!!!! Thanks for the post yo.
Re: Drupal 7
I am not so familiar with Drupal and so I am suprised that Drupal 7 is out (thought Drupal 6 is state of the art). Templates in general will work with Drupal 7?
Really nice post. Drupal is
Really nice post. Drupal is one of the best CMS's besides Wordpress.
Thank's for the information.