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.

It’s not exactly today’s news, but I felt compelled to at least discuss this. Internet giant, PayPal, son of another Internet giant, eBay, recently decided to re-do their logo and homepage – and boy, were they wrong!

So what do you do when you are a billion-dollar corporation with more money lying around than you know what to do with? Re-brand, of course.

To kick things off, let’s see how the lovely folks at PayPal decided to (in my opinion, of course) ‘kill’ their logo.

Okay; So I have to admit – the original logo wasn’t highly intricate nor advanced for that matter – but it was certainly one thing; Iconic and memorable – both important characteristics of a logotype! The minus-offset-tracking and kerning as well as bold, yet gentle stroke around the letters coupled with sharp-accentuated cornering really made the whole package come together.

So what do we have now? Well, let’s break it down visually:

How to make the new Paypal logo in 3 easy steps!

1. Type ‘PayPal’ in black-coloured Verdana, bold-italic, size 54.1px font and smooth anti-aliasing.

2. Turn faux-bold setting on, set the base-line shift and change tracking settings as below.

3. Colour in ‘Pay’ and ‘Pal’ in the hex codes specified below (or if you really want to get technical [and web-safe]; #003366 and #336699, respectively).

And there ya have it.. We’re done..

There have been some changes made recently to the front page of PayPal that apparently show a more-rounded lettering style logo. That shouldn’t be a problem. Add a stroke to the logo (of the same colour for ‘pay’ and ‘pal’ and make sure round cap/join is on (pen tool), add a “trademark” symbol and we’re done once more.

This should now be your masterpiece; The new PayPal logo.

Sure, looks ‘Web 2.0′, but not everything needs a face-lift and Paypal could have certainly given the previous, white-encrusted logo a little face-lift without changing it drastically.

I mean, here’s one case – What happens to a web designer who has (the very popular, mind you) background colour of #003366 or #336699 on their website? The visitors will either see “Pay” or “Pal”, depending on whether the webmaster has used any of those colours as their background.

So it’s not a huge deal, but with the stroke, it didn’t matter what background the logo was placed on – it would still work. Did designers think of that first?

Anyway, just something to think about I guess. I don’t really mind the logo; especially with its rounded-edges – I just don’t think it’s very much ‘innovation’ over something that wasn’t really as broken as they obviously thought over at eBay headquarters.

So what do you think? Subscribe to our RSS feed to read more articles like this, or help us get the word out by digging this post; below.

The keyword reach associated with building a website is limitless, but essentially – as ghastly as it might sound; building a website without planning, can – and most of the time will mean danger ahead and ultimately less success in the long run!

So without further ado, here is Cheb’s guide to building a successful website.

Planning/Scoping

The “Ahh, guys? What are we building again?” phase

So, you want to build a website? It’s not rocket science – but it is a science, and an art! Just like baking a cake you have several ingredients: A handful of designs, a dash of slicing, a teaspoon of code, a sprinkle of love, and ‘bob’s your uncle’ – or, ahh, not! What many people in the web industry however don’t realise is that the planning phase of a website is so crucial, that it really can dictate how well the build of the website is. Essentially, if done correctly, the planning phase – or more importantly, the scoping sub-set of the planning phase, should setup the site’s structure, navigation, as well as functional specifications for the web site build.

Scoping (also referred to as Information Architecture) should reveal not only the clients’ objectives for the project and what they would like the site to achieve – but more importantly, extrapolate all the detail, business rules, as well as technical adjustments which will be needed down the track in order to successfully design, build and launch the website.

Without mentioning any names, I’ve worked with around six web firms, in some way or another, in Australia alone – and the sad thing is, only 65% of them actually ‘recognised’ the importance of getting scoping/Information architecture right! Obviously Wiliam Web Design is in the 65 percent that got it right! Overall though, not really the statistics you’d like in the field of web design and development – right?

At the risk of helping the competition too much – to be counted up with the ‘best of the best’ you’d be expecting your Information Architects/Business Analysts/Usability Evangelists/whatever you want to call them – to be able to at least come up with the following pieces of documentation in this phase of the web build. As a side note, the documents listed below will be discussed in detail in an upcoming post so stay tuned!

1. Requirements gathering documentation
2. Requirements analysis documentation
3. Functional specification documentation
4. Prototype development

You read it here first ladies and gentlemen! From this day forward, let it be known that Cheb D coined the term “The GASP Method for scoping/information architecture” which will be used to outline the bare minimum in terms of documentation/deliverables; that the planning/scoping phase of a good website build whether in Sydney, Melbourne, New York, or London – should deliver. I will outline the massive importance that these documents play in the successful build of a website in an upcoming post – for now, let’s kick on to design.

Design

The “Wow! so all you needed was good documentation and you came up with THAT?!?” phase

Never thought this would be a part of this post, yeh? Okay, so nothing overly-crazy here. You can’t build a website without design. The situation is that everything that happens from this point forward will start to effect everything else throughout the project. Think of it as the literal view of ‘The Waterfall Model‘ for software development.

Further to that – everything that was done right in the previous phase will already have a dramatic affect on the project as a whole, because the difference between a good and bad design decision does not always start and end with the designer! Whether you are building a web design blog or an E-Commerce shop-front, I think that holds true.

Designers as a collective, love to think that they understand everything about usability simply because they know good design! Sure, they would be one of the few people involved in the web design process who could have a say in how and why things will work – but having a designer nutting out the usability of their website as well as designing it, without the assistance of:

a) an objective individual such as an Information architect, and
b) an objective individual such as an Information architect with previous experience in online user experience design (UXD)/User interface design (UID), or usability and accessibility analysis;

is comparable to getting a developer to bug-check his own code or bombing for peace!! Good luck with that!

The issue however is that we have come to realise that good design is not necessarily always good usability, and more importantly that good design practices is not the same as usability. Something as simple as having a login box pop-up as a div overlay upon click, as apposed to always being on the page and distracting the user from more important areas of the page, such as a call to action – can be a big talking point.

It’s a double-edged sword! Do you hide the login box to begin with under a ‘login button’, or do you go with the norm and leave it showing on the front page, but risk it being a total distraction due to its positioning? A question that a designer shouldn’t have to, and probably can’t figure out on their own without some interaction from an information architect.

There is absolutely no doubt though how important this phase is in a good website build! It’s paramount that design is not only up to standard, but that is ‘sets’ the standard! New techniques, interactions as well as connectives to modern technologies such as Ajax should all be encouraged and not frowned upon as ‘making more work for developers’.

Slicing

The “Do you seriously expect me to cut this PSD up for you in THAT many hours ONLY?!?!?” phase

Slicing is one of those things that in the past has taught me can greatly change how upper management think about the whole design process. Some managers think the hours dedicated to it are way too much, others think that’s just unscrupulous and without merit that it ‘generally’ is allocated the least amount of hours dedicated to it out of the whole web site design build process.

Which ever way we look at it, years of experience has taught me that not only are designers getting ‘crazier’ with rounded-corners, drop-shadows, beveled-edges and more; but Web 2.0 calls for all that snazzy stuff, and unfortunately, I don’t see that stopping, coupled with, we can’t stop technology – means we have to find a half-way house!

I personally think more time needs to be dedicated as a whole to the slicing process. Not only do slicers need to give the PSD (design) some life using CSS and JavaScript, on top of HTML – but cross-browser testing is a freaking arduous and taxing process – if nothing else! So respect to all you slicers, or Interface Hackers as I like to call them… I feel your pain!

Development

The “Okay, so I take the source files from here, and connect it to WHICH database?” phase

Development and slicing somewhat go hand in hand.. Whether the web site is being developed in C# (.Net), PHP, Ruby on Rails, or Perl for that matter – the task is simple and complex – or better yet, simply-complex!

This phase is important and hence why most of the time, you will find a good chunk of the hours allocated to a web-based build will be allocated to development. Unfortunately, that’s the nature of code! What you want to do, is make sure that there are adequate hours for the design and slicing – but ultimately, depending on the scope, budget and size of the project, actual development of the sever-side application as well as all the database connectivity as such should be the biggest chunk of the collective ‘development/build’ pie.

Obviously, if the project is just design and slice, then there’d be no time against development phase, or minimal (for testing, etc).

Testing/Quality Assurance

The “Yikes… You found HOW MANY bugs?” phase

It’s not easy to fight technology. Somehow, no matter how hard we try, Testing and quality assurance will (unfortunately?) always be a phase in the successful build of a website. To aid in keeping this short(er) than I expect it to be, I would just make the following suggestions in dealing with this phase.

1. Make sure the project plan/milestone outline clearly shows the testing phase as part of the project (from the get go!). This is important because the client has to realise that no matter what happens during the life cycle of the web build, how fast the build is, how many functions they take out, or whatever it may be – this phase is not going anywhere!

2. Treat it like you would any other phase. You wouldn’t get your delivery man to code your website, would you? Don’t get your secretary or janitor to ‘run through the site and tell you if they find anything out of place’. Believe me, it is sad but trust me – I heard that statement being said about two years ago and it’s been ringing in my ears ever since! Pay for a tester, they are worth the dollars you spend on them! and finally,

3. Make sure the quality assurance/testing is being done off a functional specification! For god’s sake people! Cardinal rule of unit/website testing. Go in there with a plan! Do NOT just pretend you are a user and ‘click around’. In my experience, around 60% of bugs found in this phase are always business rules that either the tester didn’t know about, or were simply forgotten. If they are on a document that has a signature on it, it WILL save your behind!

Deployment/Launch

The “So does that mean we can get paid now?” phase

Website design and development; once again, whether in Sydney, Australia or Sidney, Montana, USA – even though sadly many people don’t see it that way, is really an art. Wiliam has definitely set a precedent (and a name!) in the web design industry in Australia for not only delivering websites that work, but delivering websites that work great, and boy is that not a cliche!

It’s really about how you learn from your mistakes, co-ordinate change management in an ever-growing industry, and more importantly control technology that will ultimately dictate how you represent yourself as a web design agency/freelance web builder and best of all, how your competition view you in such a bloody competitive market.

So we’ve made it all this way. Launch the bugger! You’ve come all this way though and apparently you’ve survived. Don’t lose it all now! You want to make sure you take your time to get the launch right. Just like a top-secret launch sequence, make sure testing is complete, you have document listing where everything should go (server wise) – your databases are working fine and everything is connecting to where it should be – and then hit the switch!

Damn, wait.. Did you kill something? refresh, clear cache, refresh again, is it all still up? post to that forum that you created; is it threading correctly? Point is, make sure it doesn’t just stop when the last file is transferred. Building a great website involves a lot of co-operation from many people. It won’t happen overnight. Heck, sometimes it won’t happen over a six month period; but when you get it right? It’s a feeling like no other – or at least you’d hope so!

And that’s just about it… Happy web building people!

So, that was a long one. What are your thoughts? Do you agree on this model for effective website/web page design? let us know. Please drop a comment or if you like the posts, subscribe to our RSS feed to be alerted whenever a new post is available.

For those of us that are involved with design for the web on a daily basis, there seem to be many ways of creative navigation for websites that we come across. Over the last nine years or so on my journey designing for the world wide web, what I have noticed is that not only have conventions and ‘acceptable methodology’ changed on a regular basis – but also, the way some (big) site’s are architectured these days leave something to be imagined.

So without further ado; below are five reasons why I love tabbed navigation.

1. Tabs are an easy-to-setup form of navigation that don’t need to weigh down the load time of a website.

Whether it is CSS-based cross-browser accessible code or a simple unordered list, tabs are fairly easy to setup and re-use. The web design community is always coming up with solutions after solutions. A great example of accessible CSS-based tabs by Joshua Kaufman can be found here.

It’s also great to know that apart from the Web 1.0, standard text-based links, CSS-based tabs can now be done without any CSS hacks, with less code and the best part – without imagery; A formula for success.

2. Tabs are no supernatural phenomenon to not-so-techy web users.

Tabs are not just seen on the World Wide Web. They have been used for an incredibly long time. In fact, the reason why web user’s seem to get on like a house on fire with tabbed navigation is because they ‘know’ instinctively what they are supposed to do. Foldering systems, hanging-file folder tabs, as well the uber-cliched Inspector-Cluso style murder-mystery case files all have helped users to understand and appreciate the value of tabbed navigation on the Internet.

3. Tabs are very Web 2.0 and if coded correctly using XHTML lists, are fully W3C compliant forms of navigation

Gone are the days where 59Kb worth of images were needed to create tabs. These days, Web 2 techno’s like Ajax and even old-school style DHTML can spit out tabs that not only work well, but are 1000% W3C compliant. Sick!

4. Tabs are aesthetically pleasing to look at

Some would say, tabs for navigation also greatly aid in the representation of the overall look of a website. In all seriousness, I really dig how well-designed tabs can change the look of a site – completely. I really think there is something to tabs that not only make the user experience that little bit better, but also easier on the eyes than old-school list-based (yet accessible) non-tabs naviation. And last but not least:

5. Tabs are a collective norm these days in terms of navigational structures

Unless you have lived on the moon or under a rock for the past century, if done correctly, anyone is capable of understanding a website’s structure and information architecture from tabbed navigation. It’s the way to go in my opinion and best of all, you know that you are not re-creating the wheel if you use tabs – because there are not only hundreds of examples you can find online – but people still find it hard to believe that there are ways to create tab-based nav that don’t have to look 10 years old, or like Joe Blo’s tab system from across the information superhighway. Stay tuned because some of those ideas will be discussed in an upcoming blog!

So what do you think about this whole ‘tabulacious’ tabs for navigation? Do you currently use tabs on your site? Do you want to? Do you even like tabs? Share your opinions with the rest of the web world.

I’ve never been against the quest for knowledge – in fact, knowledge is power — and, somehow when you look at the results of the survey there are quite a few interesting tidbits that make you realise just why it has taken commissioned statisticians Alan Brickman and Larry Yu (yes, you read that right! No junior data analysts making $25/hour here) more than 180 days to “translate raw data into meaningful findings (A List Apart)”

From questions like ‘Where do you work?’ drawring interesting conclusions such as ‘hours worked by organisation type’, there is a heck of a LOT of data mining that can go on. For instance, if you look at some of the results, you will find some interesting links such as ‘the higher a salary, the more likely the respondent took part in formal training’ (page 73).



This however raises questions… Notably, did ‘sir’ get training on the job, because of his relatively high salary? or as discussed in the survey results, did sir earn more because of the formal training? Questions like this are important to look at in order to get an objective opinion – however, there are only 37 questions and with 32,000 people responding, you’d think the questions would be less next year as opposed to more – or? Guess we’ll have to wait and see.

If nothing else, anyone who knows me will know that I am a BIG Mac fanboy.. Just an FYI: The document, as well as the graphs were made on a Mac – specificially in ‘Numbers‘. Figures were transferred over from Microsoft Excel and then exported from Numbers. Cool ya?

Definitely a good read though.. Have a look at the A List Apart Web Design Survey results.

What do you think about the results of the survey? Do you think they really reflect the current nature of the Web industry? Share your thoughts!