How to Build a Maintainable Site using CushyCMS and Twitter

Collis Ta'eed — Wed, 14 May 2008 06:27:49 +0000

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.

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.

	
    

    	
	    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!

    

    
    
    

    
    

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

    

    
    

    	Some links to sites that I have a hand in:

        
        	FlashDen - Our main Eden project
        	How to Be a Rockstar Freelancer - A book I cowrote with my lovely wife
        	FreelanceSwitch - The highly successful blog on freelancing
        	PSDTUTS - The best photoshop blog around!
        	Blog Action Day - A nonprofit, annual event
          

    

    
    

    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:

Log in to your Twitter account
Click that Yellow box in the right hand bar that says "Put your updates on your site!"
When prompted for MySpace, Blogger, etc, choose "Other"
Select the HTML/JS option so we can style it up with CSS later
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

’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:
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:
```
	

    	
	    
            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!
		  

        

    
```
So you can see I’ve wrapped the text in a
and then added a
at the bottom. This extra
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
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
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 tag that we so cleverly placed earlier to set the text’s display to none - making it hidden. Then we’ll give the
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:
```
	
    

    	
            
            
        

    
```
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
, 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 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
. 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
- The date/time bit is a link, so it must be wrapped in an 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 .
So using this information we can apply a style to the
and
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:

The first definition just gets rid of default margins and padding on the
element
Next we get rid of the bullet points (list-style:none). Then we separate the
elements with a bottom margin

Then we also tell the
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 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 1024×768 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
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:
. So the resulting HTML code is:

Collis Ta'eed - A Little About Me

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

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!

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

Some links to sites that I have a hand in:

FlashDen - Our main Eden project

How to Be a Rockstar Freelancer - A book I cowrote with my lovely wife

FreelanceSwitch - The highly successful blog on freelancing

PSDTUTS - The best photoshop blog around!

Blog Action Day - A nonprofit, annual event

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.

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

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Bedrich Rios — Sat, 10 May 2008 09:22:32 +0000

As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I’ve always liked the way the menu on MooTools worked. So in this tutorial we’ll recreate that same effect … but we’ll do it in jQuery!

Step 1

Let’s begin by writing the necessary HTML to create a simple vertical navigation. For the structure, as you may have guessed, we will use an unordered list
with the ID name “sliding-navigation“. Also, we will add some links and give each list item
the class name “sliding-element”.

I’m also going to add in a title element. This is a useful thing to do as many WordPress blogs for example have title elements in their sidebar navigation (e.g. "Archives"). So it would look something like this:

Navigation Title

Link 1

Link 2

Link 3

Link 4

Link 5

Step 2

Now, let’s create a HTML document where we can put the work we just did. Create a new HTML file and call it demo.html. Then open this file with your favorite text editor and insert the following code:

Navigation Effect Using jQuery

Navigation Title

Link 1

Link 2

Link 3

Link 4

Link 5

There are a few things to note here:

The !DOCTYPE for our demo.html file is set to XHTML 1.0 Strict. This is not required for the effect to work but I try to get in the habit of using it as much as I can.

You may have notice that the tag is refering to a file called style.css. However, no such file exists. No worries though, that is the next step.

Finally I’ve wrapped my navigation block into a
. We’ll make use of this later to position the block on the page.

Step 3

Now that we have our HTML file labelled and working, let’s add some styles. Remember that our HTML document is pointing to a CSS file called styles.css. So, let’s begin by creating a file called styles.css and saving it in the same directory where our HTML document lives. As we did in the previous step, open this file with your favorite text editor and insert the following code:

body { margin: 0; padding: 0; background: #1d1d1d; font-family: "Lucida Grande", Verdana, sans-serif; font-size: 100%; } ul#sliding-navigation { list-style: none; font-size: .75em; margin: 30px 0; } ul#sliding-navigation li.sliding-element h3, ul#sliding-navigation li.sliding-element a { display: block; width: 150px; padding: 5px 15px; margin: 0; margin-bottom: 5px; } ul#sliding-navigation li.sliding-element h3 { color: #fff; background: #333; border: 1px solid #1a1a1a; font-weight: normal; } ul#sliding-navigation li.sliding-element a { color: #999; background: #222; border: 1px solid #1a1a1a; text-decoration: none; } ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

Step 4

At this point your demo.html page should be looking something like this:

So, it is finally time to begin using jQuery. But before we can get started we need to do a few of things:

Download the latest version of jQuery.

Create a new file called sliding_effect.js and save it in the same directory as that of your HTML and CSS file.

Lastly, insert the two previous files to your HTML document’s .

This is what your HTML file’s should look like now:

Navigation Effect Using jQuery

Step 5

Now, we will create the function that will do all the “heavy” lifting for the sliding effect to work. This function will take five parameters (navigation_id, pad_out, pad_in, time, and multiplier) and use them as follows:

navigation_id: This is the ID name of the navigation, which contains the elements the effect will be applied on.

pad_out: This is the number of pixels to be padded left when one of the links inside the navigation is hovered.

pad_in: This is the number of pixels to be padded left when one of the links inside the navigation is no longer being hovered.

time: This represents the amount of time (in milliseconds) that takes for one of the link elements to slide in and back in to place when the page is loaded.

multiplier: The job of the multiplier is to increase or decrease the amount that takes the a following link element to slide in to the screen. In other words, if the multiplier is 1, all link elements will slide in to the screen in equal time intervals. However, if it is less than 0, the subsequent link elements will slide in faster, and if it is more than 1 the opposite will happen.

So, open your sliding_effect.js file and insert the following code:

function slide(navigation_id, pad_out, pad_in, time, multiplier) { // creates the target paths var list_elements = navigation_id + " li.sliding-element"; var link_elements = list_elements + " a"; // initiates the timer used for the sliding animation var timer = 0; // creates the slide animation for all list elements $(list_elements).each(function(i) { // margin left = - ([width of element] + [total vertical padding of element]) $(this).css("margin-left","-180px"); // updates timer timer = (timer*multiplier + time); $(this).animate({ marginLeft: "0" }, timer); $(this).animate({ marginLeft: "15px" }, timer); $(this).animate({ marginLeft: "0" }, timer); }); // creates the hover-slide effect for all link elements $(link_elements).each(function(i) { $(this).hover( function() { $(this).animate({ paddingLeft: pad_out }, 150); }, function() { $(this).animate({ paddingLeft: pad_in }, 150); }); }); }

Step 6

All we need to do in order to trigger the script is call the function when the page has loaded. There are two place to put the following snippet of code. It can either be written inside the sliding_effect.js file (I chose this option for this tutorial) or called within the HTML using a

Navigation Effect Using jQuery

By Bedrich Rios

Navigation Title

Link 1

Link 2

Link 3

Link 4

Link 5

Notice that I’ve added the image inside the "navigation-block" element and give it an ID called "hide". Also I’ve added a heading element and subtitle. Now we add a bit of extra CSS to our styles.css file as follows:

h2 { color: #999; margin-bottom: 0; margin-left:13px; background:url(navigation.jpg) no-repeat; height:40px; } h2 span { display: none; } p { color: #ffff66; margin-top: .5em; font-size: .75em; padding-left:15px; } #navigation-block { position:relative; top:200px; left:200px; } #hide { position:absolute; top:30px; left:-190px; }

So first in the
element, we have set the HTML text to vanish using "display:none" and set a background image of some nicer looking text I prepared earlier.

Also notice that the "navigation-block" element now has a relative position, so that we can move the "hide" image over to the left. This will make the tabs appear from under it.

Lastly to give our tabs a bit of finish I’ve added a subtle background image that looks like shading like this:

ul#sliding-navigation li.sliding-element h3 { color: #fff; background:#333 url(heading_bg.jpg) repeat-y; font-weight: normal; }

Finished

And we’re done!

View the Final Effect

Download the HTML/Images/JS

Use Amazon S3 & Firefox To Serve Static Files

Collis Ta'eed — Thu, 08 May 2008 02:05:18 +0000

Hosting services have gotten a lot better in recent times, more storage, more bandwidth, cheaper prices. But there is only so far that regular hosting will go. When I first launched PSDTUTS, despite being on a great webhost with some big specs, we ran into both bandwidth and file serving problems when our tutorials (each containing dozens of heavy images) would land on Digg. And then a friend recommended I try using Amazon’s Simple Storage Service (aka S3).

It turned out to be really easy to use S3 like a giant, unlimited host, and I’ve been using it ever since for high-access, or heavy files like podcasts for FreelanceSwitch, images for blogs, and even for sending files to clients. In this tutorial I’ll show you how with just Firefox you can turn S3 into your own personal content delivery network.
It’s super simple, even I could do it!

Step 1

The first thing you are going to need is an account. So do the following:

Log in to your regular Amazon.com account (or if you don’t have one, create one!)

Go to Amazon.com/AWS (AWS = Amazon Web Services)

Using your Amazon account, Create an AWS account by following the prompts

When you’ve created your AWS account (shown below) you’ll see a list of web services that you might be interested in. Choose "Amazon Simple Storage Service"

Step 2

Now before you can do anything with S3 you have to Sign Up For This Web Service. (I know there’s a lot of signing up to do!)

You’ll need to provide a credit card so that Amazon can bill you for bandwidth, storage and processing. The rates are low, something like $.15 p/gb transferred.

Although you might be thinking that your webhost provides bandwith at a much cheaper rate, this probably isn’t really the case. For example a company like Dreamhost will offer you literally terrabytes of bandwidth for just a few dollars a month. However if you try to hit their servers quickly to make use of this bandwidth (e.g. during a Digg, or when you just sent a newsletter out about a download file), you’re unlikely to get either a quick download, or even a download at all. In my experience webhosts count on the fact that there are a lot of factors that ensure it’s highly unlikely you’ll ever use that bandwidth.

In the time I’ve used S3 - about 8 months now - I’ve hit it with some pretty large spikes of traffic. The biggest was a day when we had 150,000 visitors in a single day on a tutorial with a total of 3mb of images. So that day alone it served up 450gb of data, and didn’t even bat an eyelash. I’m sure in the scheme of things there are much bigger users too.

So it’s pretty safe, and it’s pretty cheap. Meanwhiles Amazon should really be paying me money for all this promotion

Step 3

So anyway once you’ve signed up, click on the "Your Web Services Account" button and a little menu appears. This is where you control your account, check on your activity (ie. bill) and so on.

Click on "AWS Access Identifiers"

Step 4

Now you’ll get two numbers, your access key ID and your secret access key. Needless to say you want to keep these very safe!

Copy the two numbers out into a text editor so we have them on hand, because we’ll need them in a second.

Step 5

Next we’re going to need our Firefox Extension. If you’re not using Firefox … well you’re on your own I know for example you can use Transmit on a Mac to log in to your S3 account. Presumably on Windows there is something similar (if anyone knows … please do leave a comment).

So we’re going to use the S3Fox extension from RJonna

Visit the website and click on the link shown in the screenshot to download S3Fox.

Step 6

Once installed, your Firefox will restart and then you’ll see that you can now access S3Fox either from the bottom right of your browser window or from the Tools menu.

So go to Tools > S3 Organiser and you should have a tab appear showing your S3Fox window. It’s really similar to an FTP program and hence super easy to use. There are a couple of differences though.

So click on Manage Accounts and create an account with your Access Key and Secret Key from earlier. Click Save.

Step 7

Once you’ve created an account you’ll get a blank area on the right hand side. The first thing you need to do is create a Bucket. A Bucket is Amazon terminology for what amounts to a folder or directory of files. Bucket names have to be unique across the service, so for example you won’t be able to create a bucket called "Test" because I’m sure that was like the first bucket name to go.

Anyhow right click on the right hand side and choose "Create Directory", this will in fact create a Bucket because we’re in the root. Once you have a bucket created you can create directories inside. You can also have as many buckets as you wish.

You’ll be prompted for a name and the extension will show you a bunch of rules about bucket names. Weirdly the extension seems to interchange the words bucket, folder and directory.

Step 8

So I created a bucket named "nettuts" and then added two directories inside called "003_S3" and "s3demo". Then I have dragged an image over to upload to S3. The image is called s3image.jpg.

Now Right-Click on the file and choose Edit ACL. Before you can access your file you’re going to need to change its permissions, and that’s what this does.

You’ll be prompted to give Read/Write/Full Control by ticking or unticking some selections. You only want to give Read access here, so tick the boxes.

(Note on a Mac the extension has a weird bug that when you click on the ‘x’ it doesn’t immediately change to a tick, but when you click Save, all of a sudden it does. It’s confusing and hopefully will get fixed, but you get used to it)

Step 9

Now once you have set permissions, Right Click again and choose Copy URL to Clipboard. The URL For my image is:

http://nettuts.s3.amazonaws.com/003_S3/s3demo/s3image.jpg

As you can see the first part of the URL is the bucket name, then the domain, then the folders and finally the file name.

That’s It!

And that’s it, here’s the image that I placed on S3. Right click and view its location to see! (Actually all the images in this tutorial are on S3

Of course if you want to do all this dynamically with PHP or Ruby, that’s a whole other kettle of fish, and hopefully one we’ll cover here in future. You can also get Wordpress and other app plugins that connect up to S3.

Contributions Open, Traffic Steady & Other News

Collis Ta'eed — Tue, 06 May 2008 01:38:47 +0000

It’s two weeks since NETTUTS launched and I’m happy to report the site is kicking along better than I ever expected! With two and a half thousand RSS readers and some eight thousand visitors a day, it’s kinda staggering for a brand new site!

With such booming progress I’ve been knuckling down to get the mechanics of the site working a little better and have plenty of news to tell…

Contributions Open

The big news is that you can now contribute a tutorial to NETTUTS! I’ve created a contribute form and set a reward of $150 for any published tutorial. There are guidelines on the sorts of things we’re looking for over on our Contribute a Tutorial page.

The main criteria will of course be tutorial awesomeness! And so far some applications have already started appearing. I’ve also got emails from some potential regular writers courtesy of a job ad I placed up a few weeks ago. So this week we should see the first content from someone other than me, yay!!

Ads on Sale

I also placed NETTUTS up on BuySellAds to sell ad spots to help pay for contributions, and happily we’ve already sold two spots!! Be sure to pay a visit to both Studio7Designs and PSD2HTML for sponsoring the site so early!

Happily with our steady traffic flow, I’m confident that we should win some more advertising spots over the coming weeks and this site will get to steady publish schedule much faster than I’d originally thought!

I Bought Parallels / WinXP

In my first couple of tutorials I didn’t have any way to test Internet Explorer and there were a couple of browser compatibility issues. Happily yesterday I went out and got Parallels/XP so I’m going to go back and add a footnote to them to fix those.

Also this got me to thinking about how the sum of the knowledge of the community is much greater than an individual writer. Certainly I’ve been learning quite a few things from the comments on the site. So I’m going to figure out a way to take some of the better comments on alternate ways or fixes to a method, and add them to the end of the tutorials to improve them.

Onwards and Upwards

So that’s it for the moment. Still getting things ship shape here, but so far so good! If you have any suggestions on site improvements, do feel free to comment them in. And of course we also have our place to comment in tutorial suggestions for writers.

Thank you everyone for all the support, links and comments. I have the best job in the world

7 Crucial Tips for Designing and Maintaining a Large Site

Collis Ta'eed — Fri, 02 May 2008 08:19:23 +0000

Projects vary in scope and size, and the challenges they entail vary likewise. As a lone web designer, the biggest job I am responsible for is FlashDen. Along with thousands of active members all chatting, uploading and buying, the site processes large amounts of money and large amounts of traffic.

Designing, redesigning, maintaining and working with developer team has given me some useful insights and tips for making life easier. And since today we’ve launched my latest redesign of the site, it seems like a good time to write up my top 7 tips!

1. Design and Code for Maintainability

The first and biggest tip I can give, is to design the site so that it’s easy to maintain. Often times when designing a site you might sacrifice things for aesthetics. For example you might use images where text or styles would suffice. Or you might deliberately choose a menu structure that has no room to grow. When the site is large, this becomes a really bad idea.

When I built the very first version of FlashDen almost two years ago, I used images for buttons. They looked really nice, but I wound up with a library of 100 different button images, not to mention rollovers. Then in the next couple of months every time a developer needed a new button they had to ask me to create an image. Needless to say I learnt that lesson pretty quick and we switched to a single button class that maybe doesn’t look as good, but is much better for peace of mind.

Another aspect of maintainability is thinking about how the site is going to grow and change. For example, as new pages get added on, where do they go? Early on I wanted to have a horizontal navigation, but this is really limited After some experimenting, we wound up using a vertical nav, allowing for submenu items, and then on top of that, added a tab structure into pages to allow for related pages to be grouped together. I’m not saying it’s the best navigation in the world, but it certainly means we’re not redesigning every time a new section is added to the site!

So in designing for a large site, look for ways to make life simpler later, because you’ll be glad you did!

2. Figure out your User Groups and Tasks

One of the biggest differences between a large site and a small one, is the number of different user types who might be using the site. For example on FlashDen, there are buyers, authors, visitors, admins, and members. Each group has a different set of aims and tasks they have to carry out. Sometimes these tasks overlap, but sometime they are quite different.

The best example of a place where user tasks are at odds with each other is on a homepage. Nowhere else on a site does every user group converge, and nowhere else is it so vital to make sure everyone gets what they want. And of course you have to be careful that in serving one user group you aren’t ignoring another.

In this latest redesign of FlashDen, the biggest area that I worked on was the homepage. The first thing I did was list out to myself all the things that each user group needs to do:

Buyers - People who are on FlashDen to purchase files
Start browsing items, start searching, access their personal homepage, deposit money, learn how the site works (for newer buyers)

Authors - People who are selling goods on FlashDen
Chat with other members, get featured on the homepage to push their items, find out about site news, quickly get to their portfolio & earnings

New Visitors - Potential Buyers/Authors/Members, who have just arrived
Learn what the site is/does very quickly, get started, find out types of files and prices

Members - People who aren’t really buyers or authors, but just participate in the community
Chat with other members, see site news, browse files

Admins / Reviewers - Our staff who manage file approvals, moderate forums, and generally participate
Get quickly to file approvals, see the latest forum threads, hear site news

When you know what different user groups want to do, then you can design a page that solves all their needs. Needless to say this is a task that gets exponentially harder the more groups and tasks there are. On other pages in the site, you will often get a subset of user groups to worry about, but on the homepage they all converge. Not coincidentally, the homepage is the most important bit of design work you have to do on a site.

Before you can solve the different needs though, you need to prioritize the user groups, and in order to do that, you’ll need to understand what the site is trying to achieve.

3. Understand the Site Goals

Although every user group naturally feels they are the most important, it is up to you to prioritize them according to what the site itself is trying to achieve. For example on FlashDen after sitting down with the team we drew a few conclusions as follows:

The top priority for the site is to serve buyers. When buyers are served well they keep buying bringing income and simultaneously serving the authors.

It’s vital to get new visitors to quickly learn about the site and hopefully become members. FlashDen is still in a relatively new market, and new competitors are still appearing, so that makes it more important to capture visitors and convert them to buyers or authors or members.

Authors are important because at its heart FlashDen is really about her authors, but out of all the user groups they are the most committed to the site.

Members are not as important as Authors and Buyers, but do contribute to the community surrounding the site.

Admins / Reviewers are the least important as they are a paid group.

So following from this, it’s possible to conclude that the homepage needs to server users in this order: Visitors > Buyers > Authors > Members > Admins.

Understanding what your site is trying to achieve is the final thread that sews your user tasks together and tells you what you should be trying to put on the page. Ideally on every key page you should identify the user groups, tasks and priorities. For a vital page like the homepage I do this formally on paper, and for lesser pages I will often just do it in my head while designing.

4. Design, Refine, Refine, Refine …

It’s only after you’ve figured out user groups, tasks, site goals, priorities and so on, that it’s time to design! It is really vital that you do this first, because on a practical level, it dramatically lowers the odds that you are going to have go back and redo your design. Whenever I have just started designing a big site, without really analysing first, I have inevitably had to rework lots of screens or even whole interfaces.

Lots of designers like to use wireframes at this point - that is to simply lay out a bunch of lines and boxes indicating roughly where things should go. Personally I prefer to work in Photoshop from the start because I’m quick enough and it lets me really see what’s going to happen. I also think that there is more to information design than where something appears on a page. Simply altering colours and background colours can make a page element further down the page suddenly seem more important.

Once you do have a rough idea of how the information needs to work together, you should come up with a working design that is generally OK, and then refine, refine, refine. I often will wind up with 5 or 6 versions of the same look, where I’ve tried varying different things like type sizes, images, layout alterations, backgrounds, and so on, to see how it affects the information you’re presenting.

No matter how good you think the first layout is, I can guarantee that after spending more time and coming up with more versions you’ll have discovered that your original wasn’t quite as good as you first thought. Sometimes you wind up throwing out the whole design and starting again, but if you do have a good base, then refining should get you to a great finish.

5. Get Others’ Opinions, but Make the Final Calls

In any large job you are going to have a lot of other opinions involved. In most cases these will be the opinions of your client. Prior to starting FlashDen, I used to work with all sorts of companies building websites. Among them I did have the misfortune to design for several large insurance companies and a few governmental organisations. I say misfortune because when you get to that size of client you are dealing with a lot of stakeholders, and in many situations it isn’t clear where the real power to make decisions lies. This can result in endless meetings, endless changes and a high degree of difficulty for carrying through your vision.

Whatever the client, it’s really important to get their opinions. Aside from anything else in most cases they know a lot more about the business than you do. Hopefully they also know more about the users than you do, and with this knowledge will be able to give constructive advice.

It’s also important to get the opinion of the development team you are working with. At FlashDen we’re fortunate to have two devs who have a lot of skill in user interface design and usability. And their input, along with the rest of the team, made a lot of difference to the end product.

But in the end, it’s up to you as the expert designer to come up with the final call. If you have a tough client this can be tricky, because a client often believes they should make the final calls. If that is the case, you need to (a) find ways to explain, educate and show the client that your choices are for their benefit; and (b) sometimes bite the bullet and accept the client’s directives as a further constraint in your project, and find ways to make it work.

6. Organise for the Future

When you are coding up a design for a big site, it’s really important to again think about the future. How you manage your files and folders will impact you greatly later. For example recently we have decided to build a sister site to FlashDen that focuses on audio only called AudioJungle. To make things simpler the site is going to run the same HTML, with just stylesheets to make it look like a different site. A development like that throws up all sorts of new challenges to my file and folder structures, my stylesheets and my HTML. Here are some things to keep in mind:

Organise yourself into a good folder structure
Scripts, stylesheets, interface images, content images, and so on, all need to be kept separately. With a small site you might be able to just dump things together, but the bigger you get the more important it is to be able to find what you need.

Use a coherent and intelligent naming system for your files
There’s nothing worse than looking at a pile of images with names like "gd_l3.jpg". How you do it is largely a personal matter, but I find naming using common prefixes and descriptive file names helps a lot. So for example I might start every image going in the header with the word ‘header_’, every background with ‘bg_’ and then a menu background from the header would be called ‘header_bg_menu.jpg’. Prefixes have the advantage that when your files are sorted by name, they all appear together.

Use Subversion
This was forced on me by our developers, but thank goodness it was! Subversion tracks files and file changes and stops you from overwriting other designers/deveopers working on the same project. Also importantly it helps you roll back to old versions of things. It takes some getting used to, but even minus all the reasons developers use it, it’s worthwhile for HTML/CSS designers. Don’t know about Subversion? Check out Subversion for Designers

Be thoughtful about how you write your HTML and CSS
It’s really easy to make a mess with your HTML and CSS files, and it’s really hard to clean them back up. After four redesigns, I’m still using many of the same CSS files and it is a mission cleaning up classes that aren’t used any more or finding obscure definitions wrapped in lots of layers. Use lots of comments, possibly even multiple stylesheets, and make sure you name your styles well!

Get Browser Compatibility working EARLY
This is an area I went really wrong with FlashDen and we’ve been paying for it ever since. My initial layout worked in IE7 and I ignored IE6 until after we’d finished building the whole site. Ever since we’ve been adding IE conditionals, and hacks and workarounds. It’s much easier to make something compatible when there are only a few elements on the page than when you’ve built a massive site, so don’t follow my foolishness!

7. Make it Easy to Develop With Your Stylesheet

The bigger the site, the less likely a designer will get to see or modify every single page. If you’re a single designer on a big site - like me - then you also might not want to be called in for every thing. So it pays to make a stylesheet that can almost by default makes things look nice. For example:

Make sure you style default elements like , , and so on.
That way the page will automatically present well. If you rely on people doing things like then inevitably you’ll wind up with variance on pages.

Create reusable elements that developers can use.
For example on FlashDen we have a table class called "general_table", that makes a good fall-back style for data. When I have a chance to style a page I can do more specific types of tables and data highlighting, but at the very least a developer putting together a page has a good all-round table style to use.

Make sure your page layout has a structure that looks nice even when it’s just got text in it.
Inevitably there will be pages which you haven’t had a chance to add images to, and which may look a little boring. By using things like heading styles, sidebars, and so on, you can make sure that they still look pleasant and have some visual style. For example on FlashDen we wrap most text blocks in:

Heading
Content

And this by default wraps the text up with a nice little border around it and a heading. It’s easy for a developer to work with and does a good job of separating text up and making it look more readable. We also have a sidebar component which is just another package for extra text content, but that again makes the page look more visual.

Naturally it’s optimal if every page does go through a designer, but it’s also much less stressful knowing that even if they don’t, it’ll still look professional and uniform.

What’s your opinion?

So those are my tips, if you have some of your own from working on bigger sites, leave a comment!

Best of the Web - April

Collis Ta'eed — Thu, 01 May 2008 02:40:03 +0000

While naturally in my totally unbiased opinion, the best thing to happen on the web in April was the launch of NETTUTS, there is of course tons of great content out there. I’ve put together some of my picks of the best things to pop up during April …

HTML + CSS + Javascript

The Highly Extensible CSS Interface

April saw Cameron Moll finish off his extensive series on developing an interface using CSS and jQuery with the final post - Testing for Extensibility.

View the Whole Series

Build a Horizontal Sliding Tabbed Archive with jQuery

Last week we ran our tabbed navigation tutorial, Sam Lu has his own jQuery tabbed nav tutorial which has content sliding in from left and right. Neat effect!

Visit Tutorial

30 Exceptional CSS Techniques and Examples

I love a good roundup and SixRevisions is only too happy to provide them! Make sure you flick through their archives and see all the other neat lists they have.

Visit Article

This is How you get sIFR to Work

sIFR - the Flash/HTML technique to get custom fonts on your page - might look tricky to use, but with the aid of this walkthrough, it’s a piece of pie!

Visit Tutorial

4 Uber Cool CSS Techniques for Links

CSSGlobe is one of my favourite sites for great snippets of CSS and they don’t let you down with this great post!

Visit Tutorial

Better Pull Quotes: Don’t Repeat Markup!

CSS Tricks has a neat bit of technique to use so that you don’t have to have two blobs of the same text on your page to make a pull-quote. It makes use of jQuery to achieve the result and is quite simple to achieve!

Visit Tutorial

Reset Stylesheets

CSS newbie walks you through why and how reset stylesheets work, along with a couple of links to some more popular ones.

Visit Article

Image Fades using jQuery

The latest tutorial from jQuery for Designers shows us how to fade images into each other using … you guessed it jQuery!

Visit Tutorial

6 Most Important CSS Techniques You Need to Know

A bunch of useful CSS tips to take to heart, certainly taught me a couple of things!

Visit Tutorial

Improve Form Usability with Auto Messages

One of my favourite blogs - Woork … who doesn’t love that picture of Antonio? - has published a neat little tutorial on adding a little message using Scriptaculous.

Visit Tutorial

MarkItUp

Turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system … Can’t wait to test this out, looks very cool! (Via WebResourcesDepot)

Visit Site

Flash!

Build a Parallax Gallery

Nick La of WebDesignerWall takes you through building a horizontal scrolling environment using alternating scroll speeds to give it a 3d-esque feel. You can also find a neat Parallax extension for sale over at our sister site FlashDen.

Visit Tutorial

Making an MP3 Player in AS3

The design may not be too attractive, but this is still a handy tutorial on using AS3 to put together a little MP3 player …

Visit Tutorial

Getting Started with Flash

Looking for a solid introduction to Flash? Look no further than Carlos’ great little intro.

Visit Tutorial

Creating an XML Slideshow (Actionscript 2)

XML Slideshows are the bomb and this tutorial will walk you through creating a simple fading slideshow using Actionscript 2.

Visit Tutorial

Non-AS Photo Presentation

Don’t want to use Actionscript to make your image slideshow? Try this basic masking tutorial that produces a nice effect.

Visit Tutorial

Object Oriented Scrollbar

Flash tutorial master Lee Brimelow released a new two-part video tutorial on creating a scrollbar, watch them at GotoAndLearn …

Visit GotoAndLearn

Content Management Systems

Build an Expression Engine Site From Scratch

OK so this didn’t technically happen in April, but I found it in April so it kinda counts! Anyway if you’ve ever wanted to play with Expression Engine then this is the tutorial for you. It’s really long, so long it’s become a book that you can purchase from Lulu if you’d like your tutorial in the convenience of paper and ink. Definitely worth checking out!

View the Whole Set

Blog Perfume - Wordpress

This isn’t so much something that happened in April as just an awesome WordPress site that I’ve been meaning to link up for ages! Created by Ray of WebAppers it’s a great resource for WP junkies.

Visit Site

Cushy CMS

I’m not 100% sure if Cushy just launched, but certainly it only just popped up on my radar during April. Looks like a promising CMS, definitely worth checking out.

Visit Site

An Introduction to Movable Type Templates

DevLounge brought us not one but two useful MT tutorials with the introduction and also Anatomy of a Movable Type Template

Visit Tutorial

Powerful List of WordPress Plugins

Noupe does one of their gigantic lists, this one on WordPress plugins, plenty of ones I use regularly in there! In case you’re wondering that screenshot is of Fluency - an alternate WP-Admin skin. Nice!

View the List

WordPress Template Heirarchy Diagram

Michael from WPCandy has done over WordPress’ diagram of the template heirarchy to give it a bit more visual edge, nice job Michael!

Visit Article

Miscellanea

10 Common Mistakes in Redesign

I hate to say it but I’m guilty of quite a few of these mistakes - especially "Launching before the new design is cross-browser tested" That’s my achilles heel!

View Article

Five More Principles Of Effective Web Design

Continuing on from their 10 Principles of Effective Web Design Smashing Magazine gets us to 15 solid foundations for good web technique. Speaking of principles of web design, you might want to check out the article I wrote back last year on PSDTUTS - 9 Essential Principles of Good Web Design. Now that’s a lot of principles to read about!!

Visit Article

Build an AIR application using Dreamweaver CS3

Jonathan Snook of Snook.ca writes up this simple introduction to making an AIR app using the Adobe AIR extension for Dreamweaver.

Visit Tutorial

Getting Started with Ruby on Rails

In their latest edition AListApart has been posting on getting going with the ubiquitous Ruby on Rails with both Getting Started and Creating More Using Less Effort

Visit Tutorial

The Web Developer’s SEO Cheat Sheet

SEOMoz is my favourite place to go for SEO advice and this neat little PDF checklist is a handy little download for forgetful web devs.

Get the PDF

Subversion for Designers

I use subversion when working on the FlashDen codebase and I have to say it will really help your productivity and workflow if you are working on big projects. I’ve yet to try using it on my regular work but am planning to soon! In any case this is a great introduction…

Visit Article

Developing with Google App Engine

This month Google launched their new App Engine product, a cloud service for running Python apps. If you’re looking for an introduction, ThinkVitamin’s got a good one…

Visit Tutorial

Planning a Semantic Website

The "Semantic Web" is meant to be the next phase of the web, and IBM has a long article about planning a website focussed this way. I must admit I didn’t make it through the whole article, but if you’re looking to get the jump, I’m sure it’s worth it!

Visit Article

101 AIR Resources to add to your toolbelt of Awesomeness

You know I love 101 lists, but I never get through them. Still here’s one for all you AIR junkies to bookmark away.

Visit List

NETTUTS - Web development tutorials and links

How to Build a Maintainable Site using CushyCMS and Twitter

The Brief!

First a Design

Step 1 - Cutting up Images

Step 2 - Planning the HTML

Step 3 - Laying out the initial HTML

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

Step 4 - Add a little CSS

Step 5 - Now Let’s Grab the Twitter

Step 6 - Add Google Analytics

Step 7 - More CSS

Step 8 - Replace our Heading

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

Step 10 - Style the Twitter FEED

Complete HTML & CSS

Step 11 - Testing for Screensize

Step 12 - Testing for IE6

Step 13 - Testing for IE7

Step 14 - Validate Our Markup

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

Step 16 - CushyCMS - Introduction

Step 17 - Setup CushyCMS For The New Site

Step 18 - Adding the CushyCMS Class

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

Conclusion!

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Step 1

Navigation Title

Step 2

Navigation Title

Step 3

Step 4

Step 5

Step 6

Navigation Effect Using jQuery

Navigation Title

Finished

Use Amazon S3 & Firefox To Serve Static Files

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

That’s It!

Contributions Open, Traffic Steady & Other News

Contributions Open

Ads on Sale

I Bought Parallels / WinXP

Onwards and Upwards

7 Crucial Tips for Designing and Maintaining a Large Site

1. Design and Code for Maintainability

2. Figure out your User Groups and Tasks

3. Understand the Site Goals

4. Design, Refine, Refine, Refine …

5. Get Others’ Opinions, but Make the Final Calls

6. Organise for the Future

7. Make it Easy to Develop With Your Stylesheet

What’s your opinion?

Best of the Web - April

HTML + CSS + Javascript

The Highly Extensible CSS Interface

Build a Horizontal Sliding Tabbed Archive with jQuery

30 Exceptional CSS Techniques and Examples

This is How you get sIFR to Work

4 Uber Cool CSS Techniques for Links

Better Pull Quotes: Don’t Repeat Markup!

Reset Stylesheets

Image Fades using jQuery

6 Most Important CSS Techniques You Need to Know

Improve Form Usability with Auto Messages

MarkItUp

Flash!

Build a Parallax Gallery

Making an MP3 Player in AS3

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; }