How to build a maintainable site using cushycms and twitter

GFX9.COM share How to build a maintainable site using cushycms and twitter, you can download now.



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.


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:




	Collis Ta'eed - A Little About Me
	



Hi I'm Collis, entrepreneur, blogger and designer.

About Me
Collis

After working as a web designer - both employed and freelance - I cofounded a startup with a few friends in 2006. Our company, Eden, has since grown and I've had the good fortune to work on lots of very exciting and interesting projects, everything from FlashDen to Blog Action Day.

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 Twitter 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!

Thoughts via Twitter
Latest Projects
NETTUTS

In April Eden launched a sister site to PSDTUTS which Iíve been working on. The site hosts web development and design tutorials.

Links Contact

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 email me.

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
    . I did this partly out of habit to be honest, but I'm going to use the
    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

    . Then we'll use the 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 title and then a
    . 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
  • 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:

    Note I deleted the

    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 . 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