Posts Tagged ‘Web design’

Website Usability – Listen up you “revolutionary” designers!

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!

Advertisements

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

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&#8221; type=”image/vnd.microsoft.icon”>
<link rel=”icon” href=”http://www.mysite.com/favicon.ico&#8221; 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.

Google Base – Second Try!

Generally I am a fan of Google products. I can’t help it; until now I have found it to be the best search engine (although results are deteriorating, but perhaps that is a general trend, not just Google’s fault!), their Webmaster tools and Analytics are extremely helpful for anybody running a commercial website. A while back I was also using AdSense on one of my sites. I did earn some money with it but because I was forced to give up my site, I couldn’t keep earning from ads either.

One product I have not yet used is AdWords but I’m on it; once my site(s) are settled in a bit and optimised properly, I will try running and Ad Campaign with the voucher my hosting company so graciously provided me with (£50! and all I had to do was pay around £10 on hosting.. now that’s a bargain!) Oh and not to mention the kind people at Google gave me a voucher as well… £70 after all I did was use Analytics for a while.

Either way, that’s not what I wanted to discuss here… My point is: I generally am biased towards liking Google. So I wanted to try Google Base; a tool for submitting your products to the Google shopping search results. And I don’t know about anybody else, but I use it quite heavily, mainly for comparing prices of products on various websites.

So I happily and naively went into Google Base, opened an account, and read up on how to add products. Because my site has LOADS of them (and I do mean LOADS!), the datafeed option was my salvation. I created a tab delimited txt file in Excel, containing around 2500 products. And I submitted it. That was around a week ago. The first thing that happens is, Google base tells you the file is being processed, which could take up to an hour. After an hour it tells you how many errors there were, and how many products were submitted. And then you get a list of products and their status is “Published … searchable soon”. As long as this displays, you should sit patiently and wait for up to 48 hours until the products are in the search results. Then the status will say something like “Published and searchable”. Right on time, within a day or so the status changed to searchable and I got excited. Could not wait to find out how many people search for my products on google shopping. Guess what: none!

Not a single visitor… absolutely nothing. So I logged in, and tried searching for some of my own products. No result; all I get is competitors’ products. Then I went through the help files… They tell you a way to search for your own products using your user id. Nothing! Not a single product of mine was in the index.

Strange isn’t it? And if you search through help files and forum posts, all you get is pointers on what you could’ve done wrong; set the wrong country, item type, submitted items without prices etc. Well I did everything exactly as described, still nothing in the search results. So I’ve waited for a week, thought maybe I need to be more patient. But today I’ve had enough, deleted all my products, and my feed, and uploaded a new one. (exactly as the Google troubleshooting page told me to; resubmit and see what happens).

But as it stands now, I don’t like Google base as much as I thought I would. To me it seems like a buggy product. Good thing it’s free, because if I had wasted more than a bit of time, I would’ve been quite pissed off!

CMS Made simple?!

Today I’ve spent most of my day researching a CMS. I am in desperate need of a good, stable and easy to use CMS for two applications; my office requires a website and my boss wants to update content, and I am planning a new site myself that will focus mainly on content, rather than 100% ecommerce.

So as I started searching this morning, I came across a blog post describing 13 CMS’s that I had not yet heard of. I cannot really pinpoint why out of all of them, I opened one window for Silverstripe CMS, and another leading me to the CMS Made Simple website. I ended up looking through CMS made simple, tried out the demo install, and noticed some interesting features. For some reason I didn’t go beyond the frontpage of Silverstripe, perhaps I will look into it some other day.

Previously I have used a few Opensource CMS’s both for my own projects as well as for customers. Working as a freelancer, I was asked to do a few Mambo templates. That is how I got a little familiar with that system. I didn’t like it that much because it had many limitations and whenever I would find a module I liked, it turned out development had stopped on it and no support was given. But just like CMS made simple it was also based on PHP and MySQL. Mambo’s limitations grew me accustomed to problems having group permissions for various users, as well as some templating limitations.

I was pleasantly surprised to see that CMS made simple had inbuilt functionality for some things that were very hard to do in Mambo; Group permissions seem to be easy at first sight. I have not fully tested this yet but I will definitely do it within the next week or so. Templates are easily selected and different pages can have different templates assigned to them. I could straight away think of various situations in which I needed exactly this functionality and in the end gave up on my ideas because it was simply too difficult to do.

I was also very pleased with the fact that the inbuilt SEO Friendly URLs in CMS made simple actually work on my web hosting. Something I was not able to do on my Zen Cart site for some reason; which actually made me suspect that maybe I have Windows hosting. Clearly this is not the case because I’ve managed it with this CMS. So I have to suspect that htaccess isnt fully supported on my hosting and because CMS Made Simple has an inbuilt way of rewriting URLs through PHP (don’t ask me how; I’m not that nerdy!) it just works out of the box. Great, just what I wanted!

From what I could tell at first sight, there are many third party modules available for CMS made simple. The website has quite a comprehensive list of them. And I could find a handful already which I have downloaded and kept; a Comments feature, RSS feed, Google sitemap module, Events module etc.

Another I downloaded was osCommerce for CMS made simple. It seemed promising and I was very keen on using it but it just didn’t work at all.. So far this was the only disappointment I faced. Sure, I plan on using this system on a mainly content based site, but I will still need some ecommerce functionality. There are some other shopping cart and product catalogue modules available, and I will test them soon, so my final verdict is still pending. However, at least for my office site, which does not need an online shop, I think I will go with this CMS.

My next step will be learning how to create my own templates. That should be fun…

Meta refresh – a life saver

At work I was facing a bit of a problem regarding the company website. And I’m sure there are more companies out there with this issue. Being a small company, we did not have our own website. We’re a subsidiary of a much bigger company abroad, and therefore they had a website, we referred all our customers to that site, and didn’t bother. But that’s surely not the way to go! As our sales are increasing, we require a more professional image. This isn’t just a handful of people who work directly for the parent company; it is a separate company in its own right and should act like it. So we decided to set up a website.

The company already has email hosting because all our business communication is done electronically. The hosting company seems good enough for our email needs, we get a nice system which can be managed through MS Outlook and a webmail interface. For this purpose we already owned a domain name with free 20mb hosting, without scripting support. Now that the website came into the picture; we were facing a dilemma. The web hosting solutions offered by our ISP are expensive and limiting; clearly they focus more on email and needs and wishes of small companies wanting a small (self made) brochure style website. We are aiming higher than that! With me being the in-house web designer, we have plans for a dynamic portal to match our competitors’ sites; requiring support for PHP and SQL amongst other things. And our ISP just didn’t have the right thing. But shifting our domain to a different host would create a lot of problems; we cannot go without email for even a moment! The system we use is appropriate for our needs, and we do not wish to scale down on that. But we do want a better web hosting for our site!

Solution: we bought a new domain name specifically for our new website. And the old one will remain as it is, because as part of our company email addresses, we suspect many people would still visit that domain, in search for our company site. So we have two domains, out of which one will be fully functional. How to get all visitors to come to the correct site? Easy: we put a Meta Refresh tag on the old site, which seamlessly forwards the visitors to the appropriate domain.

<META HTTP-EQUIV="Refresh" CONTENT="0; URL=http://www.example.com">

Include the above code at the top of your webpage; inside the <HEAD> and </HEAD> tags. Change the URL in the code to the domain you want to forward to and you’re done! The “0” next to CONTENT= refers to the number of seconds you want to display the old page. In our case we want our forward to be as quick as possible. And not just that, we don’t want to distract people by the fact that we’re forwarding; To visitors it looks like it’s all the same site. On the old domain we uploaded a page that looks identical to our website’s front page; when it redirects only very attentive visitors would notice that it looks like the site is refreshing.

Personally I’ve chosen to do it this way because it annoys me when you get to a page which says “You are being redirected to our new site at http://www.blah.com”. It looks unprofessional and messy. Visitors get spooked thinking they visited the wrong site and might close it. Therefore I prefer to have the same look and feel on both pages.