Keith Devon

Menu

blog

Web Design Brief

Every good web site starts with a detailed brief. A good brief will help to ensure the following:

  1. Limits scope creep
  2. Improves costing accuracy
  3. Clearly defines tasks
  4. Specifies delivery dates
  5. Provides context for the developers
  6. Sets expectations
  7. Improves communication*

* Website Owners Manual (Boag)

I have developed a brief questionnaire for you to download. Please take the time to answer each question as fully as possible.

Download the questionnaire

New Communications Policy

In a move to increase working efficiency and effectiveness I am changing my communications policy and systems.

My new office number is 02081 330 596. Please save this as my primary contact number.

I am currently checking and responding to email and voicemail twice daily, at 12pm and 4pm. If you require urgent assistance (please ensure that it is urgent) that cannot wait until either 12:00 or 4:00, please contact me on my mobile at 07825 330 150.

Thank you for your understanding. These changes will help me to serve you better.

Internal Link Layout Issue

I recently came across an unusual problem when using internal links on a WordPress site. The link in question linked from one page on the site to a specific section on another page of the same site. When this link was followed there was an error with the page layout. More accurately, the new page layout was technically correct and the rest of the site was wrong.

I struggled for a while trying to find the source of this problem. I looked at the ‘error’ page in firebug and compared it to a normal page on the site. On all other pages there was a mysterious magin (or padding) created at the top of a div but when this page was visited from the link the margin/padding disappeared.

Long story short, the div in question was set to overflow:hidden. When I commented out that line, the problem resolved itself. Why? I don’t know. Can anyone shed any light on this?

Custom Post Type Archive Pages – WordPress

Need to show your custom post types on your category archive pages?

Add this to your functions.php file:

add_filter('pre_get_posts', 'query_post_type');
function query_post_type($query) {
  if(is_category() || is_tag()) {
    $post_type = get_query_var('post_type');
	if($post_type)
	    $post_type = $post_type;
	else
	    $post_type = array('post','cpt'); // replace cpt to your custom post type
    $query->set('post_type',$post_type);
	return $query;
    }
}

Now change the variable ‘cpt’ to the registered name of your custom post type, and voila!

A big thanks to parandroid over at http://wordpress.org/support/topic/custom-post-type-tagscategories-archive-page?replies=16 for this one.

WordPress Custom Post Templates

Once you have built a Wordpres custom post, you will often want to style it using it’s own template.

I searhed the web for a solution and courtesy of twothirdsdesign, if found the answer.

The template used for a custom post view is decided by the ‘get_single_template()’ function in the wp-includes/theme.php file.  And it basically tells locate_template() to look for single-’post_type’.php or single.php.

So the simplest way to customise the way a custom post is displayed is to add a template file to your theme with the name single-xxxxxx.php

Simples!

Cufon visited link color fix

I recently had an issue with the color of visited links when using Cufon. More specifically, I am using the WP-Cufon plugin with WordPress.

The issue I had was that the color I set for the link wasn’t being rendered by Cufon. In firebug it showed that the element color was red, but it was showing as the yellow color I had set as the universal link color.

After fiddling about with this for *ages*, I found the fix. I had checked the ‘Delay-Fix’ box in the plug-in; as soon as I un-checked this box the problem was resolved. I now get a small flicker before the Cufon is rendered, but it’s a small price to pay for being able to select the link color!

I hope that this saves someone some time!

Affordable Web Design

What does “affordable web design” mean?

Affordable:

something that can be afforded

low-cost: that you have the financial means for;

that can be afforded; believed to be within one’s financial means

So, affordable web design means a web design that is within one’s financial means. Right?

I think that what people normally mean by affordable is “cheap”. After all, how can anyone else know what is affordable to potential customers. What is affordable to one business or individual could be out of reach for another.

What we really need to be offering as web designers is “value”. But this is tricky too. Value is subjective and people put value on different things.

Value is always a function of cost. A product loses value as it’s price is increased (over-priced art work excepted). Set against that cost are all the things that you do as a web designer. Customers will assign value to things like speed, communication, design, friendliness, proximity and many more factors.

It’s up to us as designers to try and discover what these values are and then deliver on them as best we can.

I try to deliver on “quality”. This means that I’m rarely the cheapest option. I try to work with customers who put a high value on good design and coding rather than price alone.

For me this means happier clients and a happier work life!

Web Design East London

As a web designer living in East London I recently decided to take a look around at the local scene. A Google search for ‘web design east london’ returns lots of hits and as always the style and quality of the sites varies dramatically. Just for fun I’ve decided to rate the first five entries on google.

  1. www.iamhuman.co.uk
  2. www.minttwist.com
  3. www.fraserwebdesign.com
  4. www.visualeze.net
  5. www.touchtaboo.com

I will rate the sites based on 5 categories: usability, portfolio, information, design and ranking.

Usability

Usability refers to how easy it is to find important information and navigate around the site. Good usability includes having a clear and intuitive navigation system, having text that is easy to read, and prominently displaying important contact information.

Portfolio

This is highly subjective. I will look at the sites displayed on their portfolio and quickly judge the quality. Although the quality of a site can’t be truly gauged from a quick glance, on the web that is all the time you are allowed.

Information

On the web content is king. A site is nothing without information, it is after all what your users are after. I will be looking for information about pricing, best practices, company history and employees, etc. I also believe that it is important to try to educate clients on web design best practices, and will look for evidence of this.

Design

Again this is highly subjective. I’m not just looking for pretty graphics, a strong layout that displays the content in an easy to digest way is more important. Deign principle such as layout, colour theory, unity, balance, typography, etc. will all be examined.

Ranking

Lastly I will allocate points to each site based on their Google ranking. This deserves to be rewarded as it is not easy to obtain high positions in search engines. Especially for competitive terms.

iamhuman.co.uk

This site is a real mixed bag. I’m not sure that the company still operates as the latest news story is from 2007.

The first impression isn’t great. The layout of the page is uncomfortable. It is aligned to the left of the screen and the background image doesn’t fill the viewport. The page content just falls off the bottom into white space. The strange Flash backgrounds I found distracting and a little amateurish.

The colour scheme doesn’t work well for me either, the green and red just don’t cooperate.

From a usability standpoint, the text is a little small but the main nav is clear and intuitive. Text is generally easy to read despite the size). Unfortunately, a couple of pages have broken navigation sections where there are clearly some coding issues.

There is plenty of information on the site. There are lots of examples of their work. Unfortunately, I felt that most of the web designs were a bit out dated and some sites don’t work at all. I only checked the web design section, as anyone searching ‘web design east london’ would be looking at this category.

Usability – 6/10

Portfolio – 5/10

Information – 7/10

Design – 3/10

Search Ranking – 10/10

Total – 31/50

www.minttwist.com

Although not actually based in east london, minttwist have done some clever SEO to get right up to the top for this search term. First impressions are good. The site is packed with information but it doesn’t feel too cluttered. the home page features core services, ‘why choose us?’ and ‘Our Goals’. The main navigation is detailed and well organised.

Usability on this site is great. It’s easy to get around, easy to read and there are few distracting graphics.

When I clicked on Web Portfolio I was taken to the Portfolio page. From here I clicked again on Web Portfolio and was then taken to an error page. When browsing the portfolio I was sometimes directed to the wrong website, or to an error page. Aside from that, these guys have some impressive clients on there. For my tastes the designs are a little generic.

minttwist has loads of information on the site. It is all easily accessed from the main nav bar and contains links to some useful external resources.

I touched on the site design earlier. It’s nice and clean and well organised and structured. However, I found it to be lacking any personality or creativity. It’s a bit too standard looking, with very little to set it apart.

Usability – 8/10

Portfolio – 6/10

Info – 8/10

Design – 7/10

Ranking – 9/10

Total – 38/50

www.fraserwebdesign.com

I’m not sure what to do about this one. The designer has re-branded and you are now asked to go through to the new site. How many people will do this? I’m not sure. Ok, I’ll be nice and review his new site, frishmedia.co.uk.

Usability is good. The site is simple and very easy to navigate. Despite being light on dark, I found the text easy to read.

The portfolio is ok. He has lots of designs to exhibit and I’m sure some will enjoy the scrolling mac style viewer. Again, I found the sites on there to be a little generic with lots of stock style imagery. This is potentially down to low budgets.

This site isn’t packed with info but all the necessary information is included. He has included his terms and conditions which I liked. It shows a degree of openness and transparency.

I like the design of the site. the colour scheme is really eye catching, the layout is simple and consistent and graphical elements are subtle and stylish.

Usability – 8/10

Portfolio – 6/10

Information – 6/10

Design – 7/10

Ranking – 8/10

Total – 35/50

www.visualeze.net

This site is a mystery to me. Firstly the name ‘visualeze’ suggests that things will be easy. They won’t.

The usability on this site is seriously lacking. What I thought was a difficult to read main nav, turned out to be tag lines and not navigation at all. There seems to be some effort to be highly accessible, which is commendable, but I was confused with the numbers and letters beside the nav items on the left.

The sections are very confusingly named. For example I eventually found the portfolio under ‘Creativity’. Once there, there were only four examples of websites and they were predictably poorly designed, with no information on the projects.

There is a fair amount of information on the site, from ‘Hosting’ to ‘Pay per Click Advertising’. Again though, these are listed under strange headings like ‘Productivity’ and ‘Communication’, instead of something like ‘Our Services’.

The site is really let down by the design. It looks like it could have been designed using MS Word. There is a loose colour scheme based around black and orange but then there are weird additional colours like the maroon and light blue. Layout is good and the style is generally consistent and there are no distracting visuals; so overall readability is good.

Usability – 4/10

Portfolio – 3/10

Information – 6/10

Design – 3/10

Ranking – 6/10

Total – 22/50

www.touchtaboo.com

We’re ending on a high here. Touch Taboo is a really good example of an agency site.

The site is easy to navigate with a simple and well positioned main nav. The white background and dark text makes sure the content is legible.

The portfolio is the best of the bunch. The image viewer looks great and the work that it displays is of a high quality. My only issues here are with the lack of any project information, and that the image browser arrows are hidden until rollover.

There isn’t much information on the site. Not necessarily a bad thing as it is straight to the point and people’s attention spans on the web are notoriously short. A bit more detail on the portfolio pieces would have been useful. The blog does contain some good articles for potential clients and social integration is obviously something the designer has embraced.

The design is very current. It is nicely structured, the colour scheme is strong, the images are bold and colourful and the typography is well executed. My only real criticism is that it is a little too ‘safe’ and unoriginal. Again, not necessarily a bad thing, many clients will be attracted by the corporate feel.

Usability – 8/10

Portfolio – 8/10

Information – 7/10

Design – 7/10

Ranking – 6/10

Total – 36/50

Conclusion

  1. www.minttwist.com – 38/50
  2. www.touchtaboo.com – 36/50
  3. www.fraserwebdesign.com – 35/50
  4. www.iamhuman.co.uk – 31/50
  5. www.visualeze.net – 22/50

It was a close run thing at the top. The top three sites were all good. Iamhuman was saved by it’s high ranking but I think that it and visualeze could really improve with not much effort.

I guess all this sounds a bit arrogant. What qualifies me to sit here judging my peers? Nothing really! However, I did find this to be a really useful exercise in critical analysis of websites. I’ll have to take another look at my own site and see where I can improve based on these criteria.

Fancy taking me down a peg or two?

I would really like to hear your feedback on this. Do you agree with me? Are you one of the site owners? What do you make of my site? Please use the comment form below.

All sites viewed in Firefox on Mac OSX.

These are the personal opinions of Keith Devon and are only a superficial and subjective view on the sites examined.

Daily rate increase

I have decided that it is time to raise my daily rate from £110 to £140 (£17.50/hr). This is the first increase since I started Keith Devon Web Development. This rate applies only to private freelancing jobs. Sub-contract work will be negotiated on a case-by-case basis.

The increase in rates reflects my improved and expanded skill set. In the year since I started freelancing, I have gained valuable experience in all areas of web design and development. From project management and design theory, to learning new languages and techniques, these new skills allow me to offer an improved product in shorter development times. I intend to push these savings on to my clients.

Any proposals that I have already submitted will be honoured at the old rate, providing the project deposit is paid before 1st Dec 2010.

Keith