Posts tagged as:

General

How the Web Works

by Jeff on October 16, 2005

Many people think the Internet and the web are the same thing. In fact, the Internet is simply a global network of computers – the web runs on top of the Internet, and makes it useful for us. So how does the web work?

The Invention of the Web.

The web was invented by a man named Tim Berners-Lee in 1989 – that’s 20 years after the start of the Internet. People had been trying to work out effective ways of sending information around on the Internet for a while at that point (email was invented in 1971, for example), but there hadn’t been any systems that had really harnessed the net’s potential.

The web changed everything. Berners-Lee’s big idea was to apply the idea of links to the Internet: the web would be a mass of pages that you could move between by clicking on links. He came up with a format for these pages (HTML), and wrote the first web browser to view them with, as well as the first web server for sending them to other people’s web browsers.

Links might not seem like much now, but at the time they were revolutionary. Imagine what the web would be like if you had to keep typing long addresses every time you wanted to move from one page to the next, or using long numbered menu systems that work differently from one site to the next. Without the web, having Internet access would be pretty useless.

Servers and Browsers.

Any time you use a web browser (like Internet Explorer or Mozilla Firefox), you’re using the web. How? Well, it works like this:

1. You open your web browser, and it goes to your home page. From there, you can click links to other websites, or to other parts of the same website. If your home page is a search engine, then you can type in a search and click links in the search results. If you know the address of a site you want to go to, you can type it in, and then click more links from there to keep going.

2. Each time you click a link, your browser looks at two things about it: the name of the web server it links to, and the name of the page it links to on that server. For example, the address ‘http://www.example.com/mypage.html’ tells the web browser to get the page called mypage.html from the server at www.example.com, using HTTP (Hypertext Transfer Protocol). This server is a real computer, connected to the Internet, that has the page you want to read stored on its hard disk.

3. To find out where this server is, your web browser looks it up using DNS (Domain Name System), which turns the text address into a number. This IP (Internet Protocol) address consists of four numbers between 0 and 255 – it looks like a phone number. The Internet is set up to make it easy to find a server anywhere in the world once you know its IP address, and it can easily find the quickest route from your ISP (Internet Service Provider) to the server, and establish communication. This whole process, from DNS lookup to connection, will often take much less than a second.

4. Your web browser then sends an HTTP request to that web server, and the web server responds by sending back the HTML (Hypertext Markup Language) code for that page. Your web browser turns this code into a page that you can view. From there, you can click more links to start the process over again.

Of course, all this is quite simplified: modern browsers and servers send around much more than HTML code. You can use the web to download anything now, from pictures to programs, but it all works in basically the same way.

If something goes wrong somewhere in this process, then you’ll get an error: ‘the page cannot be displayed’, for example, usually means that the server’s name was wrong, or that it doesn’t have the page you wanted. You might also see errors saying that the server is currently too busy with other people’s requests to respond, or that the page you wanted has moved. In each case, the best thing to do is to follow the instructions on the error page, which usually means checking the address and trying again.

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

How to Run Ads Without Driving Visitors Crazy.

by Jeff on October 14, 2005

As you travel around the web, you’ll notice that most sites now have ads in some form or another. Some of them are subtle, but some of them just aren’t – in fact, after a while, the ads at some sites can annoy you enough that you’ll either block them out entirely or leave the website. This isn’t good for you, and it isn’t good for the site’s owner – which is why you want to avoid the problem or your website.

Basically, you probably want to run ads, but you don’t want to drive your visitors crazy doing it. That’s why you should avoid all the following kinds of ads.

Pop-ups and Pop-unders.

The classic annoying ads are pop-ups: those ads that open a new browser window to display, and force you to close them before you can continue. Pop-unders are a variation, that pop up behind the website so the user sees them when they close their browser – not only annoying, but also quite confusing for them.

People are annoyed enough by pop-ups to actually buy dedicated pop-up blocking software, and browsers eventually started including it as a built-in feature. This means that pop-up ads now bother only the most unsophisticated of users who don’t upgrade their software, generally a minority of your site’s audience – pop-ups just aren’t as profitable as they used to be, so there’s no point in annoying people with them any more.

Floating Ads and Takeovers.

The rise of pop-up blocking software has meant that pop-ups have effectively been replaced by floating ads and website ‘takeovers’ – that is, ads created using Flash that appear over the top of the page you’re viewing, covering up its content. These ads are even more annoying than pop-ups, because they usually don’t come up with a close button for a few seconds after they appear, and missing it slightly can cause the advertiser’s site to appear. Users will often stop going to sites that make use of takeovers.

Interstitials.

Interstitials are a popular form of high-revenue advertising. The basic principle is that an ad is displayed on a full-page before the content, and then the user has to click through from there to get to the page they want. This, understandably, annoys users who just want some information – it mainly only works on sites where you have something to offer that others don’t, like an exclusive story or a video. Used well, they can be a big money-spinner, but used badly they’ll have people reaching for the back button.

If you do use interstitials, make sure you don’t track them using cookies, as this will cause users with cookies disabled to see the ad far more times than they should. You should also use Javascript to make sure that the ad disappears automatically and quickly, without the user having to click through – this makes them far less annoying.

Animated Ads.

Part of the reason that animated GIFs have become popular on the web is their overuse in advertising. At its worst, this results in ads that cycle rapidly through hundreds of colours, garish flashing text, and even ads that appear to vibrate or otherwise move around to draw attention to themselves. As you can imagine, visitors find this distracting and infuriating when they’re trying to concentrate on your site – resulting in them losing interest and clicking their back button.

Modern animated ads that use Flash can even have sound, although this is quite rare, as even the advertisers don’t want to annoy people that much. Anyway, avoid.

Products to Avoid.

Finally, it’s worth noting a few specific products that you should avoid running ads for, simply because the actual content of the ads themselves. Try to stay away from ads that look like fake system error messages, as non-technical users find these frightening and technical users find them deceitful. It’s also worth staying away from those fake competition ads where everyone wins, and ads that are aiming to get your visitors to install ’spyware’ on their computer and send private data to them – conning your visitors into this kind of thing is unethical, and makes them less likely to come back to your site ever again.

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

Picking a Colour Scheme

by Jeff on October 10, 2005

Before you can consider the finer points of your design, you need to make the big decisions. Few of these decisions are more important than what colour scheme your website is going to use. If you choose the wrong one, your site will be, in the worst cases, completely unreadable.

Pay Attention to Contrast.

First of all, before you do anything else, you need to check that the colours you’ve chosen provide enough contrast for your text to be readable. Don’t put orange text on a yellow background, or red on blue, or anything like that. You should especially avoid using a lighter version of a colour on top of a darker version of that same colour, or vice versa. You’ve got to make sure that your text is readable.

Never Use Black Backgrounds.

You can generally use whatever colours you like as part of your colour scheme, but stay away from black backgrounds. It makes your website look ‘underground’ and threatening, not to mention old-fashioned. The only people who will like it will be dyed-in-the-wool computer nerds and people who get headaches from large areas of white.

Not Too Many Colours.

You should choose three or four colours for your site, and use only those colours (or shades of those colours). You can’t go using the whole rainbow without the design looking garish, and garish is never good. Decide ahead of time which three or four colours you’re going to use, and stick to it – if you want to add one, you have to drop one of the ones you’ve already got.

Complementary Colours.

These are colours that are opposite each other on a colour wheel, and so look good together, at least according to colour theory. The three most common sets are red-green; blue-orange, and yellow-purple. Whether you agree with this or not is up to you, but it can work surprisingly well, especially if you use subtle shades of the colours.

This is also a good way to pick colours that will be easily readable against a certain background: look for the exact opposite colour to maximise readability.

Analog Colours.

Another approach to try is to pick colours that are similar to your main colour, meaning that they’re near to it on the colour wheel. Red, for example, goes well with its analog colours, orange and yellow. Overdone, this can make your site look overly bright, but it can look good with restraint. It’s no coincidence that these combinations often occur in nature.

Chromatic Colours.

My personal favourite technique is to use colours chromatically. You use different shades and hues of one colour in your design, and nothing else apart from black and white – for example, you might use light blue, bright blue and dark blue together. This creates a sleek, professional look, and comes highly recommended.

Take Colours from Nature.

If you’re lacking inspiration for a colour scheme, one of the best things you can do is go for a walk outside. Take a look around at plants, flowers and animals. I once based an entire design on a photograph I took of a cat, and it turned out far better than I would ever have expected. Nature knows how to use colours better than you do – learn from it.

Colour Blindness.

Finally, it’s worth dropping in a note here about colour blindness. Try to make sure that your design uses colour to make itself aesthetically pleasing, but doesn’t rely on it for anything essential. You wouldn’t believe the statistics for the prevalence of colour blindness (some say as high as 10% are at least partially colour blind), and you need to consider these people too when you’re designing your site – they’re at least as important as the people with unusual browsers, for example.

You might like to take a look at your site using www.vischeck.com, which will let you see things the way a colour blind user would. Make sure they can at least still read your text!

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

RSS: Really Simple Syndication

by Jeff on October 8, 2005

More websites are starting to offer RSS feeds, and more users are making use of RSS readers instead of visiting every website they want to read individually. But what is RSS, why is it getting popular, and – most importantly –what can it do for you? Read on.

What is RSS?

RSS stands for ‘really simple syndication’, and it does exactly what it says on the tin. Invented by Dave Winer, one of the first webloggers, the format aims to provide a standardised way to obtain a website’s content, instead of forcing people to try to pick it out of masses of HTML. It is a simple XML (strictly, RDF) language designed to make it easy to describe content.

Information RSS gives you about content includes its title, the dates when it was created and last updated, and its URL. There is also a space for content, which can either be used to provide a summary of the content at the URL or just to provide the content itself.

Which Version?

There is a bit of a controversy about the versions of RSS, for the simple reason that one is wildly different to the others. While RSS 0.9 and 2.0 are broadly similar, RSS 1.0 is widely considered to be a disaster – little software understands or uses it, as it’s just too complicated. For most purposes, then, you should stick to RSS 0.9 if what you’re doing is relatively simple, and offer RSS 2.0 if you want to give more detail to some of your users.

How is RSS Produced?

While you could write a script of your own to turn your content into RSS (it wouldn’t be that difficult if you store your articles in a database), almost all CMSes and blog software packages now do it for you automatically – if you’re looking for it, keep an eye out for a small orange button that says ‘XML’ or ‘RSS’ on it. All you have to do is give some prominence to the RSS feed, with instructions to your visitors on what it’s for and how to use it.

With most software, then, the RSS should be produced either when you update your content or, alternatively, every time someone asks for the RSS. It’s important to understand that RSS isn’t a ‘push’ mechanism: updating it doesn’t send changes to anyone until their software asks for them to be sent. This often means a window of five to ten minutes between something going in the RSS feed and people seeing it.

How Do RSS Readers Work?

RSS readers work by allowing a user to ’subscribe’ to a feed, either by entering the URL of an RSS feed manually or by clicking on a link that starts with feed://. The reader then works something like an email program, retrieving new entries as they are added to the RSS and alerting the user – indeed, they are similar enough that many email programs now include a built-in RSS reader.

When the user opens the new RSS entry, they will see what you put in the content area, usually with a link to open that page of your website in their web browser. You have to realise, though, that they won’t see any of your ads or graphics in the RSS feed, so it’s best to give them some kind of incentive to click through.

What Else is RSS Used For?

RSS readers might be the most common use of RSS, but the format was designed to be used for almost anything. There’s nothing to stop you, for example, from taking an RSS feed from another website and publishing it on yours – you can even be an ‘aggregator’, mixing relevant content from the RSS feeds of lots of different websites to create a new, more useful website.

That’s where the word ’syndication’ in RSS’ name comes from: it lets you virtually syndicate other people’s content on your site, and it lets people syndicate your content on theirs. It benefits everyone, since the one doing the aggregating gets more content for their website, while the one being linked to gets more links to theirs. If you want to do well on the web, you should make sure you’ve got an RSS fede

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

Photoshop: a Graphic Designer’s Dream

by Jeff on October 7, 2005

When it comes to web design – in fact, any kind of computerised graphic design – Photoshop has been the standard for years, and remains the market leader. But just what is so great about it?

Photoshop’s Features.

Photoshop was originally designed for print graphic designers, and it shows: the selection of features available is truly professional, not ‘dumbed down’ like many web programs are. That doesn’t mean, though, that Photoshop is no good for the web: it supports all the important web formats, and even comes with a special tool, ImageReady, to help you prepare images for the web. It will even help you cut up your designs into parts that can be used on a website, and write some HTML for you, if you want.

Photoshop is useful enough for the web that most people you might do designs for will ask for the PSD (Photoshop format) files you produced – this is especially common when you design a logo. If you’re getting something designed for you, make sure you get the PSDs, as this lets another designer edit the files later. PSD files are widely supported by other software, including Paint Shop Pro.

As well as the web and print, Photoshop is also used in television, film and DVD preparation – but that doesn’t mean it’s become unfocused. It simply provides almost every feature you could ever want, and is constantly doing things that people didn’t think were possible: in the latest version, for example, there is a function to easily remove shadows without altering the rest of the image, and a function that lets you extend objects in images without sacrificing the image’s perspective. Each new version makes the existing features easier to use, which is significant given how revolutionary some of Photoshop’s functions were considered just a few years ago: you can do things that were once thought impossible with nothing more than a few clicks.

Of course, since you probably won’t spend much of your time editing photographs with Photoshop, these market-leading graphics features probably won’t be all that important to you. If you’re anything like me, you’ll simply be interested to know how easily it lets you produce logos and other website elements. The answer is: very easily. Photoshop’s layers tool is still better than any other out there, and lets you layer text and images together quickly to create a very professional look.

Photoshopping.

Photoshop can make such impressive changes to images that a term for it has come about on the web: ‘Photoshopping’. Photoshopping is when you take an image and modify it using Photoshop so that it becomes a convincing, but fake, new image. The technique has gained fame from several incidents of fake images being spread across the web and even in the established media: Photoshop can produce output so real-looking that even experts have trouble spotting it.

Photoshop’s Big Drawback.

There’s not much argument, though, that Photoshop is extremely expensive: it costs well over $500. Worse, your $500 gets you a restrictive license that only lets you install the program on two computers (and the program ‘phones home’ to Adobe over the Internet to check). It’s well known that most of the people out there using it for smaller sites and projects are doing so illegally, simply because of the price. There are other problems with the latest versions, though, notably the fact that they run slowly unless you have a very good computer – plenty of people have ended up adding more RAM to their PCs just to make Photoshop run the way it should, despite the fact that relatively few features are added between versions.

Photoshop Elements.

If you’d be interested in a slimmed-down, cheaper version of Photoshop that has everything except the professional print output capabilities, you should take a look at Photoshop Elements. For about $100, it’s more than good enough to compete with the likes of Paint Shop Pro – Photoshop Elements is the program I use, and I really couldn’t be happier with it. There will, of course, be situations where even $100 is a lot to spend, but it’s still well worth consideration.

You can download free trials of both Photoshop and Photoshop Elements from http://www.adobe.com/products/tryadobe/.

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 2 comments }

Google Talk

by Jeff on September 13, 2005

I just heard about the new Google Talk service from Google which allows you to talk over your computer to friends/family/clients. I heard an example Chris Pirillo demonstrated on his podcast and I couldn’t believe the quality of the sound. Google states “Talk through your computer but hear your friends as if they were in the same room” and they are right. If you have ever used Skype you will hear the difference immediately. I suggest giving Google Talk a go, but you do need a Gmail account prior to signing up. Google Talk is in beta and requires a Gmail username and password. Don’t have Gmail? Get an account using your mobile phone (US only).

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

Design for Reeswear.com

by Jeff on August 17, 2005

I am currently working on a new site for a clothing designer. The site is pretty simple right now with your basic design. I wanted it to be simple and clear. The site will focus on the clothes and display new pieces as they are designed. The clothing page includes an Ebay listing feature which lists the current auctions on Ebay. It will also feature details on specific items. The clothing is hand made and can be described as somewhat gothic/punk/pirate etc. Check it out at Reeswear.com

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

Flash MP3 player for your site

by Jeff on August 4, 2005

I found a great flash mp3 player that anyone can easily install on their site. It works with php, asp and coldfusion driven sites. I believe it only plays mp3’s but it does it pretty fast and streams them very nicely. I thought of some very good uses for this player other then just streaming music. You could also use it to stream sales presentations or other info. I am currently using the main mp3 player but they also offer a video player and a smaller flash mp3 player that plays only 1 mp3 and is contained in a very small, attractive button. The small button player could be used on pages where an extra audio presentation could be usefull. I’ve seen sites with a player to “listen to so-and-so’s audio introduction” and this player would be perfect for such a thing. I’ve installed the player on Ornament Sounds so you can see it in action. The audio is stuff I’ve made recently and is mostly for fun. There are many skins for the mp3 player you can freely download also. So.. if you are a musician or run a site where audio presentations are important the Wimpy flash mp3 player is perfect for you. Don’t ask me why it’s called Wimpy.

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 1 comment }

Back in Norway

by Jeff on July 5, 2005

I just got back to Norway last week and have been busy enjoying the sun here. It is amazingly warm now and so it’s hard to stay inside and work. I have been able to get a little bit done. I’m working on two sites at the moment, doing a bit of redesign on one and a totally new design on another. I’ll be putting both sites in a portfolio section when I build one :) Otherwise hope everyone had a nice Fourth of July in the states. I’m off to the beach…

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }

Convert Excel Spreadsheets to MySQL

by Jeff on June 13, 2005

I accidently stumbled upon iDevX2My v1.0 from iDevDirect.com which allows you to convert excel spreadsheets to MySQL. If you use spreadsheets or text file databases for any reason and want to import that information into a MySQL database then you should check out this software. Once your information is in a MySQL database you can create dynamic web pages for your site. Then to update those pages all you need to do is update your MySQL database using this software. If you use datafeeds for any reason and want to create dynamic sites from those databases this software should work nicely. iDevDirect also offers some other software that is really affordable for managing banner ads, running an affiliate program etc. Check them out at iDevDirect

If you enjoyed this post, make sure you subscribe to my RSS feed!

{ 0 comments }