--> Google Tips to Optimize International Websites | Experience Lab - Online business creation and development guide for bloggers and startups

Google Tips to Optimize International Websites

Have you ever considered delivering your content for multiple regions and in multiple languages? More and more websites are going inter...




International Websites




Have you ever considered delivering 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 unless you have a region specific website, there's no reason why you should not go international. However, there's a 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



Learn where to use markup and where to use CSS for internationalization (shortened to i18n 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 lang and dir (for direction) with the html tag as shown below.





<html lang="en" dir="ltr">





Note: In some 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



When using different languages and 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 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



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 use the [dir='rtl'] attribute selector in this case. For example;





aside {   float: right;}[dir='rtl'] aside {   float: left;}





4. Look carefully at position properties



As in the example above, you often need to 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 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 CSS positioning properties, you might want to 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 JavaScript positioning and animations.





Another very important aspect is the fonts and font sizes. A font size for one language might seem adequate, but it may be too small for other languages. For example, Arabic texts usually need to be bigger than English texts because they're difficult to see in a smaller font.





So keep an eye out for details, and feel free to contact us if there's a problem. We'd love to help. Cheers :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Google Tips to Optimize International Websites
Google Tips to Optimize International Websites
http://1.bp.blogspot.com/-bAcII5HTv3I/UbNXkGpz1XI/AAAAAAAAELY/7WEJRo7bUV0/s1600/multilingual+landing+pages.png
http://1.bp.blogspot.com/-bAcII5HTv3I/UbNXkGpz1XI/AAAAAAAAELY/7WEJRo7bUV0/s72-c/multilingual+landing+pages.png
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2013/06/google-tips-to-optimize-international.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2013/06/google-tips-to-optimize-international.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy