Sunday, 4 August 2013
How to Optimize International Websites (Google Tips)
Again back with new post, how to optimize international websites, google reviews on it , have you ever been considered delivering of your content for multiple regions and in multiple languages? More and more websites are going international (being made available in multiple languages) these days, and you can easily see why. The broader the audience, the better and nd unless you have a region specific website, there's no reason why you should not go international. However, there is lot more to it than just translation, as emphasised by these quick tips from Google for internationalization.
1. Change your markup instead of your style sheets :
Firstly, learn where to use the markup and where to use CSS for internationalization (shortened toi18n after the starting character i, and the 18 character spaces between the first and the last n). Things like language are inherent to the content present on page. So in this case, markup should be used for i18n. You can't always rely on CSS. So use attributes like langand dir (for direction) with the html tag as shown below.
<html lang="en" dir="ltr">
Note: In some of the cases, i18n markup might not be supported by the markup language, as is the case with XML. In such cases, CSS may be used.
2. Use a single CSS file :
Secondly, when we using different languages and the directions (LTR or RTL), do not use a separate style sheet for each locale. Use a single CSS file, and bundle together existing CSS rules with their international counterparts. A single file makes it easier to maintain things, and only a single file needs to be a loaded. Consider a scenario where the default CSS file loaded, but the international file failed to load. A single file approach would be better in that case.
3. Use [dir='rtl'] attribute selector
Thirdly, a language can either have an RTL (Right to Let) or LTR (Left to Right) directionality. RTL directionality requires different markup than LTR. So you can be use the [dir='rtl'] attribute selector in this case. example "
aside { float: right;}[dir='rtl'] aside { float: left;}
4. Look carefully at position properties :
Now ass you look the example above, you often need to be reverse or mirror the position properties for RTL and LTR languages. For example, what's aligned left in LTR should be aligned right in RTL. So you should look at all the position-related properties for LTR, and mirror them for a RTL. These include margins, padding, text-align, float, clear, and so on. There are tools out there as well that do the job for you, such as CSSJanos .
5. Look closely at the details :
Just like with the CSS positioning properties, you might want to be mirror some other details as well, such as box-shadow for images, text-shadow for text, arrows, background, markers, and so on. Same goes for the JavaScript positioning and animations.
Need Any Help feel free to contact us ..
Subscribe to:
Post Comments (Atom)
0 Responses to “How to Optimize International Websites (Google Tips)”
Post a Comment