Your own CMS?

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Your own CMS?

Post by omniuni »

This community has a lot of very talented members. I am currently developing my own CMS, and I would love to get some ideas of everyone's UI design.

So, my request is this: those of you that have a CMS that you've developed, please post a few screen shots showing it in use.

Once my CMS is working a bit better later today, I will post my own screen shots and would love some feedback.

The biggest problem I've had is trying to decide on a UI that presented all the links in the navigation while leaving most of the page open for whatever task was at hand. I settled for a banner across the top with links on it. All told; about 90px tall. Anyone have ideas for good and very spatially conservative navigation?

Thanks,
OmniUni
User avatar
kaisellgren
DevNet Resident
Posts: 1675
Joined: Sat Jan 07, 2006 5:52 am
Location: Lahti, Finland.

Re: Your own CMS?

Post by kaisellgren »

Hi,

I'm writing my own CMS. At the moment the current version 1.07 is very old, and poorly written. When I decided to code my own CMS, I first decided to code one 'badly written'. This way I can learn things that you can't learn from the books. This could be called - experience. I'm now rewriting my CMS from scratch and the newer version will be unexplainable better in terms of use, stability, performance, security and design.

I am actually a graphics artist. Not my job, but I do it as my hobby in addition to PHP, DBMS, web security, etc.

Let me show some of my graphical work I have done for my CMS.

http://i43.tinypic.com/2vv25hf.png
http://i43.tinypic.com/2rp4d2o.png

My upcoming new homepage theme :) http://i44.tinypic.com/ftepg4.png

And no copying guys ;)

Features I'm planning on for v2.0:
- Best security among all CMS
- Autoupdate (No need to ever update it yourself)
- Forum integration for phpBB, IPB, vB, PunBB, MyBB
- Powerful, beautiful, customizable and easy-to-use admin control panel
- Integrated payment systems
- Internal crontabs
- Multilingual websites
- Blazing fast performance through content caching, sql caching, template caching, parser caching, code caching, and the CMS will modify itself to fit YOUR website. So it is kind of coded for your site. Built-in AI brains.
- TriEffects library. Powerful picture effects library. Upload, manage and apply effects and settings to your website pictures easily.
- Compliance with HTML, XHTML, CSS, etc - no limitations what so ever.
- Easy to use template system
- Easy to code plugin system
Plus a lot more :)

I'm interested in knowing what other guys in here are going to implement in their CMS.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Your own CMS?

Post by omniuni »

I love the graphics. That little creature is awesome.

My CMS is really for people that have simpler needs, but still require a fully-functional CMS. My biggest focus has been a stable file structure so that I can easily add features as people need it. I'm on version 2.8, but it should be noted that version 1.0 could only handle text with bold, italic, underline, image, and horizontal rules.

> = In progress
- = Complete
* = Still need to write it

Features:
- Settings including metadata
- Text Snips w/ TinyMCE
> Support Ticket (right to my eMail along with their contact info, send a copy to my phone as well)
- Image Manager with Image Replace
- Thumbnail script supporting JPEG, PNG, GIF, and caching (uses MD5 hashes so independent of image name, and saves time so the server doesn't have to resample the image again, and since caching is done via the script, users can choose any size they want and it will be auto-cached)
> File Manager
> Support for managing Sub-Domains with installs
* Gallery Manager (Create galleries, associate cover images, rename images in galleries)
* Products Manager (For selling products, produces code for PayPal basic carts)
FunkyDude
Forum Newbie
Posts: 8
Joined: Mon Dec 15, 2008 5:19 pm

Re: Your own CMS?

Post by FunkyDude »

I understand your concern for the layout and link placement, my first version of my cms was too small, I had no idea I'd need all the space I could get for displaying tables and rows of results/images.. (see screenshot)

I opted to keep the links small on the left side of the page and make the site 960px wide.
wks-cms-pic.jpg
wks-cms-pic.jpg (77.82 KiB) Viewed 15273 times
wks-cms-pic2.jpg
wks-cms-pic2.jpg (43.19 KiB) Viewed 15272 times
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Your own CMS?

Post by volomike »

- I like an accordion menu on the left (using jQuery) because it's an efficient use of screen space to show a lot of menu items for admin stuff.

- I like using jQuery and AJAX to show forms and post errors and results in the right pane (although you need to use a trick or two in order to make page refreshes sort of work if they hit refresh). The reason is because when you're administering the CMS on a slow shared server, all these server roundtrips with a full page display seem slower than an AJAX call for some reason. It's also a little more elegant looking.

- For icons, I like using either Tango or Silk depending on task and icon size.

- For the CSS, I've recently been checking out ThemeRoller for jQuery UI.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Your own CMS?

Post by omniuni »

It's kind of funny to hear that, Volo, but I've recently started using the icons from the Oxygen project. I hesitate to use any fancy Javascript, though, because it can be slow, or glitchy on older browsers or computers. I like my CMS to be able to load on just about anything, it also means the least amount of issue with IE, and less of a chance of a browser (any browser) crash during admin work. Can you post some screen shots Volo?

FunkyDude, what options are available under "edit" for your images, and how does your support ticket work? Mine is really basic.
Image

Here are a few screen shots of my CMS:

Image

Image

Image

Note that I've shrunk the screen shots a bit for convenience.

I feel like even though you can fit a lot more links to tools in a vertical menu, I like having the full page width for the current tool being used. Besides, most websites don't have so many tasks they need to perform that they need more than 4 or 5 plugins enabled, 8 at a max, so I don't think I have reason to be concerned about that. Besides, I can always make a single plugin with a side menu for a lot of features.
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Your own CMS?

Post by volomike »

Browser shots? Not without blowing some NDAs on existing projects. Sorry. Perhaps when I get some time to make a separate version, I can share.

On Javascript hesitation. To each his own. I mean, I used to feel your way until something changed in 2008. Javascript has become an inevitability on every website I do now since 2007. One hundred percent of my previous clients in 2008 have wanted me to use it, and some quite extensively. When you look at stats on browsers, you basically see we're left with (mostly):

- Safari (first, second, third to latest versions)
- Opera (first, second, third to latest versions)
- Google Chrome
- IE6
- IE7
- Some IE8 beta appearing out there
- FF2
- FF3

I don't even bother about worrying about IE4 and IE5 users because to use those browsers on the Internet right now is not only a security nightmare for those users because of the unpatched exploits that have occurred since Microsoft stopped supporting those browsers (and the OSes upon which those browsers exist), but is probably Javascript bug city for them no matter where they go.

The stats on IE6 are becoming less and less each day. They are not zero yet, unfortunately, and probably won't be zero until a year after IE8 ships. IE6 is also exploit city, but not enough people know this.

So then it comes down to making your stuff work on the remaining browsers. This is where jQuery comes in. It can usually help you have a platform agnostic version of Javascript to let you select and modify stuff. This isn't 100% true, but is largely true. (You still need to do testing, but you'll far, far have less trouble.)

As for speed, here's how Javascript works -- I don't know your level of expertise on this. Once you download a myjavascript.js file once for a given website, it is cached and no longer needs to be downloaded. If your browser history is set large enough, it will not download that javascript unless the modify dates change or the browser history has expired. So, once the initial download is made, the site remains zippy fast with it. To speed up the download of jQuery, Google has a routine they recommend where you can download jQuery from them because they can often be far more responsive than your web server. If Google is inaccessible, then you can use a local jQuery copy from your webserver. (If you want that routine, let me know.)

As for browser crashes during admin, I haven't had clients tell me this is going on. However, I do a good bit of testing with jQuery and Firebug to ensure everything is okay. By using jQuery components, I often get more reliability than if I were to build them myself. (And it would look better and save me the time.) And when you're stuck doing something in jQUery, there's the Client forum on this site as well as a site like stackoverflow.com, or #jquery on IRC chat.

Another suggestion for you is to consider Facebook. A tremendous amount of people have Facebook. And it requires Javascript or it won't work right. They don't show any signs of letting up on their use of Javascript.

To improve speed of your Javascript, use AJAX. In other words, push content through AJAX back to the server, let the server compute on it, and then send the result back. If you do too much Javascript on the client end, it slows down any website.

I also like how I can have a single field among multiple fields on a settings control panel form, click Save, it goes through AJAX, the server validates and either saves it or returns an error to the client browser to display based on validation and formatting rules. If successful save, then it returns a message back saying the field was saved and can disable (and dim out) the save button unless the field to which it refers has been changed again.

Another cool thing coming out of jQuery is something called Themeroller CSS. For all jQuery UI components which support it, you can style your jQuery controls on a page in a certain pattern from a set of Themeroller themes -- giving you a time boost so you don't have to fight with CSS as much when styling jQuery UI components.

On Oxygen -- I didn't know that project existed. Thanks for pointing that site out.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Your own CMS?

Post by omniuni »

I don't know how your non-disclosures work, but perhaps just a shot of the menu with anything particularly telling blotted out (like the company in my CMS shots)? Otherwise, oh well.

As for JavaScript, yeah, Facebook does use it, and it uses it too much. I can't use Konqueror any more, because of that silly JavaScript they use for pictures and such. I HATE websites that use JavaScript like that, and I do not like Facebook.

JavaScript files may be cached, but it's a language interpreted on the users machine. It uses CPU time, and especially for things like animations, it can tax a browsers JS engine quite a bit. Google is trying to fix this with their compiler concept, but until that is the norm, I do not want to rely on JS for much more than some convenient things like showing or hiding boxes and such. As far as I'm concerned, if a page can't function without JS, it's a bad design-- especially for a CMS. Unlike user experience, the administrator can't "just leave" a CMS that doesn't work. They have to deal with it, and I can't force a client to "deal" without them finding someone else. Most of my clients right now are retail stores; they are now moving slowly to IE7. No FF. Oh well.

Of course, that's just my opinion. :)

Oh, and you can see the oxygen icons in my file manager screen shot.

http://www.oxygen-icons.org/
User avatar
kaisellgren
DevNet Resident
Posts: 1675
Joined: Sat Jan 07, 2006 5:52 am
Location: Lahti, Finland.

Re: Your own CMS?

Post by kaisellgren »

Why don't you just let the user choose whether to enable AJAX 'effects' or not?
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Your own CMS?

Post by omniuni »

Simplicity. Users, especially older people who hardly know what a web browser is, let alone AJAX and JavaScript don't like options like that. Besides, I like everyone just having the same user experience, none of this "hey, how come theirs does that" stuff.
User avatar
kaisellgren
DevNet Resident
Posts: 1675
Joined: Sat Jan 07, 2006 5:52 am
Location: Lahti, Finland.

Re: Your own CMS?

Post by kaisellgren »

omniuni wrote:Simplicity. Users, especially older people who hardly know what a web browser is, let alone AJAX and JavaScript don't like options like that. Besides, I like everyone just having the same user experience, none of this "hey, how come theirs does that" stuff.
I think you are overcomplicating things. Disable AJAX by default so no one will get any harm feelings if their CPU is too slow or browser does not support AJAX or what ever. If someone wants AJAX, he will enable it. You don't need to include this option in basic settings page, but rather make an advanced options page.
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Your own CMS?

Post by volomike »

The Javascript and the AJAX helps speed up the site tremendously because with every menu click you aren't having to refresh the entire site page. Field validation also runs faster because instead of repainting the entire page, menus and icons and all, then reloading the form fields as it was and displaying an error message about the fields, you merely write data into an errorbox DIV or a successbox DIV. For me, that saved me a tremendous amount of coding time and also makes users happy because of how responsive the site is.

The Javascript is short. There was the accordion menu, but another menu could suffice. And on a menu click, I use a simple jQuery statement:

Code: Select all

onclick="$('#right-pane').load('http://mysite.com/admin/edit-page');"
And then you could stop at that, or continue...

Posting is handled like this:

1. Turn off the submit functionality.

Code: Select all

 $('FORM').submit(function() {
  return false;
});
2. Make the submit button an image and capture it's click event to make it do:

Code: Select all

onclick="SubmitForm();"
3. This routine should handle that nicely:

Code: Select all

function SubmitForm() {
  var theData = $('#my-form').serialize();
  $('#my-form').post('http://mysite.com/post-page',{data: theData},function(result) {
    if (result.indexOf('ERROR: ') != -1) {
        result = result.split('ERROR: ').join('');
        $('#errorbox').html(result);
    } else {
        $('#successbox').html('Updated posted.');
    }
  });
}
4. To make this even more pleasant, you can use the .fadeIn() and .fadeOut() routines in jQuery before doing any .html() or .load() routine. That makes the errorbox and successbox messages look very professional. But that's optional. Another improvement would be to show an animated GIF progress bar or animated busy icon while the AJAX communication is going on, and jQuery gives you some few short routines to handle that nicely. Some might take it a step further by disabling the submit button, or overlaying a DIV over the dimensions of the form, while the AJAX comm. is going on.

5. On the PHP end of this, you receive $_POST['data'] data serialized, so you unserialize and process like you would a normal POST -- foreach($_REQUEST as $key => $value){ $$key = $value; }. (However, there are stronger routines that ensure the keys and values are what they say they are.) (Or, make it even easier by not using the serialize routine and using something called the Malsup jQuery Form API from malsup.com.) For a result back, you could simply use die($sMsg) where if you want to send an error, you do: $sMsg = 'ERROR: my error goes here'; otherwise, send an ordinary message without the 'ERROR: ' inside with a die statement like: die('Updated posted').

Anyway, my testing has shown me that all that will work in Opera*, Safari*, IE6, IE7, FF2, and FF3. (* 1, 2, 3 versions back)
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Your own CMS?

Post by Eran »

Why add an onclick if you already capture the submit event?

Code: Select all

$('form').submit(function(e) {
     e.preventDefault(); 
     submitForm(this); // no need to specify the form, just pass the element the event is attached to
});
 
function submitForm(form) { ... } 
This way it will trigger also from pressing enter inside a text input (which triggers form submission, but isn't a click event on the button)
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Your own CMS?

Post by volomike »

pytrin: Let me test that across the browsers to see if that still works. I think canceling events doesn't always work the same across browsers, but you could prove me wrong here.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Your own CMS?

Post by Eran »

If you are using jQuery, it normalizes the event for cross browser usage. - http://docs.jquery.com/Events_(Guide)
Post Reply