How to Build a Maintainable Site using CushyCMS and Twitter

May 13th in Site Builds by Collis Ta'eed

Sometimes it seems there are as many CMS products out there as there are web developers. In this tutorial we're going to build a simple one-page site and then in less than 5 minutes, get it setup with a Twitter feed for daily updates and with CushyCMS for general content. If you haven't seen it, Cushy is a completely free and extremely simple to use product that's come on the market recently.

Author: Collis Ta'eed

Hello! I'm a web and graphic designer who loves blogging, startups and everything about the web. You can find me on Twitter and I blog at The Netsetter

Demo and Source Code

The Brief!

Recently I came to the realisation that I should really have a personal site. I don't take design work, but it's nice to have a place to refer to when I write bio's and so on. Also a month or so ago I started using Twitter to put up my daily thoughts on business, the web and stuff. This seemed like a logical thing to stick on my personal page. Also it's important that the site be easy to manage so I don't let it get outta date. So you could say this was my brief.

First a Design

Before getting to the build I spent a few hours in Photoshop trying some ideas. I need something simple - I don't have time for anything else, professional - who knows who is going to visit, and nice looking - I do claim to be a designer right?

Anyhow here is my design. I used a nice vector illustration from iStock - always good for doing something quick that looks awesome! I used a really nice and free font - Colaborate Thin. And finally a nice orange-blue colour scheme that by a stroke of good fortune turned out to match my orange photo!

So I won't dwell on the design too much. If you click the image below you can get a large version of the JPG in case you want to follow along.

Step 1 - Cutting up Images

Looking at the design in Photoshop, it's clear there are a bunch of images I'm going to need. If this were a more complex design, I'd use Photoshop's Slice tool, but it's pretty simple, so I'll just crop the file and create a bunch of images - one for the table, one for all the titles, one for the "follow me" bubble, one for the nettuts image and one for the photo of my giant forehead! Here are the images I made:

Note I've only shown one title, but of course I actually made lots of those.

Step 2 - Planning the HTML

Next we plan our HTML layout. Very deliberately this site is going to be extremely easy to build. It's simply a sequence of blocks. Previously I've written about how to us Absolute Positioning to make a layout, this time we're going to use super simple Relative Positioning.

As you will recall when you place elements on a page they have a natural place they go to, relative to elements that came before. Because we're not using columns or really anything fancy in this design it's going to be perfect for using this regular postioning.

As a general rule, whenever you want to make your life easy in HTML, it's best to do things in blocks laid out horizontally. This is the easiest way to work with CSS and doesn't require much fiddling for browser compatibility. As soon as you start putting in columned layouts, things get a bit trickier. So we'll save that for another tutorial, on another project.

So anyhow the layout we'll use is something like this:

Main Heading

Section Heading
Div Block of Content

Section Heading
Div Block of Content

Section Heading
Div Block of Content

... and so on...

The best thing about this plan is that later on if we suddenly go "hey I wish I had my an extra block for favourite images", it's like no problemo! Just slip it in, use the same CSS classes and everything. This really is the simplest layout around, and with a nice design it can look really cool nonetheless!

Step 3 - Laying out the initial HTML

OK Create an index.html file and then here's my first stab at the HTML, it's not perfect and is missing the Twitter bit, but it's a good starting point and we can make a few adjustments later as we go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Collis Ta'eed - A Little About Me</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
	
    <h1><span>Hi I'm Collis, entrepreneur, blogger and designer.</span></h1>

	<img src="images/title_about_nm.jpg" alt="About Me" />
    <div id="about" class="content_box">
    
    	<a href=""><img src="images/photo_sm.jpg" class="photo" alt="Collis" /></a>
	    <p>After working as a web designer - both employed and freelance - I cofounded a startup with a few friends in 2006.  Our company, <a href="http://eden.cc">Eden</a>, has since grown and I've had the good fortune to work on lots of very exciting and interesting projects, everything from <a href="http://flashden.net">FlashDen</a> to <a href="http://blogactionday.org">Blog Action Day</a>. </p>

		<p>Thanks to the brilliant nature of the web, I'm currently living and working out of Hong Kong and travelling the world. You can find me online on <a href="http://twitter.com/collis">Twitter</a> where I post random thoughts, or you can send me an email from the form at the bottom of this page.  Thanks for stopping by!</p>
    
    </div>
    
    <img src="images/title_thoughts_nm.jpg" alt="Thoughts via Twitter" />
    <div id="thoughts" class="content_box">
    </div>
    
    
    <img src="images/title_project_nm.jpg" alt="Latest Projects" />
    <div id="project" class="content_box">
    
    	<a href="http://nettuts.com"><img src="images/project_nettuts.jpg" /></a>
        <a href="http://nettuts.com">NETTUTS</a>
		<p>In April Eden launched a sister site to PSDTUTS which Iíve been working on.  The site hosts web development and design tutorials.</p>
    
    </div>
    
    <img src="images/title_links_nm.jpg" alt="Links" />
    <div id="links" class="content_box">
    
    	<p>Some links to sites that I have a hand in:</p>
        
        <ul>
        	<li><a href="http://flashden.net">FlashDen</a> - Our main Eden project</li>
        	<li><a href="http://freelanceswitch.com/book">How to Be a Rockstar Freelancer</a> - A book I cowrote with my lovely wife</li>
        	<li><a href="http://freelanceswitch.com">FreelanceSwitch</a> - The highly successful blog on freelancing</li>
        	<li><a href="http://psdtuts.com">PSDTUTS</a> - The best photoshop blog around!</li>
        	<li><a href="http://blogactionday.org">Blog Action Day</a> - A nonprofit, annual event</li>
        </ul>  
                                                    
    </div>
    
    <img src="images/title_contact_nm.jpg" alt="Contact"/>
    <div id="contact" class="content_box">
    
    <p>I'm the first to admit that Iím not very good at answering all my emails, but I do my best and if you have need, then you can <a href="mailto:whoiscollis@gmail.com">email me</a>.</p>
    
    </div>
    
    
</div>
</body>
</html>

Things to note:

• I've linked to a file called "style.css". This is where we'll place our styles later, so go ahead and create a file with that name.
• The whole thing is inside a <div id="container">. I did this partly out of habit to be honest, but I'm going to use the <div> to place my background image. and to make sure I don't stray out of the 1000px width that I need to stay inside of for people on 1024px x 768px screens.
• The "logo" heading is inside a <h1><span></span></h1>. Then we'll use the <span> part to make the text invisible and give it a background image so it looks like the design. This has benefits for SEO, and was a suggestion from the comments of a previous NETTUTS tutorial (thank you commenter whose name I've forgotten, but whose suggestion I've taken to using! )
• Each section is an <img> title and then a <div class="content_box">. I've filled them in mostly with content, except for the Twitter box which we'll worry about in the next step.

Step 4 - Add a little CSS

Now we'll add a tiny bit of CSS to make the page look a bit more like where it's going to end up. Create your 'style.css' file and place these two definitions in:

body {
	background-color:#191e25;
	margin:0; padding:0;	
	color:#5f6874;
	font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Sans-serif;
	font-size:13px;
	line-height:21px;
}

#container {
	width:900px;
	padding:50px;
	padding-top:30px;
	background-image:url(images/Computer.jpg);
	background-repeat:no-repeat;
	background-position:top right;
}

A couple things to note:

• I've set a font-family that uses a slightly unusual set of fonts. Lucida Grande is on most, if not all Macs, and Lucida Sans Unicode is on most PC's, so most people should see a nice Lucida typeface. If not they'll still see Arial or some default sans-serif. Either ways Lucida looks cool, and that's what I get to see :-)
• I've used my <div id="container" to place that computer image in the background, located at the top and right, and set the width of my content area to be 900px + 50px left padding + 50px right padding = 1000px.
• The 50px padding we've set in the container will effectively do most of our positioning for us on the page.

And here's how our page is looking now:

Step 5 - Now Let's Grab the Twitter

Now we add the content from Twitter. This is a great way of making the page feel really dynamic because I update my Twitter feed most days. Also it'll be a way of driving people over to add me to their Twitter networks, and then in the future when I launch new sites I can drive traffic to new places. So really it's all part of my not-particularly-devious plan.

So Twitter have made grabbing their feed really easy for us, just do the following:

1. Log in to your Twitter account
2. Click that Yellow box in the right hand bar that says "Put your updates on your site!"
3. When prompted for MySpace, Blogger, etc, choose "Other"
4. Select the HTML/JS option so we can style it up with CSS later
5. Then set the Number of Updates (I set mine to 3) and copy + paste the code.

Here's the process in images!

And here's the code that Twitter gives us:

<div id="twitter_div">

<ul id="twitter_update_list"></ul></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/collis.json?callback=twitterCallback2&count=3"></script>

Note I deleted the <h2> bit that Twitter inserts in, because we don't need an extra title, we've already got one. Then it's also worth taking Twitter's advice and moving the two Javascript lines to the bottom of the page just before </body>. That way it loads in last. Because Twitter is notorious for its downtime, this will stop them from killing our site accidentally!

So by looking at the HTML they've given us, we can guess that the Javascript is probably going to fill in that <ul> with our tweets inside the <li>'s it'll place there. And that is exactly what it does do...

Step 6 - Add Google Analytics

Now at this point I will also add in some Javascript to hook my site up with Google Analytics. I think most web developers have heard of Analytics, but if by chance you've been living under a rock, I really recommend trying it out. It's free, and it's a powerful way to monitor your traffic. When you've gotten an account, you simple Create a New Website Profile, enter a domain name and you'll get in exchange some Javascript code to paste into your HTML documents. Easy peasy!

Step 7 - More CSS

Next we'll add a couple more styles that will get us even closer to our end product. They are:

a img { border:0 }

a { color:#cc5630; text-decoration:none; }
a:hover { color:#ffffff; }

.content_box {
	width:590px;
	margin-top:15px;
	margin-bottom:30px;
}

Here we are removing borders of linked images (i.e. the link to NETTUTS and the photo of me which will link to a bigger version), also we're setting the colour of our links on the page in general. Finally with the content_box style we set a width for our content blobs and using top and bottom margins separate them up on the page. Here's how our page looks now:

The next thing to do is to get some text-wrapping happening around our two images. The first thing to do is add an class to the images we want to wrap (the photo and the nettuts image). I didn't think to do this earlier, but can see I need to now. So we change the images to have:

<img src="images/photo_sm.jpg" class="photo" alt="Collis"/>

Then we add a quick style to make the float to the left with a bit of a margin, like this:

img.photo {
	float:left; margin-right:20px;
}

Unfortunately while nice and simple, this solution doesn't quite make the grade because my text block is too long, so it's wrapping ... booo! Never mind, easily fixed. We'll place that text in it's own block and make it float too.

So we'll adjust this content_box so the HTML code is now:

	<div id="about" class="content_box">
    
    	<a href="/images/collis.tif"><img src="images/photo_sm.jpg" class="photo" alt="Collis"/></a>
	    <div class="about_text">
            <p>After working as a web designer - both employed and freelance - I cofounded a startup with a few friends in 2006.  Our company, <a href="http://eden.cc">Eden</a>, has since grown and I've had the good fortune to work on lots of very exciting and interesting projects, everything from <a href="http://flashden.net">FlashDen</a> to <a href="http://blogactionday.org">Blog Action Day</a>. </p>
    
            <p>Thanks to the brilliant nature of the web, I'm currently living and working out of Hong Kong and travelling the world. You can find me online on <a href="http://twitter.com/collis">Twitter</a> where I post random thoughts, or you can send me an email from the form at the bottom of this page.  Thanks for stopping by!</p>
		</div>  
        
        <div class="clear"></div>
          
    </div>

So you can see I've wrapped the text in a <div class="about_text"></div> and then added a <div class="clear"></div> at the bottom. This extra <div> will be used to clear the floats, otherwise the floating layers would wind up going over the top of the content further down the page. So here is the additional CSS code to make this work:

.about_text {
	float:left; width:380px;

}
.clear { clear:both;}

We have to give our about_text block a width so it floats alongside the photo. Now that fixes our problem nicely. However if you look at the image shown below, it seems like there is a weird gap that's appearing between the top of our text block and the image.

Weird gaps are the worst to come across, because it can be really hard to figure out what's causing them. In our case here though I happen to remember that the <p> tag has a default top margin which if we get rid of will probably solve our issue. Here's the code to fix this:

	p { margin:0px; margin-bottom:20px; }

So now every paragraph will have no margin except 20px below it (spacing out the next paragraph element).

Step 8 - Replace our Heading

As I mentioned earlier we're going to use a bit of CSS to replace our <h1> tag at the top with the much nicer looking image so we get SEO benefits and nice looking title. If I was conscientious I would do this technique with all those subheadings too ... but I'm not!

So all we're going to do is use the <span> tag that we so cleverly placed earlier to set the text's display to none - making it hidden. Then we'll give the <h1> a height so the background image doesn't get cut off, and finally we'll set the image to appear. Here's the CSS code we need to make this happen:

h1 {
	background-image:url(images/title_main.jpg);
	background-repeat:no-repeat;
	height:60px;
	margin-bottom:50px;
}
h1 span {
	display:none;
}

Step 9 - Style the Twitter Area

Next we'll style our twitter box. But before we do, I realised I'd totally forgotten to place my "Follow Me on Twitter" image on the page (silly Collis!) No matter, I'll add it in now, here's the resulting HTML code for the area we are working on:

	<img src="images/title_thoughts_nm.jpg" alt="Thoughts via Twitter"/>
    <div id="thoughts" class="content_box">
    
    	<div id="twitter_div">
            <ul id="twitter_update_list"></ul>
            <a href="http://twitter.com/collis"><img src="images/twitter_nm.jpg" alt="Follow Me on Twitter" /></a>
        </div>
    
    </div>

Notice that the image appears inside the twitter_div. We're going to use one of the great benefits of CSS styling to position it so it sits outside of the box. Now if this were the old days and I was making this layout with a <table>, I would wind up using SOO much more code here, setting borders and lots of background images and stuff. Thank goodness for CSS. Here's our CSS code:

#twitter_div {
	border:1px solid #222830;
	background-color:#101318;
	position:relative;
	min-height:40px;
	padding:40px;
}
#twitter_div img {
	position:absolute;
	bottom:-22px;
	right:-14px;
}

This code turns our twitter_div box into a nice dark box and then positions the <img> inside. Notice that I've given the outer twitter_div a relative position. Then on the inside I've set the image to an absolute position. Absolute positioning always positions according to the last container with a relative position. If isn't contained inside any other HTML elements, or none of those elements have a relative position, then it defaults back to the whole browser window.

Because our twitter_div is relatively positioned though, the absolute position will be in relation to that <div>. So in other words top:0px, left:0px, would be the top-left of the twitter_div container. Similarly, bottom:-22px and right:-14px, is measured from the bottom-right of the twitter_div. In this case because we've added minus numbers, we're actually positioning it outside the div.

This is the easiest way to place images that are meant to overlap a box, border, line, whatever.

Positioning can be a bit fiddly to find the exact right number of pixels but you can work it out quickly with a sophisticated technique I call "trial and error" :-)

Step 10 - Style the Twitter FEED

So that's looking pretty good now, but really not quite what we had in mind. In fact what I originally wanted was the date/time to be on the left hand side, where the bullet points are. And of course the whole thing needs better spacing.

Now because the content is coming from some Javascript which we don't have any control over, what we need to do is figure out a way to work with what we have. Here's what we know:

• Each tweet is in an <li></li> element.
• The date/time bit is a link, so it must be wrapped in an <a></a> element.
• And we know that the link is the last thing in each tweet.
• And we know that links inside of tweets aren't linked. (I know this because I tried pushing through an actual link and it didn't appear linked). SO in other words we know that the date/time bit is the ONLY element wrapped in an <a></a>.

So using this information we can apply a style to the <li> and <a> elements to format it how we want. Here's how we do it:

#twitter_div ul {
	margin:0px;
	padding:0px;	
}
#twitter_div ul li {
	list-style:none;
	margin-bottom:5px;
	margin-left:90px;
	font-size:12px;
}
#twitter_div ul li a {
	width:70px;
	display:block;
	position:relative;
	top:-43px;
	left:-90px;
	line-height:19px;
	text-transform:capitalize;
}

Some things to notice about the first two definitions:

1. The first definition just gets rid of default margins and padding on the <ul> element
2. Next we get rid of the bullet points (list-style:none). Then we separate the <li> elements with a bottom margin
3. Then we also tell the <li> elements to have a huge left margin of 90px. This will make enough space for us to move our date/time links into the gap.

The last definition applies to any <a> elements in the list, which is why it was important to check that these date/time links were the only links. First we tell the link to display:block. By setting the link to be a block level element, we stop it from sitting inline with the rest of the text and move it by default to sit below the text as a block.

Now because by default a block element like our link now is, will align to the left, we can say with confidence where the link will be positioned. I.e. that it will be just below our text and aligned to the left. If you want to see what I mean, just delete everything after display:block and look at the result.

With this knowledge, we can use relative positioning to move it relative to where it is now. So we say the link should be 43px higher than where it currently is, and 90px to the left. And this then places the link right where we wanted it! Try it and see!

Complete HTML & CSS

OK! We're done with our HTML and CSS! You can download the files - images, CSS, HTML - using the link below:

Download Images/HTML/CSS

Step 11 - Testing for Screensize

Now we're done with our HTML it's time to do some testing. The first thing to test is how it's going to look on a 1024x768 screen. I use a Firefox plugin to do this called Firesizer which is just so handy. It appears in the status bar, as shown and you select the screensize and Bam!

Anyhow everything turned out OK so no changes here!

Step 12 - Testing for IE6

Next we test IE6. Because I'm on a Mac, I use a really crappy IE6 solution using something called Darwine. On a PC you can get a standalone install of IE6 that doesn't tamper with your IE7 install.

If you're a web developer and you use IE6 by default, you need to stop immediately! hehe. Well I guess there would be cases where it'd be a good idea - e.g. if you were developing for a huge IE6 audience. Still, that'd be pretty weird. I highly recommend Firefox myself, but Opera, Safari, IE8 Beta, even IE7 would be good. Not to mention all the more obscure browsers...

(Note there is an IE7 solution via Darwine too, but as far as I can tell it's demented ... like really crazy and unusable)

Step 13 - Testing for IE7

Now we test for IE7 because although it's much better than IE6, it can still do the crazies now and again. For this I have to run my newly installed copy of Parallels.

Boy browser testing is laborious!

Still it's not nearly as labourious as if I'd run into problems! Fortunately it all checked out OK.

Step 14 - Validate Our Markup

And finally because some commenters here are NETTUTS suggested that I really should be validating my markup, we'll go push it through the W3C validator

Now I know it looks like I have lots of problems there, but in fact they are all coming from the Twitter Javascript - tsk, tsk, tsk, for shame! hehe. So it's OK, I'm off the hook!

Step 15 - The HTML is Finished! Now to Upload ...

And now it's time to upload. I get out my trusty FileZilla and hook up to collistaeed.com and up goes the site!

With that done ... we can turn to CushyCMS!

Step 16 - CushyCMS - Introduction

Now the purpose of this tutorial was really to show you how to use CushyCMS. At least it was until I realised that this is kinda stupidly easy to use and not really worth a tutorial (I learnt to use it from that video they have on their site!)

So anyhow the service is completely free and works by FTPing into your server and modifying the files you tell it to modify. It's really simple to use as you'll see, not hugely featured, but it does what it does well. From their homepage it looks like there will be more stuff coming in the future which they'll be charging for.

I recommend giving it a try as it could be a nice solution for a lot of small client websites, or of course for a site like mine! So anyway, we go to CushyCMS and sign up.

Step 17 - Setup CushyCMS For The New Site

Once you're logged in, it's a two step process to get setup:

1. The first thing to do is Add a Site. This basically just involves giving them the FTP details
2. Then we Assign Page(s), for us there's only one, so that's an easy choice

Step 18 - Adding the CushyCMS Class

Now in order for CushyCMS to know what elements should be editable, we need to specify them in the HTML of the page using a special class definition. So we have to go back to our HTML and add in some class="cushycms" bits.

Now the bits we want to be editable are those <div class="content_box"> areas. But they already have a class= definition. But that's OK! You can assign multiple classes to a single element by separating them with a space like this: <div class="content_box cushycms">. So the resulting HTML code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Collis Ta'eed - A Little About Me</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
	
    <h1><span>Hi I'm Collis, entrepreneur, blogger and designer.</span></h1>

	<img src="images/title_about_nm.jpg" alt="About Me" />
    <div id="about" class="content_box cushycms">
    
    	<a href="/images/collis.tif"><img src="images/photo_sm.jpg" class="photo" alt="Collis"/></a>
	    <div class="about_text">
            <p>After working as a web designer - both employed and freelance - I cofounded a startup with a few friends in 2006.  Our company, <a href="http://eden.cc">Eden</a>, has since grown and I've had the good fortune to work on lots of very exciting and interesting projects, everything from <a href="http://flashden.net">FlashDen</a> to <a href="http://blogactionday.org">Blog Action Day</a>. </p>
    
            <p>Thanks to the brilliant nature of the web, I'm currently living and working out of Hong Kong and travelling the world. You can find me online on <a href="http://twitter.com/collis">Twitter</a> where I post random thoughts, or you can send me an email from the form at the bottom of this page.  Thanks for stopping by!</p>
		</div>  
        
        <div class="clear"></div>
          
    </div>
    
    <img src="images/title_thoughts_nm.jpg" alt="Thoughts via Twitter"/>
    <div id="thoughts" class="content_box">
    
    	<div id="twitter_div">
            <ul id="twitter_update_list"></ul>
            <a href="http://twitter.com/collis"><img src="images/twitter_nm.jpg" alt="Follow Me on Twitter" /></a>
        </div>
    
    </div>
    
    
    <img src="images/title_project_nm.jpg" alt="Latest Projects"/>
    <div id="project" class="content_box cushycms">
    	<br />
    	<a href="http://nettuts.com"><img src="images/project_nettuts.jpg" class="photo" alt="NETTUTS"/></a>
        <a href="http://nettuts.com">NETTUTS</a>
		<p>In April Eden launched a sister site to PSDTUTS which I've been working on.  The site hosts web development and design tutorials.</p>
    	<div class="clear"></div>
    </div>
    
    <img src="images/title_links_nm.jpg" alt="Links" />
    <div id="links" class="content_box cushycms">
    
    	<p>Some links to sites that I have a hand in:</p>
        
        <ul>
        	<li><a href="http://flashden.net">FlashDen</a> - Our main Eden project</li>
        	<li><a href="http://freelanceswitch.com/book">How to Be a Rockstar Freelancer</a> - A book I cowrote with my lovely wife</li>
        	<li><a href="http://freelanceswitch.com">FreelanceSwitch</a> - The highly successful blog on freelancing</li>
        	<li><a href="http://psdtuts.com">PSDTUTS</a> - The best photoshop blog around!</li>
        	<li><a href="http://blogactionday.org">Blog Action Day</a> - A nonprofit, annual event</li>
        </ul>  
                                                    
    </div>
    
    <img src="images/title_contact_nm.jpg" style="clear:both" alt="Contact Me"/>
    <div id="contact" class="content_box cushycms">
    
    <p>I'm the first to admit that I'm not very good at answering all my emails, but I do my best and if you have need, then you can <a href="mailto:whoiscollis@gmail.com">email me</a>.</p>
    
    </div>
    
    
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-249823-23";
urchinTracker();
</script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/collis.json?callback=twitterCallback2&count=3"></script> 
</body>
</html>

Now we go back to CushyCMS and our page is fully editable!

One thing, I should point out is that when I tried to make my Twitter area editable, the CushyCMS system just deleted my empty <ul> element, thereby rendering the Twitter thing unworkable. Unfortunately it seems the editor is a bit too clever for its own good. Still apart from that small annoyance, the system was really not too bad at all. I tend to switch to the Source view when editing, but I can see that clients would find it pretty easy to use. I'm interested to see what things they add in the upcoming paid version.

As a good alternative to this sort of super easy, no coding required, sort of CMS, you could also check out Light CMS which I've tried and quite liked too - though it works a little differently.

Conclusion!

So hope you enjoyed the tutorial. Be sure to visit my site, and twitter feed and give the CMS a whirl.

If you know of any other similar CMS products (like Cushy or Light), please leave a comment as it'd be good to do a wrap up of them here sometime.