Smiley Cat: Christian Watson's Web Design Blog

Are Server Side Includes Still a Relevant Technique for Managing Large Web Sites?

Sun, 30 Nov 2008 20:37:19 -0600

Most of the sites I've managed have used content management systems that spit out static pages.

As such, I'm become a proponent of using server side includes (SSI) as a way to manage global site components, due to their simplicity and ease-of-use.

Nothing frustrates me more than when I'm told that a simple, global change to a static web site — such as changing the copyright year — is a major update because of all the pages that will need to be touched.

"Why don't you have these types of global elements, such as footers, set up as includes?" I often wonder to myself.

More recently however, I've been told that they are not an appropriate technique for managing high-traffic static sites due to the additional load they place on the server.

I've also been told that they are simply a little out-of-date and that web teams have moved on to other methods for managing the types of issues that arise with the use of static web pages (for example, client-side JavaScript).

I'm not an overly technical person and so if a developer tells me that SSI are not the right way to go, I don't have a lot of ammunition with which to say otherwise.

So, my question is: are SSI an appropriate way to manage global parts of highly-trafficked static pages or have they gone the way of the splash page? Thanks for any wisdom anyone can impart.

Borders Magic Shelf: A Clever Take on the Home Page Promo Area

Mon, 24 Nov 2008 20:44:52 -0600

When I was researching sites for my carousel showcase I reviewed Borders.com and was immediately struck by the creative approach they have taken to their main home page promotional area.

Most sites would provide a fairly standard scrolling carousel of the titles they want to promote, with no guarantee that they will be of interest to the visitor (example).

However, Borders has made better use of this space by reproducing the experience of browsing the shelves in a book store in order to present a wider variety of titles in a familiar context.

Borders magic shelf

This provides the visitor with a much more engaging way to interact with this promotional content, while keeping the use of home page real estate to a manageable size.

Click on a title and an informative 'preview window' pops up with a summary of the product.

Preview window for a book

Although the design of the preview window could be improved (it's rather plain), I appreciate being able to navigate through the current row of products from within the pop-up without having to open and close it to read about different titles.

That being said, it might be better if the preview window opened on mouse over rather than on-click, and you should be able to click outside of the pop-up to close it.

If I could level another criticism, I'd say that the presentation of the list of categories on the left could do with some refinement. For example, why not try to better integrate it into the book store/bookshelf metaphor?

Perhaps the choices could be presented more like a column of catalog cards that slide out when you mouse over them.

Something along the lines of the interactivity of the 'Solutions' section (bottom left) of Apple's support page might work.

Google's Starter Guide to SEO

Thu, 20 Nov 2008 15:26:08 -0600

Google have published their own SEO starter guide (PDF 550KB) which covers the basics of search engine optimization as it relates to the Google search engine.

If you're reasonable familiar with SEO there's not really anything new here.

However, if you're trying to educate a client or an internal stakeholder on this topic it's helpful to reference a document that is sanctioned by the world's largest search engine.

Error Message Design Showcase

Tue, 18 Nov 2008 06:07:35 -0600

An important part of designing any kind of registration or login form is how you handle when things go wrong — a required field is missed or data is entered incorrectly.

How do you inform the user that they have made a mistake and help them in fixing it?

I thought it would be useful to collect some good examples of error message design to show how other web designers have tackled this issue.

Although often different in the specifics of their approach, these samples provide a sense of the main principles of good error message design:

Show where the error(s) occurred in the form.
Clearly explain what the error is (and how to fix it).
Use color and possibly icons to make the error information stand out.

Not all of these examples are perfect. Some I've included more for the way they take a slightly different approach to a common problem.

However, in doing my research I was surprised by how poorly error messages are implemented on many sites. In many cases it seemed to have been added as an afterthought or without the involvement of a web designer.

View the error message design showcase.

Two New Web Site Launches

Wed, 12 Nov 2008 21:04:09 -0600

The NCsoft web team has been busily working away, and recently launched redesigns for a couple of our game web sites.

The first is for our City of Heroes superhero game (shameless plug: 14-day free trial available).

This project involved combining the content from two previously separate sites — City of Heroes and City of Villains — into a single site and applying a more contemporary and exciting design.

We also made much better use of game art assets throughout the site.

As well as a visual refresh, it entailed a major overhaul of the IA which had grown organically over the years without much thought for the overall user experience.

In order to develop the new IA I used Websort to conduct initial card sorting studies to help me with the organization and categorization of the site.

We also used Flowplayer to create a pretty nice video player for all of our game videos and trailers.

When you manage multiple web sites, it's a really good idea to standardize as much as you can when it comes to common web site elements. For example, we use Flowplayer as our video platform and JQuery as our JavaScript library.

Lineage

The second redesign was for our Lineage game web site, which had been neglected for far too long.

The new site, although straightforward in structure (most game web sites have fairly standard major elements), represents the aesthetic of the game much better.

We were under a pretty tight timeline as the launch of the site needed to coincide with a major game content update.

The new site also provides the game team with a scalable foundation to grow the content according to the players' needs.

3D Flash Image Gallery Component Giveaway

Mon, 27 Oct 2008 08:14:36 -0600

Update: The winners are commenters 6 (Dustin Boston), 9 (HeatherB), and 21 (Sejr). Congratulations, your component is on its way from Flashloaded.

The kind folks at Flashloaded have provided me with 3 copies of their new 3D spiral image gallery Flash component, which normally costs $49.95.

What is 3D Spiral?

3D Spiral is a Flash gallery component that displays images on an interactive 3D rotating spiral.

You can obtain different layouts by changing the height and width of the spiral. The viewer can scroll, move up/down and zoom the spiral freely.

The component includes over 70 parameter settings, customizable opening and closing animation styles, and a built-in preloader for seamless transitions between thumbs and large images. It is available for ActionScript 3.0.

Check out the examples on the 3D spiral page to see how slick it is.

How Do I Win My Free Copy?

Post a comment in this post to be included in the draw.
One entry per person. Duplicate comments will be deleted.
Winners will be contacted by email (make sure your email address is correct).

Entries will be accepted until November 3, 2008. 3 winners will be randomly selected from the comments and will receive a free copy of the Flashloaded 3D spiral component.

Indicating Required Form Fields: A Recap

Tue, 21 Oct 2008 20:05:37 -0600

A little while ago a posted I question about where the asterisk should go on required form fields.

I got a great selection of responses — here's a recap:

48% of commenters prefer to put the asterisk to the right of the input field.
44% would place the asterisk to the right of the form label (between the label and the form field)
Only 8% of commenters are like myself and place the asterisk to the left of the label.

These results were quite surprising to me and have put me in something of a quandary. My preferred method of indicating required fields is the least preferred of the three options.

The option that feels most natural to me — given that we read from left to right — is clearly wrong.

Of the two remaining options, I will choose putting the asterisk to the right of the label. The results were similar and Luke Wroblewski, who has authored a book on the subject — Web Form Design: Filling in the Blanks — recommends this option.

It's going to take some getting used to though.

Surprisingly, only one person offered the traditional web designer's response, "It depends." What, no one likes sitting on the fence anymore?

This, of course, has generated a new question that I'd like some feedback on: should labels on the same row as the input field be left or right aligned? Does it matter?

9 Free Tools to Analyze and Improve Your Website

Sun, 12 Oct 2008 19:48:41 -0600

Guest article by Eva Vesper of Web Hosting Search.

If you're running a web site you need to know how it is doing, in particular how you're performing against your competitors, and where you can improve.

These useful tools will help you to monitor and (hopefully) improve the performance of your site according to generally recognized web site marketing criteria.

SEOmoz Trifecta Page Strength Tool

If you would like to measure the strength of a certain page on a site, blog, or an entire domain, then check out the SEOmoz Trifecta Page Strength Tool (free registration required).

Based on various factors you will see your impact within your industry and can compare it to others. Note that free accounts are limited to one report per day.

Popuri

If you think it's a lot of hassle to use several different tools Popuri might be what you're looking for.

Popuri allows you to get a variety of information — from PageRank to del.icio.us bookmarks — all at once. It also includes Compete rank which provides a useful counterpoint to Alexa in order to get a better picture of how your site ranks in popularity.

Raven SEO Analyzer

The free Raven SEO Analyzer aims to help you build a better, more optimized website to rank you higher on search engines.

It checks things like whether your site uses heading tags properly, has deprecated HTML, contains inline styles, and has an acceptable page weight.

It also scores you out of 100 which is helpful if you're monitoring the performance of your site over time or comparing against competitors.

Mint

Mint is a web analytics tool somewhat similar to Google Analytics. It provides all the usual statistics on everything from number of visits to unique referrers.

Unlike Google Analytics and other web analytics packages, it also tracks RSS feeds, browser window size, and has a library of official and community-developed plugins.

Website Grader

If you're looking to analyze the marketing effectiveness of your web site, try Website Grader.

It provides you with a score out of 100 based on criteria such as web site traffic, SEO, social popularity and various other technical factors. It also provides you with advice on how you can improve your ranking.

One useful feature is the ability to compare your site against multiple other websites. This could be really helpful in better understanding how your site stacks up against its competitors.

Crazy Egg

Crazy Egg is a tool that supplements your standard analytics package. It comes in 3 versions — standard (free), plus and pro — depending on how many visits and pages you want to track at once.

Crazy Egg lets you track what visitors are doing on particular page and shows you what links they clicked via heatmaps and various overlays. It's a great way to test the effectiveness of different versions of a page to see which one is the most effective.

SiteYogi

SiteYogi sets out to be a one-stop-shop for web site analysis.

It examines a variety of areas, including how well optimized your site is for search engines as well as the number of backlinks you have, various social media rankings, whether your code is valid, and how well ranked your site is. It provides quite a comprehensive overview.

Smart PageRank

Smart PageRank provides you with a lot more data about your site than the name suggests.

Like some of the other tools mentioned, it provides you with a variety of data about your site and its ranking on various search engines. Unlike other tools, it estimates a dollar value for your site based on these factors.

SEOCentro

Looking for a variety of SEO-related tools all in one place? Then SEOCentro is worth a look.

It includes tools that will check meta tags, pagerank, links popularity, keyword position, and search engine saturation. It also provides a server headers checking tool, which is useful to make sure that any 301 redirects are set up correctly.

Useful Collection of Web Site Checklists

Sun, 28 Sep 2008 14:22:38 -0600

Came across this handy collection of checklists on all things related to developing a successful web site.

The checklists include general best practices such as site design, architecture, and content, as well as more specific areas such as About Us, Contact Us, and Login/My Account pages.

This is a really useful reference which would also make a great starting point for developing your own internal web team checklists.

Are These Really Web Sites of the World's Best Brands?

Sat, 27 Sep 2008 21:49:56 -0600

Interbrand recently published their 2008 list of the best global brands.

I thought it would be educational to take a look at the websites for these brands and see how they compared. After all, the top brands in the world should likely have web sites that display a similar level of quality, right?

As expected, most of them were pretty good. Some were even great. However, there were a few surprises too, which I thought I would share here. Enjoy.

Note: when a site's top level domain took me to a country picker, I chose USA.

#1 Coca-Cola

Not a great start, especially from the world's top brand. There's nothing really to do on this page, and it doesn't feel particularly inviting or aspirational. The visual design is pedestrian and the flash carousel is sloppily implemented. I certainly don't feel encouraged to explore any further.

#8 McDonalds

Sorry, but you have got to be kidding. When I first arrived at this site I thought I had accidentally ended up at the wrong web site. This is McDonald's? Yes, nothing says "I'm loving it" like like loads of black. And those lame Flash animations. I especially like how if you mouse over the navigation and move away, half the time it disappears! Viewing this web site I feel like I'm going through the Wayback machine.

#14 Gillette

My patience in waiting for the site to load was rewarded with … a giant carousel with even more panels than their latest shaver has blades. Many more. It's all very 'hi-tech' and all but if you move your mouse too far to the left or right you risk motion sickness from watching the carousel spin.

#16 Yves saint Laurent

This is not a home page, it's a poster. Wasted opportunity.

#18 Marlboro

From a branding perspective, can you even tell that you're on the Marlboro site? I get it as a cigarette brand they are limited in what they can do, but how about a little design. This page is just plain ugly. Take a look at Camel and Kool for examples of how a little branding can be applied.

#39 Kelloggs

Simply put, this site looks years out of date. It doesn't help that the design looks like it came from a (bad) web site template store.

#47 Accenture

This really is the home page for the world's largest consulting firm? Where exactly is the design? Oh, and try mousing over the main navbar for some really out-of-context fly out navigation.

#61 Wrigley

This site looks like it was designed about 10 years ago by someone's nephew who was into computers and did some of that 'web design' on the side. I love the large "Cautionary Note to Dog Owners" link in the center of the page too. Nice touch.

#88 Duracell

Wow. When was this page designed? Viewing it is like going back in time — it's just so bad. From the amateurish Flash intro before you choose your country to the incorrectly sized icon at the bottom of the page, it's a master class in how not to design a web site.

#93 Ferrari

After really annoying me by pointlessly maximizing my browser window, I'm now presented with this? This is the new user experience Ferrari want me to have on their web site? Not impressed.

12 Essential Web Site Building Blocks

Tue, 16 Sep 2008 21:59:26 -0600

Whenever I take over responsibility for a new web site, there are a number of core things that I like to ensure have been set up.

I call these the 'building blocks' of a web site — the fundamental elements that should be in place on almost any site. They include:

1. Web Analytics

The first thing I do is to make sure a good web analytics solution is in place.

It's essential to have a baseline against which to measure any improvements I make. For most sites, Google Analytics is more than sufficient.

2. Cross-browser Compatibility

Corporate web teams can be some of the worst for checking that their sites display and function properly in non-IE browsers.

Using web analytics it's easy to see which are the top 3-5 browser/OS combinations that you should test your site in. Common quote:

"Opera?! I don't test our pages in it. Not enough visitors use Opera. They do? That much, huh?"

3. Good Title Tags

I'm amazed by how many large-scale and otherwise well-designed web sites have paid no attention to their title tags, even (especially) for the home page.

Maybe I just like to see my sites rank well on ~~search engines~~ Google, but who wouldn't want more traffic? When you run a commercial web site this is the equivalent of leaving free money on the table.

4. Custom 404 Page

It's just the right thing to do for your users. I also make sure that my 404 page is being tracked by my web analytics tool so that I can identify on- or off-site broken links.

If any off-site broken links are sending too much traffic to my 404 page I will also set up 301 redirects to point this traffic to the right place.

5. No Broken Links

It's not fun or glamorous, but the easiest and best way to improve your site's user experience is to fix all your broken links.

If you run a large site, it's also a great way to find all the really old content that the team forgot about and should be retired.

6. Canonical Redirects

In order to create a single, persistent URL for your site (the canonical domain) you should redirect mysite.com to www.mysite.com (or vice-versa) using a 301 redirect.

The primary benefit is that you help search engines out by only providing one version of your site. It doesn't matter if you use 'www' or not, you just need to be consistent.

This will also clean up your web analytics reporting.

7. Sitemap

Almost all sites will benefit from a sitemap. There's really no downside to creating one, as long as you remember to update it.

8. Clear Links

I like to make sure that links are easily identifiable and have a separate and distinct visited state. It's an easy CSS change and can be a big help to your site's visitors.

9. Good Typography

I'm big on making sure that the content on my sites is easy to read. That means using a reasonable font-size and a color that provides sufficient contrast. Again, an easy CSS fix to make.

10. Site Search

Is there one, and if so, is it working properly? Like a sitemap, a good site search is just something that a web site of any reasonable size should have.

The downside is that it takes a lot more work to get it working properly.

However, if it's integrated into your web analytics reporting it's a great way to see what your visitors are looking for, which pages are being returned, and (even better) what they are looking for and not finding.

11. Valid CSS

This is more of a secondary building block, but it's a lot easier to validate (and fix) a site's CSS than its HTML. These types of site-wide fixes make ongoing maintenance and troubleshooting that much easier.

12. Google Webmaster Tools

Most of my search engine traffic comes from Google so I like to add a Google webmaster tools meta tag to be sure the site is being indexed completely and regularly.

It's a secondary building block, but so easy to add, why wouldn't you do it?

This has helped me in the past when server configuration issues and over-reliance on JavaScript for navigation has prevented sites from being indexed properly.

Well, these are my main web site building blocks. How about yours?

What You Need to Know About Improving the User Experience

Wed, 03 Sep 2008 20:11:30 -0600

The Institute for Dynamic Educational Advancement (IDEA) has produced a useful report on the factors that improve online experiences.

The study looked at how people find information online and how the experience of web site visitors can be improved. It also sought to understand the differences between the actual and perceived needs of end users.

Understanding this difference is important because web designers are typically overly optimistic about users' ability to use a web site and find the information they need.

Here are the key takeaways from the report:

Designers underestimate user expectations for an effective site.
Easy access to complete information is key to visitor enjoyment.
Good visual design and up-to-date information are critical.
Visitors want information fast.
Visitors want a broad range of topics.
Designers are overly optimistic about visitors' ability to maintain orientation.
Visitors still need handholding.
Visitors point to the lack of breadth and depth of site content as causing an "Information Gap."

From my experiences of watching people use web sites they are incredibly hard to use, even ones which are well laid out, have good content and a straightforward IA. I find myself continually surprised and bemused by the difficulty with which users find information, navigate, use search, and so on.

A good example of the gap between designers' expectations of users and their actual abilities is the debate about the need for the 'Home' button in site navigation. Really, should this even be in question?

I prefer to include it. After all, why take the chance? No one could ever complain that including a home link in your navigation was a bad design decision.

[via Demystifying Usability]

Write a Web Design Article and Win $1000

Mon, 01 Sep 2008 20:14:44 -0600

The following is a paid article. Please note: my time is being paid for but my opinions are my own.

Web site [Re]Encoded is running a competition for the best web design or web development article, with a grand prize of $1000.

They are also offering second and third place prizes along with a prize for the article of the week until the competition ends on October 26.

As an added incentive to promote their contest, if you write about the competition on your own web site and let them know, they will place a banner of your choice on an article being entered into the competition.

I hadn’t come across [Re]Encoded before writing this post, and it appears to be a relatively new site (the domain has only been live for 8 months).

The web design blogging space is getting pretty crowded these days, so running a competition like this — with a decent first prize — is a great way to get some visibility and kick-start your readership. If you can foot the bill, that is.

Anyway, the competition started on August 26 and runs for two months, so there’s plenty of time to come up with a great post.

And if you’re struggling for ideas about what to write, check out one of the many sites that collect together articles on different subjects. Ezine Articles’ web design category is a good place to start.

Required Form Fields: Where Should the Asterisk Go?

Tue, 26 Aug 2008 20:54:29 -0600

Here's a simple question, and one which I feel should have a definitive answer.

Assuming that an asterisk is the correct way to indicate a required field in a form, where should it go?

Should it be:

1. To the left of the label?

2. To the right of the label?

3. To the right of the required field?

Shouldn't there be one right answer to this question?

While I'm on the subject, should the asterisk be separated by a space from the label/field or should it immediately precede or follow it with no additional separation?

Web Site Navigation Design Showcase

Sun, 24 Aug 2008 20:21:22 -0600

Just a quick note to say that I've gathered together a navigation design showcase with 70+ examples.

I've specifically avoided including (too many) examples where the navigation is overly creative as I figured these wouldn't be as useful to a wider audience.

Still, I think there's plenty of variety across the designs, although horizontal navigation features far more prominently over vertical. That's not intentional — it just worked out like that.

Anyway, I'm sure I've missed out tons of great examples. So, send them my way and I'll be sure to add them in the future.

View the navigation design showcase.