Google announced it’s new browser Google Chrome yesterday. It should be non-bloated and task-focused as that’s what Google’s apps usually look like and it’s what they are saying.

“On the surface, we designed a browser window that is streamlined and simple. To most people, it isn’t the browser that matters. It’s only a tool to run the important stuff — the pages, sites and applications that make up the web. Like the classic Google homepage, Google Chrome is clean and fast. It gets out of your way and gets you where you want to go.”

The interface redesign approach is very interesting. I’m looking forward too seeing their innovations in browser usability and functionality.

Also read the post about Google Chrome by Matt Cutts. He seems really enthusiastic (as he should be getting paid by Google) but doesn’t want to spill the milk before it launches. Typical Cutts there.

I can’t wait to talk more about Google Chrome, but I’ll hold off until it officially launches. Once people can download Google Chrome, I plan to talk about my experiences using Google Chrome, to lay some truth on you about questions you might ask about Google Chrome, and to give some tips for power browsers.

I’m not looking for a new browser to use since I love Firefox and it’s capability to run add-ons and lots of other stuff. However, I like seeing some fresh blood in the browser market. Hopefully it won’t cause too much trouble considering XHTML/CSS support. Are you ready for Google Chrome?

Update: They are working on Mac and Linux versions but Google Chrome will be launching for Windows only. Small chance I’ll get to test it out since I don’t use Windows PC’s.

You are reading a post from Damien van Holten's blog.

Are you ready for Google Chrome?

TechCrunch went live with a redesign recently. I wanted to share my opinion of the new look and feel. The first and most important thing is their increased usage of whitespace. This makes the blog a lot easier on the eye.

Old TechCrunch on the left. Redesign on the right.

TechCrunch redesign critique

With the menu going into the background - from white/green to white/gray - and the lack of green I think they took a step backwards branding wise. Pages are easy to read but bland and I could probably say that instant recognition of a TechCrunch article is less likely now.

The homepage overhaul is great, scanning it has become easy and not showing full articles is good since most readers probably aren’t going to read every single article and just pick out what they like. There’s still an abundance of banner ads on all pages but they are all constrained to the right hand sidebar.

My main annoyance is that header and title links aren’t indicated as links. Links inside articles are fine: green and bold but article titles are black without a underline. Of course with article snippets they give you a ‘read more’ link but that’s not the point here, a link should look like a link.

If it’s a link it should be styled as such.

Overall I think the redesign is a step forward but I do hope they will work on branding the pages a bit more. It’s a bit too generic for me at the moment.

You are reading a post from Damien van Holten's blog.

The TechCrunch redesign

I came across a great example on how people screw this up on a daily basis on a site that I can imagine has quite some traffic: The Official Website of Beijing Olympic Games.

On the middle of the page there’s overview of previous, current and upcoming gold medal matches. Which I can imagine is one of the most used functions on the homepage. I can’t imagine why but to view the list they offer a javascript button scrolling system. Cool right? Well yeah, apart from the the fact that the scrolling system is slow as hell. It takes over 15 seconds to scroll down 5 results.

Where’s my scrollbar when I need it?

Considering that a lot of people will check this site at work this is bad. Real bad. I turned of javascript because I figured I would get my scrollbar back. Nope, nothing. Of course, the scrolling system stops working and so do the tabs.

You can click all you want, nothing will happen…

Why is it so hard to make also function without using javascript? The big boys do it right, and so do the smaller one’s. It’s a good thing the Chinese are better at sports then the are at online usability.

You are reading a post from Damien van Holten's blog.

Beijing 2008 usability failure

I collected all stop words lists that seemed useful, had lengthy discussions with my colleague’s about verbs en nouns and had late nights going over each and every one of them. With great pride I present to you: The most complete list of dutch stop words known to mankind™.

• aan
• af
• al
• alles
• als
• altijd
• andere
• ben
• bij
• daar
• dan
• dat
• de
• der
• deze
• die
• dit
• doch
• doen
• door
• dus
• een
• eens
• en
• er
• ge
• geen
• geweest
• haar
• had
• heb
• hebben
• heeft
• hem
• het
• hier
• hij
• hoe
• hun
• iemand
• iets
• ik
• in
• is
• ja
• je
• kan
• kon
• kunnen
• maar
• me
• meer
• men
• met
• mij
• mijn
• moet
• na
• naar
• niet
• niets
• nog
• nu
• of
• om
• omdat
• ons
• ook
• op
• over
• reeds
• te
• tegen
• toch
• toen
• tot
• u
• uit
• uw
• van
• veel
• voor
• want
• waren
• was
• wat
• we
• wel
• werd
• wezen
• wie
• wij
• wil
• worden
• zal
• ze
• zei
• zelf
• zich
• zij
• zijn
• zo
• zonder
• zou

That introduction might just be over the top a bit. I do think this list will come in handy for some of you out there. Also available in .txt format.

You are reading a post from Damien van Holten's blog.

Dutch stop words

Initially we had the idea to work from within their system (some vague CMS) and optimize potential landing pages. However, the system was such a hassle to work with… not flexible enough, old and plain bad. So we decided against using their system and created a separated landing page module fully incorporated in their design while having full control in optimizing the pages not only in code and content but also for conversion optimization.

We delivered the system the pages went live and they started ranking, very well. The client decided to do their own interpretation of the analytic data. We suggested they needed professionals to look at their data, but they had their “guy” for web development/analytics/SEO.

A few months later the client calls, all the landing pages pages were loosing ranking fast and some weren’t even indexed anymore. Their ‘”guy” had kept on working the website and the landing pages but he didn’t know what was going on.

They asked us to do some research on why they were losing high positions so fast. I took a look at the SERPS and their website… to my surprise I couldn’t find any links to the landing pages. They effectively removed all links from the website to the landing pages. No wonder they stopped being indexed, the only reason they were still getting some hits was because a few pages had external links.

The moral of this story: Either get your “guy” trained or hire professional web developers/SEO’s for your website.

You are reading a post from Damien van Holten's blog.

They just have no idea…

A simple search box nothing special… When you try to use it a few usability problems come up which make using the search annoying. Especially the extra options that appear when the search box gets focus (with the mouse cursor).

Unexpected extra options

It’s unexpected because I didn’t ask for more options but I did get them. Only by focusing on the search box (I clicked the search box) the drop down menu appears.

It’s not working properly

Now this is a hard thing to say because the search function works fine and the selective search also works fine. However, they made the whole background of the header a homepage link. This with the search box not being that large results in a lot of clicks back to the homepage, deleting anything you might have typed in the search box and removing your selection search preference. Of course this is also a problem when you first try to click on the search box.

Even though your focus (the cursors focus that is) stays in the search box I can imagine a lot of people clicking the search box again. I did the exact same thing, since the type cursor disappears from the search box when the options pop up.

The solution is simple as it gets: either show the options right away or show a more options link. Don’t confuse visitors.

All basic stuff, maybe they should buy one of their own books on usability.

You are reading a post from Damien van Holten's blog.

Where site search went wrong

It’s a crappy article so don’t bother to read it. Now at first glance, you don’t see anything special about this article, but what’s fun is that the page contains 23 outgoing links to the same website: web-site-design.tv.

Not only are they link spamming throughout the article but they also hide the links. By styling the links exactly the same as the content: black copy and no underline. You only see the links when you hover over them, by outlining all links on the page (by using the Firefox Webdev Toolbar) or by turning off CSS completely for a moment.

A bunch of hidden links made visible.

The page doesn’t even seem to be indexed by Google (probably penalized) but the main site still has a PR6. It seems Google allows sites to pull stunts like this without any further going penalties in question.

I really can’t see why they would need to lower themselves with pages like this… They might be unaware of what kind of pages they are publishing (which seems very doubtful) or it’s just about the money.

I shouldn’t have to mention that this is not the way you want to get higher search engine rankings.

You are reading a post from Damien van Holten's blog.

Nasty SEO by LogoBee.com

Let’s take a look at a few applications and see how they handle it.

Google AdSense

AdSense can be found on the the Google domain as a sub directory: http://www.google.com/adsense/. This makes sense since this application runs under Google (or as a part of it).

Google AdWords

However, Google AdWords runs as a sub domain: http://adwords.google.com. Weird right? Why just not use sub directory’s for both systems?. They did try to solve this by catching the URI and redirecting it when you type in http://www.google.com/adwords. Okay that’s good right? No. Because when you add a slash (/) - and many people do this - Google just tells you it doesn’t know AdWords.

AdWords? Nope no idea what that is…

And the confusion goes on… Google Docs runs on a sub domain (http://docs.google.com), but Webmasters doesn’t (http://www.google.com/webmasters/). Gmail used to gave it’s own domain but now it’s on a sub domain. I could go on for a while.

Google, stop messing with your URI’s. Pick a lane and go with it.

You are reading a post from Damien van Holten's blog.

Google, stop messing with your URI’s

Almost every time I see a print designer - or web designer without coding skills for that matter - create a web mockup something goes wrong. Buttons are impossible to recreate in CSS, they overlay 2 gradients with a drop shadow or - even worse - they use non-web fonts for the whole page (yes, I know you could use SIFR, but that’s not the point here).

“A good web designer not only knows his design he or she also knows his HTML, CSS and the possibilities of the web.”

With knowledge of the web those mistakes wouldn’t have been made. I’m not saying web designers should see the the translation from design to code as a constrain. A low(er) resolution and (possible) full flexibility in your layouts are something that’s unique to the web.

This might be one of the reasons why elastic or liquid layouts aren’t that popular. Creating those layouts requires a deeper knowledge of technical layouts that just can’t be mimicked in Photoshop.

Another question enters: “Can one be a web designer without coding skills?”. Isn’t design for a medium understanding that medium? I think it is. Are there any motion designers that don’t know their way around a video editor? I think not.

Usability is also hard to think about in a static design. It’s a thing you really only start to understand if you work with interactive elements. How do the buttons work, is the active state clear enough, are we guiding visitors towards what we want them to do on the page… all those things start with design but end in technical execution.

If you are a web designer and you don’t know about HTML and CSS I strongly urge you to learn about HTML, CSS and the basics of programming in a language such as PHP. This will not only help yourself (by becoming a all-round web designer) it will help your own company or the team you work in. There’s more to web design then making Photoshop mockup’s.

The process from sketch, to design, to pixels, to browser should be a fluid one. A good web designer not only thinks about how things will look, but how they will feel: interaction, movement, feedback are some of the factors that come to mind.

Note: Other people are thinking along these lines too, Andy Rutledge wrote a great article about the skills an aspiring (student) web designer should have.

You are reading a post from Damien van Holten's blog.

Should web designer be coders?

Check out code-sucks.com. They state they are selling links right on the homepage and they don’t even try to hide it as selling traffic, no they clearly state “Need to boost your Search Engine Rankings?”.

The link is just a image replacement on a H1 so that should be safe, but stating you sell links for the PR (PR5 to be exact) where everyone can see it isn’t smart.

Then there’s the directory, I expected quite some links in there, it being PR5 and all. Well… not a lot of links and not a lot of PR either. Granted, the Google PageRank in SearchStatus (my Firefox plug in) isn’t 100% trustworthy but it says ‘PageRank: unranked” here in my toolbar.

Then there’s some other things that bother me. The design for one, or the lack there off. And look at those headers “Site Name” and “Site Description”. Not very inviting or professional.

I’m thinking of reasons why someone would do something like this… It would be that the directory isn’t finished, but I can’t imagine that being true with the big link on the homepage.

Even if you are trying to sell links try to keep the following things in mind:

• Don’t blatantly state it on your homepage (or anywhere else if you can)
• If you sell PR5 links, be sure that you have PR5 (or PR at all)
• Try to make your link directory look like the rest of your site

Even if it’s not exactly allowed, selling links is not easy money. You should put some effort and thought into it.

Afterthought: It just came to me that this link selling directory might have already been penalized by Google. That would explain the lack of PR. It is indexed though.

You are reading a post from Damien van Holten's blog.

How not to sell links

So far so good. Somewhere in the back of my head something was going on about not going trough the trouble and that I had tried it before. But that was a while ago so I decided to give it another try.

I click the “Click to install” button which is essentially a download button but I can live with that and Firefox starts downloading the .dmg file. I mount the file and open it up. No installer or anything just one file called “Silverlight_EULA.pkg”. I have no idea what EULA means but it says Silverlight so I should be save. I double-click and the install dialog comes up.

I get a friendly message in 10 pt. Times New Roman: “The Setup program will install Microsoft Silverlight on your computer. You will be guided through the steps to install this browser plug-in.”. Very well, let’s get going. I click continue.

The Software License Agreement comes up. Now that’s weird. Because didn’t I already agree to that when I clicked on the “Click to install” button on Microsoft.com? Yes I did.

Oh well, I agreed to them one time. Why not again. I go on with the installation, select the target hard disk and it starts installing. Only took about 20 seconds to install. That’s good. The message comes up “The software was successfully installed” and I’m prompted to restart my browser.

I restart Firefox and I return to the Microsoft homepage. No change, just the static images that where there before. After a few seconds I get a pop-up box asking me If I want to install Silverlight.

Silverlight? No thanks.

You are reading a post from Damien van Holten's blog.

Silverlight? No thanks.

As someone working a lot with online usability I tend to look at these things with a different eye. Let’s just say I am a bit more critical then the average user. First I would like to say that it’s great to have direct downloads to your PlayStation and it’s awesome to finally have a stable platform for game demo’s, as PC gamers have had for years.

The localization problem

The stores content differs from region to region. In Europe for instance we get most game demo’s a few weeks later then the states. Japan has a lot more PSP exclusives and the store content is updated almost daily, while Europe and North America only get updates once a week.

The region of the shop is connected to the address set in your PlayStation network account. You can have multiple accounts on one PlayStation and content can be shared between accounts. So what I did is just make two extra accounts (for North America and Japan) on top of my European account with addresses I got from the internet (I live at 350 5th Ave, New York… otherwise known as the Empire State Building).

Why make a region section at all, if it’s so easy to get around it?

Store content searchability

Because my main account is dutch I see the dutch store. The dutch store is a bit different from the North American one. For one thing, it’s a hell of a lot slower.

More annoying then everything else is a missing function that’s available in every other language: view new content. It’s not possible to check what items are new in the dutch store, so each time you want to see what’s new you have to go trough all sections and since everything is so badly categorized it’s a real drag.

You are reading a post from Damien van Holten's blog.

PlayStation Store annoyance

With the release of Firefox 3 favicons not using transparency look extra ugly next to the address bar and in tabs. A lot of sites use white as their background color not transparent which results in a ugly white background on the new gray background next to the address bar.

While online favicon generators like favikon.com are nice, they don’t offer the full control you should have over your icons. I create all of my favicons in Photoshop and use a nifty little plug-in called Iconbuilder. Iconbuilder by Iconfactory gives you a lot (maybe even a overkill) of export functions. You can create icons in multiple sizes and export directly to the .ico format (including transparency).

You are reading a post from Damien van Holten's blog.

Transparency in favicons

The plan is to create a commenting system, a voting system en a send to a friend module. All things I’ve hardly touched and I’m trying to build them from the base up. I’ll blog about things I run into considering seo, php and front-end development/design.

I think one of the bigger questions is how to market such sites online. Since it’s not exactly a niche and already a extremely competitive markets with big guys taking up the top positions. My only real way out is to focus on long tail keywords. But that’s only on-site optimization.

You are reading a post from Damien van Holten's blog.

My small gaming network

On servers that use Apache you can force every browser request to redirect (with a search engine safe 301 redirect) to www. The following few lines in your .htaccess file will do the trick:

RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_HOST} !^www\.yourdomain\.com [NC]
RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [L,R=301]
Change the above code to your domain and all requests will be rewritten to have the www. prefix. For instance: the request for http://domain.com/directory/filename.html will be rewritten to http://domain.com/directory/filename.html.

The .htaccess file

The .htaccess file can be found in the root of your website directory (where you also find your index file). If you can’t locate the file it might be hidden; file names starting with a dot are automatically hidden by a some FTP clients. Set your FTP client to show hidden files.

Another reason for this could be that the .htaccess file doesn’t exist. Just create a new empty file on your server and copy the the above code into it.

You are reading a post from Damien van Holten's blog.

Getting your www rewrite right