Multilingual Web (#3): Technical Considerations
Design and code techniques for international websites
Hardware matters
Awareness of a local technical reality is another dimension of a proper localization. An average broadband speed (October 2018) in South Korea is 26.7 Mbps, while in India it’s only 2.8 Mbps¹. The tenfold difference should be reflected in a reduced number of assets, such as graphics or videos — the substance over form principle applies. Graphical navigation items and labels should be avoided and replaced with text equivalents. Also, some components and non-essential scripts can be removed — in extreme cases leading to a simplified website variant with media resources available only on demand².
In addition to the transmission speed, the most popular browsing platforms should be checked too. According to data published by StatCounter Web Analytics in October 2018, Venezuelans surf the Internet mostly using desktop computers (70% of all users³), while Indians on the contrary, use mobile devices instead (78% of all users⁴). No matter if these differences arise as a result of cultural, economic, political or other determinants, they should be taken into account during the development. If smartphones are predominant as in India, adjusting page content on the fly with responsive web design (RWD) techniques is a must for smaller displays. Venezuelans, in turn, may benefit from larger screens seeing more content at once.
Another thing worth checking is the compatibility of chosen technologies with the most popular browsers in a given country⁵. It may come as a surprise that in some parts of the world there are extremely popular browsers which are neither Chrome, nor Safari. Knowing the market share, individual parts of HTML, CSS and JavaScript specifications can be quickly tested on Can I use…?⁶ website.
An interesting case of hardware adjustments is the first Xbox. Before releasing the console in Japan, Microsoft localized not only its virtual dashboard, but also the gamepad itself (see Fig. 1). Buttons were moved closer to each other to be more comfortable for Asians, whose hands are generally smaller than Americans’ hands⁷. Analogous changes can be applied for mobile layouts in which key buttons should remain within the thumb’s reach (at the same time, they can be slightly smaller and compactly arranged).
General guidelines
Because the multilingual web is a broad topic full of various technical issues, following rules of thumb may appear to be useful:
- Site’s language should be defined in lang attribute using BCP 47 standard⁸.
- UTF-8 encoding (of Unicode charset) should be used by default for XML 1.0 and HTML5 documents⁹. It’s, de facto, standard solving long-standing problems of multilingual documents, such as sorting, ASCII backward compatibility, internal state hindering text operations of searching and pasting, etc.
- Web Open Font Format (WOFF) is widely adopted by browsers and should be used whenever possible, until WOFF2 popularization. Simplifying, it’s a web wrapper for TrueType Font (TTF) and OpenType Font (OTF), adding compression and digital rights management¹⁰. PostScript (PS), Embedded OpenType (EOT) and Scalable Vector Graphics (SVG) should be avoided due to the slight browsers adaptation (Can I use…? website can be used for checking it).
- Although English is usually used as a universal text length determinant, ideographic writings as kanji are often much briefer, whilst some, as Vietnamese, are a lot more verbose¹¹. Bear in mind to provide a buffer space for translations. Use of flexible containers will be the best solution, because there is no good way of calculating versatile text length rules for all languages.
- International Domain Names (IDN) should still be treated only as a fancy addition to classic domains (which of course may become popular in the future), because of weak mobile browsers support and sensitiveness to phishing attacks.
- Gregorian calendar is a common calendar for civil and administrative use throughout the world. National calendars (Hebrew, Persian, Chinese and other) are used mainly for religious purposes and to designate holidays¹².
- Universal Time Coordinated (UTC) is an international time standard. ISO 8601 standard defines the format of its presentation¹³. JavaScript namespace Intl.DateTimeFormat can be used for automatic compliance based on a current locale¹⁴.
- For search engine optimization purposes (SEO), hreflang attribute should be set for each multilingual subpage separately. Learn more from Google’s official guide on YouTube¹⁵.
Although concise, above guidelines are a good starting point for planning application’s architecture without making common mistakes. Generally speaking, W3C and ISO standards for internationalization should be followed and adopted (various checklists available online can help with this¹⁶).
Further reading
This article is a part of Multilingual Web series. See also:
References
- https://www.fastmetrics.com/internet-connection-speed-by-country.php.
- Marcus, A. (2003). Global and Intercultural User-Interface Design. In Jacko, J. A., & Sears, A. (Eds.), The Human-Computer Interaction Handbook: Fundamentals, Evolving Technologies and Emerging Applications (p. 446). Mahwah: Lawrence Erlbaum Associates.
- http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/venezuela.
- http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/india.
- http://gs.statcounter.com/browser-market-share.
- https://caniuse.com/.
- Gaither, C. (2002, February 18). New Riddle for Xbox: Will It Play in Japan? The New York Times. Retrieved from https://www.nytimes.com/2002/02/18/business/technology-new-riddle-for-xbox-will-it-play-in-japan.html.
- Philips, A., & Davis, M. (2009). BCP 47: Tags for Identifying Languages. Network Working Group. Retrieved from https://tools.ietf.org/html/rfc4647.
- Ishida, R. (2014). Declaring Character Encodings in HTML. World Wide Web Consortium. Retrieved from https://www.w3.org/International/questions/qa-html-encoding-declarations.
- Kew, J., & Leming, T., & Blokland, E. (2012). WOFF File Format 1.0 Introduction. World Wide Web Consortium. Retrieved from https://www.w3.org/TR/2012/REC-WOFF-20121213/.
- Ingraham, C. (2017, September 28). The Languages That Let You Say More with Less. The Washington Post. Retrieved from https://www.washingtonpost.com/news/wonk/wp/2017/09/28/the-languages-that-let-you-say-more-with-less/.
- Longstaff, A. (2005). Gregorian Calendar. In Calendars From Around The World. London: National Maritime Museum.
- Powers, S. (2015). Converting an ISO 8601 Formatted Date to a Date Object Acceptable Format. In JavaScript Cookbook. Sebastopol: O’Reilly Media.
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat.
- Ohye, M. (2013). Expanding Your Site to More Languages. Google Webmasters Channel. Retrieved from https://www.youtube.com/watch?v=8ce9jv91beQ.
- https://www.w3.org/International/techniques/developing-specs.
