Did you know that 91 percent of people on Earth have a mobile phone? With over seven billion people on the planet, it’s safe to say the mobile market is off the charts.
Even more compelling, 50 percent of global mobile Web users now use mobile as either their primary or exclusive Internet source, and 72 percent of tablet owners make purchases online from their tablets each week (check out this infographic for more stats).
To reach the full revenue potential of these mobile customers worldwide, it’s an excellent idea to cater your website appropriately. One way of doing this is to pair website localization with responsive Web design so you can create a positive user experience for all your international guests—no matter how they get to your site.
These two subjects complement each other really well. Whether you’re ready to pursue website localization now or thinking about it for later on, the coding you do for responsive Web design can create a much smoother website localization process.
What is responsive Web design?
Responsive Web design is a hot topic—and it’s grabbed the attention of software developers, marketers and CEOs alike. (With the stats we mentioned earlier, it’s easy to see why.) But what is it exactly?
In essence it’s a website design approach that allows your website to fluidly adapt for viewing on mobile devices like smartphones and tablets. It has some pretty solid benefits:
- Responsive Web design creates a more positive user experience for mobile users.
- It helps your website load faster and makes websites easier to navigate on mobile devices.
- Websites designed this way—rather than having a separate landing page for mobile—are also favored by search engines, increasing your site’s findability.
The concept goes hand in hand with making it as easy as possible for mobile users to engage with your company and brand—and ultimately purchase your products and services.
How responsive Web design impacts website localization
What you may not realize is that a responsive website’s ability to expand and contract in size based on screen resolution can actually help your website accommodate new languages—which makes website localization easier down the road.
On the flipside, if you are pursuing website localization now, the languages you are translating into may affect your responsive Web design approach.
We have some coding considerations to help you merge your responsive Web design and website localization pursuits into a cohesive endeavor.
1. Keep sizing metrics expandable for all elements of your website
With responsive Web design, you want to avoid using fixed sizing metrics like inches and pixels for containers, images, buttons and more. Instead, keep sizing relative to your Web page using percentages.
This percentage-based coding (also known as fluid-based coding)—along with using media queries—allows your site to be responsive to any resolution it is viewed in. Media queries is a type of coding you can add within your strings as well as style sheets to enable your site to dynamically change formatting settings based on the device your website is displayed on. Check out this article for some real-world examples.
You can also use fluid coding techniques to make a button or text element expand to accommodate the width of its content. This prevents the words or symbols in those buttons from getting cut off when a larger sized segment of text is placed into it, which also lends itself well to website localization. For example, translating the phrase “Join Meeting Now” into German as “Der Sitzung jetzt beitreten” results in considerably longer text. The fluid code concepts used for responsive Web design, such as styling your div tags with the code “float:left” or “display:inline-block,” makes the button or other text element automatically accommodate text expansion. This saves you a lot of time (and potential rework) during the localization process.
2. Start with Unicode fonts for localizable websites
Unicode fonts contain a wide range of characters, letters, digits, symbols and more, which collectively make up a universal character set derived from many different languages. Avoid fonts that aren’t considered Unicode, because they won’t support many of the characters in other languages.
While this tip applies to website localization in general, it also ties into responsive Web design. Case in point: if you need to change your font during the localization process—because you initially chose a font that won’t work for your new languages—the new font may fit into your website design differently than the previous font. You’d have to alter your font size so that it would adjust to various devices correctly. You can avoid this backtracking if you use Unicode font in the first place.
3. Add zero width spaces when appropriate
On a fixed-width site, the break points in text may not be as large of a consideration as they are for a site that responds to various resolutions. Because of that, when you plan to localize your website into certain languages whose sentences don’t have actual spaces such as Chinese or Thai, you will likely want to consider the placement of zero width spaces into your code.
Not visible on your actual website, zero width spaces indicate in your code where one word starts and ends. As your website changes size, layout and more for new devices, characters will break in the right places so your text reads correctly for your Asian audiences.
Naturally, you may be thinking: How can I place these codes if I don’t speak the language? Don’t worry. The linguists working on your project have extensive technical and website localization expertise and can place the zero width spaces for you.
We’re all about expertly localized websites
Our rock star localization engineering team has the technical expertise and experience to assist with all your website localization initiatives. If you are curious about how responsive Web design fits into the localization puzzle, we can help with that too.
Download our article Website localization: Best practices for going global to learn more.
Have you made your website mobile-friendly while pursing website localization? Did you run into any challenges? We’d love to hear your experience and tips!
– See more at: http://www.sajan.com/blog/responsive-web-design-paving-way-better-website-localization-process/#sthash.3eBdoZEP.dpuf