To kick off the new year in Web Design, I thought it would be best to go through a couple of my tell-tale signs that can help you gauge if and when your website’s design sucks. Obviously, “Website design” in this concept does not only include the graphical elements of the page, but of course the Information architecture, usability, accessibility, etc. So without further ado– Let’s get going with round one of “Your website design sucks because…” with Your website design sucks because users can’t find crap!

1. What the heck are you thinking?!

Whether or not you are running a corporate information site or a 15,000 page e-Commerce store- your content should be easy to find! The biggest problem is people think that you ALWAYS need a search box. Search on a website comes in many flavours, and sure; a search box would be awesome- as long as the results are easy to understand and filter to the right place. Having said that, not all great websites have search boxes or website search for that matter – but most if not all of them [great websites, that is] make the user experience worthwhile by making their content easy to find. Here are a few tips:

• If you are running a blog, make sure there is at least a way for the user to find an archive of all your content. After all, one of the main calling-cards, if you like – of a blog, is the fact that it is a chronological listing of posts or entries. Other important elements that help users searching for content is Tags and Categories. Try to make sure your posts only belong to one parent category. I.e. Not “Sydney Web Design” AND “Web Design” — after all, 99% of the time, one of the two (or more) categories makes the most sense. Tags help users by allowing to search for other posts which they might find interesting based on a common interest; i.e. Usability.
• If you are running a website; other than a web log , make sure that there is a common, geographical structure to your pages. I.e. there should always be the same header and footer on all pages – including any side-navigation or side elements. Doing this makes sure that users learn where things are and helps elevate any problems in looking for things all over your website.

2. Some conventional wisdom

Most webmasters and/or designers usually get search from a UI point of view under control. I mean come on! It’s basically three elements– A label “search for:”, a text box, usually pre-filled with “type query here” or something of the sort, and finally a “go/search/find” submit button… Easy, right? Wrong! Whilst the front-end features of site search are seen as simple, most websites/intranets (even the big players) crash and burn on the search results page.

3. A case study in Search Usability: Australia Post

Ahh, good old Australia Post! I love the fact that they deliver to anywhere in the world and the prices are not too bad — and I haven’t had anything major get lost whilst sending out *so far*. However, one thing that drives me insane about Australia Post is their website; http://www.austpost.com.au — not only is this website in need of a “major” overhaul. Let’s start with the essentials of this particular topic; Search.

The search on AustPost is located at: http://search.auspost.com.au. Nothing wrong with that so far- In fact, it’s smart to have search on either a sub-domain or a sub-folder at search.domain.com or domain.com/search. Moving right along. Oh wait! That domain does not work (Under Construction!!) unless you append the following to it: “/cse/auspost/” making the FULL-URI http://search.auspost.com.au/cse/auspost/ – Tsk, tsk AP!

If you type “test” in the search box and click the search button of the main page you get diverted to a search results page; which is okay so far– However, the diverted results page is a TOTALLY DIFFERENT website (in terms of overall look and feel). Check it out for yourself.

Australia Post Search Box - Main Page

All good so far… Let’s see what happens when we get diverted to the ‘actual’ search page.

Australia Post Search Results Page - Search.austpost.com.au

Oops! Something went completely wrong. Did I, as the user kill the site? Or is it meant to be a completely different site followed by a completely different user experience? [Both valid questions you don't need a visitor to your website, especially your search page asking!].

As Homer Simpson would say in a time of crisis; Doh! Different Logo, Different colour scheme, Different tab system, Different IA… Well, at least the logo is generally in the same place as before. Granted, I don’t know the reasoning behind this– Maybe they are in the process of moving sites across to a newer(?) design – but nonetheless, I think being a government corporation, this is pretty bad usability!
Anyway, let’s move right along… As if that first problem wasn’t bad enough, let’s see the search results form. Below is a screenshot of the “general” search form. By general search form I’m referring to the non-advanced variety!

Search Results Box

Wow, okay — where to start, where to start. Let’s rattle off some of the issues with this search box/form.

1. Why have a “Show search options >>” as well as “‘Advanced Search”. That is not only confusing, but a waste of visual space/real estate. Why not make general search easy to use with no extra-ordinary features, and leave advanced search for those people that need to dig deeper into the data mine. Ahhh, I slowly started to realise why, and you will see why soon!
2. See the “Select All” and “Clear All” check boxes? They only select/deselect one option — and that is the “Australia Post Website” check box. WHAT WERE YOU THINKING AUSTPOST DESIGNERS/DEVELOPERS!!! Give me three good reasons why this is necessary on this page (in its current format) and I will stop using Facebook for a month… Okay, a week! Not only is this stupid from a usability/IA point of view, but it’s NOT needed here. Why?, you ask?
   1. When you actually decide to click on “Search” you really DON’T end up having a choice in the matter, because the “Australia Post Website” check box is auto-ticked when the page has reloaded with the search results! Oh Oh!
   2. It’s a waste of a control to begin with! The same thing could be easily achieved with one button which toggles through the selections. I.e. starts off as “Select all options” then changes to “De-select all options” upon click… However…
   3. There is NO need for the control at all since there is NO other option/area to search from. I.e. If there was “Australia Post Website” and “Australia Post PO Box Search”, etc., then it would make sense — however, there is no other option!
3. The “Exact Phrase” check box control is USELESS in all formats of the word! In theory, the “Exact phrase” should let you search for the term “test” instead of the term test. What this ultimately means is that in reality, “Exact Phrase” should only find the search query if it exists EXACTLY in that format, and not part of other words, or as part of a phrase, etc. The only problem with this is that selecting “Exact Phrase” does NOT change the result set; in essence, returning the SAME number of results as well as in the same order! Yay for happy searching — Not!
4. Clicking “Show search options >>” reveals two fields/controls which are apparently meant to help the user whilst searching but not be enough to warrant the name “Advanced Search”. When you click this link, two new fields pop down; a) Format, and b) Modified. Fair enough, you say. They are letting the user choose what type of file format to search; i.e. PDF, Word, etc. as well as the ‘age’ of the document(s) in question or when they were last updated. So what’s the problem here? Let’s take a peek!
   

   Search Results - Modified drop-down

   Wow! That’s probably the best word to describe this drop-down. Sure, Australia Post must feel great giving thier users so many options to choose from, but on what planet would you be from if you need THAT many options in sorting last modified periods? Surely, a) “Anytime”, b) Past 24 hours, c) Past week, d) Past month, and e) Past year – would suffice? No? Granularity of options is something worth your time as an Information architect or Website designer/developer investing in! The more options you give the user that they don’t necessarily need or will never use, the more they have to think. The experience should not make them think! Just give them results, and quick!

5. Don’t even get me started on the “Advanced Search” link! Let’s just say that it’s a little more advanced than what an “advanced search” needs to be. So much so that a PhD in Comp. Science would definitely help! I mean for Pete’s sake, there is a field called “Custom query” which lets you, quote “Create a query using search operators (and, or, not, near, quotes and parenthesis) and system fields.” unquote! WHAT THA?!?! Sure, I may get it, hell you might even get it as a developer or designer, but your average Joe who might need just that little bit more input into his or her search would most likely freak out! Take it off PLEASE! I’m not searching the CIA Central Repository here, people!

3. In conclusion…

Okay, so I must admit at this point in time that I’m getting a little bit more critical and more importantly a touch “harsher” in my blogging and reviews — but I think it’s important to look at problems like these that normal web browsers would AND DO encounter on a day-to-day basis surfing the Interweb! So hopefully you have picked up a few pointers from this blog post that will help you with your upcoming search page design/re-design. Remember, these are above all just some ideas of what not to do, but the field is huge! Make sure you get people with limited Internet experience to trial all software you create (if possible!) but more importantly, keep in mind some of these ideas for next time and I’m sure your users will thank you!

Thanks for comin’ back guys. Please leave your comments or critisisms below – and be sure to Subscribe to the RSS feed so you can keep up-to-date on all the latest goss and posts from C2.0 Web Design Blog. Till next time, Cheb.

We are  going to start this week by tackling the issue web designers (and developers) for that matter always face at some stage in their careers; a loss of creative juices. Sometimes losing your creative juices can’t come at a worst time; i.e. you have an appointment to go through a concept with your boss in 1 hour and you haven’t started! Oh Oh!

So let’s get going and look at a couple of ways which have helped me get my creative juices flowing in the past.

Web design inspiration: Getting your groove back…

1. Look around you for inspiration

Where we live, work, eat, sleep and more has a lot to offer in terms of inspiration. Whether it be the retro ‘Astro Boy’ poster on your wall or pattern-infused bed sheets – look around you and you will find something that will get your visual and creative juices flowing. Next time you are on a trip in the car or on a bus/train, look around you. Signage, foliage, Zebra-stripes and more can help.

2. Check out web design galleries

Web design galleries have been shown to offer tons of inspiration. Galleries like: CSS Remix, CSS Mania, CSS Drive, CSS Elite, CSS Beauty, CSS Vault, CSS Import, Screenfluent, Screenalicio.us, We Love WP, Design Snack, Web Creme, Best Web Gallery and more showcase some exceptional design work which will definitely give you a bit of an edge when designing your own websites.

3. Visit your local record store

You may think this is a bit left-field, but there have been numerous times when I have rummaged through a record store for inspiration. Record stores hold a lot of design inspiration in the form of CD/DVD album art. I have found that many alternative/rock bands have cool album art – generally not a physical representation of the band, but a graphical or uber-cool concept art. Here are some examples of cool album art that can offer plenty of design inspiration.

We shot the moon album art

Joint effort album art

James Blunt - All the lost souls album art

Dashboard Confessional - The shade of poison trees album art

4. Visit an art gallery or museum

Art galleries are a great place to find inspiration. Whether it be a painting, or a statue of a 15th-century water creature – but above all, the buildings themselves! – as they say, don’t knock it till you’ve tried it!

Denver Art Museum

5. Buy some books

Books are always great for inspiration – even non design-based books! Anything from the spine of the book to the front or back cover can provide inspiration – however, actual books based on designs are great too.

Some of the best books I’ve read/found to help with inspiration include:

6. Check out other designer’s work

This is an important one… There is nothing like looking at your peers’ designs for inspiration. Start with sites like Deviant Art and  Threadless – both design communities which are constantly updated with heaps, and I mean heaps of design and other forms of inspiration.

7. Take some photographs of interesting objects and textures

Next time you’re out on a walk or driving around with mates, keep a camera handy. It doesn’t have to be a $900 SLR or anything like that – just anything which is capable of taking, ahh, photos! This is an important step in getting your groove back because you just never know what you come across that offers some sort/form of inspiration. It could be as simple as graffiti which gets those juices flowing, or maybe the sun setting above green pastures. Seriously – what do you have to lose? Try it!

8. Walk around a thrifty or antique store

You know those beaten-down stores that you might have to travel 20km or miles to get to? Yup, those stores that only seem to invite in old(er), men or women – or in certain cases, maybe your mum (or dad, for that matter) seeking that something special. Perhaps a dog-eared special edition of a novel which you cannot find anywhere else, or maybe that Tibetan-inspired lamp. Rummage through these stores for ideas – you will never know how much visual ‘gold’ they store until you walk into one.

As they say, one person’s  trash, is another man’s treasure. If you don’t want to buy something, at least take a notepad and a pencil, or perhaps a camera and take happy snaps… As long as the shop owner doesn’t mind, that is!

9. Plan out your designs by creating wireframes and prototypes

I feel that when I have a mental blank and can’t come up with any design goodness, i mockup a few ideas around grid-based designs. Axure or Microsoft Visio are great tools to do this on.

Just remember, designs don’t always start out in Photoshop (or whatever you use!). Great designs have a back-story; a skelaton, per say. Start by laying down the basic foundations – i.e. logotype on the top left, search/login on the top right, navigation, sub-navigation, content area and footer – and you will find you are half way there. Simple ideas such as effects on hovers, etc. will guide your design juices into the right direction. Combine that with some imagery and a bit of flair, and you’re suddenly the main actor in ‘How Stella Got Her Groove Back II’.

10. Check out other types of media for inspiration

Turn on the TV, check out the local newspaper – heck, even listen to the radio. You will most likely see or hear something that will get you off the beaten track. I find magazines and newspapers have plenty of inspiration. Something as simple as a telephone advert in a newspaper can give you ideas about your next gig. It’s that simple. I know it sounds like something every designer shoud know – but apparently some designers believe that the only medium they can seek an oracle on is the ‘net. Reality check, anyone?

So there you go guys – another one bites the dust. I will hopefully have a bit more time on my hands to draft up some more inspiration but for now sign up to the RSS Feed for more news and articles. Till next time, C.

As most of you would probably remember, around mid-May of this year, Cheb 2.0 blogged about the upcoming design and functional changes to Facebook! – Well, I am pleased to report that we are getting very close! With just over a few days to go, and Facebook slowly begining to phase in the new changes, we now have a clearer picture of excactly what we are in for.

Let’s get cracking and check out the upcoming changes to the ‘book.

New Facebook Profile Page

The new Facebook Profile page is pretty wicked, if I do say so myself! Not only is the design still minimal, yet intriguing – but it is very functional and still has that touch of Facebook-y goodness to it which have kept Facebook in the same group as Apple and other leading sites which take a heavy focus on web design!

Check out our screenshot of the new profile page.

Facebook Profile Page

As you can see if you click on the screenshot to the left, there are quit a bit of functional differences between the current, or old(er) style profile page and the updated, shinier profile page.

Some of the most prominent changes include:

1. Complete re-design of web page as well as header and footer.

2. Tab-based system to access profile content such as Wall, Info, Photos and Boxes (which essentially are all the applications that are not displayed on the front page), and a “+” button so you can add a new tab from your applications (shown below).

Facebook info tab showing 'Add a new tab'

3. A bunch more interactivity with Facebook now allowing you to make a lot more changes ‘off’ your current page as opposed to going into your profile’s ‘Edit’ screen to do so. This includes such things as allowing you to edit ‘About me’ information, as well as ‘Networks’ off the profile page.

4. Status messages have now been given the space they deserved from the start, as well as the ability to ‘Add Photos’, ‘Add Video’, ‘Share Link’, ‘Write’ and more (again, based on applications installed) – See below for an animated GIF.

Facebook header preview (animated)

Facebook’s new friends page

The Friends page has been redesigned and re-formatted as well. The coolest gadget to be found on this page is the new ‘Friend Lists’ feature. Facebook says that you can now “easily organize your friends into convenient lists for messaging, invites, and more. You can create whatever kinds of lists you want; all lists are private”. It’s a pretty neat little feature that will make it a lot easier for you to manage a ‘distribution list’ of some sorts which will make your life easier on the long run if you message lots of your friends, for example. I can see this developing into a ‘Friends’, ‘Work Mates’, and ‘Annoying People’ type list! Here’s one I just created called “Test”.

Facebook's new friends list

Facebook’s new homepage

Facebook‘s new homepage (when a member logs in) is very much similar to the original, current design – however it is a lot more cleaner and functional in terms of physical separation of related content and sections. There is now a main right-side navigation which contains all the usual stuff like ‘Who poked you’, or ‘Upcoming Birthdays’, as well as any requests or user updates as well as status updates in general that flow through.

The main content area is simply a listing page showcasing in a Facebook v1.0 style gallery of upcoming uploaded photos and videos, as well as the usual array of friendly updates.

Overall, there are quite a few more cool additions such as Facebook now allowing you to decide how ‘The Wall’ is organised. In essence, you can decide if each new update/addition, such as you uploading four photos, are shown on one line, short, or full views classed as “Story Options”.

Click on the screenshot below for a bigger view.

Facebook's new homepage

So there you have it guys – in again with another exclusive review of the new changes to the new Facebook redesign. Hope you’ve enjoyed this post. I’m sure you’re going to love the changes that are in store for you as soon as the new profiles begin to roll-out sometime this week or next.

Till next time, subscribe to the RSS feed for updates on new posts. For an up close look yourself, login to the preview page here.

I’m back and it’s time to blog again. Today we are going to kick things off by talking about Project Management; What is it, methodologies involved and breaking down the life cycle. In this, part 1, we will be dissecting the first two phases: Project Initiation and Project Planning. Hang around for part 2, which will finalise the phases with Project execution and control, and Project closure.

So without further ado, let’s kick things off.

What is Project Management?

Put simply, project management is the discipline of planning, leading, monitoring and organizing a team and resources in order to effectively bring about the successful completion of a project based on predefined budget, time, quality, scope and resources allocated.

What is the project management life cycle?

That’s a question I get asked quite a lot when consulting with firms on project management and procedural process management alike. In theory, the project management life cycle is dependant on the industry, the methodology used by the manager and other factors – however, there are generally four stages of the project management life cycle. These include Project Initiation, Project Planning, Project execution and control, and Project closure. Let’s take a look at the first two:

1. Project Initiation

In kicking off a project,  the scope of the project is considered very important. Depending on the scenario and the work environment, a project manager is usually chosen with a number of pre-selected team members whose skills the company believes will meet the objectives required to be completed for the project to be successful. However, there are times when the project manager also has the oppurtunity to select his/her team, or just has to settle with who ever is free to be resourced at that time; (generally what happens in the Sydney Web Design and general web design industry).

It is at this stage of the game that the tools required or methodologies which are to be followed (for example PRINCE 2) are selected.

Some documents you should expect as a project manager to complete or work on include:

• Project Charter/Definition
  • This will be a document containing a statement of the scope (the total work needed to complete a project), the projects’ objectives and a listing of team members involved in the project.
• Business Plan
  • A plan of the business goals and how they are going to be acheived – whether short term or long term. I.e. drop legacy systems, etc.

2. Project Planning

The second phase of project management, the planning phase is one of the most important phases. Planning a project correctly can truly mean the difference between failure and success!

Project management planning IDE’s and applications such as Microsoft Project will help you to lay out your project in WBS format. WBS stands for Work Breakdown Structure; an important, principal project management tool which help you to structure a project in a way to define groups of work to be done.

For example, generally speaking a project working off the general SDLC (Software development life cycle) would probably be laid out in the following tree-line structure:

1. Planning
2. Analysis & Information Architecture
3. Design
4. Implementation/development
5. Support/Quality Assurance/Launch

What WBS allows you to control is everything from the subordinate costs for each task as well as materials needed and resources to allocate the work to. In essence, what you see above will obviously then be broken down into smaller, objective-based tasks; hence the ‘breakdown’.

if you are interesed in getting more acquainted the Work Breakdown Structure, head over to another article discussing the Critical Path Method of Project Management.

So there you go guys! Keep clicking around for part 2 which will talk more about project planning and the last two phases of the project management life cycle – as well as more exciting blogging coming up soon!

Don’t forget to Subscribe to our RSS feed for more content as soon as it gets posted!

Thanks for reading, C2.0

Edit: This article is linked to an article which has recently been posted. Read more about “Facebook redesign: The countdown begins“.

From somewhat of a smallish leak to a full-on development cycle to get it going; Facebook is currently in the process of redesigning the Facebook social network. Whilst it isn’t a full-on re-brand, per say – there will be elements such as the start page, the profile page and feed pages which will change!

Why is Facebook redesigning the site?

Whilst they aren’t necessarily redesigning the entire site; Facebook is changing important sections such as the ‘Profile’ in an attempt to clean up the clutter which is being produced by over 25,000 applications ranging from ‘blood sucking vampires’ to ‘am I hot or not’. We all know how annoying some applications can sometimes be, and in particularly how cluttered up they make our profile look.

Since its creation, Facebook has been a shining ‘beacon’ of “What to do” on a major portal/social network. They got the usability right, the site was easy to use and it even looked simple and clean – the direct opposite of Facebook’s biggest competitor; MySpace. So what happens when developers are allowed to build applications which get in the way of such as mantra of excellent web design? You re-design, of course!

Let’s take a look at some of the proposed changes and what you could stand to lose/gain from them. As always, you can click on the images for a larger-sized view.

The Feed and Wall Tabs

To start off with, as you can see, the proposed change to the main profile page (i.e. when you click on ‘Profile’) is to clear up all that clutter left by all your applications flowing down the left-side gutter of the page as well as in the content area as well.

If Facebook has their way, you will expect to see that sort of change on this page.

The changes to this page include:

1. The status message, e.g. “Cheb is now partying”, or in this case “Holly is at school” is shown directly under the profile photo and not directly under the name, as currently is.
2. There is now somewhat of a secondary menu/navigation which is tab-structured allowing you to jump to different ‘views’ of your/or someone else’s profile.
3. The new view allows you to directly post information such as a link or photo off the sub-section in the secondary nav.
4. The ‘Feed’ view, i.e. the current page – above, will combine both the current feed page as well as the wall. What that means is there is no current way to filter either or – and it also means that the normal view, or the ‘Feed’ view will show both; other people leaving wall posts for you and your updates at the same time.

Secondly, the view to the left shows what would happen when someone clicks on the ‘Wall’ tab.

As you can see, no major changes there except that you will be able to remove the ‘Wall’ tab at anytime but the ‘Feed’ tab has to stay put! This makes sense, considering the Feed tab will show both types of inputs – whilst, for good usability, having another tab for just that type of content, i.e. ‘Wall’ is a great idea and kudos to Facebook for setting it up that way.

The new publishing system

The publishing system will be the centralized spot to add a wall post, post a video or photo, as well as post a link to your feed/profile.

I believe that as a user adds new applications which present more ways to post content, such as ‘send a gift’ or anything of the sort, they should be added to the tabs which currently stand at ‘Wall Post’, ‘Video’ and ‘Post a Link’.

Overall, I think this is a great way to combine content into categorically-linked sections. I am not a huge fan of combining the wall posts with the feed, but the structure and navigation for getting to places as well as ‘publishing’ content is possibly second to none! Let’s just say that we can’t even begin to compare it to MySpace!

The applications view

Ahh, where would we be without our much-loved applications? Well, with a wall and notes, I guess! Anyway, the cool news is that there is no way applications are being eradicated or anything – quite the contrary! They will be given their own tab, or view if Facebook has any say in it! Let’s check out the proposed changes:

Hrrmmm! There’s quite a bit to contemplate on this view. Whilst being a working title, I don’t know what Facebook is thinking calling this page ‘Boxes’! I think it was some insider joke or something of the sort, because the first application in the main content area is ‘Family Tree’ with quite a bit of boxes! [Or was it a publicity stunt?!?] *conspiracy conspiracy*

I quite like the idea of zoning out the applications into their own section – after all, it really is those applications that started to clutter things everywhere on Facebook.

The name ‘Boxes’ has to go! No two buts about it. However, what would be cool is if Facebook allowed users to call this what they liked; for example, ‘My Appz’ or ‘My Stuff’ – however, you could see why this would be a problem when people start calling it ‘Fo Shizzle’ or ‘Crack Pipe’ – which absolutely make no sense whatsoever! [Yes, I can be weird at times!]

I think Facebook will eventually just call this ‘Applications’ or ‘My Applications’ – leaning towards the former.

Conclusion

So there you go guys – another design review/did you know style of post! Hope you liked the review and more importantly enjoyed seeing the changes that Facebook should be implementing very soon.

To have your say on the matter, feel free to send an email to profilespreview@facebook.com with the subject heading: ‘Feedback on the new Profile’ or join the group.

Drop us a comment and let the community know what you think; share this post with a friend and make sure to subscribe to the RSS feed if you haven’t yet for further updates.

I’ve been playing with glow effects lately for an upcoming website redesign, and I’ve been noticing quite a bit of work being done with Photoshop’s pen tool and cool lighting effects, so I figured I’d share some introduction to the pen tool itself as well as a glow/lighting technique which can be used in many, many ways with you guys. Sit back, relax, and enjoy another Photoshop tutorial.

Just as a sneak peak, this is what we are going to be creating…

Okay, Let’s start from the top!

If you’ve never used the pen tool in Photoshop before, you are definitely missing out. The pen tool is great for working with vectors as well as creative bezier curves.

Considering the pen tool in itself is usually classed as a intermediate/advanced tool in Photoshop, we will just touch up on the basics so you can get going with this tutorial.

The Pen Tool

The Pen tool has the following five options:

1. The Pen tool is mostly likely going to be the main tool you use. The ‘Pen Tool’ allows you to create straight lines and curves that make up most your paths.
2. The Freeform Pen tool is designed to let you create paths quickly by just drawing freehand with the mouse. The main downside is that it’s hard to create accurate paths and especially curves due to the nature of drawing with a mouse.
3. The Add Anchor Point Tool allows you to insert additional anchor points into your path, basically splitting a line segment into two. This helps you when you have already started a curve but you want to convert this into a more complex shape.
4. The Delete Anchor Point Tool removes anchor points from your path. What happens as you remove an anchor point is that the anchors on either side of the removed anchor join up to form one longer line segment, as if you have just snapped them into a single line. This tool helps you when you have too many anchor points on your path.
5. The Convert Point Tool allows you to convert a smooth anchor point to a corner anchor point, and convert a corner anchor point into a smooth one.

Even though that was a gentle introduction to the pen tool; today, we will mainly work with the Pen tool itself – so create a new document, 460×460 and let’s go! Try to create the following easy curves and lines by following the simple steps.

If you can get these down-pat, it’ll make the next part easy as anything! NB: I have created a little compass to help you with the angles of the curves. :0) Good luck!

If you have made it this far, I’m assuming that you can now make a straight line, a simple curve, and take a curve a little bit further and create a wave of sorts! Well done..

Okay, let’s create a new document, 460×460 and set background colour to black, #000000. Before we get kicking, let’s make sure we have some settings where they need to be.

Firstly, when you click the pen tool or press P on your keyboard you should see the preceding options on the top of your screen. Make sure you select the second option of the three ‘squares’ – the ‘Paths’ option highlighted in green above. Then make sure that ‘Pen tool’ is selected, which should be on by default anyway. Finally, click on the down-ward arrow after the custom shape icon; the star-looking icon. This buttom (down-ward arrow) is tool settings, and as you can see there is a ‘Rubber Band’ option.

What’s the Rubber Band option for?

The Rubber Band option is used to help show you where the curve is heading and how it’s looking before you click to set it on the next segment or anchor. This is a good option for beginners because it helps to show you where the path will go next. The Rubber Band option might be hard to begin with, because even when you are done with a curve, the line just ‘follows’ you. Click escape, ESC, on your keyboard when you are done with a curve and that will get rid of the stalker!

Just a little tip – when you are done with paths and this effect, and you want to draw shapes, make sure you select the first of the three squares, or ‘Shape Layers’ and not ‘Paths’. Obviously we can keep ‘Paths’ on for now because we need this option.

So back to your 460×460 canvas with a black background.

Making sure to incorporate a new layer for each object, draw three objects on the canvas, separating them across the canvas if you can. We want to draw what we have just learnt; a straight line, a curve and a wave.

Don’t worry about the foreground colour for now because we will apply layer styles later to dress each one up. So obviously, create a new layer, call it ‘straight line’ or something, draw the straight line and then create a new layer for the curve, and another for the wave. If done right, you should see something like below.

If that’s what you see on your screen, well done! Let’s keep going.

Click the brush tool and select a soft round brush, 5 pixels in size – or if you have a later version of Photoshop, simply select the brush tool, (press B), and then right click on the canvas and change the ‘Master Diameter’ to 5px and leave hardness at 0% (obviously! it’s soft, right!). Select white, or #FFFFFF [thanks Hank!] for the foreground colour for now so we can straight away see a result, then click back into the pen tool.

This is the fun part! You might be wondering why we setup the brush? Well worry no longer, we are about to find out why!

[flashvideo filename="http://www.cheb.com.au/wp-content/uploads/2008/04/Untitled.flv" /]

Okay, let’s recap.

If you right click on the paths you should see a ‘Stroke Path’. What this will do is just what it says; Stroke the path you have made using the option you tell it to. Because we edited brush settings beforehand, we choose ‘Brush’ and make sure we keep ‘Simulate Pressure’ ticked. After that, you’ll want to right click again and ‘Delete Path’ because we now have a stroked layer in its place and don’t need the ‘guide’ anymore!

What exactly is simulate pressure?

Simulate pressure simply gives the curve a more realistic stroke. It does this by tapering-off the ends of the curve/line as if the pressure has started off light, and then eased-off on the end of the curve. Trust me, you want to keep this selected – it makes everything look much better!

Okay, if you followed the video, you should now have something like below.

Cool hah? Okay, let’s get some glowing happening.

If you apply the following Layer effects to your now-stroked paths, your glow should start forming.

When you select the above layer styles; if the paths are all on one layer (even though we talked about splitting them up before), as an example, should start looking something like this:

Cool hah?

Quick Tip 2.0

If you want to make your life easier, you can click the “New Style” button as seen in the above Layer style selection screens; immediatly under ‘Cancel’. This will let you clone all the settings that are open on the current Layer style screen to be used on another layer/path, etc. When you want to re-use the settings, go to: ‘Layer > Layer Style > Blending Options’, click on the ‘Styles’ tab, on top of ‘Drop Shadow’, and ‘Inner Shadow’, etc – and then select your new style from the list; press ‘OK’ and you’re done!

So there you go! Experiment with your curve, brush master diameter and type, and also your lighting (fill/layer effects) and you could come up with something like below…

So there you go people, hope you learnt something about the pen tool today and some effects you can create using stroke paths.

Enjoy and drop a comment if you liked the tutorial or you need something explained – or feel free to share it with your mates. Get on the RSS Feed to keep up to date about when I next post!

Thanks for reading, Cheb.

No, really – What makes a great website?

That really is the million dollar question. Many people have tried to tie this down to mitigating factors – but at the end of the day, in my opinion – a great website is one which meets the following rules:

Content

Content is easy to find

It’s simple – if a user can’t find information they are looking for, they have no reason to be on your site. You need to make sure content is easy to find; and in a variety of ways. For example, on Cheb 2.0, you can search the site for any keyword which will return a list of matching articles/posts, or you can click on ‘Archives‘ menu to show every article posted sorted by date. Further to that, there is a tag cloud to search by keyword or a direct link to each month with the number of posts that were published during that month.

You might be wondering why I have left that as a way to search for posts? Well, in essence it was a really easy decision. Not only does it just add another form of search – but there are times when monthly archives make sense. For example, if a website regular was to go on holidays for 2 weeks in one month and then come back to your website next month, all they want to see is what they missed out on – and this is where monthly-archiving achieves a sense of purpose.

Besides, my reporting/stats definitely show people are using it! 172 uniques can’t be wrong, right?

All in all, make sure you take every step you can possible to make sure the user experience is a good one; allowing them to find content easily will definitely help that endeavour.

Original and fresh content that brings people back

Cheb 2.0 has lots of RSS subscribers. I’m a huge advocate of RSS feeds! It means people can stay in touch with your website/blog/online endeavour and not have to worry about constantly reloading for new content. On the flip-side, it’s that new content that keeps people coming back. Whether or not they actually physically click on your site to see it, or read it through their RSS; they are still a visitor and they still have to be tracked!

Google itself considers the freshness of a link a massive importance when determining PageRank and relevance. Make sure you set yourself a blogging/posting/editing schedule and follow it to the best of your ability! SEO-wise, make sure you keep your homepage fresh and beaming with new content – but importantly, do not neglect your inner pages as well.

When I say inner pages, I don’t mean to go back and worry about a blog post you did 10 months ago; we’re talking about your ‘About’ page, or your ‘Services’ page! Keeping those integral pages fresh makes sure: 1) they don’t fall into supplemental results, and 2) Google and other search engines show you some love for those pages too!

Aesthetics/Look and feel

The website is physically appealing to look at

Let’s face it – the only reason people still visit UseIt – Jakob’s usability portal is because of his tremendous advise. No one is going there to admire his website design!

Unless you are an online giant who already has a user-base that will never deplete, i.e. Google, (who when you think about it has great website design because it’s fit for purpose) – you really need to make sure you look into your website design. It doesn’t have to be glitzy and glow; just appealing to look at.

I mean you might have people looking at the screen whilst browsing your site or blog for more than 5 minutes on end (or you hope, anyway!). Do you want them to not come back because they found the site looked a little too 1998?

I’ve seen numerous websites my friends have set up with an amazing idea, or great content that have simply given way due to the in-assurances that come along with badly-designed websites.

Things are where the user expects them to be

This is an important one. If you can’t get your website to look ‘amazing’ – meet the user half way and at least promote a sense of structure and conformity. You need to make sure you set out your page elements to be where the user expects to see them. Unless you are going for an ‘outlandish’ theme or look which you are trying to get noticed for [i.e. Cheb 2.0] – make sure you take into consideration what I’m going to call the ’6 section grid model for website layout’.

As you can see to the right [click to maximise], web users are now confortable with the following grid on many websites. Unless you are trying to break the Interweb apart [laughs] – make sure your logo is on the top-most left section of the website. Same goes for your site search (if any) and top-level navigation.

You might be thinking – but why doesn’t Cheb 2.0 have navigation directly to the right of the logo? Obviously that’s not the point I’m trying to make. My navigation is easily recognisable, as well as still sticking to the top right section of the page. Please keep in mind these grids are only meant to be a guide and are not meant to be followed to the ‘tee’.

As long as content is easy to find, sections are split into bite-sized chunks of similarly-grouped information, and your content area is the most-prominent section of your layout, you should be good to go!

Consistency in colours and scheme

Make sure you try to keep everything consistent! Colours, headings, everything! Sometimes plugins, and other things like Google ads might not help you because they only allow you to change certain bits of detail. Don’t let that stop you from making sure everything that is in your power is consistent. There’s nothing worse than 43.5 different types of link styles. You don’t want one link to have an underline, one not!

Consistency above all means that users find it easier to connect to your website and also get more a feel for how everything works and what stands for what – e.g. links.

User-centered

Usability and accessibility is practiced

This one is important for many reasons. Check that you have taken adequate steps to enhance the usability and accessibility of your website. If you have forgotten the difference between accessibility and usability, check out ‘10 reasons to justify a website redesign‘. I will be blogging in more detail about accessibility more than anything else in a future post – but for now, a little teaser:

Make sure you check how your website, and more importantly, links – look to someone who suffers from varying degrees of colour blindness.

For example, the thumbnail on the left shows how Cheb 2.0 looks to someone suffering from Protanopia (Red-Green colour blindness).

You might think that checking things like that are ‘way too left-field’ – but something as simple as this can be checked in 10 seconds and can mean the difference between someone with colour-blindness not being able to distinguish between your linked content and non-linked content! You still thinking it’s not worth it?

If there was anything I could do to give everyone equal chance of viewing my content/website or what I had to offer – then of course I’m going to do everything in my power to achieve that!

Look carefully at the link colour on “Continue reading Facebook launches chat toolbar. Now they’re talking!”. Notice how it’s already changed from the real, default colour that non-colour blind people should make out?

The user always has an opportunity to right their wrongs

Make sure there is always a way out for the user. A top navigation, side navigation, search and links back home are great players in this field. No matter how good your website is, there will always be users who get lost along the way. Depending on the type of site you are running, you might want to try the Hansel and Gretel tactics of ‘breadcrumbs’. Whatever you choose, make sure the user has ways to right any wrongs they create along the way getting them off-track!

Meaningful file names

This isn’t only great for SEO; it works wonders for the user experience. The address http://www.cheb.com.au/what-makes-a-great-website/ is a lot better than http://www.cheb.com.au/index.php?pageid=283&level=2. I mean it’s not rocket science! Make your URL’s as easy to follow as possible. I should know what the link is about before I even click it! Cloaking or hiding information in strange URL’s kill the user experience and kill user-confidence in your website. Don’t do it!

Site architecture

Logical site structure

Make sure your website structure makes sense. Top-down, there should be a logical flow. The header should come first, followed by navigation (if not already part of your header section), followed by the content with any sidebars or side-navigation, and ultimately followed by the footer of the page.

Footers are just as important as headers. a good footer helps the user determine if the page has fully loaded. If the user doesn’t see what they are used to seeing at the base of your page, they should know that the page has not fully loaded yet; bet you didn’t think about that one!

Folksonomy and taxonomy

Tag your content as much as you can. Tagged content means related content. Try to relate articles wherever you can. It doesn’t have to be a ‘Related articles’ or ‘related posts’ section. It could be as easy as linking the user to relevant articles/web pages based on the current content of the page. Don’t just link-out for the fun of it – or to get more hits!

The way you classify and connect your information is just as important as the information itself! Keep that in mind when you are writing your next article or designing your upcoming website.

Purpose

At the end of the day, if there is no purpose to your website, then it won’t survive for long. Find a niche if you can and tackle it. if you are dealing with something that is ‘way beyond your marker’ or something which is totally hard to place yourself in; whether it be ‘Web design’ or ‘Get rich quick schemes’; the process is the same: find a reason to bring visitors back for me! Whether it is super-cool, fresh, relevant content, or a cool flash game that people just can’t get enough of!

Everything you create online should have an ultimate purpose to succeed!

Tracking and reporting

Finally, great websites learn from their mistakes! Use tools such as Google Analytics to help you determine popular and not-so-popular sections of your website. See if you can get down to the reason why ‘x’ is not as popular as ‘y’.

Good webmasters compare pages that work and don’t work and will simply weed-out or unpublish something which just isn’t pulling in the visitors as it did before. Great webmasters/designers will isolate the page and find out WHY it is failing.

Did you recently put some plugins such as text-ads or any other plugins which may have affected that page? Is there even a way to reach that particular page from other prominent sections of your website?

Put it this way: articles which you may have written 12 months ago, may become tomorrow’s most popular article online! History can and does repeat itself. What was last year’s news may, for whatever reason become popular again. Do not unpublish articles or remove pages simply because ‘they are getting too old’ or ‘you are running out of space’. Get more space!

There you go guys – another one bites the dust. Hopefully these articles/tutorials are hoping you achieve the best you can out of your website and online experience. Please digg/stumble this post if you enjoyed it and subscribe to my RSS feed to keep updated.

Today we will be looking at the top 10 reasons you as a web designer or web developer can justify a website redesign either to a client, or for your own websites. I will also set a scale of how important it is to get the web design process right!

Please keep in mind that when we use the term ‘redesign’ it doesn’t necessarily mean graphic redesign! It could stand for a graphic redesign incorporating development changes (i.e. total overhaul), but i could also be basic or limited functionality/additions which are needed to the site – such as SEO or content changes to make your site better than what it is! So without further ado:

Top 10 reasons to justify a website redesign

10. Your page title is something like ‘New document’ or ‘Index’ or ‘Insert title here’ – or you do not have META description and keywords tags.

Big, big no no.. SEO-wise, not having META description and META keyword tags is a big sacrilege. It is very important that a page title, along with at lease those two META tags are present on all pages. Page titles should make sense to readers first, search bots second. Make sure you do not call your page ‘ways-to-make-money-online’ because that is what your human-URL/post slug is! A page title should be descriptive and above all give the user a run-down of what they can expect to find on that page.

On the topic of ‘Why XML rocks!’ for example, good sample page titles which include textual branding include:

a. ’10 reasons why XML is king, online | Your blog name here’

b. ‘Extensible Markup Language: XML continues to deliver online | Your blog name here’

c. ‘How XML is changing the way businesses communicate | Your blog name here’

Having said that, make sure you don’t call your pages:

a. ‘Why XML rocks | Your blog name here’ – or;

b. ‘I love XML | Your blog name here’

The reason for this is that whilst some people might type ‘Why XML rocks’ in a search engine like Google, you stand to miss out on a lot more important key phrases such as: Extensible, Markup, Language, or ‘Extensible Markup Language’ (which is what XML stands for). If you notice my examples above, you will also see that you could potentially be missing out on a lot more important key phrases such as ‘online, businesses, communicate’.

9. Your site uses overlay graphics like snow falling or stars swirling or “insert shocking DHTML script here”

Oh my! Seriously? You’d be hard-pressed to list five benefits of doing this to your site! Excuses like ‘but the snow falling looks great in summer-time’ are not excuses at all! Anything that interrupts your readers/viewers from information they are trying to find or content they are trying to see is bad news! If you are hell-bent on getting into the festive season – put a Santa hat on your logotype or put a little spotlight under your side navigation with snow falling off that! Don’t use DHTML scripts from those free sites that apparently ‘bring your site to live’. They don’t help your SEO nor your rankings, nor the user experience – in my experience – at all!

8. Your website only works on Firefox/Internet Explorer/Safari

Your web presence should run in at least the two prominent browsers; Internet Explorer and Firefox. Generally speaking, most sites that run Internet Explorer and Firefox should also run in Safari, and Firefox for Mac. It will be to your advantage to get your site working in at least Firefox and Internet Explorer, but metrics such as Google Analytics will be able to help you in deciding what to target. Cross-browser testing is important in making sure users with different setups can access your information.

7. Most of the site is mostly made of graphics or flash

Flash is not search engine optimization’s best friend! The problem with flash sites is that unless there is a HTML-version which search bots can crawl for keywords and content; everything in terms of content, imagery, text, etc is embedded inside the flash file. Google might know that there is a file called ‘homepage.swf’, but this means nothing because all the information which is getting fed into flash is not being crawled. This is the same deal if your content or text is an image which is just sitting pretty on a background; ultimately Google might crawl the image itself, but will definitely miss the 50 or so words that are written ‘on’ the image itself. Don’t risk it!

Text should be text – images are solely for graphics or photos or a logo for example. There are still ways to work-around things that have to be images; such as your logo. An alt tag for example is important on images as well as possible over-layed text in a <h1> for example which is out of the user’s view so your logo does not get blocked.

6. Your website suffers from a very high bounce rate

A bounce rate is simply the number of visitors entering and leaving your site on the same page. So if a visitor clicks on your site from another site and then after viewing what you had to offer decided to leave – that would be considered a ‘bounce’. A high bounce rate is a tell-tale sign that you might need to redesign your content/pages. In most cases, simply moving content around (a different IA strategy) helps a lot – but there are circumstances when you cannot even do that due to the way the website has been put together.

Keep in mind that bounce rates being high aren’t always a bad thing! For example, checking the culprit of your bounce rate sometimes helps.

Here’s a scenario: a user Google‘s the terms ‘How to clear your cache in Internet Explorer’. Obviously, that user just wants the answer and does not know that ‘Control+F5′ clears your cache in IE. Your landing page, for whatever reason, has the exact same question with the answer. Lucky for you, you are number one in Google’s search results page for the term, and the user clicks on your site.

Cool news is that you have got another (possible) unique hit! Bad news is – at this time, the user has got what he or she was looking for and closes the browser window! That didn’t help your bounce rate, but hey – you got your site out there to more bodies – and that has to count for something!

My point is, sometimes a high bounce rate isn’t all non-satisfying, but there are always ways to drop it – which might lead to more hits towards your inner pages; the not-so-easy places to get visitors to.

5. Content is not easy to find

Content not being easy to find is a big problem. Make sure that you have a search on your site if you don’t have one at the moment. If you cannot make your own or your blog, etc does not come with one – use Google custom search – It is free and does the trick. However, please note that it is also important to make your content easy to find through a proper website structure and Information architecture. If you are getting complaints from your users that they are having problems finding information, or popular information is five clicks away – then you should be considering an updated site structure and possibly a redesign!

4. Your site is built on frames

Eeek! Frames are so Web 0.02 it’s not funny! Unless there is an absolute dire need to use frames – and generally speaking there isn’t.. Do not use them! (We have DIV’s and overlays these days!).

Let’s just say search engines don’t have a ball indexing a web site that is stuck in a frame or a frameset. In fact, Google mentions this in the Google Webmaster Help Center. if you have to use a frame on your blog or site for whatever reason, use the “NoFrames” tag to provide alternate content.

3. Your website looks like these:

Let’s just say – if your website looks like the sites above (click images to maximize!) – then you’re in desperate need of a redesign! And that doesn’t just involve a re-structure of your content!

2. Users complaining about bad navigation

“Apparently bad navigation doesn’t help your website these days” – that’s what a friend of mine said blatantly to me yesterday when we were chatting about his website! Well, thank you for that amazing revelation mate!

Navigation can make or break a site! Good navigation gives the user a clear, direct and rapid path to where they are trying to get to. Ultimately, keeping the user in mind when designing navigation is of utmost importance!

Think of it this way – just because you think your ‘about’ section is important doesn’t mean that your visitors do. They may want a quick way to access search (to look for products), or more importantly, the product range itself!

The best way to come up with good navigation is to work out what you are ultimately trying to achieve out of your website. Is it up there as a transactional site? Is it there just as an information-rich directory? Who is your target market/audience and what will they be looking for?

There are a lot of questions to be answered here and the process cannot happen overnight. Do some testing, ask around about what people currently think of your navigation – make it happen! Good old Google may find your linked information ten-levels deep (Yikes!) into your site – but your user’s most probably won’t!

1. Your website is no longer ‘doing anything’ for you or your business

At the end of the day, your website is supposed to be your business’ leading edge – an online store or entity which is available 24/7 365 days a year! Technology changes so fast these days it’s really hard keeping up!

If your website is no longer performing as you expect or your metrics are showing you numbers you never hoped to see; such as a consistent drop-off percentage, less click-throughs, high bounce rate, etc. then maybe you need to look at the reasons why this is happening.

If it turns out your site/blog is just suffering from the good old ‘left-behind syndrome’ then perhaps an update/redesign is what it needs to revive it!

Things you should be on the look out for include key phrases (ending in ‘ability’!) such as:

a. Accessibility – Making your site usable by everyone, including those with disabilities or restrictions

b. Usability – How easy it is for users to meet their goals using your site.

c. Findability – How easily found your site is using search engines.

d. Visibility – The position of your site in search engines or directories.

There we go! another one down. Hopefully you guys have picked up a thing a two here today and you can take it forward with you for when you do decide to redesign your website. Share this page with a friend (below) or add to digg/del.icio.us if you feel so inclined

Subscribe to our RSS feed for more posts and updates!

One of the most-visited posts at Cheb 2.0 Web Design blog was the post on ‘An Introduction to Web 2.0′. In fact, it was so popular that I received a dozen emails through my social profiles to write more about the topic of Rich Internet Applications and other Web 2.0 technologies in general. Having at this time just spoken to a friend of mine, Rhys Tague, who had just started his own online endeavours, he seemed to also be very interested in the whole process of Rich Internet Applications (RIA) and what they mean in todays’ web world. After a little chat we came up with the idea of him sharing his views on RIA with Cheb 2.0! It would give us his insight into the world of RIA’s – and if that involved a couple of hits his way, then bonus! So let’s see what Rhys has found out about RIA’s through his travels on the web.

Hey Mr. RIA, why the big smile?

Rich Internet Applications are no longer just a craze! They are here to stay.

Ajax, Adobe Flex, OpenLaszlo and Microsoft Silverlight are the major contenders in the arena. Even though I have developed in Ajax, Flex and had a crack at OpenLaszlo as well as Silverlight; I found Flex to be the best! But of course it is personal choice and each one has advantages and disadvantages over each other.

For example, create an advanced web form with Ajax used to provide feedback doesn’t mean that you have developed a rich Internet application. A RIA means that a website or an entire part of the website acts like a traditional desktop application. Facebook, Google Maps, Google Analytics and others in the same class have features of rich Internet application; but do not fulfill the definition of a RIA.

For an Internet application to be a fully fledged RIA, the page should never reload to present information – It should run like an application on your desktop. Instead of reloading pages, it should change states and load information into the user interface components. All of the RIA development technologies I’ve mentioned can perform this functionality. Some examples of full rich Internet applications include Microsoft Windows Live Hotmail, Adobe Buzzword (this one is that good that I typed this article in it!), and Yahoo! Mail. There are a lot more, and these are just the famous ones that I use all the time that you might of heard of.

The time where pages looked pretty and did nothing else is over! Users want to be entertained and be engaged in the content that they receive. Would you come back to a site after you saw the content and you knew that you couldn’t get anything else out of it? Of course not! But say you were overseas and were taking pictures like crazy – and you wanted to send pictures home to show your family members. To your shock and horror, some of the pictures though didn’t look that well. Now if you had a site that allowed you to upload your images online anywhere in the world and edit colour, sharpness, hue, add styles and crop your images; it would solve your dilemma, No?

And after your trip you would most probably still use the site as you found it so helpful! Now you’re most probably saying,”Okay, that is great but how does that relate to a company website?” Well think of a business process or processes that could be automated by the end user. I can think of several.

For example, if your company sold whitegoods and they all came with a 12 month warranty; instead of getting the customer to fill out a warranty card, you could send them online to your warranty centre – where they could lodge their warranty, place a service request, place a warranty request, monitor requests and find support documentation all in one Rich Internet Application. Now of course your company website still needs a section to explain the products and services that your company offers and a section to contact them, but I guess what I am trying to say is that websites now have more potential to be more then just a brochure about your company; It can be a digital extension of your company accessible to the world!

Out of the four technologies that I mentioned, three use plugins to run the RIA capabilities. Ajax is the only one that doesn’t need a plugin to run. This is because Ajax is based off existing technologies that exist in all modern Internet browsers; namely, Javascript and XHTML. It’s not re-inventing the wheel it is just a new way of development by using the Javascript client side script to talk to a server side script (PHP, ASP .Net, etc.), and then presenting it to the user by manipulating XHTML markup. The three technologies that need a plugin to run are Flex, Silverlight and OpenLaszlo. These plugins are installed by the end-user when they want to view the RIA or content that needs the plug-in. Some people would see this as a downfall, but I see it as a bonus because if you’re building applications for commercial distribution your code is not easily accessible. To develop with these technologies you use a XML-based markup language for presentation/design and an object-oriented programming language for coding. Another benefit is they don’t take long to pick up to learn as all you need to know is basic web-development skills!

These technologies that are available for RIA development are still in their ‘teens’ and still have a lot of growing up to do! Over the next couple of years we are going to see greater improvements in the technologies that build RIAs; including lighter frameworks, diverse interface components, easier development, easier deployment and cross-platform capability, which is already happening. Adobe released a runtime called AIR (Adobe Integrated Runtime) which is versatile and allows you to use Flex and Ajax to develop RIAs for the desktop; which is great as you can bring your website to a user’s desktop without massive alterations to your code!

Hopefully what this means is that it is going to cause web-developers to be more creative so they can get a user to use their application. You’re going to have to be first in, best dressed otherwise it will be extremely hard for you to turn a user over to your RIA. I quite like this idea actually as it means that we will hopefully start to see a lot more interesting and ground breaking RIAs! I guess we will just have to wait and see how it all pans out for Rich Internet Application development in the coming year.

You’ve told me you’re loving the SEO blogs and I love my search optimization as well – so here goes another post. Today we are going to be looking at how to get the Search engine optimization process correct – from scratch!

That’s right people! We’re going to go through just about everything you need to do, and in what order you have to do them for your site, blog or online application to have as much chance as it can get with the marketing push that comes as a result of getting search optimization right.

The post will at many stages branch off to what you should do if you are running a blog and what to do if you are dealing with a general website. Because WordPress is the most popular blogging platform online, we are going to assume you are running it! I am also going to go out on a limb and assume you as the faithful reader also have a working knowledge of HTML as you will need to do some handy-work at some stages.

Please not that in this blog post we will not be going into specifics such as keyword research and competitor analysis, etc. It is simply a guide to get the SEO process right from the start!

So now that the introduction and caveats are out of the way; without further ado – let’s kick some SEO but!

Step 1: Build your website or install a WordPress blog on your server.

Okay, this step isn’t rocket science – but for the sake of argument, we are going to assume you already have a website designed/developed and sitting there ready to be optimized. On the other hand, you could have just installed a WordPress blog on your server and it has come with the default theme with a pre-installed comment by ‘Mr WordPress’ to get you going

Step 2: Setup your robots.txt file

Wow, wow, slow down cowboy! What’s a robots.txt file?
Good question! Guys who don’t know this one, don’t worry – many people don’t really understand the underlying meaning of the robots.txt file.

In essence, the robots.txt is literally a text file which resides in your home directory; generally ‘/public_html/’ ‘/home/’ or ‘/www/’. It contains instructions or simple rules that robots, or search bots, such as Googlebot use when crawling your website or blog.

What does it do?
It tells search engines, through their spiders/bots (which crawl your website, and look for this ‘robots.txt’ file) what content to allow people searching content from your site to find.

Give me an example!
Geez! ask for much?

Okay, let’s take an example from my own robots.txt file.

[code="html"]
User-agent: *
Disallow: /cgi-bin
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content/plugins
Disallow: /wp-login.php

User-agent: Googlebot-Image
Disallow:

# Does anyone care that I love my sitemap?
Sitemap: http://www.cheb.com.au/sitemap.xml
[/code]

Okay, it’s not as gibberish as it looks, believe me! Let’s dissect it…
User-agent: is basically stating which search spider/bot we want to target. By me putting * it is basically saying I don’t care – I want all bots to follow the following rules. Basically, any rule(s) specified under the ‘User-agent: *’ will make all bots who crawl your website or blog cooperate! Cool hah!
If you look at the next section, my user agent is ‘Googlebot-image’. What I’m saying there is I don’t mind Googlebot-image crawling my server for relevant images to add to Google’s image search at http://images.google.com/imghp?hl=en.
Anything that you pre-mark with a “#” is a comment, and will just be ignored; so when it comes time for me to be smart with my robots.txt file, having “# Does anyone care that I love my sitemap” doesn’t affect anything.

Okay, this is pretty cool… Are you saying I get to tell Google, Yahoo! and other search engines what to crawl?
That’s exactly what I’m saying! It’s that simple! Create a ‘robots.txt’ file, fill in the relevant information, save and upload to your main folder (where you can see the file you call when you type in www.your-domain.com) and you’re off on your SEO dream start.

A few more examples?
To exclude all robots from the entire server and its contents

[code="html"]
User-agent: *
Disallow: /
[/code]
To allow all robots complete access to the server and its contents
[code="html"]
User-agent: *
Disallow:
[/code]
To allow only one bot (Google) complete access to the server and its contents

[code="html"]
User-agent: Google
Disallow:

User-agent: *
Disallow: /
[/code]
Because there is no ‘Allow’ rule, we have two separate rules: Google is disallowed from nothing; whilst everyone else (bot-wise) is disallowed everything in ‘/’ which is basically anything after your domain. i.e. www.cheb.com.au/anything here should NOT get crawled.
I say ‘should not’ as apposed to ‘will not’ because some bots choose not to agree and will just crawl your content anyway. Although, the prominent ones we care about like Yahoo! and Google usually listen!

There is a huge index/website which has everything you need to know about robots.txt alongside more examples and information at The Web Robots Pages

Step 3: Setup your sitemap

Wow, wow, slow down cowboy! What’s a sitemap?
A sitemap in very basic English is a listing of where to find ‘stuff’ on your server or website. Having a well structured sitemap will help a search engine spider and index your pages more efficiently and ultimately lead to the possible quicker addition to the search index of that particular search engine.

How do setup a sitemap if I am running WordPress?
Try installing the cool WordPress Google Sitemap Generator by Arne B. It takes the (albeit minor) pain out of site mapping.

How do setup a sitemap if I’ve designed/developed my own website?
That’s easy too! There are plenty of XML generators online which generate Google-friendly sitemaps. Check out the aptly-named XML Sitemaps. The script will run through a domain you input and look for any links it finds on that page. Consequently, it will then follow any link which is fiound on the pages off the main page – just like a search bot does, and then generate a sitemap for you! The free version only crawls up-to 500 links, and might take its time – so be warned!
You will want to download either the uncompressed or compressed XML version of the file – and if you like keep the HTML version for yourself. Google (and other engines) will need the XML format! Here is an example (of one section only) of what you should see if you load the XML file you download into a browser:
[code="xml"]

- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
-
http://www.cheb.com.au/

Step 4: Setup your Google Webmaster Central & Yahoo Site Explorer accounts

This step is important so you can track a lot of things about your SEO experience. Google Webmaster Central for example let’s you track your sitemap file and update it ‘on the fly’ as well giving you detailed information about your particular URL and who has searched for what to get to your site/blog.

Yahoo! is pretty much the same, being able to track domains to your account and allowing you to run diagnostic tools to nut out any problems.

Both GWC and YSE ask you to verify that the domain actually belongs to you by either asking you to upload particular file to your web server (therefore proving you can login to the hosting account) or adding a meta tag such as:

[code="html"]

[/code]

Once you register for the accounts you will be able to make sure your SEO campaign is on track by finding and diagnosing any issues your sitemap, robots.txt file; or anything else for that matter – may be inhibiting the search engine from being able to successfully crawl your content. Remember, if search bots cannot get to you – you cannot be listed in their index!

Register for Google Webmaster Central and Yahoo! Site Explorer today!

Step 4: Setup Feedburner account

If you are running a blog, or even a website with RSS – you need to have a Feedburner account. Feedburner is an online service which allows you to ‘burn’ your RSS feeds – practically allowing you to find out how many people have subscribed to your syndication as well as allowing you to monetize your blog or website’s traffic through various sources.

More than anything else, Feedburner is the foremost RSS feed management service online. Their feed management tools will make sure you can track any potential problems with your RSS feeds – which could potentially be a problem for your search engine optimization because generally speaking most of the time RSS/XML problems are caused by issues in your code! Remember, we want to make sure nothing comes in our way of a successful SEO campaign.

If you are running an XML or Atom-based RSS feed, make sure you snap up your Feedburner account today if you don’t already have one!

Step 5: Content, content and more content

Make sure that at this stage you have all your content ready to go where it should be. There already is a possiblity that search engines have grabbed you into their index for many reasons. If you are writing a blog, have a post or two already written and as much as possible try to stick to a posting pattern – at least once every week to two weeks.

There are a lot more content rules we can follow, including how to link and write content in a way that it is SEO-friendly. Check out our previous article on SEO-driven blog writing techniques.

Where are my headings?
It is also important, for SEO purposes that you should have at least one ‘heading one’ tag appear at the top-most part of the site/blog. Only have one <h1> tag per page, and make sure that it is well-written using main keywords you want to tackle as well as keyword phrases.

You might think about running an SEO-experiment like I have, but the safest thing to bet on is that every page should have only one H1 (<h1> tag) which is generally the actual title of the blog post or page.

Please note that search engines can and do penalize you for using more than one heading one tag. Do NOT keyword-stuff your headings. Remember, write for humans first, search bots second! Not only do you risk losing a visitor/reader – but you could end up in supplemental results!

Finally, you can use any number of H2s and subsequent levels of header tags in a page, but if we wanted to get somewhat picky, semantically, you shouldn’t jump between headings. For example, H2 should follow H1, as H4 should proceed H5 – but that’s just being picky

Step 6: Add yourself in…

Okay, at this point, if you cannot find yourself in search engines, or after a search for “site:www.you.com” in Google or Yahoo! – then add yourself in. Please note, if you are running WordPress, and most other blogging platforms – unless you have unchecked the option during install, you will ping Technorati every time you blog, so there is a high chance you could already be indexed! Check Technorati to be sure.

So there you go! Believe it or not, you have started your SEO campaign. Believe me, what you have already done has got you miles ahead of those who just ‘launch’ a standard website or blog.

You just need determination and drive to keep it going – and more importantly believe it will work because you will invest more time in making sure it does! Stick around for part II of this post which will go through in more detail what to do now that you have setup the foundation for search optimization.

We will be going through link-building and backlinking techniques as well as where to market your website or blog to make sure you get the extra step forward!

Be sure to subscribe to our RSS feed so you can get posts in your email inbox and also find out whenever we post new content. Share this article with a friend or digg it if you found it beneficial!
Till next time, Cheb.