As businesses continue to become more global in nature, many companies are finding their websites don't meet the needs of their widened audience-base. You may find your web chops are put to the test when designing a website intended for a global audience, as it presents a whole variety of new things to take into account..
This article originally appeared in issue 276 of net magazine.
As businesses continue to become more global in nature, many companies are finding their websites don't meet the needs of their widened audience-base. You may find your web chops are put to the test when designing a website intended for a global audience, as it presents a whole variety of new things to take into account.
Design, performance and content are the three primary factors all users care about. In other words: what it looks like, how fast it operates and how easily they can find the information they're seeking. Here's how you can address these factors to build the best experience possible for all audiences.
01. Balance is key
Finding the right balance between site branding and your target audience is an important foundational step. Sounds pretty straightforward, right? When you dig in, you'll find there are many things to consider to achieve this harmony.
Elements such as colours, animations and web fonts must not only appeal to different cultures and markets, but must also meet all browser capabilities. Devices and browsers can be just as diverse as the audience you're designing for.
Internet users in the US, for example, will typically use a browser such as Chrome or Firefox, whereas Netscape is more popular in a place like rural India. Not only does each browser run its own rendering engine, but there are differences in each browser generation depending on operating systems, devices and countless other settings. It's safe to say no two browsers are the same.
As a designer, this forces you to find the balance between having a modern-looking site that's true to your brand, and designing for the lowest common denominator. Sticking to a clean, neutral design is a good place to start.
Languages
You need to be cognizant of the effect different languages will have on your design. For example, in English, the phrase 'insurance companies providing legal protection' shouldn't present any issues – on smaller screens, it should cleanly wrap onto the next line. The same phrase in German is 'Rechtsschutzversicherungsgesellschaften'. This is more problematic. On mobile platforms it will most likely push the width of your site off-screen, causing an unattractive horizontal scroll bar to appear and ruin the clean aesthetic.
Fonts
The font you choose will ultimately be determined by the languages on the website. Commonly used web fonts such as Arial, Verdana and Calibri typically cover all major Western languages like English, Spanish, French, German and Italian.
If you anticipate your audience to be Indo-European, you'll want to select one of the central European fonts (often tagged 'CE'). These include Times CE and Palatino CE. Special characters can also be part of the equation. The Russian language, for example, requires a font with Cyrillic characters, which usually covers Ukrainian, Bulgarian and Serbian languages as well.
Supporting Arabic, Hebrew or scripts from different parts of Asia can present their own challenges. These languages vary wildly and you'll often need to include several fonts for the same language, such as Traditional Japanese (zh-Hant) and Simplified Japanese (zh-Hans).
Unfortunately, due to performance concerns, loading all fonts when a page loads isn't reasonable. Although it will add an extra layer of complexity to your app, you need to determine which language the site will display in and load that font dynamically.
02. Performance matters
Page loading time is an essential part of a website's user experience. Ensuring the site runs optimally, regardless of location, is largely dependent on hardware and performance options.
Consider using a global hosting platform to help with the heavy lifting. Microsoft Azure and Amazon Web Services (AWS) operate data centres around the world, sparing you the effort of finding a local hosting company that may be unreliable, and shaving crucial seconds off page load time.
I prefer Azure's content delivery network (CDN) to serve static content, and its Traffic Manager to configure web traffic. Traffic Manager gives you options on how to configure these servers: straight round-robin, failover or performance. Performance is the one we are interested in here – this indicates the server closest to your user, and therefore the one you want to route traffic to.
Bandwidth is also a variable designers should account for. Countries such as the US receive strong internet connections at 4MBs, but many others don't have the resources for high bandwidth. Minify and cache JavaScript to pull as few HTTP requests as possible, in order to limit the number (and size) of files for a faster download. Microsoft's Visual Studio is one tool that can do this for you.
Images often make up the majority of bytes on a page, so making sure they are optimised is a priority. The fewer bytes the browser has to download, the less competition there is for the client's bandwidth and the faster the browser can download and render useful content on the page.
If you want to show hi-res images for Retina displays, make sure you use media queries. This way, only devices that can show hi-res images download these larger files. If you can't upload two resolutions for each image and you have a lot of users with limited bandwidth, stick with just the lower res and smaller images. Here are some more quick tips for image optimisation:
- Select the right universal format: GIF, PNG, JPEG
- Experiment and select the best settings for each format: quality, palette size, and so on
- Eliminate unnecessary images
- Leverage CSS3 effects wherever possible
- Use web fonts instead of encoding text in images
- Minify SVG files, and compress them with GZIP
03. Understand the UX: Testing
Make sure you understand how your users experience your design on their device and in their location. That may differ from your experience on your new computer on a very fast 100Mbps broadband connection.
Research to find average bandwidth for different targeted countries; Akamai's State of the Internet report is a useful resource on global internet trends. You can also take advantage of Chrome DevTools to simulate and test particular browsers/devices, bandwidth and locations. This will highlight any adjustments needed, based on bottlenecks and design elements that may have a negative impact for different users.
04. Content reigns supreme
Delivering localised and translated content based on users' location and demographic is paramount for global brands. Regardless of where users are physically located, they want to feel like the content is personal to their culture and interests.
One of the most effective ways to execute a complex content strategy is to leverage a full-featured CMS. Sitecore, for example, offers language supports through sub-sites, allowing you to publish articles under select sub-sites or across all of them. Sitecore and other advanced CMSs can also help manage the workflow of assigning, reviewing and publishing all the translated content.
You can provide the best and most accurate experience for users by enlisting native speakers or a web-based human translation platform such as Gengo to write or translate content, rather than using machine-automated translation.
In order to ensure all special characters can be handled, regardless of language, make sure your site is UTF-8 encoded. Avoiding hard-coded images and text is also a good practice to follow.
Building a website for a global audience can be an overwhelming project, but addressing these common challenges upfront will help you avoid headaches in the future.