Category: Web Design
November 30, 2009 Flattr this
Blue Beanie Day 2009. We have a hero.

Blue Beanie Day, showing our support for web standards by wearing a blue beanie.

#bbd09
Posted in: , by seiz | Comments (0)
February 07, 2009 Flattr this
Meaningful Graphs in Web Analytics

Have you ever used Google Analytics (or any other tool) to compare your metrics to the previous month's or any other past timeframe?
Did you then realize, that the graphs shown didn't really tell you a story?

So here's a tip – which in case you haven't already discovered this yourself – is so simple, that you'll probably bang your head against the desk.

This tip probably applies to most Web Analytic Tools out there. As i have no access to any other tools, i'll use Google Analytics here for the examples.

Google Analytics has a nice date-picker which lets you select the timeframe used to display its verious reports. The timeframe is usually defined by a start- and end-date. In order to let you compare metrics to the past, there can even be two start- and end-dates.
Let's assume you want to look at your dashboard, and compare your statistics for April to the ones from March (the previous Month).

The Default

GA-Date-Range.jpg By default, you'll define a date range by either clicking on the month name (April) which automatically inserts 04/01/2008 and 04/30/2008 into the date fields or you fill in the date fields by hand (or even use the fency Timeline slider or what have you).
You then repeat this step for the timeframe in the past you want to compare your metrics to, click on Apply and you're done defining your timeframes and your report is being displayed.

GA-Mar-Apr.jpg
The defined timeframe as seen in the little calendar view

In your dashboard, you'll see all kinds of graphs and probably also one for Absolute Unique Visitors which might look just like the image below:

GA-Visits-Months.jpg As you can see in the graph to the left, we have a nice pattern, as the data used for this example is from a B2B Site which has an audience browsing the site mainly during weekdays.
The blue line represents April's trend and the green line represents visitors in March. You'll notice, the pattern is somehow repeated in the green line for March.
What the graph to the left fails to communicate however is the data you might probably be interested in most: The difference in quantity between the two months. Did April have more unique visitors or March?
The graph simply fails because there is too much noise and the pattern isn't aligned.
If your traffic doesn't show any patterns and you have the same amount of traffic every day, please stop reading, as all i say here doesn't apply to you.


The Hand Tuned, Meaningful Beauty

Now here's the simple trick. Let's align the patterns by adjusting our timeframes in a way, that makes sense for our scenario: Instead of picking whole months, we need to align our timeframes by a specific Weekday, which will be the same day for the current and past timeframe. We'll also make sure, both timeframes have the same length.

GA-Mar-Apr-Weeks.jpg
Adjusted timeframes with similar lengths and the start days aligned at a Monday.
We're looking at four weeks each.

GA-Visits-Weeks.jpg Look at the graph to the left. Isn't this a beauty? Get the story this picture is telling you? Huge difference. We can still immediately identify the patterns from the previous graph, but can also see a meaningful, comparable representation of quantities.
I believe everybody will now be able to immediately spot the decline in March's visitors which lasts from the middle of week three until mid of week four.


This trick is so simple, i wish google had "Align by Weekday" build right in to Google Analytics already.
I hope this was news to at least some of you and that this little nugget will be helpful to you as you are crunching your numbers.

PS: If you're into Web Analytics and don't read him already, do yourself a favor and have a look at Avinash's Blog.

December 17, 2007 Flattr this
Twitter Maintenance page done right

twittermaintenance.gifOnce again, Twitter.com is in maintenance-mode. Hopefully -- as usually -- for the win.

There's one thing i realized which really puzzles me. It is the way, they serve their temporary maintenance page (pictured in parts in the screenshot to the left).

This time (i haven't checked this during any of their downtimes before), they publish their temporary page in an extremely stupid way:
Twitter is serving a 404 status for every URL on twitter.com. The page you see during maintenance is a customized 404 "Not Found" error page. The 404 HTTP status means, that the url you tried to access doesn't exist and you should never use this url again, as it is bogus. This is not very clever. Now you can argue how important a proper google-index for twitter.com is, but even if you'd not care about google (and any other search engine) throwing every twitter-page out of it's index due to the 404 the crawler gets with every request, it still is wrong. HTTP statuses are there for a reason and serving a 404 during maintenance is not what the 404 status was meant to be used for.

The proper way to handle this would be to do a temporary redirect by serving a 307 or, even better, simply serve the maintenance page with a 503 status, which is the perfect fit for a maintenance. HTTP Status 503 stands for "Service Unavailable" which is exactly what is happening during a maintenance break.

Serving a 503 would deal with search engines nicely and clients like Twitterrific could also nicely parse it and inform the user correctly. For instance hahlo.com is momentarily just serving black frames, making their users believe something is wrong with hahlo. Pockettweets on my iPhone also confuses the user as Mobile Safari is simply alerting the user about too many redirects.

Hopefully someone from twitter will read this and not make the same mistake again in the future.

December 05, 2006 Flattr this
WebKit Nightly Builds and Saft / SIMBL /Safari PlugIns

Here's my little christmas gift to all of you having either Saft or any SIMBL PlugIns installed and want to work with the WebKit nightly bulilds without crashing or having to manually disable the above mentioned PlugIns:

OpenWebKit

is a simple AppleScript App, that just does the following:

  • Rename /Library/InputManagers to /Library/xInputManagers
  • Start /Applications/WebKit (the nightly build you have installed)
  • Rename /Library/xInputManagers back to /Library/InputManagers

Installation notes:
Download, unpack and doubleclick.

Note: as this script needs to rename a folder in /Library, it will only work when you have Admin rights for your Mac!

Tada! No more hassle.

Enjoy!

PS: i wonder why the nightlies do not just already disable all input managers so we don't have to.

Posted in: , , , by seiz | Comments (0)
November 23, 2006 Flattr this
Website Statistics in Google Earth

Jacob Cord wrote a very nice little converter which takes a tab-text file, exported out of your Google Analytics Geo Map Report and converts it to a KML file which you can import into Google Earth.

The output of the original script didn't look all that exciting, so i modified it a little to produce some awesome visualisation of website traffic.


Click the image to see an animation (QuickTime required)

The longer the lines, the more pageviews are represented. If the pageviews are above a set limit, the lines are drawn in red instead of yellow.

Now isn't that an entirely different approach to website statistics visualisation? I'll soon follow up with a Mac OS X PPC binary of the converter and instructions.

December 02, 2005 Flattr this
Ajax: Just because we can?

Just read an interesting Article over at ALA which also mentions new techology like AJAX and the like being too much hyped and immediately being used without thinking about the user and his needs first.

Let's make a test. I recently developed something at work, where many would see AJAX written all over it. Look at the movie below:

Is this using AJAX? Let me know in the comments (sorry, TypeKey login required now due to crazy comment spam)!

BTW: the above is a live recording right out of my browser window. No editing involved other than scaling the movie down to 60%.

August 15, 2005 Flattr this
An open letter to all american websites, web developers and usability experts

Dear Webmaster,

surely you are having a contact form somewhere on your site where i can contact you by providing my Address, Phone and such. It'll probably look something like this:

Sample Form

Please be aware that many countries do not need any States in a postal address. In fact, in many countries it is totally uncommon to have a state included in a postal address - some don't even have any states at all.

So please, please, please do not make the STATE fields on your contact forms mandatory. If you're clever, you can decide on making them mandatory depending on the Country chosen. But please, once i selected Germany or such (you'd have to research that country-list on your own - i was to lazy to research it and only make states mandatory IF USA was selected as country) do not make the State Field mandatory!

Oh, and while we're at it: Our phone numbers are also formatted differently and might have a different total length, so don't force us to format them like 123-123-1234 (German area codes might have 4 to 5 digits for example).

Thanks so much for not being ignorant about foreign countries!

This is driving me mad for almost a decade now.