royboycop
A little while ago, I got a Gmail account. Out of sheer stupidity, I decided on the username royboycop@gmail.com.
Today, I get this message on IM from Han:
hannypoooh: puhahahha
hannypoooh: i just got "royboycop"
hannypoooh: i was thinking... why the heck did he put the "cop" there?!?!
If you don't get my name, think about it for a while. Think about an old school movie featuring a cop ... that's robotic... yes.. yes... YOU GOT IT NOW. Good. Let's both laugh at my idiocy.
I spent about 8 hours on this new design for the Tabulas control panel (yes, yet ANOTHER redesign on the CP itself. I'm pretty happy with the way this one has turned out... (HTML Mock Up Link).
Stuff of interest to note:
- I'm moving towards heavy use on icons. I actually went out and purchased a set of icons to use ($$$!!!) for this site (an icon set I'm very happy about). Icons help minimize space, keep the interface graphical (so you don't have to friggin' read). There's a slight learning curve, but I think the benefits far outweight the costs of switching to heavy use of icons
- The top navbar. Too often have I gotten complains about the 'ugliness' of the top admin navbar. I'm thinking of using graphics instead of text (because ultimately you run into all sorts of nasty problems with overriding CSS and stuff) ... with... yes... icons.
- Not much has changed in terms of the "general" structure of the site. I still love the top green area (I think that is a Tabulas trademark).
- I've decided the "killer" app in Tabulas will be the messaging system. For that purpose, any new messages will be displayed on the top nav bar area in red.
- Most of the changes are simply in making the CP more "modern" looking...
- You'll notice the markup is completely dependent on CSS. I still use tables for tabular data (like the entries list in the mockup)
My only complain about this design is it seems a bit too "busy." But really in a content-rich environment like Tabulas, there really is no way around it at all.
But yes, this took 8 hours between yesterday and today. Most of the time was spent doing the Photoshop mockup ... then the rest of the time was getting it down to HTML/CSS. Another few hours will probably be spent spec-ing out all the display functions I'll need in PHP to output some of the more dynamic areas.
Onward, ho!
P.S. AudioMatch.net launched. If you want a free 14-day trial, leave me a message with your e-mail and I'll send you an invite. There's still a LOT of work to do with AM, but the basic structure of the site is up, so I can at least have some peace of mind.
Comment with Facebook
Want to comment with Tabulas?. Please login.
PimpCow (guest)
sal
roy
taris
MacDaddyTatsu (guest)
MacDaddyTatsu (guest)
I really like the look you are going for. Its clean and the layout of functions is good too. I know you already know this, but mouseover "alt" test helps a lot with image based naving. It can also save a lot of wasted space, by telling the client to move the mouse over an image to see its function. Widgets. People love them wether they know it or not...
- SIMPLICITY IS KING
I like that the new layout is more streamlined and that some of the more "obscure" features now have tabs at the top of the CP section. That is a stroke of brilliance, because it trims down the learning curve. Making the more usable functions available in a collapsible directory style layout always helps sub-naving too.
roy
umar
phineyae (guest)
I like the new CP..
vampirepiggy
Oooh, icons.
benwebber
The design's sweet, the interface is much more intuitive. What about adding mouseovers to the icons and tabs using Pixy/Shea's method? They add a certain bit of interactivity to the design. Makes the user feel like they're at a more professional page.
I really love, and have always loved that top green area. And the logo's nice too. Ever considered merch?
Also, using asterisks for alt tags seems to be a bother when using Firefox. I thought you could use an empty attribute like this: alt="".
Instead of cluttering the markup with dots separating the navbar-links, why not make the dot a background image and add padding? The navbar looks a bit wonky with styles disabled.
Normally, I add <hr> tags to my markup with the class "hide". I use CSS to hide them graphically, but when styles are disabled, they separate the sections of the site. Shea uses them too, check his page for an example.
The design's straight-forward, easy to use, and adaptable. Love it. And it's semantic, too.
roy
I never thought about doing the hr trick... I'll have to try it out later. Good stuff.
Note: I use asterisks because I remember reading somewhere back a LONG TIME AGO that this was the "proper" way to handle images... but now I guess it's just "" is the best thing.
hapy