Roundup of paid CMSs

Here is a large list of Australian CMS vendors. Guessing that means people that make custom commercial solutions and then help install and set them up custom for whoever buys them. http://www.steptwo.com.au/resources/australian-cms/

Stuff out there:

Traffik

http://www.playintraffik.com/Detailed_Features

Part of this new breed 'hosted application' type thingy.

A hosted website CMS / shopping cart / hosting / blog / customer database /community / email marketing / customer database / everything you can think of. Its about $30 per month minimum, goes up to $160 per month. You only pay month by month.

They offer a 30 day trial where you can build your own thing and see if its good. From brief looking at it it looks like pretty amazing and they have thought of everything. So if its a large site, and your going to be looking at paying $30 per month just for hosting anyway, then this could be good to look at because you get an all in one solution forall the things a business generally neeeds. But its a bit risky because its their own proprietry solution, so your wholebusiness is tied into them - and the web is meant to be FREE. It could get messy if you try and port over to someone else. Still, a neat looking solution.

Light CMS
http://www.speaklight.com/how-it-works
Another monthly paid CMS / hosting solution. Seductive because they also offer slicing services. You could pretty much hand them a psd and then soon enough client would have their own editable site - then they can make the million rounds of changes themselves then using the CMS. Fuck they could even design it themselves in microsoft paint and send it to these guys and i bet theyd be stoked with the result and if they wanted changes there'd just a buy addition paypal button or something on the support ticket I bet. Cant argue with that button. Future is now.

GOOD

• They can slice and CMS and host - all in one go. Quick and nasty and done yesterday.
• They let you brand the CMS and support.
• They reckon you should markup their monthly bill... (lets all get rich together sort of deal)
  
• Good for clients who dont have much capital to invest in a custom CMS right at the beginning. They can pay for it over a few years. By then they'll want a new site anyway. So when you look at it that way - it could actually turn out to be a decent option for microsites and whatever for startups, if they go bust, at least they havnt spent heaps on a custom CMS, just the easy to manage monthly bill - better for SMB cashflow.

BAD

• They dont do email hosting - they recommend gmail...
• Imagine having to chase a client up for their web hosting fees every month or even year - what a drag! Youd spend the money your making admining the payments (or getting overdraw fees for the company billing you monthly whether or not the client wants to pay). Think this only good if you have an accounts department. Or you get the clients credit card details.
• The internet is meant to be free. (but guess hosting isnt and they are providing hosting in a way. HTML is free, php is free.
  
• if the company disappears - you have to salvage the site and recode the cms yourself because its proprietary... what a drag. Thats if you even have a backup somewhere.
• imagine anything beyond basic youd want to add they would charge you for customisations...
  

Still - its a pretty seductive idea- i think it will catch on.

Roundup of design portals / blogs

http://www.designshard.com/

Roundup of Open Source CMS solutions

Looking for CMS solutions / templates. Want to try them all out and see which is better and what each one is for or best for. Also need to find out how many people use each solution, would want to use the one with the most support and the most new modules and biggest forums.

CMS Made Simple

http://opensourcecms.com/

Need to have a go at trying this out properly. It dosnt look like theres that many modules available compared to what I imagine drupal would have. Theres photogallery though, forums etc etc.

From the site...

"The idea behind creating opensourceCMS revolved around the need to have a place where one could completely test content management systems in one place, before taking the time to install one."

So it seems that its not one solution but it is a source for many solutions, and by searching through different ones maybe theres already one out there that is just what you need, this is interesting.

From what I can tell unlike drupal which you can edit the content on the actual page your looking at, this requires you to login to an admin section and edit lists of pages. OK for a small site, but I think for a client its easier for them to get their head around the CMS if they just navigate to the actual page they want to edit and edit it. (Although guess to add content they still need to go to a different area.

Plone

Plone is meant to be more powerful than Drupal and Joomla and better for massive organisations, but needs a specific setup (a specific server / hosting setup which will probably be more expensive) and has a steeper learning curve for the web designer implementing it. Also it is written in Python, so getting a programmer to make extentions and customisations will be more expensive or harder to find than a PHP programmer to work on Drupal / Joomla.

Joomla!

From a quick browse of reviews, Joomla (like Drupal), is good for non-profit organisation websites. It is considered very easy to set up and get going and to learn to use. However, it isnt considered as powerful as Drupal in some respects. And advantage of it is that it is built with PHP, so if you need a customisation done, this shouldnt be too expensive to get programmed.

Joomla has a large commercial development community. A shopping cart built in, better calendars and is easier to learn.

Drupal

Good for organisations that need a straightforward setup but a fair ammount of power. It sits in the middle of Plone and Joomla in regards to power and ease of use. Soa good compromise. Its written in PHP so again cheap for getting customisations made.

Heres an excellent table of comparison features between Drupal and Joomla. http://www.alledia.com/blog/general-cms-issues/joomla-and-drupal-%11-which-one-is-right-for-you?/

Drupal dosnt have a shopping cart built in, it is getting one soon (Ubercart). Drupal is more standards compliant. Drupal dosnt have great event calendars or Templates / Themes (which isnt an issue Id want to design it anyway). Also Drupal has unlimited subcategory levels and cross categorisation. Overall looks like Drupal is the right choice at the moment.

Pligg

http://www.pligg.com/

Open Source: Looks like especially for large community sites, with rating systems. Utilises smarty templating system. Allows multiple authors, private user messaging, user profile pages etc.

The Secretary

http://secretary.nivr.net/index.php

"The Secretary is a different kind of content management system. It is simple, lightweight, easy-to-use and meant for designers and artists. It aims to be transparent by removing itself entirely from the front-end - forget the restrictive themed layouts of other systems and create truly unique websites again."

Looks really neato for artists portfolios - nice plugins with support for lightbox and cycle galleries. Good for little portfolio sites it seems, and made by a designer so looks really nice.
It is a content management system not a page management system. ie you just design your static site how you want it, then where you want the dynamic pieces you put in the database calls, just like a custom CMS would have. Anyway going to try it out ASAP.

Need still to find or see if its got
- ability to have video objects in portfolio / database
- ditto music player
- newer lightbox modules like smoothbox etc
- text formatting features - like blogger has
- its just been released - so community and modules are lacking...

Though - Drupal is still looking good for extendability down the track to adding say a blog, recent news, shopping cart - shit like that with no fuss....

Drawback with Drupal being templates not designed for primarily portfolios...

Gallery
http://gallery.menalto.com/
Looks like just a gallery feature that integrates into your cms. looks a bit complex...

eZ Publish
http://ez.no/ezpublish/
Used by EMI to manage their artists websites - so handles video and music well. Looks likeits good for large organisations.
features video, photo galleries, blogs etc. imports from office documents (yuk) has translations. Multiple upload files at once (good for large galleries). And ---- has a permissions workflow thing and you can cross publish content. They also have some sort of paid premium service which gives you extra goodies...

Plone4Artists
http://plone4artists.org/products
hmmmm.....
does video, audio, photos etc. plus a e-commerce module for selling cds/ artwork etc. theyve really thought about it. good if youve already got a plone site, but not out of the box if you dont...

Im still sold on secretary at the mo...

Photo Galleries - Not lightbox style popups

Heres some galleries Ive recently looked at and will consider using in the future. They are not popups like lightbox.

http://malsup.com/jquery/cycle/
A gallery slideshow with multiple possible effects for transitions. (auto cycling through images)

http://devkick.com/lab/galleria/
A gallery maker with fade transitions and auto thumnail navigation. Good for a proper gallery but dosnt have choice of transitions as far as I can tell.

http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/
Photogallery with slide transition auto pagination for navigation. No back link on photo clicking photo only goes forwards.

http://smoothgallery.jondesign.net/
I used Smoothgallery today for a project. It was pretty good and is working in IE6 fine, took a bit longer than lightbox to set up. Spent a bit of time in forums getting around little issues. The great thing about it though is that if the user has javascript switched off the images just list themselves neatly down the page like a blog. Use the downloaded example demoslide.html, and customised it. Basically the problems were:
• showArrows: false, - this breaks the gallery. To get rid of the arrows do it in the css by making the arrow links css opacity levels be 0 everywhere.
• Deleting the 'open image' href will break the gallery unless you have added the option embedLinks: false, that has the added benefit of removing the lightbulb from the middle of the picture.
• Delecting the thumbnail image links breaks the gallery unless you specify the option showCarousel: false,
• You can easily remove the image title/ caption with the declaration showInfopane: false,

Tripoli - HTML CSS resetter and layout generator

Tripoli - HTML resetter. Simply is a base stylesheet that makes pretty CSS styling by default of all the elements from the get go. Blockquotes look great. So do lists, tables, forms. etc. Also has plugins for special typographic goodness/correctness and extra visual formatting...
Going to try this on the next project - its gives you a great clean place to start with everything looking nice and with browser consistency tested already.
http://devkick.com/lab/tripoli/sample.php?base=base&visual=visual&type=type

For extra rapidness - use in conjunction with...
Tripoli CSS layout tool - great little layout generator for making common web layouts that have already been browser tested. Just add your nav!
http://devkick.com/lab/tripoli/layout.php?lay=l1&width=wide&style=equal

CSS typography - Using Helvetica Neue

Good looking styling I saw today using special fonts for hs. But what is Calibri??

h1, h2, h3, h4, h5 {
font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Calibri,sans-serif;
font-weight: 300;
}

A fix for the min-width problem?

Test this out it might be a good solution for the problem of not being able to set min-width in IE6. Look into what !important does...

#id {
min-height: 100px;
height:auto !important;
height:100px;
}

Multiple version of IE on one computer

FREE WINDOWS XP IMAGES FROM MICROSOFT WITH PRE INSTALLED IE6, IE7, IE8 BETA, ETC!!! it expires in sept 08 but they reckon theyll make new ones.

http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en

FREE VIRTUAL PC APPLICATION!!!!

http://www.microsoft.com/downloads/details.aspx?FamilyId=28C97D22-6EB8-4A09-A7F7-F6C7A1F000B5&displaylang=en

ITS AMAZING!!! WELL I HAVNT TRIED IT YET BUT WILL SOON.

and theres also this is development too - some sort of emulator app or something

http://www.my-debugbar.com/wiki/IETester/HomePage

10 colour contrast checking tools to improve the accessibility of your design

Colour Contrast / colour blindness: No need to feel paranoid, looks like there are tools out there that check it for you. Follow the link to the article in the heading.

To see a quick run down of what colour blindness or color blindness is go to this link:
http://www.vischeck.com/examples/
Basically to avoid problems in your design use lots of contrast and don't have red / green things on top of each other, or they will disappear, and don't use red/ green to differentiate something. Same goes for oranges, pinks, greens - they will look very similar.
I guessing you avoid problems too by using tints/ shades of a colour, since no matter what color a person is seeing, they can all see tints / shades of the black or white in the colour. Using white to highlight something is therefore always safe because everyone can see white on a darker background, whether that darker colour is meant to be green or red dosnt matter, so long as its dark enough green or red to provide contrast with the white.

I tested Sim Daltonism app (mac os x only) quickly and it was rad, you download the app and then it shows you whatever is on your screen around you curser with different colour blindness settings, so you can see webpages OR photoshop/ illustrator mockups. So you can rollover your links and so on in your browser and see what it looks like to colour blind people at the same time.
http://michelf.com/projects/sim-daltonism/

The one to remember to check is the most common form which they say is
"Deuteranomaly (partial red-green)
Complete or partial inability to see using middle-wavelength sensitive retinal cones making hard to distinguish between colors in the green-yellow-red section of the spectrum. This is the most common form of color blindness."

The only disapointing this is how aweful my designed looked to a colour blind person - the colours were icky! I guess they're used to this. But I'm going to try and check for Deuteranomaly (partial red-green) in new designs since it is the most common, I even know a few people who have it. I want the colours they see not to look like dogs breakfast even if the site is readable / useable.

For extra brownie points you could send screenshots using tools like this to your clients to show them you've tested it. Great to use at the (graphic) design stage aswell, run the tests on your mockups before presenting them so you dont have to change your design later for accessibility.

http://www.456bereastreet.com/ looks like it has much well written info on Accessibility and the like, read more there when time.

Web development mistakes

Excellent big list of common mistakes and oversights. Good to read over before starting a new site as a refresher because its so easy to forget these if you havn't been doing web work for awile.

Looking forward - Internet Explorer and the CSS box model

For a run down of the Internet Explorer Box Model CSS problem /solutions see this link:
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

To avoid problems with the IE5 Win border box model I have for years just been using the technique below automatically. I'm so used to using this method I'd actually forgotten why it was I did this in the first place. So I looked it up and what I was doing was to support IE5 Win! (Or IE6 in quirks mode - which it will never be because I always use a correct doctype).

Nesting Boxes Method For Avoiding Box Model Hacks
"One solution to the box model problem is to not assign padding or border to a DIV to which you have assigned a width. If you don't need a border effect, you can get your padding by simply setting margin or padding on all the box elements (DIVs, Ps, BLOCKQUOTEs, etc) contained with the DIV. If you need a border, simply nest a DIV within that DIV, do not assign it a width (it will fill up its parent DIV), and assign a border to the nested DIV."
Or more simply "...avoid specifying both width and padding or border for the same element. This ensures that all browsers will use the same total width, no matter which box model they use."

So, if you now make sites with the sentiment of 'fuck you IE5 Win you dont even exist' which alot of people are doing now, you can stop thinking 'padding is evil'.

A reminder, the padding/borders were only evil on a div with a stated width. Theres no problem if the div is auto width. Again I was so used to padding / borders being evil I was avoiding them everywhere in favor of margins.

It is archaic and time consuming to be going to all this extra effort of putting margins on all your little contained elements just for IE5. Or special hack values in your CSS. Instead use padding and borders to the W3C spec, and then if your project really does require IE5 support (lots of users who are old, poor, underfunded etc), add an IE5 only stylesheet using conditional comments, and in that, make the width of your divs be = (width+left border+right border+left padding+right padding).

One thing I just realised when writing that was that not having padding / borders on fixed width divs in the past made making layout size calculations alot simpler. All I've had to remember using the nesting method is margins+width, which simple to calculate.

But if Im switching to using padding and borders on my fixed width divs in the future, the calculation becomes: WIDTH MY DIV TAKES UP = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. Thats heaps of values to think about! And some times people like to have their text padding in ems so it relates to their font size, so if that is the case, then calculating the width your div takes up becomes tricky, how do you add a pixel and an em?

So depending on your situation, it could turn out to be better to keep doing the old nesting method on some layouts. But its nice to know you don't really have to anymore.

MailMan - Maling List Manager

http://www.list.org/features.html

Mailman, the GNU Mailing List Manager
Mailman is free software for managing electronic mail discussion and e-newsletter lists. Mailman is integrated with the web, making it easy for users to manage their accounts and for list owners to administer their lists. Mailman supports built-in archiving, automatic bounce processing, content filtering, digest delivery, spam filters, and more. See the features page for details.

isEngine

isEngine is a website package that lets you maintain your own site over the internet from anywhere in the world. It combines XML storage with HTML templates to produce a searchable website.
who it's for:
isEngine is built with artists & the arts industry in mind.
But it suits musicians, festivals, writers, journals, shops, manufacturers, just about anybody !
http://isengine.net/
http://isengine.net/calc.html
Good calculator / breakdown of costs of different services / add ons. The idea being that the company who made it gets residuals each year from all the sites they have. The customer gets a cheaper price than having it custom made because theyre using a boxed solution.

IE6 PNG Transparency Fixes

Looked for a few solutions for the IE6 transparency problem:

SUPERSLEIGHT:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
Basically trialling supersleight right now, its like a magic bullet that just whacks all the transparent pngs on your page without you having to do anything except include link to supersleight.js in conditional comments in your head tag. Think this is the best thing to try first since its so quick to get working.

I like especially that conditional comments mean this is all kept away from everything else. Apply it to the whole site, then go through page by page (browsing in a complete version of IE 6 of course) and see if its messed anything up, like links becoming not clickable, forms not working, or backgrounds becoming positioned weirdly. Then you can add specific fixes for these in your IE only stylesheet. If your lucky, it will work right out of the box, because in the supersleight code its applied fixes for making links clickable and making INPUT (forms stuff) areas work.

If any links etc dont work, the easiest way to fix is put in your IE only stylesheet the thing thats not working with position relative and z-index:1 for good measure. You can just list everything you can think of aswell to be paranoid:
a, li a, INPUT, TEXTAREA, SELECT, OPTION, BUTTON {
position: relative;
z-index: 1;
}

Sometimes it still will break things, like when i had an image map, the rollovers stopped being active. I had to apply a position:relative to the div that was containing the image map which is a child of a background which has transparency. Dont think about it too much, just whatever is not working, put a position relative on the div it is in. (But if its in a div that has transparency, youll need to make and extra div wrapper inside the div that has transparency, and make THAT position:relative. Theres also the issue of it not being applied to the rolled over image out of the box, but havn't got to that yet, think it just has be be called again when the image is rolled over.

ALPHAIMAGELOADER ON ITS OWN:
If your lucky and your site has only a couple of transparent areas, ie backgrounds, then you can apply fixes specifically using the AlphaImageLoader on its own. This below worked fine for a background that i had set to background-repeat:repeat, BUT it was a FLAT colour background that was semi transparent, not a patterned one like stripes or something. It stretches your background which is ok for a non-patterned background or non-gradiented background. actually might be ok for a gradient that repeats only one direction, havnt tried it though.

eg. in an IE6 only conditional commented stylesheet add your fixes
#adivwithatransbkrndthatrepeats {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrnd.png',sizingMethod='scale');
height: 1% /*might be necessary sometimes to make it have layout*/
}

if you want to apply it to a background image that dosnt repeat, ie a single logo that is a background image then use it with the sizing method crop instead.
#adivwithatransbkrndthatdosntrepeat {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/atransbkrndthatdosntrepeat.png',sizingMethod='crop');
}

Your links etc that are in the div getting the fix will stop being clickable, so youll need to then apply the position:relative bizzo as described above. And it dosnt work on divs or whatever that dont 'have layout'.

TWIN HELIX:
Will probably try this if i cant get the rollover to work using Supersleight, because it says it supports rollovers out of the box. The thing that concerned me was the way the relative linking had to be, it looked like it was going to be tricky with multiple folders site structure.
http://www.twinhelix.com/css/iepngfix/demo/

Some other solutions are listed here with more full descriptions of options:
http://www.dedestruct.com/2008/01/13/cross-browser-transparency-with-png/

JQUERY:
http://jquery.khurshid.com/ifixpng.php
and following on:
http://plugins.jquery.com/project/iFixPng2

This is an example of a site that uses tricky side columns with transparency fixes
http://www.builtbybuffalo.com/