I was inspired by the menus on the Star Trek – The Next Generation DVD menus and wondered if you could do a navigation like that in pure CSS. And voila you can:

Star Trek TNG styled pure CSS navigation
Feel free to use it, in case you feel like geeking out, too :-)

I just played with Sloppy, a tool to simulate dial-up connections on your broadband for testing purposes, and I am very happy indeed with it. So if you have a web site or product that is most likely to be used by dial-up users, check them out with sloppy slowing down your connection.

A friend of mine just started diving into web design and is planning to redesign the web site / shop of the company she is working for. Yesterday we talked a bit about what is there to do and she complained about everybody wanting to contribute to the visual design of the site.
To help her keep her colleagues busy while she can concentrate on the design and the branding, I came up with these 10 things that can be done to ensure a good web site even before you start developing.

1) Competitive Analysis

• Surf around to see how your competitors are faring. What are the things you like on their sites? How easy is it to buy from them, and if not, what did they do wrong that you can avoid, too?

2) Ask others what they expect

• Ask around your friends and family and on the web (chatrooms, forums, mailinglists) what people would expect from a shop selling your products.

3)Define your target group

• Who do you want to reach specifically? This does not have to be one group, but can be many. You can at a later stage define different channels (microsites, other domains, other formats like newsletters or feeds) for each of them.

4)Are you planning to take on the world?

• Think about internationalisation (i18n) and localisation (l10n). Do you want to offer different languages? Do you want to ship world wide? The former has a great impact on the visual design (German words are longer than English words), the latter on the billing system.

5)Think about delivery

• What kind of checkout system do you want to implement? Do you only want to allow credit cards or also other means of payment? Do you want to implement a tracking system (“Where is my order”) to cut down on costly calls?

6)Clean up what you got

• Make sure that you have your product data in a format that can be easily converted to a database (Excel, XML), the more logical your categories are, the easier it will be to maintain the shop.
• Make sure you have the image material in a high quality format, and that the brand guidelines are available for the web designer.

7)What is your marketing strategy?

• Think about the cross-marketing you want to do. Simply building an online shop is not enough, to attract customers you need to find them. Think about advertisement, partner programmes, newsletters or feeds.
• Are there any partners you could cooperate with (portals, other web sites, products that add value to yours)?

8)Where will you move to?

• Think about the server you will need, what database and traffic restrictions should it have? Do you need a secure section for transactions or do you ship that out to a third party? Do you need to connect several domains, and use virtual hosts? How much budget do you have for hosting?

9)Start writing your content

• Start writing your content, make sure that the documents have a clean structure (headers, paragraphs, lists – use the structure elements in Word rather than making them look like what they should be). Flag up text elements that are different from others by describing them (i.e. Each first paragraph on a page should be bolder than the others). This will make creating the style sheets (CSS) a lot easier later.
• Remember that web users are not likely to read – they scan pages with their eyes. Therefore KISS (Keep it simple, stupid) is important. Keep sentences short, stick to one subject in each paragraph.
• Don’t get cute with naming necessary elements. A shopping basket is a shopping basket, not “your loot” or “stuff”.

10) Think “maintenance”

• After making sure the customers can find and buy your products, keep maintenance as one of your main concerns when it comes to technicalities of the site. Ensure that you are not dependent on a developer to add or delete sections of your shop – this also includes not relying on graphical navigation (CSS can make navigations look dead sexy although they are text)

Internet Explorer once again manages to amaze me. Sadly enough not in a positive way.
I am working on a dynamic A to Z listing for a local council page (they are a legal requirement), and thought marking them up as a list of links pointing to named anchors is enough.
It is for Firefox, and old browsers, but Internet Explorer has one big bug. Try to tab through the A to Z navigation via keyboard and press enter. MSIE takes you to the section you have chosen, and the logical next move is to hit tab again to reach the first link in that section – in this case, the link back to the navigation. If you do it though, you’ll find that MSIE takes you back to the navigation!

A workaround is giving the named anchor an href, or, and now comes the really odd bit, nest the link inside an element and give it a width in the CSS.

More information about the bug on Jim Thatcher’s site.

You may sometimes find yourself with big Javascript libraries to include in your documents. Currently I am on a project where one of them is about 1MB big (don’t ask).
Now, I wondered what can be done to only apply these when they are really needed, and the answer, aside from adding an extra page to the process is to add them dynamically via the DOM:

window.onload=function(){

if(!document.getElementById || !document.createElement){return;}

var newjs=document.createElement(‘script’);

newjs.type=’text/javascript’;

newjs.src=’functions.js’;

document.getElementsByTagName(‘head’)[0].appendChild(newjs);

}

	

This example would only load the file “functions.js” when DOM is available in the browser, older browsers would not load the file.