Archive for March, 2009

Website Usability – Listen up you “revolutionary” designers!

{ March 18, 2009 @ 5:32 pm } · { Misc }
{ Tags: , , , , , } · { Comments (4) }

I remember around 3 or 4 years ago, I picked up a big book dealing with Web Design Usability standards. I read through almost the entire one – 1000 pages or more! And I discovered that lots of what was mentioned, I had already figured out through online research, articles and forums I had read through, while trying to keep up to date as a freelance web designer. Nonetheless it convinced me further, that following certain simple rules, will help keep your visitors happy.

The designer in me, loves to see revolutionary design, different ways of dealing with the same concept, whether it’s an information based website, an online shop or god knows what. BUT: when creating our own websites, we must always consider the target audience. And in order to have an idea about what the average website user knows about techie stuff, I always use this rule of thumb:

“Would my mother know what to do on this website?”

My mother (64) , considered very “technical” in her generation; has been working with computers in her job for 30 years. Mind you – as a programmer for the better part of that, coding in COBOL. She is not very aware of online shopping, very wary of giving people her credit card number, in fact – she’s only had one for about 7 years now.

She knows about how to program, because this was taught to her in a course in the 1970s. She doesn’t know what HTML or CSS is. She has no clue how images are created in Photoshop. She will not know the difference between a Flash animation and an animated GIF. What she knows is, there’s a page called HOME, that’s the beginning of the site, and from there, it should be clear what this site has to offer.

So here are a few rules, when designing websites aimed at the “general public” (if you’re designing for the tech savvy elite of web designers and the like, you have a little more to play with though).

  1. Call your homepage “Home”. Don’t get too creative!
  2. The quickest way to get to the “Home” page is by clicking the logo on the top left corner of the website. Ensure that there is a logo there, it also says the name of the site, and it is clickable and sends you to the homepage!
  3. Navigation must be obvious, clearly placed towards the left or top of the site “above the fold”!
  4. Don’t get creative in naming links! My mother should know what you mean!
  5. If my mother cannot find what she’s looking for, there must be a Sitemap, and a Search “above the fold”!
  6. If you use a column based layout, 2 or 3 columns, the right hand column is for ads and secondary information. The first things the visitor will look at is the middle, the top and the left side of a website, if they cannot find what they’re looking for, then they will look at the right.
  7. If it’s an ad, it should look like an ad. (unless you want to trick people). Nothing is more frustrating than clicking on something expecting new information, and ending up on some advertising landing page.
  8. People love the back button. Ensure that it’s functional! Warnings about having to “resubmit forms” are scary to non-tech people and cause frustration
  9. Waiting is a pain. Most people will not enjoy waiting longer than 5 seconds, unless they are absolutely sure it will be worth it! So think twice about using that 1024x768pixel high quality photograph as a background!
  10. A website should NOT start with a flash intro! Many people are in a hurry and do not want a blinking “Loading” screen to welcome them to your site.
  11. Too many flashing and blinking things can give people epileptic seizures. (OK maybe I’m exaggerating, but they’re still annoying)
  12. Anything “below the fold” will be less obvious, and not viewed by a significant number of your visitors. Important stuff goes up top!
  13. Backwards compatibility is a must! My 64 year old mother doesn’t care that IE6 is an ancient monster which should have been slaughtered ages ago! Neither does she bother to buy a new pc with a 1280×960 resolution monitor. (after all, the old 15″ CRT monitor still works fine!), so make sure your site is viewable on smaller screens and older browsers, and at any cost avoid horizontal scroll bars from showing up!

Bacon & Leek Quiche

{ March 16, 2009 @ 2:22 pm } · { Food }
{ Tags: , } · { Comments (2) }

quiche

This weekend, I felt the need to do something different. I wanted to eat something I haven’t eaten in a while. Feel the satisfaction of making something special from scratch. So, after having a quick look through the fridge, finding bacon cubes, a leek and lots of eggs, I decided on baking a quiche. My first quiche baking experience was thanks to Odzer, who taught me how to bake a Spinach & Bacon Quiche.

Bacon & Leek Quiche

Pastry:

100g Butter (salted)

100g Flour

Pinch of salt

Put all of the above into a bowl, then cut the butter into small cubes, you may use a pastry blender or whatever you have at hand. It is important that the butter is cold when you do this, you do not want soft butter or your pastry dough will turn greasy!

Rub the butter into the flour, using your index finger and thumb. Keep doing this until the mixture resembles crumbs and both are properly combined. (Don’t leave crumbs of solid butter in there or while baking you’ll get holes in your pastry dough!) Now, add a little bit of water, just enough so that the dough sticks together and holds together while kneading. Knead for around 5 minutes, until the ingredients are nicely combined.

Wrap in foil and keep in the fridge until needed.

Filling:

1 pkt Bacon cubes (250g)

1 leek - sliced

1 onion – sliced

1 tsp Salt – reduce if your bacon is very salty

Pinch of black pepper

Fresh herbs of your choice – I used fresh rosemary, crushed

4 Eggs

125ml Milk

In a frying pan or wok, fry the bacon until it leaves fat and turns golden brown at the edges. Then add the leek and onion, keep frying until all is cooked. Season with salt & pepper and herbs. In a separate bowl, whisk the eggs and the milk together until combined. Season with a pinch of salt and pepper.

Take out the pastry dough and roll it out on a clean floured work surface. The base of the quiche should be approx 1/4 inch thick. Spread a little oil over the pastry case of your choice – either one big one; approx. 6 inches across, or multiple smaller ones. (In case you’re making small quiches, roll the pastry dough out a little thinner. Now line your case with the dough. I used a cake tin; putting a 10 inch diameter round of pastry dough into my 6 inch case. Press the dough into the corners so no air bubbles remain, and make an even edge all across the side of the case, roughly 2 inches in height.

I was left with some pastry dough after doing this, so I kept it aside for using as a lattice top later on. If you followed my pastry dough recipe using 100g butter and 100g flour, you probably have exactly the right quantity for a normal sized pastry case.

In a preheated oven, bake the case empty for approx. 10 minutes, until it starts looking half cooked. You can tell when it’s cooked enough by waiting until the dough is no longer shiny and greasy, but turns matte and a little flaky. Now put the bacon/leek/onion mixture into the case, pour your whisked egg/milk over the top and sprinkle with some grated cheese (optional). If you had pastry dough left over, put it over the top as a lattice shape or however you prefer. Bake at 180 degrees C for 30 minutes, or until the egg is no longer runny when pricked with a knife. Enjoy the quiche hot or cold!

Favicons – or: That little picture next to a website URL

{ March 13, 2009 @ 3:49 pm } · { Misc, Work }
{ Tags: , , } · { Comments (10) }

A picture speaks a thousand words – Or at least that’s what people say. And you will have seen lots of websites, that after you’ve opened them, display a little tiny picture towards the left of the website address in most popular internet browsers in use today. And if you run your own site, you may have wondered, how do I get one of those?

Well wonder no more – The picture is called a “Favicon”. And you get one by creating an icon (.ico file) based on an image you design, and putting it in the root directory of your site. So that’s it in a nutshell. Below I’ll go through it step by step.

1. The image
Choose an image or create one from scratch which will look good even when displayed extremely small. If you’re creating this image from scratch, it helps to work on a small scale so you need not resize too much in order to use the icon. Make a new image sized 64×64 pixels. Once it is done, resize to 16×16 pixels and see if you like the look of it.

For this example, I have taken part of a photograph of sunflowers, and selected a square of the original to create this small picture: (64x64pixels)

sunflowers1

Resized to 16×16 to see if it looks acceptable:

sunflowers16

Well it ain’t perfect, but it’ll do for my example.

Next – we need this image to be saved as an .ico file (Windows Icon File). Depending on what software you have access to, you may be able to do it from your graphics program directly (For this example I used The Gimp, which can directly save as .ico, if you’re using Photoshop, you may need to install a plug in). OR: You can simply convert your .png file to .ico using This Very Handy Website. Then rename your file to “favicon.ico”.

2. Your Website

Now that we’ve got the icon, we need to include it in our website. In order to do this, upload it to the root directory of your website. Now most browsers will automatically recognise it. But in order to make sure, include the following code on all pages, within the <HEAD> and </HEAD> tags towards the top of the page:

<link rel=”shortcut icon” href=”http://www.mysite.com/favicon.ico” type=”image/vnd.microsoft.icon”>
<link rel=”icon” href=”http://www.mysite.com/favicon.ico” type=”image/vnd.microsoft.icon”>

And done! Now everyone who visits your site (provided their browser supports it) will see your favicon next to the url, next to the title of each page in tabbed browsers (IE7, Firefox, Google Chrome, etc), as well as next to bookmarks.

NOTE (Thank you Odzer for reminding me) : if you’ve done all the above and your favicon is not showing up, empty your cache (temporary internet files), or the change won’t show up. This is because your browser is basically still looking at the files it had previously saved on your hard drive, not the ones you just updated.

Follow

Get every new post delivered to your Inbox.