Tagged with "design" https://www.addedbytes.com/feeds/tag-feed/ en Web Development in Brighton - Added Bytes 2006 120 Text Readability Scores https://www.addedbytes.com/blog/code/readability-score/ This tool has moved! It's now on its own domain, at Readability-Score.com. (It's also had a small makeover and is now full of speedy AJAXy goodness.)

The code that powers the tool is still available on GitHub.



]]>
Wed, 07 Jul 2004 15:14:59 +0100 https://www.addedbytes.com/blog/code/readability-score/ Dave Child ,,,,,,,,,,
Ten Ways To Improve Your Website Conversion Rate https://www.addedbytes.com/articles/online-marketing/ten-ways-to-improve-your-website-conversion-rate/ What is a Conversion Rate?

Your conversion rate is a measure of the number of potential customers that go on to buy. In the context of a website, it is usually the percentage of visitors that make a purchase. Many websites concentrate solely on increasing the number of visitors they have, when often they have fairly simple problems with their site that, if solved, would have a huge effect on their conversion rate and improve their site's bottom line at minimal expense.

Improving a website conversion rate can be relatively simple. Here are 10 techniques for doing just that:

10. Make The User's Life Easy

Let's start with something that sounds simple, but apparently is too complex for many companies to get right. The more difficult you make your web site to use, the less people will buy from you.

A well designed website should aim to prevent nobody from buying - to allow 100% of the people who want to buy to do so. So where do they go wrong?

  • Accessibility
    Making a site accessible is a legal obligation in many countries. Despite that, inaccessible websites are still being created. That can affect your sales, depending on how inaccessible you are, as visitors find the site impossible to use and go elsewhere (and end up recommending one of your competitors to their friends as well). A fairly typical inaccessible site could be losing 5% of potential sales because of this. (A really inaccessible website could even prevent search engines indexing it, giving a far higher amount of potential lost sales.)  
  • Browsers
    Many designers only pay attention to Internet Explorer. The justification for this is usually that 99% of the site's users use IE. It never seems to occur to the designers that perhaps the reason they have so few visitors with other browsers is that their site is fundamentally broken - it doesn't work in anything else. Percentages of people not using IE varies from site to site - over 60% of visitors to this site use an alternative browser, for example. The number most often quoted though, is that 80-85% of web users are using IE on Windows, which means that an average site that doesn't work in anything else could easily be losing 15-20% of sales.  
  • Be Bold!
    What happens when a user decides to buy a product? They add it to a shopping basket. How do they add it? They click a button or link (usually a button). What happens when they can't see the button? They go elsewhere. There are some users who are still uncomfortable scrolling. Having things above the fold is still important. And yet there are still plenty of sites out there with buttons that are too subtle, or don't say the right thing, or are hidden away at the bottom of the page. "Add" is rubbish button text. "Buy" is ok. "Add xxx To Your Basket" is great. "Add xxx to Your Basket" in big letters on a big, bright button, near the top of the page, is even better. Calls to action, like this, don't have to be gaudy or tasteless, but they do have to be obvious and clear. Sites I have worked on where just the call to action was changed have reported anything from a 1% to 30% increase in sales as a result.  
  • Usability
    If your potential customers want to find out more before they buy, can they? Is it obvious to the user where to go to find the technical specs on your products? Are they online at all? Are they in PDF format? Can users even find your products in the first place? This is probably the most common mistake I see on any website - a complete failure to think of what the user wants and needs, and how they might use a site. Plenty of sites have product pages with a photo and some sales patter - and nothing else. Anything from 1% to 99% of potential sales can be lost through poor usability.

When you combine all of the problems above, it becomes fairly clear how easy it is to have a site perform poorly. Make your site accessible, make sure it is usable, make sure it works in common browsers, and make your calls to action clear and unambiguous, and you should be in a position to start converting the people who want to buy.

9. Be Clear, Open and Honest

If you have a product out of stock, say so. Few things annoy users as much as reading all about a product they are after, adding it to a cart, and starting the checkout process - only to find out the product isn't actually available.

The same applies to pricing - a user might spend $100 on a product, but when they find out the shipping is $100 on top of that, they are unlikely to continue the sale. Showing delivery pricing is tricky business, but not impossible. An Ip to Country database will allow you to work out where a user is from and show them a likely delivery cost, for example. If you can't do that, show delivery prices for the countries most appropriate to you - where your products are most often delivered, or for major world regions.

8. Don't Waste Time

One of the biggest mistakes sites make is asking for too much information. Your conversion process may be sale, or it may be a request for information. Either way, don't waste the user's time asking for things you don't need to know. This is, of course, doubly important when it comes to asking for information the user deems private, and that they don't want to give out without good reason.

You don't need to demand the user's email address before letting them download a PDF. You don't need their phone number when they fill out an email enquiry form. A user may not want to buy from you twice - so why make them create an account so they can buy again later before processing their first order? You can give the user the option to do all of these things by all means, but make sure it's not compulsory.

7. Help The User Trust You

Most people are still cautious when buying online, and rightly so. There are plenty of people you really shouldn't give your credit card information to! It's important to give the potential customer every reason to trust you.

An address - bricks and mortar, not a P.O. Box - is a good start. A phone number, with people answering the phone, also helps. Showing a privacy policy and explaining shipping procedures clearly can also help the user to trust you. If you have a SSL certificate, show the "VeriSign Secured" logo to the user.

Design and content also play a part in trust. A poor design gives off an unprofessional feeling. If a company can't afford a decent website, or won't spend the money on it, how can a user be sure their order will be treated with the importance it deserves? If content is inaccurate or badly written, the same applies - show that you take pride in what you do.

6. Have a Clear Returns Policy

Returns on the web are, and are likely to remain, a major issue for consumers. With a bricks and mortar shop, the customer knows where the shop is and that to return the product they simply have to go back there and explain the problem. With the web, this is more of an issue. This is especially true for clothing (where people cannot try things on before buying).

Users are impressed with sites with a good returns policy and are more likely to buy from them. Have people phone for returns - they can then explain the problem to a real person, which is always a good first step. Free return shipping is usually a good option, if commercially viable. People don't like to pay to return things, especially if it is a mistake by the retailer. Finally, give the user plenty of time to return things. 28 days is fairly common, but if it takes you that long to deliver a product, what use is the return policy? 28 days from the date of delivery is better.

5. Keep the User Informed

When somebody buys something online, they want to know when it's going to arrive at their door. People are impatient, after all. Giving them an estimated delivery date during the checkout process is a good start. Emailing them when their product is dispatched is great. Giving them a tracking number if using a delivery service that supports online tracking is even better. Keep the user informed at every step of the process, before and after sale, about as much as you can.

How will this improve your conversion rate? Leaving the customer happy once they have made a sale means they are more likely to speak favourably about you later. They may even recommend you to their friends and within online communities. They are also far more likely to buy from you again.

Think about it like this - if a salesman is doing their absolute best to help you, and to make your life easy, and answering your questions, you might buy what they were selling. If they completely ignored you after you'd bought from them, how would you feel about them? They might well have undone all the good work they put in, because once you'd completed your purchase they see no immediate value in you. A company that shows it cares about their customers, even after they've finished shopping, will make a user far happier and far more likely to return.

4. Offer Different Payment Options

It might sound obvious, but you should offer the user a reasonable selection of methods of payment. Not everybody has a credit card, and those that do don't always want to use them. You don't have to accept cheques, but when deciding on payment methods, consider alternatives to the usual methods. Make the user's life easy and give them what they want.

3. Improve the Value of Visitors

People that buy from you are doing so because they like what it is they see. If a user adds a product to a basket, show them other things they might like as well. If they are viewing a product, the same applies - show them similar items. While they might not buy the product they first saw, other similar ones may not have issues that put them off the first. Upselling and cross-selling are tried and tested sales techniques, and there is no reason not to use them on the web.

2. Be Memorable

A good site will include information. A poor one is just an online catalogue. Information (articles, advice, reviews and so on) all help the user early in their buying process. Users start with research online, just as they do offline. If you can make contact with the user at that stage of their process, and give a favourable impression, there is a good chance that they will come back and buy from you when they finally decide to make a purchase.

Being memorable, and making sure you stick in the user's mind, is dependant on a lot of factors. You must have a USP (see the next point), and branding is important (no good if your visitors remember why you are great but don't remember your name), as well as the quality of your site and information.

1. Know Your USP

Finally, the most important point of all - your Unique Selling Point (USP). Your USP is what sets you apart from your competition. If a visitor goes to several sites looking for a product, why would they decide to buy from you instead of somewhere else?

Many companies do not know their USP. Almost all companies have one, but not all of them are aware of it. If you are a family run business, that's a potential USP. Great customer service, low prices, products that can't be bought elsewhere, free delivery, great support - all of these are USPs. Tell your users what yours is. Shout it from the proverbial rooftops.

Part 2

In March 2009, part 2 of this series was added: Nine More Tips for Improving Your Website Conversion Rate.

Bonus!

One excellent (and practical) way to increase your website conversion rate is to add consumer reviews to your store. They are a proven way to increase sales, and they have an excellent positive effect on your search engine optimisation work. A service like FeedbackFair will give your reviews extra credibility.



]]>
Mon, 12 Jun 2006 13:00:04 +0100 https://www.addedbytes.com/articles/online-marketing/ten-ways-to-improve-your-website-conversion-rate/ Dave Child ,,,,,,,,,,,,
Preload Images with CSS https://www.addedbytes.com/blog/code/preloading-images-with-css/ As support for CSS improves, pseudo-selectors like :hover, :active and :focus will become more widely used. Already :hover is in use on many sites to provide rollover states to buttons, as on this site (the menu bar). The other pseudo selectors will, in time, give far more opportunities for the use of rollover images.

One potential problem with image rollovers, though, is that in order for an image to be displayed, it must be downloaded. Consequently, for rollovers to work smoothly and quickly, all the necessary images must be already available on the user's PC. Otherwise, the rollovers will behave badly, like in this example using large images.

Until recently, rollover effects were achieved through use of JavaScript, and as a result, a plethora of solutions to the preloading image problem in JavaScript are available. However, using JavaScript to preload images, though not a bad idea when using JavaScript to control rollovers, becomes less bright when it is CSS that's controlling them. A user could very easily (and this is becoming more common) have a CSS-capable browser without JavaScript support or with JavaScript turned off.

So there's a clear need for a way to use CSS to preload images or find another way to avoid the problem. Which gives us two relatively simple solutions to our problem.

The first solution is to create a single background image for your element that actually contains both the rollover and non-rollover images, and then position is using the background-position CSS property. Instead of changing the image when the mouse moves over the element, you can simply change the background-position to reveal the previously hidden rollover image. There's a more detailed explanation of this technique over at WellStyled.com.

The other option available to you is to trick the browser into downloading the image before it is required for the rollover. This can be done by applying the image as a background to an element, and then hiding it using the background-position property. The image will then be downloaded but will not be displayed. Then, when the rollover is activated, it will operate smoothly and instantly.

First, you need to select an element that doesn't currently have a background image. If so select an element that does have a background image, you will either end up not preloading the image you are after, or you will prevent the element's normal background displaying. Neither is ideal.

Once you have picked an element to use for this purpose, you need to add the background image. The following CSS can be applied to the element and will place the background image outside the viewable area of the image:

background-image: url("rollover_image.png"); background-repeat: no-repeat; background-position: -1000px -1000px;

Your rollover image will then be loaded when the page itself is initially loaded, along with the other images. When a rollover is then activated, the image will already be available to the browser and the effect will be instant.



]]>
Thu, 23 Dec 2004 10:13:43 +0000 https://www.addedbytes.com/blog/code/preloading-images-with-css/ Dave Child ,,,,,,,,,,
View Page Structure https://www.addedbytes.com/blog/code/view-page-structure/ A couple of days ago, I was having a little CSS trouble. In the end, it turned out that I had set a property of an element "above" in the document tree, and the problematic element was inheriting that property.

It struck me that it would be easier to work through this kind of CSS problem with some kind of simple tool to show how a page was put together. If I could see all the tags on the page in a nested format, with parent and child relationships obvious, and without all the text getting in the way, my life would be easier.

So, I put together this tool. In simple terms, it will fetch a page from a web server and output the tags within the page in a nested list. The JavaScript side of it will also highlight children of an element when you hover over it.

Classes and ids attributes are highlighted, as are tag names. Class and ID names, though, must be enclosed in quotation marks to be highlighted. Text, closing tags and line breaks are not shown. Though I can understand some people may find it useful to see text, I found it made the tree too large to be usable.

I've used it a few times, and am quickly finding it saves quite a lot of time solving simple CSS problems or conflicts. Which is exactly what it was supposed to do. Enjoy!

Highlighting Issues

When writing the tool, I came across a fairly unusual problem. I wanted, when the mouse was over an element, to highlight its children. However, this cannot be done with CSS (at least, I couldn't think of a way to make it work).

The problem with the CSS was that whenever you hover over an element, you are also hovering over its parents. So they, and their children, are highlighted - meaning everything is highlighted. For this reason, the highlighting of elements uses JavaScript.

How to Use

The page structure tool is written to accept a URL either by GET or POST. You can therefore use it one of two ways.

First, you can use the tool by visiting the URL below, replacing "##url##" with the address of the page you want to view:

http://www.addedbytes.com/view_structure.php?url=##url##

Alternatively, you can use the following form to submit an address to the page:

Bookmarklet

To make life a little easier, I've coded a quick JavaScript bookmarklet for you to use, that, when activated, will automatically submit the URL of the page you are viewing to the tool. Simply copy or drag the link below to your links bar, your favourites folder or anywhere else you wish:

Notes

  • This tool works best with valid code, especially XHTML.
  • A certain amount of basic code improvement is done before processing (for example all empty tags are automatically closed).
  • Sites with non-empty tags that aren't closed properly may not show up correctly.
  • Sites with large amounts of nested code should still show up, but it may be difficult to view the output.

Example

If you want to see an example of the output of this tool, you can view the structure for AddedBytes.com.



]]>
Tue, 12 Oct 2004 16:24:00 +0100 https://www.addedbytes.com/blog/code/view-page-structure/ Dave Child ,,,,,,,,,,
The Box Model For Beginners https://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/ The term "box model" is often used by people when talking about CSS-based layouts and design. Not everyone understands what is meant by this though, and not everyone understands why it is so important.

Any HTML element can be considered a box, and so the box model applies to all HTML (and XHTML) elements.

The box model is the specification that defines how a box and its attributes relate to each other. In its simplest form, the box model tells browsers that a box defined as having width 100 pixels and height 50 pixels should be drawn 100 pixels wide and 50 pixels tall.

There is more you can add to a box, though, like padding, margins, borders, etc. This image should help explain what I'm about to run through:

Outline of box model

As you can see, a box is made up of four distinct parts. The outside one, the margin, is completely invisible. It has no background color, and will not obstruct elements behind it. The margin is outside the second part, which is the border. The border outlines the visible portion of the element. Inside the border is the third part of the box, the padding, and then inside that the content area of the box. The padding defines the space between the content area of the box and the border.

(Note that in the image above, the only border of the three drawn that would actually be visible is the solid line - the dashed lines are added to help demonstrate the box model).

When you define a width and a height for your box using CSS, you are defining not the entire area taken up by the content, padding, border and margin. You are actually just defining the content area itself - the bit right in the middle. The padding, border and margin must be added to that in order to calculate the total space occupied by the box. (From this point on, we will use width for demonstrations, but the same principles apply to both width and height).

box { width: 200px; border: 10px solid #99c; padding: 20px; margin: 20px; }

The above CSS, applied to a box, would mean that that box occupied 300 pixels of space horizontally on the page. The content of the box would occupy 200 pixels of that (dashed line added to demonstrate the edge of the area occupied by the box):

Box model demonstration.

In the above image, you can see that the pale blue area is 240 pixels wide (200 pixels of content plus 20 pixels padding either side). The border is 10 pixels wide either side, making the total width including the border 260 pixels. The margin is 20 pixels either side, making the total width of the box 300 pixels.

In practice, this can cause some confusion. For example, if I have a 100 pixel wide space available, and want to fill it with a pale red box with a dark red border and a small amount of padding, it would be very easy to write the CSS like so:

box { width: 100px; border: 1px solid #900; padding: 10px; margin: 0; background: #fee; }

(A declaration of 0, as used for the margin above, does not require a unit to be added. Any value other than 0 does require a unit, e.g. px for pixels. Also, although "background" is defined as a shorthand property, it is more widely supported than the more correct "background-color".)

However, that will not give us a 100 pixel wide box, as the width declaration defines the content area of the box. The content area of the box will be 100 pixels - the total width of the box as defined above will be 122 pixels:

Box model demonstration.

In order to set the above box to only occupy 100 pixels horizontally, you would need to set the width of the content area to be 100 pixels minus the padding and minus the border, in this case 78 pixels, like so:

box { width: 78px; border: 1px solid #900; padding: 10px; margin: 0; background: #fee; }

To calculate the overall width of a box, including all padding, borders and margins, you would use the following formula:

total box width = content area width + left padding + right padding + left border + right border + left margin + right margin

Compatibility

At this point, you should now have a good understanding of what the box model is, and how boxes should be treated by different browsers. However, as you will soon learn (if you did not know already), not every browser does as it is supposed to. In order to use boxes, and by extension make the most of CSS in your website, you will need to be aware of how the different browsers treat boxes in practice and how to overcome and work around the problems presented by these idiosyncrasies.

Top Notch

Opera 6 Opera 7 Mozilla Firefox Camino Safari Konqueror Netscape 6 Netscape 7 Internet Explorer 6

Most browsers released in the last few years have no problem with boxes and render boxes correctly. Opera 6 and 7, Mozilla 1 (and by extension other browsers based on the Gecko engine like Netscape 7, Camino and Firefox and other derivatives), Safari, Konquerer (and derivatives) and Internet Explorer 5 for the Mac are all shining examples of how a web browser should behave, all rendering boxes flawlessly. IE 6 for Windows also will render a box correctly, as long as the [url=http://www.addedbytes.com/design/dtds-explained]Document Type Definition[/url] for the page is correct.

Whoops, Mrs Miggins, You're Sitting On My Artichokes

Internet Explorer 5 Internet Explorer 6

Some browsers don't display a box correctly. Unlike those below here, these browsers are widely enough used on the web that it is usually worth the effort to work through the problem. There are various methods for doing this, some better than others, that follow on. Most notable among the browsers with problems are Internet Explorers 4 and 5 and Internet Explorer 6. IE 6 is easy to work around, by adding a correct DTD (which you should be doing anyway).

Internet Explorer 5 is the main reason there is a box model problem at all. It, unfortunately, does not follow the simple definition for box layout as defined by the W3c. When you define a width for a box and it is rendered in IE5, instead of that width defining the content area of the box, it includes the borders and padding. Margins are added on to the content width correctly, but padding and borders are not. Unfortunately, this leaves us with some unpleasant choices:

  1. Use a box model hack
    Hack's like [url=http://www.tantek.com/CSS/Examples/boxmodelhack.html]Tantek's box model hack[/url] are unfortunately something of a necessity. While some might argue that using hacks like this is completely missing the point of using CSS for web design, commercial necessity and the prevalence of IE5 leave us with little in the way of choice. The IE5 box model hack is in use all over the web and has spawned plenty of variants.
  2. Add in extra code
    Some might consider this a slightly "better" way of working around this problem. Rather than adding a style sheet hack, you can nest elements within each other. Adding a div within another div means that rather than using padding, you can use just margins, which are handled correctly by IE5. As with the box model hack, it is far from a perfect solution, but there are few other options if you want a site to look the same in IE5 as other more capable browsers.

Hall of Shame

Internet Explorer 4 Netscape 4

On the one hand, the browsers that I am about to mention are appalling, all failing dismally to render a simple box correctly for one reason or another. On a more positive note, users of these browsers, mostly old versions of current browsers, make up an extremely small, and continually shrinking, portion of web users. While you could probably find a workaround for the bugs in the display of boxes in these browsers, it is almost certainly not worth the effort - you are likely to cause yourself more harm than good with workarounds for these!

Netscape 4's box model is awful, but even worse, the simple box model hacks to fix the problem for IE5 and IE6 will crash Netscape 4. Netscape 4's style sheet support is abysmal overall, and it is being supported less and less. Though it is strictly a personal choice, I don't think it is worth the time and effort to support Netscape 4 any more - it's just not used enough, and the number of users is only ever going to shrink.

Internet Explorer 4 suffers, basically, the same problem as IE5. It treats boxes in a very similar way. However, it falls over in far more ways, and many of the available hacks will crash IE4. As it is also used by few people, and that number is dropping, many designers ignore it.

What does the future hold?

CSS3 promises us the option to determine how we want the user agent to treat boxes, and specify which box model we want to use. Support for CSS3 at a level that will be possible is many many years away yet. Until then, we are stuck with the CSS2 box model, and while IE5 is still used by a significant percentage of the web's population, we are going to have problems with boxes.



]]>
Fri, 09 Jul 2004 11:48:54 +0100 https://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/ Dave Child ,,,,,,,,
28k and 56k Modem Emulator https://www.addedbytes.com/blog/code/modem-emulator/ PLEASE NOTE: This tool has been taken offline and the code has been released as an open source project: modem-emulator. There's some background on the change here.

Some designers have taken the rise of broadband to mean that graphic intensive pages are now acceptable, that 600k Flash intros are suddenly desirable, and that otherwise bombarding the user with bandwidth-hungry sites is commendable. Sadly, plenty of users are still on dial-up, using 28k, 33.6k or 56k modems, and it's all too easy to forget that when you're surfing on a high speed office connection or even your home broadband.

With that in mind, I've put together a modem emulator (or is it a modem simulator?) throughput throttling proxy (apparently). In theory it should allow you to view your site through the eyes of a user with a slower connection. In practice, it isn't perfect, but might give you an idea of how some of your users actually experience your site.

A word of warning as well - the tool is tested (though not extensively) with sites that I use or have built. There will be unusual sites that don't work with this tool (flash is so far untested for example). Please email me if you have any problems.

The emulator suffered a great deal of abuse in the past, mainly by people wanting to bypass work internet filters. Unfortunately, that has meant that I have had to add a few features to the tool. The primary change, for my own sanity, is a blacklist of URLs. I hope to not have to change this to a whitelist, but that option is available should the need arise.

To use it, simply enter your URL and the speed you'd like to see the site go, and the script will show you the page desired loading as it would on a slower connection.

The tool has been taken offline, and the code has been released under an open source license. There's some background on the change here.

Finally, someone is bound to ask, so to save myself the time answering later - no, this cannot show you how your site will load on a faster connection than you have yourself :).

Update 29 December 2006

The emulator has been tentatively reinstated with some features to enable me to manage it.



]]>
Tue, 29 Jun 2004 01:12:00 +0100 https://www.addedbytes.com/blog/code/modem-emulator/ Dave Child ,,,,,,,,,,
Faux Columns for Liquid Layouts https://www.addedbytes.com/blog/code/faux-columns-for-liquid-layouts/ In January of 2004, Dan Cederholm (author of Web Standards Solutions) posted an article on AListApart entitled "Faux Columns". In it, he explained how designers can overcome a common problem in CSS-based designs.

The problem is one that usually rears its ugly head with two and three column designs (though for now, we'll just worry about two columns). If your two columns each have a different background color, how do you make the colours extend to the bottom of the page using css? Equal height columns are difficult to achieve using height and overflow properties. Each column will be of a different height, and you do not always know which is the taller of the two. It is all too easy to end up with a site where one column just doesn't extend all the way to the bottom of the page, where it should end.

CSS does actually include a rather nifty little tool that can be used to work around this problem, the "min-height" declaration, that allows you to specify a minimum height for an element - which you can use to ensure that one specific column is always larger than the other, allowing you to avoid this problem. Unfortunately (and perhaps unsurprisingly) Internet Explorer does not support this declaration, so in practice it isn't a useful solution to the problem.

Dan, in his article (which if you haven't read yet, I suggest you do before continuing), outlines a solution he uses on his own site. This solution involves tiling a background on the page, to give the appearance that there are distinct columns that extend the full length of the page. It's a simple but clever solution, and can be seen in use on a great many sites on the web.

During the recent redesign of this site, though, I came across a small problem. Though Dan's solution is perfect for fixed-width layouts, it just wouldn't work with a percentage-based, liquid layout. The problem was simple - a graphic cannot alter itself based upon the user's screen. If you come up with a background image like the below, and tile it on a page, the left hand column will need to be 200 pixels wide. If your column is 20% of the page, though, that could make it anything from 20 to 2000 pixels - and as a result your columns will rarely look as you intended. This makes equal height columns in liquid layouts a tricky proposal.

However, Dan's solution can be used to apply a background to a page when the layout is liquid, using background positioning.

Background positioning can allow us to give our background the appearance of being liquid. When you positioning a background using pixels, you position the top left corner of the image. When you position a background using percentages or keywords, you don't. Instead, you position a point within the image itself. For example, let's say we have a page and a simple background image. We use the following to set and position the background:

body { background-image: url("image.gif"); background-repeat: no-repeat; background-position: 25% 10%; }

The above will set "image.gif" as the background of the page. It will position the background 25% of the way across the page from the left, and 10% of the way down the page from the top. However, it is not the left hand corner that will appear at that point. It is the point 25% from the left hand side of the background image and 10% from the top that will appear at that point, like so:

Example of background positioning based upon percentages

We can use this to apply a background to a page that will give the illusion of a pair of columns, even though the columns are not of a fixed width. Let's say we have two columns (for now), of 25% and 75% width. We can create a simple image, 1 pixel tall by 2000 pixels wide (why so wide will become apparent shortly - but don't be afraid to go even larger if you wish - 4000 pixels wouldn't necessarily be a bad thing). We want the left column to be a nice shade of orange, and the right a nice shade of grey, with a black line to divide them. So the image needs to have a black line 25% of the way along, with everything to the left orange and everything to the right grey, like so (scaled for visibility):

Example of background image

Now, we position the background using the following CSS:

body { background-image: url("background.gif"); background-repeat: repeat-y; background-position: 25% 0; }

Now, if you were to draw a line down the page, 25% of the way across from the left hand side, then 25% of our background image would be to the left of that line and 75% to the right. If we use the 2000 pixel wide background mentioned earlier, and position it as above, we'll have an orange background for 25% of the page, a black line, then grey will fill the remaining 75% of the page. You can see an example of that here. If you resize your browser window, while viewing the example, you will see the columns expand and contract to maintain the same proportions of the columns. With a little imagination, and the use of partly transparent background images, you can create image borders between elements using the same technique.

A little markup and a little more CSS, and we can turn the above into a respectable liquid page, with columns that expand and contract with the users' windows, and always extend just as far as they are needed. A more complete example is here, and this technique is also in use at this very site [please note that this technique is in use in versions 3, 4 and 5 of this site, accessible through the footer], allowing the flexible navigation and content columns to always appear equal in length, despite the fact they almost never are.



]]>
Tue, 22 Jun 2004 17:31:13 +0100 https://www.addedbytes.com/blog/code/faux-columns-for-liquid-layouts/ Dave Child ,,,,,,,,,,,
Printer Friendly Pages for Beginners https://www.addedbytes.com/articles/for-beginners/printer-friendly-pages/ CSS is a great new tool for web designers. Now it is more widely supported, and browser-makers are sticking to the W3C standards, we can begin to explore the possibilities it has offered us since the 90s but that we could not make use of.

CSS allows you to seperate your design from your markup, making maintenance infinitely easier, and your site more likely to work in different devices, both of which are definite pluses. It also, however, allows you to tell a page to display a different way depending upon what device is being used to render it.

This is achieved using the "media" attribute of the "<link>" or "<style>" tags, like so:

<link media="screen" href="style.css" type="text/css"> <style media="screen" type="text/css">

There are several media types available to you - [i]all, aural, braille, handheld, print, projection, screen, tty, tv[/i] - and a [url=http://www.w3.org/TR/1998/PR-CSS2-19980324/media.html#media-types]list of available media types with more detail[/url] is available from W3C (where you can find out more about media groups, as well).

With such a range of options, you can, if you like, create one HTML document that will display exactly as you like depending entirely upon which device is being used to view it. You can hide large images from PDAs, you can specify seperate font styling for overhead projectors - you can write your site so that it works well with the technology at the user's disposal. And one very useful side effect of this is that you can specify an entire print style without the need for copies of every page of your content, like the following, that will use the "normal.css" style sheet for screens, and the "printer.css" style sheet when printing.

<link media="screen" href="normal.css" type="text/css"> <link media="print" href="printer.css" type="text/css">

For print styling, there are a lot of factors to consider. Are many users going to want to print out your header? No. But do you want your logo on the page? Yes. Is the navigation worth printing? No. Each item on a web page serves a purpose, and on paper, that may not be worth much.

It is best, then, to start at the beginning. With an unstyled HTML document. Pick a page to start working on, and remove all styles from it. With an unformatted page in front of you, it should be pretty easy to see what needs styling and how, but don't rush in. There's a lot to think about.

Fonts

Fonts are very different on the web to print. Sans-serif fonts are, allegedly, the best to use on the web. Serif fonts are, apparently, better on paper. So first things first, set your font to a serif font you like (personally, I like Georgia for Windows). As with picking all fonts, make sure you provide alternatives for those without the first-choice font.

Font sizing is a bit different on paper too. It's usually best just to leave this to the default, but if you want to specify a font, make sure you run plenty of tests to make sure it's easily legible.

* { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12pt; }

Links

Links are not going to be a lot of use on paper, by their very nature. But that does not make them useless.

a { color:#000000; text-decoration: underline; } a:after { content: " ( "attr(href)" )"; }

The above, if added to a printer style sheet, will make all links black and underlined, and add the address of the link in brackets afterwards, meaning that if a user did want to visit any site linked to from that page at a later date, they can.

Spacing

In print, margins and spacings are as important as with the web. There is no harm in adding in a little space between words and lines, and a decent gap around the edges, if it will make a print-version easier to read.

body { padding: 10%; line-height: 1.2; word-spacing: 1px; }

Hide Useless Stuff

You can hide elements in this style sheet easily enough, using display none. This will save some space on the paper, and reduce useless junk on the page, something the user will be very grateful for. Elements worth hiding are usually form elements, some images, marquees, and flash content. If you are unsure, print the page and then work through that page deciding what is useful and what is not.

.navigation { display: none; }

Colours

Print colours will show up very differently to screen colours, especially as a high proportion still have black and white printers. Even those who don't will be grateful to you if you keep the proportion of colour to a minimum, simply because of the expense.

Highlight and emphasize things using italics, underlining, boldness and size in your print style sheet. Remove all references to colours where you can, save to set colours to black.

Page Address

You may want to add the address of the page itself to the page, and hide it, except when the page is printed, so that the user can return to your page later if they wish.

Tell the User

A user may see a page without a "printer friendly" link and print anyway, but they may be put off. Try and add a note to your page explaining that the page they are now viewing is printer friendly, and encouraging them to print it.

Finally

Do plenty of testing and reading. The print industry has been around a very very long time, and there are plenty of resources around for you to research what makes a document easy to read on paper as opposed to screen - make use of them. The more you test, too, the more likely you will be to notice small flaws in the print version of your site, in the same way that looking at your site during the design process highlights tiny imperfections that make all the difference once fixed.

Wish these simple measures, you should now be able to create an alternative version of your entire site, that will be invisible to the user until they actually print a page. They do not need to do anything bar click the print button.



]]>
Mon, 15 Mar 2004 18:30:00 +0000 https://www.addedbytes.com/articles/for-beginners/printer-friendly-pages/ Dave Child ,,,,,,
US States Select Box https://www.addedbytes.com/blog/code/us-states-select-box/ This states select list was last updated on the 15th March 2004, and should be accurate for that date (and I should imagine, far beyond). If you spot any inaccuracies, please let me know.

This list is provided for you to use as you see fit, but please do not reproduce it elsewhere without creditting this site.

The list comes in two versions. The first is a list without the two-letter codes for each state, the second with the two letter codes.

Without State Abbreviation Codes

<select name="state"> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <option>California</option> <option>Colorado</option> <option>Connecticut</option> <option>Delaware</option> <option>Florida</option> <option>Georgia</option> <option>Hawaii</option> <option>Idaho</option> <option>Illinois</option> <option>Indiana</option> <option>Iowa</option> <option>Kansas</option> <option>Kentucky</option> <option>Louisiana</option> <option>Maine</option> <option>Maryland</option> <option>Massachusetts</option> <option>Michigan</option> <option>Minnesota</option> <option>Mississippi</option> <option>Missouri</option> <option>Montana</option> <option>Nebraska</option> <option>Nevada</option> <option>New Hampshire</option> <option>New Jersey</option> <option>New Mexico</option> <option>New York</option> <option>North Carolina</option> <option>North Dakota</option> <option>Ohio</option> <option>Oklahoma</option> <option>Oregon</option> <option>Pennsylvania</option> <option>Rhode Island</option> <option>South Carolina</option> <option>South Dakota</option> <option>Tennessee</option> <option>Texas</option> <option>Utah</option> <option>Vermont</option> <option>Virginia</option> <option>Washington</option> <option>West Virginia</option> <option>Wisconsin</option> <option>Wyoming</option> </select>

With State Abbreviation Codes

<select name="state"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select>

This list was compiled from a variety of sources, both online and offline, and no guarantee is made as to its accuracy. Please report any mistakes to dave@addedbytes.com.



]]>
Sat, 14 Feb 2004 14:14:00 +0000 https://www.addedbytes.com/blog/code/us-states-select-box/ Dave Child ,,,,,,,,,,
Countries Select Box https://www.addedbytes.com/blog/code/countries-select-box/ This countries select list was last updated on the 24th October 2003, and should be accurate for that date. If you spot any inaccuracies, please let me know.

I use these things so often it's scary, and I dread the thought of ever having to compile another from scratch - so here you go. This list is provided for you to use as you see fit, but please do not reproduce it elsewhere without creditting this site.

Update, April 2008: A very kind chap by the name of David Hunter has put together a French version of this list, which is below the English version.

English

<select name="country"> <option>Afghanistan</option> <option>Albania</option> <option>Algeria</option> <option>American Samoa</option> <option>Andorra</option> <option>Angola</option> <option>Anguilla</option> <option>Antarctica</option> <option>Antigua and Barbuda</option> <option>Argentina</option> <option>Armenia</option> <option>Aruba</option> <option>Australia</option> <option>Austria</option> <option>Azerbaijan</option> <option>Bahamas</option> <option>Bahrain</option> <option>Bangladesh</option> <option>Barbados</option> <option>Belarus</option> <option>Belgium</option> <option>Belize</option> <option>Benin</option> <option>Bermuda</option> <option>Bhutan</option> <option>Bolivia</option> <option>Bosnia and Herzegovina</option> <option>Botswana</option> <option>Bouvet Island</option> <option>Brazil</option> <option>British Indian Ocean Territory</option> <option>Brunei Darussalam</option> <option>Bulgaria</option> <option>Burkina Faso</option> <option>Burundi</option> <option>Cambodia</option> <option>Cameroon</option> <option>Canada</option> <option>Cape Verde</option> <option>Cayman Islands</option> <option>Central African Republic</option> <option>Chad</option> <option>Chile</option> <option>China</option> <option>Christmas Island</option> <option>Cocos Islands</option> <option>Colombia</option> <option>Comoros</option> <option>Congo</option> <option>Congo, Democratic Republic of the</option> <option>Cook Islands</option> <option>Costa Rica</option> <option>Cote d'Ivoire</option> <option>Croatia</option> <option>Cuba</option> <option>Cyprus</option> <option>Czech Republic</option> <option>Denmark</option> <option>Djibouti</option> <option>Dominica</option> <option>Dominican Republic</option> <option>Ecuador</option> <option>Egypt</option> <option>El Salvador</option> <option>Equatorial Guinea</option> <option>Eritrea</option> <option>Estonia</option> <option>Ethiopia</option> <option>Falkland Islands</option> <option>Faroe Islands</option> <option>Fiji</option> <option>Finland</option> <option>France</option> <option>French Guiana</option> <option>French Polynesia</option> <option>Gabon</option> <option>Gambia</option> <option>Georgia</option> <option>Germany</option> <option>Ghana</option> <option>Gibraltar</option> <option>Greece</option> <option>Greenland</option> <option>Grenada</option> <option>Guadeloupe</option> <option>Guam</option> <option>Guatemala</option> <option>Guinea</option> <option>Guinea-Bissau</option> <option>Guyana</option> <option>Haiti</option> <option>Heard Island and McDonald Islands</option> <option>Honduras</option> <option>Hong Kong</option> <option>Hungary</option> <option>Iceland</option> <option>India</option> <option>Indonesia</option> <option>Iran</option> <option>Iraq</option> <option>Ireland</option> <option>Israel</option> <option>Italy</option> <option>Jamaica</option> <option>Japan</option> <option>Jordan</option> <option>Kazakhstan</option> <option>Kenya</option> <option>Kiribati</option> <option>Kuwait</option> <option>Kyrgyzstan</option> <option>Laos</option> <option>Latvia</option> <option>Lebanon</option> <option>Lesotho</option> <option>Liberia</option> <option>Libya</option> <option>Liechtenstein</option> <option>Lithuania</option> <option>Luxembourg</option> <option>Macao</option> <option>Madagascar</option> <option>Malawi</option> <option>Malaysia</option> <option>Maldives</option> <option>Mali</option> <option>Malta</option> <option>Marshall Islands</option> <option>Martinique</option> <option>Mauritania</option> <option>Mauritius</option> <option>Mayotte</option> <option>Mexico</option> <option>Micronesia</option> <option>Moldova</option> <option>Monaco</option> <option>Mongolia</option> <option>Montenegro</option> <option>Montserrat</option> <option>Morocco</option> <option>Mozambique</option> <option>Myanmar</option> <option>Namibia</option> <option>Nauru</option> <option>Nepal</option> <option>Netherlands</option> <option>Netherlands Antilles</option> <option>New Caledonia</option> <option>New Zealand</option> <option>Nicaragua</option> <option>Niger</option> <option>Nigeria</option> <option>Norfolk Island</option> <option>North Korea</option> <option>Norway</option> <option>Oman</option> <option>Pakistan</option> <option>Palau</option> <option>Palestinian Territory</option> <option>Panama</option> <option>Papua New Guinea</option> <option>Paraguay</option> <option>Peru</option> <option>Philippines</option> <option>Pitcairn</option> <option>Poland</option> <option>Portugal</option> <option>Puerto Rico</option> <option>Qatar</option> <option>Romania</option> <option>Russian Federation</option> <option>Rwanda</option> <option>Saint Helena</option> <option>Saint Kitts and Nevis</option> <option>Saint Lucia</option> <option>Saint Pierre and Miquelon</option> <option>Saint Vincent and the Grenadines</option> <option>Samoa</option> <option>San Marino</option> <option>Sao Tome and Principe</option> <option>Saudi Arabia</option> <option>Senegal</option> <option>Serbia</option> <option>Seychelles</option> <option>Sierra Leone</option> <option>Singapore</option> <option>Slovakia</option> <option>Slovenia</option> <option>Solomon Islands</option> <option>Somalia</option> <option>South Africa</option> <option>South Georgia</option> <option>South Korea</option> <option>Spain</option> <option>Sri Lanka</option> <option>Sudan</option> <option>Suriname</option> <option>Svalbard and Jan Mayen</option> <option>Swaziland</option> <option>Sweden</option> <option>Switzerland</option> <option>Syrian Arab Republic</option> <option>Taiwan</option> <option>Tajikistan</option> <option>Tanzania</option> <option>Thailand</option> <option>The Former Yugoslav Republic of Macedonia</option> <option>Timor-Leste</option> <option>Togo</option> <option>Tokelau</option> <option>Tonga</option> <option>Trinidad and Tobago</option> <option>Tunisia</option> <option>Turkey</option> <option>Turkmenistan</option> <option>Tuvalu</option> <option>Uganda</option> <option>Ukraine</option> <option>United Arab Emirates</option> <option>United Kingdom</option> <option>United States</option> <option>United States Minor Outlying Islands</option> <option>Uruguay</option> <option>Uzbekistan</option> <option>Vanuatu</option> <option>Vatican City</option> <option>Venezuela</option> <option>Vietnam</option> <option>Virgin Islands, British</option> <option>Virgin Islands, U.S.</option> <option>Wallis and Futuna</option> <option>Western Sahara</option> <option>Yemen</option> <option>Zambia</option> <option>Zimbabwe</option> </select>

French / Français

This select list also includes the WTO 2 letter country codes.

<select name="country"> <option value="AF">Afghanistan</option> <option value="ZA">Afrique du Sud</option> <option value="AL">Albanie</option> <option value="DZ">Algérie</option> <option value="DE">Allemagne</option> <option value="AD">Andorre</option> <option value="AO">Angola</option> <option value="AI">Anguilla</option> <option value="AG">Antigua et Barbuda</option> <option value="AN">Antilles néerlandaises</option> <option value="SA">Arabie saoudite</option> <option value="AR">Argentine</option> <option value="AM">Arménie</option> <option value="AW">Aruba</option> <option value="AU">Australie</option> <option value="AT">Autriche</option> <option value="AZ">Azerbaïdjan</option> <option value="BS">Bahamas</option> <option value="BH">Bahreïn</option> <option value="BD">Bangladesh</option> <option value="BB">Barbade</option> <option value="BE">Belgique</option> <option value="BM">Bermudes</option> <option value="BT">Bhoutan</option> <option value="BY">Biélorussie</option> <option value="BO">Bolivie</option> <option value="BA">Bosnie et Herzégovine</option> <option value="BW">Botswana</option> <option value="BN">Brunei Darussalam</option> <option value="BR">Brésil</option> <option value="BG">Bulgarie</option> <option value="BF">Burkina Faso</option> <option value="BI">Burundi</option> <option value="BZ">Bélize</option> <option value="BJ">Bénin</option> <option value="KH">Cambodge</option> <option value="CM">Cameroun</option> <option value="CA">Canada</option> <option value="CV">Cap-Vert</option> <option value="CF">Centrafrique</option> <option value="CL">Chili</option> <option value="CN">Chine</option> <option value="CY">Chypre</option> <option value="CO">Colombiae</option> <option value="KM">Comores</option> <option value="CG">Congo</option> <option value="KR">Corée du Nord</option> <option value="KP">Corée du Sud</option> <option value="CR">Costa Rica</option> <option value="HR">Croatie</option> <option value="CU">Cuba</option> <option value="CI">Côte d'Ivoire</option> <option value="DK">Danemark</option> <option value="DJ">Djibouti</option> <option value="DM">Dominique</option> <option value="SV">El Salvador</option> <option value="ES">Espagne</option> <option value="EE">Estonie</option> <option value="FJ">Fidji</option> <option value="FI">Finlande</option> <option value="FR">France</option> <option value="GA">Gabon</option> <option value="GM">Gambie</option> <option value="GH">Ghana</option> <option value="GI">Gibraltar</option> <option value="GD">Grenade</option> <option value="GL">Groënland</option> <option value="GR">Grèce</option> <option value="GP">Guadeloupe</option> <option value="GU">Guam</option> <option value="GT">Guatemala</option> <option value="GN">Guinée</option> <option value="GQ">Guinée équatoriale</option> <option value="GW">Guinée-Bissau</option> <option value="GY">Guyane</option> <option value="GF">Guyane française</option> <option value="GE">Géorgie</option> <option value="HT">Haïti</option> <option value="HN">Honduras</option> <option value="HK">Hong Kong</option> <option value="HU">Hongrie</option> <option value="BV">Ile Bouvet</option> <option value="CX">Ile Christmas</option> <option value="HM">Ile Heard et iles McDonald</option> <option value="MU">Ile Maurice</option> <option value="NF">Ile Norfolk</option> <option value="KY">Iles Cayman</option> <option value="CC">Iles Cocos (Keeling)</option> <option value="CK">Iles Cook</option> <option value="FK">Iles Falkland (Malouines)</option> <option value="FO">Iles Faroe</option> <option value="MH">Iles Marshall</option> <option value="MP">Iles Northern Mariana</option> <option value="SB">Iles Salomon</option> <option value="VG">Iles Vierges, G.B.</option> <option value="VI">Iles Vierges, É.U.</option> <option value="IN">Inde</option> <option value="ID">Indonésie</option> <option value="IQ">Irak</option> <option value="IR">Iran</option> <option value="IE">Irlande</option> <option value="IS">Islande</option> <option value="IL">Israël</option> <option value="IT">Italie</option> <option value="JM">Jamaïque</option> <option value="JP">Japon</option> <option value="JO">Jordan</option> <option value="KZ">Kazakhstan</option> <option value="KE">Kenya</option> <option value="KG">Kirghizstan</option> <option value="KI">Kiribati</option> <option value="KW">Koweït</option> <option value="LA">Laos</option> <option value="LV">Lettonie</option> <option value="LB">Liban</option> <option value="LY">Libye</option> <option value="LR">Libéria</option> <option value="LI">Liechtenstein</option> <option value="LT">Lituanie</option> <option value="LU">Luxembourg</option> <option value="LS">Lésotho</option> <option value="MO">Macao</option> <option value="MK">Macédoine</option> <option value="MG">Madagascar</option> <option value="MY">Malaisie</option> <option value="MW">Malawi</option> <option value="MV">Maldives</option> <option value="ML">Mali</option> <option value="MT">Malte</option> <option value="MA">Maroc</option> <option value="MQ">Martinique</option> <option value="MR">Mauritanie</option> <option value="YT">Mayotte</option> <option value="MX">Mexique</option> <option value="MD">Moldavie</option> <option value="MC">Monaco</option> <option value="MN">Mongolie</option> <option value="MS">Montserrat</option> <option value="MZ">Mozambique</option> <option value="MM">Myanmar (Birmanie)</option> <option value="NA">Namibie</option> <option value="NR">Nauru</option> <option value="NI">Nicaragua</option> <option value="NE">Niger</option> <option value="NG">Nigéria</option> <option value="NU">Niue</option> <option value="NO">Norvège</option> <option value="NC">Nouvelle Calédonie</option> <option value="NZ">Nouvelle-Zélande</option> <option value="NP">Népal</option> <option value="OM">Oman</option> <option value="UG">Ouganda</option> <option value="UZ">Ouzbékistan</option> <option value="PK">Pakistan</option> <option value="PW">Palau</option> <option value="PS">Palestine</option> <option value="PA">Panama</option> <option value="PG">Papouasie Nouvelle Guinée</option> <option value="PY">Paraguay</option> <option value="NL">Pays-Bas</option> <option value="PH">Philippines</option> <option value="PN">Pitcairn</option> <option value="PL">Pologne</option> <option value="PF">Polynésie française</option> <option value="PT">Portugal</option> <option value="PR">Puerto Rico</option> <option value="PE">Pérou</option> <option value="QA">Qatar</option> <option value="RO">Roumanie</option> <option value="GB">Royaume-Uni</option> <option value="RU">Russie</option> <option value="RW">Rwanda</option> <option value="CD">République Démocratique du Congo</option> <option value="DO">République dominicaine</option> <option value="CZ">République tchèque</option> <option value="RE">Réunion, île de la</option> <option value="EH">Sahara Ouest</option> <option value="KN">Saint-Kitts et Nevis</option> <option value="PM">Saint-Pierre et Miquelon</option> <option value="VC">Saint-Vincent et Les Grenadines</option> <option value="SH">Sainte-Hélène</option> <option value="LC">Sainte-Lucie</option> <option value="WS">Samoa</option> <option value="AS">Samoa américaine</option> <option value="SM">San Marino</option> <option value="ST">San Tomé et Principe</option> <option value="SC">Seychelles</option> <option value="SL">Sierra Leone</option> <option value="SG">Singapour</option> <option value="SK">Slovaquie</option> <option value="SI">Slovénie</option> <option value="SO">Somalie</option> <option value="SD">Soudan</option> <option value="LK">Sri Lanka</option> <option value="GS">St-George et les iles Sandwich</option> <option value="CH">Suisse</option> <option value="SR">Surinam</option> <option value="SE">Suède</option> <option value="SJ">Svalbard et Jan Mayen</option> <option value="SZ">Swaziland</option> <option value="SY">Syrie</option> <option value="SN">Sénégal</option> <option value="TJ">Tadjikistan</option> <option value="TZ">Tanzanie</option> <option value="TW">Taïwan</option> <option value="TD">Tchad</option> <option value="IO">Territoire britannique de l'Océan Indien</option> <option value="TF">Territoires français du Sud</option> <option value="TH">Thaïlande</option> <option value="TP">Timor Est</option> <option value="TG">Togo</option> <option value="TK">Tokelau</option> <option value="TO">Tonga</option> <option value="TT">Trinidad et Tobago</option> <option value="TN">Tunisie</option> <option value="TM">Turkmenistan</option> <option value="TC">Turks et iles Caicos</option> <option value="TR">Turquie</option> <option value="TV">Tuvalu</option> <option value="UA">Ukraine</option> <option value="UM">United States Minor Outlying Islands</option> <option value="UY">Uruguay</option> <option value="VU">Vanuatu</option> <option value="VA">Vatican, cité du</option> <option value="VN">Vietnam</option> <option value="VE">Vénézuela</option> <option value="WF">Wallis et Futuna</option> <option value="YU">Yougoslavie</option> <option value="YE">Yémen</option> <option value="ZM">Zambie</option> <option value="ZW">Zimbabwé</option> <option value="EG">Égypte</option> <option value="AE">Émirats arabes unis</option> <option value="EC">Équateur</option> <option value="ER">Érythrée</option> <option value="FM">États fédérés de Micronésie</option> <option value="US">États-Unis</option> <option value="ET">Éthiopie</option> </select>

These lists were compiled from a variety of sources, both online and offline, and no guarantee is made as to their accuracy. Please report any mistakes to dave@addedbytes.com.



]]>
Fri, 24 Oct 2003 23:15:17 +0100 https://www.addedbytes.com/blog/code/countries-select-box/ Dave Child ,,,,,,,,,