Archives for "Web Design: 2007"

Our New Video/Multimedia Learning Website

fooschool-logo.jpg

We've just launched a new website called FooSchool.com.

The aim of the website is to provide free multimedia lessons, including video lessons, in a variety of subjects.

The design of the website is pretty basic at the moment -- we just wanted to get the site up and running quickly. But we'll overhaul the design in the near future.

We've launched the site with 40 video lessons that will help students who are learning French. Each of the lessons is three minutes long, and they are organised according to the Parisian arrondissements. There are two lessons for each arrondissiment, starting with the 1st arrondissiment.

The lessons tackle points of French language and grammar that are gradually more difficult as they progress through to the 20th arrondissiment.

So we've launched the site with over 2 hours of free video lessons. Over the next 12 months, we intend to add more subjects and lessons. Most likely these will be additional language subjects to begin with, including English language lessons for non-native speakers.

Stay tuned!

When Geolocation Gets Too Clever

teacher and globe Geo-redirecting -- redirecting users to different parts of your website depending on their own geographical location -- is a neat trick. It is handy when your website has different messages or product offers for users from different countries or regions.

But many website owners mistakenly assume that their geolocation software works every time. It doesn't!

Geolocation works in two steps:
1. A script detects the user's IP address.
2. The script looks up a database of IP addresses and their associated countries to tell where the user is located.

There are potential problems with both steps:
1. Many users go through proxy servers, so the IP address that appears to be associated with their computer is, in fact, the server's IP address, which may be in a different location.

2. There are many databases of IP addresses and their associated regions (some free, some commercial) but none is even 90% accurate. For example, look at this table of accuracy for city geolocation, from one of the leading providers of such databases, Maxmind.

The problem is that many websites lock users in to a region-specific part of the website, without giving them the option of choosing a different region. For example, users from Ireland are often taken to the UK versions of product websites, where prices are quoted in pounds sterling ... but Ireland is not part of the UK, and is in the Eurozone!

Another mistake is to make assumptions about a user's preferences based on their location (why not give UK users the option to pay in euros if they want?).

In fact, the makers of Firefox have made a bad assumption about my preferences, based on my geographic location, which prompted me to write this article.

I recently downloaded the latest version of Firefox and, while composing messages in Gmail, noticed that the spell-checker was underlining almost every word in red. I eventually discovered that my language had been set to Irish ... presumably because Firefox had detected my IP address as being in Ireland. (I can't think of any other reason. Certainly, I didn't change any settings.)

If so, even the usually reliable makers of Firefox have committed a gross geolocation foul. At least I was able to fix the problem. Website users who are locked in to a set of regional pages, however, may not have that luxury.

Web 2.0 Style Photoshop Resources

While Web 2.0 usually refers to functional aspects of websites, graphic designers also use the term as shorthand for the look-and-feel that is currently popular on trendy websites.

You know it when you see it: funky orange or lime green gradients, giant buttons, curvy edges, starry-circle-shaped stickers, etc.

To jump on this bandwagon, you can get started by downloading the Web 2.0 Photoshop styles, gradients and badges, produced (and distributed free) by Deziner Folio.

I used them to knock up a masthead for my latest plaything website, Advertising the Future.

How I found this site? Through Smashing Magazine's Best of May/June 2007. Smashing Magazine is the web 2.0 equivalent of Webmonkey.

Advertising the Future

I've created a new website called AdvertisingTheFuture.com.

I'm interested in the way advertising is evolving and had been thinking about writing a (short!) book on the subject. Then I considered the hassle of approaching publishers and the strong probability that my manuscript would get rejected.

So I decided to build a web version of the book. I didn't want to create an e-book; I wanted to create a website that behaved like a book. The idea may seem counter intuitive. After all, a website's non-linearity is what makes it different to a book. You don't have to start at page one.

But who's to say authors can't -- or shouldn't -- create linear websites?

So, advertisingthefuture.com is my attempt at a linear, book-style website. Of course, it won't be exactly like a book: the reader may discover the book at any page, and may jump readily to any chapter. And until it's finished, readers will be able to see the website evolve. I'll gradually add and edit the pages until I feel it's done.

Stay tuned...

My Web Design Toolkit

I use many tools when designing websites, but here are the four I consider to be most important:

  • HomeSite -- although the lack of updates in recent years is pushing me, with much regret, towards HTML Kit. (The latter is not really a replacement, but each has features the other could do with, so I use a little of both -- not an ideal scenario, but what can you do?)
  • TopStyle -- a CSS editor by Nick Bradbury, creator of HomeSite
  • PhotoShop -- of course
  • Firefox Web Developer Plugin

The latter is the new kid on the block but, over the last 12 months, I have become dependent on it. I originally discovered the Microsoft Web Developer toolbar. However, I soon learned that the Firefox version (which came before the Microsoft one, natch) had superior features.

Here are the features I use most often:

  • Ruler -- indispensable when evaluating, reverse-engineering or redesigning websites
  • "CSS > View Style Information" -- for tweaking CSS to relieve cross-browser headaches
  • "Information > View Id and Class Details" -- for reasons similar to above
  • "Information > Display Div Order" -- to solve those niggling float problems

In fact, I'm still discovering new uses and features -- like "Forms > Populate Form Fields" -- which will save me countless agonising minutes filling in form fields while testing applications such as a shopping carts.

Hats off to Chris Pederick who invented this fantastic -- and FREE -- utility.

January 2007 Website Launches

We've launched two new websites designs already this month, and I'm quite pleased with both of them, I must admit.

For Don Conroy's website, our brief was to showcase Don's painting in particular. We also created some custom tools that allow Don's marketing team to upload new paintings to the gallery, along with titles, descriptions and prices. Thumbnails and links are created automatically. We've also incorporated an updateable news section. The incumbent site was aimed at children, so we've kept that and labelled it as Don's site for young people.

We also launched our redesign of the Kilroy's College website. This was (and still is) a very interesting project because the client has very specific goals and a deeper-than-most understanding of the web, analytics, etc. We conducted usability reviews, wireframe mockups, graphical mockups, with (several iterations of each) before coming up with this new design.

Both designs represent new directions in style for Mediajunk. Both are also usable, accessible and XHTML/CSS standards-compliant. It just goes to show that a you don't have to sacrifice aesthetics when complying with standards and best practice.

Mediajunk is No Longer Updated

Visit Michael Heraghty's current blog at User Journeys

About

Mediajunk was Michael Heraghty's blog from 2002 to 2010, with articles on usability, UX, SEO, web design, online marketing, etc. More »

follow me on Twitter