5 Top Tips For Building International Websites

Today we explore the top tips for when you come to building international websites

share on facebook share on twitter share on google share on digg share on linked in share on stumble upon

1. Get the markup right
The language you use and the directionality are inherent to not only documents you post on your website but also the web pages that are on your website. At the very least we suggest you use @lang and @dir on your html element.

Example:

You should avoid using special classes or ID's. You can't always rely on CSS to do this for you as some user agents (browsers) will ignore stylesheets but markup they will not ignore.

2. Stick to 1 stylesheet
Instead of creating multiple stylesheets for each language and left to right and right to left we recommend you use just the 1 stylesheet. This makes the internationalisation of your website much easier to understand by search engine crawlers through your website (you must try and keep it simple for them).

3. Using the [dir='rtl'] attribute selector
If you have followed step 2 then your code should look something like this:

mypage {
 float: right;
 margin: 0 0 1em 1em;
}

[dir='rtl'] mypage {
 float: left;
 margin: 0 1em 1em 0; 
}


You can see how easy it is to use just one stylesheet now. 


4. Use the :lang() pseudo class
You can use this psuedo class to the target documents for a particular language you may be using on your website. You will notice that certain elements do not work the same in all languages. As an example, you will find it very difficult to make chinese characters appear in bold. So for this example you would use:

:lang(zh) strong,
:lang(zh) b {
 font-weight: normal;
 color: #900;
}


5. It is all about the details

These are some items you should keep a close eye on:

Images - These are designed for left or right, a bit like arrows or backgrounds on your website. box-shadow and text-shadow values will need to be adjusted.

Fonts - Especially for non-latin alphabets, some languages may render the size very small so you may need to tweak the size of these.

CSS Specificity - When using the [dir='rtl'] (or [dir='ltr']) hook (as explained in Tip 2), you’re using a selector of higher specificity. This can lead to potential issues. You just need to keep an eye out, and adjust accordingly.


Additional Resources:

  1. Calculating a selector's specificity

5 Top Tips For Building International Websites

Posted in Web Design by on 02 January 2014

Related Posts

Get Your Website Contact Form Converting
GET YOUR WEBSITE CONTACT FORM CONVERTING
CMS Essentials
CMS ESSENTIALS
Why is WordPress So Popular?
WHY IS WORDPRESS SO POPULAR?
Making Your Contact Page Work Harder
MAKING YOUR CONTACT PAGE WORK HARDER
Using Images On Your Website
USING IMAGES ON YOUR WEBSITE
Why does it matter where I host my website?
WHY DOES IT MATTER WHERE I HOST MY WEBSITE?

Fresh From Twitter...

Join the conversation on Twitter @pebbleltd
for all the latest news on web design, ecommerce and search engine marketing with one of the leading web design agencies in the uk

  • Pebble (Peterborough)

    26 Tesla Court
    Innovation Way
    Peterborough
    PE2 6FL

    Tel: 01733 902070

    View On Map

  • Pebble (Kings Langley)

    The Old Chapel
    69 Primrose Hill
    Kings Langley
    WD4 8HX

    Tel: 01442 505878

    View On Map

Pebble Ltd is registered in England & Wales: 06257777 and registered for VAT No: 993 3500 06

Pebble Ltd is Data Protection registered ZA122783

5 Top Tips For Building International Websites 5 Top Tips For Building International Websites Today we explore the top tips for when you come to building international websites

1. Get the markup right
The language you use and the directionality are inherent to not only documents you post on your website but also the web pages that are on your website. At the very least we suggest you use @lang and @dir on your html element.

Example:

You should avoid using special classes or ID's. You can't always rely on CSS to do this for you as some user agents (browsers) will ignore stylesheets but markup they will not ignore.

2. Stick to 1 stylesheet
Instead of creating multiple stylesheets for each language and left to right and right to left we recommend you use just the 1 stylesheet. This makes the internationalisation of your website much easier to understand by search engine crawlers through your website (you must try and keep it simple for them).

3. Using the [dir='rtl'] attribute selector
If you have followed step 2 then your code should look something like this:

mypage {
 float: right;
 margin: 0 0 1em 1em;
}

[dir='rtl'] mypage {
 float: left;
 margin: 0 1em 1em 0; 
}


You can see how easy it is to use just one stylesheet now. 


4. Use the :lang() pseudo class
You can use this psuedo class to the target documents for a particular language you may be using on your website. You will notice that certain elements do not work the same in all languages. As an example, you will find it very difficult to make chinese characters appear in bold. So for this example you would use:

:lang(zh) strong,
:lang(zh) b {
 font-weight: normal;
 color: #900;
}


5. It is all about the details

These are some items you should keep a close eye on:

Images - These are designed for left or right, a bit like arrows or backgrounds on your website. box-shadow and text-shadow values will need to be adjusted.

Fonts - Especially for non-latin alphabets, some languages may render the size very small so you may need to tweak the size of these.

CSS Specificity - When using the [dir='rtl'] (or [dir='ltr']) hook (as explained in Tip 2), you’re using a selector of higher specificity. This can lead to potential issues. You just need to keep an eye out, and adjust accordingly.


Additional Resources:

  1. Calculating a selector's specificity

Contact Pebble

  • Pebble Ltd (Peterborough)
    26 Tesla Court
    Innovation Way
    Peterborough
    PE2 6FL
    Tel: 01733 902070
  • Pebble Ltd (Kings Langley)
    The Old Chapel
    69 Primrose Hill
    Kings Langley
    WD4 8HX
    Tel: 01442 505878