Web News

Three user interfaces (UIs) go to a pub. The first one orders a drink, then several more. A couple of hours later, it asks for the bill and leaves the pub drunk. The second UI orders a drink, pays for it up front, orders another drink, pays for it and so on, and in a couple of hours leaves the pub drunk. The third UI exits the pub already drunk immediately after going in — it knows how the pubs work and is efficient enough not to lose time. Have you heard of this third one? It is called an “optimistic UI.”

¹

Recently, having discussed psychological performance optimization³ at a number of conferences dedicated to both front-end development and UX, I was surprised to see how little the topic of optimistic UI design is addressed in the community. Frankly, the term itself is not even well defined. In this article, we will find out what concepts it is based on, and we will look at some examples as well as review its psychological background. After that, we will review the concerns and main points regarding how to maintain control over this UX technique.

But before we begin, truth be told, no single thing could be called an “optimistic UI.” Rather, it is the mental model behind the implementation of an interface. Optimistic UI design has its own history and rationale.

Once Upon A Time Link

A long while ago — when the word “tweet” applied mostly to birds, Apple was on the verge of bankruptcy and people still put fax numbers on their business cards — web interfaces were quite ascetic. And the vast majority of them had not even a hint of optimism. An interaction with a button, for example, could follow a scenario similar to the following:

1. The user clicks a button.
2. The button is triggered into a disabled state.
3. A call is sent to a server.
4. A response from the server is sent back to the page.
5. The page is reloaded to reflect the status of the response.

⁴

This might look quite inefficient in 2016; however, surprisingly enough, the same scenario is still used in a lot of web pages and applications and is still a part of the interaction process for many products. The reason is that it is predictable and more or less error-prone: The user knows that the action has been requested from the server (the disabled state of the button hints at this), and once the server responds, the updated page clearly indicates the end of this client-server-client interaction. The problems with this kind of interaction are quite obvious:

• The user has to wait. By now, we know that even the shortest delay in the server’s response time has a negative effect on the user’s perception⁶ of the entire brand, not only on this particular page.
• Every time the user gets a response to their action, it is presented in quite a destructive way (a new page loads, instead of the existing one being updated), which breaks the context of the user’s task and might affect their train of thought³⁷⁷. Even though we are not necessarily talking about multitasking⁸ in this case, any switch of mental context is unpleasant. So, if an action is not inherently meant to switch contexts (online payment is a good example of when a switch is natural), switching would set up an unfriendly tone of dialogue between user and system.

Good Not-So-Old Days Link

Then, the so-called Web 2.0 arrived and provided new modes of interaction with web pages. The core of these were XMLHttpRequest and AJAX. These new modes of interaction were complemented by “spinners”: the simplest form of progress indicator, the sole purpose of which was to communicate to the user that the system is busy performing some operation. Now, we did not need to reload the page after getting a response from the server; we could just update a part of the already-rendered page instead. This made the web much more dynamic, while allowing for smoother and more engaging experiences for users. The typical interaction with a button could now look like this:

1. The user clicks a button.
2. The button is triggered into a disabled state, and a spinner of some kind is shown on the button to indicate the system is working.
3. A call is sent to the server.
4. A response from the server is sent back to the page.
5. The visual state of the button and the page are updated according to the response status.

This new interaction model addressed one of the aforementioned problems of the old method of interaction: The update of the page happens without a destructive action, keeping the context for the user and engaging them in the interaction much better than before.

⁹

This kind of interaction pattern has been widely used everywhere in digital media. But one issue remains: Users still have to wait for a response from the server. Yes, we can make our servers respond faster, but no matter how hard we try to speed up the infrastructure, users still have to wait. Again, users do not like to wait, to put it mildly. For example, research shows¹¹ that 78% of consumers feel negative emotions as a result of slow or unreliable websites. Moreover, according to a survey¹² conducted by Harris Interactive for Tealeaf, 23% of users confess to cursing at their phones, 11% have screamed at them, and a whole 4% have actually thrown their phone when experiencing a problem with an online transaction. Delays are among those problems.

¹³

Even if you show some kind of progress indicator while the user waits, unless you are very creative with the indicator¹⁵, nowadays that is simply not enough. For the most part, people have gotten accustomed to spinners indicating a system’s slowness. Spinners are now more associated with purely passive waiting¹⁶, when the user has no option other than either to wait for the server’s response or to close the tab or application altogether. So, let’s come up with a step to improve this kind of interaction; let’s look at this concept of an optimistic UI.

Optimistic UI Link

As mentioned, an optimistic UI is nothing more than a way of handling human-computer interaction. To understand the main ideas behind it, we will stick with our “user clicks a button” scenario. But the principle will be the same for pretty much any kind of interaction that you might want to make optimistic. According to the Oxford English Dictionary¹⁷:

op-ti-mis-tic, adj. hopeful and confident about the future.

Let’s begin with the “confident about the future” part.

What do you think: How often does your server return an error on some user action? For example, does your API fail often when users click a button? Or maybe it fails a lot when users click a link? Frankly, I don’t think so. Of course, this might vary based on the API, server load, level of error-handling and other factors that you, as the front-end developer or UX specialist, might not be willing to get involved in. But as long as the API is stable and predictable and the front end properly communicates legitimate actions in the UI, then the number of errors in response to actions initiated by the user will be quite low. I would go so far as to state that they should never go above 1 to 3%. This means that in 97 to 99% of cases when the user clicks a button on a website, the server’s response should be success, with no error. This deserves to be put in a better perspective:

¹⁸

Think about it for a moment: If we were 97 to 99% certain about a success response, we could be confident about the future of those responses — well, at least much more confident about the future than Schrödinger’s cat was. We could write a whole new story about button interaction:

1. The user clicks a button.
2. The visual state of the button is triggered into success mode instantly.

That’s it! At least from the user’s point of view, there is nothing more to it — no waiting, no staring at a disabled button, and not yet another annoying spinner. The interaction is seamless, without the system crudely stepping in to remind the user about itself.

²⁰

From the developer’s point of view, the complete cycle looks like this:

1. The user clicks a button.
2. The visual state of the button is triggered into success mode instantly.
3. The call is sent to the server.
4. The response from the server is sent back to the page.
5. In 97 to 99% of cases, we know that the response will be success, and so we don’t need to bother the user.
6. Only in the case of a failed request will the system speak up. Don’t worry about this for now — we will get to this point later in the article.

Let’s look at some examples of optimistic interactions. You are probably familiar with “like” buttons, as found on Facebook and Twitter. Let’s take a look at the latter.

It starts, obviously enough, with the click of the button. But note the visual state of the button when the user is no longer pressing or hovering over the button. It switches to the success state instantly!

²²

Let’s see what’s happening in the “Network” tab of our browser’s developer tools at this very moment.

²³

The “Network” tab shows that the server request has been sent but is still in progress. The “likes” counter number has not been incremented yet, but with the change in color, the interface is clearly communicating success to the user, even before having gotten a response from the server.

After a successful response is received from the server, the counter is updated, but the transition is much subtler than the instant color change. This provides the user with a smooth, uninterrupted experience, without any perceived waiting.

²⁵

Another example of optimistic interaction is seen on Facebook, with its own like button. The scenario is quite similar, except that Facebook updates the counter instantly, together with success color of the button, without waiting for the server’s response.

²⁷

One thing to note here, though. If we look at the server’s response time, we’ll see that it is a little over 1 second. Considering that the RAIL model recommends²⁸100 milliseconds as the optimal response time for a simple interaction, this would normally be way too long. However, the user does not perceive any wait time in this case because of the optimistic nature of this interaction. Nice! This is another instance of psychological performance optimization²⁹.

But let’s face it: There is still that 1 to 3% chance that the server will return an error. Or perhaps the user is simply offline. Or, more likely, perhaps the server returns what is technically a success response but the response contains information that has to be further processed by the client. As a result, the user will not get a failure indicator, but we cannot consider the response a success either. To understand how to deal with such cases, we should understand why and how optimistic UIs work psychologically in the first place.

The Psychology Behind Optimistic UIs Link

So far, I have not heard anyone complain about the aforementioned optimistic interactions on the major social networks. So, let’s say that these examples have convinced us that optimistic UIs work. But why do they work for users? They work simply because people hate waiting. That’s it, folks! You can skip to the next part of the article.

But if you’re still reading, then you are probably interested in knowing why it is so. So, let’s dig a bit deeper into the psychological ground of this approach.

³⁰

An optimistic UI has two basic ingredients that are worth psychological analysis:

• the fast response to the user’s action;
• the handling of potential failures on the server, on the network and elsewhere.

Fast Response to User Action Link

When we talk about optimistic UI design, we’re talking about an optimal response time in human-computer interaction. And recommendations for this type of communication have been around since as far back as 1968. Back then, Robert B. Miller published his seminal piece “Response Time in Man-Computer Conversational Transactions³²” (PDF), in which he defines as many as 17 different types of responses a user can get from a computer. One of those types Miller calls a “response to control activation” — the delay between the depressing of a key and the visual feedback. Even back in 1968, it should have not exceeded 0.1 to 0.2 seconds. Yes, the RAIL model³³ is not the first to recommend this — the advice has been around for about 50 years. Miller notes, though, that even this short delay in feedback might be far too slow for skilled users. This means that, ideally, the user should get acknowledgement of their action within 100 milliseconds. This is getting into the range of one of the fastest unconscious actions the human body can perform — an eye blink. For this reason, the 100-millisecond interval is usually perceived to be instant. “Most people blink around 15 times a minute and a blink lasts on average 100 to 150 milliseconds,” says Davina Bristow³⁴, of University College London’s Institute of Neurology, adding that this “means that overall we spend at least 9 days per year blinking.”

Because of its instant visual response (even before the actual request has finished), an optimistic UI is one of the examples of the early-completion³⁵ techniques used in psychological performance optimization. But the fact that people like interfaces that respond in the blink of an eye should not come as a surprise to most of us, really. And it’s not hard to achieve either. Even in the old days, we disabled buttons instantly after they were clicked, and this was usually enough to acknowledge the user’s input. But a disabled state in an interface element means passive waiting³⁶: The user cannot do anything about it and has no control over the process. And this is very frustrating for the user. That’s why we skip the disabled state altogether in an optimistic UI — we communicate a positive outcome instead of making the user wait.

Handling Potential Failure Link

Let’s get to the second interesting psychological aspect of optimistic UI design — the handling of potential failure. In general, plenty of information and articles are available on how to handle UI errors in the best possible way. However, while we will see how to handle failure later in this article, what matters most in an optimistic UI is not how we handle errors, but when we do it.

Humans naturally organize their activity into clumps, terminated by the completion of a subjectively defined purpose or sub-purpose. Sometimes we refer to these clumps as a “train of thought³⁷⁷,” a “flow of thought³⁸” (PDF) or simply a “flow³⁹.” The flow state is characterized by peak enjoyment, energetic focus and creative concentration. During a flow, the user is completely absorbed in the activity. A tweet by Tammy Everts⁴⁰ nicely illustrates this:

⁴¹

On the web, the durations of such clumps of activity are much shorter. Let’s revisit Robert B. Miller’s work for a moment. The response types he cites include:

• a response to a simple inquiry of listed information;
• a response to a complex inquiry in graphic form;
• a response to “System, do you understand me?”

He ties all of these to the same 2-second interval within which the user should get the relevant type of response. Without digging deeper, we should note that this interval also depends on a person’s working memory⁴³ (referring to the span of time within which a person can keep a certain amount of information in their head and, more importantly, be able to manipulate it). To us, as developers and UX specialists, this means that within 2 seconds of interacting with an element, the user will be in a flow and focused on the response they are expecting. If the server returns an error during this interval, the user will still be in “dialogue” with the interface, so to speak. It’s similar to a dialogue between two people, where you say something and the other person mildly disagrees with you. Imagine if the other person spent a long time nodding in agreement (the equivalent of our indication of a success state in the UI) but then finally said “no” to you. Awkward, isn’t it? So, an optimistic UI must communicate failure to the user within the 2 seconds of the flow.

⁴⁴

Armed with the psychology of how to handle failure in an optimistic UI, let’s finally get to those 1 to 3% of failed requests.

The Pessimistic Side Of Optimistic UI Design Link

By far, the most common remark I hear is that optimistic UI design is a kind of black pattern — cheating, if you will. That is, by employing it, we are lying to our users about the result of their interaction. Legally, any court would probably support this point. Still, I consider the technique a prediction or hope. (Remember the definition of “optimistic”? Here is where we allow some room for the “hopeful” part of it.) The difference between “lying” and “predicting” is in how you treat those 1 to 3% of failed requests. Let’s look at how Twitter’s optimistic “like” button behaves offline.

First, in line with the optimistic UI pattern, the button switches to the success state right after being clicked — again, without the user pressing or hovering over the button any longer, exactly as the button behaves when the user is online.

⁴⁶

But because the user is offline, the request fails.

⁴⁸

So, as soon as possible within the user’s flow, the failure should be communicated. Again, 2 seconds is usually the duration of such a flow. Twitter communicates this in the subtlest way possible, simply by reverting the button’s state.

⁵⁰

The conscientious reader here might say that this failure-handling could be taken one step further, by actually notifying the user that the request could not be sent or that an error has occurred. This would make the system as transparent as possible. But there is a catch — or, rather, a series of issues:

• Any sort of notification that appears suddenly on screen would switch the user’s context, prompting them to analyze the reason behind the failure, a reason that would probably be presented in the error message.
• As with any error message or notification, this one should guide the user in this new context by providing actionable information.
• That actionable information would set yet another context.

OK, by now we can all agree that this is getting a bit complicated. While this error-handling would be reasonable for, say, a large form on a website, for an action as simple as clicking a like button, it’s overkill — both in terms of the technical development required and the working memory of users.

So, yes, we should be open about failure in an optimistic UI, and we should communicate it as soon as possible so that our optimism does not become a lie. But it should be proportional to the context. For a failed like, subtly reverting the button to its original state should be enough — that is, unless the user is liking their significant other’s status, in which case the thing better work all the time.

Extreme Pessimism Link

One other question might arise: What happens if the user closes the browser tab right after getting a success indicator but before the response is returned from the server? The most unpleasant case would be if the user closes the tab before a request has even been sent to the server. But unless the user is extremely nimble or has the ability to slow down time, this is hardly possible.

If an optimistic UI is implemented properly, and interactions are applied only to those elements that never wait longer than 2 seconds for a server response, then the user would have to close the browser tab within that 2-second window. That’s not particularly difficult with a keystroke; however, as we’ve seen, in 97 to 99% of cases, the request will be successful, whether the tab is active or not (it’s just that a response won’t be returned to the client).

So, this problem might arise only for those 1 to 3% who get a server error. Then again, how many of those rush to close the tab within 2 seconds? Unless they’re in a tab-closing speed competition, I don’t think the number will be significant. But if you feel this is relevant to your particular project and might have negative consequences, then employ some tools to analyze user behavior; if the probability of such a scenario is high enough, then limit optimistic interaction to non-critical elements.

I intentionally haven’t mentioned cases in which a request is artificially delayed; these do not generally fall under the umbrella of optimistic UI design. Moreover, we have spent more than enough time on the pessimistic side of things, so let’s summarize some main points about implementing a good optimistic UI.

Rules Of Thumb Link

I sincerely hope this article has helped you to understand some of the main concepts behind optimistic UI design. Perhaps you’re interesting in trying out this approach in your next project. If so, here are some things to keep in mind before you begin:

• A prerequisite to everything we’ve talked about so far: Make sure the API you’re relying on is stable and returns predictable results. Enough said.
• The interface should catch potential errors and problems before a request is sent to the server. Better yet, totally eliminate anything that could result in an error from the API. The simpler a UI element is, the simpler it will be to make it optimistic.
• Apply optimistic patterns to simple binary-like elements for which nothing more than a success or failure response is expected. For example, if a button click assumes a server response such as “yes,” “no” or “maybe” (all of which might represent success to varying degrees), such a button would be better off without an optimistic pattern.
• Know your API’s response times. This is crucial. If you know that the response time for a particular request never goes below 2 seconds, then sprinkling some optimism over your API first is probably best. As mentioned, an optimistic UI works best for server response times of less than 2 seconds. Going beyond that could lead to unexpected results and a lot of frustrated users. Consider yourself warned.
• An optimistic UI is not just about button clicks. The approach could be applied to different interactions and events during a page’s lifecycle, including the loading of the page. For example, skeleton screens⁵² follow the same idea: You predict that the server will respond with success in order to fill out placeholders to show to the user as soon as possible.

⁵³

Optimistic UI design is not really a novelty on the web, nor is it a particularly advanced technique, as we have seen. It is just another approach, another mental model, to help you manage the perceived performance⁵⁵ of your product. Being grounded in the psychological aspects of human-computer interaction, optimistic UI design, when used intelligently, can help you to build better, more seamless experiences on the web, while requiring very little to implement. But, in order to make the pattern truly effective and to keep our products from lying to users, we must understand the mechanics of optimistic UI design.

Resources Link

• “Response Time in Man-Computer Conversational Transactions⁵⁶” (PDF), Robert B. Miller, Fall Joint Computer Conference, 1968
• “Introducing RAIL: A User-Centric Model for Performance⁵⁷,” Paul Irish, Paul Lewis, Smashing Magazine, 2015
• “Mobile Web Stress: The Impact of Network Speed on Emotional Engagement and Brand Perception⁵⁸,” Tammy Everts, Radware Blog, 2013
• Applications of Flow in Human Development and Education⁵⁹, Mihaly Csikszentmihalyi, 2014
• “Mobile Design Details: Avoid the Spinner⁶⁰,” Luke Wroblewski, 2013
• “Why Performance Matters, Part 2: Perception Management⁶¹,” Denys Mishunov, Smashing Magazine, 2015

(rb, al, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/wp-content/uploads/2016/11/optimistic-ui-large-opt-1.png
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/11/optimistic-ui-large-opt-1.png
3. 3 https://vimeo.com/184659742
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/11/old-ui-large-opt-1.png
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/11/old-ui-large-opt-1.png
6. 6 https://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2013/12/mobile-web-stress-the-impact-of-network-speed-on-emotional-engagement-and-brand-perception-report/
7. 7 https://en.wikipedia.org/wiki/Train_of_thought
8. 8 http://www.apa.org/research/action/multitask.aspx
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/11/spinner-ui-large-opt-1.png
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/11/spinner-ui-large-opt-1.png
11. 11 http://www.techradar.com/news/world-of-tech/roundup/consumers-dump-slow-websites-1080742
12. 12 http://www.marketwired.com/press-release/tealeaf-announces-new-mobile-transaction-research-conducted-harris-interactive-shows-1419058.htm
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/11/cursing-phone-large-opt.png
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/11/cursing-phone-large-opt.png
15. 15 https://dribbble.com/shots/1901531-Loading
16. 16 https://www.smashingmagazine.com/2015/11/why-performance-matters-part-2-perception-management/
17. 17 https://books.google.com/books?id=mYicAQAAQBAJ&lpg=PA503&dq=%22hopeful+and+confident+about+the+future%22&pg=PA503&redir_esc=y#v=onepage&q=%22hopeful%20and%20confident%20about%20the%20future%22&f=false
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/11/failure-success-man-large-opt.png
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/11/failure-success-man-large-opt.png
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/11/optimistic-ui1-large-opt.png
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/11/optimistic-ui1-large-opt.png
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/11/twitter1-preview-opt.png
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/11/twitter2-large-opt.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/11/twitter2-large-opt.png
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/11/twitter3-large-opt.png
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/11/twitter3-large-opt.png
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/11/fb-preview-opt.png
28. 28 https://developers.google.com/web/fundamentals/performance/rail?hl%3Den%23response_respond_in_under_100ms
29. 29 https://www.smashingmagazine.com/2015/11/why-performance-matters-part-2-perception-management/
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/11/psychology-large-opt.png
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/11/psychology-large-opt.png
32. 32 https://www.computer.org/csdl/proceedings/afips/1968/5072/00/50720267.pdf
33. 33 https://developers.google.com/web/fundamentals/performance/rail
34. 34 http://www.ucl.ac.uk/media/library/blinking
35. 35 https://www.smashingmagazine.com/2015/11/why-performance-matters-part-2-perception-management/
36. 36 https://www.smashingmagazine.com/2015/11/why-performance-matters-part-2-perception-management/
37. 37 https://en.wikipedia.org/wiki/Train_of_thought
38. 38 http://www.unco.edu/cebs/psychology/kevinpugh/motivation_project/resources/flow6.pdf
39. 39 https://en.wikipedia.org/wiki/Mihaly_Csikszentmihalyi%23Flow
40. 40 https://twitter.com/tameverts/status/783800032436695040
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/11/tammy-large-opt.png
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/11/tammy-large-opt.png
43. 43 http://www.simplypsychology.org/working%20memory.html
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/11/optimistic-ui2-large-opt.png
45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/11/optimistic-ui2-large-opt.png
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/11/twitter-offline1-large-opt.png
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/11/twitter-offline1-large-opt.png
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/11/twitter-offline2-large-opt.png
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/11/twitter-offline2-large-opt.png
50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/11/twitter-offline3-large-opt.png
51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/11/twitter-offline3-large-opt.png
52. 52 http://www.lukew.com/ff/entry.asp?1797
53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/11/finish-large-opt.png
54. 54 https://www.smashingmagazine.com/wp-content/uploads/2016/11/finish-large-opt.png
55. 55 https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/
56. 56 http://theixdlibrary.com/pdf/Miller1968.pdf
57. 57 https://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/
58. 58 https://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2013/12/mobile-web-stress-the-impact-of-network-speed-on-emotional-engagement-and-brand-perception-report/
59. 59 http://www.springer.com/gp/book/9789401790932
60. 60 http://www.lukew.com/ff/entry.asp?1797
61. 61 https://www.smashingmagazine.com/2015/11/why-performance-matters-part-2-perception-management/

↑ Back to topTweet itShare on Facebook

We all recognize emoji. They’ve become the global pop stars of digital communication. But what are they, technically speaking? And what might we learn by taking a closer look at these images, characters, pictographs… whatever they are ? (Thinking Face). We will dig deep to learn about how these thingamajigs work.

Please note: Depending on your browser, you may not be able to see all emoji featured in this article (especially the Tifinagh¹ characters). Also, different platforms vary in how they display emoji as well. That’s why the article always provides textual alternatives. Don’t let it discourage you from reading though!

Now, let’s start with a seemingly simple question. What are emoji?

What Are Emoji? Link

 ⛅ ? ? ? ?? ? ?

What we’ll find is that they are born from, and depend on, the same technical foundation, character sets and document encoding that underlie the rest of our work as web-based designers, developers and content creators. So, we’ll delve into these topics using emoji as motivation to explore this fundamental aspect of the web. We’ll learn all about emoji as we go, including how we can effectively work them into our own projects, and we’ll collect valuable resources along the way.

There is a lot of misinformation about these topics online, a fact made painfully clear to me as I was writing this article. Chances are you’ve encountered more than a little of it yourself. The recent release of Unicode 9 and the enormous popularity of emoji make now as good a time as any to take a moment to appreciate just how important this topic is, to look at it afresh and to fill in any gaps in our knowledge, large or small.

By the end of this article, you will know everything you need to know about emoji, regardless of the platform or application you’re using, including the distributed web. What’s more, you’ll know where to find the authoritative details to answer any emoji-related question you may have now or in the future.

21 June 2016 brought the official release of Unicode Version 9.0², and with it 72 new emoji. What are they? Where do new emoji come from anyway? Why aren’t your friends seeing the new ROFL, Fox Face, Crossed Fingers and Pancakes emoji you’re sending them?! ? (Pouting Face emoji) Keep reading for the answers to these and many other questions.

A question to get us started: What is the plural form of the word “emoji”?

It’s a question that came up in the process of reviewing and editing this article. The good news is that I have an answer! The bad news (depending on how bothered you are by triviality) is that the answer is that there is no definitive answer. I believe the most accurate answer that can be given is to say that, currently, there is no established correct form for the plural of emoji.

An article titled “What’s the Plural of Emoji?³” by Robinson Meyer⁴, published by The Atlantic⁵ on 6 January 2016, discusses exactly this issue. The author turns up recent conflicting uses of both forms “emoji” and “emojis,” even within the same national publications:

In written English right now, there’s little consensus on this question. National publications have not settled on a regular style. The Atlantic, for instance, used both (emoji⁶, emojis⁷) in the last quarter of 2015. And in October alone in The New York Times, you could find the technology reporter Vindu Goel covering Facebook’s “six new emoji,”⁸ despite, two weeks later, Austin Ramzy detailing the Australian foreign minister’s “liberal use of emojis⁹.” …

The Unicode Emoji Subcommittee, which, as we will see, is the group responsible for emoji in the Unicode Standard, uses “emoji” as the plural form. This plural form appears in passages of documentation quoted in this article. Consider, for example, the very first sentence of the first paragraph of the Emoji Subcommittee’s official homepage at unicode.org¹⁰:

Emoji are pictographs (pictorial symbols) that are typically presented in a colorful form and used inline in text. They represent things such as faces, weather, vehicles and buildings, food and drink, animals and plants, or icons that represent emotions, feelings, or activities.

I have chosen the plural “emoji”, for the sake of consistency if nothing else. At this point in time, you can confidently use whichever form you prefer, unless of course the organization or individual for whom you’re writing has strong opinions one way or the other. You can and should consult your style guide if necessary.

We’ll start at the beginning, with the basic building blocks not just of emoji, nor even digital communication, but of all written language: characters and character sets.

Table of Contents Link

1. Character Sets And Document Encoding: An Overview¹¹
   1. Characters¹²
   2. Character Sets¹³
   3. Coded Character Sets¹⁴
   4. Encoding¹⁵
2. Declaring Character Sets And Document Encoding On The Web¹⁶
   1. content-type HTTP Header Declaration¹⁷
   2. Checking HTTP Headers Using A Browser’s Developer Tools¹⁸
   3. Checking HTTP Headers Using Web-based Tools¹⁹
   4. Using A Meta Element With charset Attribute²⁰
   5. An Encoding By Any Other Name²¹
3. What Were We Talking About Again? Oh Yeah, Emoji!²²
   1. So What Are Emoji?²³
   2. How Do We Use Emoji?²⁴
   3. Character References²⁵
   4. Glyphs²⁶
   5. How Do We Know If We Have These Symbols?²⁷
   6. The Great Emoji Proliferation Of 2016²⁸
4. Emoji OS Support²⁹
   1. Emoji Support: Apple Platforms (macOS and iOS)³⁰
   2. Emoji Support: Windows³¹
   3. Emoji Support: Linux³²
   4. Emoji Support: Android³³
5. Emoji On The Web³⁴
   1. Emoji One³⁵
   2. Twemoji³⁶
6. Conclusion³⁷

Character Sets And Document Encoding: An Overview

Characters

A dictionary definition for a character will do to get us started: “A character is commonly a symbol representing a letter or number.”

That’s simple enough. But like so many other concepts, for it to be meaningful, we need to consider the broader context and put it into practice. Characters, in and of themselves, are not enough. I could draw a squiggle with a pencil on a piece of paper and rightfully call it a character, but that wouldn’t be particularly valuable. Not only that, but it is difficult to convey a useful amount of information using a single character. We need more.

Character Sets

A character set is “a set of characters.”

Expanding on that a bit, we can take a step back and consider a slightly more precise but still general description of a set: a group or collection of things that belong together, resemble one another or are usually found together.

Because we’re dealing with sets in the context of computing, we can be a little more precise. In the field of computer science a set is: a collection of a finite number of values in no particular order, with the added condition that none of the values are repeated.

What’s this about a collection? Technically speaking, a collection is a grouping of a number of items, possibly zero, that have some shared significance.

So, a character set is a grouping of some finite number of characters (i.e. a collection), in no particular order, such that none of the characters are repeated.

That’s a solid, precise, if pedantic, definition.

The World Wide Web Consortium (W3C³⁸), the international community of member organizations that work together to develop standards for the web, has its own definition, which is not far from the generic one we’ve arrived at on our own.

From the W3C’s “Character Encodings: Essential Concepts³⁹“:

A character set or repertoire comprises the set of characters one might use for a particular purpose — be it those required to support Western European languages in computers, or those a Chinese child will learn at school in the third grade (nothing to do with computers).

So, any arbitrary set of characters can be considered a character set. There are, however, some well-known standardized character sets that are much more significant than any random grouping we might put together. One such standardized character set, unarguably the most important character set in use today, is Unicode. Again, quoting the W3C⁴⁰:

Unicode is a universal character set, i.e. a standard that defines, in one place, all the characters needed for writing the majority of living languages in use on computers. It aims to be, and to a large extent already is, a superset of all other character sets that have been encoded.

Text in a computer or on the Web is composed of characters. Characters represent letters of the alphabet, punctuation, or other symbols.

In the past, different organizations have assembled different sets of characters and created encodings for them — one set may cover just Latin-based Western European languages (excluding EU countries such as Bulgaria or Greece), another may cover a particular Far Eastern language (such as Japanese), others may be one of many sets devised in a rather ad hoc way for representing another language somewhere in the world.

Unfortunately, you can’t guarantee that your application will support all encodings, nor that a given encoding will support all your needs for representing a given language. In addition, it is usually impossible to combine different encodings on the same Web page or in a database, so it is usually very difficult to support multilingual pages using ‘legacy’ approaches to encoding.

The Unicode Consortium provides a large, single character set that aims to include all the characters needed for any writing system in the world, including ancient scripts (such as Cuneiform, Gothic and Egyptian Hieroglyphs). It is now fundamental to the architecture of the Web and operating systems, and is supported by all major web browsers and applications. The Unicode Standard also describes properties and algorithms for working with characters.

This approach makes it much easier to deal with multilingual pages or systems, and provides much better coverage of your needs than most traditional encoding systems.

We just learned that the Unicode Consortium is the group responsible for the Unicode Standard. From their website⁴¹:

The Unicode Consortium enables people around the world to use computers in any language. Our freely-available specifications and data form the foundation for software internationalization in all major operating systems, search engines, applications, and the World Wide Web. An essential part of our mission is to educate and engage academic and scientific communities, and the general public.

They provide the following answer to the question, what is Unicode?⁴²:

Unicode provides a unique number for every character,

no matter what the platform,

no matter what the program,

no matter what the language.

Fundamentally, computers just deal with numbers. They store letters and other characters by assigning a number for each one. Before Unicode was invented, there were hundreds of different encoding systems for assigning these numbers. No single encoding could contain enough characters: for example, the European Union alone requires several different encodings to cover all its languages. Even for a single language like English no single encoding was adequate for all the letters, punctuation, and technical symbols in common use.

These encoding systems also conflict with one another. That is, two encodings can use the same number for two different characters, or use different numbers for the same character. Any given computer (especially servers) needs to support many different encodings; yet whenever data is passed between different encodings or platforms, that data always runs the risk of corruption.

Unicode provides a unique number for every character, no matter what the platform, no matter what the program, no matter what the language. … The emergence of the Unicode Standard, and the availability of tools supporting it, are among the most significant recent global software technology trends.

In short, Unicode is a single (very) large set of characters designed to encompass “all the characters needed for writing the majority of living languages in use on computers.” As such, it “provides a unique number for every character, no matter what the platform, no matter what the program, no matter what the language.”

Both the W3C and Unicode Consortium use the term “encoding” as part of their definitions. Descriptions like that, helpful as they may be, are a big part of the reason why there is often confusion around what are in fact simple concepts. Encoding is a more involved, difficult-to-grasp concept than character sets, and one we’ll discuss shortly. Don’t worry about encoding quite yet; before we get from character sets to encoding, we need one more step.

Coded Character Sets

Going back to the same “Character Encodings: Essential Concepts” document, the W3C has something to say about coded character sets⁴³, too:

A coded character set is a set of characters for which a unique number has been assigned to each character. Units of a coded character set are known as code points. A code point value represents the position of a character in the coded character set. For example, the code point for the letter ‘à’ in the Unicode coded character set is 225 in decimal, or E1 in hexadecimal notation. (Note that hexadecimal notation is commonly used for referring to code points…)

Note: There is an unfortunate mistake in the passage above. The character displayed is “à” and the location given for that symbol in the Unicode coded character set is 225 in decimal, or E1 hexadecimal notation. But 225 (dec) / E1 (hex) is the location of “á,” not “à,” which is found at 224 (dec) / E0 (hex). Oops! ? (Unamused Face emoji)

That isn’t too difficult to understand. Being able to describe any one character with a numeric code is convenient. Rather than writing “the Latin script letter ‘a’ with a diacritic grave,” we can say xE0, the hexadecimal notation for the numeric location of that symbol (“à”) in the coded character set known as Unicode. Among other advantages of this arrangement, we can look up that character without having to know what “Latin script letter ‘a’ with a diacritic grave” means. The natural-language way of describing a character can be awkward for us, even more so for computers, which are both much better at looking up numeric references than we are and much worse at understanding natural-language descriptions.

So, a coded character set is simply a way to assign a numeric code to every character in a set such that there is a one-to-one correspondence between character and code. With that, not only is the Unicode Consortium’s description of Unicode more understandable, but we’re ready to tackle encoding.

 ⛅ ? ? ? ? ?? ?

Encoding

We’ve quickly reviewed characters, character sets and coded character sets. That brings us to the last concept we need to cover before turning our attention to emoji. Encoding is both the hardest concept to wrap our heads around and also the easiest. It’s the easiest because, as we’ll see, in a practical sense, we don’t need to know all that much about it.

We’ve come to an important point of transition. Character sets and coded character sets are in the human domain. These are concepts that we must have a good grasp of in order to confidently and effectively do our work. When we get to encoding, we’re transitioning into the realm of the computing devices and, more specifically, the low-level storage, retrieval and transmission of data. Encoding is interesting, and it is important that we get right what little of it we are responsible for, but we need only a high-level understanding of the technical details in order to do our part.

The first thing to know is that “character sets” and “encodings” (or, for our purpose here, “document encodings”) are not the same thing. That may seem obvious to you, especially now that we’re clearly discussing them separately, but it is a common source of confusion. The relationship is a little easier to understand, and keep straight, if we think of the latter as “character set encodings.”

It’s back to the W3C’s “Character Encodings: Essential Concepts” for a definition of encoding⁴⁴ to get us started:

The character encoding reflects the way the coded character set is mapped to bytes for manipulation by a computing device.

In the table below, which reproduces the same information from a graphic appearing in the W3C document, the first 4 characters and corresponding code points are part of the Tifinagh alphabet, and the fifth is the more familiar exclamation point.

Table 1: A representation of the same information from a graphic that appears in the W3C document “Character Encodings: Essential Concepts^1296446“

Character (glyph)	Hexadecimal representation of Unicode code point	UTF-8 encoding (bytes in memory)
ⴰ	2D30	E2 B4 BO
ⵣ	2D63	E2 B5 A3
ⵓ	2D53	E2 B5 93
ⵍ	2D4D	E2 B5 8D
!	21	21

The table shows, from left to right, the symbol itself, the corresponding code point and the way the code point maps to a sequence of bytes using the UTF-8 encoding scheme. Each byte in memory is represented by a two-digit hexadecimal number. So, for example, in the first row we see that the UTF-8 encoding of the Tifinagh letter ya (ⴰ) requires 3 bytes of storage (E2 B4 BO).

There are two important points to take away from the information in this table:

First, encodings are distinct from the coded character sets. The coded character set is the information that is stored, and the encoding is the manner in which it is stored. (Don’t worry about the specifics.)

Secondly, note how under the UTF-8 encoding scheme the Tifinagh code points map to three bytes, but the exclamation point maps to a single byte.

From the W3C⁴⁹:

Although the code point for the letter à in the Unicode coded character set is always 225 (in decimal), in UTF-8 it is represented in the computer by two bytes. … there isn’t a trivial, one-to-one mapping between the coded character set value and the encoded value for this character. … the letter à can be represented by two bytes in one encoding and four bytes in another.

The encoding forms that can be used with Unicode are called UTF-8, UTF-16, and UTF-32.

The W3C’s explanation is accurate, concise, informative and, for many readers, clear as mud. At this point, we’re dealing with pretty low-level stuff. Let’s keep pushing ahead; as is often the case, learning more will give us the context we need to better understand what we’ve already seen.

UTF is a set of encodings specifically created for the implementation of Unicode. It is part of the core specification of Unicode itself.

The Unicode Consortium maintains an official website for Unicode 9.0⁵⁰ (as well as all previous versions of the specification). A PDF of the core specification⁵¹ was just recently published to the website in August 2016. You’ll find the discussion of UTF in “Section 2.5: Encoding Forms.”

Computers handle numbers not simply as abstract mathematical objects, but as combinations of fixed-size units like bytes and 32-bit words. A character encoding model must take this fact into account when determining how to associate numbers with the characters.

Actual implementations in computer systems represent integers in specific code units of particular size—usually 8-bit (= byte), 16-bit, or 32-bit. In the Unicode character encoding model, precisely defined encoding forms specify how each integer (code point) for a Unicode character is to be expressed as a sequence of one or more code units. The Unicode Standard provides three distinct encoding forms for Unicode characters, using 8-bit, 16-bit, and 32-bit units. These are named UTF-8, UTF-16, and UTF-32, respectively. The “UTF” is a carryover from earlier terminology meaning Unicode (or UCS) Transformation Format. Each of these three encoding forms is an equally legitimate mechanism for representing Unicode characters; each has advantages in different environments.

Note: These encoding forms are consistent from one version of the specification to the next. In fact, their stability is vital to maintaining the integrity of the Unicode standard. Whatever we read about the encoding forms in the Version 9.0 specification was true of Version 8.0⁵² as well, and will hold going forward.

The Unicode specification discusses at length the pros and cons and preferred usage of these three forms — UTF-8, UTF-16 and UTF-32 — endorsing the use of all three as appropriate. For the purposes of this brief discussion of UTF encoding, it’s enough to know the following:

• UTF-8 uses 1 byte to represent characters in the ASCII set, 2 bytes for characters in several more alphabetic blocks, 3 bytes for the rest of the BMP, and 4 bytes as needed for supplementary characters.
• UTF-16 uses 2 bytes for any character in the BMP, and 4 bytes for supplementary characters.
• UTF-32 uses 4 bytes for all characters.

From the brief description of storage requirements for the various UTF encodings above, you might guess that UTF-8 is more complicated to implement (owing to the fact that it is not fixed-width) but more space efficient than say UTF-32, which is more regular but less space-efficient, with every character taking up exactly 4 bytes.

Table 1: A representation of the same information from a graphic that appears in the W3C document “Character Encodings: Essential Concepts^1296446“

Encoding	ⴰ	ⵣ	ⵓ	ⵍ	!
UTF-8	E2 B4 BO	E2 B5 A3	E2 B5 93	E2 B5 8D	21
UTF-16	2D 30	2D 63	2D 53	2D 4D	00 21
UTF-32	00 00 2D 30	00 00 2D 63	00 00 2D 53	00 2D 4D	00 00 00 21

Ignoring the Berber characters and focusing on the exclamation point in the rightmost column, we see that the same character would take up a single byte in UTF-8, 2 bytes (two times the storage) in UTF-16, and 4 bytes (four times the storage) in UTF-32. That’s three very different amounts of storage to convey the exact same information. Multiply that difference in storage requirements by the size of the web, estimated to be at least 4.83 billion pages⁶⁵ currently, and it’s easy to appreciate that the storage requirements of these encodings is not an inconsequential consideration.

Whether or not that all made sense to you, here’s the good news…

When dealing with HTML, the character set we’ll use is Unicode, and the character encoding is always UTF-8. It turns out that that’s all we’ll ever need to concern ourselves with. ? (Relieved Face emoji, U+1F60C) Regardless, it’s no less important to be aware of the general concepts, as well as the simple fact that there are other character sets and encodings.

Now, we can bring all of this to the context of the web, and start working our way toward emoji.

 ⛅ ? ? ? ? ?? ?

Declaring Character Sets And Document Encoding On the Web

We need to tell user agents (web browsers, screen readers, etc.) how to correctly interpret our HTML documents. In order to do that, we need to specify both the character set and the encoding. There are two (overlapping) ways to go about this:

• utilizing HTTP headers,
• declaring within the HTML document itself.

That gives us a very quick summary. After a period of officially working together, these two standards bodies have parted ways. However, there is still an awkward collaboration of sorts on the HTML5 standard itself. The WHATWG works on its specification, rolling in changes continually. Much like a modern evergreen operating system (OS) or application with an update feature, the latest changes are incorporated without waiting for the next official release. This is what the WHATWG means by “living standards,” which it describes as follows:

This means that they are standards that are continuously updated as they receive feedback, either from Web designers, browser vendors, tool vendors, or indeed any other interested party. It also means that new features get added to them over time, at a rate intended to keep the specifications a little ahead of the implementations but not so far ahead that the implementations give up.

Despite the continuous maintenance, or maybe we should say as part of the continuing maintenance, a significant effort is placed on getting the specifications and the implementations to converge — the parts of the specification that are mature and stable are not changed willy nilly. Maintenance means that the days where the specifications are brought down from the mountain and remain forever locked, even if it turns out that all the browsers do something else, or even if it turns out that the specification left some detail out and the browsers all disagree on how to implement it, are gone. Instead, we now make sure to update the specifications to be detailed enough that all the implementations (not just browsers, of course) can do the same thing. Instead of ignoring what the browsers do, we fix the spec to match what the browsers do. Instead of leaving the specification ambiguous, we fix the the [sic] specification to define how things work.

For its part, the W3C will from time to time package these updates (at least some of them), as well as its own changes possibly, to arrive at a new version of its HTML 5.x standard.

Assuming that the WHATWG process works as advertised — and that may be a pretty good assumption considering that many of the people directly involved with the WHATWG also work for the organizations responsible for the implementation of the standard (e.g. Apple, Google, Mozilla and Opera) — the best strategy is probably to refer to the WHATWG spec first. That is what I have done in this article. Where I quote from an HTML5 spec, I am referencing the WHATWG specification. I do, however, make use of informational documents from the W3C throughout the article because they are helpful and not inconsistent with either spec.

Honestly, for our purposes here, it hardly matters. The sections I pull from are nearly (though not strictly) identical. But I suppose that’s really part of the problem, rather than evidence of cohesiveness. To get a sense of just how messy the situation is, take a look at the “Fork Tracking” page on the WHATWG’s wiki⁷⁰.

content-type HTTP Header Declaration

As long as we’re talking about the web, there’s good reason to believe that the W3C has something to say⁷¹ about the topic:

When you retrieve a document, a web server sends some additional information. This is called the HTTP header. Here is an example of the kind of information about the document that is passed as part of the header with a document as it travels from the server to the client.

 HTTP/1.1 200 OK Date: Wed, 05 Nov 2003 10:46:04 GMT Server: Apache/1.3.28 (Unix) PHP/4.2.3 Content-Location: CSS2-REC.en.html Vary: negotiate,accept-language,accept-charset TCN: choice P3P: policyref=http://www.w3.org/2001/05/P3P/p3p.xml Cache-Control: max-age=21600 Expires: Wed, 05 Nov 2003 16:46:04 GMT Last-Modified: Tue, 12 May 1998 22:18:49 GMT ETag: "3558cac9;36f99e2b" Accept-Ranges: bytes Content-Length: 10734 Connection: close Content-Type: text/html; charset=UTF-8 Content-Language: en 

If your document is dynamically created using scripting, you may be able to explicitly add this information to the HTTP header. If you are serving static files, the server may associate this information with the files. The method of setting up a server to pass character encoding information in this way will vary from server to server. You should check with the documentation or your server administrator.

Without getting too heavily into the details, while still coming away from the discussion with some sense of how this works, let’s clarify some of the terminology.

HTTP is the network application protocol underlying communication on the web. (The same protocol is also used in other contexts, but was originally designed for the web.) HTTP is a client-server protocol and facilitates communication between the software making a request (the client) and the software fulfilling or responding to the request (the server) by exchanging request and response messages. These messages all must follow a well-defined, standardized structure so that they can be anticipated and interpreted properly by the recipient.

Part of this structure is a header providing information about the message itself, about the capabilities or requirements of the originator or of the recipient of the message, and so on. The header consists of a number of individual header lines. Each line represents a single header field comprising a lone key-value pair. One of the approximately 45+ defined fields is Content-Type, which identifies both the encoding and character set of the content of the message.

In the example above, among the header lines, we see:

 Content-Type: text/html; charset=UTF-8 

The field contains two pieces of information.

The first is the media type⁷⁴, text/html, which identifies the content of the message as an HTML document, which a web server can process directly. There are other media types, like application/pdf (a PDF document), which generally need to be handled differently.

The second piece of information is the document encoding and character set, charset=UTF-8. As we’ve already seen, UTF-8 is exclusively used with Unicode. So UTF-8 alone is enough to identify both the encoding and character set.

You can view these HTTP headers yourself. Options for doing so include, among others:

• Browser development tools
• web-based tools

Checking HTTP Headers Using A Browser’s Developer Tools

Checking HTTP Headers with Firefox (Recent Versions)

1. Open the “Web Console” from the “Tools” → “Web Developer” menu.
2. Select the “Network” tab in the pane that appears (at the bottom of the browser window, if you haven’t changed this default).
3. Navigate to a web page you’d like to inspect. You’ll see a list consisting of all resources that contribute to the page fill-in, including the root document, at the top (with component resources listed underneath).
4. Select any one of these resources from the list for which you’d like to look at the accompanying headers. (The pane should split.)
5. Select the “headers” tab in the new pane that appears.
6. You’ll see response and request headers corresponding to both ends of the exchange, and among the response headers you should find the Content-Type field.

Checking HTTP Headers with Chrome (Recent Versions)

1. Open the “Developer Tools” from the “View” → “Developer” menu.
2. Select the “Network” tab in the pane that appears (at the bottom of the browser window, if you haven’t changed this default).
3. Navigate to a web page you’d like to inspect. You’ll see a list of all resources that contribute to the page fill-in, including the root document, at the top (with component resources listed underneath).
4. Select any one of these resources from the list for which you’d like to look at the accompanying headers. (The pane should split.)
5. Select the “headers” tab in the new pane that appears.
6. You’ll see response and request headers corresponding to both ends of the exchange, and among the response headers you should find the Content-Type field.

Checking HTTP Headers Using Web-Based Tools

Many websites allow you to view the HTTP headers returned from the server for any public website, some much better than others. One reliable option is the W3C’s own Internationalization Checker⁷⁵.

Simply type a URL into the provided text-entry field, and the page will return a table with information related to the internationalization and language of the document at that address. You should see a section titled “Character Encoding,” with a row for the “HTTP Content-Type” header. You’re hoping to see a value of utf-8.

Using A Meta Element With charset Attribute

We can also declare the character set and encoding in the document itself. More specifically, we can use an HTML meta element to specify the character set and encoding.

There are two different, widely used, equally valid formats (both interpreted in exactly the same way).

There is the older HTML 4.x format:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

And the newer, equivalent, HTML5 version:

<meta charset="UTF-8"> 

The latter form is shorter and, so, easier to type and harder to get wrong accidentally, and it takes up less space. For these reasons, it’s the one we should use.

It might occur to you to ask (or not), “If the browser needs to know the character set and encoding before it can read the document, how can it read the document to find the meta element and get the value of the charset attribute?”

That’s a good question. How clever of you. ? (Octopus emoji, U+1F419 — widely considered to be among the cleverest of all animal emoji⁷⁶) I probably wouldn’t have thought to ask that. I had to learn to ask that question. (Sometimes it’s not just the answers we need to learn, but the questions as well.)

For the answer to this apparent riddle, I’ll quote an often-cited blog post by Joel Spolsky on the topic of character sets and encoding, titled “The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)⁷⁷“:

It would be convenient if you could put the Content-Type of the HTML file right in the HTML file itself, using some kind of special tag. Of course this drove purists crazy… how can you read the HTML file until you know what encoding it’s in?! Luckily, almost every encoding in common use does the same thing with characters between 32 and 127, so you can always get this far on the HTML page without starting to use funny letters:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

But that meta tag really has to be the very first thing in the <head> section because as soon as the web browser sees this tag it’s going to stop parsing the page and start over after reinterpreting the whole page using the encoding you specified.

Notice the use of the older-style meta element. This post is from 2003 and, therefore, predates HTML5.

That makes sense, right? Let’s also take a look at what the HTML spec has to say about it. From the WHATWG HTML5 spec on “Specifying the Document’s Character Encoding⁷⁸“:

The element containing the character encoding declaration must be serialized completely within the first 1024 bytes of the document.

In order to satisfy this condition as safely as possible, it’s best practice to have the meta element specifying the charset as the first element in the head section of the page.

This means that every HTML5 document should begin very much like the following (the only differences being the title text, possibly the value of the lang attribute, the use of white space, single versus double quotation marks around attribute values, and capitalization).

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example title</title> </head> <body></body> </html>

Now you might be thinking, “Great, I can specify the character set and encoding in the HTML document. I’d much rather do that than worry about HTTP header field values.”

I don’t blame you. But that begs the question, “What happens if the character set and encoding are set in both places?”

Maybe somewhat surprisingly the information in the HTTP headers takes precedence. Yes, that’s right, the meta element and charset attribute do not override the HTTP headers. (I think I remember being surprised by this.) ? (Slightly Frowning Face emoji, U+1F641)

The W3C tells us in “Declaring Character Encodings in HTML⁷⁹“:

If you have access to the server settings, you should also consider whether it makes sense to use the HTTP header. Note however that, since the HTTP header has a higher precedence than the in-document meta declarations, content authors should always take into account whether the character encoding is already declared in the HTTP header. If it is, the meta element must be set to declare the same encoding.

There’s no getting away from it. To avoid problems, we should always make sure the value is properly set in the HTTP header as well as in the HTML document.

An Encoding By Any Other Name

Before we finish with character sets and encoding and move on to emoji, there are two other complications to consider. The first is as subtle as it is obvious.

It’s not enough to declare a document is encoded in UTF-8 — it must be encoded in UTF-8! To accomplish this, your editor needs to be set to encode the document as UTF-8. It should be a preference within the application.

Say, I have a joke for you… What time is it when you have an editor that doesn’t allow you to set the encoding to UTF-8?

Punchline: Time to get a new editor! ? (Face with rolling eyes emoji, U+1F644)

So, we’ve specified the character set and encoding both in the HTTP headers and in the document itself, and we’ve taken care that our files are encoded in UTF-8. Now, thanks to Unicode and UTF-8, we can know, without any doubt, that our documents will be interpreted and displayed properly for every visitor using any browser or other user agent on any device, running any software, anywhere in the world. But is that true? No, it’s not quite true.

There is still a missing piece of the puzzle. We’ll come back to this. Building suspense, that’s good writing! ? (Smiling Face with Mouth Open emoji, U+1F603)

 ⛅ ? ? ? ? ?? ?

What Were We Talking About Again? Oh Yeah, Emoji!

So What Are Emoji?

We’ve already mentioned the Unicode Consortium, the non-profit responsible for the Unicode standard.

There’s a subcommittee of the Unicode Consortium dedicated to emoji, called, unsurprisingly, the Unicode Emoji Subcommittee⁸⁰. As with the rest of the Unicode standard, the Unicode Consortium and its website (unicode.org⁸¹) are the authoritative source for information about emoji. Fortunately for us, it provides a wealth of accessible information, as well as some more formal technical documents, which can be a little harder to follow. An example of the former is its “Emoji and Dingbats” FAQ⁸².

Q: What are emoji?

A: Emoji are “picture characters” originally associated with cellular telephone usage in Japan, but now popular worldwide. The word emoji comes from the Japanese 絵 (e ≅ picture) + 文字 (moji ≅ written character).

Note: See those Japanese characters in this primarily English-language document? Thanks Unicode!

Emoji are often pictographs — images of things such as faces, weather, vehicles and buildings, food and drink, animals and plants — or icons that represent emotions, feelings, or activities. In cellular phone usage, many emoji characters are presented in color (sometimes as a multicolor image), and some are presented in animated form, usually as a repeating sequence of two to four images — for example, a pulsing red heart.

Q: Do emoji characters have to look the same wherever they are used?

A: No, they don’t have to look the same. For example, here are just some of the possible images for U+1F36D LOLLIPOP, U+1F36E CUSTARD, U+1F36F HONEY POT, and U+1F370 SHORTCAKE:

⁸³

In other words, any pictorial representation of a lollipop, custard, honey pot or shortcake respectively, whether a line drawing, gray scale, or colored image (possibly animated) is considered an acceptable rendition for the given emoji. However, a design that is too different from other vendors’ representations may cause interoperability problems: see Design Guidelines⁸⁶ in UTR #51⁸⁷.

Read through just that one FAQ — and this article, of course ? (Grinning face with Smiling Eyes emoji, U+1F601) — and you’ll have a better handle on emoji than most people ever will.

How Do We Use Emoji?

The short answer is, the same way we use every other character. As we’ve already discussed, emoji are symbols associated with code points. What’s special about them is just semantics — i.e. the meaning we ascribe to them, not the mechanics of them.

If you have a key on a keyboard mapped to a particular character, producing that character is as simple as pressing the key. However, considering that, as we’ve seen, more than 120,000 characters are currently in use, and the space defined by Unicode allows for more than 1.1 million of them, creating a keyboard large enough to assign a character to each key is probably not a good strategy.

When we exhaust the reach of our keyboards, we can use a software utility to insert characters.

Recent versions of macOS include an “Emojis and Symbols” panel that can be accessed from anywhere in the OS (via the menu bar or the keyboard shortcut Control + Command + Space). Other OS’ offer similar capabilities to view and click or to copy and paste emoji into text-entry fields. Applications may offer additional app-specific features for inserting emoji beyond the system-wide utilities.

Lastly, we can take advantage of character references to enter emoji (and any other character we like, for that matter) on the web.

Character References

Character references are commonly used as a way to include syntax characters as part of the content of an HTML document, and also can be used to input characters that are hard to type or not available otherwise.

Note: I’m sure many of you are familiar with character references. But if you keep reading this section, it wouldn’t surprise me if you learn something new.

HTML is a markup language, and, as such, HTML documents contain both content and the instructions describing the document together as plain text in the document itself. Typically, the vast majority of characters are part of the document’s content. However, there are other “special” characters in the mix. In HTML, these form the tags corresponding to the HTML elements that define the structure and semantics of the document. Moreover, it’s worth taking a moment to recognize that the syntax itself — i.e. its implementation — creates a need for additional markup-specific characters. The ampersand is a good example. The ampersand (&) is special because it marks the beginning of all other character references. If the ampersand itself were not treated specially, we’d need another mechanism altogether.

Syntax characters are treated as special, and should never be used as part of the content of a document, because they are always interpreted specially, regardless of the author’s intent. Mistakenly using these characters as content makes it difficult or impossible for a browser or other user agent to parse the document correctly, leading to all sorts of structural and display issues. But aside from their special status, markup-related characters are characters like any other, and very often we need to use them as content. If we can’t type the literal characters, then we need some other way to represent them. We can use character references for this, referred to as “escaping” the character, as in getting outside of (i.e. escaping) the character’s markup-specific meaning.

What characters need to be escaped? According to the W3C three characters should always be escaped⁸⁸: the less-than symbol (<, <), the greater-than symbol (>, >) and the ampersand (&, &) — just those three.

Two others, the double quote (“, ") and single quote (‘, ') are often escaped based on context; in particular, when they appear as part of the value of an attribute and the same character is used as the delimiter of the attribute value.

Note: Even this is a bit of a fib, though it comes from a typically reliable source. To be safe, we can always escape those characters. But in fact, because of the way document parsing works, we can often get away without escaping one or more of them.

If you’re interested in a more detailed run-through of just how complicated and fiddly the exceptions to the syntax-character rules can get in practice, have a look at the blog post “Ambiguous Ampersands¹¹⁰,” in which Mathias Bynens considers precisely when these characters must be escaped and when they don’t need be in practice.

But here’s the thing: These types of liberties can, and frequently do, cascade through our markup when we inevitably make other mistakes. For that reason alone, you may want to stick to the advice from the W3C. Not only is it the safer approach, it’s a lot easier to remember, and that’s not a bad thing.

In addition to these few syntax characters, there are similar references for every other Unicode character as well, all 120,000+ of them. These references come in two types:

• named character references (named entities)
• numeric character references (NCRs)

Note: It is perfectly confusing that the term “numeric character reference” is abbreviated NCR, which could just as easily be used as the abbreviation for named character reference. ? (Weary Face, U+1F629)

Named character references

Named character references (also known as named entities, entity references or character entity references) are pre-defined word-like references to code points. There are quite a few of them. The WHATWG provides a handy comprehensive table of character reference names supported by HTML5¹¹³, listing 2,231 of them. That’s far, far more than you will ever likely see used in practice. After all, the idea is that these names will serve as mnemonics (memory aids). But it’s difficult to remember 2,231 of anything. If you don’t know that a named reference exists, you won’t use it.

But where does this information come from? How can we be certain that the information in the table referenced above, which I describe as “comprehensive,” is in fact comprehensive? Not only are those perfectly valid questions, it’s exactly the type of questioning we need more of, to cut through the clutter of hearsay and other misinformation that is all too common online.

The very best sources of authoritative information are the specifications themselves, and that “handy, comprehensive table” is in fact is a link to section 12.5 of the WHATWG’s HTML5 spec¹¹⁴.

Let’s say you wanted to include a greater-than symbol (>) in the content of your document.

As we have just seen, and as you probably already knew, we can’t just press the key bearing that symbol on your keyboard. That literal character is special and may be treated as markup, not content. There is a named character reference for the greater-than symbol. It looks like >. Typing that in your document will get you the character you’re looking for every time, >.

So, in summary, named entities are predefined mnemonics for certain Unicode characters.

Essentially, a group of people thought it would be nice if we could refer to & as &, so they arranged to make that possible, and now & corresponds to the code point for &.

Numeric Character References

There isn’t a named reference for every Unicode character. We just saw that there are 2,231 of them. That’s a lot, but certainly not all. You won’t find any emoji in that list, for one thing. But while there are not always named references, there are always numeric character references. We can use these for any Unicode character, both those that have named references and those that don’t.

An NCR is a reference that uses the code point value in decimal or hexadecimal form. Unlike the names, there is nothing easy to remember about these.

We’ve looked at the ampersand (&), for which there is a named character reference, &. We can also write this as a numeric reference in decimal or hexadecimal form:

• decimal: & (&)
• hexadecimal: & (&)

Note: The # indicates that what follows is a numeric reference, and #x indicates that the numeric reference is in hexadecimal notation.

You’ll find a table containing a complete list of emoji in the document “Full Emoji Data¹⁸²¹¹⁷,” maintained by the Unicode Consortium’s Emoji Subcommittee. It includes several different representations of each emoji for comparison and, importantly, the Unicode code point in hexadecimal form, as well as the name of the character and some additional information. It’s a great resource and makes unnecessary any number of other websites that often contain incomplete, out of date or otherwise partially inaccurate information.

Note: If you look carefully, you might spot some unfamiliar emoji in this list. As I write this, the list includes new emoji from the just recently released Unicode Version 9.0. So, you can find ? Face with Cowboy Hat (U+1F920), ? Shrug (U+1F937), ? Selfie (U+1F91E), ? Potato (U+1F954) and 68 others from the newest version of Unicode¹¹⁸.

To look at just a few:

• ? (?): Pile of Poo
• ? (?): Doughnut (that’s one delicious-looking emoji)
• ? (?): Person Doing a Cartwheel (new with version 9)

Are you seeing a box or other generic symbol, rather than an image for the last emoji in the list (and the preceding paragraph as well)? That makes perfect sense, if you’re reading this around the time I wrote it. In fact, it would be more remarkable if you were seeing emoji there. That last emoji, Person Doing a Cartwheel (U+1F938), is new as of Unicode Version 9.0¹¹⁹, released on 21 June 2016. It isn’t surprising at all if your platform or application doesn’t yet support an emoji released within the past several days (or weeks). Of course, as this newest release of Unicode begins to roll out, Version 9.0’s 72 new emoji¹²⁰ will begin to appear, including ? (Person Doing a Cartwheel, U+1F938), the symbol for which will automatically replace the blank here and in the list above.

Do we really have to type in these references? No, if the platform or application you’re using allows you to enter emoji in some other way, that will work just fine. In fact, it’s preferred. Emoji are not syntax characters and so can always be entered directly.

Here’s a basketball emoji I inserted into this document from OS X’s “Emojis and Symbols” panel: ? (Basketball, U+1F3C0).

This brings up a more general question, “If there’s a reference for every Unicode character, when should we use them?”

The W3C provides us with a perfectly reasonable, well-justified answer to this question in a Q&A document titled “Using Character Escapes in Markup and CSS¹²¹“. The short version of its answer to the question of when should we use character references is, as little as possible:

When not to use escapes

It is almost always preferable to use an encoding that allows you to represent characters in their normal form, rather than using character entity references or NCRs.

Using escapes can make it difficult to read and maintain source code, and can also significantly increase file size.

Many English-speaking developers have the expectation that other languages only make occasional use of non-ASCII characters, but this is wrong.

Take for example the following passage in Czech.

Jako efektivnější se nám jeví pořádání tzv. Road Show prostřednictvím našich autorizovaných dealerů v Čechách a na Moravě, které proběhnou v průběhu září a října.

If you were to require NCRs for all non-ASCII characters, the passage would become unreadable, difficult to maintain and much longer. It would, of course, be much worse for a language that didn’t use Latin characters at all.

Jako efektivn&#x115;j&#x161;&#xED; se n&#xE1;m jev&#xED; po&#x159;&#xE1;d&#xE1;n&#xED; tzv. Road Show prost&#x159;ednictv&#xED;m na&#x161;ich autorizovan&#xFD;ch dealer&#x16F; v &#x10C;ech&#xE1;ch a na Morav&#x11B;, kter&#xE9; prob&#x11B;hnou v pr&#x16F;b&#x11B;hu z&#xE1;&#x159;&#xED; a &#x159;&#xED;jna.

As we said before, use characters rather than escapes for ordinary text.

So, we should only use character references when we absolutely must, such as when escaping markup-specific characters, but not for “ordinary text” (including emoji). Still, it is nice to know that we can always use a numeric character reference to input any Unicode character at all into our HTML documents. Literally, a world ? (Earth Globe Americas, U+1F30E) of characters are open to us.

The final point I will make before moving on has to do with case-sensitivity. This is another one of those issues about which there is much confusion and debate, despite the fact that it is not open to interpretation.

Character References and Case-Sensitivity

Named character references are case-sensitive and must match the case of the names given in the table of named character references supported by HTML¹²² that is part of the HTML5 spec. Having said that, if you look at the named references in that table carefully, you will see more than one name that maps to the same code point (and, so, the same character).

Take the ampersand. You’ll find the following four entries in the table for this single character:

AMP; — U+00026 (&) AMP — U+00026 (&) amp; — U+00026 (&) amp — U+00026 (&) 

This may be where some of the confusion originates. One could easily be fooled into assuming that this simulated, limited case-insensitivity is the real thing. But it would be a mistake to think that these kinds of variations are consistent. They definitely are not. For example, the one and only one valid named reference for the backslash character is Backslash;.

Backslash; — U+02216 (∖) 

You won’t find any other references to U+02216 in that table, and so no other form is valid.

If we look closely at the four named entities for the ampersand (U+00026) again, you’ll see that half of them include a trailing semicolon (;) and the other half don’t. This, too, may have led to confusion, with some people mistakenly believing that the semicolon is optional. It isn’t. There are some explicitly defined named character references, such as AMP and amp, without it, but the vast majority of named references and all numeric references include a semicolon. Furthermore, none of the named references without the trailing semicolon can be used in HTML5. ? (Face with Mouth Open, U+1F62E) Section 12.1.4 of the HTML5 specification¹²³ tells us (emphasis added):

Character references must start with a U+0026 AMPERSAND character (&). Following this, there are three possible kinds of character references:

Named character references

The ampersand must be followed by one of the names given in the named character references¹²⁴ section, using the same case. The name must be one that is terminated by a U+003B SEMICOLON character (;).

Decimal numeric character reference

The ampersand must be followed by a U+0023 NUMBER SIGN character (#), followed by one or more ASCII digits¹²⁵, representing a base-ten integer that corresponds to a Unicode code point that is allowed according to the definition below. The digits must then be followed by a U+003B SEMICOLON character (;).

Hexadecimal numeric character reference

The ampersand must be followed by a U+0023 NUMBER SIGN character (#), which must be followed by either a U+0078 LATIN SMALL LETTER X character (x) or a U+0058 LATIN CAPITAL LETTER X character (X), which must then be followed by one or more ASCII hex digits¹²⁶, representing a hexadecimal integer that corresponds to a Unicode code point that is allowed according to the definition below. The digits must then be followed by a U+003B SEMICOLON character (;).

“The ampersand must be followed by one of the names given in the named character references section, using the same case. The name must be one that is terminated by a U+003B SEMICOLON character (;).”

That answers that.

By the way, the alpha characters in hexadecimal numeric character references (a to f, A to F) are always case-insensitive.

 ⛅ ? ? ? ? ?? ?

Glyphs

At the end of the encoding section, I asked whether Unicode and UTF-8 encoding are enough to ensure that our documents, interfaces and all of the characters in them will display properly for all visitors to our websites and all users of our applications. The answer was no. But if you remember, I left this as a cliffhanger. ? (Hushed Face, U+1F62F) There’s just one thing left to complete our picture of emoji (pun intended) ? (Grimacing Face U+1F62C).

Unicode and UTF-8 do most of the heavy lifting, but something is missing. We need a glyph associated with every character in order to be able to see a representation of the character.

From the Wikipedia entry for glyph¹²⁷:

In typography, a glyph /’ɡlɪf/ is an elemental symbol within an agreed set of symbols, intended to represent a readable character for the purposes of writing and thereby expressing thoughts, ideas and concepts. As such, glyphs are considered to be unique marks that collectively add up to the spelling of a word, or otherwise contribute to a specific meaning of what is written, with that meaning dependent on cultural and social usage.

For example, in most languages written in any variety of the Latin alphabet the dot on a lower-case i is not a glyph because it does not convey any distinction, and an i in which the dot has been accidentally omitted is still likely to be recognized correctly. In Turkish, however, it is a glyph because that language has two distinct versions of the letter i, with and without a dot.

The relationship between the terms glyph, font and typeface is that a glyph is a component of a font that is composed of many such glyphs with a shared style, weight, slant and other characteristics. Fonts, in turn, are components of a typeface (also known as a font family), which is a collection of fonts that share common design features but each of which is distinctly different.

Essentially, we need a font that includes a representation for the code point of the emoji we want to display. If we don’t have that symbol we’ll get a blank space, an empty box or some other generic character as an indication that the symbol we’re after isn’t available. You’ve probably seen this. Now you understand why, if you didn’t before.

Going back to the figure from the W3C’s “Character Encodings: Essential Concepts¹²⁸,” the original diagram featured the following five characters:

Table 3: A representation of the information from a graphic that appears in the W3C document “Character Encodings: Essential Concepts^1296446”

Character	ⴰ	ⵣ	ⵓ	ⵍ	!
Name	Tifinagh Letter Ya	Tifinagh Letter Yaz	Tifinagh Letter Yu	Tifinagh Letter Yal	Exclamation Point
Code point	U+2D30	U+2D63	U+2D53	U+2D4D	U+0021
NCR	ⴰ	ⵣ	ⵓ	ⵍ	!

What would happen if you tried to insert those characters into a web page using a numeric character reference? Let’s see:

• ⴰ (ⴰ)
• ⵣ (ⵣ)
• ⵓ (ⵓ)
• ⵍ (ⵍ)
• ! (!)

Chances are you can see the exclamation point, but some of the others might be missing, replaced by a box or other generic symbol.

As has already been mentioned, those symbols are Tifinagh characters. Tifinagh¹³⁰ is “a series of abjad and alphabetic scripts used to write Berber languages.” According to Wikipedia¹³¹:

Berber or the Amazigh languages or dialects (Berber name: Tamaziɣt, Tamazight, ⵜⴰⵎⴰⵣⵉⵖⵜ [tæmæˈzɪɣt], [θæmæˈzɪɣθ]) are a family of similar and closely related languages and dialects indigenous to North Africa. They are spoken by large populations in Algeria and Morocco, and by smaller populations in Libya, Tunisia, northern Mali, western and northern Niger, northern Burkina Faso, Mauritania, and in the Siwa Oasis of Egypt. Large Berber-speaking migrant communities have been living in Western Europe since the 1950s. In 2001, Berber became a constitutional national language of Algeria, and in 2011 Berber became a constitutionally official language of Morocco, after years of persecution.

Not long ago, it would have been surprising if your platform displayed any of the Tifinagh characters. But wide internationalization support has improved dramatically and is getting better all the time, thanks in large part to Unicode. There is now a good chance you’ll see them.

We can still reliably stump our platforms with references to characters that have been only very recently released, as we saw earlier with ? (Person Doing a Cartwheel, U+1F938).

For those of you who really appreciate missing characters, here are some others:

• ? — (Drooling Face, U+1F924)
• ? — (Shrug, U+1F937)
• ? — (Face Palm, U+1F9260)
• ? — (Selfie, U+1F933)
• ? — (Owl, U+1F989)
• ? — (Carrot, U+1F955)
• ? — (Shallow Pan of Food, U+1F958)
• ? — (Shopping Trolley, U+1F6D2)

Note: If you are seeing the eight emoji in that list, then it’s safe to say you have support for the newest emoji introduced with Unicode Version 9.0. As we’ll see, that support could be coming from your OS or application or it could even be loaded via Javascript for a particular website (but not all of the others).

Regardless of what you or I do or do not see, Unicode is doing its part.

OK, so emoji are symbols (i.e. glyphs) that correspond to a specific code point — that’s a clean, easy-to-understand arrangement… well, it’s not quite so simple. There is one more thing we need to cover — the zero-width joiner.

Zero-Width Joiner: The Most Important Character You’ll Never See

The zero-width joiner (ZWJ) has a code point but no corresponding symbol. It is used to connect two or more other Unicode code points to create a new “compound character” with a unique glyph all its own.

The ZWJ is a part of Unicode, so let’s see what the Unicode Consortium has to say about it.¹³⁷:

The U+200D ZERO WIDTH JOINER (ZWJ) can be used between the elements of a sequence of characters to indicate that a single glyph should be presented if available. An implementation may use this mechanism to handle such an emoji zwj sequence as a single glyph, with a palette or keyboard that generates the appropriate sequences for the glyphs shown. So to the user, these would behave like single emoji characters, even though internally they are sequences.

When an emoji zwj sequence is sent to a system that does not have a corresponding single glyph, the ZWJ characters would be ignored and a fallback sequence of separate emoji would be displayed. Thus an emoji zwj sequence should only be supported where the fallback sequence would also make sense to a recipient. …

So, a ZWJ is exactly what it says it is: It does not have any appearance (i.e. it is “zero width”), and it joins other characters.

One important use of the ZWJ related to emoji are the skin tone modifiers that have already been mentioned. We’ve said that these skin tones were added to Unicode in version 8.0 to bring diversity to the appearance of emoji depicting human beings by allowing for a range of skin color. More specifically, Unicode has adopted the Fitzpatrick scale, a numeric classification scheme for skin tones specifying six broad groups or “types” of skin (Type I to Type VI) that represent in a general way at least a majority of people. From the Wikipedia entry for the Fitzpatrick scale¹³⁸:

It was developed in 1975 by Thomas B. Fitzpatrick, a Harvard dermatologist, as a way to estimate the response of different types of skin to ultraviolet (UV) light. It was initially developed on the basis of skin and eye color, but when this proved misleading, it was altered to be based on the patient’s reports of how their skin responds to the sun; it was also extended to a wider range of skin types. The Fitzpatrick scale remains a recognized tool for dermatological research into human skin pigmentation.

…

• Type I (scores 0–6) always burns, never tans (pale white; blond or red hair; blue eyes; freckles).
• Type II (scores 7–13) usually burns, tans minimally (white; fair; blond or red hair; blue, green, or hazel eyes)
• Type III (scores 14–20) sometimes mild burn, tans uniformly (cream white; fair with any hair or eye color)
• Type IV (scores 21–27) burns minimally, always tans well (moderate brown)
• Type V (scores 28–34) very rarely burns, tans very easily (dark brown)
• Type VI (scores 35–36) Never burns, never tans (deeply pigmented dark brown to darkest brown)

Getting back to the ZWJ, let’s take a closer look at this in practice using the Boy emoji (U+1F466). To illustrate that this really works as described, I’m going to write out all of the emoji using numeric references. (You can take a look at the page source if you want to confirm this.)

So, we’ll start with our base emoji:

• ? — (Boy, ?)

Although the Fitzpatrick scale specifies six skin types, the depiction of the first two types using emoji are combined under Unicode. So, only five skin tone modifiers are actually available to us:

• ? — Emoji Modifer Fitzpatrick Type 1-2 (?)
• ? — Emoji Modifer Fitzpatrick Type 3 (?)
• ? — Emoji Modifer Fitzpatrick Type 4 (?)
• ? — Emoji Modifer Fitzpatrick Type 5 (?)
• ? — Emoji Modifer Fitzpatrick Type 6 (?)

These skin tone modifiers appear in the list “Full Emoji Data¹⁴⁴,” along with all of the other emoji that are part of Unicode. They are represented as a square or some other shape of the appropriate color (i.e. skin tone) when used alone. That’s what you should be seeing in the list above.

We can manually build up the skin-type variants of the Boy emoji by combining the base emoji with each of the skin-type symbols:

• ?? — Boy Type 1 to 2 (??)
• ?? — Boy Type 3 (??)
• ?? — Boy Type 4 (??)
• ?? — Boy Type 5 (??)
• ?? — Boy Type 6 (??)

Note: The used in the list above is just an image I’ve used as a placeholder for the ZWJ character, which is not visible itself.

Family and other groups are built up in exactly same way, one character at a time, with ZWJs in between. But don’t forget we’ve already learned that we should use character references only when we absolutely must. So, although we could build up the group “Family, Man, Woman, Girl, Boy” manually…

? ‍ ? ‍ ? ‍ ? — ?‍?‍?‍?

…it’s preferable (and also easier and less error-prone) to use the emoji symbol itself. So, of course that is what we should do. — ?‍?‍?‍?

We could also write the Latin lowercase “a” as either simply “a” or a (a). Imagine writing an entire HTML document out using only numeric character references, and you will probably appreciate the pointlessness of the exercise.

How Do We Know If We Have These Symbols?

Like any other character, in order to display a specific emoji, a symbol must be included in some font available on the device you are using. Otherwise, the OS will find no way to graphically represent the code point.

An OS, be it a desktop operating system such as Apple’s macOS, or a mobile OS like iOS and Android, ships with quite a few preinstalled fonts. (Many more can be acquired and installed separately.) The fonts available may differ by geographic region or primary language of the intended users across localized versions.

Many of these fonts will overlap, offering the same characters but presenting them in different styles. From one font to the next, these differences may be subtle or extreme. However, not all fonts overlap. Fonts intended for use with Western languages, for example, will not contain the symbols for Chinese, Japanese or Korean characters, and the reverse is also true. Even overlapping fonts may have extended characters that differ.

It is the responsibility of the font designer to decide which characters will be included in a given font. It is the responsibility of developers of an OS to make sure that the total collection of fonts covers all of the intended languages and provides a wide range of styles and decorative, mathematic and miscellaneous symbols and so on, so that platform is as expressively powerful as possible.

The current versions of all major platforms (Windows, macOS, Linux, iOS and Android) support emoji. Precisely what that means differs from one platform to the next, version to version and, in the case of Linux, from distribution to distribution.

The Great Emoji Proliferation Of 2016

In this article we’ve covered a little about the history of emoji through the current version of the Unicode Standard, Version 9.0 (released 21 June 2016). We’ve seen that Version 9.0 introduced 72 entirely new emoji, not counting variants. (The number is 167 if we add skin tone modifers.)

Before moving on I should mention that the emoji included in Unicode 9.0 are referred to separately as “Unicode Emoji Version 3.0”. That is to say that “Unicode Version 9.0 emoji” and “Unicode Emoji Version 3.0” are the same set of characters.

As we begin to look at Emoji support with the next section, and considering everything we’ve learned about emoji so far, it would seem to be a relatively straight-forward to know what we’re looking for. Ideally we would like to see full support for all Version 3.0 emoji, including skin tone modifiers, and multi-person groupings. After all, a platform can’t possibly do better than full support for the current version of the Standard. That would be madness! Have you heard the Nietzsche quote:

There is always some madness in technology. But there is also always some reason in madness.

Nietzsche was talking about love, but isn’t it just as true of tech? ? (Winking face, U+1F609)

It turns out you can do “better” than 100% support, that is depending on your definition of better. Let’s say that you can do more than 100% support. This isn’t a unique concept in technology, or even web design and development. For example, implementators doing more than 100% support for CSS led to vendor prefixes. Somehow more than 100% always seems good at first, but tends to lead to problems. It’s a little like how spending more than 100% of the money you have starts out as a solution to a problem, but tends to eventually lead to more problems ? (Frowning face with open mouth, U+1F626).

What does more than 100% support look like in the context of emoji?

First, let’s agree that simply calling something an emoji does not make it an emoji. You may remember (or not) Pepsi’s global PepsiMoji campaign¹⁴⁵. A PepsiMoji is not an emoji, it’s an image. We won’t concern ourselves with gimmicky marketing ploys like that. There are still a couple of ways platforms are exceeding 100% support:

• Using Zero Width Joiners to create non-standard symbols by combining standard emoji.
• Rolling out proposed emoji before they are officially released.

An example of the former are Microsoft’s somewhat silly (IMO) Ninja Cat emoji, which I discuss in the section on Windows’ emoji support. But cat-inspired OS mascots are not the only place we see this sort of unofficial emoji sequence. More practical uses have to do with multi-person groupings and diversity, i.e. gender and skin tones.

The Unicode Consortium has this to say about multi-person groupings in UTR51¹⁴⁶, the Unicode Version 3.0 Technical Report.

Emoji for multi-person groupings present some special challenges:

Gender combinations. Some multi-person groupings explicitly indicate gender: MAN AND WOMAN HOLDING HANDS, TWO MEN HOLDING HANDS, TWO WOMEN HOLDING HANDS. Others do not: KISS, COUPLE WITH HEART, FAMILY (the latter is also non-specific as to the number of adult and child members). While the default representation for the characters in the latter group should be gender-neutral, implementations may desire to provide (and users may desire to have available) multiple representations of each of these with a variety of more-specific gender combinations.

Skin tones. In real multi-person groupings, the members may have a variety of skin tones. However, this cannot be indicated using an emoji modifier with any single character for a multi-person grouping.

The basic solution for each of these cases is to represent the multi-person grouping as a sequence of characters—a separate character for each person intended to be part of the grouping, along with characters for any other symbols that are part of the grouping. Each person in the grouping could optionally be followed by an emoji modifier. For example, conveying the notion of COUPLE WITH HEART for a couple involving two women can use a sequence with WOMAN followed by an emoji-style HEAVY BLACK HEART followed by another WOMAN character; each of the WOMAN characters could have an emoji modifier if desired.

This makes use of conventions already found in current emoji usage, in which certain sequences of characters are intended to be displayed as a single unit.

We’re told, “the default … should be gender-neutral, implementations may desire to provide … multiple representations of each of these with a variety of more-specific gender combinations.”

This is in fact what implementations are doing, and pretty aggressively. As we will see, with its Windows 10 Anniversary Update, Microsoft now allows for as many as 52,000 combinations of multi-person groupings. Is this a good thing?

It is certainly laudable effort. Having said that, it’s worth keeping in mind what it means from a standards perspective. Though Microsoft has greatly increased universality of its emoji through its flexibly diverse emoji handling, it comes at the expense of compatibility with other platforms. Be aware that users of every other platform, including every version of Windows other than Windows 10 Anniversary Update, will not see many of these groupings as intended.

Microsoft is not the only implementor to do this, but they’ve taken it further than others.

That leaves the idea of rolling out proposed emoji before they are officially released. Everyone is getting in on this, and it is a new phenomenon. First, let’s take a brief moment to understand the situation.

Like most other standards bodies, the Unicode Consortium doesn’t wait for the release of one version of a standard to begin working on the next. As soon as the door closes on inclusion for one release, changes and new proposals are evaluated for the next.

Generally speaking, the Unicode Consortium invites outside parties to participate in selecting future emoji, the process for which is outlined in the document “Submitting Emoji Character Proposals¹⁴⁷“. As that page describes, the process is somewhat drawn out, and proposals can be rejected for many reasons, but those that fair well are eventually added as “candidates”.

From the same page:

…proposals that are accepted as candidates are added to Emoji Candidates¹⁴⁸, with placeholder code points…

So proposed Emoji are made public in some cases well before inclusion in the Unicode Emoji Standard. However the proposals carry this warning:

Candidates are tentative: they may be removed or their code point, glyph, or name changed. No code point values for candidates are final, until (and if) the candidates are included as characters in a version of Unicode. Do not deploy any of these.

That would seem pretty cut and dry. Promising proposals are added to a publicly available candidates list with the disclaimer that they should not be used until officially released. But rarely are these kinds of issues so simple for long. Seemingly more often than not, the exception is the rule, and by that measure, emoji are following the rules.

It started with a proposal submitted by Google titled, “Expanding Emoji Professions: Reducing Gender Inequality¹⁴⁹” which begins:

Google wants to increase the representation of women in emoji and would like to propose that Unicode implementers do the same. Our proposal is to create a new set of emoji that represents a wide range of professions for women and men with a goal of highlighting the diversity of women’s careers and empowering girls everywhere.

That proposal, well worth reading, was submitted in May 2016, a little over a month before the release of Unicode Version 9.0 with its 72 new emoji. It has led to a flurry of activity resulting in a Proposed Update to UTR #51¹⁵⁰, and making way for Unicode Emoji Version 4.0 much more quickly than might have been expected. How quickly — right about now.

The original proposal led to another by the Unicode Subcommittee, “Gender Emoji ZWJ Sequences¹⁵¹“, published on 14 July 2016, that fast-tracked new officially recognized sequences providing greater gender parity among existing emoji characters as well as new profession emoji.

From the proposal:

This document describes how vendors can support a set of both female and male versions of many emoji characters, including new profession emoji. Because these emoji use sequences of existing Unicode characters composed according to UTR#51: Unicode Emoji, vendors can begin design and implementation work now and can deploy before the end of 2016, rather than waiting for Unicode v10.0 to come out in June of 2017.

Unicode itself does not normally specify the gender for emoji characters: the emoji character is RUNNER, not MAN RUNNER; POLICE OFFICER not POLICEMAN. Even where the name may appear to be exclusively one gender, such as U+2603 SNOWMAN or U+1F482 GUARDSMAN the character can be treated as neutral regarding gender.

To get a greater sense of realism for these characters, however, vendors typically have picked the appearance of a particular gender to display. This has led to gender disparities in the emoji that people can use. There is also a lack of emoji representing professions and roles, and the few that are present (like POLICE OFFICER) do not provide for both genders; a vendor has to choose one or the other, but can’t represent both.

You can also read more about this in the Unicode Consortium blog post, “Proposed Update UTR #51, Unicode Emoji (Version 4.0)¹⁵²“.

At present all of this has resulted in a parallel beta standard for Unicode Emoji Version 4.0¹⁵³.

How big a change are we talking about? There are a total of 88 new sequences combining existing emoji in new ways to provide gender alternates for current characters and also professions, for which there are male and female representations. However, adding skin tone variants to these new alternate characters and professions means that in total the number of emoji has increased from 1,788 in Version 3.0 to 2,243 in the proposed Version 4.0. That’s 455 new emoji in approximately 2 months. ? (Rocket, U+1F680)

So why am I bothering to discuss unreleased, “beta” emoji? After all, the review period for the new proposed standard doesn’t close until 24 October 2016 (coincidentally the date this article is scheduled to be published). I’m covering all of this because implementations are already rolling out these changes. It’s no longer possible to accurately describe the current level of emoji support on these platforms without mentioning the proposed Version 4.0. Now that we have covered all of the officially-official emoji through the current version of the Standard, and unofficially-official emoji included in the post-current Standard, we can make sense of emoji support for across popular platforms. ? (Dizzy face, U+1F635)

Emoji OS Support

Emoji Support: Apple Platforms (macOS and iOS)

The current version of Apple’s Mac operating system, “macOS Sierra” (10.12) released on 20 September 2016, includes well over 100 fonts, and among them one named “Apple Color Emoji”. It’s this font that contains all of the symbols for the platform’s native emoji. The same font is used by the current version of Apple’s mobile OS, iOS 10.

Users of Apple’s OS’ have typically enjoyed very good emoji support, and the newest versions continue the trend. To begin with, iOS 10 and macOS Sierra support all emoji through Unicode Version 9.0. Apple’s OS release cycle is nicely timed as far as emoji are concerned. Unicode updates are happening in the Summer, and bring with them changes to Emoji. Apple is able to roll them out across all of their platforms in the Fall.

Beyond Unicode Emoji Version 3.0, macOS Sierra and iOS 10 support the gendered ZWJ sequences that are key part of the proposed Unicode Version 4.0. However new professions and sequences that add skin tone modifiers to existing multi-person groupings didn’t make the update. As a bonus Apple threw in the Version 4.0 draft specification ?️‍? (Rainbow flag sequence — White flag, U+1F3F3 + Emoji variation selector, U+FE0F + ZWJ, U+200D + Rainbow, U+1F308).

In total, Apple’s newest OS updates include 632 changes and additions. Some of these changes are minor and reflect nothing more than an evolution of design sensibilities of those involved at Apple. Others are more dramatic however, most notably ? (pistol, U+1F52B), which has been changed from a realistic looking weapon to a cartoonish sci-fi water gun.

Emoji Support: Windows

Windows 10, 8.1 and 8 all shipped with support for emoji. Limited support was added to Windows 7 through a software update¹⁵⁴. For more information, there is an associated informational article titled “An Update for the Segoe UI Symbol Font in Windows 7 and in Windows Server 2008 R2 Is Available¹⁵⁵“).

Windows 8 included a limited set of black-and-white emoji with the “Segoe UI Symbol” font. This same font was eventually added to Windows 7, providing that version of the OS with its basic emoji symbols.

Windows 8.1 was the first Windows OS to support color emoji by default, shipping with the “Segoe UI Emoji” font, which provides Windows with its unique set of color emoji symbols.

Windows 10 continues to build on increasingly good support, adding all Unicode Version 8.0 emoji, including skin tone modifiers¹⁵⁶. However, Windows 10 did not include symbols for national flags ?? (Flag of the United States of America, U+1F1FA, U+1F1F8) ?? (Flag of Germany U+1F1E9, U+1F1EA), which are displayed as two-character country-code identifiers instead.

Note: Flag emoji are each associated with pairs of 26 individual “regional indicator symbols.” These combinations are referred to as an “emoji_flag_sequence”. It is the combination of pairs of code points together that produce a single flag emoji. For more information about flag symbols, refer to “Annex B: Flags¹⁵⁷” in the document “Unicode Technical Report #51¹⁵⁸.”

Windows 10 Anniversary Update¹⁵⁹ released on 2 August 2016 (and available now via the Windows Update facility on your Windows 10 PC), brings with it a wealth of changes to emoji on Windows. The update (officially, version 1607, and the second major update to Windows 10) includes all of the new Unicode Version 9.0 emoji, but that’s just the beginning.

Microsoft took the Anniversary Update as an opportunity to completely rethink and rework emoji on Windows, an effort dubbed “Project Emoji.” In a Windows Experience blog¹⁶⁰ post titled “Project Emoji: The Complete Redesign¹⁶³¹⁶¹” we’re told:

The Microsoft Design Language Team embarked on Project Emoji, redesigning the emoji set from scratch in under a year. From early sketches to creating a new scripting method, the team knew only emoji. Illustrators, graphic designers, program managers, font technicians, production designers, and scripting gurus all worked with an impressive singular focus.

It’s a testament to the acknowledged significance of emoji that Microsoft would make this kind of an effort.

The update includes “over 1700 new glyphs, with a possible 52,000 combinations of diverse women, men, kids, babies, and families.” As we’ve already discussed, Unicode 9.0 adds only 72 new emoji. The fact that Microsoft added 1700 new symbols clearly demonstrates that diversity was a critical focus of the update. Support for diversity begins with the same skin tone modifiers available under previous editions of Windows 10, now extended to more emoji. But the most ambitious effort is expansive support for family and other multi-person groups.

From the same “Project Emoji” blog post:

So if you’re a single mother with three kids, you’ll be able to create that image. If your husband is dark-toned and you’re light-toned and your two kids are a blend of both, you can apply all of those modifiers to create your own personal family emoji, one that’s sincerely representative. It extends to the couple emoji, where you can join a woman, a heart, and a woman — both with unique skin tones — for a more inclusive emoji. Because they’re created dynamically, there are tens of thousands of permutations. And no other platform supports that today.

Emoji in Windows 10 Anniversary Update gives us a good sense of the scale of expanding skin tone modifiers across flexible multi-person groupings. However this effort seems to be largely independent of Unicode Emoji Version 4.0. Missing are all of the gendered and profession emoji that are the hallmark of proposed version.

The first thing you might notice are the bold outlines surrounding each of the new emoji. But the changes go much further than that. On the minor end of the scale, virtually all emoji have a more geometric look, which contributes to an overall stronger, more readable appearance. Beyond this, many emoji are drastically different, going so far as to be essentially new interpretations. Generally speaking, the new emoji are less generic, willowy and neutral, which is to say that they are more iconic, bold and dynamic. They’ve gone from looking like designs you might see on the wallpaper in a nursery to what you’d expect of the signage in a modern building. Some examples will give you a better sense of what I’m trying to describe:

For more information on all things emoji in Windows 10 Anniversary Update, I highly recommend the Windows Experience Blog¹⁶² post “Project Emoji: The Complete Redesign¹⁶³¹⁶¹,” written by Danielle McClune (4 August 2016). It does a good job of covering the changes introduced with the Anniversary Update and also provides a bit of an insider’s perspective. For those of you not particularly interested in Windows, the article offers some useful general information, including a brief illustrated discussion of the emoji skin tone modifiers and the Fitzpatrick scale.

If you still can’t get enough of Windows 10 emoji goodness, the next place to turn to is Emojipedia’s blog post “Avalanche of New Emojis Arrive on Windows¹⁶⁴,” which nicely displays an overview of the changes to emoji in Anniversary Update. Beyond that, the Emojipedia page dedicated to the Anniversary Update¹⁶⁵ lists all of the emoji for this version of Windows, with an option to narrow the list to just the new symbols.

If all of this wasn’t enough, Microsoft has added a new emoji keyboard to improve the experience of working with its updated emoji.

It’s fair to say Microsoft has really upped its emoji game with the Windows 10 Anniversary Update. Are there any notable gaps or other issues related to Windows’ emoji support other than the absent Version 4.0 symbols? I’ll mention two…

First, the flag emoji are still missing. You will continue to see country-code identifiers, as in earlier versions of Windows 10.

Second is something of an oddity that’s specific to Windows 10 Anniversary Update (and incompatible with every other platform): Ninja Cat.

Ninja Cat is a character that started out as something of an unofficial mascot for Windows 10 among developers, making its first appearance in a presentation about the OS in mid-2014 (before its release). Apparently, Ninja Cat has proven to be popular and enduring enough over the past couple of years to justify some desktop wallpapers and an animated GIF¹⁶⁶, coinciding with the Anniversary Update, and — you know what’s coming — there are ninja cat emoji as well.

I’m making a point of mentioning Ninja Cat because it is another example of the use of zero-width joiners. All Ninja Cat emoji (yes there’s more than one) are sequences of the ? (Cat face, U+1F431) emoji in combination with other standard emoji, connected with the ZWJ character, and resulting in new unofficial symbols.

Note: If skin tone modifiers and flexible multi-person groups are among the more important uses of ZWJ, then non-standardized mascots and gimmicks have to be among the worst, as fun as they may be.

The basic Ninja Cat is a combination of ? (Cat Face, U+1F431) and ? (Bust in Silhouette, U+1F464). Other combinations include:

• Astro Cat — ? (Cat Face, U+1F431) and ? (Rocket, U+1F680)
• Dino Cat — ? (Cat Face, U+1F431) and ? (Dragon, U+1F409)
• Hacker Cat — ? (Cat Face, U+1F431) and ? (Personal Computer, U+1F4BB)
• Hipster Cat — ? (Cat Face, U+1F431) and ? (Eyeglasses, U+1F453)
• Stunt Cat — ? (Cat Face, U+1F431) and ? (Racing motorcycle, U+1F3CD)

Here is what those symbols look like in Windows 10 Anniversary Update (the only place you will see them):

Emoji Support: Linux

If you’re a Linux user, you’ll know that these kinds of things tend to be distribution-dependent. The Unicode underpinnings are there. What may be missing is a font providing the symbols for displaying the emoji. Adding an emoji font is a relatively simple matter, and good options are available, including some that we’ll see shortly.

Emoji Support: Android

Android has supported emoji since Jelly Bean (4.1) and color emoji since Kit Kat (4.4). The latest version of Android, the recently released “Nougat” version 7.1 includes substantial changes. Like Microsoft, Google has made a big push toward ensuring its emoji support is second to none. The prior version of Android, “Marshmallow” (6.0.1), supported all of the official emoji through Unicode Version 8, with the notable exception of skin tone modifiers.

“Noto” and “Roboto” are the standard font families on recent versions of Android and Chrome. Unlike “Apple Color Emoji” and Window’s “Segoe UI Emoji,” Noto¹⁶⁷ and Roboto¹⁶⁸ are freely available for download, including “Noto Color Emoji,” the primary emoji font on Android.

For starters, Google is beginning to move away from the amorphous blobs that Android users are familiar with. However, Android is keeping the same gumdrops for generic faces:

Those last two, both introduced in Unicode 9.0, are proof that Google is not entirely abandoning its gumdrops. But emoji are changing where it matters most, with human-looking depictions for less generic faces, actions and groups, complete with skin tone modifiers (conspicuously absent from Android to date).

Here are a few examples to give you some sense of how much the situation has improved:

Nougat includes all of the new emoji introduced with Unicode Version 9¹⁶⁹. However, despite it originally being Google’s proposal, and their continued close involvement with the beta standard, Version 4.0 emoji, including gendered emoji and professions, didn’t make the original Nougat (7.0) update.

However, just in the past few days, on 20 October 2016, Google released Android 7.1 with support for those Emoji Version 4.0 sequences. The 7.1 update is the first version of Android to include the new professions and genered emoji, as well as an expansion of multi-person groupings to include single parent families. For good measure Android 7.1 also includes ?️‍? (Rainbow flag sequence — White flag, U+1F3F3 + Emoji variation selector, U+FE0F + ZWJ, U+200D + Rainbow, U+1F308).

Once again, Emojipedia is a good resource for platform-specific emoji information. A page dedicated to Android Nougat 7.1¹⁷⁰ shows all of the emoji for the most recent version the OS. You can find pages for earlier releases as well.

Emoji On The Web

The person viewing your website or application must have emoji support to see the intended symbols. We’ve specified the character set and encoding, and written emoji into our documents and UIs. The user agent renders the page and all of the characters on it, and that’s what emoji are, of course.

You’ll recognize that this is no more than the usual arrangement. However, emoji are newer than the other elements we’re used to working with, and what’s more, they occupy an odd space somewhere between text and images. Also, many of us begin with a shaky understanding of character sets and encodings. Altogether, it leads to confusion and consternation ? (Confused Face, U+1F615) in the way that only something similar to but not exactly the same as what we already know well can. Though this should come as no surprise, it’s critically important, and for that reason I’m mentioning it here at the end of the article.

A code point without a glyph is just a code point. U+2D53 (Tifinagh letter Yu) is clearly different than U+1F32E (Taco emoji). But, ultimately, we care only about the corresponding symbols ⵓ (U+2D53) and ? (U+1F32E). As usual, we’re at the mercy of our audience.

What about polyfills, shims and fallbacks? Is there anything like that we can use to improve the situation? I’m happy to say that the answer is yes.

Emoji One

The Emoji One¹⁷¹ project is aimed at creating a collection of up-to-date, high-quality and universal emoji resources. The largest component of the project by far is a comprehensive set of emoji that can be freely used by anyone for any purpose, both non-commercial or commercial (with attribution).

In the words of the people responsible for the project, Emoji One is:

The web’s first and only complete open source emoji set. It is 100% free and super easy to integrate.

In December 2015, Emoji One announced the upcoming release of an updated and redesigned set of all of their emoji, branded “The 2016 Collection” (Q1 2016 Version 2.1.0, January 29, 2016¹⁷²). More importantly, they committed to quarterly design updates¹⁷³, a promise they have made good on to date.

On May 30th, Emoji One officially released its 2nd quarterly update (Q2 2016 update, Version 2.2.0¹⁷⁴), with a total of 624 “design upgrades,” encompassing changes to existing symbols and entirely new (to the set) emoji.

Shortly thereafter, on June 21st, and coinciding with the official release of Unicode 9.0, Emoji One released version 2.2.4¹⁷⁵, updating its set to include the 72 new Unicode emoji along with associated skin tone sequences.

Version 2.2.4 is the current version, though Emoji One has recently begun promoting the next major update, version 3.0, teasing “The revolution begins this December.”

Currently, the Emoji One set comprises 1834 emoji, organized in nine categories, all of which can be browsed on the Emoji One website in the Emoji Gallery¹⁷⁶ and searched via The Demo¹⁷⁷.

Emoji One has also created two web apps:

• emojicopy¹⁷⁸
• emoji.codes¹⁷⁹

emojicopy provides a responsive interface for searching emoji and copying selected symbols, with optional text, to paste into other apps.

emoji.codes offers a number of useful features, including a “Cheat Sheet¹⁸⁰” for browsing and searching Emoji One short codes, a method of inputting emoji in applications and websites with built-in support for Emoji One.

emoji.codes’ “Family Tree¹⁸¹” is a table comparing emoji symbols across as many as 10 platforms (Symbola, Emoji One, Apple, Google, Windows, Twitter, Mozilla, LG, Samsung and Facebook). It’s essentially a prettier version of the same sort of table on the Unicode Consortium’s “Full Emoji Data¹⁸²¹¹⁷” page previously mentioned.

The Family Tree is certainly much cleaner and provides a beneficial search interface. Just keep in mind that, when in doubt, the Unicode Consortium is the authoritative source.

Lastly, an Emoji Rolodex¹⁸³ lists links to quite a few resources: information, libraries, scripts, plugins, standalone apps and more. There are valuable tools here and some purely fun links, too.

All Emoji One art files are available for personal and commercial use under a Creative Commons license (CC BY 4.0¹⁸⁴). Emoji are available as PNG, SVG and font files (for Android, macOS and iOS) and can be downloaded as a complete set from the Emoji One developer page¹⁸⁵ or individually from the gallery¹⁸⁶.

In addition to the emoji art itself, the developer resources include a toolkit of conversion scripts, style sheets, sprite files and more.

The project also offers an extension for Google Chrome, called, fittingly, “EmojiOne for Chrome¹⁸⁷” which is described as “four game-changers in one,” providing:

• a panel in Chrome for inputting emoji
• emoji character search
• set-once toggling between skin tones
• well, the last “game changer” is Emoji One itself (which is cheating, but I think we can let it slide)

Emoji One is, without a doubt, an important (assuming you think emoji are important) well-executed, well-maintained and ambitious project. If all of that wasn’t enough, Emoji One has paid up to become a voting member of the Unicode Consortium.

Let’s hope the project has a bright future.

We can include Emoji One in our websites and applications and know that not only will visitors see the emoji we intend, but also that the emoji we use will maintain a consistent, high-quality appearance across devices, OS’ and browsers. Come on, that’s pretty great!

How do we use Emoji One? Link

To get started, you’ll want to read through the information in Emoji One’s GitHub repository¹⁸⁸, or download the complete developer toolkit¹⁸⁹. Presently, the toolkit is around 60 MB and includes all emoji symbols as PNG files in three sizes (64, 128 and 512 pixels), and SVG vector images as well.

If you just want to read through the instructions for getting started, the Emoji One readme on GitHub¹⁹⁰ is probably a better option.

You will learn that Emoji One has partnered with JSDeliver¹⁹¹, a “free super-fast CDN for developers and webmasters” (their words, not mine) to make it easy to install on any Javascript-capable website. It’s a matter of adding a script and link element to the CDN-hosted Javascript and CSS files in the usual way.

There are also options for installing via npm, Bower, Composer and Meteor package managers. If any of those are relevant to you, then you should have no trouble at all.

Twemoji

I would be remiss if I didn’t mention that Emoji One is not your only option for open source emoji sets. In November 2014, Twitter announced on its blog that it was “Open Sourcing Twitter emoji for Everyone¹⁹².”

From the blog post:

The project ships with the simple twemoji.js library that can be easily embedded in your project. We strongly recommend looking at the preview.html source code¹⁹³ to understand some basic usage patterns and how to take advantage of the library, which is hosted by our friends at MaxCDN¹⁹⁴.…

For more advanced uses, the twemoji library has one main method exposed: parse. You can parse a simple string, that should be sanitized, which will replace emoji characters with their respective images.

Twemoji¹⁹⁵ is hosted on GitHub and includes, among other resources, a set of emoji images as PNG files at 16 × 16, 36 × 36, 72 × 72 sizes, and SVG vectors as well.

After the initial release, a version 2 included emoji from Unicode Version 8 (as well as other changes). Subsequently, version 2.1 added symbols for all of the Unicode 9 emoji, for a total of over 1830 symbols. Presently, the current version of Twemoji is 2.2, which includes support for the gendered and profession emoji from the Unicode Emoji Version 4.0 draft, bringing the total number of symbols to 2,477. A complete download of the current version of the project is an over 400 MB ZIP file. You can read about the latest updates in the project’s ReadMe file¹⁹⁶.

Conclusion

 ⛅ ? ? ? ? ?? ?

Are we done? Could it be? Do we know everything there is to know about emoji? ? (Tired Face, U+1F62B)

It might be a stretch to say we know absolutely everything there is to know, but we know what we need to know to find and understand everything there is to know. ? (Face with Look of Triumph U+1F624)

 ⛅ ? ? ? ? ?? ?

(rb, al, il, vf)

Footnotes Link

1. 1 https://en.wikipedia.org/wiki/Tifinagh
2. 2 http://blog.unicode.org/2016/06/announcing-unicode-standard-version-90.html
3. 3 http://www.theatlantic.com/technology/archive/2016/01/whats-the-plural-of-emoji-emojis/422763/
4. 4 http://www.theatlantic.com/author/robinson-meyer/
5. 5 http://www.theatlantic.com/
6. 6 http://www.theatlantic.com/technology/archive/2015/10/eagle-avocado-canoe-pregnant-woman-2016-new-emoji/410056/
7. 7 http://www.theatlantic.com/politics/archive/2015/12/emojis-2016-presidential-election/420840/
8. 8 http://www.nytimes.com/2015/10/09/technology/facebook-to-test-emoji-as-reaction-icons.html
9. 9 http://www.nytimes.com/2015/10/23/world/australia/australia-emoji-julie-bishop-diplomacy-vladimir-putin.html
10. 10 http://unicode.org/emoji/
11. 11 #charsets-and-encoding-sec
12. 12 #chars-sec
13. 13 #charsets-sec
14. 14 #coded-charsets-sec
15. 15 #encoding-sec
16. 16 #declare-sec
17. 17 #http-header-declare-sec
18. 18 #check-headers-browser-sec
19. 19 #check-headers-web-sec
20. 20 #meta-charset-declare-sec
21. 21 #encoding-by-any-name-sec
22. 22 #oh-yeah-emoji-sec
23. 23 #what-are-emoji-sec
24. 24 #how-eomji-sec
25. 25 #char-ref-sec
26. 26 #glyphs-sec
27. 27 #do-we-have-sec
28. 28 #great-proliferation-sec
29. 29 #emoji-os-support-sec
30. 30 #emoji-support-apple-sec
31. 31 #emoji-support-windows-sec
32. 32 #emoji-support-linux-sec
33. 33 #emoji-support-android-sec
34. 34 #emoji-on-web-sec
35. 35 #emoji-one-sec
36. 36 #twemoji-sec
37. 37 #conclusion-sec
38. 38 https://www.w3.org/
39. 39 https://www.w3.org/International/articles/definitions-characters/#charsets
40. 40 https://www.w3.org/International/articles/definitions-characters/#unicode
41. 41 http://unicode.org/
42. 42 http://unicode.org/standard/WhatIsUnicode.html
43. 43 https://www.w3.org/International/articles/definitions-characters/#charsets
44. 44 https://www.w3.org/International/articles/definitions-characters/#charsets
45. 45 https://en.wikipedia.org/wiki/Exclamation_mark#Languages
46. 46 https://www.w3.org/International/articles/definitions-characters/#charsets
47. 47 #glyphs-sec
48. 48 https://en.wikipedia.org/wiki/Tifinagh
49. 49 https://www.w3.org/International/articles/definitions-characters/#charsets
50. 50 http://www.unicode.org/versions/Unicode9.0.0/
51. 51 http://www.unicode.org/versions/Unicode9.0.0/UnicodeStandard-9.0.pdf
52. 52 http://www.unicode.org/versions/Unicode8.0.0/
53. 53 http://unicode.org/policies/stability_policy.html
54. 54 https://en.wikipedia.org/wiki/Plane_(Unicode)
55. 55 https://en.wikibooks.org/wiki/Unicode/Character_reference/0000-0FFF
56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/09/roadmap_to_unicode_bmp.svg-1024×683.png
57. 57 https://wikipedia.org
58. 58 https://www.smashingmagazine.com/wp-content/uploads/2016/09/roadmap_to_unicode_bmp.svg-1024×683.png
59. 59 https://www.smashingmagazine.com/wp-content/uploads/2016/09/unicode_planes_20160611_1024x799.png
60. 60 https://wikipedia.org
61. 61 https://www.smashingmagazine.com/wp-content/uploads/2016/09/unicode_planes_20160611_1024x799.png
62. 62 http://www.unicode.org/versions/Unicode8.0.0/
63. 63 http://www.unicode.org/versions/Unicode9.0.0/
64. 64 https://www.w3.org/International/articles/definitions-characters/#charsets
65. 65 http://www.worldwidewebsize.com/
66. 66 https://html.spec.whatwg.org/multipage/introduction.html#history-2
67. 67 https://www.w3.org/TR/2016/CR-html51-20160621/introduction.html#introduction-history
68. 68 https://html.spec.whatwg.org/multipage/introduction.html#history-2
69. 69 https://www.w3.org/TR/2016/CR-html51-20160621/introduction.html#introduction-history
70. 70 https://wiki.whatwg.org/wiki/Fork_tracking
71. 71 https://www.w3.org/International/articles/definitions-characters/#httpheader
72. 72 https://www.ietf.org/
73. 73 http://www.livinginternet.com/i/ia_rfc.htm
74. 74 https://en.wikipedia.org/wiki/Media_type
75. 75 https://validator.w3.org/i18n-checker/
76. 76 https://www.scientificamerican.com/article/are-octopuses-smart/
77. 77 http://www.joelonsoftware.com/articles/Unicode.html
78. 78 https://html.spec.whatwg.org/multipage/semantics.html#charset
79. 79 https://www.w3.org/International/questions/qa-html-encoding-declarations#quickanswer
80. 80 http://unicode.org/emoji/
81. 81 http://unicode.org
82. 82 http://unicode.org/faq/emoji_dingbats.html
83. 83 https://www.smashingmagazine.com/wp-content/uploads/2016/09/emoji-examples549x346.png
84. 84 http://unicode.org
85. 85 https://www.smashingmagazine.com/wp-content/uploads/2016/09/emoji-examples549x346.png
86. 86 http://www.unicode.org/reports/tr51/index.html#Design_Guidelines
87. 87 http://www.unicode.org/reports/tr51/index.html
88. 88 http://www.w3.org/International/questions/qa-escapes
89. 89 http://www.w3.org/International/questions/qa-escapes
90. 90 https://html.spec.whatwg.org/multipage/syntax.html#parsing
91. 91 https://html.spec.whatwg.org/multipage/syntax.html#overview-of-the-parsing-model
92. 92 https://www.smashingmagazine.com/wp-content/uploads/2016/09/parsing_model_overview708x1084.png
93. 93 https://whatwg.org/
94. 94 https://www.smashingmagazine.com/wp-content/uploads/2016/09/parsing_model_overview708x1084.png
95. 95 https://html.spec.whatwg.org/multipage/infrastructure.html#unicode-code-point
96. 96 https://html.spec.whatwg.org/multipage/syntax.html#tokenization
97. 97 https://html.spec.whatwg.org/multipage/syntax.html#tree-construction
98. 98 https://html.spec.whatwg.org/multipage/dom.html#document
99. 99 https://en.wikipedia.org/wiki/Finite-state_machine
100. 100 https://html.spec.whatwg.org/multipage/syntax.html#tokenization
101. 101 https://html.spec.whatwg.org/multipage/syntax.html#data-state
102. 102 https://html.spec.whatwg.org/multipage/syntax.html#reconsume
103. 103 https://html.spec.whatwg.org/multipage/syntax.html#current-input-character
104. 104 https://html.spec.whatwg.org/multipage/syntax.html#next-input-character
105. 105 https://html.spec.whatwg.org/multipage/syntax.html#next-input-character
106. 106 https://html.spec.whatwg.org/multipage/syntax.html#current-input-character
107. 107 https://html.spec.whatwg.org/multipage/syntax.html#insertion-mode
108. 108 https://html.spec.whatwg.org/multipage/syntax.html#stack-of-open-elements
109. 109 https://html.spec.whatwg.org/multipage/syntax.html#character-reference-state
110. 110 https://mathiasbynens.be/notes/ambiguous-ampersands
111. 111 https://html.spec.whatwg.org/multipage/syntax.html#optional-tags
112. 112 https://html.spec.whatwg.org/multipage/syntax.html#optional-tags
113. 113 https://html.spec.whatwg.org/multipage/syntax.html#named-character-references
114. 114 https://html.spec.whatwg.org/multipage/syntax.html#named-character-references
115. 115 https://en.wikipedia.org/wiki/Document_type_definition
116. 116 https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
117. 117 http://unicode.org/emoji/charts/full-emoji-list.html
118. 118 http://www.unicode.org/emoji/charts/emoji-released.html
119. 119 http://unicode.org/versions/Unicode9.0.0/
120. 120 http://blog.unicode.org/2016/06/72-new-emoji-characters.html
121. 121 https://www.w3.org/International/questions/qa-escapes
122. 122 https://html.spec.whatwg.org/multipage/syntax.html#named-character-references
123. 123 https://html.spec.whatwg.org/multipage/syntax.html#character-references
124. 124 https://html.spec.whatwg.org/multipage/syntax.html#named-character-references
125. 125 https://html.spec.whatwg.org/multipage/infrastructure.html#ascii-digits
126. 126 https://html.spec.whatwg.org/multipage/infrastructure.html#ascii-hex-digits
127. 127 https://en.wikipedia.org/wiki/Glyph
128. 128 http://www.w3.org/International/articles/definitions-characters
129. 129 https://www.w3.org/International/articles/definitions-characters/#charsets
130. 130 https://en.wikipedia.org/wiki/Tifinagh
131. 131 https://en.wikipedia.org/wiki/Berber_languages
132. 132 https://developer.apple.com/reference/coretext
133. 133 https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/CoreText_Programming/Overview/Overview.html
134. 134 http://www.unicode.org/policies/lastresortfont_eula.html
135. 135 http://unicode.org/versions/Unicode9.0.0/
136. 136 http://unifoundry.com/unifont.html
137. 137 http://unicode.org/reports/tr51/#Emoji_ZWJ_Sequences
138. 138 https://en.wikipedia.org/wiki/Fitzpatrick_scale
139. 139 http://unicode.org/faq/emoji_dingbats.html#2.4
140. 140 http://unicode.org/reports/tr51/#Design_Guidelines
141. 141 http://en.wikipedia.org/wiki/Fitzpatrick_scale
142. 142 http://www.unicode.org/reports/tr51/index.html#Diversity
143. 143 http://unicode.org/faq/emoji_dingbats.html#14
144. 144 http://unicode.org/emoji/charts/full-emoji-list.html
145. 145 http://design.pepsico.com/pepsimoji.php
146. 146 http://unicode.org/reports/tr51/#Multi_Person_Groupings
147. 147 http://www.unicode.org/emoji/selection.html
148. 148 http://www.unicode.org/emoji/charts/emoji-candidates.html
149. 149 http://unicode.org/L2/L2016/16160-emoji-professions.pdf
150. 150 http://www.unicode.org/reports/tr51/tr51-8.html
151. 151 http://www.unicode.org/L2/L2016/16181-gender-zwj-sequences.pdf
152. 152 http://blog.unicode.org/2016/08/proposed-update-utr-51-unicode-emoji.html
153. 153 http://unicode.org/emoji/charts-beta/index.html
154. 154 https://www.microsoft.com/en-us/download/details.aspx?id=30521
155. 155 https://support.microsoft.com/en-us/kb/2729094
156. 156 http://www.unicode.org/reports/tr51/tr51-2.html#Diversity
157. 157 http://unicode.org/reports/tr51/index.html#Flags
158. 158 http://www.unicode.org/reports/tr51/index.html
159. 159 https://support.microsoft.com/en-us/help/12373/windows-update-faq
160. 160 https://blogs.windows.com/windowsexperience/
161. 161 https://blogs.windows.com/windowsexperience/2016/08/04/project-emoji-the-complete-redesign/
162. 162 https://blogs.windows.com/windowsexperience/
163. 163 https://blogs.windows.com/windowsexperience/2016/08/04/project-emoji-the-complete-redesign/
164. 164 http://blog.emojipedia.org/diverse-emoji-families-come-to-windows/
165. 165 http://emojipedia.org/microsoft/windows-10-anniversary-update/
166. 166 https://blogs.windows.com/windowsexperience/2016/07/29/windows-insider-program-next/
167. 167 https://www.google.com/get/noto/
168. 168 https://material.google.com/resources/roboto-noto-fonts.html
169. 169 http://blog.unicode.org/2016/06/72-new-emoji-characters.html
170. 170 http://emojipedia.org/google/android-7.1/
171. 171 http://emojione.com/
172. 172 http://emojione.com/releases/2.1.0/
173. 173 http://emojione.com/releases/
174. 174 http://emojione.com/releases/2.2.0/
175. 175 http://emojione.com/releases/2.2.4/
176. 176 http://emojione.com/#gallery
177. 177 http://emojione.com/demo/
178. 178 http://emojicopy.com
179. 179 http://emoji.codes/
180. 180 http://emoji.codes/
181. 181 http://emoji.codes/family
182. 182 http://unicode.org/emoji/charts/full-emoji-list.html
183. 183 http://emoji.codes/rolodex
184. 184 https://creativecommons.org/licenses/by/4.0/
185. 185 http://emojione.com/developers/
186. 186 http://emojione.com/#gallery
187. 187 http://emojione.com/chrome/
188. 188 https://github.com/Ranks/emojione
189. 189 http://emojione.com/developers
190. 190 https://github.com/Ranks/emojione/blob/master/README.md
191. 191 https://www.jsdelivr.com/
192. 192 https://blog.twitter.com/2014/open-sourcing-twitter-emoji-for-everyone
193. 193 https://github.com/twitter/twemoji/blob/gh-pages/preview.html
194. 194 https://www.maxcdn.com/blog/emojis-ftw/
195. 195 https://github.com/twitter/twemoji
196. 196 https://github.com/twitter/twemoji/blob/gh-pages/README.md

↑ Back to topTweet itShare on Facebook

These days, I’ve been pondering what purpose we as developers have in our world. I’m not able to provide you with an answer here, but instead want to encourage you to think about it, too. Do you have an opinion on this? Are we just pleasing other people’s demands? Or are we in charge of advising the people who demand solutions from us if we think they’re wrong? A challenging question, and the answer will be different for everyone here. If you want to let me know your thoughts, I’d be happy to hear them.

Bear with me, this week’s list is a large one. Too many good resources popped up, explaining technical and design concepts, how to use new JavaScript methods to write smarter applications, how to use CSS Grid Layouts, and how to take care of your happiness.

News Link

• The Safari Technology Preview 17¹ adds support for Custom Elements v1, rel=noopener, and stylesheet loading via a link element inside Shadow DOM subtrees. Furthermore, preloading behavior was changed — it now matches iOS where resources like images get less priority when loading.
• Already available in Nightly Builds, the feature to emulate throttled network connections² in Firefox’s Developer Tools will soon be added to the stable release, too.

General Link

• Matthias Beitl has written a well-thought-out essay on how we got into the “JavaScript wars”³, the paradigm shift, and an overtime improvement.

Concept & Design Link

• Erika Hall explains in her recent Beyond Tellerand talk why we are trying so hard to measure things and collect data and why this doesn’t mean we get better insights or make better decisions⁴.
• Something that’s easily forgotten when thinking about form usability is how placing labels can matter when a user zooms into a page. For example, we need to consider that placing labels above items means users who zoom in won’t lose context⁵.
• How do you design a simple, usable registration form for a tax reform? @jelumalai explains the process from a designer’s perspective⁶, diving deep into the challenge of asking for a lot of information while maintaining a clear workflow for the user.

⁷

Tools & Workflows Link

• FormLinter¹⁰ checks your form for usability issues. If you want to know more about what it does and how it works, Ben Orenstein’s announcement post¹¹ will give you some insights.

Accessibility Link

• Stefan Judis explains when to use and when not to use aria-selected¹². Applying it to the current active navigation item, for example, isn’t correct, but applying it to the current active tab in a tablist, on the other hand, would be.

JavaScript Link

• Mike Street shows how to build a web app with Vue.js 2 using Vue-router¹³. A good primer if you’re new to Vue.js.
• JavaScript’s requestIdleCallback method¹⁴ will soon come to Firefox 52. If you don’t want to wait, good news: It can already be tested in Nightly Builds and is also supported in Chrome where it adds great value to scheduling tasks in cooperation with the browser environment.
• Patricia Garcia shares her story of how she managed to help fight Ebola in Africa with JavaScript¹⁵. A great example of how to scale offline application design and why well-thought-out concepts matter to build a properly working solution.

CSS/Sass Link

• Oliver Williams shares what he learned about CSS Grid Layout¹⁶. Once you realize that it’s designed to be used alongside Flexbox and not as a replacement, you’ll slowly grasp how powerful the new technology really is.
• JP de Vries shares the challenges of unfolding critical CSS¹⁷ and why most websites are better off without it.

¹⁸

Work & Life Link

• Mike Monteiro gave an impactful talk at this year’s Beyond Tellerrand conference in Berlin. “Let Us Now Praise Ordinary People²¹” opens our eyes to how we can change the world and why we need to get over-hyped startups that only claim to change something to actually do meaningful work. If I can make you watch one thing this week, take 45 minutes, sit back and listen to Mike Monteiro.
• selfcare.tech²² wants to help developers take better care of their health. It shows some great methods for solving common problems every one of us will face at some point.

Going Beyond… Link

• These solar panels are certainly a cool invention²³: They can pull drinking water straight from the air, up to 5 liters per day per panel. A very nice way to source water when you don’t have traditional water resources.

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation²⁴ or share this resource with other people. You can learn more about the costs of the project here²⁵. It’s available via email, RSS and online.

— Anselm

Footnotes Link

1. 1 https://webkit.org/blog/7071/release-notes-for-safari-technology-preview-17/
2. 2 https://blog.nightly.mozilla.org/2016/11/07/simulate-slow-connections-with-the-network-throttling-tool/
3. 3 http://cssence.com/blog/2016-11-the-javascript-wars
4. 4 https://vimeo.com/190883361
5. 5 https://mobile.twitter.com/elizallen_/status/794993023688077314
6. 6 https://medium.com/@ux_je/simplifying-the-gst-registration-process-a-designers-perspective-e30e38fbbd26
7. 7 https://medium.com/@ux_je/simplifying-the-gst-registration-process-a-designers-perspective-e30e38fbbd26
8. 8 https://medium.com/@ux_je/simplifying-the-gst-registration-process-a-designers-perspective-e30e38fbbd26
9. 9 https://medium.com/@ux_je/simplifying-the-gst-registration-process-a-designers-perspective-e30e38fbbd26
10. 10 https://formlinter.com/
11. 11 https://robots.thoughtbot.com/announcing-formlinter
12. 12 https://www.stefanjudis.de/aria-selected-and-when-to-use-it.html
13. 13 https://www.liquidlight.co.uk/blog/article/building-a-vue-v2-js-app-using-vue-router/
14. 14 https://hacks.mozilla.org/2016/11/cooperative-scheduling-with-requestidlecallback/
15. 15 https://medium.com/net-magazine/fighting-ebola-with-javascript-26b48da8f84a
16. 16 https://css-tricks.com/things-ive-learned-css-grid-layout/
17. 17 https://medium.com/markuptips/unfolding-critical-css-91619401b4e
18. 18 https://css-tricks.com/things-ive-learned-css-grid-layout/
19. 19 https://css-tricks.com/things-ive-learned-css-grid-layout/
20. 20 https://css-tricks.com/things-ive-learned-css-grid-layout/
21. 21 https://vimeo.com/190834270
22. 22 http://selfcare.tech/
23. 23 http://futurism.com/these-solar-panels-can-pull-drinking-water-straight-from-the-air/
24. 24 https://wdrl.info/donate
25. 25 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

Every developer knows that just because a website looks like and does what it’s meant to on the latest iPhone, doesn’t mean it will work across every mobile device. In this article, we’ll highlight some of the many open device labs out there — fantastic and helpful initiatives by the community that deserve support and attention.

Open device labs (ODLs) are a response to the myriad of operating systems, browsers and devices that litter our technical landscape. They offer developers a (usually) free space to go to test their web systems, websites and apps on a range of software and hardware. This premise forms the core of the OpenDeviceLab.com¹ initiative, which is a community movement to help people locate the right ODL for the job and to drum up further support for these testing centers.

Andre Jay Meissner², founder of LabUp!³ and OpenDeviceLab.com, explains:

Testing on a variety of real devices is crucial for ensuring the intended user experience, especially looking over the boundaries of each ones own cultural and/or economic area. But, by far not everybody has access to the necessary test bed. Think of people producing content/apps for the first world, not taking less developed regions or those with a completely different mobile device landscape into account — the business will fail on one side, since UX or even plain accessibility will suck on the other.

He adds:

ODLs even provide ways to get stakeholders and customers to live the urge for necessary budget decisions on quality assurance, accessibility and I18n and L10n.

Consolidating The ODL Landscape Link

There are now more than 150 ODLs in 35+ countries, but ODLs may have reached the peak of their popularity, given the growing attention on in-house device labs (IDLs).

While new ODLs are opening at a constant rate, a handful of ODLs have closed down due to a lack of demand. Penn State University, for example, recently closed its ODL and replaced it with a virtual-only offering, due to a lack of funding, despite being the only one in the region. This virtual testing environment now mainly uses BrowserStack and similar virtual machine (VM) platforms.

Greg O’Toole, a lecturer at Penn State University, says:

We have had fairly consistent interest and inquiry levels from groups and individual software developers from around the Penn State community and the PA community at large looking for ways to get involved and/or utilize the offerings of the ODL@PSU over the past 24 months. I am optimistic still. We have had several offers from these community members to donate Fitbit devices, old laptops, etc. which sort of orbit around the target set of devices we are looking for.

ODLs Have Opened Doors For IDLs Link

IDLs do seem to be a popular option. Many of the labs we spoke with originated on a company’s property, eventually opening up as ODLs to support the development work of others.

Christian Schaefer, freelance front-end developer from the ODL initiative, says:

I don’t think ODLs are important in today’s technical landscape, IDLs are. ODLs served the purpose of steering the people’s interest towards the topic of real device testing. And ODLs may also be blueprints for how to set up such a thing yourself, inhouse. But reality shows that ODLs are often only used by their owners/administrators.

ODLs not being used by external people has to do with convenience and also with access to development infrastructure, which is mostly only available within a company. That’s why companies started assembling their own device labs — sometimes opening it up to others, thereby creating a new ODL.

Andre adds:

In general, ODLs located at companies see way lower public usage as compared to ODLs in public places, like co-working spaces, libraries, or places that have been built solely for running the ODL. Privacy and competition are to be taken into account, this is where some companies posted excellent upfront statements and provided physical space separate from their regular offices — others didn’t.

ODLs are particularly popular in the UK and Germany, with other such labs popping up around the world. Whether you want to call them ODLs or IDLs, the need to test on physical devices seems unlikely to lose momentum.

Here are some of the best ODLs for the developer community:

• Germany⁴
• The UK⁵
• Rest of Europe⁶
• North and South America ⁷
• Rest of the World⁸

Germany

Open Device Lab (Augsburg)⁹Link

¹⁰

Address: Team23 GmbH & Co. KG, Provinostraße 52 / Building , 86153 Augsburg, Germany

This stylish lab is the only one in the Augsburg region of Germany, and you can get a free coffee if you work here. It supports its users with a balance of professional knowledge and consulting in fields such as design and UX (as a member of the German Berufsverband User Experience und Usability (UPA) group) and development (with Magento certification and Drupal Association membership).

The lab also works with the University of Applied Sciences to support its students in classes and projects.

pbi planungsbüro INTERNET (Hamburg)¹²Link

¹³

Address: Alter Teichweg 25a, 22081 Hamburg, Germany

All devices in this test lab run with purchased OS versions and offer a virtual environment for each major Internet Explorer (IE) version and Windows operating system. You can use one of the lab’s computers equipped with a Ghost Lab license and test pages simultaneously on multiple devices. Plus, there’s free coffee and water, as well as a friendly team to chat about the latest trends and operating systems.

LAUNCH/CO (Hamburg)¹⁵Link

¹⁶

Address: LAUNCH/CO Hamburg, Neuer Kamp 3, 20359 Hamburg, Germany

This lab maintains a wide range of setups and devices, and it is open for ad-hoc testing sessions; that is, people can usually drop in the same day to test, without booking ahead.

It is run by fellow developers, and someone is always there to help if a question arises or advice is needed. Devices are also lent out on request.

Sevenval (Cologne)¹⁸Link

¹⁹

Address: Bahnhofsvorplatz 1, 50667 Cologne, Germany

This long-standing lab has worked in the mobile space for more than 15 years. Its work has spanned many technologies, including WAP and J2ME, CHTML (aka i-mode) and XHTML/MP, the W3C Mobile Web Initiative, the app store (thanks to the iPhone and Android devices), HTML5 and responsive web design, and it’s adapting to a (potential) future with progressive web apps.

This lab doesn’t just focus on mobile devices, though — it also houses some specialist devices, such as Oculus Rift and Google Glass.

BNT.DE GmbH (Frankfurt am Main)²¹Link

²²

Address: c/o BNT.DE, Löwengasse 27E, 60385 Frankfurt am Main, Germany

With continued five-star ratings²⁴, this lab is a popular choice with its users and engages in regular meetups. It has 32 devices and offers paid testing sessions for larger companies. This busy lab also requests users to make an appointment before turning up.

The UK

DeviceLab EDI (Edinburgh)²⁵Link

²⁶

Address: CodeBase, Argyle House, 38 Castle Terrace, Edinburgh, EH1 2EL, UK

This is one of the few labs in the world that uses a charging model to keep the facility up to date with OS and hardware releases, with all the money made going back into keeping the lab open. This ODL is also exploring other tasks it can help the community with, like adding usability testing facilities for guerilla user testing, session recording and remote observation.

The lab offers free access for open-source and community projects, ad-hoc rates from £25 per hour for small businesses, and monthly subscriptions that help it maintain recurring revenue and stay open.

The team also built a private test lab for the Scottish government’s web team and is currently working on some interesting analytics tools for identifying the right test coverage for your audience.

Si digital ODL (Southsea)²⁸Link

²⁹

Address: The Old Treasury, 7a Kings Road, Southsea, PO5 4DJ, UK

This lab may have been open only a few months, but its dedicated private space is already home to several key devices. All devices are laid out and labelled on shelves, with a work area where you can use browser sync on your laptop to experiment with the layout.

The ODL space can also be booked for usability testing³¹. It houses dedicated Windows and Mac laptops that stream user website tests to a screen outside the room for observation and analysis. This facility allows developers and designers to ensure that every project delivers a seamless and engaging user experience.

Open Device Lab (Southampton)³²Link

³³

Address: 12 Basepoint, Andersons Road, Southampton, Hampshire, SO14 5FE, UK

With more than 25 devices, ranging from an iPhone 6 Plus to an old HTC Desire rocking Android 2.2, this ODL allows the local community to test on real devices, old and new, to make sure their projects work for as many people as possible.

This ODL is a big fan of progressive enhancement and encourages people to build resilient and inclusive websites. The relaxed and collaborative environment in the office also means that team members are on hand for advice.

Adam Tomat from the lab says, “We started the ODL because the local community is important to us. We recognised how difficult it is to test responsive websites without access to real devices and also how unfeasible it is for every individual or organisation to acquire a large enough selection. It’s been a great way for us to connect with new people, start conversations and help to build on the existing digital community here in Southampton.”

We Are Base (Bournemouth)³⁵Link

³⁶

Address: We Are Base, 65 Seamoor Rd, Bournemouth, BH4 9AE, UK

Believed to be the largest collection of open devices in the world, this ODL has more than 440 devices available to use for web and app testing. With everything from brand new devices to old niche devices available, you can book for 1 to 2 hours per day, and only 10 devices can be booked out at a time, for security reasons.

Aside from being the largest in the world, this lab is right in the heart of one of the UK’s fastest-growing tech clusters in Bournemouth and Poole and provides an essential resource for local agencies, product teams, freelancers and students.

Foolproof (London)³⁸Link

³⁹

Address: Harella House, 90-98 Goswell Road, London, EC1V 7DF, UK

This popular London-based device lab has four hot seats in its studio, so you get access to a lot of kit, and you can feel like part of the studio as you see the lab’s practitioners at work.

Former managers have given each of the lab’s devices a name under their own naming convention. The current manager names devices after movie characters. Its latest phone is “Johnny the iPhone 7 Plus,” which you might recognize from the Short Circuit films. If you’d like to use Johnny or any of his 52 companions, write to device.lab@foolproof.co.uk⁴¹.

Cover-Up Lab (Bridgend)⁴²Link

⁴³

Address: Unit 1, George Street, Bridgend, CF31 3TS, UK

Cover-Up’s core business is creating innovative accessories for a selection of phones, tablets and laptops. As a result, for each new product range that it creates, it always buys the device, so that it can test firsthand. So, the company has a huge selection of gadgets that laid around for many years gathering dust — until its ODL was born.

The ODL now houses dozens of devices and is open 9:00 to 17:00, Monday to Friday. Just drop the team an email to book a spot at this ODL serving South Wales.

Indylab (Swansea)⁴⁵Link

⁴⁶

Address: Indycube, 3rd Floor, 11 Wind Street, Swansea, SA1 1DP, UK

This lab holds a variety of screen sizes, from televisions down to watches, and also has devices of varying quality, from old monitors to HD screens. A selection of input types are available, such as trackpads, mice, styluses and screenreaders, installed to test for issues beyond just screen layout, which is a nice touch.

This balance of old and new devices is important, as Paul Burgess from the Indylab explains: “We shouldn’t assume that everyone is using the latest technology. Many people are using devices that haven’t been updated in a long time, so we include some older operating systems and pre-smartphone devices, as well as an iPod running a vintage iOS 2.2.1.”

Rest Of Europe

Open Device Lab (Gent)⁴⁸Link

⁴⁹

Address: Dendermondsesteenweg 48a, Gent, Belgium

Studio Massis is a coworking studio created by and for creative freelancers located in Gent, near the Dampoort railway station.

The space holds a range of mobile devices, and testing can be done free of charge on the premises. You can take devices to test at your own office, but there is a fee and warranty request for this service.

Open Device Lab Brussels (Anderlecht)⁵¹Link

⁵²

Address: Nijverheidskaai 170, 1070 Anderlecht, Belgium

This new lab is just starting out, so not everything is set up yet. This ODL not only provides mobile devices for app and web development, but also has a green key, motion-capture suits and a broad range of media devices, including VR headsets and cool stuff like Leap Motion.

The lab depends on Erasmus University College Brussels, so priority goes to students during weekdays. The lab is reserved every Wednesday, serving visitors from 13:00 to 21:00.

Frontlab (Amsterdam)⁵⁴Link

⁵⁵

Address: Veemkade 328, 1019 HD Amsterdam

This ODL contains a lot of obscure devices with non-mainstream operating systems such as Firefox OS, BlackBerry Playbook and even a few webOS, Ubuntu Phone and Tizen devices. Access to the device lab is free, and coffee is even provided.

The lab recently received a great number of donated devices have not yet been unpacked, tested or listed on the website. So, more to come!

Incentro (Rotterdam) ⁵⁷Link

⁵⁸

Address: Incentro Rotterdam (building Koffie, Unit 2429, 4th Floor), Van Nelleweg 1, 3044BC Rotterdam, The Netherlands

This lab is located in Van Nellefabriek, a UNESCO World Heritage Site. It houses a broad variety of devices, from the more common iPhone devices to old BlackBerrys, Google Glass and Oculus Rift. Visitors can also work in a closed-off space to focus on debugging and testing applications.

The lab’s goal is to help people build better software. It is used for the internal projects of digital service company Incentro⁶⁰, but anyone is welcome to use this space.

Ideato (Cesena)⁶¹Link

⁶²

Address: Piazza Sanguinetti 106, 47522 Cesena (FC), Italy

This friendly space is run by software house Ideato, which also organizes meetups every month to hack new technologies.

The ODL has 12 mobile devices, and Ideato staff are on hand to help users with any issues and inquiries.

Bouvet Devicelab (Bergen)⁶⁴Link

⁶⁵

Address: Bouvet, Solheimsgaten 15, 5058 Bergen, Norway

Users can come here to test devices, or the lab can test a solution on your behalf (for a fee). With 18 devices and more added all the time, you can see your application on all devices simultaneously.

MODL (Malmö)⁶⁷Link

⁶⁸

Address: C/O inUse, Gustav Adolfs Torg 10B, 4th floor, Malmö, Sweden

This lab is hosted in a cozy office, populated mostly by experienced digital designers — but it is run by a couple of passionate front-end developers. There’s always free coffee, and you can also chat with others in the same industry while you take a break from testing. Despite being in an open office, you can pull the drapes on the glass box for some privacy while testing.

This ODL only allows for websites to be tested, not native apps, due to administrative difficulties with developer units.

DeviceLab Switzerland (Lausanne)⁷⁰Link

⁷¹

Address: Rue de Sébeillon 9B, 1004 Lausanne, Switzerland

With free coffee, this ODL is the first one in the French-speaking part of Switzerland. The team takes the time to help users set up and use their devices. The lab is now also available in a portable format (a suitcase), which you can take with you (free of charge) to test from your place of work.

The local multimedia school (Eracom) often comes to look at its projects on old devices, and user-testing sessions are also organized in the lab twice a month.

North And South America

thunder::tech User Experience Lab (Ohio)⁷³Link

⁷⁴

Address: 3635 Perkins Ave, Cleveland, Ohio 44114, USA

The thunder::tech User Experience Lab provides an array of devices that cover a wide range of operating systems and screen sizes, for testing most real-world scenarios. It also houses some unusual items, including a 3D printer for rapid prototyping, wearables such as Google Glass, Samsung Gear VR, Apple Watch, Android Wear watch and interactive devices such as Leap Motion.

Over the last year, this ODL has hosted a Cleveland UXPA event, in which the lab discussed its process for testing clients’ websites. Madison Letizia, social-media team manager at thunder::tech, says, “That’s a big step from where our lab was started many years ago as it originally used only employees’ personal smartphones to fill the need of website testing for client projects. It quickly evolved into the MTL (Mobile Testing Lab) with dedicated devices and today it is officially a User Experience Lab, providing countless opportunities to experience tech, express creativity and learn something new.

Madworks Coworking (Madison)⁷⁶Link

⁷⁷

Address: 505 S. Rosa Road, Suite 225, Madison, WI 53719, USA

This completely community-supported lab has been built up by various members over time. It’s free to any member in the coworking space who wants to use it.

The ODL is expanding soon, so anyone considering using the space should come and check it out.

qaonrequest (Montreal)⁷⁹Link

⁸⁰

Address: 1470 Peel, Suite 480, Montreal, H3A 1T1

Aside from being the only Open Device Lab in Montreal, this lab is not just a library of devices: It’s run by a friendly team of professional software testers who will happily provide advice and share their knowledge with visitors over coffee.

This ODL is located in the heart of downtown Montreal, so it’s easily accessible by public transportation. It is open on the usual business days between 8:00 am and 18:00. If you can give the team a heads up before visiting, this gives them a chance to prepare a comfortable workspace for the day.

Open Device Lab (Portland)⁸²Link

⁸³

Address: 208 SW 1st Ave, Suite 240, Portland, OR 97204, USA

This friendly community device lab provides a quiet space where people in Portland can come to test their work on a variety of devices.

Of the dozens of mobile devices, cofounder Jason Grigsby says, “We’d love for more Portlanders to come use it. We enjoy sharing our space and learning what people are working on.”

Abstracta In-House Device Lab (Montevideo)⁸⁵Link

⁸⁶

Address: Jose Ellauri 1126, Montevideo, Uruguay

Abstracta is a software company focused on QE, so it knows how to help ODL users. The organization has partnered with Monkop⁸⁸ to have many bots automatically run test flows in parallel, while measuring application performance on real devices.

Rest Of The World

BK Device Lab (Bangkok)⁸⁹Link

⁹⁰

Address: 20 Satri Witthaya 2 Soi 17, Lat Phrao, 10230 Bangkok, Thailand

Thailand’s first ODL was originally started by a team for its own testing needs, before they decided to share their resources with the web and development community in Bangkok.

According to the lab, traffic in Bangkok can be a nightmare, so more ODLs are required in other parts of town to combat this issue. BK Device Lab has built a few extra shelves to store the devices, which can be donated to these other labs based around Bangkok to help them get started.

Nomad Device Lab (Cape Town)⁹²Link

⁹³

Address: All over Cape Town, South Africa

The devices in this lab are chosen with its local (South African) users in mind and are updated every now and then based on research and statistics, which means the selection leans towards feature phones and lower-end smartphones.

The devices are purposefully kept relatively low in number but cover a wide range of variables (input method, form factor, quality and condition of hardware, device capabilities). The high-level categories that a device belongs to (for example, old Android, cheap smartphone) are more important than the device itself: The lab is aiming for support across a wide range of these variables. Its focus is to help people build “future-friendly things.”

A couple of devices in the lab might seem odd to include (like the Amazon Kindle Touch, the Sony Playstation Vita and the Nintendo 3DS XL) because these aren’t particularly popular devices for web browsing in South Africa, but they are a good way to testing your website on an old device and browser.

Open Device Lab (Perth)⁹⁵Link

⁹⁶

Address: Level 1, 346 William Street Perth, Western Australia

As western Australia’s first (and only) ODL, this space includes a free workspace with a library full of web-related books and a rotating collection of records.

The space is open to all digital professionals, game developers, makers, freelancers and students alike. You can also book for intimate industry and networking events.

UXBERT Open Device Lab (Riyadh)⁹⁸Link

⁹⁹

Address: UXBERT Usability Lab, Al Nemer Center 1, Olaya Street, Riyadh 11372, Saudi Arabia

This state-of-the-art ODL is the only one in Saudi Arabia and only one of three in the Middle East. It’s located in the only commercial usability testing lab in Saudi Arabia and is equipped with the latest technology, including an Oculus Rift, eye-tracking tools and brain EEG control devices.

Large corporate, government and other businesses pay for Arabic UX and usability-testing consulting services based on a project’s requirements, but use of the ODL is completely free for unfunded startups and entrepreneurs. All the lab asks is that you book in advance to ensure that the lab and devices are available.

As well as testing for quality or bugs, visitors can also take advantage of its usability testing lab (depending on equipment availability) to test with real users and record those tests, but you need to bring your own users.

Nadeem Bakhsh, a senior UX, usability and ecommerce consultant at the UXBERT Usability Lab, sas, “Saudi’s tech startup community is young, but it’s full of ambitious people with innovative ideas. We started this device and usability lab to help support these startups to turn their ideas into reality. Using the lab, they not only get access to devices for testing, but can bounce ideas and get insights from our team of Arab UX, usability and ecommerce experts to help develop their ideas into wireframes, user journeys and prototypes.”

The Foolproof Open Device Lab (Singapore)¹⁰¹Link

¹⁰²

Address: 25 Seah Street, #03-02, Singapore, 188381

This lab has a great mix of new technology and some really ancient devices. The oldest in its collection is a Nokia N85, and it’s got an Oculus Rift and Leap Motion Controller as well. Run by Foolproof¹⁰⁴, an experience design agency, it does a lot of usability testing alongside other research and also houses a testing and observation lab.

Located at Seah Street in Singapore, a short walk from City Hall MRT station, this ODL is open during usual business hours.

---

Have more open device labs you want to share? Please let us know in the comments. Thank you!

(il, al)

Footnotes Link

1. 1 http://www.OpenDeviceLab.com
2. 2 https://twitter.com/klick_ass
3. 3 http://lab-up.org/
4. 4 #a1
5. 5 #a2
6. 6 #a3
7. 7 #a4
8. 8 #a5
9. 9 http://www.odl-augsburg.de
10. 10 http://www.odl-augsburg.de
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/10/1-ODL-DE-Augsburg-large-opt.jpg
12. 12 https://planungsbuero.de
13. 13 https://planungsbuero.de
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/10/2-ODL-planungsbuero-hamburg-large-opt.jpg
15. 15 http://hamburg.opendevicelab.de/
16. 16 http://hamburg.opendevicelab.de/
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/10/3-ODL-launch-co-hamburg-large-opt.jpg
18. 18 http://www.sevenval.com
19. 19 http://www.sevenval.com
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/10/4-ODL-sevenal-cologne-large-opt.jpg
21. 21 http://odl-ffm.de
22. 22 http://odl-ffm.de
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/10/5-ODL-frankfurt-large-opt.jpg
24. 24 http://opendevicelab.com/#!odl=200
25. 25 http://www.devicelab.org
26. 26 http://www.devicelab.org
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/10/6-ODL-devicelab-edi-large-opt.png
28. 28 https://sidigital.co/open-device-lab
29. 29 https://sidigital.co/open-device-lab
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/10/7-ODL-si-digital-uk-large-opt.jpg
31. 31 https://sidigital.co/ux-lab
32. 32 http://odl.rareloop.com
33. 33 http://odl.rareloop.com
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/10/8-ODL-southampton-uk-large-opt.jpg
35. 35 https://odl.wearebase.com
36. 36 https://odl.wearebase.com
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/10/9-ODL-we-are-base-uk-large-opt.jpg
38. 38 http://www.foolproof.co.uk/open-device-lab/
39. 39 http://www.foolproof.co.uk/open-device-lab/
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/10/10-ODL-foolproof-london-large-opt.jpg
41. 41 mailto:device.lab@foolproof.co.uk
42. 42 http://www.cover-up.com/pages/open-device-lab
43. 43 http://www.cover-up.com/pages/open-device-lab
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/10/11-ODL-cover-up-lab-uk-large-opt.jpg
45. 45 https://opendevicelab.wales
46. 46 https://opendevicelab.wales
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/10/12-ODL-indylab-large-opt.jpg
48. 48 http://opendevicelab.studiomassis.be/
49. 49 http://opendevicelab.studiomassis.be/
50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/10/13-ODL-gent-belgium-large-opt.jpg
51. 51 http://www.opendevicelab.ehb.be
52. 52 http://www.opendevicelab.ehb.be
53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/10/14-ODL-brussels-large-opt.png
54. 54 http://frontlab.nl/open-device-lab
55. 55 http://frontlab.nl/open-device-lab
56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/10/16-ODL-frontlab-amsterdam-large-opt.jpg
57. 57 http://devicelab.incentro.com/
58. 58 http://devicelab.incentro.com/
59. 59 https://www.smashingmagazine.com/wp-content/uploads/2016/10/17-ODL-incentro-rotterdam-large-opt.jpg
60. 60 https://www.incentro.com/en/
61. 61 http://www.ideato.it
62. 62 http://www.ideato.it
63. 63 https://www.smashingmagazine.com/wp-content/uploads/2016/10/18-ODL-ideato-italy-large-opt.jpg
64. 64 http://www.bouvet.no/devicelab/
65. 65 http://www.bouvet.no/devicelab/
66. 66 https://www.smashingmagazine.com/wp-content/uploads/2016/10/19-ODL-bouvet-norway-large-opt.jpg
67. 67 http://modl.se/
68. 68 http://modl.se/
69. 69 https://www.smashingmagazine.com/wp-content/uploads/2016/10/20-ODL-malmo-sweden-large-opt.jpg
70. 70 http://devicelab.ch/
71. 71 http://devicelab.ch/
72. 72 https://www.smashingmagazine.com/wp-content/uploads/2016/10/21-ODL-lausanne-switzerland-large-opt.jpg
73. 73 http://uxlab.thundertech.com/
74. 74 http://uxlab.thundertech.com/
75. 75 https://www.smashingmagazine.com/wp-content/uploads/2016/10/22-ODL-thundertech-usa-large-opt.jpg
76. 76 https://www.madworkscoworking.org/
77. 77 https://www.madworkscoworking.org/
78. 78 https://www.smashingmagazine.com/wp-content/uploads/2016/10/23-ODL-madworks-coworking-usa-large-opt.jpg
79. 79 http://softwaretesting.ca
80. 80 http://softwaretesting.ca
81. 81 https://www.smashingmagazine.com/wp-content/uploads/2016/10/24-ODL-qaonrequest-montreal-large-opt.png
82. 82 https://cloudfour.com/portland-device-lab/
83. 83 https://cloudfour.com/portland-device-lab/
84. 84 https://www.smashingmagazine.com/wp-content/uploads/2016/10/25-ODL-portland-usa-large-opt.jpg
85. 85 http://www.abstracta.us/in-house-device-lab/
86. 86 http://www.abstracta.us/in-house-device-lab/
87. 87 https://www.smashingmagazine.com/wp-content/uploads/2016/10/26-ODL-abstracta-uruguay-large-opt.jpg
88. 88 http://www.monkop.com
89. 89 http://bkkdevicelab.com
90. 90 http://bkkdevicelab.com
91. 91 https://www.smashingmagazine.com/wp-content/uploads/2016/10/27-ODL-bk-device-lab-bangkok-thailand-large-opt.jpg
92. 92 https://devicelab.co.za/
93. 93 https://devicelab.co.za/
94. 94 https://www.smashingmagazine.com/wp-content/uploads/2016/10/28-ODL-nomad-cape-town-SA-large-opt.jpg
95. 95 http://perthdevicelab.com
96. 96 http://perthdevicelab.com
97. 97 https://www.smashingmagazine.com/wp-content/uploads/2016/10/29-ODL-perth-australia-large-opt.jpg
98. 98 http://odl.uxbert.com
99. 99 http://odl.uxbert.com
100. 100 https://www.smashingmagazine.com/wp-content/uploads/2016/10/30-ODL-uxbert-riyadh-saudia-arabia-large-opt.jpg
101. 101 http://www.foolproof.co.uk/open-device-lab-singapore/
102. 102 http://www.foolproof.co.uk/open-device-lab-singapore/
103. 103 https://www.smashingmagazine.com/wp-content/uploads/2016/10/31-foolproof-singapore-large-opt.jpg
104. 104 http://www.foolproof.co.uk/

↑ Back to topTweet itShare on Facebook

I have been drawing desktop wallpapers for Smashing Magazine’s monthly collections for over a year now, and every time it’s a very fun and challenging mission. In this article, I would like to share how I approach all stages of the process and provide general techniques for creating vector illustrations in Adobe Illustrator. Hopefully, you will find these techniques useful.

While referring to a particular drawing — the illustration for the “Understand Yourself” desktop wallpaper, which was featured in May’s wallpaper collection this year¹ — I’ll also highlight key takeaways from my experience as an illustrator and designer.

²

The idea for “Understand Yourself” derived from my curiosity about the future relationship between robots and human beings (artificial intelligence has become a thing recently). How would a robot go about understanding human emotions? By doing the same things that people do, of course. Hence, a pensive robot staring at the sunset.

Let’s take a closer look at it and see how it was made.

Things To Consider Before Getting Started Link

• Resolution
  
  Although vector artwork is scalable without compromising quality, you have to decide on the ratio. I prefer 4:3 and 16:9 because these are fairly common standards for most screens. Also, bear in mind that, despite the perfect scalability of vector graphics, working with curve anchors and colors in small areas is sometimes onerous.
• Composition
  
  Rules are made for breaking. But we should know which are supposed to get broken, right? One that I really like is the rule of thirds⁴. It is easy and it works well. The key idea is that main objects should be located at the intersections of the grid lines. If you are willing to learn more about composition, I can’t recommend anything better than the book Framed Ink⁵.
• Depth
  
  To make an illustration look more natural, create depth. You can achieve this by placing some objects closer to the viewer and some farther.
• Framing
  
  Don’t fret that some of your artwork will get trimmed; account for it while drawing. The rule of thumb is to think of your illustration as a clipping from a much bigger picture. While drawing, don’t try to squeeze all objects into the canvas; let them hang out. This is even more relevant if you are planning to turn your artwork into a wallpaper with multiple versions.
• Detail
  
  Adding detail is a great way to make your illustration more attractive. The more thorough the work is, the more one will want to explore it, and the more truthful it will look. On the other hand, adding detail might (and most of the times does) take a lot more time than creating a decent illustration that you are satisfied with.
• Perfection
  
  Don’t be afraid to make mistakes. There is always someone (future you, as well) who is better at composition and coloring. Your drawing won’t be flawless, and over time you will notice a lot of things you didn’t pay attention to or just missed. At the same time, the only way to learn something is to make mistakes. That’s how it works.

It’s All About Storytelling Link

Since the dawn of the human race, storytelling has been one of the most exciting forms of communication. It teaches, it captivates, it makes us think.

An illustration might look static, but it doesn’t have to be. Creating a story within a still image is easier than you might think. All you have to do is to imagine that your artwork is a middle frame of a movie. Technically, a movie is a sequence of images played at high speed, so that the eye doesn’t notice the change of frames.

Think about what happened before the frame you are working on and what might happen after. Let’s think about what’s happening at the moment as well. What led to our frame? What are the causes and consequences?

The art of storytelling is not about what you tell the viewer, but rather how people perceive what you are telling. A good story sources its power from people’s emotions and memories; it resonates with the viewer.

As a quick example, below is one of my wallpapers featured in the August wallpapers collection⁶.

⁷

And this is a message I received shortly after it was published, from Paweł Montwiłł in Poland:

I have recently been to a campsite with my children and we spent some time in a tent, so it perfectly matches my mood.

Chances are, what genuinely interests you will be appreciated by others, too.

Generating Ideas Link

In my opinion, the most important part of the idea-generation process is doodling. This fun and simple activity creates plenty of ideas fast. Of course, you have to sift through them later, but quantity is what matters at this point. All you have to do is start drawing random things. The beauty of doodling is that you don’t have to think hard — your subconscious does all the work. Almost all of my illustrations, logo concepts and comic strips have evolved from doodles.

Try not to tie your artwork to a specific topic if it’s not absolutely necessary. Strong illustration works on its own. In our case, while the concept is connected to the nice weather in May and the beginning of a new season, it could easily be deprived of that context without losing its meaning.

Observe the world around you; get inspired. Think outside the box, because every new idea is a combination of old ones. Jack Foster’s How to Get Ideas⁹ is a wonderful read on the topic.

Sketching Link

A paper sketch will capture your initial idea (materialize it, if you will). A loose paper sketch will help you to evaluate proportions and composition as well. I prefer not to trace my sketches later but to draw, peeking at the sketch from time to time. If you do not stick to the sketch 100%, you will have more freedom to experiment with details and to see where the illustration takes you.

¹⁰

Background Link

The background is extremely important because it sets the mood and affects the colors you will pick later for the hero and the surroundings.

Open Adobe Illustrator, and create a new document by hitting Cmd/Ctrl + N. Type 2560px in the “Width” field and 1440px in the “Height” field. Choose RGB color mode, because we are creating an illustration that will be used on digital screens only. (Note: Shift + O activates the artboard editing mode, so you can change the dimensions of the artboard if you want to alter them or in case you typed them in wrong.)

Hit M to select the Rectangle tool, and click anywhere on the artboard. Type in the same width and height values as your artboard’s (2560px and 1440px).

¹²

(View large version¹³)

The safest way to align our rectangle is to use the “Align to Artboard” option from the dropdown menu in the top control bar. Alternatively, you can move the rectangle around and wait for the live guides to help you align it.

¹⁴

Let’s use a gradient as the background to represent the sky. Select the Gradient tool from the toolbar (if the Gradient tool is missing in the toolbar, go to the top menu and select Window → Gradient). By default, a gradient is white to black.

¹⁶

If you would like your colors to look more real, go ahead and search for some reference pictures of your subject. Get some insight into perspective, lighting, composition, depth and everything else. Pick the colors from the image, and play around with them until you are satisfied with the result.

Let’s see what Unsplash¹⁸ has to offer:

¹⁹

Set the first color stop of our gradient to FEE904:

²²

And set the last color stop to 6B51A8.

²⁴

If you add an in-between color stop, the gradient will be richer and smoother. Let’s warm up our gradient with a pink D65A7C:

²⁶

You can adjust the colors by selecting the respective peg located right under the gradient preview in the Gradient panel. I prefer HSB color mode because it enables me to control the hue, saturation and brightness more predictably than RGB or CMYK do.

Select “Radial” as the gradient type from the “Type” dropdown list located at the top of the Gradient panel.

²⁸

Gradient shape values can be modified by hitting G. Stretch, resize and move the gradient around until the desired effect is reached. In our illustration, I want the sunlight to go from the bottom-right corner all the way to the top-left in a circular manner.

³⁰

I recommend hitting Cmd/Ctrl + 2 as soon as you are fine with the values, so that we lock the background graphic and don’t accidentally select it later. Plus, we can select multiple objects on the artboard much more easily by clicking and dragging the cursor over these objects.

Once the background is in place, we can move on to adding more objects to the scene. Using an iterative approach, we’ll start by “blocking” colors of our shapes. Then, we’ll gradually add more and more detail.

Tip: Save versions of your artwork. It will help you to track your progress and even to revert if you got stuck at some point.

Drawing Shapes Link

In Adobe Illustrator, you can choose between several drawing tools. I recommend drawing with the Pencil tool (N) and modifying paths with the Pen tool (P). The Pen tool is more precise and enables you to add, delete and convert anchor points on a path.

I always start by drawing shapes and filling them with a plain color. This technique is called blocking³². Blocking colors within shapes gives you a rough idea of how the illustration will look color-wise. Also, with the primary color in place, it’s much easier to determine which colors to use for highlights and shadows.

Let’s add some mountain peaks to our scene. As we know from sourcing reference images, objects that are closer to us are darker. I am going to make them not black, though, but dark-blue instead. We’ll save black for objects that are even closer.

Why don’t we put some greenery in front of the mountains to create more depth? Well, our “greenery” will be black.

If you hold Shift while drawing with the Pencil tool (N), the line will be perfectly straight. Let’s draw a cloud and see how a straight line is helpful sometimes. I will use BD5886 for the cloud. Playing around with an object’s opacity is all right, but I prefer to adjust the color manually. (In most cases, lowering the opacity is not enough because real objects tend to reflect colors around them.)

I am always tempted to clone already drawn shapes, but this is a bad habit. Try to avoid copying and pasting as much as you can. Copying the same type of object (another cloud for instance) seems like a quick win. But you won’t save a lot of time, and viewers will spot the clone and smirk. We don’t need that.

In some cases, though, cloning is acceptable. Drawing each leaf independently to create foliage, for example, can be painful. Instead, create as many leaves as you can, and then resize, flip or rotate copies to make them look different.

³⁶

For the robot’s body, let’s pick cold colors. But keep in mind that the overall atmosphere is warm, so we’ll mix cold gray with a bit of red.

³⁸

Hit Ctrl + G to group multiple layers belonging to the same object (like a head or foot). It will be easier to rotate, resize or change their position later if required. Send groups to the back or bring them to the front using Cmd/Ctrl + [ or Cmd/Ctrl + ], respectively.

⁴⁰

Working With Bézier Curves And Anchors Link

As I mentioned, the Pencil tool is a great simulation of a real pencil (especially if you are using a graphic pen tablet). And the Pen tool comes in handy for tweaking curves.

Another helpful tool is the Smooth tool, which enables you to smoothen curves.

Arm yourself with the Pen tool (P), hold Alt, hover over the curve, and drag it. This will create an arch between the nearest anchors.

Select an anchor on the curve using the Direct Selection tool (A), hold Alt, and you will be able to control the direction points independently.

Another nice thing about the Pencil tool (N) is that you can easily modify an existing path simply by drawing on top of the curve. This feature is very helpful for closing an open path, smoothening corners and adding areas without having to draw an additional shape.

Shadows Link

To make objects more realistic, let’s add shadows (darker areas), where the light barely reaches the surface. Obviously, some tree bark and some leaves on the branch will need to be darker than the rest of the foliage.

Let’s draw some shapes that simulate tree bark.

Did you notice that the drawn path automatically becomes smoother? You can adjust the smoothness by double-clicking on the Pencil tool. This will show a dialog containing “Fidelity” and some other options.

⁴⁷

Add more shadows along the branch shape, the robot’s body and the foliage, using the same drawing technique.

⁴⁹

Highlights Link

Highlights (i.e. areas where light reflects off the surface of an object) are just as important as shadows. Let’s add some bright patches along the curve of the tree branch.

Draw a shape along the branch. Hit Cmd/Ctrl + C to copy the branch shape and Cmd/Ctrl + Shift + V to paste the shape in the same place on top of all other objects. Now, select both shapes (the branch and the highlight), go to the Pathfinder panel, and hit “Unite.” “Unite” merges two shapes into one where they overlap. Thus, we’ll have the exact same curve where the highlight follows the branch shape. Holding Shift while using the color picker allows you to pick a single color from a gradient. If you are not holding Shift, the shape will be filled with a gradient of the source object.

We’ll use the same technique for every highlight or shadow that “touches” the border of the shape beneath it. This effect can be achieved using masks; however, masks keep both shapes intact. Selecting masked shapes later might be difficult if you have multiple shapes with the same mask (in our case, the branch is a mask, and the highlights and shadows are masked shapes).

⁵²

Details Link

It’s time to add details such as a backpack, a green light on the robot’s head and a reflection on his face. We can also fine-tune some shapes and lines, remove leftovers, and fix inconsistencies. As soon as you like the look of your illustration, stop.

⁵⁴

The Final Touches Link

Sometimes I’ll put some grain on top of an illustration by making a layer with monochrome noise in Adobe Photoshop. It adds a little texture to the illustration and smoothens the gradients. It’s especially useful when gradients have noticeable step wedges.

To import your vector art to Adobe Photoshop, select all of your graphics by hitting Command + A, and drag and drop them into Photoshop. Embed as a “Smart Object,” which will enable you to scale the vector artwork up and down without losing quality.

Create a new layer with Command + Shift + N, and fill it with white color. Then, go to Filters → Noise → Add Noise in the main menu. Set the noise level to 100%, and hit “OK.” In the layers panel, set the “Blending mode” to “Overlay” and the “Opacity” to your liking (I usually go with 3 to 5%).

⁵⁶

Now we can correct the colors. Hit Cmd/Ctrl + M in Photoshop to open the dialog for curves. Select the “Red,” “Green” or “Blue” channel from the dropdown and play around with the curves.

Shower Thoughts Link

Style vs. Solution Link

While most artists, designers and illustrators are eager to develop their own distinctive style, always think of the purpose, the objective, the “why.” Style is merely a means of achieving your objective. Style sells, no doubt — clients will recognize you by your style. At the same time, it will limit the viewer’s expectations of you as an artist, designer or illustrator.

Neon vs. Light Link

While picking colors from a real image is sometimes reasonable, it depends greatly on the style you’re going for. Black and white with acid color spots here and there? Pale and subdued? Each style demands its own approach to color. What works for a book cover (catchy and provocative) might not work for a wallpaper (imagine staring at extremely bright colors every day).

Idea vs. Execution Link

I always run into the dilemma of which is more important: the idea or the execution of the idea. Your illustration might contain an interesting idea, yet if it’s poorly drawn, it won’t be compelling enough. On the contrary, if your artwork is superb and rich in detail but lacks an idea, is it doing its job? Is it moving people?

Perfection vs. Progress Link

Nothing is perfect except pizza, so don’t get stuck in pursuit of perfection. Let the dust settle, and return to your artwork a day or two after finishing it. But don’t leave it unseen for too long. Would you prefer to get it done and move on, or meticulously improve it pixel by pixel?

Conclusion Link

Illustration is a great way to boost many of your skills and to experiment with drawing techniques, colors and composition. These skills will make you a better specialist in any creative field (such as animation and web design, to name a couple). Just remember that a solid illustration requires patience and is rarely done quickly. The good news is that it pays off.

(cm, al, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/2016/04/desktop-wallpaper-calendars-may-2016/#understand-yourself-05-2016
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/10/001_understand_yourself-large-opt.png
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/10/001_understand_yourself-large-opt.png
4. 4 https://en.wikipedia.org/wiki/Rule_of_thirds
5. 5 https://www.amazon.com/Framed-Ink-Drawing-Composition-Storytellers/dp/1933492953
6. 6 https://www.smashingmagazine.com/2016/07/desktop-wallpaper-calendars-august-2016/
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/10/002_izhik_camping_time-large-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/10/002_izhik_camping_time-large-opt.png
9. 9 https://www.amazon.com/How-Get-Ideas-Jack-Foster/dp/1576754308/
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/10/003_sketch-large-opt.png
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/10/003_sketch-large-opt.png
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_01-large-opt.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_01-large-opt.png
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_02-large-opt.png
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_02-large-opt.png
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_03-large-opt.png
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_03-large-opt.png
18. 18 https://unsplash.com/
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/10/unsplash_sunset-large-opt.png
20. 20 https://unsplash.com/search/sunset?photo=TqaFGqxiCQo
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/10/unsplash_sunset-large-opt.png
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_04-large-opt.png
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_04-large-opt.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_05-large-opt.png
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_05-large-opt.png
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_06-large-opt.png
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_06-large-opt.png
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_07-large-opt.png
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_07-large-opt.png
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_08-large-opt.png
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_08-large-opt.png
32. 32 http://painting.about.com/od/artglossaryb/g/defblockingin.htm
33. 33 https://player.vimeo.com/video/187654239
34. 34 https://player.vimeo.com/video/187654739
35. 35 https://player.vimeo.com/video/187654990
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_08_01-large-opt.png
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_08_01-large-opt.png
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_07_01-large-opt.png
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_07_01-large-opt.png
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_08_02-large-opt.png
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_08_02-large-opt.png
42. 42 https://player.vimeo.com/video/187655301
43. 43 https://player.vimeo.com/video/187655510
44. 44 https://player.vimeo.com/video/187655889
45. 45 https://player.vimeo.com/video/187656045
46. 46 https://player.vimeo.com/video/187655223
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_12-large-opt.png
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_12-large-opt.png
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_11-large-opt.png
50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_11-large-opt.png
51. 51 https://player.vimeo.com/video/187656087
52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_10-large-opt.png
53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_10-large-opt.png
54. 54 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_13-large-opt.png
55. 55 https://www.smashingmagazine.com/wp-content/uploads/2016/10/screen_13-large-opt.png
56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/10/before_after-large-opt.png
57. 57 https://www.smashingmagazine.com/wp-content/uploads/2016/10/before_after-large-opt.png

↑ Back to topTweet itShare on Facebook

Buttons are a common element of interaction design. While they may seem like a very simple UI element, they are still one of the most important ones to create.

In today’s article, we’ll be covering the essential items you need to know in order to create effective controls that improve user experience. If you’d like to take a go at prototyping and wireframing your own designs a bit more differently, you can download and test Adobe XD¹ for free.

Make Buttons Look Like Buttons Link

How do users understand an element is a button? The answer is simple. Visual cues help people determine clickability. It’s important to use proper visual signifiers on clickable elements to make them look like buttons.

Shape Link

A safe bet is to make buttons square or square with rounded corners, depending on the style of the site or app. Rectangular shaped buttons were introduced into the digital world a long time ago, and users are very familiar with them.

²

You can, of course, be more creative and use other shapes, (circles, triangles, or even custom shapes), but keep in mind unique ideas can prove to be a bit riskier. You need to ensure that people can easily identify each varying shape as a button.

⁵

No matter what shape you choose, be sure to maintain consistency throughout your interface controls, so the user will be able to identify and recognize all UI elements as buttons.

Why is consistency so important? Well, because users remember the details, whether consciously or not. For example, users will associate a particular element’s shape as the “button.” Therefore, being consistent won’t only contribute to a great-looking design, but it’ll also provide a more familiar experience for users.

The picture below illustrates this point perfectly. Using three different shapes in one part of your app (e.g. system toolbar) is not only confusing to the user, it’s incorrect design practice.

⁶

Shadows and Highlights Link

Shadows are valuable clues, telling users at which UI element they are looking. Drop-shadows make the element stand out against the background and make it easily identifiable as a tappable or clickable element, as objects that appear raised look like they could be pressed down, (tapped or clicked). Even with flat buttons (almost flat, to be exact), there are still places for these subtle cues.

⁸

Clearly Label Buttons Link

Users avoid interface elements without a clear meaning. Thus, each button in your UI should have a proper label or icon⁹. It’s a good idea to base this selection on the principles of least astonishment: If a necessary button has a label or icon with a high astonishment factor, it may be necessary to change the label or icon.

Clear and Distinct Labels Link

The label on actionable interface elements, such as a button, should always tie back to what it will do for the user. Users will feel more comfortable when they understand what action a button does. Vague labels like ‘Submit,’ or abstract labels like in the example below, don’t provide enough information about the action.

¹⁰

The action button should affirm what that task is, so that users know exactly what happens when they click that button. It’s important to indicate what a button does using action verbs. For example, if a user is signing up for an account, a button that says, ‘Create Account,’ tells them what the outcome will be after pressing the button. It’s clear and specific to the task. Such explicit labels serve as just-in-time help, giving users confidence in selecting the correct action.

¹²

Put Buttons Where Users Can Find Them Link

Don’t make users hunt for buttons; put buttons where users can easily find them or expect to see them.

Location and Order Link

If you’re designing a native app, you should follow platform GUI guidelines when choosing a proper location and order for buttons. Why? Because applying consistent design that follows user expectations saves people time.

¹⁴

In the case of web-based apps, you should think about which placement truly works best for your users. The right way to determine this is by testing.

If you design mobile navigation it’s worth paying attention to the best practices for buttons location. The article The Golden Rules Of Bottom Navigation Design⁴⁵¹⁷ covers this topic.

Make It Easy For Users To Interact With Buttons Link

The size and visual feedback of buttons, play key roles in helping users interact with them.

Size and Padding Link

You should consider how large a button is in relation to the other elements on the page. At the same time, you need to ensure the buttons you design are large enough for people to interact with.

¹⁸

When a tap is used as a primary input method for your app or site, you can rely on the MIT Touch Lab²¹ study to choose a proper size for your buttons. This study found that the average size of finger pads are between 10–14mm and fingertips are 8–10mm, making 10mm x 10mm a good minimum touch target size. When a mouse and keyboard are the primary input methods, button measurements can be slightly reduced to accommodate dense UIs.

²²

You should consider the size of button elements, as well as the padding between clickable elements, as padding helps separate the controls and gives your user interface enough breathing space.

²⁴

Provide Visual Feedback Link

This requirement isn’t about how the button initially looks to the user; it’s about interaction experience with the UI element. Usually, a button isn’t a one-state object. It has multi-states, and providing visual feedback to users to indicate the current state should be a top priority task. This helpful illustration from Material Design²⁷ makes it clear how to convey different button states:

²⁸

³⁰

Visually Highlight The Most Important Buttons Link

Ensure the design puts emphasis on the primary or most prominent action. Use color and contrast to keep user focus on the action, and place the button in prominent locations where users are most likely to notice it.

Call-to-Action Button Link

Important buttons, (such as CTAs,) are meant to direct users into taking the action you want them to take. To create an effective call-to-action button, one that grabs the user’s attention and entices them to click, you should use colors with a high contrast in relation to the background and place the button in the path of a user.

If we look at Gmail’s UI³³, the interface is very simple and almost monochromatic, with the exception of the ‘Send’ button. As soon as users finish writing a message, they immediately notice this nice blue button.

³⁴

The same rule works for websites. If you take a look at the Behance³⁵ example below, the first thing that will catch your attention is a “Sign Up” call-to-action button. The color and the position, in this case, is more important than the text.

³⁶

Visual Distinctions for Primary and Secondary Buttons Link

You can find another example of grabbing the user’s attention with buttons in forms and dialogues. When choosing between primary and secondary actions, visual distinctions are a useful method for helping people make solid choices:

• The primary positive action associated with a button needs to carry a stronger visual weight. It should be the visually dominant button.
• Secondary actions, (e.g. options like ‘Cancel’ or ‘Go Back’,) should have the weakest visual weight, because reducing the visual prominence of secondary actions minimizes the risk for potential errors, and further directs people toward a successful outcome.

³⁸

Button Design Checklist Link

While every design is unique, every design also has a set of items in common. That’s where having a good design checklist comes in. To ensure your button design is right for your users, you need to ask a few questions:

• Are users identifying your element as a button? Think about how the design communicates affordance. Make a button look like a button (use size, shape, drop-shadows and color for that purpose).
• Does a button’s label provide a clear message as to what will happen after a click? It’s often better to name a button, explaining what it does, than to use a generic label, (like “OK”).
• Can your user easily find the button? Where on the page you place the button is just as important as its shape, color and the label on it. Consider the user’s path through the page and put buttons where users can easily find them or expect them to be.
• If you have two or more buttons in your view, (e.g. dialog box), does the button with the primary action have strongest visual weight? Make the distinction between two options clear, by using different visual weight for each button.

Conclusion Link

Buttons are a vital element in creating a smooth user experience, so it’s worth paying attention to the best essential practices for them. A quick recap:

• Make buttons look like buttons.
• Label buttons with what they do for users.
• Put buttons where users can find them or expect them to be.
• Make it easy for the user to interact with each button.
• Make the most important button clearly identifiable.

When you design your own buttons, start with the ones that matter most, and keep in mind that button design is always about recognition and clarity.

Recommended Reading Link

• “7 Basic Best Practices for Buttons⁴¹,” UXmatters
• “The Evolution of Buttons in UX Design⁴²,” Adobe
• “How Button Placement Conventions Reinforce User Habits⁴³,” UX Movement
• “Visual Weight of Primary and Secondary Action Buttons⁴⁴,” UX Movement
• “The Golden Rules Of Bottom Navigation Design⁴⁵¹⁷“, Smashing Magazine
• “11 Characteristics Of Persuasive Call-To-Action Buttons⁴⁶“, UserTesting

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app⁴⁷ is made for a fast and fluid UX design process, creating interactive navigation prototypes, as well as testing and sharing them — all in one place.

You can check out more inspiring projects created with Adobe XD on Behance⁴⁸, and also visit the Adobe XD blog⁴⁹ to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free⁵⁰.

(ms, il, aa)

Footnotes Link

1. 1 http://adobe.ly/2dHvgEx
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Windows-95-at-first-run-large-opt.png
3. 3 https://en.wikipedia.org/wiki/Windows_95
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Windows-95-at-first-run-large-opt.png
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Floating-Action-Button-preview-opt.png
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/11/consistent-large-opt.png
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/11/consistent-large-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/11/button-casts-a-subtle-shadow-preview-opt.png
9. 9 https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/11/designing-interface-elements-that-make-people-wonder-what-they-do-preview-opt.png
11. 11 http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/11/button’s-label-preview-opt.png
13. 13 https://www.amazon.com/
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/11/web-based-apps-large-opt.png
15. 15 https://developer.apple.com/library/safari/documentation/UserExperience/Conceptual/MobileHIG/Modal.html
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/11/web-based-apps-large-opt.png
17. 17 https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Smaller-touch-targets-large-opt.png
19. 19 https://developer.apple.com/design/tips/
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Smaller-touch-targets-large-opt.png
21. 21 http://touchlab.mit.edu/publications/2003_009.pdf
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/11/10mm-x-10mm-is-a-good-minimum-touch-target-size-preview-opt.png
23. 23 https://uxmag.com/articles/excerpt-from-the-new-book-the-mobile-frontier
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Padding-between-buttons-large-opt.png
25. 25 https://material.google.com/components/dialogs.html#dialogs-specs
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Padding-between-buttons-large-opt.png
27. 27 https://material.google.com/
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/11/hover-tap-states-and-active-states-of-the-button-preview-opt.png
29. 29 https://material.google.com
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Animation-shows-the-buttons-behavior-in-action.gif
31. 31 https://www.behance.net/gallery/23056487/Material-Design-Button-Animation
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Animation-shows-the-buttons-behavior-in-action.gif
33. 33 https://mail.google.com/
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Adding-one-color-to-a-grayscale-UI-preview-opt.png
35. 35 https://www.behance.net/
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/11/The-most-important-call-to-action-button-large-opt.png
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/11/The-most-important-call-to-action-button-large-opt.png
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/11/primary-action-is-stronger-in-colour-and-contrast-large-opt.png
39. 39 https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/WindowAlerts.html
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/11/primary-action-is-stronger-in-colour-and-contrast-large-opt.png
41. 41 http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php
42. 42 https://blogs.adobe.com/creativecloud/the-evolution-of-buttons-in-ux-design/
43. 43 http://uxmovement.com/buttons/how-button-placement-conventions-reinforce-user-habits/
44. 44 http://uxmovement.com/buttons/visual-weight-of-primary-and-secondary-action-buttons/
45. 45 https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/
46. 46 https://www.usertesting.com/blog/2015/09/29/11-characteristics-of-persuasive-call-to-action-buttons/
47. 47 http://adobe.ly/2dHqYbP
48. 48 http://adobe.ly/1U9LS0E
49. 49 http://adobe.ly/1sGB17z
50. 50 http://adobe.ly/2dHqYbP

↑ Back to topTweet itShare on Facebook

Editor’s note:Please note that this article is quite lengthy, and contains dozens of CodePen embeds for an interactive view. The page might take a little while to load, so please be patient.

Layout on the web is hard. The reason it is so hard is that the layout methods we’ve relied on ever since using CSS for layout became possible were not really designed for complex layout. While we were able to achieve quite a lot in a fixed-width world with hacks such as faux columns, these methods fell apart with responsive design. Thankfully, we have hope, in the form of flexbox — which many readers will already be using — CSS grid layout and the box alignment module.

In this article, I’m going to explain how these fit together, and you’ll discover that by understanding flexbox you are very close to understanding much of grid layout.

A Note On Browser Support Link

CSS grid layout is currently behind a flag or available in the developer and nightly builds of Firefox, Safari, Chrome and Opera. Everything you see here can be seen to be working if you use a developer or nightly browser or enable the flag in a mainstream browser that has flagged support. I am trying to keep an up-to-date list of support for grid layouts¹.

New Values For Display Link

Both grid and flexbox are new values for the display property. To make an element a flex container, we use display: flex; to make it a grid container, we use display: grid.

As soon as we do so, the immediate children of our flex or grid container become flex or grid items. Those immediate children take on the initial values of flex or grid items.

display: flex Link

In the first example, we have three elements in a wrapper element set to display: flex. That’s all we need to do to start using flexbox.

Unless we add the following properties with different values, the initial values for the flex container are:

• flex-direction: row
• flex-wrap: no-wrap
• align-items: stretch
• justify-content: flex-start

The initial values for our flex items are:

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

We’ll look at how these properties and values work later in this article. For now, all you need to do is set display: flex on a parent, and flexbox will begin to work.

See the Pen Flexbox defaults² by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

display: grid Link

To lay out items on a grid, we use display: grid. In order that we can see the grid’s behavior, this example has five cards to lay out.

Adding display: grid won’t make a dramatic change; however, our child items are all now grid items. They have fallen into a single-column track grid, displaying one below the other, the grid creating implicit row tracks to hold each item.

See the Pen Grid defaults⁵ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

We can take our grid a step further and make it more grid-like by creating some columns. We use the grid-template-rows property to do this.

In this next example, I’ve created three equal-width column tracks using a new unit that has been created for grid. The fr unit is a fraction unit signifying the fraction of available space this column should take up. You can see how our grid items have immediately laid themselves out on the grid, one in each created cell of our explicitly defined columns. The grid is still creating implicit rows; as we fill up the available cells created by our columns, new rows are created to hold more items.

See the Pen Grid columns⁸ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

Once again, we have some default behavior in evidence. We haven’t positioned any of these grid items, but they are placing themselves onto our grid, one per cell of the grid. The initial values of the grid container are:

• grid-auto-flow: row
• grid-auto-rows: auto
• align-items: stretch
• justify-items: stretch
• grid-gap: 0

These initial values mean that our grid items are placed one into each cell of the grid, working across the rows. Because we have a three-column track grid, after filling the grid cell of the third column, a new row is created for the rest of the items. This row is auto-sized, so will expand to fit the content. Items stretch in both directions, horizontal and vertical, filling the grid area.

Box Alignment

In both of these simple examples, we are already seeing values defined in the box alignment module in use. “Box Alignment Module Level 3” essentially takes all of the alignment and space distribution defined in flexbox and makes it available to other modules. So, if you already use flexbox, then you are already using box alignment.

Let’s look at how box alignment works in flexbox and grid, and the problems that it helps us solve.

Equal-Height Columns

Something that was very easy to create with old-school table-based layouts, yet fiendishly difficult using positioning and floats, is equal-height columns. In the floated example below, our cards contain unequal amounts of content. We have no way of indicating to the other cards that they should visually take on the same height as the first card — they have no relationship to each other.

See the Pen Floated columns¹¹ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

As soon as we set the display property to grid or flex on a parent, we give the children a relationship to each other. That relationship enables the box-alignment properties to work, making equal-height columns simple.

In the flex example below, our items have unequal amounts of content. While the background on each lines up, it doesn’t sit behind the content as it would for floated elements. Because these items are displayed in a row, the property that controls this behavior is align-items. Creating equal-height columns requires that the value be stretch — the initial value for this property.

See the Pen Flexbox equal-height columns¹⁴ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

We see the same with grid layouts. Below is the simplest of grid layouts, two columns with a sidebar and main content. I’m using those fraction units again; the sidebar has 1 fraction of the available space, and the main content 3 fractions. The background color on the sidebar runs to the bottom of the content. Once again, the default value of align-items is stretch.

See the Pen Grid equal-height columns¹⁷ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

Alignment in Flexbox

We’ve seen how the default value of align-items for both grid and flexbox is stretch.

For flexbox, when we use align-items, we are aligning them inside the flex container, on the cross axis. The main axis is the one defined by the flex-direction property. In this first example, the main axis is the row; we are then stretching the items on the cross axis to the height of the flex container. The height of the flex container is, in this case, determined by the item with the most content.

²⁰

I could give the wrapper a height, and in this case the height of the flex container would be defined by that height.

²²

We can use other values, instead of the default stretch:

• flex-start
• flex-end
• baseline
• stretch

To control the alignment on the main axis, use the justify-content property. The default value is flex-start, which is why our items are all aligned against the left margin. We could instead use any of the following values:

• flex-start
• flex-end
• center
• space-around
• space-between

The space-between and space-around keywords are especially interesting. With space-between, the space left over after the flex items have been displayed is distributed evenly between the items.

²⁴

Using space-around is similar except that the space left over is distributed on both sides of the items. You get a half-sized gap on each end.

²⁶

You can see these properties and values in the CodePen below.

See the Pen Flexbox alignment flex-direction: row³¹ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

We can display flex items as a column rather than a row. If we change the value of flex-direction to column, then the main axis becomes the column, and the cross axis is along the row — align-items is still stretch by default, and so stretches the items across row-wise.

³⁴

If instead we want them to align to the start of the flex container, we use flex-start.

³⁶

We can use justify-items, too, including space-between and space-around. The container needs to have enough height for you to see each in action, though!

³⁸

See the Pen Flexbox alignment flex-direction: column⁴⁰ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

Alignment in Grid Layout Link

In a grid layout, the behavior is similar, except that we are aligning items within the defined grid area. In flexbox, we talk about the main and cross axis; with grids, we use the terms “block” or “column axis” to describe the axis defining our columns, and “inline” or “row axis” to describe the axis defining our rows, as defined in the specification⁴³.

We can align content inside a grid area using the properties and values described in the box alignment specification.

A grid area is one or more grid cells. In the example below, we have a four-column and four-row track grid. The tracks are separated by a grid gap of 10 pixels, and I have created three grid areas using line-based positioning. We’ll look at this positioning properly later in this guide, but the value before the / is the line that the content starts on, and the value after where it ends.

See the Pen Grid alignment: align-items and justify-items⁴⁴ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

The dotted border is on a background image, to help us see the defined areas. So, in the first example, each area uses the defaults of stretch for both align-items on the column axis and justify-items on the row axis. This means that the content stretches to completely fill the defined area.

⁴⁷

In the second example, I have changed the value of align-items on the grid container to center. We can also change this value on an individual grid item using the align-self property. In this case, I have set all items to center, but item two to stretch.

⁴⁹

In the third example, I have changed the value of justify-items and justify-self again, setting these to center and stretch.

⁵¹

In all of the examples above, I have aligned the content of the grid areas, the areas defined by the start and end grid lines.

We can also align the entire grid inside the container, if our grid tracks are sized so that they take up less space than the container that has been set to display: grid. In this case, we use the align-content and justify-content properties, as with flexbox.

See the Pen Grid alignment: aligning the grid⁵³ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

In the first example, we see the default alignment of a grid where the columns and rows have been defined in absolute units and take up less space than the fixed-sized wrapper allows for. The default values for both are start.

⁵⁶

To move the tracks to the bottom right, we change the values to end.

⁵⁸

Just as with flexbox, we can use space-around and space-between. This might cause some behavior that we don’t want as the grid gaps essentially become wider. However, as you can see from the image below and in the third example in the CodePen, we get the same space between or around the tracks as we see with flexbox.

⁶⁰

The fixed-sized tracks will gain additional space if they span more than one track. Element two and four in our example are wider and three is taller because they are given the extra space assigned to the gap they span over.

We can completely center the grid by setting both values to center, as shown in the last example.

⁶²

We have very nice alignment abilities in both flexbox and grid, and they work in a generally consistent way. We can align individual items and groups of items in a way that is responsive and prevents overlap — something the web has lacked until now!

Responsive By Default Link

In the last section, we looked at alignment. The box-alignment properties as used in grid and flexbox layouts are one area where we see how these specifications have emerged in a world where responsive design is just how things are done. Values such as space-between, space-around and stretch allow for responsiveness, distributing content equally among or between items.

There is more, however. Responsive design is often about maintaining proportion. When we calculate columns for a responsive design using the target ÷ context approach introduced in Ethan Marcotte’s original article on fluid grids⁶⁴, we maintain the proportions of the original absolute-width design. Flexbox and grid layouts give us far simpler ways to deal with proportions in our designs.

Flexbox gives us a content-out approach to flexibility. We see this when we use a keyword value of space-between to space our items evenly. First, the amount of space taken up by our items is calculated, and then the remaining space in the container is divided up and used evenly to space out the items. We can get more control of content distribution by way of properties that we apply to the flex items themselves:

• flex-grow
• flex-shrink
• flex-basis

These three properties are more usually described by the shorthand flex property. If we add flex: 1 1 300px to an item, we are stating that flex-grow should be 1 so that items can grow, flex-shrink should be 1 so that items can shrink, and the flex-basis should be 300 pixels. Applying this to our cards layout gives us the example below.

See the Pen Flexbox: flex properties⁶⁵ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

Our flex-basis here is 300 pixels, and we have three cards in a row. If the flex container is wider than 900 pixels, then the remaining space is divided into three and distributed between the items equally. This is because we have set flex-grow to 1 so that our items can grow from the flex-basis. We have also set flex-shrink to 1, which means that, where we don’t have space for three 300-pixel columns, space will be removed equally.

If we want these items to grow in different proportions, then we can change the flex-grow value on one or more items. If we would like the first item to get three times the available space distributed to it, we would set flex-grow to 3.

See the Pen Flexbox: flex properties⁶⁸ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

The available space is distributed after the amount needed for flex-basis has been taken into account. This is why our first item is not three times the size of our other items, but instead gets a share of three parts of the remaining space. You will see a bigger change by setting the value for flex-basis to 0, in which case we wouldn’t have a starting value to remove from the overall container. Then, the entire width of the container could be distributed in proportion to our items.

See the Pen Flexbox: flex properties⁷¹ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

A very useful tool to help you understand these values is Flexbox Tester⁷⁴. Pop the different values into the tester, and it calculates the actual sizes at which your items will end up, and explains why they end up at that size.

If you use auto as your flex-basis value, it will use any size set on the flex item as the flex-basis value. If there is no size, then it defaults to be the same as the value of content, which is the content’s width. Using auto is, therefore, very useful for reusable components that might need to have a set size on an item. You can use auto and be sure that if the item needs to be around a size defined on it, flexbox will respect it.

In the next example, I have set the flex-basis on all cards to auto. I then gave the first card a width of 350 pixels. So, the flex-basis of that first card is now 350 pixels, which is used to work out how to distribute space. The other two cards have a flex-basis based on their content’s width.

See the Pen Flexbox: flex properties⁷⁵ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

If we go back to our original flex: 1 1 300px, add more items to our example and set flex-wrap: wrap on the container, the items will wrap in order to maintain as near as possible the flex-basis value. If we have five images and three fit onto one row, then the next two will wrap onto a new row. As the items are allowed to grow, they both grow equally, and so we get two equal-sized items on the bottom row and three in the row above.

See the Pen Flexbox: wrapping⁷⁸ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

The question then asked is often, “How can I get the items on the bottom row to line up with the ones on the top, leaving a gap at the end?” The answer is that you don’t, not with flexbox. For that kind of behavior you need a grid layout.

Keeping Things in Proportion With Grid Layout

Grid layouts, as we have already seen, have a concept of creating column and row tracks into which items can be positioned. When we create a flexible grid layout, we set the proportions when defining the tracks on the grid container — rather than on the items, as with flexbox. We encountered the fr unit when we created our grids earlier. This unit works in a similar way to flex-grow when you have a flex-basis of 0. It assigns a fraction of the available space in the grid container.

In this code example, the first column track has been given 2fr, the other two 1fr. So, we divide the space into four and assign two parts to the first track and one part each to the remaining two.

See the Pen Simple grid showing fraction units⁸¹ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

Mixing absolute units and fr units is valid. In this next example, we have a 2fr track, a 1fr track and a 300-pixel track. First, the absolute width is taken away, and then the remaining space is divided into three and assigned three parts to track 1 and one part to track 2.

See the Pen Grid: Mixing absolute and fraction units⁸⁴ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

What you can also see from this example is that our items fit into the defined tracks — they don’t distribute across the row, as they do in the flexbox example. This is because, with grid layouts, we are creating a two-dimensional layout, then putting items into it. With flexbox, we get our content and work out how much will fit in a single dimension in a row or column, treating additional rows or columns as entirely new flex containers.

What would be nice, however, is to still have a way to create as many columns of a certain size as will fit into the container. We can do this with grid and the repeat syntax.

In the next example, I will use the repeat syntax to create as many 200-pixel columns as will fit in our container. I am using the repeat syntax for the track listing, with a keyword value of auto-fill and then the size that I want the repeated tracks to be.

(At the time of writing, this was not implemented in Chrome, but works in Firefox Developer Edition.)

See the Pen Grid: As many 200-pixel tracks as will fit⁸⁷ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

We can go a step further than that and combine fraction units and an absolute width to tell the grid to create as many 200-pixel tracks as will fit in the container and to distribute the remainder equally.

See the Pen Grid: As many 200-pixel tracks as will fit, distributing remaining space evenly⁹⁰ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

In this way, we get the benefits of a two-dimensional layout but still have flexible quantities of tracks — all without using any media queries. What we also see here is the grid and flexbox specifications diverging. Where flexbox ends with distributing items in one dimension, grid is just getting started.

A Separation of Source Order and Visual Display

With flexbox, we can’t do a lot in terms of positioning our flex items. We can choose the direction in which they flow, by setting flex-direction to row, row-reverse or column, column-reverse, and we can set an order, which controls the visual order in which the items display.

See the Pen Flexbox: order⁹³ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

With grid layouts, we get to properly position child items onto the grid we have defined. In most of the examples above, we have been relying on grid auto-placement, the rules that define how items we have not positioned are laid out. In the example below, I am using line-based positioning to position the items on the grid.

The grid-column and grid-row properties are a shorthand for grid-column-start, grid-row-start, grid-column-end and grid-row-end. The value before the / is the line that the content starts on, while the value after is the line it ends on.

See the Pen Grid: line-based positioning⁹⁶ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

You can also name your lines. This happens when you create your grid on the grid container. Name the lines in brackets, and then position the items as before but using the names instead of the line index.

See the Pen Grid: line-based positioning, named lines⁹⁹ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

You can have multiple lines with the same name, and then target them by line name and index.

You can use a span keyword, spanning a number of lines or, for example, to the third line named col. This type of positioning is useful for creating components that sit in various places in the layout. In the example below, I want some elements to span six column tracks and others to span three. I am using auto-placement to lay out the items, but when the grid encounters an item with a class of wide, the start value will be auto and the end value will be span 2; so, it will start on the line it would normally start on based on the auto-placement rules, but span two lines.

See the Pen Grid: multiple lines with the same name¹⁰² by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

Using auto-placement with some rules in this way will likely leave some gaps in our grid as the grid encounters items that need two tracks and has space for only one. By default, the grid progresses forward; so, once it leaves a gap, it doesn’t go back to place things in it — unless we set grid-auto-flow to a value of dense, in which case, the grid will actually backfill the gaps left, taking the content out of DOM order.

See the Pen Grid: grid-auto-flow: dense¹⁰⁵ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

There is also a whole different method of positioning items using the grid layout — by creating a visual representation of our layout right in the value of the grid-template-areas property. To do this, you first need to name each direct child of the grid container that you want to position.

We then lay the items out in this ASCII art manner as the value of grid-template-areas. If you wanted to entirely redefine the layout based on media queries, you could do so just by changing the value of this one property!

See the Pen Grid: template areas¹⁰⁸ by rachelandrew (@rachelandrew^{10910610310097949188858279767269665445413229181512963}) on CodePen^{110107104101989592898683807773706755464233301916131074}.

As you can see from the example, to leave a cell empty, we use a full stop or a series of full stops with no white space between them. To cause an element to span a number of tracks, we repeat the name.

Accessibility Implications of Reordering

For flexbox and even more so for grid layouts, we need to take great care when using these methods to reorder content. The specification for flexbox states¹¹¹:

Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.

For grids, we are warned¹¹²:

Grid layout gives authors great powers of rearrangement over the document. However, these are not a substitute for correct ordering of the document source. The order property and grid placement do not affect ordering in non-visual media (such as speech). Likewise, rearranging grid items visually does not affect the default traversal order of sequential navigation modes (such as cycling through links).

In both cases, as currently defined, the reordering is only visual. It does not change the logical order of the document. In addition, we need to take great care in considering sighted keyboard users. It would be incredibly simple to cause someone tabbing through the document to tab along the navigation at the top and then suddenly be taken to the bottom of the document due to a grid item that appears early in the source being positioned there.

A New System For Layout

I’ve not covered every aspect of Grid and Flexbox in this guide – my aim being to show the similarities and differences between the specifications, and to throw Box Alignment into the mix. To demonstrate that what these specifications are bringing us is a new layout system, one that understands the kind of sites and applications we are building today.

At the present time Flexbox is all we have in production browsers, however Grid — behind a flag — is shaping up in Chrome, Opera, Safari and Firefox. Flexbox initially emerged prefixed, was used in production by developers, and then changed making us all feel as if we couldn’t rely on it. Grid is being developed behind a flag and if you take a look at the examples in this article in a browser with the flag enabled, you’ll find that the implementations are already very interoperable. With the specification now at Candidate Recommendation status, the specification is all but finished. So when Grid lands, possibly early next year, it is going to land in a very cross-browser compatible state.

Do play with the examples in the article, and there is a whole host of other stuff detailed in the resources below. I would be especially interested in use cases that you can’t achieve with these layout methods. If you find one let me know, I’m interested in finding the edges of the specifications we have so welcome a challenge.

Resources

Here are some resources to help you explore these specifications further.

• “The Flexbox Reading List: Techniques and Tools¹¹³,” Cosima Mielke, Smashing Magazine
• Grid by Example¹¹⁴, Rachel Andrew
• “Grid Resources¹¹⁵” (list), Grid by Example, Rachel Andrew
• “CSS Grid Layout Examples¹¹⁶,” Igalia
• “A Complete Guide to Grid¹¹⁷,” CSS-Tricks
• “Laying Out The Future With Grid And Flexbox¹¹⁸” (video), Rachel Andrew, Mozilla Hacks
• The Experimental Layout Lab of Jen Simmons¹¹⁹

(ms, vf, ml, rb, al, il)

Footnotes Link

1. 1 http://gridbyexample.com/browsers
2. 2 ‘http://codepen.io/rachelandrew/pen/ZOpOqB/’
3. 3 ‘http://codepen.io/rachelandrew’
4. 4 ‘http://codepen.io’
5. 5 ‘http://codepen.io/rachelandrew/pen/QEKGNm/’
6. 6 ‘http://codepen.io/rachelandrew’
7. 7 ‘http://codepen.io’
8. 8 ‘http://codepen.io/rachelandrew/pen/LZRbRV/’
9. 9 ‘http://codepen.io/rachelandrew’
10. 10 ‘http://codepen.io’
11. 11 ‘http://codepen.io/rachelandrew/pen/YWGrPy/’
12. 12 ‘http://codepen.io/rachelandrew’
13. 13 ‘http://codepen.io’
14. 14 ‘http://codepen.io/rachelandrew/pen/ZOpXEM/’
15. 15 ‘http://codepen.io/rachelandrew’
16. 16 ‘http://codepen.io’
17. 17 ‘http://codepen.io/rachelandrew/pen/GqjMJj/’
18. 18 ‘http://codepen.io/rachelandrew’
19. 19 ‘http://codepen.io’
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/06/01-flex-row-opt.png
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/06/01-flex-row-opt.png
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/06/02-flex-row-height-opt.png
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/06/02-flex-row-height-opt.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/06/03-flex-space-between-opt.png
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/06/03-flex-space-between-opt.png
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/06/04-flex-space-around-opt.png
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/06/04-flex-space-around-opt.png
28. 28 ‘http://codepen.io/rachelandrew/pen/32a53959ea2287ba69c130ff9872790b/’
29. 29 ‘http://codepen.io/rachelandrew’
30. 30 ‘http://codepen.io’
31. 31 ‘http://codepen.io/rachelandrew/pen/PzGJzm/’
32. 32 ‘http://codepen.io/rachelandrew’
33. 33 ‘http://codepen.io’
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/06/05-flex-column-opt.png
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/06/05-flex-column-opt.png
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/06/06-flex-column-start-opt.png
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/06/06-flex-column-start-opt.png
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/06/07-flex-column-space-between-opt.png
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/06/07-flex-column-space-between-opt.png
40. 40 ‘http://codepen.io/rachelandrew/pen/JKRrvY/’
41. 41 ‘http://codepen.io/rachelandrew’
42. 42 ‘http://codepen.io’
43. 43 https://www.w3.org/TR/css-grid-1/#grid-concepts
44. 44 ‘http://codepen.io/rachelandrew/pen/EygpMv/’
45. 45 ‘http://codepen.io/rachelandrew’
46. 46 ‘http://codepen.io’
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/06/08-grid-default-align-opt.png
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/06/08-grid-default-align-opt.png
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/06/09-grid-align-items-opt.png
50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/06/09-grid-align-items-opt.png
51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/06/10-grid-justify-items-opt.png
52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/06/10-grid-justify-items-opt.png
53. 53 ‘http://codepen.io/rachelandrew/pen/aZBozX/’
54. 54 ‘http://codepen.io/rachelandrew’
55. 55 ‘http://codepen.io’
56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/06/11-grid-align-start-opt.png
57. 57 https://www.smashingmagazine.com/wp-content/uploads/2016/06/11-grid-align-start-opt.png
58. 58 https://www.smashingmagazine.com/wp-content/uploads/2016/06/12-grid-align-end-opt.png
59. 59 https://www.smashingmagazine.com/wp-content/uploads/2016/06/12-grid-align-end-opt.png
60. 60 https://www.smashingmagazine.com/wp-content/uploads/2016/06/13-grid-align-space-opt.png
61. 61 https://www.smashingmagazine.com/wp-content/uploads/2016/06/13-grid-align-space-opt.png
62. 62 https://www.smashingmagazine.com/wp-content/uploads/2016/06/14-grid-align-center-opt.png
63. 63 https://www.smashingmagazine.com/wp-content/uploads/2016/06/14-grid-align-center-opt.png
64. 64 http://alistapart.com/article/fluidgrids
65. 65 ‘http://codepen.io/rachelandrew/pen/gMLrEG/’
66. 66 ‘http://codepen.io/rachelandrew’
67. 67 ‘http://codepen.io’
68. 68 ‘http://codepen.io/rachelandrew/pen/NrbNmz/’
69. 69 ‘http://codepen.io/rachelandrew’
70. 70 ‘http://codepen.io’
71. 71 ‘http://codepen.io/rachelandrew/pen/jrVqoQ/’
72. 72 ‘http://codepen.io/rachelandrew’
73. 73 ‘http://codepen.io’
74. 74 https://madebymike.com.au/demos/flexbox-tester/
75. 75 ‘http://codepen.io/rachelandrew/pen/mEOPZM/’
76. 76 ‘http://codepen.io/rachelandrew’
77. 77 ‘http://codepen.io’
78. 78 ‘http://codepen.io/rachelandrew/pen/QEGNeZ/’
79. 79 ‘http://codepen.io/rachelandrew’
80. 80 ‘http://codepen.io’
81. 81 ‘http://codepen.io/rachelandrew/pen/xOROVO/’
82. 82 ‘http://codepen.io/rachelandrew’
83. 83 ‘http://codepen.io’
84. 84 ‘http://codepen.io/rachelandrew/pen/rLWLLa/’
85. 85 ‘http://codepen.io/rachelandrew’
86. 86 ‘http://codepen.io’
87. 87 ‘http://codepen.io/rachelandrew/pen/Pzbzze/’
88. 88 ‘http://codepen.io/rachelandrew’
89. 89 ‘http://codepen.io’
90. 90 ‘http://codepen.io/rachelandrew/pen/EyNyNK/’
91. 91 ‘http://codepen.io/rachelandrew’
92. 92 ‘http://codepen.io’
93. 93 ‘http://codepen.io/rachelandrew/pen/YWpWVE/’
94. 94 ‘http://codepen.io/rachelandrew’
95. 95 ‘http://codepen.io’
96. 96 ‘http://codepen.io/rachelandrew/pen/rLWLwO/’
97. 97 ‘http://codepen.io/rachelandrew’
98. 98 ‘http://codepen.io’
99. 99 ‘http://codepen.io/rachelandrew/pen/aZBZEB/’
100. 100 ‘http://codepen.io/rachelandrew’
101. 101 ‘http://codepen.io’
102. 102 ‘http://codepen.io/rachelandrew/pen/LZbZdj/’
103. 103 ‘http://codepen.io/rachelandrew’
104. 104 ‘http://codepen.io’
105. 105 ‘http://codepen.io/rachelandrew/pen/beBeKJ/’
106. 106 ‘http://codepen.io/rachelandrew’
107. 107 ‘http://codepen.io’
108. 108 ‘http://codepen.io/rachelandrew/pen/oLYLMo/’
109. 109 ‘http://codepen.io/rachelandrew’
110. 110 ‘http://codepen.io’
111. 111 https://drafts.csswg.org/css-flexbox/#order-accessibility
112. 112 https://drafts.csswg.org/css-grid/#order-accessibility
113. 113 https://www.smashingmagazine.com/2016/02/the-flexbox-reading-list/
114. 114 http://gridbyexample.com
115. 115 http://gridbyexample.com/resources
116. 116 http://igalia.github.io/css-grid-layout/
117. 117 https://css-tricks.com/snippets/css/complete-guide-grid/
118. 118 https://www.youtube.com/watch?v=ibeF6rbzD70
119. 119 http://labs.jensimmons.com/

CSSFlexboxLayouts

↑ Back to topTweet itShare on Facebook

Advertisement