With CSS3 there is a lot to learn, and instead of me trying to cover it all in one article I will be posting some tutorials and demo’s over the coming months on how to do various things. But I do want to cover a few basics before we go into those tutorials.

First things first, if you’re still using images for round edges, stop! All modern browsers support round edges via CSS3 and the code is really easy… (Older versions of browsers including IE will roll back to square edges, but those users deserve to miss out for not upgrading their browser haha).

border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
-ms-border-radius: 15px;

Okay… It seems like a fair bit of code… But once the full spec is complete you’ll only need the first line. For now this will cover the leading browsers (Safari, Chrome, Firefox, Opera and IE9+).

Secondly, fonts. Too many times I see site using cufon, sifr or other attempts at using non-standard fonts. ALL the major browsers support the font-face tag as standard and there are many website that will generate the fonts and code for you. My preference is http://www.font2web.com/ but http://www.fontsquirrel.com/fontface/generator is also good… They will provide the CSS code which you put in your stylesheet, then you can select call the font-family in just like you would a standard font. It’s really easy to do.

Lastly, gradients… Relatively easy to do as well is CSS 3 gradients. These can be a bit trickier but there are some good tools to help you generate background gradients so you can stop using images. Try http://www.createcss3.com/ for basic linear gradients or http://www.colorzilla.com/gradient-editor/ for more advanced gradients with colour stops etc.

In future demos I’ll cover more but these are the 3 key ones you should be using today. In future tutorials I’ll cover transforms, transitions, animations, shadows and much much more! Stay Tuned.

At the FOWA London 2009 Alex Hunter did a very interesting talk on marketing that is a must see for anyone in the web industry. In his talk he covers things such as putting a face to your company and becoming a person which I covered previously in my recent article about social media marketing on the small business hub. He also talks about being real, putting in the effort to make your venture work and how the world has changed from the old way of doing business. Take the time to sit down and watch it, it just might change your world.

Warning: Contains material that may offend some viewers, but probably not you so don’t worry about it…

I’m currently working on many of these things as I rebrand one of the companies I started as well as my new venture Super Domains.

If you need a further kick in the pants to convince you to get serious about your business – watch the below video also from FOWA London 2009 where Gary Vaynerchuk tell you about how it is time to put the time into your business, stop talking, and start doing.

1. Sites

Stay organised with sites. This is the first feature you see when you open Coda. Sites allows you to setup a working directory, FTP account and much more for each site you’re working on. So you can just double click and get connected. By far one of the most valuable features of Coda.

2. Books

What was that code again? You know when you have that mental blank and can’t remember a code for the life of you. With the built in books in coda you have complete references for HTML, CSS, Javascript and PHP. Perfect! Just hit the books tab.

3. Visual CSS Editor

If you work with CSS the visual CSS editor will save you a lot of time. CSS newbies will love it as well as it will make learning CSS a breeze.

To use the CSS editor, select your CSS file (or page that contains the CSS you want to edit) and click the “CSS” tab. To add a new style click the “+ Style” button on the bottom. Easy. All your styles and classes are listed down the left hand side, to edit it’s properties just enter the values in the visual editor.

4. Line Numbering

Error on line 3078..? Where on earth is that? Turn line numbers on in your preferences (Coda -> Preferences) under the Editor tab. Line numbers will show up on the left hand side of your files, you can also use the line numbers to select a whole line or multiple lines among other things.

5. Clips

You know how annoying it is to write the same script over and over? Of course you do, this is where clips comes in. Clips allows you to save a script in an easy to access window where you can double click to quickly insert the script. Brilliant! To show the clips window just click the “Clips” button at the bottom. To add a clip simply click the “+” symbol in the bottom left (not the far left, the one more to the center). Name the script, add the script and you can also add a selection placeholder (the selection cursor will automatically go to this point when the clip is added) when you’re done, click “Save”.

6. Tab triggering (shortcuts)

What if you could just type “html” then hit the tab key and it automatically puts in basic HTML for you?  It’s there, try it. But more than that, you can add tab triggering to any clip you’ve added! This is one of the most time saving tools in Coda. You can assign a tab trigger to a clip by click the “i” next to a clip in the clip window. Down the bottom you will see “click to add tab trigger”, click it, then type your trigger text and hit tab. Once you’re done hit “Save”.

7. Smart Find/Replace

Say you need to find all the pages that contain “<htmll>” because for some reason you mis-typed it then can’t remember which pages you put it in… Firstly, how silly of you. Second, don’t panic, hit Command + F. In the search field type “<htmll>”, in the replace field type “<html>”, then on the left it will have a checkbox “Find in “directoryname“”, tick the checkbox then click “Replace All”. It’ll then find any files with “<htmll>” and replace it with the correct “<html>”. Problem solved!

8. Dragging Images to create the img tag

This is one of those handy little tips that will make life a little easier for you. In the file viewer browse to an image file, click and drag it into a HTML or PHP document and it’ll automatically create the XHTML tag for you!

9. Easy Indenting

If you’re like me, you’re anal about making sure everything is indented perfectly. And for good reason, it makes reading the code easier and helps with fixing mis-closed tags. Coda makes indenting large blocks easy. Select the block of code you wish to indent (or un-indent) and hit “Command” + “]”  (or “Command” + “[“). This will shift the block forward or backward. Truly handy.

10. Plug-ins

The possibilities are endless. Plug-ins allow you to extend Coda’s native power. Visit here and see what useful plug-ins you can find. I’m always using the compression plugins to strip whitespace and comments from my Javascript and PHP.

There is more power under that hood, and this is just a small selection of the power within Coda, visit their developer site to see more tips and tricks along with video tutorials and much more!

The Code

It’s really simple, all you have to do is separate each class with a space like below.

<div class="first_class second_class"></div>

This will reference both classes to style the element.

This is a nice little trick to keep in mind for your sites.

Getting burnt

I myself was recently burnt from choosing the wrong host. Not really due to poor choice, it was more of the host not being able to handle it’s own growth. The particular host (Servage) was great for a good year before I started my web development business. It was a safe choice however it was growing at an incredible rate. Problems started arising with short bursts of downtime, to slow site access, to database overloading, to consistent email issues, to major site hacking issues. From secure and stable to insecure and slow in the space of 6 months. Not only that but from helpful support to unknowledgable support that most of the time was too focused on appearing to be friendly that they never actually answered the question. It was more like a place to go and just get an apology for their B-grade service rather then getting answers.

A decision was made to move our sites to the more expensive, yet more reliable/helpful Media Temple. Over triple the price for less space/bandwidth to the untrained eye sounds ludicrous. But anyone that has been through the hosting round will tell you, it’s more than just about how much storage you get. You need to look deeper. The switch is still in progress as it is quite a difficult process to move hundreds of sites from one host to another making sure the client doesn’t lose emails, and there is no downtime etc. This is why choosing the right host is so important.

Features

This is the first thing you’ll see on most web hosting sites is a list of all the features. Whether it be unlimited storage to wordpress easy installers to $25 free Adwords credit. In theory it’s great say “hey, unlimited storage! Woo! I can host EVERYTHING there!”, it’s a nice thought, but at what point will you need all that storage? I know I struggled to use 1gb with about 25 client sites. The host knows this , hence why they can give it to you for dirt cheap. Take a step back, have a look at how much storage you’ll realistically use. If you’re launching a site that’s going to need a lot of storage consider using Amazon’s S3 service, it can actually reliably scale to virtually unlimited storage and will only cost you for what you use. There are other limitations with most shared hosts such as a limitation on number of hits you can get per day, or CPU usage etc. So you generally are fairly limited in a shared hosting environment so don’t get caught up in huge amounts of storage and bandwidth. Be realistic about what you need, and make sure you don’t get carried away in the world of “unlimited”. Extra’s are nice, but not really necessary.

Support

A big must is for a host to have good support that you can contact 24/7 and get a fast resolution. Look for something with 24/7 phone support because email and ticketing is slow, you have to type it then wait for them to check the problem and type back. Very slow process, phone calls are instant back and fourth, so pay the extra dollars and make sure you have phone support 24/7.

Security

This is a big one, and hard to know as hosts won’t advertise having terrible security. But Google knows so do a bit of research. For example search for “Servage Security” and you will find literally hundreds of blogs just like this talking about how they have had terrible hacking problems do to Servage’s insecure set-up. Servage isn’t the only one, there are plenty of hosts which have terribly insecure set-ups. The bigger the host the more likely they are to face hackers. Make sure you pay the extra $$$ and get one that knows what they’re doing.

Clustered hosting

Always look for a clustered hosting set-up. A clustered hosting set-up spreads your site access across multiple servers so if one goes down your site is still accessible by one of the other servers. This is one sure way to make sure the hosts uptime is reasonable as it reduces the chance of widespread incidents.

Shared or dedicated?

This one is a tough one, there are so many pro’s to dedicated but the price is out of most peoples reach. If you’re expecting high traffic, you don’t believe a shared host will be able to handle it and are on a budget, consider dedicated virtual also known as a virtual private server. It has all the benefits of a dedicated server but in a virtual form, so the hardware is being split but resources are allocated to just you. Again look at what you need, if you just need general hosting you won’t need more than just a shared host.

Do your research

Most importantly, find sites hosted by the host you’re looking at and check connection speeds. Read reviews and take note of all the negative reviews. Even Google it.

Conclusion

It’s not the size that counts, it’s how you use it. Look around, ask around, find a host that work for and with you. Make sure the host has everything you need. That includes all the support you need, when you need it. Always keep offline back-ups of your sites just incase something does go wrong.

It turns out the problem lies in Photoshop’s color profiles.

The solution

Visit the following site and follow the instructions…

http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/

I hope this helps… And kudos to the writers for finally finding a fix for us!

What not to do…

You see it all the time when browsing the web, large blocks of text that would just take so long to read. Have you ever actually thought about how often you’ve actually read the information they’re trying to present you? Most people lead such busy lives they don’t have time to stop and read what looks like a large amount text.

For Example:

Too Much Text

Personally, I wouldn’t stop and read that. Therefore they have lost me straight away. So how do you present the information in such a manor, it becomes interesting, digestible and still gets your information across?

What to do!

Firstly, less is more. Find the key points you want to get across, cut out the rest of the blabber, people don’t have time to read blabber. It’s all about refined information, only say what needs to be said.

Secondly, once you have a list of you key points that you want to get across, then we need to present these key points in a manor that is clear, uncluttered, and to the point. The best way to do this is present the information in small digestible chunks, with short key point headers, icons to match the point, and short sentences that inform about the point.

Apple do this well when they sell their products.

Apple's Way - A Good Way

As you can see the key points on Apples site stands out, they are presented with large images which give readers a taste of what the point is selling. The key points (feature titles) are clear and stand out, and it allows you to see if the feature interests you. If it does you may read a little about it, otherwise you check out the next feature.

Imagine if the images weren’t there and the information was just as a list – chances are people would not read all the points/features as they would be 1) Cluttered and unclear, 2) Indigestible.

Here are some other examples of well laid out information for easy digestion.

Mail Chimp

Mail Chimp sets it information next to large screenshots and clear headings so you can flick through the features and choose to read about it or see what the next feature is.

NexTunes.com.au

NexTunes.com.au uses icons to breakup each of it’s features.

It’s a fairly simple concept and should help you better lay out information on your sites to make it more clear to your visitors as to what you are trying to get across.

If you use the prototype javascript framework there is a call built in! Handy…

Here’s the code for Prototype users:

var pos = $("elementID").viewportOffset();
var x = pos[0];
var y = pos[1];

Nice and easy…

For those of you who don’t use prototype, below is a function you can use to get the X & Y coordinates relative to the page (viewport).

The Function:

function viewportOffset(forElement) {
	var valueT = 0, valueL = 0;<
	var element = document.getElementById(forElement);
	do {
		valueT += element.offsetTop  || 0;
		valueL += element.offsetLeft || 0;
		if (element.offsetParent == document.body) break;
	} while (element = element.offsetParent);
	element = forElement;
	do {
		if (element.tagName == 'BODY') {
			valueT -= element.scrollTop  || 0;
			valueL -= element.scrollLeft || 0;
		}
	} while (element = element.parentNode);
	return [valueL, valueT];
}

This is a modified function from the prototype framework.

Calling The Function:

var pos = viewportOffset("elementID");
var x = pos[0];
var y = pos[1];

I tried several of the functions on various blogs etc none of them seemed to return anything but 0 in Safari. The above has been tested and works in the latest versions Safari, Firefox, IE and Opera.

Enjoy!

The Function:

PHP has a function called number_format(), it’s purpose is to format numbers nicely with commas for 1,000′s and the extra zeroes for your rounding.

$number = 2199.9;
$numberFormatted = number_format($number, 2);
echo "$".$numberFormatted;

This would echo “$2,199.90″, prefect formatting for working with currencies.

You can also use custom separators if you wanted, full function specs can be found here.

The Solution

You have to tell PHP to read the global variable into the function. To do this simply type “global $myglobalvariable”, for example…

$myvar = "This is my global variable";
function myfunction() {
	global $myvar; // This will bring the variable into the function.
	$myvar .= " inside a function";
	return $myvar;
}

This will return “This is my global variable inside a function”.

Again, really easy! Enjoy.