Smiley Cat: Christian Watson's Web Design Blog

Come Visit! How the Websites of the Top 10 Most Popular Countries for Tourists Compare

Sat, 05 May 2012 10:16:04 -0600

Summer is approaching, and along with it thoughts of vacations and where to go this year. With this in mind, I thought I would take a look at the official tourism websites of the most popular countries for tourists, as ranked by the United Nations World Tourism Organization, and see how well they help those looking to make this important travel decision.

1. France

Despite being the most popular tourist destination in the world, actually finding France's tourism website is something of a struggle as it does not show up on page one of a Google search for 'france tourism.' The site itself looks dated and untidy, with a curious strip of ads running down the right hand side. Outdated banners such as 'celebrate New Year 2011 with us' and a copyright date of 2008 do not provide confidence that the information in the site will be current or well maintained.

2. USA

The USA tourism website on the other hand, looks very appealing when you arrive at it. The site is full of neat interactive touches and resizes based on the dimensions of the browser window.

I'm not sure why the main navigation is hidden away at the top of the page, however. There does not appear to be anything to be gained from not making the navigation and search more obviously accessible. Similarly, some very useful tools (such as the map) are hidden under some small tabs on the left hand side. I wonder how many people even think to use these.

3. China

In a surprise retro move, China's tourism website actually greets you with a splash page:

Once you've returned from your trip down memory lane (remember when splash pages were popular?), the official tourism website is little improvement. Apart from looking extremely dated and ugly, there is probably more information available on Wikipedia.

4. Spain

Although it uses engaging imagery throughout, Spain's tourist website features little in the way of interactivity. You can't even click on the main banner to learn more about the scene being portrayed.

The main navigation options are particularly cryptic — what is the difference between 'Come', 'Discover', 'Enjoy', and 'Experience'? I still don't know, even after I've browsed around the site for a while. The home page is swimming in white space, yet it does not include a map despite all the room for one.

5. Italy

The website of the Italian tourist office is well organized and attractively presented, with great use of images (including this gorgeous background image). Incredibly, it is one of the few websites on this list to display a map on the home page, although it still employs some strangely worded primary navigation — 'Focus'? — and you cannot click on any of the home page banners to learn more about that part of the country.

6. United Kingdom

The UK's tourism website has certainly the longest home page of all the sites on this list, at over 3200px long. The light, typographically-based design features bold use of color and some nice design flourishes and elements. The navigation is easy to understand, with straight-forward labels, and although there is no map on the home page, the 'Destinations & maps' section is well laid out making it easy to learn about the different parts of the country.

7. Turkey

When I first arrived at Turkey's official tourist site it was not immediately apparent that I was on the official government website. The vacation planner tool and the Flash banner made it feel more like a commercial travel website. The site design is rudimentary and the home page layout does a poor job of orienting the first time visitor. The various options are hidden behind content sliders, making it easier to head straight for the clearly written main navigation to find out where to go.

8. Germany

Thanks to the attractive background images, the tourism website for Germany is best viewed full screen. The site features a modern design and a considerable depth of content. A country map is prominently displayed on the home page; however, once I clicked through to the interactive map, I found it extremely confusing and unintuitive to use.

Although the navigation options are clearly laid out and labelled on the home page, once you are within the site it becomes difficult to navigate to other sections. You have to click on a small drop down menu enigmatically called 'Themes' in order to access the main site navigation.

9. Malaysia

An emphasis of imagery over usability and content means that Malaysia's official tourist site is challenging to use. For some reason, the main navigation is at the bottom of the page, and — not surprisingly — it's the first site on this list to place the logo way off to the bottom right of the page. The home page makes a strange use of side tabs to access main parts of the site, and also features a selection of almost unintelligible buttons on the left side of the page.

As you browse the site, the strange content layout and sparse content starts to make the site feel more difficult to use than is worth it. On the plus side, the imagery is nice, although a little staged. However, if you re-size the browser window, the background image stretches to fit the dimensions of the window, making for some oddly shaped people.

10. Mexico

When you arrive at Mexico's tourism site the colorful home page and logo certainly put you in the vacation mood. The site design as a whole is fairly basic, with little thought to white space and typography, but it is functional and easy to use.

The main navigation is clearly labelled, with the exception of 'Activities' and 'Experiences' — I have no idea of the difference between these two options. When you are browsing the site, the light grey text on a white background does not help readability and the typography is consistently poor. Grey links do not aid usability either.

Surprisingly, there is no map on the home page, in the navigation, or in the 'Destinations' section of the site. Even when you view a particular destination, there is still no map of where it is located in Mexico. The only map I could find is on the 'About Mexico' page, which just shows you where the different states are located.

Lastly, it was surprising how few of the websites used their country's own TLD (e.g. .us or .co.uk) in the domain name. I did not expect .com to be the most popular extension for government-run websites. The TLDs for the 10 sites broke down as follows:

.com = 5
.org = 1
.info = 1
.it = 1
.travel = 1
.gov.my = 1

Infographic Design Needs Your Feedback

Sat, 14 Apr 2012 08:38:12 -0600

We've been dabbling with infographic design at work as a way to generate backlinks. We recently published a new one about the rising issue of copper theft (hey, I work in the security industry). You can see it below:

As I'm still new to the whole business of creating infographics, I would be very interested in any feedback about this one. Do you like it overall? What elements work and which ones do not? Is it visual enough? That sort of thing. Thanks in advance for any feedback you can provide.

New Image Replacement Hack Replaces the -9999px Hack

Thu, 12 Apr 2012 20:54:14 -0600

I was pretty interested to read about a potential replacement for the venerable -9999px image replacement hack that we've been using for so many years, which Zeldman has christened the "Kellum Method."

Apparently it will improve performance by a tiny amount on certain older devices so it's certainly not a 'must upgrade' for me. On the other hand, the CSS is quite elegant, which makes me want to try it.

Social Media Coffeebreak: How to go Viral on Pinterest & Use Memes to Build Backlinks

Thu, 29 Mar 2012 20:41:27 -0600

I particularly enjoyed a couple of recent posts on the SEOMoz blog — the first about how to go viral on Pinterest and drive a bunch of traffic to your site, and the second on how to use internet memes to build backlinks and traffic.

I haven't tried either of the methods outlined in these posts, but they do offer solid, practical advice for using these vehicles to drive traffic and links. I will definitely post when my first 'instructographic' makes it to the popular page of Pinterest!

Free Google Analytics Dashboards and Custom Reports

Thu, 15 Mar 2012 20:05:53 -0600

As part of their announcement about improved custom report and dashboard sharing, Google have released several custom reports and dashboards for Google Analytics users to install.

If you're a blogger you'll want to check out the basic blog dashboard and the engaged traffic advanced segment.

If you manage an ecommerce site, then the daily ecommerce report and the mobile ecommerce dashboard will be useful additions. And any website owner will find the site performance dashboard useful.

I, personally, have not found myself to be too adept at creating really useful dashboards and custom reports in Google Analytics, and so I've found any templates like these that are created by experts to be most useful.

Web Tooltip Design Showcase

Thu, 01 Mar 2012 21:50:59 -0600

Tooltips are a useful way to present additional, context-sensitive information about an element on a web page, such as a hyperlink. As tooltips continue to become more common as a means for users to interact with web page elements, the need for good tooltip design has become more important.

This collection of 40+ tooltip designs showcases the different approaches that web designers are taking for tooltip design and highlights the range of options available for styling this popular UI element.

View the tooltip design gallery.

Anatomy of a Horrible Web Design Client [Infographic]

Wed, 15 Feb 2012 20:56:21 -0600

This is pretty good — we've all dealt with them. I particularly like the quote:

50% of web design clients only know what they don't want, and they don't know what that is until you design it for them.

Via: TopWebDesignSchools.org

Pandora vs. Raditaz: Which Online Radio Station Plays the Best Music?

Sun, 12 Feb 2012 18:01:32 -0600

I'm a long time Pandora listener, but I recently became aware of Raditaz, a competing roll-your-own online radio station, which offers 14,000,000 tracks compared with Pandora’s 900,000 along with a few other bells and whistles.

In an attempt to compare the two services and see which serves up music most closely aligned with my tastes, I created the same custom station on each site and noted the first 11 tracks that were played.

I wanted to create a station based on a single track, which is how I prefer to create stations on Pandora. However, Raditaz only allows you to create stations based on artists, so I created a U2 station on each service.

Here are the results (note: I did not skip, like or dislike any tracks):

	Pandora	Raditaz
1	U2 – Where The Streets Have No Name	U2 – Sunday Bloody Sunday
2	The Cure – Just Like Heaven	Tears For Fears – Everybody Wants To Rule The World
3	Coldplay – Viva la Vida	U2 – Stuck In A Moment You Can’t Get Out Of
4	The Police – Every Little Thing She Does Is Magic	Queen – Under Pressure
5	U2 – Pride (In The Name Of Love)	U2 – Pride (In The Name Of Love)
6	Pearl Jam – Black	U2 – How To Dismantle An Atomic Bomb
7	Peter Gabriel – In Your Eyes	The Beatles Revival Band – If I fell
8	The Cure – Love Song	Sixpence None The Richer – Kiss Me
9	Coldplay – Clocks (Live)	U2 – Vertigo
10	U2 – Running To Stand Still	The Cars – Drive
11	The Police – Wrapped Around Your Finger	Simon & Garfunkel – The Sound of Silence

In terms of the number of plays of the artist on which the station is based, Raditaz wins 5:3. However, they did include a couple of bizarre choices in The Beatles Revival Band (?) and Simon & Garfunkel. Where did those come from?

Interestingly, both services played U2's Pride as the fifth song — some kind of coincidence, I imagine. Overall, other than the fact that Raditaz played more U2 songs, I preferred the song selection from Pandora, as the other artists played were more similar to U2 in my opinion.

Agree or disagree? Let me know in the comments.

How to Set Up a Search Engine-Friendly Site Maintenance Page

Fri, 03 Feb 2012 06:55:36 -0600

I found this SEOmoz post on setting up a search engine-friendly website maintenance page to be very useful, especially as I have a significant website redesign launch coming up.

In the past I've left this aspect of website management in the hands of my network administrator, but who knows if they are aware of the pitfalls of sending the wrong signals to the search engines when your site is down for maintenance. At least now I'll be able to ask the right questions as we approach launch time.

This leads me to a broader question. As the infrastructure behind a website grows increasingly complex, how much technical knowledge is it reasonable to expect a website manager to possess? Is being able to edit an .htaccess file a still a prerequisite for the job?

As web team roles become more specialized, the role of the web manager remains the one where a wider range of skills — design and usability, web development, content strategy and development, SEO, SEM, information architecture, site performance, analytics, etc. — is needed in order to interact effectively with those specialists.

However, I am finding it harder to keep up with advances in all these various web disciplines (as can be seen be the number of unread entries in my RSS reader). How do others manage it?

Are Error Messages Getting Too Cute For Their Own Good

Thu, 19 Jan 2012 22:45:01 -0600

I enjoyed this post by Golden Krishna on the Cooper blog about how error messages are becoming increasingly less useful in helping you identify what has gone wrong.

Fortunately, some suggestions on writing good error messages are included towards the end, including this one from UXmatters.

How a Proactive Pop Up Increased Online Chats by Over 200%

Sat, 14 Jan 2012 18:57:13 -0600

A few months ago I updated the live chat tool for one of the websites I manage so that it would proactively pop up after a visitor had been on the site for a couple of minutes and had viewed several pages. The pop-up is pretty intrusive which concerned me from a user experience standpoint, but I thought I would try it out anyway.

Here's how the chat popup looks — you can't navigate the site without closing it:

We've now been running the proactive for four months, and the increase in the number of online chats it has generated is quite substantial:

Month	Increase in # of chats
September 2011	433%
October 2011	211%
November 2011	195%
December 2011	195%
Average	258%

A 200%+ increase in the number of chats was certainly more than I had expected. Not surprisingly, I was also concerned about the negative impact in might have on other visitors who might find it too intrusive and instead choose to leave the site.

Fortunately, we have not seen any spikes in exit rates that could be attributed to this, nor has our conversion rate gone down. In fact, over the last quarter the site has experienced its highest ever revenue, although this is likely to be due to other activities and campaigns we have underway.

Despite its intrusive nature, we'll be sticking with the proactive chat popup. If you are running an online chat service on your website — especially if it is an ecommerce site — and do not have it set to proactively pop up, you might want to test whether you can drive more chats this way.

How to Make Data Tables Viewable On Mobile Devices

Mon, 02 Jan 2012 18:26:12 -0600

I enjoyed this well explained tutorial on how to code multi-column data tables responsively (demo) so that they display in a usable format on small screen devices. The solution? Assign 'essential' and 'optional' classes to the the data columns and hide the optional columns at smaller screen widths using CSS3 media queries. Very nicely done.

[via CSS Tricks]

Order Confirmation Page Done Well

Fri, 23 Dec 2011 17:45:06 -0600

I thought this order confirmation page from Potbelly Sandwich Shop was nicely done (click to view larger).

Too often, confirmation pages such as these are overlooked from a design standpoint, so it really stands out when someone takes them time to add some branding / personality to the page.

Of course, there are many other ways you can improve the usefulness of your site's thank you page from a customer engagement perspective. When did you last look at the user experience when a customer interacts with your business online?

My Top Web Tools of 2011

Wed, 21 Dec 2011 21:25:59 -0600

I enjoyed reading ReadWriteWeb's top web products and top web developer tools of 2011, so I thought I'd put together my own list of top web tools of 2011, based on which ones I liked and used the most.

Here they are, in no particular order:

Basecamp

I use Basecamp every day as the project management tool for my web team. Many people I work with still use spreadsheets and emails to manage their work, and I just feel so organized compared to them. It has just the right amount of features for me, and has been easy for other team members to pick up and use. Given the amount of tasks we have to manage, including multiple websites and email campaigns, it would be impossible to keep everything on track without a solid, user friendly project management tool like this.

JotForm

If you're still coding forms by hand then you're crazy. With JotForm I can create any kind of form I need — including branching logic, validation, tooltips, custom thank you pages — in minutes. Embedding the forms into a web page is easy thanks to the range of options, and maintaining them is simple as I can do it all from within Jotform without ever having to touch the code on the page.

HootSuite

I manage a team that looks after multiple social media accounts and HootSuite has been invaluable in enabling us to keep up with posting to all of them and managing interactions with others. The user interface is very intuitive, with all the functionality I need, such as easily posting to multiple social media networks and scheduling posts in advance.

Google Analytics

Not a big surprise to see Google Analytics on this list. It's a fantastic tool and I use it multiple times a day. New functionality is continually being added, such as the integration with Webmaster Tools, real-time reporting, and multi-channel funnels, which is turning into a real one-stop analytics shop. Plus, there is so much being written on how to use Google Analytics that I'm continually improving my reporting and analysis through the tool.

Keyword Tracker

There are many online services for tracking keyword rankings and backlinks, but I've found that Digital Point's keyword position tracker works fine for my needs. The free service is easy to use, can track a ton of keywords, and provides charts to show your rankings over time in Google, Yahoo!, and Bing. They also track backlinks to your site.

Convert Hub

I often need to email design mockups to stakeholders (some people just love to live in their email), and so I use Convert Hub to do this. It's quick and easy to use, and supports a wide range of image formats (although my need is mainly PNG to JPG). More recently, I've started using QwikVu to share mockups, but it's too early to tell if it will become an essential tool for me.

LightShot

I'm always taking screenshots and sharing them, and for this I use the Firefox add-on LightShot. It's lightweight, quick and easy to use, and is perfect for snapping portions of a screen for copying into an email in order to share or send feedback.

LastPass

I use LastPass for password management. I've found it to be a well designed password management tool that doesn't get in the way as I'm logging in and out of websites. It's pretty intelligent, so it knows when you make a change to some login information, and it manages multiple profiles well, so I can use it with my wife.

Firebug

I don't have much to say about Firebug, except for how I don't know how I would do any web development without it. It's also immensely useful for providing feedback — instead of trying to describe how I want something to look, I can just show them. This also saves cycles, as I can see what works and what doesn't myself without going through numerous iterations with a developer.

MockFlow

I've tried out a number of wireframing tools in the past, but settled on MockFlow for my UI design needs. It is a very full-featured tool, while still remaining easy to use. They also have quite an active community creating wireframe templates, which you can use to jump-start your designs. For the longest time, my main complaint was the lack of a snap-to-grid function, but that has since been fixed and new features are being regularly added. A desktop version is available for no extra charge, but for some reason I still find myself using the web version instead.

Thanks to all of these tools for making my working life a lot easier than it would have been without them.

Honorable Mentions

I use a number of other apps on a regular basis that I didn't quite make my list. These include:

iContact for email marketing (we send 500k to 1M emails a month through this service)
Ta-da List for keeping tracking of sites I want to add to an Elements of Design showcase
Fileswap for sharing large or multiple files with other people without emailing them
Litmus for checking emails for compatibility with a range of email clients
Notable for reviewing web designs
SurveyMonkey for creating online surveys

These are my choices — I'd love to hear what web tools other people couldn't do without.

Nice Way to Say "Thanks" from Netflix

Sat, 17 Dec 2011 18:26:32 -0600

Netflix came up with a different approach for their end-of-year holiday / thanks-for-being-a-customer email — a free DVD rental. Not only is it a nice gesture, but it is also implemented well.

Here's the email I was sent:

Here is the landing page you visit when you click through to redeem your free rental (click to view larger):

And here is the confirmation page once you redeem your free rental (click to view larger):

Redeeming my free rental literally took two clicks, the messaging is clear and concise, and there were no hidden 'gotchas' to dampen my feelings of Christmas cheer towards Netflix. Nicely done!

Which leads to the question, what are you doing to bring a smile to the faces of your customers at this time of year?