How to successfully localize your app for other countries

For many app marketers, localizing an app to fit new markets simply means translating it into different languages. Entrepreneurs then sit, and wait, hoping this will instantly turn their app into an overnight success. But in order for an app to successfully penetrate a foreign market, there’s a whole lot more than translation that needs to take place.

Scratch the Surface

If you want to keep effort to a minimum but still localize your app as much as possible, ASO (App Store Optimization) is the way to go. This means optimizing what users in a certain country see in the app store: title, description, and visuals.

Using Google Translate is extremely risky, and thus I strongly recommend working with a professional translator who is also experienced in ASO and localization. It’s important to ensure that your description includes the most common relevant search words in that specific country and that your visuals correlate with the local culture. The Spanish language, for example, contains dozens of different jargon – jargon that is not necessarily used across the board among all Spanish-speaking countries. Therefore, using native speakers as translators (instead of resorting to Google Translate) is the only reliable way to overcome such cultural differences.

As always, it’s best to run A/B testing for creative materials, keep up with ongoing industry changes, and optimize the text and title on a regular basis.

Copy & Paste

This is still a basic level of localization, which includes translating not only your app page but the content of your app word for word (of course some UI tweaks are required to make sure the interface accommodates the text). This means that people everywhere are exposed to the same type of app regardless of their cultural differences.

While this can be enough for utility apps (such as Google Maps), it’s not enough for apps that either offer a more “complex” experience, have more than one feature, or attempt to engage with the user on an emotional level.

Beat the Culture Shock

In order to successfully penetrate a foreign market, you’ll have to do more than just perform the two steps above. You’ll have to make in-app alterations beyond basic translation. To make appropriate tweaks, you must first conduct extensive market research that examines various aspects: the use of mobile devices in the country, competing apps, and users’ purpose for using the app.

The conclusions you draw from such a study should give you a better clue as to how you should adapt your app to the desired market. If the target audience, for example, seems to like highly expressive emoticons, a messaging app should make the emoticons button more accessible to users than the photo attachment button.

The same app could also be aiming to penetrate another market where locals are fond of utility features. You could expose those locals to a version of the app where the voice recording button is more prominent than the emoticons button. Successfully penetrating this country could also mean having to alter the emoticons themselves to make them more culturally appropriate.

Even the most basic steps are somewhat tricky, but it is definitely worth investing in these measures. Remember: These minor tweaks can turn out to be the difference between success and failure.

How to successfully localize your app for other countries

HOW TO WRITE COMPELLING COPY FOR THE WEB

Have you ever heard the saying “web design is 95% typography”? If you have, it’s with good reason: it’s 100% true, the majority of what you’ll encounter on the Web is written content. The idea was coined back in 2006 by design firm Information Architects.

Think of blogs. Written content. Social media, homepage copy, landing pages, white papers… all written content. The list just goes on and on. Seems like the only exception could be videos, but even those have written descriptions.

All this boils down to one, overriding principle: to get more site visitors for your clients, you have to learn how to make your content easily readable…

How people really read on the Internet

Before you can write content for the Web, you have to be intimately familiar with how users absorb it. If you think that people actually read on the Internet, you’re mistaken, my friend. Many people never bother taking the time to read an entire webpage or article on the Internet. If you’re a designer who’s writing content like an author writes for pages in a book; then you don’t understand your users and are going to drive them away, unfortunately.

If you think that people actually read on the Internet, you’re mistaken, my friend

See, the truth of the matter is that people are just skimmers, as the research shows. They enjoy scanning webpages as a way of quickly sorting out if the page’s content is worth their time at all. To facilitate this scanning behavior, your written content should be grouped into smaller paragraphs instead of long blocks of text, which inhibit scanning.

Now that you know this, it’s time to design pages to satisfy this user behavior. Regardless of whether you’re also handling copywriting duties, or work with an actual copywriter who creates written content, it’s high time that anything written is extremely readable from the user’s perspective. Here’s how you do it:

1) Shorter and smaller paragraphs

Since users are mainly scanners who skim through content, it’s necessary to group your content into small paragraphs. Best practice dictates paragraphs no longer than three or four sentences at the most. But, hey, since brevity is extremely in-demand on the web, take it a step further. Don’t be scared to even write one sentence per paragraph.

To stick to this best practice, commit yourself to devoting just one idea per paragraph. This limitation is going to make it easier to write really short paragraphs.

Better Homes and Gardens gets this 100%. On their bathroom DIY ideas page, the written content is chunked into short, readable paragraphs of one to three sentences each. Talk about pithiness!

2) Go heavy on the sub-headings

You can think of sub-headings in written content as guideposts that quickly preview what each new section will be about. As such, they’re very welcome intervals in copy that could otherwise seem overwhelming if it appeared as one, long, uninterrupted chunk of text. A page that encourages smooth scanning will have many sub-headings — just like this article that you’re reading now.

Sub-headings also act as prodders, pushing your readers along the length of your content, particularly if they’re interesting or build excitement. After all, subheadings are just mini-headlines, so they work in the same principle as real headlines.

CNN’s coverage of the Texas floods epitomizes the use of subheadings to draw the reader in and prompt them further down the written content. Note how each section is broken up with sub-headings that preview the section’s content in a gripping way that’s meant to suck the reader in.

3) Bulleted lists to the rescue

In keeping with the overall theme of keeping things shorter to facilitate better scanning and skimming, we give you bulleted lists. These lists are ideal at condensing and summarizing a section’s most vital ideas. Again, since your web readers don’t care for long content that’s hard to read, bulleted lists enable them to pick out the important facts efficiently and quickly.

The logical companions of these bulleted lists are numbered lists. Numbered lists go a step further and highlight either the importance or sequence of a group of points or data. They’re good for when you want to enumerate things for a set of directions or steps.

Yahoo! Parenting gets this perfectly. In an article about taking children to a therapist, they number the seven red flags, thereby not only making the content easier to read, but also understand.

When you chunk the information in this easy-to-digest way, you make it more likely that your web readers are actually going to come away having learned something.

4) Bold words convey significance

Bold-styled words in your copy signal which words and phrases your readers should pay attention to more than others. The fact that they also draw the eye of readers is a bonus. When readers come across bolded words, it immediately tells them that this section is important, and they’ll read and reread them to really understand the meaning being conveyed.

Of course, using bold words is a design tactic that can be overused as well. There’s hardly anything worse than excessive bold words on a page because that defeats the purpose of the styling by making it meaningless. Instead, good designers should use bold words sparingly and intelligently. Only the words and phrases that are the most vital to readers’ comprehension should get the bold treatment.

When site content isn’t readable or legible, your UX suffers

Wayfair, one of the largest furniture e-commerce retailers on Earth, demonstrates the effective use of bold choice words in its different guides about home décor. For instance, in its guide to choosing the perfect bathroom vanity, the company uses bold words that represent the specific choices that customers looking for a vanity have in each category and stage of the buying process.

This encourages readers to absorb the helpful information efficiently, as their eyes naturally hone in on the most important parts of the content.

Conclusion

Your clients are losing out if you don’t make a site’s content easily readable. When site content isn’t readable or legible, your UX suffers. This leads to higher bounce rates and, ultimately, a lower conversion rate. You can do a great deal to lower the likelihood of both of these happening, and it all starts with minding how you format and present your content.

The goal of stellar web design is always to put yourself in your users’ shoes and anticipate how they’d feel navigating the site you just designed. If they can figure out what they’re looking at, read the content very easily, and understand the main details of site copy, then you’ve done a great job with content formatting. If it’s not, then it’s high time to start making adjustments… fast.

HOW TO WRITE COMPELLING COPY FOR THE WEB

Wikipedia to start using secure HTTPS by default for all users

Wikipedia will soon have HTTPS enabled by default, creating a more secure connection between a user’s Internet device and Wikipedia.

In an announcement earlier today, Wikipedia’s parent organization, the Wikimedia Foundation, said: “We believe that you should be able to use Wikipedia and the Wikimedia sites without sacrificing privacy or safety.”

HTTPS is a communications protocol often used by security-conscious bodies such as banks, with encryption adding an extra layer of security atop the traditional HTTP protocol for online customers. But other companies have increasingly adopted HTTPS in recent times, including the likes of Twitter, which has had it switched on by default since 2012.

Today’s news isn’t entirely surprising — Jimmy Wales, founder of the Wikimedia Foundation, has been an ardent, outspoken critic of the National Security Agency (NSA) and mass surveillance. The co-penned announcement post from the organization’s legal counsels today stated:

In a world where mass surveillance has become a serious threat to intellectual freedom, secure connections are essential for protecting users around the world. Without encryption, governments can more easily surveil sensitive information, creating a chilling effect, and deterring participation, or in extreme cases they can isolate or discipline citizens.

Accounts may also be hijacked, pages may be censored, other security flaws could expose sensitive user information and communications. Because of these circumstances, we believe that the time for HTTPS by default is now.

The Wikimedia Foundation has been working behind the scenes to implement the requirements for HTTPS by default. Since 2013, those who are logged in to Wikipedia have had HTTPS on by default, and anyone could manually enter the “HTTPS” in the address bar if they wished. Search engines would also include HTTPS when redirecting an Internet user to a page operated by the Wikimedia Foundation.

In addition to HTTPS, the Wikimedia Foundation is using HTTP Strict Transport Security (HSTS), a mechanism that helps prevent “downgrade attacks” which attempt to intercept traffic.

The HTTPS rollout kicks off today, but it will take a few weeks for the process to be complete.

Wikipedia to start using secure HTTPS by default for all users

SAFARI 9: EVERYTHING WEB DESIGNERS NEED TO KNOW NOW

Yesterday’s keynote at the Apple WWDC featured two new OS. The new MacOS is named El Capitan after a rock formation in Yosemite (which has been taken by most commentators to indicate that Apple sees its next OS as a minor, rather than major, version). MacOS El Capitan, and iOS 9 are available now to Apple developers, will be released to public beta next month, and will go live in the autumn.

Hidden amongst the underwhelming announcements about Apple pay rolling out to a whole two countries (Canada and the UK) and Apple’s streaming music service, were a number of clues as to how Apple sees the Web, and Safari’s role, evolving in the next few years…

1) Scroll snapping

One of the biggest announcements for web designers is the implementation of CSS scroll snapping. Scroll snapping — which is currently achieved with JavaScript — is a method of adjusting the easing on a scroll so that the scroll snaps to a predefined position. If you’ve ever scrolled a single page site that slid to the next section, as opposed to an arbitrary number of pixels, you’ve experienced scroll snapping.

Apple expects the trend for single page sites…to continue

It’s an indication that Apple expects the trend for single page sites, with sections that fill the whole viewport, to continue unabated.

Safari 9 introduces the following CSS scroll snapping properties: -webkit-scroll-snap-type, -webkit-scroll-snap-points-y, -webkit-scroll-snap-points-x, -webkit-scroll-snap-destination, and -webkit-scroll-snap-coordinate.

As scroll snapping is largely viewed as a progressive enhancement, it may soon be practical to switch this effect from JavaScript to CSS.

2) Pinned sites

Safari 9 introduces pinned sites. Pinned sites is a way to keep your favorite websites open in the browser for quick access, without actually leaving a tab open. To use pinned sites in Safari 9 just drag an open tab to the left and a small icon will be created in the bookmarks bar allowing you to quickly access the page.

Users will undoubtedly expect to use this feature, so all sites need to be prepared. In order to be ready, all you need to do is create an icon: make it solid black, with a transparent background, and save it as an SVG. You can then link to the icon in the head of your HTML document, like so:

<link rel="icon" sizes="any" mask href="webzin.svg">

If you’d like to color the icon to match your brand, add this meta tag immediately after it:

<meta name="theme-color" content="#FAB23A">

3) HTML5 video enhancements

Safari 9 introduces a couple of enhancements for HTML5 video.

Airplay allows custom controls for HTML5 media. Using JavaScript you’ll be able to detect Airplay availability and where possible (ie. in Safari 9) supply custom controls. Ideal for anyone else who’s tired of default controls breaking brand consistency.

PiP (Picture in Picture) is a style of video that’s used extensively on TV. PiP involves playing a video in the corner of the screen while other content is viewed elsewhere; browsing the channel guide on a Tivo box whilst the current channel plays in the corner, is a good example.

Safari 9 introducing PiP is an incredible innovation for anyone who likes to watch live events (like the Apple WWDC keynote) whilst actually working. However, like most technologies PiP is open to abuse; you’re likely to see the first PiP adverts popping up in the corner of your browser in the next 6 months. Fortunately Safari 9 also includes the option to mute all audio across all tabs with a quick click.

4) Force touch events

Apple’s new MacBooks feature force touch trackpads; trackpads that detect not just taps, but the force with which you tap. Safari 9 introduces several new JavaScript events — ironically classed as mouse events — to handle the feature:  webkitmouseforcewillbegin, webkitmouseforcedown, webkitmouseforceup, and webkitmouseforcechanged.

Force touch events are only likely to be useful for supplementary navigation at this point as the technology is not just software, but also hardware, restricted. However, if used as a progressive enhancement they open up some interesting possibilities, especially in the area of gaming and experimental UI design.

5) SFSafariViewController

At first glance, SFSafariViewController appears to be of more interest to app designers than web designers. It will allow apps to display Web content within an app using Safari’s rendering.

Designed for streamlining scenarios such as opening a native app, then creating an account on a company’s web page, before returning to an app to log in with the account, the significant thing about SFSafariViewController is that allows web, rather than native, to be the keystone of a company’s online systems. It’s a small piece of software that sparks a very large step towards closer integration of native and web.

6) ECMAScript 6

JavaScript is a step closer to becoming the OOP language that it really should be

JavaScript developers will be excited to learn that Safari 9 includes full support for classes, computed properties, weak set, the number object, octal and binary literals, symbol objects, and template literals. This support means JavaScript is a step closer to becoming the OOP language that it really should be by now.

7) CSS Filters

The backdrop-filter CSS property has been added to Safari 9. blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, and sepia filters are all available.

8) Developer mode updates

Responsive design mode has been introduced in Safari 9 as a way of providing fast switching of layouts across different viewports. All Apple devices are included as presets, but it’s more of a useful presentation tool for client meetings than a dev tool as best practices favor content, as opposed to viewport, breakpoints. It’s important to note that responsive design mode only alters the viewport, it doesn’t simulate different devices. It may be useful as a quick test whenever new Apple devices are launched, before device simulators catch up.

The web inspector has been redesigned. Together with some UI tweaks to improve the UX, there’s a greater emphasis on frame rendering and performance.

9) Unprefixed CSS

Some updates are more welcome than others. One of the most welcome, but less likely to be noticed, is the dropping of browser prefixes for over 45 CSS properties. Whilst it does little in the short term with legacy browsers still in use, the sooner browsers drop prefixes, the sooner we’ll say goodbye to them for good.

The most significant to go prefix-free are the flex properties, the transition properties, the transform properties, and the animation properties.

SAFARI 9: EVERYTHING WEB DESIGNERS NEED TO KNOW NOW