Web News

When the Russian ruble’s exchange rate slumped two years ago, it drove us to think of cutting hardware and hosting costs for the Mail.Ru email service. To look at ways to save money, let’s first take a look at what email consists of.

¹

Indexes and bodies account for only 15% of the storage size, whereas 85% is taken up by files. So, optimization of files (that is, attachments) is worth exploring in more detail. At the time, we didn’t have file deduplication in place, but we estimated that it could shrink the total storage size by 36%, because many users receive the same messages, such as price lists from online stores and newsletters from social networks that contain images² and so on. In this article, I’ll describe how we implemented a deduplication system under the guidance of PSIAlt³.

Further Reading on SmashingMag: Link

• How To Improve Your Email Workflow With Modular Design⁴
• Making Responsive HTML Email Coding Easy With MJML⁵
• Email Templates For Web Designers And Developers⁶
• Designing For Email (eBook)⁷

Meta Data Storage Link

We’re dealing with a stream of files. When we receive a message, we must deliver it to the user as soon as possible. We need to be able to quickly recognize duplicates. An easy solution would be to name files based on their contents. We’re using SHA-1 for this purpose. The initial name of the file is stored in the email itself, so we don’t need to worry about it.

Once a new email arrives, we retrieve the files, compute their hashes and add the result to the email. It’s a necessary step to be able to easily locate the files belonging to a particular email in our future storage when this email is being sent.

Now, let’s upload a file to our storage and find out whether another file with the same hash already exists there. This means we’ll need to store all hashes in memory. Let’s call this storage for hashes “FileDB.”

⁸

A single file can be attached to different emails, so we’ll need a counter that keeps track of all emails containing this file.

⁹

The counter increments with every new file uploaded. About 40% of all files are deleted, so if a user deletes an email containing files uploaded to the cloud, the counter must be decremented. If the counter reaches zero, the file can be deleted.

Here we face the first issue: Information about an email (indexes) is stored in one system, whereas information about a file is stored in another. This could lead to an error. For example, consider the following workflow:

1. The system receives a request to delete an email.
2. The system checks the email indexes.
3. The system can see there’s an attachment (SHA-1).
4. The system sends a request to delete a file.
5. A crash occurs, so the email doesn’t get deleted.

¹⁰

In this case, the email stays in the system, but the counter gets decremented by 1. When the system receives a second request to delete this email, the counter gets decremented again — and we could encounter a situation in which the file is still attached to an email but the counter is already at 0.

¹¹

Not losing data is critical. We can’t have a situation in which a user opens an email and discovers no attachment there. That being said, storing some redundant files on disks is no big deal. All we need is a mechanism to unambiguously determine whether the counter is correctly set to 0. That’s why we have one more field — magic.

¹²

The algorithm is simple. Along with the hash of a file, we store a randomly generated number in an email. All requests to upload or delete a file take this random number into account: In case of an upload request, this number is added to the current value of the magic number; if it’s a delete request, this random number is subtracted from the current value of the magic number.

Thus, if all emails have incremented and decremented the counter the correct number of times, then the magic number will also equal 0. Otherwise, the file must not be deleted.

Let’s consider an example. We have a file named sha1. It’s uploaded once, and the email generates a random (magic) number for it, which is equal to 345.

¹³

Then a new email arrives with the same file. It generates its own magic number (123) and uploads the file. The new magic number is added to the current value of the magic number (345), and the counter gets incremented by 1. As a result, what we have in FileDB is the magic number with the value of 468 and the counter set to 2.

¹⁴

After the user deletes the second email, the magic number generated for this email is subtracted from the current value of the magic number (468), and the counter gets decremented by 1.

¹⁵

Let’s first look at the normal course of events. The user deletes the first email, and the magic number and the counter both become 0. This means the data is consistent and the file can be deleted.

¹⁶

Now, suppose something goes wrong: The second email sends two delete requests. The counter being equal to 0 means there are no more links to the file, but the magic number, which equals 222, signals a problem: The file can’t be deleted until the data is consistent.

¹⁷

Let’s develop the situation a little more. Suppose the first email also gets deleted. In this case, the magic number (-123) still signals an inconsistency.

¹⁸

As a safety measure, once the counter reaches 0 but the magic number doesn’t (in our case, the magic number is 222 and the counter is 0), the file is assigned a “Do not delete” flag. This way, even if — after a series of deletions and uploads — both the magic number and the counter somehow become 0, we’ll still know that this file is problematic and must not be deleted. The system isn’t allowed to generate a magic peer 0. If you send 0 as the magic number, you’ll receive an error.

Back to FileDB. Every entity has a set of flags. Whether you plan to use them or not, you’re going to need them (if, say, a file needs to be marked as undeletable).

¹⁹

We have all of the file attributes, except for where the file is physically located. This place is identified by a server (IP) and a disk. There should be two such servers and two such disks. We store two copies of each file.

²⁰

But one disk stores a lot of files (in our case, about 1 million), which means these records will be identified by the same disk pair in FileDB, so storing this information in FileDB would be wasteful. Let’s put it in a separate table, PairDB, linked to FileDB via a disk pair ID.

²¹

I guess it goes without saying that, apart from a disk pair ID, we’ll also need a flags field. I’ll jump ahead a bit and mention that this field signals whether the disks are locked (say, one disk has crashed and the other is being copied, so no new data can be written to either of them).

²²

Also, we need to know how much free space each disk has — hence, the corresponding fields.

²³

To make sure everything works fast, both FileDB and PairDB must be RAM-resident. We were using Tarantool 1.5, but now the latest version should be used. FileDB has five fields (20, 4, 4, 4 and 4 bytes long), which add up to 36 bytes. Also, each record has a 16-byte header, plus a 1-byte length pointer per field, which brings the total record size to 57 bytes.

²⁴

Tarantool allows you to specify the minimum allocation size, so memory-associated overhead can be kept close to zero. We’ll be allocating the exact amount of memory needed for one record. We have 12 billion files.

(57 * 12 * 10^9) / (1024^3) = 637 GB

But that’s not all, we’ll also need an index on the sha1 field, which adds 12 more bytes to the total record size.

(12 * 12 * 10^9) / (1024^3) = 179 GB

All in all, 800 GB of RAM are needed. And let’s not forget about replication, which doubles the amount of RAM required.

²⁵

If we buy machines with 256 GB of RAM on board, we’d need eight of them.

We can assess the size of PairDB. The average file size is 1 MB and disk capacity is 1 TB, which allows storage of about 1 million files on a single disk; so, we’d need some 28,000 disks. One PairDB record describes two disks. Therefore, PairDB contains 14,000 records — negligible compared to FileDB.

File Upload Link

Now that we’ve got the database structure out of the way, let’s turn to the API for interacting with the system. At first glance, we need the upload and delete methods. But don’t forget about deduplication: Chances are good that the file we’re trying to upload is already in storage, and uploading it a second time wouldn’t make sense. So, the following methods are necessary:

• inc(sha1, magic) increments the counter. If a file doesn’t exist, it returns an error. Recall that we also need a magic number that helps to prevent incorrect file deletion.
• upload(sha1, magic) should be called if inc has returned an error, which means this file doesn’t exist and must be uploaded.
• dec(sha1, magic) should be called if a user deletes an email. The counter is decremented first.
• GET /sha1 downloads a file via HTTP.

Let’s take a closer look at what happens during uploading. For the daemon that implements this interface, we chose the IProto protocol. Daemons must scale well to any number of machines, so they don’t store states. Suppose we receive a request via a socket:

²⁶

The command name tells us the header’s length, so we read the header first. Now, we need to know the length of the origin-len file. It’s necessary to choose a couple of servers to upload it. We just retrieve all of the records (a few thousand) from PairDB and use the standard algorithm to find the needed pair: Take a segment with the length equal to the sum of free spaces on all pairs, randomly pick a point on this segment, and choose whatever pair this point belongs to.

²⁷

However, choosing a pair this way is risky. Suppose all of our disks are 90% full — and then we add a new empty disk. It’s highly likely that all new files will be uploaded to this disk. To avoid this problem, we should sum not the free space of a disk pair, but the nth root of this free space.

So, we’ve chosen a pair, but our daemon is a streaming one, and if we start uploading a file to storage, there’s no turning back. That being said, before uploading a real file, we’ll upload a small test file first. If the test upload is successful, we’ll read filecontent from the socket and upload it to storage; otherwise, another pair is chosen. SHA-1 hash can be read on the fly, so it is also checked during uploading.

Let’s now examine a file upload from a loader to a chosen disk pair. On machines that contain the disks, we set up nginx and use the WebDAV protocol. An email arrives. FileDB doesn’t have this file yet, so it needs to be uploaded to a disk pair via a loader.

²⁸

But nothing prevents another user from receiving the same email — suppose two recipients are specified. Remember that FileDB doesn’t have this file yet, so one more loader will be uploading this very file and might pick the same disk pair for uploading.

²⁹

Nginx would likely resolve this situation correctly, but we need to control the whole process, so we’ll save the file with a complex name.

³⁰

The part of the name in red is where each loader puts a random number. Thus, the two PUT methods won’t overlap and upload two different files. Once nginx responds with 201 (OK), the first loader performs an atomic MOVE operation, which specifies the final name of the file.

³¹

When the second loader is done uploading the file and also performs MOVE, the file will get overwritten, but it’s no big deal because the file is one and the same. Once the file is on the disks, a new record needs to be added to FileDB. Our version of Tarantool is divided into two spaces. We’ve only been using space0 so far.

³²

However, instead of simply adding a new record to FileDB, we’re using a stored procedure that either increments the file counter or adds a new record to FileDB. Why? In the time that has passed since the loader made sure the file doesn’t exist in FileDB, uploaded it and proceeded to add a new record to FileDB, someone else could have uploaded this file and added the corresponding record. We’ve considered this very case: Two recipients are specified for one email, so two loaders start uploading the file; once the second loader finishes the upload, it also proceeds to add a new record to FileDB.

³³

In this case, the second loader just increments the file counter.

Let’s now look at the dec method. Our system has two high-priority tasks: to reliably write a file to disk and to quickly give it back to a client from this disk. Physically deleting a file generates a certain workload and slows down these two tasks. That’s why we perform deletions offline. The dec method itself decrements the counter. If the latter becomes 0, just like the magic number, then it means nobody needs the file anymore, so we move the corresponding record from space0 to space1 in Tarantool.

decrement (sha1, magic){ counter-- current_magic –= magic if (counter == 0 && current_magic == 0){ move(sha1, space1) } } 

Valkyrie Link

Each storage has a Valkyrie daemon that monitors data integrity and consistency — and it works with space1. There’s one daemon instance per disk. The daemon iterates over all of the files on a disk and checks whether space1 contains a record corresponding to a particular file, which would mean that this file should be deleted.

³⁴

But after the dec method is called and a file is moved to space1, Valkyrie might take a while to find this file. This means that, in the time between these two events, the file may be reuploaded and, thus, moved to space0 again.

³⁵

That’s why Valkyrie also checks whether a file exists in space0. If this is the case and the pair_id of the corresponding record points to a pair of disks that this Valkyrie instance is running on, then the record is deleted from space1.

³⁶

If no record is found in space0, then the file is a potential candidate for deletion. However, between a request to space0 and the physical deletion of a file, there’s still a window of time in which a new record corresponding to this file might appear in space0. To deal with this, we put the file in quarantine.

³⁷

Instead of deleting the file, we append deleted and a timestamp to its name. This means we’ll physically delete the file at timestamp plus some time specified in the config file. If a crash occurs and the file is deleted by mistake, the user will come to reclaim it. We’ll be able to restore it and resolve the issue without losing any data.

Now, recall that there are two disks, with a Valkyrie instance running on each. The two instances are not synced. Hence the question: When should the record be deleted from space1?

³⁸

We’ll do two things. First, for the file in question, let’s make one of the Valkyrie instances the master. This is easily done by using the first bit of the file name: If it equals zero, then disk0 is the master; otherwise, disk1 is the master.

³⁹

Let’s introduce a processing delay. Recall that when a record sits in space0, it contains the magic field for checking consistency. When the record is moved to space1, this field is not used, so we’ll put there a timestamp corresponding to the time that this record appeared in space1. This way, the master Valkyrie instance will start processing records in space1 at once, whereas the slave will add some delay to the timestamp and will process and delete records from space1 a little later.

⁴⁰

This approach has one more advantage. If a file was mistakenly put in quarantine on the master, it’ll be evident from the log once we query the master. Meanwhile, the client that requested the file will fall back to the slave — and the user will receive the needed file.

So, we have considered the situation in which the Valkyrie daemon locates a file named sha1, and this file (being a potential candidate for deletion) has a corresponding record in space1. What other variants are possible?

Suppose a file is on a disk, but FileDB doesn’t have any corresponding record. If, in the case considered above, the master Valkyrie instance, for some reason, hasn’t been working for some time, it would mean the slave’s had enough time to put the file in quarantine and to delete the corresponding record from space1. In this case, we would also put the file in quarantine by using sha1.deleted.timestamp.

Another situation: A record exists but points to a different disk pair. This could happen during uploading if two recipients are specified for one email. Recall this scheme:

⁴¹

What happens if the second loader uploads the file to a different pair than the first one? It will increment the counter in space0, but the disk pair where the file was uploaded would contain some junk files. What we need to do is make sure these files can be read and that they match sha1. If everything’s fine, such files can be deleted at once.

Also, Valkyrie might encounter a file that has been put in quarantine. If the quarantine is over, this file will get deleted.

Now, imagine that Valkyrie encounters a good file. It needs to be read from disk, checked for integrity and compared to sha1. Then, Valkyrie needs to query the second disk to see if it has this same file. A simple HEAD method is enough here: The daemon running on the second disk will itself check the file’s integrity. If the file is corrupt on the first disk, it’s immediately copied over from the second disk. If the second disk doesn’t have the file, its copy is uploaded from the first disk.

We’re left with the last situation, which has to do with disk problems. If any problem with a disk is identified in the course of system monitoring, the problematic disk is put in service (read-only) mode, while on the second disk, the UNMOVE operation is run. This effectively distributes all of the files on the second disk among other disk pairs.

Result Link

Let’s get back to where we started. Our email storage used to look like this:

⁴²

We’ve managed to reduce the total size by 18 PB after implementing the new system:

⁴³

Emails now occupy 32 PB (25% for indexes, 75% for files). Thanks to the 18-PB cut, we didn’t have to buy new hardware for quite some time.

About SHA-1 Link

As of now, there are no known examples of SHA-1 collisions. There exist collision examples for its internal compression function (SHA-1 freestart collision), though. Given 12 billion files, the probability of a hash collision is less than 10^-38.

But let’s assume it’s possible. In this case, when a file is requested by its hash value, we check whether it has the correct size and CRC32 checksum that were saved in the indexes of the corresponding email during upload. That is to say, the requested file will be provided if and only if it was uploaded along with this email.

(vf, yk, il, al)

Footnotes Link

1. 1 https://www.smashingmagazine.com/wp-content/uploads/2017/01/01-preview-opt.png
2. 2 https://www.smashingmagazine.com/2013/12/imageoptim-cli-batch-compression-tool/
3. 3 https://www.facebook.com/psialt
4. 4 https://www.smashingmagazine.com/2014/08/improve-your-email-workflow-with-modular-design/
5. 5 https://www.smashingmagazine.com/2017/01/making-responsive-html-email-coding-easy-with-mjml/
6. 6 https://www.smashingmagazine.com/2013/06/email-templates-web-designers-developers-pdf-odt-txt/
7. 7 https://shop.smashingmagazine.com/products/designing-for-email
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/01/02-preview-opt.png
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/01/03-preview-opt.png
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/01/04-preview-opt.png
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/01/05-preview-opt.png
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/01/06-preview-opt.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/07-preview-opt.png
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/01/08-preview-opt.png
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/01/09-preview-opt.png
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/01/10-preview-opt-1.png
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/01/11-preview-opt-1.png
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-preview-opt-2.png
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/01/13-preview-opt-2.png
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/01/14-preview-opt-2.png
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/01/15-preview-opt-2.png
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/01/16-preview-opt-2.png
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/01/17-preview-opt-2.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/01/18-preview-opt-1.png
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/01/19-preview-opt-1.png
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/01/20-preview-opt-1.png
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/01/21-preview-opt-1.png
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/01/22-preview-opt-1.png
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/01/23-preview-opt.png
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/01/24-preview-opt-1.png
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/01/25-preview-opt.png
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/01/26-preview-opt.png
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/01/27-preview-opt.png
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/01/28-preview-opt.png
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/01/29-preview-opt.png
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/01/30-preview-opt.png
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/01/31-preview-opt.png
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/01/32-preview-opt.png
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/01/33-preview-opt.png
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/01/34-preview-opt.png
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/01/35-preview-opt.png
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/01/36-preview-opt.png
43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/01/37-preview-opt.png

↑ Back to topTweet itShare on Facebook

This content is sponsored via Syndicate Ads

Email is one of the best ways to engage with your users, especially during the holiday season. However, if you want to stand out, no matter how beautiful your emails are, you need to make sure they render correctly in your reader’s inbox, regardless of what email client they’re using. Creating responsive email is not an easy task, and there are various reasons for that.

First, there is no standard in the way email clients render HTML. This is true for email clients from different companies, such as Outlook and Apple Mail, but not only. Even different versions of Outlook, such as Outlook 2003, Outlook 2013 and Outlook.com, render HTML differently.

Then, while email clients render HTML, many of them have very limited support of it. Some email clients will just strip the head of your HTML file, including media queries, which is why inline styles are heavily recommended. On a good note, this is moving in the right direction with the Gmail update¹.

Now, there are a few techniques out there to help email developers. You might be familiar with some of them, such as the hybrid approach², the mobile-first approach³ or even the Fab Four technique⁴ by HTeuMeuLeu⁵. But because of the reasons stated earlier, and especially the lack of a standard, none of these techniques will enable you to tame all email clients at once.

Abstracting Away The Complexity Of Responsive Email With MJML Link

MJML is an open-source framework that abstracts away the complexity of responsive email. The idea behind it is pretty simple. Just as jQuery normalizes the DOM and abstracts low-level interactions and animations, MJML abstracts the low-level hacks for responsive emails with an easy syntax. MJML is responsive by design. This means you can forget about nested tables and conditional comments and, more generally, about making your email responsive. MJML does it for you.

Leveraging a semantic syntax and high-level components such as the carousel⁶ (yes, you can display an interactive image gallery within an email!), MJML is really easy to learn for anyone. Responsive emails are no longer only accessible to a handful of experts anymore.

⁷

Being easy to use doesn’t mean that MJML is not powerful. It just enables experts to streamline their development workflow, while still giving them the flexibility they need with lower-level components such as tables⁸.

For instance, our example email⁹ was coded in 788 lines of HTML¹⁰ and reproduced in fewer than 240 lines of MJML¹¹.

The Approach Link

MJML is built in React¹², a JavaScript library developed and maintained by Facebook, and it leverages the power of React’s components. The component names are semantic, starting with mj-, so that they are straightforward as well as easy to recognize and understand: mj-text, mj-image, mj-button, etc.

MJML will transpile to responsive HTML, following a mix of the mobile-first and hybrid coding approaches. Going mobile-first enables you to make sure that the most readable version is displayed by default in email clients that do not change the layout according to the device used.

For example, in Outlook.com, the mobile version will be displayed on both desktop and mobile (which is far more readable than a desktop version being displayed on mobile). The hybrid approach then enables the layout to change according to the device’s size wherever possible, using a mix of fallbacks, conditional comments, nested tables and media queries to target as many clients as possible. The layout degrades nicely, with multi-column layouts on desktop turning into single-column layouts on mobile.

¹³

¹⁴

Coding In MJML Link

Before we start the tutorial, let’s get ready to code in MJML. We have different ways to use MJML, such as running it locally¹⁵ or using the online editor²³¹⁶. By choosing the online editor, you’ll be able to start immediately, but running it locally enables you to use MJML with your favorite code editor (with plugins for Atom¹⁷, Sublime Text¹⁸ and Vim¹⁹), task runners such as gulp-mjml²⁰ and grunt-mjml²¹ and a lot more²².

For this tutorial, the online editor²³¹⁶ is recommended because it doesn’t require any setup.

If you still want to use it locally, open your terminal and run npm install mjml -g (requires to have Node.js and npm²⁴ installed).

Once MJML is installed, create a file named example.mjml (or any name you like) with some MJML and run mjml -r example.mjml in your terminal (make sure to be in the same folder as the file you’re rendering). It will render your MJML file in a file named example.html, with the responsive HTML inside. You can find all available options for the command line in the documentation²⁵.

Creating Your First Newsletter With MJML Link

Now that you’re all set up, we can start creating a responsive newsletter together. To find inspiration, one of the best places around is ReallyGoodEmails²⁶. I found a great example of a newsletter²⁷ by Thrive Market²⁸. Let’s recreate it with MJML!

(Brand names, logos and trademarks used herein remain the property of their respective owners, and their use does not imply any endorsement by or affiliation with Thrive Market.)

²⁹

First, here is what the basic layout³⁰ of an MJML document looks like:

 <mjml> <mj-head> <!-- Head components go here: https://mjml.io/documentation/#standard-head-components --> </mj-head> <!-- All of the content of our email will go in mj-body --> <mj-body> <!-- mj-container defines the default styling of our email, including the default width, set to 600px but overwritable --> <mj-container> <!-- Body components go here (https://mjml.io/documentation/#standard-body-components) --> </mj-container> </mj-body> </mjml> 

Streamlining The Style Link

While inlining is the norm in HTML to ensure responsiveness, MJML also allows you to create custom MJML classes and MJML styles, which will then automatically be inlined from the head of your MJML file³¹. In MJML, styles come as component attributes.

<mj-text font-size="20px" color="#F45E43" font-family="helvetica"> Hello World </mj-text>

To start, we’ll set a default sans-serif font family for text components, because sans-serif is used for most text here. Then, we’ll create classes for elements used repeatedly, so that we don’t have to manually set styles over and over again. We could have created more custom classes and styles, but the most useful styles will be for:

• buttons,
• image descriptions,
• text below the six icons in the footer.

Here, we’ll be leveraging head components³² in three ways:

• Set a default padding of 0 for every component, using <mj-all />. This default padding can be overridden by manually specifying a padding directly on the components we are using.
• Override the default font family of <mj-text>, using <mj-text /> in the head. Each time we use <mj-text>, the default font family will be sans-serif. We can still manually override this new default font by specifying a new one directly on the component.
• Create classes using <mj-class /> and, more specifically, using the following mj-classes:
  • pill
    
    This is to design a nice button. Attributes worth noting are the background-color set to transparent and the inner-padding, used to size the button as we want.
  • desc
    
    This is to style the descriptions of the images in the two-column layout.
  • ico
    
    This is to style the text below the six icons just before the footer.

<mj-head> <mj-title>Discover the latest trends</mj-title> <mj-attributes> <mj-all padding="0" /> <mj-text font-family="sans-serif" color="#8e8b85" /> <mj-class name="pill" font-weight="700" color="#d5ad4b" border-radius="50" border="2px solid #d5ad4b" font-size="16px" line-height="16px" padding="8 20 20 20" inner-padding="10 75 10 75" background-color="transparent" /> <mj-class name="desc" font-family="Georgia" font-size="20px" color="#45495d" padding="25 5 10 10" /> <mj-class name="ico" font-family="Helvetica" font-size="14px" align="center" padding="0 0"/> </mj-attributes> </mj-head> 

(As you may have noticed, we have omitted the units on some attributes, such as padding. If you do so, MJML will output the attributes with px by default.)

Adding Content Link

Now that the styles are defined in the head (you can see here³³ what your code should look like now), let’s start adding content to our email! MJML layouts are based on <mj-section>³⁴ to create rows and <mj-column>³⁸³⁵ to create columns inside rows, which is very practical for email design. Note that, except for high-level components such as <mj-hero>³⁶ and <mj-navbar>³⁷, content should always be wrapped in a <mj-column>³⁸³⁵, which itself should go in a <mj-section>³⁹, even when there is only one column in a section.

Let’s see this with two examples, the preheader and the header of the email.

Preheader Link

There’s nothing very fancy here. We’re just creating a text preheader using the <mj-text>⁴⁰ component, wrapped in a column, and giving it some MJML styles.

Hack: <mj-text> enables you to use HTML directly inside MJML, granting you full control over the content and allowing you to use the <span> and <a> tags you’re used to, for example.

 <mj-section padding="0" background-color="#eeebe7"> <mj-column> <mj-text padding="0 2" align="center" font-size="10px"> The latest tips, trends, recipes, and more </mj-text> </mj-column> </mj-section> 

Header Link

⁴¹

Three-Column Layout for Blog, Logo and Referral Link Link

The header is a bit fancier but very easy to achieve with MJML. All we have to do is create a section that we’ll split into three equal columns (because columns are equal, we don’t even have to manually set the width). We’ll use images as in the original email, leveraging the explicit component <mj-image>⁴², which comes with the common attributes you would expect, including src, padding and border.

By default, columns will stack in the mobile version of our email. Here, because we want those three columns to stay side by side even on mobile, we’ll wrap them in an <mj-group>⁴³ component, which will prevent the columns from stacking.

Hack: As noted in the documentation, due to a bug in iOS, you might have to use a minifier, or else the columns could stack on iPhone even if they’re wrapped in <mj-group>. The MJML command-line interface⁴⁴ comes with a built-in minifier⁴⁵ that you can use to run the -m option when rendering MJML.

<mj-section padding="0" background-color="#ffffff"> <mj-group> <mj-column> <mj-image align="right" padding="40 0 0 0" width="100" href="https://thrivemarket.com/blog?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/blog_zpscedcgvla.jpg" alt="blog" title="blog" /> </mj-column> <mj-column> <mj-image padding="15 0 0 0" href="https://thrivemarket.com/?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/thrive-logo-250_zps4lonavha.jpg" title="logo" alt="logo" /> </mj-column> <mj-column> <mj-image align="left" padding="40 0 0 0" width="100" href="https://thrivemarket.com/customer/account/login/referer/aHR0cHM6Ly90aHJpdmVtYXJrZXQuY29tL2ludml0ZT9jY29kZT1LRzZPQ0QzSCZ1YWV4cHRpbWU9MTc3ODYzNzg2MiZ1YXRva2VuPTE0NjJiOTc3YzFmYTcwYjA5YjU4NWYzYTg5NDNkNzlhNzA3OWFiMzE0MzkzZmU4OTg1MmZkODNmZDA1YjYzMWUmdWlkPTUwMTk4NTAmdXRtX2NhbXBhaWduPWRheTgmdXRtX2NvbnRlbnQ9bGVhZF93ZWxjb21lJnV0bV9tZWRpdW09bGlmZWN5Y2xlJnV0bV9zb3VyY2U9c2FpbHRocnU,/" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/refer_zpsnoo1uzvu.jpg" title="refer and win" alt="refer and win" /> </mj-column> </mj-group> </mj-section> 

One-Column Layout for the GIF and CTA Link

We’ll create another section in which we’ll simply add an image, some text and a button. The only new component here is <mj-button>⁴⁶, which should be clear enough and which comes with the standard attributes. Please note that you must specify an href, or else the text of the button might not display in some email clients.

<mj-section padding="20"> <mj-column> <mj-image padding="5 0 23 0" width="200px" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/566f6a67e871e_zpskalhjefi.gif" /> <mj-text align="center" font-size="16px"> Your daily destination for healthy living </mj-text> <mj-button padding="20 0 10 0" mj-class="pill" href="https://thrivemarket.com/blog?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru"> Read more </mj-button> </mj-column> </mj-section> 

Divider Between Body and Header Link

Yes, there’s a component for that, too! It’s a good practice to split different rows into different sections, instead of dumping everything into the same section, because that gives you more control over styling (especially through padding), and it also makes it easier to isolate any problems that occur.

<mj-section padding="0 0 20 0"> <mj-column> <mj-divider border-width="5px" border-color="#EEEBE7" /> </mj-column> </mj-section> 

We’ll use the same divider between the body and footer later.

Body Link

Now that we have a beautiful header⁴⁷, let’s start with what seems to be the complex part of this email.

Two-Column Layout That Stacks on Mobile Link

⁴⁸

Here, we’ll create a section for each two-column row. Each column will consist of an image, a piece of text and a button. The good news is that, thanks to MJML’s hybrid approach, we don’t have to do anything to make the images stack on mobile. It’s responsive by default!

Regarding the styling, we don’t have much to do because we’re leveraging the mj-classes pill and desc, which we created earlier. All we need to do is add some padding to match the style of the original email.

Hack: Due to an issue with Outlook 2000, 2002 and 2003 ignoring the set width, it’s a good practice in MJML to set images to the sizes you want them to display at in those clients.

<mj-section padding="20 10 0 10"> <mj-column> <mj-image width="280px" href="https://thrivemarket.com/blog/foods-for-happiness?uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&uid=5019850&utm_campaign=day8&utm_content=lead_welcome&utm_medium=lifecycle&utm_source=sailthru" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/5-foods_zps9escvg7g.jpg" /> <mj-text mj-class="desc"> <a href="https://thrivemarket.com/blog/foods-for-happiness?uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&uid=5019850&utm_campaign=day8&utm_content=lead_welcome&utm_medium=lifecycle&utm_source=sailthru"> 5 Foods to Boost Your Happiness </a> </mj-text> <mj-button mj-class="pill" href="https://thrivemarket.com/blog/foods-for-happiness?uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&uid=5019850&utm_campaign=day8&utm_content=lead_welcome&utm_medium=lifecycle&utm_source=sailthru"> Read more </mj-button> </mj-column> <mj-column> <mj-image width="280px" href="https://thrivemarket.com/blog/whiten-teeth-instantly-activated-charcoal?uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&uid=5019850&utm_campaign=day8&utm_content=lead_welcome&utm_medium=lifecycle&utm_source=sailthru" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/teeth_zpsr1sycjxi.jpg" /> <mj-text mj-class="desc"> <a href="https://thrivemarket.com/blog/whiten-teeth-instantly-activated-charcoal?uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&uid=5019850&utm_campaign=day8&utm_content=lead_welcome&utm_medium=lifecycle&utm_source=sailthru"> Whiten Teeth Instantly with Activated Charcoal </a> </mj-text> <mj-button mj-class="pill" href="https://thrivemarket.com/blog/whiten-teeth-instantly-activated-charcoal?uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&uid=5019850&utm_campaign=day8&utm_content=lead_welcome&utm_medium=lifecycle&utm_source=sailthru"> Read more </mj-button> </mj-column> </mj-section> 

Here, we can see that the default HTML style for links is applied. In addition to <mj-attributes>, you can also inline CSS right into MJML using <mj-style>⁴⁹. Let’s do just that by updating the head to overwrite the default style of links once and for all. We’ll also create a CSS class to apply to the <a> tags to give them the right color (we’re creating a class because the links in the email shouldn’t all have the same color).

 <mj-head> <mj-title>Discover the latest trends</mj-title> <mj-attributes> <mj-all padding="0" /> <mj-text font-family="sans-serif" color="#8e8b85" /> <mj-class name="pill" font-weight="700" color="#d5ad4b" border-radius="50" border="2px solid #d5ad4b" font-size="16px" line-height="16px" padding="8 20 20 20" inner-padding="10 75 10 75" background-color="transparent" /> <mj-class name="desc" font-family="Georgia" font-size="20px" color="#45495d" padding="25 5 10 10" /> <mj-class name="ico" font-family="Helvetica" font-size="14px" align="center" padding="0 0"/> </mj-attributes> <mj-style> a { text-decoration:none; } .desc { color: #45495d; } </mj-style> </mj-head> 

Follow the same steps with the other two-column sections.

Blue Section With CTA Link

⁵⁰

To create this section, we’ll use the components that we’re getting familiar with: <mj-section>, <mj-column> and <mj-button>.

First, we’ll add a background-color to our section and some padding so that it looks as expected. Then, we just have to create two columns, one wider than the other, leveraging the width attribute with percentages. As usual, columns will stack on mobile. Because the button is different from the others here, we won’t use the pill class, but rather will manually create a new style.

Hack: Because of poor support for shorthand HEX colors in Internet Explorer, we recommend using six-digit HEX colors. This is a hack that we’ll reintegrate in MJML at some point to make sure that three-digit HEX codes are turned into six-digit codes.

<mj-section background-color="#6d8be1" padding="15 40 10 40"> <mj-column width="60%"> <mj-text font-weight="bold" color="#ffffff" font-size="16px" padding="0 0 10 0"> Get all your healthy groceries at Thrive Market! </mj-text> </mj-column> <mj-column width="40%"> <mj-button background-color="#ffffff" color="#45495d" font-weight="800" font-family="sans-serif" font-size="16px" border-radius="2px" inner-padding="15 60"> Shop Now </mj-button> </mj-column> </mj-section> 

Last Section Of The Body Link

⁵¹

To design the title, we’ll create a three-column layout. The columns will consist of the following, respectively:

• the dark blue line to the left of the title,
• the title "Want More Tips, Tricks, and Delicious Recipes?",
• the dark blue line to the right of the title.

Then, we will wrap the three columns in an <mj-group> so that it doesn’t stack on mobile.

We’ll start creating the lines, leveraging the <mj-divider> component, setting its border-width to 2px and adding some padding so that it looks the way we want. By default, the divider will fill the column it’s contained in, so that it looks consistent across devices. Therefore, we don’t need to explicitly set the width of the divider.

Then, we’re just using <mj-text> to add our title, leveraging the desc mj-class (because we want to inherit some of the styles set in this class) and overriding the font-family and align properties that are different from this class. We could have also manually set the style without using the desc mj-class.

Finally, we just have to use our button with the pill mj-class as we did before. We’re overriding the inner-padding because, according to the original design, this button is not as wide as the others.

<mj-section padding="40px 0 0 0"> <mj-group> <mj-column width="12%"> <mj-divider border-width="2px" padding="10 0 0 10" /> </mj-column> <mj-column width="75%"> <mj-text padding="0 0 20 0" mj-class="desc" font-family="Helvetica" align="center"> <a href="https://thrivemarket.com/blog?utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru"> Want More Tips, Tricks, and Delicious Recipes? </a> </mj-text> </mj-column> <mj-column width="13%"> <mj-divider border-width="2px" padding="10 10 0 0" /> </mj-column> </mj-group> </mj-section> <mj-section padding="5px"> <mj-column> <mj-image src="https://img.thrivemarket.com/emails/images/img-18.jpg" href="https://thrivemarket.com/blog?utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru" /> </mj-column> </mj-section> <mj-section padding="15px"> <mj-column> <mj-button mj-class="pill" inner-padding="12 25" href="https://thrivemarket.com/blog?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru"> Read our Blog </mj-button> </mj-column> </mj-section> 

You can see⁵² what our MJML template should look like so far.

Footer Link

⁵³

Title Link

We’re wrapping our title in a section and a column, as we’ve seen before, and we’re using the desc style that we created earlier. We need to alter only a few styles by manually setting a different align, font-size and font-style from our mj-class.

<mj-section background-color="#EEEBE7" padding="25"> <mj-column> <mj-text padding-top="20px" mj-class="desc" align="center" font-size="28px" font-style="italic"> Stay Connected </mj-text> </mj-column> </mj-section> 

Six-Icon Section Link

This section is made up of six icons, with accompanying text below. The icons display side by side on desktop and wrap to two lines of three icons on mobile. By now, you probably know that creating such layouts is easy if we leverage the <mj-column> component. To make the icons stack onto two lines, all we have to do is wrap the columns in two groups of three columns in an <mj-group>.

To design the text below the icons, we just have to use the ico mj-class that we created before. We’ll also create a CSS class named ico to apply to the a tags, like we did in the two-column layout section.

<mj-section padding="40 0"> <mj-group> <mj-column> <mj-image padding="10" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/img-01_zpssvjtmopj.png" /> <mj-text mj-class="ico"><a href="https://thrivemarket.com/paleo?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Paleo</a></mj-text> </mj-column> <mj-column> <mj-image padding="10" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/img-02_zpshj3vgh1w.png" href="https://thrivemarket.com/gluten-free?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru"/> <mj-text mj-class="ico"><a href="https://thrivemarket.com/gluten-free?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Gluten Free</a></mj-text> </mj-column> <mj-column> <mj-image padding="10" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/img-03_zpshvwomzpo.png" href="https://thrivemarket.com/vegan?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru"/> <mj-text mj-class="ico"><a href="https://thrivemarket.com/vegan?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Vegan</a></mj-text> </mj-column> </mj-group> <mj-group> <mj-column> <mj-image padding="10" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/img-04_zpsyeczb1sp.png" href="https://thrivemarket.com/ingredients/gmo-free?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru" /> <mj-text mj-class="ico"><a href="https://thrivemarket.com/ingredients/gmo-free?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Non-GMO</a></mj-text> </mj-column> <mj-column> <mj-image padding="10" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/img-05_zpsryppwpok.png" href="https://thrivemarket.com/certifications/certified-organic?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru" /> <mj-text mj-class="ico"><a href="https://thrivemarket.com/certifications/certified-organic?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Organic</a></mj-text> </mj-column> <mj-column> <mj-image padding="10" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/img-06_zpsoq4ulmbq.png" href="https://thrivemarket.com/raw?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru" /> <mj-text mj-class="ico"><a href="https://thrivemarket.com/raw?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Raw</a></mj-text> </mj-column> </mj-group> </mj-section> 

Social Networks Link

Once again, this section is easy to achieve by leveraging the <mj-column> component, using one column per social network icon and wrapping all of the icons in an <mj-group> so that they don’t stack on mobile. The only trick here is to fine-tune the width of the images and the padding so that the result is consistent with the original design.

Divider and Text Link

Because this part is pretty simple, it’s OK to wrap the divider and the text in the same column and section, even though we could have separated the divider from the text. As we did before when styling the links, we’ll create a footer class so that our links have the proper color.

<mj-section background-color="#EEEBE7" padding="25 40"> <mj-column> <mj-divider /> <mj-text padding="30 0 0 0" align="center" font-size="14"><a href="https://thrivemarket.com/blog?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Read Our Blog</a> <a href="https://thrivemarket.com/">View Email Online</a></mj-text> <mj-text align="center" color="#45495d" font-size="10px" line-height="14px"> <p>Please don't hit 'reply' to this email—we won't be able to email you back from this address and help you thrive! If you need anything, visit our <a href="https://thrivemarket.com/faq?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">FAQ</a> or contact <a href="https://thrivemarket.com/faq/contact?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Member Services</a> anytime, and we'll be happy to help!</p> <p>We don't want to see you go, but if you no longer wish to receive promotional emails from us, you can <a href="https://thrivemarket.com/">unsubscribe here</a> or <a href="https://thrivemarket.com/">change your email preferences</a> anytime.</p> <p>4509 Glencoe Ave, Marina Del Rey, CA 90292 <br />@2016 Thrive Market All Rights Reserved</p> </mj-text> </mj-column> </mj-section> 

Rendering the HTML File and Testing Link

You should now have fewer than 240 lines of MJML (you can check the full code⁵⁴), whereas the original file was a bit less than 800 lines of HTML. Congrats! You’ve just created your first responsive email using MJML! How easy was that?

Testing how an email renders in different email clients is always a good practice, so let’s do just that using Litmus⁵⁵ (Email on Acid⁵⁶ is another great platform for email testing).

Go to Litmus⁵⁷ (create an account if you don’t have one already), create a new project, and paste the HTML that we generated earlier in the code area. You’ll be able to see the results in various email clients by clicking “Instant Previews” in the right pane. You can see⁵⁸ the results for major email clients, from Outlook 2003 to Inbox by Gmail.

Going Further Link

Now that you know how to use MJML to easily create a responsive email, why not try to create your own component? My tutorial⁵⁹ will guide you through this step by step.

What did you think about your first experience with MJML? Feel free to reach out on Twitter⁶⁰ and join the MJML community now by signing up to the Slack⁶¹ channel. You can also subscribe to the newsletter⁶² to keep up to date on the latest news.

(rb, vf, yk, al, il)

Footnotes Link

1. 1 https://www.mailjet.com/blog/gmail-responsive-email-design
2. 2 https://litmus.com/blog/understanding-responsive-and-hybrid-email-design
3. 3 https://getflywheel.com/layout/design-emails-for-mobile/
4. 4 https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.86y5xm2q7
5. 5 https://twitter.com/hteumeuleu
6. 6 https://mjml.io/documentation/#mjml-carousel
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/12/mj-carousel-gmail-preview-opt.gif
8. 8 https://mjml.io/documentation/#mjml-table
9. 9 http://reallygoodemails.com/wp-content/uploads/discover-the-latest-trends.html
10. 10 http://codepen.io/mjml/pen/woeNwp
11. 11 https://mjml.io/try-it-live/templates/thrive_email
12. 12 https://facebook.github.io/react/
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/12/desktop-view2-preview-opt.png
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/12/mobile-view2-preview-opt.png
15. 15 https://mjml.io/download
16. 16 https://mjml.io/try-it-live
17. 17 https://atom.io/users/mjmlio
18. 18 https://packagecontrol.io/packages/MJML-syntax
19. 19 https://github.com/amadeus/vim-mjml
20. 20 https://github.com/mjmlio/gulp-mjml
21. 21 https://github.com/smbeiragh/grunt-mjml
22. 22 https://mjml.io/community
23. 23 https://mjml.io/try-it-live
24. 24 https://nodejs.org/en/
25. 25 https://mjml.io/documentation/#command-line-interface
26. 26 http://reallygoodemails.com/
27. 27 http://reallygoodemails.com/wp-content/uploads/discover-the-latest-trends.html
28. 28 https://thrivemarket.com/
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/12/thrive-market-newsletter-large-opt.png
30. 30 https://mjml.io/documentation/#overview
31. 31 https://mjml.io/documentation/#standard-head-components
32. 32 https://mjml.io/documentation/#standard-head-components
33. 33 https://mjml.io/try-it-live/templates/thrive_head
34. 34 https://mjml.io/documentation/mjml-section
35. 35 https://mjml.io/documentation/#mjml-column
36. 36 https://mjml.io/documentation/#mjml-hero
37. 37 https://mjml.io/documentation/#mjml-navbar
38. 38 https://mjml.io/documentation/#mjml-column
39. 39 https://mjml.io/documentation/#mjml-section
40. 40 https://mjml.io/documentation/mjml-text
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/12/header-preview-opt.png
42. 42 https://mjml.io/documentation/#mjml-image
43. 43 https://mjml.io/documentation/#mjml-group
44. 44 https://mjml.io/documentation/#command-line-interface
45. 45 https://github.com/mjmlio/mjml/blob/master/packages/mjml-cli/README.md#render-and-minify-the-output-html
46. 46 https://mjml.io/documentation/#mjml-button
47. 47 https://mjml.io/try-it-live/templates/thrive_header
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/12/2-column-layout-preview-opt.png
49. 49 https://mjml.io/documentation/#mjml-style
50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/12/blue-section-preview-opt.png
51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/12/last-part-preview-opt.png
52. 52 https://mjml.io/try-it-live/templates/thrive_body
53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/12/footer-preview-opt.png
54. 54 https://mjml.io/try-it-live/templates/thrive_email
55. 55 https://litmus.com/builder/
56. 56 https://www.emailonacid.com/
57. 57 https://litmus.com/builder/
58. 58 http://imgur.com/a/l3xHE
59. 59 https://medium.com/mjml-making-responsive-email-easy/tutorial-creating-your-own-mjml-component-d3a236ab7093#.d1ji1oheq
60. 60 https://twitter.com/mjmlio
61. 61 https://slack.mjml.io/
62. 62 http://mjml.io/

↑ Back to topTweet itShare on Facebook

Will the resources spent implementing app indexing for Google search be a boon or a bust for your app’s traffic? In this article, I’ll take you through a case study for app indexing at our company, the results of which may surprise you.

App indexing is one of the hottest topics in SEO right now, and in some sense for good reason. Google has only been indexing apps for everyone¹ for a little more than two years, and with only 30% of apps being indexed² there is huge potential for websites to draw additional search traffic to their apps.

What’s more, Google has given not one but two ranking boosts³ to websites that use app indexing and the app indexing API⁴; so, implementing app indexing for your website is likely to increase your search traffic.

However, when we did it, it was a bust. We got a lot more app traffic from Google search when we implemented app indexing, but it was so little traffic compared to web search at that point that it was almost not worth the effort. Read on to learn more about what we did and what effect it had on our overall traffic.

What Is App Indexing? Link

If you’re not familiar with app indexing⁵, it is basically the process by which your app appears in Google search results alongside relevant web results. By supporting HTTP URLs in your app and adding the App Indexing SDK, you allow Google to crawl and index your app as it would a web page, and you enable users to install or launch your app from search results when they search with relevant keywords.

If the app is already installed, you’ll see a button to launch it in the relevant search results:

⁶

If the searcher doesn’t have the app installed yet, they will see an “Install” button in search results:

⁸

Theoretically, this is great for users because they can find relevant authoritative content in Google regardless of whether they prefer websites or apps, and it’s great for app developers and marketers because it allows apps to be exposed to a whole new audience outside of the app store, potentially increasing app usage and downloads. But “theoretically” doesn’t necessarily mean that app indexing brings a lot of real traffic from search.

While I have seen a lot of great info on how¹⁰ and why¹¹ to implement app indexing, I haven’t yet seen a case study on the benefits of app indexing in terms of traffic (though Google does highlight several other benefits¹²). So, I looked at our app indexing traffic at Vivid Seats so that marketers, developers and webmasters can get a better sense of how much traffic, realistically, they can expect from getting their app indexed.

I want to start the case study with a small caveat: Vivid Seats¹³ is the largest independent ticket marketplace, and the number-three resale marketplace behind StubHub and Ticketmaster, according to Bloomberg¹⁴. As such, we get a lot of web traffic. A website that doesn’t get as much web traffic as we do or an app that has no equivalent website will probably have different results than ours — especially if it’s in a different industry. That said, a lot of large websites might see similar results and might want to adjust their strategy accordingly.

This is also an Android-only case study, because we haven’t yet been given access to the iOS app-indexing beta in Google’s Search Console¹⁵, and we don’t have the same kind of visibility into our iOS app’s indexing and ranking.

Background Link

Vivid Seats has had an Android app¹⁶ indexed since September of 2015. However, Google had a difficult time finding the equivalent app URI for our web pages at first, and in February of this year we had about 18 app URIs indexed and more than 35,000 pages with the “Intent URI not supported” error¹⁷. We had had different URIs for our app than for our website at the time, which was making it difficult for Google to find equivalent pages.

Solution Link

Initially, we tried to add alternate tags to our web pages pointing to the equivalent app URIs, as instructed by Google’s help section on the subject¹⁸.

For example, Adele’s Vivid Seats page¹⁹ — http://www.vividseats.com/concerts/adele-tickets.html — had the following rel="alternate" tag, which was dynamically served to mobile user agents and which pointed to the equivalent app URI:

<link rel="alternate" href="android-app://com.vividseats.android/vividseats/performer/15313">

²⁰

²¹

We were initially hopeful that this solution would be all that was necessary, because Google recommended it in its help section as a solution to this problem. Unfortunately, weeks after implementation, it was clear that Google was still having a difficult time figuring it out, and it didn’t index many more app URIs.

And the crawl errors persisted because Google was assuming that a lot of web pages on our website had equivalent app views, which at the time wasn’t the case.

We supported universal links²² in our iOS app and HTTP URLs in Android²³ in April, which reduced the number of errors from 40,000 at its apex to about 85 today. As a result, we have seen the number of app URIs indexed go from 18 in February to about 35,000 today.

²⁴

To do this, we simply followed the procedure outlined in the Firebase documentation²⁶:

• We made sure that each type of link on our website had an equivalent view and corresponding URI in our Android app. To do this, we designed templates for page types that were not included in our app previously, and we built them in our Android app. The unique information on each page is dynamically served from our RESTful endpoint, so it’s only necessary to design and code the templates, not individual pages.
• We verified our website in Search Console and associated it with our website, since our website isn’t in SSL, as required by Digital Asset Links.
• We added an intent filter²⁷ in our Android manifest file.
• We called getIntent in the onCreate code and deployed the app to the Play store.

Results Link

Predictably, clicks and impressions grew exponentially from December, when 18 app URIs were indexed, to September, when 40,000 app URIs were indexed. Overall, clicks grew 919%, with clicks from non-brand queries (i.e. informational queries that don’t mention Vivid Seats, like “packers tickets”) growing 5,500%. The clickthrough rate (CTR) went down, predictably, as a result of the increase in impressions, specifically non-brand ones.

²⁸

While app traffic (defined in Search Console as “clicks”) grew exponentially as a result of the increase in app URIs getting indexed, relative to the website traffic, app traffic has been underwhelming to date.

Even with an additional 40,000 app URIs indexed, 99.82% of our traffic from search currently goes to web pages, with just 0.23% of total search traffic going to our app URIs.

A few reasons why this might be so low:

• Android traffic is a lower percentage of our mobile traffic than iOS, which isn’t included in this study.
• We also have fewer app pages indexed than web pages — more than three times fewer, in fact. Because we grew traffic exponentially by having more app URIs indexed, there’s probably more traffic out there to be had that we will see when Google finally indexes all of our app URIs.
• But the biggest reason is that CTRs vary dramatically for app listings and web listings. Our brand term, which we usually rank in position 1 and for which we usually get around a 40% CTR on the web, has a CTR of less than 1% for the app equivalent. This suggests that, though the app buttons are prominent in Google for navigational terms, most people still prefer to click through to the website.

This last point could just be a matter of this being fairly new technology and searchers not fully understanding the new layout, and we could imagine this trend reversing sometime in the future. For now, however, it’s important that this point is understood by all who are looking to index their app pages in search results. It’s tempting to think that the presence of a large colorful button in search results will increase the CTR and traffic, but our research hasn’t found any evidence to support this.

In fact, we found just the opposite: The CTR to app content is less than half of what it is to web content, with our Android app pages getting a CTR of 1.55%, at an average position of 5.1, compared to our web content CTR of 4.67%, two positions below our app content, at 7.6.

³⁰

Though app content in general has a lower CTR than web content, we found that navigational (or branded) search terms actually have a lower CTR for us than informational terms, which is the opposite of how it works for web content.

³²

56% of the app traffic we received came from branded queries, compared to just 40% of our web traffic.

³³

Looking deeper into query type, we broke down queries into two distinct types: first, navigational queries that mention our brand (for example, “vivid seats”) and informational queries that don’t (for example, “packer tickets”), and secondly, queries that indicate the searcher is looking for a website (for example, “www.vividseats.com”) or an app (for example, “download vivid seats app”) specifically.

If the searcher hadn’t indicated in their query that they were looking for an app or a website, we recorded that the query was branded or not, and that the website or app preference was “Not Specified.”

³⁵

4% of total app traffic specified that they’re looking for an app, compared to less than 1% for web traffic. This is important traffic to be aware of, because it doesn’t have an equivalent on the desktop, and it could be a new query type to optimize for, but it’s not representative of app traffic. The great majority of queries for both web (99%) and app (96%) do not use qualifiers to describe whether the searchers are looking for an app or website specifically.

The traffic to app content from search has so far been underwhelming, but the real reason most developers would index their app content would be to drive downloads.

Fortunately, with Search Console, we can see installations from search as well. It’s kind of hidden in the Search Console reports; to see it, go to “Search analytics” → “Search appearance” → “Filter search appearance” → “Install app button.”

³⁷

When we did that, we found that just 0.03% of our total search traffic led to an app installation from search in the last 90 days.

But when you take the total number of installations from the last 90 days and compare it to the installations we’ve gotten from search, it’s clear that about 2% of our total Android downloads came from users installing the downloads in search results. This isn’t terribly impressive, but when you consider that this represents many app installations from search that we may not have had otherwise, it justifies for us the little bit of work it took to implement it.

Summary Link

If your resources are limited and you’re wondering if app indexing would deliver enough traffic and installations to justify the effort, our experience would suggest you should focus on web content instead. Even after growing our traffic from app indexing by 919%, web content still brings in more than 99.8% of the total traffic from search to our website. If you’re considering other high-value projects, you might want to do those instead.

Still, if you only have an app to index, or if you have resources on your team, then app indexing does bring traffic that you wouldn’t get otherwise, and it might be worth the long-term benefits to your website and to Google users.

Have you implemented app indexing with similar (or dissimilar) results? I’d love to hear about it in the comments.

Many thanks to the UX design and development group at Vivid Seats, including Fawaad Ahmad, who made a lot of this happen.

(da, vf, il, yk, al)

Front page image credits: Introducing Firebase App Indexing³⁹

Footnotes Link

1. 1 https://webmasters.googleblog.com/2014/06/android-app-indexing-is-now-open-for.html
2. 2 http://searchengineland.com/searchmetrics-study-shows-most-apps-not-utilizing-google-app-indexing-api-244432
3. 3 http://searchengineland.com/google-adds-additional-ranking-boost-for-using-app-indexing-api-232018
4. 4 https://firebase.google.com/docs/app-indexing/android/activity
5. 5 https://firebase.google.com/docs/app-indexing/
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/11/View-of-an-indexed-app-on-a-Nexus-6P-running-Android-7.0-large-opt.png
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/11/View-of-an-indexed-app-on-a-Nexus-6P-running-Android-7.0-large-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/11/View-of-an-indexed-app-on-a-Nexus-6P-running-Android-7.0-when-the-app-is-not-installed-on-the-device-large-opt.png
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/11/View-of-an-indexed-app-on-a-Nexus-6P-running-Android-7.0-when-the-app-is-not-installed-on-the-device-large-opt.png
10. 10 http://searchengineland.com/smx-advanced-recap-advanced-google-app-deep-linking-253134
11. 11 http://searchengineland.com/app-indexing-new-frontier-seo-app-packs-app-store-search-242319
12. 12 https://firebase.google.com/docs/app-indexing/partners/case-study-one-pager.pdf
13. 13 http://www.vividseats.com/
14. 14 https://www.bloomberg.com/gadfly/articles/2016-06-22/stubhub-ebay-s-next-ticket-to-ride
15. 15 https://www.google.com/webmasters/
16. 16 http://www.vividseats.com/app
17. 17 https://support.google.com/webmasters/answer/6216428?hl=en
18. 18 https://developer.android.com/training/app-indexing/enabling-app-indexing.html
19. 19 http://www.vividseats.com/concerts/adele-tickets.html
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/11/adele-tickets-alternate-tag-app-uri-preview-opt.png
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/11/adele-tickets-alternate-tag-code-view-preview-opt.png
22. 22 https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html
23. 23 https://firebase.google.com/docs/app-indexing/android/app
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/11/universal-links-large-opt.jpg
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/11/universal-links-large-opt.jpg
26. 26 https://firebase.google.com/docs/app-indexing/android/app
27. 27 https://developer.android.com/studio/write/app-link-indexing.html#intent
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/11/traffic-growth-post-app-indexing-vivid-seats-large-opt.png
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/11/traffic-growth-post-app-indexing-vivid-seats-large-opt.png
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/11/overall-ctr-by-content-type-web-and-apps-search-console-large-opt.png
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/11/overall-ctr-by-content-type-web-and-apps-search-console-large-opt.png
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brand-vs-non-brand-ctr-apps-web-preview-opt.png
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brand-non-brand-traffic-apps-web-large-opt.png
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brand-non-brand-traffic-apps-web-large-opt.png
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brand-device-breakdown-app-web-queries-large-opt.jpg
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brand-device-breakdown-app-web-queries-large-opt.jpg
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/11/search-analytics-google-search-performance-large-opt.png
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/11/search-analytics-google-search-performance-large-opt.png
39. 39 https://www.youtube.com/watch?v=C35OSHlTNwA

↑ Back to topTweet itShare on Facebook

What fuels your work? What fuels your mind? What do you do on a non-productive day or when you’re sad? Nowadays, I try to embrace these times. I try to relax and not be angry at myself for not being productive.

And the fun fact about it? Well, most of the times when I could convince my mind that not being productive is nothing to feel bad about, things take a sudden turn: I get my ideas back, my productivity rises and, in effect, I even achieve more work than on an average day. It’s important to try to be human.

News Link

• I recently mentioned that most major browsers are blocking certificates from StartCom and WoSign entirely or plan to do so in the future. However, it seems that these certificate authorities still sell certificates¹. Don’t buy from them, their certificates will be useless by next month.

General Link

• Rachel Andrew recently wrote about why it’s important to reframe browser support for websites² and how you can deal with an IE9 supporting website and modern web technologies at the same time.

Tools & Workflows Link

• Harry Roberts shares why he prefers to use ack over grep in the command line³ to search for strings or regular expressions in files.
• Many of our projects are using Docker nowadays. But many Dockerfiles are written inefficiently, especially if you’re using npm. David Weinstein shares why you should use caching to improve the performance of your Docker container⁴.
• Tobias Tom explores Docker and explains from scratch how to use it⁵, including how to clean up your computer when you don’t need the image anymore.

Security Link

• A few months ago, Github shared their learnings from using the Content Security Policy at github.com⁶. Now they share more learnings in “GitHub’s post-CSP journey⁷”. The focus lies on img-src, form nonces, same-site cookies, and more.
• Whoops. We already knew that fingerprint mechanisms are easy to circumvent due to their design. However, with high-quality cameras on most smartphones, researchers now warn that your fingerprint could get stolen when you flash a ‘peace’ sign in a photo⁸. This type of attack is pretty similar to what the speaker Ursel presented at a Chaos Computer Club event in 2014 about iris scan theft from photos⁹.

Web Performance Link

• Scott Jehl shares how they improved and modernized their Progressive Enhancement delivery at Filament Group¹⁰. With HTTP/2, Service Worker, and web app manifests, there are new tools that can speed up delivery of a site non-destructively.

¹¹

Accessibility Link

• ARIA 1.1 was published and there have been some additions to the role attribute¹³. New, for example, are role=term, role=feed, and role=switch.
• Rodney Rehm updated his focus management library ally.js with SVG support and wrote a tutorial on how to manage focus in your SVG code¹⁴.

JavaScript Link

• Chart.js¹⁵ is a nice library that uses subtle animations to draw canvas charts on a page. Mixed chart types are available.
• Stefan Judis wrote about the global object in JavaScript¹⁶, variables and the issues around it. This is not only useful for people with beginner or intermediate JavaScript knowledge but also for advanced users who want to understand the topic better.
• Todd Motto published an “Angular 2+ Fundamentals¹⁷” video course in which he explains Angular, Typescript, component architecture, and other modern programming concepts.

¹⁸

Work & Life Link

• Raquel Vélez shares six tricks to leading a healthy, productive life²¹.

Going Beyond… Link

• This visual introduction to machine learning²² explains how computers apply statistical learning techniques to automatically identify patterns in data. If you’re not familiar with how machine learning works, this will give you a rough idea.
• As we’ve seen in statistics and data from the NASA before, this is, unfortunately, the truth: 2016 was the hottest year on record²³. The consequences: Nearly a quarter of the Great Barrier Reef died, Canada had to deal with the costliest wildfires ever, and the Arctic sea ice has been at its smallest winter maximum for two years now. And do you remember Hurricane Matthew? Such weather events are mostly driven by the climate change that we’re facing right now, with no trend of change over the upcoming years. Fortunately, there’s something everyone of us can do: The UN shows how we can take action, even from the couch at home²⁴.

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://ma.ttias.be/despite-revoked-cas-startcom-wosign-continue-sell-certificates/
2. 2 https://www.rachelandrew.co.uk/archives/2017/01/12/browser-support-for-evergreen-websites/
3. 3 http://csswizardry.com/2017/01/ack-for-css-developers/
4. 4 http://bitjudo.com/blog/2014/03/13/building-efficient-dockerfiles-node-dot-js/
5. 5 https://tobiastom.name/explains/docker
6. 6 http://githubengineering.com/githubs-csp-journey/
7. 7 https://githubengineering.com/githubs-post-csp-journey/
8. 8 http://www.japantimes.co.jp/news/2017/01/11/national/crime-legal/researchers-warn-fingerprint-theft-peace-sign/
9. 9 https://www.ccc.de/en/updates/2014/ursel
10. 10 https://www.filamentgroup.com/lab/modernizing-delivery.html
11. 11 https://www.filamentgroup.com/lab/modernizing-delivery.html
12. 12 https://www.filamentgroup.com/lab/modernizing-delivery.html
13. 13 http://www.ssbbartgroup.com/blog/differences-aria-1-0-1-1-additions-role/
14. 14 https://allyjs.io/tutorials/focusing-in-svg.html
15. 15 http://www.chartjs.org/
16. 16 https://www.contentful.com/blog/2017/01/17/the-global-object-in-javascript/
17. 17 https://ultimateangular.com/angular-2-fundamentals
18. 18 https://www.contentful.com/blog/2017/01/17/the-global-object-in-javascript/
19. 19 https://www.contentful.com/blog/2017/01/17/the-global-object-in-javascript/
20. 20 https://www.contentful.com/blog/2017/01/17/the-global-object-in-javascript/
21. 21 https://superyesmore.com/rockbots-6-tricks-to-leading-a-healthy-productive-life-8b553b6c4ac1112787d2d52d3804ea64
22. 22 http://www.r2d3.us/visual-intro-to-machine-learning-part-1/
23. 23 https://www.bloomberg.com/graphics/hottest-year-on-record/
24. 24 http://www.un.org/sustainabledevelopment/takeaction/
25. 25 https://wdrl.info/donate
26. 26 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

First of all, let’s define some vocabulary. “Internationalization” is a long word, and there are at least two widely used abbreviations: “intl,” “i18n”. “Localization” can be shortened to “l10n”.

Internationalization can be generally broken down into the following challenges:

• detecting the user’s locale;
• translating UI elements, titles and hints;
• serving locale-specific content such as dates, currencies and numbers.

Note: In this article, I am going to focus only on front-end part. We’ll develop a simple universal React application with full internationalization support.

Let’s use my boilerplate repository¹ as a starting point. Here we have the Express web server for server-side rendering, webpack for building client-side JavaScript, Babel for translating modern JavaScript to ES5, and React for the UI implementation. We’ll use better-npm-run to write OS-agnostic scripts, nodemon to run a web server in the development environment and webpack-dev-server to serve assets.

Our entry point to the server application is server.js. Here, we are loading Babel and babel-polyfill to write the rest of the server code in modern JavaScript. Server-side business logic is implemented in src/server.jsx. Here, we are setting up an Express web server, which is listening to port 3001. For rendering, we are using a very simple component from components/App.jsx, which is also a universal application part entry point.

Our entry point to the client-side JavaScript is src/client.jsx. Here, we mount the root component component/App.jsx to the placeholder react-view in the HTML markup provided by the Express web server.

So, clone the repository, run npm install and execute nodemon and webpack-dev-server in two console tabs simultaneously.

In the first console tab:

 git clone https://github.com/yury-dymov/smashing-react-i18n.git cd smashing-react-i18n npm install npm run nodemon

And in the second console tab:

 cd smashing-react-i18n npm run webpack-devserver 

A website should become available at localhost:3001². Open your favorite browser and try it out.

We are ready to roll!

1. Detecting The User’s Locale Link

There are two possible solutions to this requirement. For some reason, most popular websites, including Skype’s and the NBA’s, use Geo IP to find the user’s location and, based on that, to guess the user’s language. This approach is not only expensive in terms of implementation, but also not really accurate. Nowadays, people travel a lot, which means that a location doesn’t necessarily represent the user’s desired locale. Instead, we’ll use the second solution and process the HTTP header Accept-Language on the server side and extract the user’s language preferences based on their system’s language settings. This header is sent by every modern browser within a page request.

Accept-Language Request Header Link

The Accept-Language request header provides the set of natural languages that are preferred as a response to the request. Each language range may be given an associated “quality” value, which represents an estimate of the user’s preference for the languages specified by that range. The quality value defaults to q=1. For example, Accept-Language: da, en-gb;q=0.8, en;q=0.7 would mean, “I prefer Danish, but will accept British English and other types of English.” A language range matches a language tag if it exactly equals the tag or if it exactly equals a prefix of the tag such that the first tag character following the prefix is -.

(It is worth mentioning that this method is still imperfect. For example, a user might visit your website from an Internet cafe or a public computer. To resolve this, always implement a widget with which the user can change the language intuitively and that they can easily locate within a few seconds.)

Implementing Detection of User’s Locale Link

Here is a code example for a Node.js Express web server. We are using the accept-language package, which extracts locales from HTTP headers and finds the most relevant among the ones supported by your website. If none are found, then you’d fall back to the website’s default locale. For returning users, we will check the cookie’s value instead.

Let’s start by installing the packages:

 npm install --save accept-language npm install --save cookie-parser js-cookie 

And in src/server.jsx, we’d have this:

import cookieParser from 'cookie-parser'; import acceptLanguage from 'accept-language'; acceptLanguage.languages(['en', 'ru']); const app = express(); app.use(cookieParser()); function detectLocale(req) { const cookieLocale = req.cookies.locale; return acceptLanguage.get(cookieLocale || req.headers['accept-language']) || 'en'; } … app.use((req, res) => { const locale = detectLocale(req); const componentHTML = ReactDom.renderToString(<App />); res.cookie('locale', locale, { maxAge: (new Date() * 0.001) + (365 * 24 * 3600) }); return res.end(renderHTML(componentHTML)); }); 

Here, we are importing the accept-language package and setting up English and Russian locales as supported. We are also implementing the detectLocale function, which fetches a locale value from a cookie; if none is found, then the HTTP Accept-Language header is processed. Finally, we are falling back to the default locale (en in our example). After the request is processed, we add the HTTP header Set-Cookie for the locale detected in the response. This value will be used for all subsequent requests.

2. Translating UI Elements, Titles And Hints Link

I am going to use the React Intl³ package for this task. It is the most popular and battle-tested i18n implementation of React apps. However, all libraries use the same approach: They provide “higher-order components” (from the functional programming design pattern⁴, widely used in React), which injects internationalization functions for handling messages, dates, numbers and currencies via React’s context features.

First, we have to set up the internationalization provider. To do so, we will slightly change the src/server.jsx and src/client.jsx files.

 npm install --save react-intl 

Here is src/server.jsx:

import { IntlProvider } from 'react-intl'; … --- const componentHTML = ReactDom.renderToString(<App />); const componentHTML = ReactDom.renderToString( <IntlProvider locale={locale}> <App /> </IntlProvider> ); … 

And here is src/client.jsx:

import { IntlProvider } from 'react-intl'; import Cookie from 'js-cookie'; const locale = Cookie.get('locale') || 'en'; … --- ReactDOM.render(<App />, document.getElementById('react-view')); ReactDOM.render( <IntlProvider locale={locale}> <App /> </IntlProvider>, document.getElementById('react-view') ); 

So, now all IntlProvider child components will have access to internationalization functions. Let’s add some translated text to our application and a button to change the locale (for testing purposes). We have two options: either the FormattedMessage component or the formatMessage function. The difference is that the component will be wrapped in a span tag, which is fine for text but not suitable for HTML attribute values such as alt and title. Let’s try them both!

Here is our src/components/App.jsx file:

import { FormattedMessage } from 'react-intl'; … --- <h1>Hello World!</h1> <h1><FormattedMessage defaultMessage="Hello World!" description="Hello world header greeting" /></h1> 

Please note that the id attribute should be unique for the whole application, so it makes sense to develop some rules for naming your messages. I prefer to follow the format componentName.someUniqueIdWithInComponent. The defaultMessage value will be used for your application’s default locale, and the description attribute gives some context to the translator.

Restart nodemon and refresh the page in your browser. You should still see the “Hello World” message. But if you open the page in the developer tools, you will see that text is now inside the span tags. In this case, it isn’t an issue, but sometimes we would prefer to get just the text, without any additional tags. To do so, we need direct access to the internationalization object provided by React Intl.

Let’s go back to src/components/App.jsx:

 --- import { FormattedMessage } from 'react-intl'; import { FormattedMessage, intlShape, injectIntl, defineMessages } from 'react-intl'; const propTypes = { intl: intlShape.isRequired, }; const messages = defineMessages({ helloWorld2: { id: 'app.hello_world2', defaultMessage: 'Hello World 2!', }, }); --- export default class extends Component { class App extends Component { render() { return ( <div className="App"> <h1> <FormattedMessage defaultMessage="Hello World!" description="Hello world header greeting" /> </h1> <h1>{this.props.intl.formatMessage(messages.helloWorld2)}</h1> </div> ); } } App.propTypes = propTypes; export default injectIntl(App); 

We’ve had to write a lot more code. First, we had to use injectIntl, which wraps our app component and injects the intl object. To get the translated message, we had to call the formatMessage method and pass a message object as a parameter. This message object must have unique id and defaultValue attributes. We use defineMessages from React Intl to define such objects.

The best thing about React Intl is its ecosystem. Let’s add babel-plugin-react-intl to our project, which will extract FormattedMessages from our components and build a translation dictionary. We will pass this dictionary to the translators, who won’t need any programming skills to do their job.

 npm install --save-dev babel-plugin-react-intl 

Here is .babelrc:

{ "presets": [ "es2015", "react", "stage-0" ], "env": { "development": { "plugins":[ ["react-intl", { "messagesDir": "./build/messages/" }] ] } } } 

Restart nodemon and you should see that a build/messages folder has been created in the project’s root, with some folders and files inside that mirror your JavaScript project’s directory structure. We need to merge all of these files into one JSON. Feel free to use my script⁵. Save it as scripts/translate.js.

Now, we need to add a new script to package.json:

"scripts": { … "build:langs": "babel scripts/translate.js | node", … } 

Let’s try it out!

 npm run build:langs 

You should see an en.json file in the build/lang folder with the following content:

{ "app.hello_world": "Hello World!", "app.hello_world2": "Hello World 2!" } 

It works! Now comes interesting part. On the server side, we can load all translations into memory and serve each request accordingly. However, for the client side, this approach is not applicable. Instead, we will send the JSON file with translations once, and a client will automatically apply the provided text for all of our components, so the client gets only what it needs.

Let’s copy the output to the public/assets folder and also provide some translation.

 ln -s ../../build/lang/en.json public/assets/en.json 

Note: If you are a Windows user, symlinks are not available to you, which means you have to manually copy the command below every time you rebuild your translations:

cp ../../build/lang/en.json public/assets/en.json 

In public/assets/ru.json, we need the following:

{ "app.hello_world": "Привет мир!", "app.hello_world2": "Привет мир 2!" } 

Now we need to adjust the server and client code.

For the server side, our src/server.jsx file should look like this:

--- import { IntlProvider } from 'react-intl'; import { addLocaleData, IntlProvider } from 'react-intl'; import fs from 'fs'; import path from 'path'; import en from 'react-intl/locale-data/en'; import ru from 'react-intl/locale-data/ru'; addLocaleData([…ru, …en]); const messages = {}; const localeData = {}; ['en', 'ru'].forEach((locale) => { localeData[locale] = fs.readFileSync(path.join(__dirname, `../node_modules/react-intl/locale-data/${locale}.js`)).toString(); messages[locale] = require(`../public/assets/${locale}.json`); }); --- function renderHTML(componentHTML) { function renderHTML(componentHTML, locale) { … <script type="application/javascript" src="${assetUrl}/public/assets/bundle.js"></script> <script type="application/javascript">${localeData[locale]}</script> … --- <IntlProvider locale={locale}> <IntlProvider locale={locale} messages={messages[locale]}> … --- return res.end(renderHTML(componentHTML)); return res.end(renderHTML(componentHTML, locale)); ``` 

Here we are doing the following:

• caching messages and locale-specific JavaScript for the currency, DateTime and Number formatting during startup (to ensure good performance);
• extending the renderHTML method so that we can insert locale-specific JavaScript into the generated HTML markup;
• providing the translated messages to IntlProvider (all of those messages are now available to child components).

For the client side, first we need to install a library to perform AJAX requests. I prefer to use isomorphic-fetch because we will very likely also need to request data from third-party APIs, and isomorphic-fetch can do that very well in both client and server environments.

 npm install --save isomorphic-fetch 

Here is src/client.jsx:

--- import { IntlProvider } from 'react-intl'; import { addLocaleData, IntlProvider } from 'react-intl'; import fetch from 'isomorphic-fetch'; const locale = Cookie.get('locale') || 'en'; fetch(`/public/assets/${locale}.json`) .then((res) => { if (res.status >= 400) { throw new Error('Bad response from server'); } return res.json(); }) .then((localeData) => { addLocaleData(window.ReactIntlLocaleData[locale]); ReactDOM.render( --- <IntlProvider locale={locale}> <IntlProvider locale={locale} messages={localeData}> … ); }).catch((error) => { console.error(error); }); 

We also need to tweak src/server.jsx, so that Express serves the translation JSON files for us. Note that in production, you would use something like nginx instead.

app.use(cookieParser()); app.use('/public/assets', express.static('public/assets')); 

After the JavaScript is initialized, client.jsx will grab the locale from the cookie and request the JSON file with the translations. Afterwards, our single-page application will work as before.

Time to check that everything works fine in the browser. Open the “Network” tab in the developer tools, and check that JSON has been successfully fetched by our client.

⁶

To finish this part, let’s add a simple widget to change the locale, in src/components/LocaleButton.jsx:

import React, { Component, PropTypes } from 'react'; import Cookie from 'js-cookie'; const propTypes = { locale: PropTypes.string.isRequired, }; class LocaleButton extends Component { constructor() { super(); this.handleClick = this.handleClick.bind(this); } handleClick() { Cookie.set('locale', this.props.locale === 'en' ? 'ru' : 'en'); window.location.reload(); } render() { return <button onClick={this.handleClick}>{this.props.locale === 'en' ? 'Russian' : 'English'}; } } LocaleButton.propTypes = propTypes; export default LocaleButton; 

Add the following to src/components/App.jsx:

import LocaleButton from './LocaleButton'; … <h1>{this.props.intl.formatMessage(messages.helloWorld2)}</h1> <LocaleButton locale={this.props.intl.locale} /> 

Note that once the user changes their locale, we’ll reload the page to ensure that the new JSON file with the translations is fetched.

High time to test! OK, so we’ve learned how to detect the user’s locale and how to show translated messages. Before moving to the last part, let’s discuss two other important topics.

Pluralization And Templates Link

In English, most words take one of two possible forms: “one apple,” “many apples.” In other languages, things are a lot more complicated. For example, Russian has four different forms. Hopefully, React Intl will help us to handle pluralization accordingly. It also supports templates, so you can provide variables that will be inserted into the template during rendering. Here’s how it works.

In src/components/App.jsx, we have the following:

const messages = defineMessages({ counting: { id: 'app.counting', defaultMessage: 'I need to buy {count, number} {count, plural, one {apple} other {apples}}' }, … <LocaleButton locale={this.props.intl.locale} /> <div>{this.props.intl.formatMessage(messages.counting, { count: 1 })}</div> <div>{this.props.intl.formatMessage(messages.counting, { count: 2 })}</div> <div>{this.props.intl.formatMessage(messages.counting, { count: 5 })}</div> 

Here, we are defining a template with the variable count. We will print either “1 apple” if count is equal to 1, 21, etc. or “2 apples” otherwise. We have to pass all variables within formatMessage‘s values option.

Let’s rebuild our translation file and add the Russian translations to check that we can provide more than two variants for languages other than English.

npm run build:langs 

Here is our public/assets/ru.json file:

{ … "app.counting": "Мне нужно купить {count, number} {count, plural, one {яблоко} few {яблока} many {яблок}}" } 

All use cases are covered now. Let’s move forward!

3. Serving Locale-Specific Content Such As Dates, Currencies And Numbers Link

Your data will be represented differently depending on the locale. For example, Russian would show 500,00 $ and 10.12.2016, whereas US English would show $500.00 and 12/10/2016.

React Intl provides React components for such kinds of data and also for the relative rendering of time, which will automatically be updated each 10 seconds if you do not override the default value.

Add this to src/components/App.jsx:

--- import { FormattedMessage, intlShape, injectIntl, defineMessages } from 'react-intl'; import { FormattedDate, FormattedRelative, FormattedNumber, FormattedMessage, intlShape, injectIntl, defineMessages, } from 'react-intl'; … <div>{this.props.intl.formatMessage(messages.counting, { count: 5 })}</div> <div><FormattedDate value={Date.now()} /></div> <div><FormattedNumber value="1000" currency="USD" currencyDisplay="symbol" /></div> <div><FormattedRelative value={Date.now()} /></div> 

Refresh the browser and check the page. You’ll need to wait for 10 seconds to see that the FormattedRelative component has been updated.

You’ll find a lot more examples in the official wiki⁸.

Cool, right? Well, now we might face another problem, which affects universal rendering.

⁹

On average, two seconds will elapse between when the server provides markup to the client and the client initializes client-side JavaScript. This means that all DateTimes rendered on the page might have different values on the server and client sides, which, by definition, breaks universal rendering. To resolve this, React Intl provides a special attribute, initialNow. This provides a server timestamp that will initially be used by client-side JavaScript as a timestamp; this way, the server and client checksums will be equal. After all components have been mounted, they will use the browser’s current timestamp, and everything will work properly. So, this trick is used only to initialize client-side JavaScript, in order to preserve universal rendering.

Here is src/server.jsx:

--- function renderHTML(componentHTML, locale) { function renderHTML(componentHTML, locale, initialNow) { return ` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello React</title> </head> <body> <div>${componentHTML}</div> <script type="application/javascript" src="${assetUrl}/public/assets/bundle.js"></script> <script type="application/javascript">${localeData[locale]}</script> <script type="application/javascript">window.INITIAL_NOW=${JSON.stringify(initialNow)}</script> </body> </html> `; } const initialNow = Date.now(); const componentHTML = ReactDom.renderToString( --- <IntlProvider locale={locale} messages={messages[locale]}> <IntlProvider initialNow={initialNow} locale={locale} messages={messages[locale]}> <App /> </IntlProvider> ); res.cookie('locale', locale, { maxAge: (new Date() * 0.001) + (365 * 24 * 3600) }); --- return res.end(renderHTML(componentHTML, locale)); return res.end(renderHTML(componentHTML, locale, initialNow)); 

And here is src/client.jsx:

--- <IntlProvider locale={locale} messages={localeData}> <IntlProvider initialNow={parseInt(window.INITIAL_NOW, 10)} locale={locale} messages={localeData}> 

Restart nodemon, and the issue will almost be gone! It might persist because we are using Date.now(), instead of some timestamp provided by the database. To make the example more realistic, in app.jsx replace Date.now() with a recent timestamp, like 1480187019228.

(You might face another issue when the server is not able to render the DateTime in the proper format, which will also break universal rendering. This is because version 4 of Node.js is not built with Intl support by default. To resolve this, follow one of the solutions described in the official wiki¹¹.)

4. A Problem Link

It sounds too good to be true so far, doesn’t it? We as front-end developers always have to be very cautious about anything, given the variety of browsers and platforms. React Intl uses the native Intl browser API for handling the DateTime and Number formats. Despite the fact that it was introduced in 2012, it is still not supported by all modern browsers. Even Safari supports it partially only since iOS 10. Here is the whole table from CanIUse for reference.

¹²

This means that if you are willing to cover a minority of browsers that don’t support the Intl API natively, then you’ll need a polyfill. Thankfully, there is one, Intl.js¹⁴. It might sound like a perfect solution once again, but from my experience, it has its own drawbacks. First of all, you’ll need to add it to the JavaScript bundle, and it is quite heavy. You’ll also want to deliver the polyfill only to browsers that don’t support the Intl API natively, to reduce your bundle size. All of these techniques are well known, and you might find them, along with how to do it with webpack, in Intl.js’ documentation¹⁵. However, the biggest issue is that Intl.js is not 100% accurate, which means that the DataTime and Number representations might differ between the server and client, which will break server-side rendering once again. Please refer to the relevant GitHub issue¹⁶ for more details.

I’ve come up with another solution, which certainly has its own drawbacks, but it works fine for me. I implemented a very shallow polyfill¹⁷, which has only one piece of functionality. While it is certainly unusable for many cases, it adds only 2 KB to the bundle’s size, so there is not even any need to implement dynamic code-loading for outdated browsers, which makes the overall solution simpler. Feel free to fork and extend it if you think this approach would work for you.

Conclusion Link

Well, now you might feel that things are becoming too complicated, and you might be tempted to implement everything yourself. I did that once; I wouldn’t recommend it. Eventually, you will arrive at the same ideas behind React Intl’s implementation, or, worse, you might think there are not many options to make certain things better or to do things differently. You might think you can solve the Intl API support issue by relying on Moment.js¹⁸ instead (I won’t mention other libraries with the same functionality because they are either unsupported or unusable). Fortunately, I tried that, so I can save you a lot of time. I’ve learned that Moment.js is a monolith and very heavy, so while it might work for some folks, I wouldn’t recommend it. Developing your own polyfill doesn’t sound great because you will surely have to fight with bugs and support the solution for quite some time. The bottom line is that there is no perfect solution at the moment, so choose the one that suits you best.

(If you feel lost at some point or something doesn’t work as expected, check the “solution” branch of my repository¹⁹.)

Hopefully, this article has given you all of the knowledge needed to build an internationalized React front-end application. You should now know how to detect the user’s locale, save it in the cookie, let the user change their locale, translate the user interface, and render currencies, DateTimes and Numbers in the appropriate formats! You should also now be aware of some traps and issues you might face, so choose the option that fits your requirements, bundle-size budget and number of languages to support.

(rb, al, il, vf)

Footnotes Link

1. 1 https://github.com/yury-dymov/smashing-react-i18n
2. 2 http://localhost:3001
3. 3 https://github.com/yahoo/react-intl
4. 4 https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#.zb3t19yyx
5. 5 https://github.com/yury-dymov/smashing-react-i18n/blob/solution/scripts/translate.js
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/01/AJAX-request-large-opt.png
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/01/AJAX-request-large-opt.png
8. 8 https://github.com/yahoo/react-intl/wiki/Components
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/01/universal-rendering-is-broken-large-opt.png
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/01/universal-rendering-is-broken-large-opt.png
11. 11 https://github.com/nodejs/node/wiki/Intl
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/01/intl-browser-support-large-opt.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/intl-browser-support-large-opt.png
14. 14 https://github.com/andyearnshaw/Intl.js
15. 15 https://github.com/andyearnshaw/Intl.js/
16. 16 https://github.com/andyearnshaw/Intl.js/issues/124
17. 17 https://github.com/yury-dymov/intl-polyfill
18. 18 http://momentjs.com/
19. 19 https://github.com/yury-dymov/smashing-react-i18n/tree/solution

↑ Back to topTweet itShare on Facebook

Creating that singular piece of graphic design¹ that users will first interact with each time they encounter your product can be intimidating. A beautiful, identifiable and memorable app icon can have a huge impact on the popularity and success of the app. But how exactly does one make a “good” app icon? What does that even mean? Fear not, I’ve put together some tips and advice to help answer these questions and to guide you on your way to designing great app icons.

I’ve been designing², making resources³ and giving talks⁴ about icon design for the past couple of years. In this article, and in the video at the end, I’ll sum up what I’ve learned about this amazing craft.

Further Reading on SmashingMag: Link

• Easy Steps To Better Icon Design⁵
• How To Use Icons To Support Content In Web Design⁶
• Icons As Part Of A Great User Experience⁷
• 50 Fresh Useful Icon Sets For Your Next Design⁸

What Is An App Icon? Link

The first things you need to understand when setting out to create an icon is what exactly an app icon is and what job it performs. An app icon is a visual anchor for your product. Think of it as a tiny piece of branding that not only needs to look attractive and stand out, but ideally also communicates the essence of your application.

The word “logo” is thrown around carelessly these days. App icons are not logos. While they certainly share branding-like qualities, they’re under a lot of different restrictions. It’s an important distinction for a designer to make: Logos are scalable vector pieces of branding designed for letterheads and billboards. Icons are most often raster-based outputs customized to look good within a square canvas, at specific sizes and in specific contexts. The approach, the tools, the job and, therefore, the criteria for success are different.

⁹

From a practical standpoint, when you’re making an app icon, you are creating a set of PNG files in multiple sizes — ranging from small sizes like 29 × 29 pixels all the way up to 1024 × 1024 pixels — that need to be bundled with your app. This set of carefully crafted designs will be used in the many contexts of the operating system where users will encounter your application — including the iOS App Store and Google Play, the settings panel, the search results and the home screen.

App icons can essentially be made in any application capable of producing raster files, but common choices are Photoshop, Illustrator and Sketch. Tools like the ones found on Apply Pixels²¹¹²¹⁰ offer clever PSD templates that can help you get off the ground quickly.

The Five Core Aspects Link

Now, let’s look at some of the best practices in designing app icons. I’ll discuss each of my five core aspects of app icon design, give tips on how to improve each aspect and show off some examples of how I’ve worked with that quality. A lot of these examples will be based on my own work. That’s not because I feel like it is the best or only way to illustrate these things, but it has the added benefit of my knowing what thoughts went into the process. When going through the aspects, try to imagine icons that you like and how the individual aspects take shape in the icons on your home screen. Let’s get started.

1. Scalability Link

One of the most important aspects of an icon is scalability. Because the icon is going to be shown in several places throughout the platform, and at several sizes, it’s important that your creation maintains its legibility and uniqueness. It needs to look good in the App Store, on “Retina” devices and even in the settings panel.

¹³

Overly complicated icons that cram too much into the canvas often fall victim to bad scalability. A very big part of the conceptual stage of app icon design should be dedicated to thinking about whether a given design will scale gracefully.

How to Improve Scalability Link

• Working on a 1024 × 1024-pixel canvas can be deceptive. Try out the design on the device and in multiple contexts and sizes.
• Embrace simplicity and focus on a single object, preferably a unique shape or element that retains its contours and qualities when scaled.
• Make sure the icon looks good against a variety of backgrounds.

¹⁴

2. Recognizability Link

An app icon is like a little song, and being able to identify it easily amidst the noise of the store and the home screen is a key component in great icon design. Just as the verse of a song needs to resonate with the listener, so do the shapes, colors and ideas of an app icon. The design needs to instill a memory and sense of connection on both a functional and an emotional level.

¹⁵

Your icon will be vying for attention among thousands of other icons, all of which have the same 1024-pixel canvas to make their impact and secure their connection with the viewer. While scalability is a huge part of recognizability, so is novelty. The search for balance between these qualities is the very crux of the discipline.

How to Improve Recognizability Link

• Bland, overly complicated icons are the enemy of recognizability. Try removing details from your icon until the concept starts to deteriorate. Does this improve recognizability?
• Try out several variations of your design. Line them up on a grid and glance over them, seeing which aspects of the designs catch your eye.
• Deconstruct your favourite app icons and figure out why you like them and what methods were used to make them stand out.

3. Consistency Link

There’s something to be said for creating consistency between the experience of interacting with an app icon and interacting with the app it represents. I feel like good icon design is an extension of what the app is all about. Making sure the two support each other will create a more memorable encounter.

¹⁶

Shaping a sleek, unified image of your app in the user’s mind increases product satisfaction, retention and virality. In short, getting your icon to work harmoniously with the essence, functionality and design of your application is a big win.

How to Improve Consistency Link

• One way to ensure consistency between app and icon is to align their color palettes and to use a similar and consistent design language — a green interface reinforced by a green app icon, for example.
• Although it’s not always possible, one way to tighten the connection between an app and its icon is to tie the symbolism of the icon directly to the functionality of the app.

¹⁷

4. Uniqueness Link

This almost goes without saying, but try to make something unique. Mimicking a style or a trend is perfectly fine, but make it your own. Your icon will be constantly competing with other icons for the user’s attention, and standing out can be a perfectly valid argument for a design.

¹⁸

Uniqueness is a tricky part of design, because it relies not only on your skill but also on the choices of others who are tackling a similar task.

How to Improve Uniqueness Link

• Consider what everyone else is doing in your space and go in a different direction. Always do your research — the world doesn’t need another checkmark icon.
• A single glyph on a one-color background can be a tricky route to go down if you want to be unique. Play around with different colors and compositions, and challenge yourself to find new and clever metaphors.
• Color is a great and often overlooked way to reframe a concept.

¹⁹

²⁰

5. Don’t Use Words Link

This is one of my all-time top pet peeves. Only on the rarest of occasions is it OK to use words in an app icon. If you have to retreat to another tool of abstraction — the written word — then I’d say you’re not using the full force of your pictorial arsenal.

Words and pictures are separate representational tools, and mixing them in what is supposed to be a graphical representation usually leads to an experience that is cluttered, unfocused and harder to decode. Is there really no better way to visualize the application than with dry words? Whenever I see words in an app icon, I feel like the designer missed an opportunity to clearly convey their intention.

What to Think About When You’re Considering Words in Icons Link

• There’s no need to include the app’s name in the icon — it will usually accompany the icon in the interface. Instead, spend your time coming up with a cool pictorial concept.
• “But Facebook has the ‘f’ in its app icon,” I hear you say. If you’re using a single letter and it’s a good (and unique) fit, then the letter will lose its “wordy” quality and become iconic. However, this is more often the exception than the rule.
• Your company logo and name in a square is never a good solution. Do you have a mark or a glyph that works well within the constraints? If not, then you’d probably be best off coming up with something new. Remember that an icon is not the same as a logo and shouldn’t be forced into the same context.

Making Your Mark Link

The App Store and Google Play have many examples of bland and unopinionated icon design. Your icon is the strongest connection you’ll have with the user. It is what they’ll see first when they meet you in the App Store. It’s what they’ll interact with every single time they use your app. It is what they’ll think of when they think of the app. Anything short of a well-thought-out, fitting and attractive solution will be a failure of your greatest visual asset. Your app icon should not be an afterthought; it should be a working part of the process.

App icons are tiny little pieces of concentrated design, and the qualities of good iconography are universal: scalability, recognizability, consistency and uniqueness. Mastering these will spill over to other areas of your design. Becoming an iconist will make you a better designer.

Whether they’re detailed or simple, conventional or creative, good icons have one unifying property: They all grab people’s attention in the same limited amount of space, on a completely level playing field. It’s a specific challenge, and the answer is always within that same canvas.

Crowning your application with a singular piece of graphic design is no doubt intimidating, but I hope the tips outlined above will make you more confident in taking on the challenge. Now go forth and make a fantastic app icon!

Resources Link

In this article, I’ve used icon tools available to subscribing members of Apply Pixels²¹¹²¹⁰, but many icon tools are out there, both free and paid. Icon design is one of my great passions, and if you’re hungry for more, I’ve made several videos and given a lot of talks on the subject. Below are two that elaborate on the theories behind this article.

(da, yk, al, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/2016/03/inspiring-graphic-design/
2. 2 http://pixelresort.com
3. 3 https://applypixels.com
4. 4 https://www.youtube.com/playlist?list=PLxpqfOFALZU8rKlftjcG42SOhhfIB33it
5. 5 https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/
6. 6 https://www.smashingmagazine.com/2009/03/how-to-use-icons-to-support-content-in-web-design/
7. 7 https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/
8. 8 https://www.smashingmagazine.com/2009/06/50-fresh-useful-icon-sets-for-your-next-design/
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/12/appicontemplate-large-opt.jpg
10. 10 https://applypixels.com
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/12/appicontemplate-large-opt.jpg
12. 12 https://applypixels.com
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/12/scalability-preview-opt.jpg
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/12/scalability-examples-preview-opt.png
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/12/recognisability-preview-opt.jpg
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/12/consistency-preview-opt.jpg
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/12/photocookbook-preview-opt.png
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/12/uniqueness-preview-opt.png
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/12/unique1-preview-opt.png
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/12/unique2-preview-opt.png
21. 21 https://applypixels.com

↑ Back to topTweet itShare on Facebook

Editor’s Note: New year, new challenges! You might have set up your New Year’s resolutions already, but if not, how about designing something… different for a change? Today, we’re happy to introduce Dorota¹, an artist who created a fun little project last year that was inspired by Twitter’s new logo based on 13 circles². Below you’ll find the lessons Dorota has learned along the process, so maybe you’d like to embark on a similar journey as well?

If you can make a bird out of circles, then you can probably make all sorts of animals. I wanted to add something more design-based to my portfolio, so I made that my personal challenge. The idea was to draw animals from exactly 13 circles, and I decided to match that number by making 13 animals. This makes for a nicer title for the project, and it helps to get others to share it around the web, too. Knowing what you want to create early on helps, because then all you have to do is figure out ways to make it happen.

The project mostly consisted of three Adobe applications: Photoshop, Illustrator and After Effects.

Getting Started: Sketching Link

I prefer to sketch things on paper first, but you can do so digitally as well. First, I chose some animals that I didn’t think would be extremely difficult to draw. Then, I chose prominent features of those animals to focus on. I also Googled logos, designs and illustrations of the animals to see what features other people emphasize. When limited to 13 circles, you can’t fit everything! For example, with the monkey, all I could fit were the ears, the long tail and the outline around the eyes, leaving me with few circles to play with, but that’s OK.

While sketching, I kept track of the number of circles I was using, counting one for every curve. If I had too many circles, I would examine them to see if two curves could somehow come from one circle. For example, in the part of the giraffe below, the orange circle serves as both the top of the left horn and the bottom of the ear:

³

Illustrator Link

After I had a sketch I was happy with, I photographed it or scanned it to my computer.

Before I began, I decided on a size for the project. This is important for consistency and to keep things moving quickly in Photoshop and After Effects. I chose 8 × 10 inches at 300 DPI (or PPI), just in case I decided to print them after, because that’s a common print size. I also felt the ratio would be good to turn them into animated GIFs later.

Here are the first steps to take in Illustrator:

1. Open your sketch, or drag or paste it into your sized document. Select the sketch, and click Ctrl + 2 to lock it in place.
2. Draw circles using the Ellipse tool (L); to make perfect circles, hold Shift while dragging. You can find the ellipses by holding or right-clicking the Rectangle tool. Select your circle(s), and set the fill to none, and choose a small stroke to work with. Hide the sketch layer once you’ve finished by clicking the eye.
3. Select all of your circles by enabling the Selection tool (V) and dragging from one corner over the entire screen. Resize them to the size you want the animal to be in the document. This is important if you want to save time later.
4. With the circles still selected, we’re going to make a backup by clicking Ctrl + C, then clicking “New Layer,” then clicking Ctrl + F. This pastes in the exact same location. Hide the backup layer.
5. Click the Shape Builder tool (Shift + M), choose a fill color (removing the stroke), and click in the parts of the circles that you want to fill in.
6. Once you’re happy with the shape, isolate all the filled shapes from the circles by clicking on one and then going to menu “Select” → “Same” → “Fill Color”. Once they’re selected, you can simply copy them, select & delete everything in the document (we backed up the circles), and press Ctrl + F to bring back just the filled shapes.

Instead of the Shape Builder tool in step 4, you could also use the Live Paint Bucket tool (K), which allows you to move the circles safely while keeping your area filled in, and then you would expand at the very end.

Sometimes the curves I sketched didn’t perfectly form a circle, so I’d have to go back and move a few curves around or change their sizes. If you merely want to suggest some shapes in your animal (rather than being explicit), you may have to add more circles. For example, sometimes I would want an area to be cut out, such as the inside of the fox tail. Other times, I would want an area to be a different color from the rest of the shape, such as the toucan’s beak. There are many ways to create separation.

At this point, I had the animal (still in pieces), a hidden layer with the circles, and a hidden layer with the sketch.

⁵

Sometimes, at this point, I would turn the animal into one solid shape. To do this, select the animal, open the Pathfinder panel (in the menu, “Window” → Pathfinder, or Ctrl/Cmd + Shift + F9) and click the “Unite” option. The paths might have small flaws, but you can usually fix those using the Direct Selection tool (A), which allows you to click individual anchors and paths to easily move, modify or delete them.

Often, however, rather than turning an animal into a solid shape, I would add a bit of shading using gradients. I would often add these to one section of the animal, and I would use the same method as above to select a couple of pieces of an animal and merge those pieces into one (often, my animals would be in two or three pieces by the end).

In this example, you can see that I used different shading methods on different parts of the monkey. Above the monkey’s eyes, I used the Mesh tool (U) to get a gradient that follows the curves. A fast way to add a mesh is to click an object and go to “Object” → “Create Gradient Mesh.” I’m not an expert with this tool yet, so my attempt is more of an experiment.

Underneath the monkey’s face, I simply used a regular gradient. A fast way to apply a gradient to an object is to click the object and press the period key (.). Then, in the menu, go to “Window” → “Gradient” to open the Gradient panel and change the settings of that gradient.

⁷

Because I knew I would be bringing the animals into Photoshop after, I simply shaded them with shades of gray. This way, if I wanted to use different blending modes with colors and textures, the hues that I chose would be retained.

⁹

Photoshop Link

Create a document in Photoshop of the exact size as your Illustrator document (this is to make things easy and is not a requirement). I also stayed with the RGB color space because my focus is the web, but I can always convert to CMYK later if I want to print. Before bringing in the animals, I would create the background first.

I started with the colors. There are many ways to create gradients. I started with a white background and then simply stacked a few transparent layers of lightly brushed colors. Sometimes I would further tweak the colors using an Adjustment Layer such as “Curves” (experiment to find what works best for you).

Once you’ve got the color gradients down, it’s time to add some texture! I experimented with many different textures that I downloaded online — you can find many by searching for terms like “free paper texture.” There are also some nice textures on Subtle Patterns¹¹, but they’re usually small image tiles meant to be repeated, and I personally don’t like repeating ones.

I often used a subtle paper texture as a base and then used other textures to bring out more light and dark speckles. It’s easy to bring out speckles from a texture using Curves or Levels. All of my textures are overlaid using different blending modes, as well as by experimenting with opacity.

¹²

Below are the noise layer and the texture image that I used for the background above:

¹⁴

And below are the layers for the background, along with my settings for each Curves layer. The really crazy curves were the ones I used to bring out different parts of the textures, such as the speckles.

¹⁶

As I said, experiment with Photoshop’s functionality until you’re happy. Here are the layers for this background, starting from the bottom:

1. a blank white background;
2. lightly painted colors at a small opacity using the brush;
3. noise (“Filter” → “Noise” → “Add Noise”) at a 41% “Overlay” blending mode, sometimes enlarged or blurred;
4. a texture layer with “Color Burn”;
5. a Curves adjustment layer clipped to the texture layer, to create a high contrast for the speckles in the texture;
6. a texture layer again, rotated to a different position and a “Color Burn” of 40%;
7. a Curves layer clipped to the texture, this time bringing out the textures in a different way;
8. a blue layer set to “Divide” at 37%;
9. an overall Curves layer to brighten the entire image (including the monkey).

Once my background was ready, I brought in the animal as a smart object. Use smart objects¹⁸ whenever possible. I simply copied and pasted the animal from Illustrator. Because the documents are the same size, the animal should be pasted into Photoshop at the same size. I didn’t resize the animal in Photoshop, so that I could easily align the circles in a further step.

¹⁹

Here are the layers I used for the monkey:

1. a monkey smart object;
2. a stamp of only the background (Ctrl + Alt + Shift + E), clipped to the monkey, at “Multiply”;
3. another stamp of background, clipped to monkey, with a “Hard Light” of 34%;
4. another stamp of background, clipped to the monkey, with “Multiply” set to 34%;
5. a Curves layer, clipped to the monkey, to brighten it up;
6. a “Hue/Saturation” layer, clipped to the monkey, to make the hue a more blueish-purple.

Here are a few points in the evolution of the monkey:

²¹

Illustrator Again Link

It’s almost time to animate! I animated in After Effects, although many programs will do it (Photoshop has some basic animation capability, too).

Use “File” → “Place” (Shift + Ctrl + P) to place the Photoshop file in Illustrator as a linked object; this way, if you need to make any changes in the Photoshop file, it will automatically update in Illustrator. Placing the file in the top-left corner anchor works best, from what I’ve seen. Next, bring back your circles by unhiding the backup layer we created. You may have to drag and change the order of the layers to stack the circles on top, and you might have to realign them to your animal if it has moved.

I decided to stoke the circles with a dashed line. I did this by selecting the circles, clicking “Stroke,” checking “Dashed line” and specifying the size of the dash and the size of the gap. I used 5 points for the dash and 3 points for the gap.

In case you need to slightly resize the circles, select them and use the width (“W”) and height (“H”) boxes on top to change the size in small increments. Make sure the chain in the middle is activated, to maintain the proportions.

I had to put each circle on a separate layer so that I could animate them in After Effects. I simply created 13 new layers, then dragged a circle into each one. Your file will look like this:

²³

After Effects Link

First, download and install Ease & Wizz²⁵, which will make the movement of our circles a bit more interesting — moving in slow, speeding up quickly, and ending slow again. This is a “name your price” script, so you could technically download it for $0.

²⁶

Start a new project, go to “Import” → “File” (Ctrl + I), and select your Illustrator file. But make sure where it says “Import as Footage,” you change it to “Composition — Retain layer sizes.”

If the composition doesn’t open up right away, double-click it in the “Project” tab. If you’re planning to resize the composition, make sure to click the little gear icon to the right of it.

It might also be a good idea to choose an animation frame rate before starting (“Composition” → “Composition Settings”). I chose 20 frames per second because I knew my animation would be quite short and would loop. If you’re working with a longer animation, you should lower it, because animated GIFs with a high number of frames can end up being too big in size.

Select all of the layers except for the layer with the background; right-click and choose “Create shapes from vector layer.” These are the shapes we’ll be animating. The original Illustrator layers should still be there, but their visibility should now be off.

Choose a shape layer, and click its contents; to the right of it, where it says “Add,” select “Trim Paths.” First, I set “End” to 0%. Clicking the stopwatch near “Start” or “End” will activate the keyframes for that action and turn blue. A keyframe will be created at that point, depending on where your indicator is placed. It’ll be a small diamond. I set mine to “Start 0%,” which made my circle invisible, and I moved it down the timeline to where I wanted my circles to start animating. Move your indicator down the timeline, and then change “Start” to 100%; you’ll see a new keyframe appear automatically.

Depending on which direction you want the path to disappear (clockwise versus counterclockwise), you might have to start with “Start” or “End.” Below is an example of what I did to make the circle be invisible at first for a moment, appear into the frame, pause, and then disappear in the direction that it appeared. The timing isn’t what I used for my project — it’s just an example.

²⁸

Here is the breakdown of my keyframes:

1. Start 0%
2. Start 100%
3. Start 100% and End 0%
4. End 100%

Then, I added the Ease & Wizz effect. Open the plugin by going to “Window” → “Ease and Wizz” (.jsx). Then, highlight and select all of the keyframes, and click “Apply” (I used the plugin’s default settings). The percentage text should now be in red. You could also drag the plugin window into your toolbar, so that it’s not floating around.

Also, I used the Rotation tool (W) on the circles to rotate them, so that the animation starts at a different point, such as the end of the tail, rather than right in the middle of it.

You can also copy and paste your keyframes into the “Trim Paths” folder of another circle if that animation is going in the same direction that you want this circle to go in. I created a clockwise animation and then a counterclockwise one (renaming the layer folders to not lose my place), and I would copy and paste those keyframes into the rest of the circles according to how I wanted; for example, the monkey’s tail would be counterclockwise, whereas the ears would be clockwise.

Once all of the circles are done, you can go to “File” → “Export” → “Add to Render Queue” (or Ctrl + Shift + /) and render it as an AVI file (or any video format of your choice).

Back To Photoshop Link

To turn the video into an animated GIF, I opened Photoshop and went to “File” → “Import” → “Video Frames to Layers.” Once it opens up, I went to “Windows” → “Timeline” (or “Animation”) to open the “Animation” tab. In newer versions of Photoshop, you have the option of a video timeline or a frame animation. I chose frame animation.

Because there were pauses in my animation, each pause rendered as its own frame, so I had to delete all of the duplicate frames from each pause in the animation and keep only one frame, but then set the timing of that one frame to a higher duration. You can avoid this by removing all gaps in your After Effects animation and then adding the pauses back in Photoshop; however, not being able to see the entire thing at once might make it a little harder to decide on the duration of the animation. Also, don’t forget to set the looping option to “forever.”

³⁰

Once that’s done, go to “File” → “Export” → “Save for Web” and choose “GIF.” Here is where it gets experimental, because I had to play around with the settings to get a good balance of quality and file size. Choosing the best quality will often make the file size way too big (I try never to exceed 1 MB for a GIF).

I also found that when resizing the image to be smaller, the color table would change and would often look much worse (or even vice versa). Here’s a trick: Change the animated GIF to various sizes until the colors look as best as possible, then save that color table, resize it to your desired size, and then load that color table:

³²

All done!

Some Reflections Link

• When I initially created the animals, I didn’t make sure that all of my document sizes were the same, and so I had to resize and realign all of the circles for each animal! Pay close attention to document size.
• I haven’t figured out why an image loads in After Effects at narrower than 600 pixels, even when the original document is much larger! I have a lot to learn about After Effects.
• I haven’t yet figured out a way to quickly remove extra frames in a Photoshop animation. Maybe better applications for creating GIFs are out there?

I also gained some knowledge while working on this:

• I’ve never really drawn so many animals before. I realized with this project that you’re not really drawing the animal — you’re mainly just drawing its features! That takes a lot of the pressure off.
• I also realized that experimenting with textures can be extremely difficult and sometimes hit or miss. Start building your texture collection folder early on! I wish I had started years ago.
• I discovered the color table trick only after getting extremely annoyed when some of the GIFs would suddenly look horrible when I’d change their size by a slight amount (for example, 50 pixels in width). Always be open to discovering tricks, even in the applications most familiar to you!
• This was probably my third time making something in After Effects, so there was a lot of tedious trial and error here, as well as some help from a friend. It helps having friends who share your passion.

I did many things that could probably have been done more quickly or easily. This was a learning experience. If you have any tips for making these types of animations faster, better or easier, feel free to share in the comments!

Hope you enjoyed the animations!

Full Preview Of All 13 Illustrated Animals Link

³⁴

³⁶

³⁸

⁴⁰

⁴²

⁴⁴

⁴⁶

⁴⁸

⁵⁰

⁵²

⁵⁴

⁵⁶

⁵⁸

(vf, il, al)

Footnotes Link

1. 1 http://dorotapankowska.com
2. 2 http://dorotapankowska.com/13-animals-13-circles.html
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img3-large-opt.jpg
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img3-large-opt.jpg
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img4-large-opt.jpg
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img4-large-opt.jpg
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img5-large-opt.jpg
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img5-large-opt.jpg
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img6-large-opt.jpg
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img6-large-opt.jpg
11. 11 http://subtlepatterns.com/
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img7-large-opt.jpg
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img7-large-opt.jpg
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img8-large-opt.jpg
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img8-large-opt.jpg
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img9-large-opt.jpg
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img9-large-opt.jpg
18. 18 https://helpx.adobe.com/photoshop/using/create-smart-objects.html
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img10-large-opt.jpg
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img10-large-opt.jpg
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img11-large-opt.jpg
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img11-large-opt.jpg
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img12-large-opt.jpg
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img12-large-opt.jpg
25. 25 http://aescripts.com/ease-and-wizz/
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img13-large-opt.gif
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img13-large-opt.gif
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img14-large-opt.jpg
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img14-large-opt.jpg
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img15-large-opt.jpg
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img15-large-opt.jpg
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img16-large-opt.jpg
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img16-large-opt.jpg
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-owl.gif
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-owl.gif
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-rabbit.gif
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-rabbit.gif
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-monkey.gif
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-monkey.gif
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-elephant.gif
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-elephant.gif
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-toucan.gif
43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-toucan.gif
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-giraffe.gif
45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-giraffe.gif
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-mouse.gif
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-mouse.gif
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-dog.gif
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-dog.gif
50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-cat.gif
51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-cat.gif
52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-fox.gif
53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-fox.gif
54. 54 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-whale.gif
55. 55 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-whale.gif
56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-frog.gif
57. 57 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-frog.gif
58. 58 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-walrus.gif
59. 59 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-walrus.gif

↑ Back to topTweet itShare on Facebook

New year, new beginnings! To cater for a fresh start into 2017 and all the challenges, endeavors and adventures it might bring along, artists and designers from across the globe put their creative skills to the test and created unique desktop wallpapers for you to indulge in.

This monthly wallpapers mission has been going on for eight years¹ now, and we are very thankful to all the creative minds who contribute to it tirelessly each month anew. Today’s wallpapers all come in versions with and without a calendar and can be downloaded for free. Happy New Year!

Please note that:

• All images can be clicked on and lead to the preview of the wallpaper,
• You can feature your work in our magazine² by taking part in our Desktop Wallpaper Calendars series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?
• Looking for more winter-related wallpapers³ dedicated to snow, ice and frost? We’ve got you covered with only the best ones since 2008.

Angel In Snow

Designed by Brainer⁴ from Ukraine.

⁵

• preview⁶
• with calendar: 800×600⁷, 1024×768⁸, 1152×864⁹, 1280×800¹⁰, 1280×960¹¹, 1400×1050¹², 1440×900¹³, 1600×1200¹⁴, 1680×1050¹⁵, 1680×1260¹⁶, 1920×1200¹⁷, 1920×1440¹⁸
• without calendar: 800×600¹⁹, 1024×768²⁰, 1152×864²¹, 1280×800²², 1280×960²³, 1400×1050²⁴, 1440×900²⁵, 1600×1200²⁶, 1680×1050²⁷, 1680×1260²⁸, 1920×1200²⁹, 1920×1440³⁰

Colorful 2017

“As 2016 ends, we head to a new beginning where hopefully the best is yet to come. Happy 2017!” — Designed by Maria Keller³¹ from Mexico.

³²

• preview³³
• with calendar: 320×480³⁴, 640×480³⁵, 640×1136³⁶, 750×1334³⁷, 800×480³⁸, 800×600³⁹, 1024×768⁴⁰, 1024×1024⁴¹, 1152×864⁴², 1242×2208⁴³, 1280×720⁴⁴, 1280×800⁴⁵, 1280×960⁴⁶, 1280×1024⁴⁷, 1366×768⁴⁸, 1400×1050⁴⁹, 1440×900⁵⁰, 1600×1200⁵¹, 1680×1050⁵², 1680×1200⁵³, 1920×1080⁵⁴, 1920×1200⁵⁵, 1920×1440⁵⁶, 2560×1440⁵⁷, 2880×1800⁵⁸
• without calendar: 320×480⁵⁹, 640×480⁶⁰, 640×1136⁶¹, 750×1334⁶², 800×480⁶³, 800×600⁶⁴, 1024×768⁶⁵, 1024×1024⁶⁶, 1152×864⁶⁷, 1242×2208⁶⁸, 1280×720⁶⁹, 1280×800⁷⁰, 1280×960⁷¹, 1280×1024⁷², 1366×768⁷³, 1400×1050⁷⁴, 1440×900⁷⁵, 1600×1200⁷⁶, 1680×1050⁷⁷, 1680×1200⁷⁸, 1920×1080⁷⁹, 1920×1200⁸⁰, 1920×1440⁸¹, 2560×1440⁸², 2880×1800⁸³

A New Start

“The new year brings hope, festivity, lots and lots of resolutions, and many more goals that need to be achieved. This wallpaper is based on the idea of ‘A New Start’.” — Designed by Damn Perfect⁸⁴ from India.

⁸⁵

• preview⁸⁶
• with calendar: 320×480⁸⁷, 640×480⁸⁸, 800×480⁸⁹, 800×600⁹⁰, 1024×768⁹¹, 1024×1024⁹², 1152×864⁹³, 1280×720⁹⁴, 1280×800⁹⁵, 1280×960⁹⁶, 1280×1024⁹⁷, 1366×768⁹⁸, 1400×1050⁹⁹, 1440×900¹⁰⁰, 1600×1200¹⁰¹, 1680×1050¹⁰², 1680×1200¹⁰³, 1920×1080¹⁰⁴, 1920×1200¹⁰⁵, 1920×1440¹⁰⁶, 2560×1440¹⁰⁷
• without calendar: 320×480¹⁰⁸, 640×480¹⁰⁹, 800×480¹¹⁰, 800×600¹¹¹, 1024×768¹¹², 1024×1024¹¹³, 1152×864¹¹⁴, 1280×720¹¹⁵, 1280×800¹¹⁶, 1280×960¹¹⁷, 1280×1024¹¹⁸, 1366×768¹¹⁹, 1400×1050¹²⁰, 1440×900¹²¹, 1600×1200¹²², 1680×1050¹²³, 1680×1200¹²⁴, 1920×1080¹²⁵, 1920×1200¹²⁶, 1920×1440¹²⁷, 2560×1440¹²⁸

Happy Hot Tea Month

“You wake me up to a beautiful day; lift my spirit when I’m feeling blue. When I’m home you relieve me of the long day’s stress. You help me have a good time with my loved ones; give me company when I’m all alone. You’re none other than my favourite cup of hot tea.” — Designed by Acodez IT Solutions¹²⁹ from India.

¹³⁰

• preview¹³¹
• with calendar: 320×480¹³², 640×480¹³³, 800×480¹³⁴, 800×600¹³⁵, 1024×768¹³⁶, 1024×1024¹³⁷, 1152×864¹³⁸, 1280×720¹³⁹, 1280×960¹⁴⁰, 1280×1024¹⁴¹, 1366×768¹⁴², 1400×1050¹⁴³, 1440×900¹⁴⁴, 1600×1200¹⁴⁵, 1680×1050¹⁴⁶, 1680×1200¹⁴⁷, 1920×1080¹⁴⁸, 1920×1200¹⁴⁹, 1920×1440¹⁵⁰, 2560×1440¹⁵¹
• without calendar: 320×480¹⁵², 640×480¹⁵³, 800×480¹⁵⁴, 800×600¹⁵⁵, 1024×768¹⁵⁶, 1024×1024¹⁵⁷, 1152×864¹⁵⁸, 1280×720¹⁵⁹, 1280×960¹⁶⁰, 1280×1024¹⁶¹, 1366×768¹⁶², 1400×1050¹⁶³, 1440×900¹⁶⁴, 1600×1200¹⁶⁵, 1680×1050¹⁶⁶, 1680×1200¹⁶⁷, 1920×1080¹⁶⁸, 1920×1200¹⁶⁹, 1920×1440¹⁷⁰, 2560×1440¹⁷¹

Love Makes You Warm

“Following the busy Christmas season, the cold and boring January comes, love is one thing, what can make us warm for sure!” — Designed by Barbara Dörnyei¹⁷² from Hungary.

¹⁷³

• preview¹⁷⁴
• with calendar: 320×480¹⁷⁵, 640×480¹⁷⁶, 1024×768¹⁷⁷, 1280×720¹⁷⁸, 1280×800¹⁷⁹, 1680×1050¹⁸⁰, 1920×1200¹⁸¹, 2560×1440¹⁸²
• without calendar: 320×480¹⁸³, 640×480¹⁸⁴, 1024×768¹⁸⁵, 1280×720¹⁸⁶, 1280×800¹⁸⁷, 1680×1050¹⁸⁸, 1920×1200¹⁸⁹, 2560×1440¹⁹⁰

Hello Summer In Australia

Designed by Tazi Designs¹⁹¹ from Australia.

¹⁹²

• preview¹⁹³
• with calendar: 320×480¹⁹⁴, 640×480¹⁹⁵, 800×600¹⁹⁶, 1024×768¹⁹⁷, 1152×864¹⁹⁸, 1280×720¹⁹⁹, 1280×960²⁰⁰, 1600×1200²⁰¹, 1920×1080²⁰², 1920×1440²⁰³, 2560×1440²⁰⁴
• without calendar: 320×480²⁰⁵, 640×480²⁰⁶, 800×600²⁰⁷, 1024×768²⁰⁸, 1152×864²⁰⁹, 1280×720²¹⁰, 1280×960²¹¹, 1600×1200²¹², 1920×1080²¹³, 1920×1440²¹⁴, 2560×1440²¹⁵

Summer Celebration

“Summer in Australia is about sun and the beach – which inspired the colours I have used. It is a wonderful celebration of the ending on one year and the beginning of another. I hope my illustration inspires this feeling of the celebration of rebirth and growth.” — Designed by Katherine Appleby²¹⁶ from Australia.

²¹⁷

• preview²¹⁸
• with calendar: 320×480²¹⁹, 640×480²²⁰, 800×480²²¹, 800×600²²², 1024×768²²³, 1024×1024²²⁴, 1152×864²²⁵, 1280×720²²⁶, 1280×800²²⁷, 1280×960²²⁸, 1280×1024²²⁹, 1400×1050²³⁰, 1440×900²³¹, 1600×1200²³², 1680×1050²³³, 1680×1200²³⁴, 1920×1080²³⁵, 1920×1200²³⁶, 1920×1440²³⁷, 2560×1440²³⁸
• without calendar: 320×480²³⁹, 640×480²⁴⁰, 800×480²⁴¹, 800×600²⁴², 1024×768²⁴³, 1024×1024²⁴⁴, 1152×864²⁴⁵, 1280×720²⁴⁶, 1280×800²⁴⁷, 1280×960²⁴⁸, 1280×1024²⁴⁹, 1400×1050²⁵⁰, 1440×900²⁵¹, 1600×1200²⁵², 1680×1050²⁵³, 1680×1200²⁵⁴, 1920×1080²⁵⁵, 1920×1200²⁵⁶, 1920×1440²⁵⁷, 2560×1440²⁵⁸

The Year Of The Rooster

“2017 is the year of the rooster according to the Chinese horoscope, which begins January 28, 2017. The rooster being the sign of dawn and awakening, triumph and success can only be achieved at the price of hard work and patience in 2017.” — Designed by Lucas Debelder²⁵⁹ from Belgium.

²⁶⁰

• preview²⁶¹
• with calendar: 320×480²⁶², 640×480²⁶³, 800×480²⁶⁴, 800×600²⁶⁵, 1024×768²⁶⁶, 1024×1024²⁶⁷, 1152×864²⁶⁸, 1280×720²⁶⁹, 1280×800²⁷⁰, 1280×960²⁷¹, 1280×1024²⁷², 1400×1050²⁷³, 1440×900²⁷⁴, 1600×1200²⁷⁵, 1680×1050²⁷⁶, 1680×1200²⁷⁷, 1920×1080²⁷⁸, 1920×1200²⁷⁹, 1920×1440²⁸⁰, 2560×1440²⁸¹, 3840×2160²⁸²
• without calendar: 320×480²⁸³, 640×480²⁸⁴, 800×480²⁸⁵, 800×600²⁸⁶, 1024×768²⁸⁷, 1024×1024²⁸⁸, 1152×864²⁸⁹, 1280×720²⁹⁰, 1280×800²⁹¹, 1280×960²⁹², 1280×1024²⁹³, 1400×1050²⁹⁴, 1440×900²⁹⁵, 1600×1200²⁹⁶, 1680×1050²⁹⁷, 1680×1200²⁹⁸, 1920×1080²⁹⁹, 1920×1200³⁰⁰, 1920×1440³⁰¹, 2560×1440³⁰², 3840×2160³⁰³

New Beginnings

“2016 was an exciting year, many things happened and changed our world. In the coming year of 2017, we wish all to be more successful, to love and be loved, and to look into the future holding hands with your better half. Let every day in January be smashing for you. Happy New Year, everybody!” — Designed by PopArt Studio³⁰⁴ from Serbia.

³⁰⁵

• preview³⁰⁶
• with calendar: 320×480³⁰⁷, 640×480³⁰⁸, 800×480³⁰⁹, 800×600³¹⁰, 1024×768³¹¹, 1152×864³¹², 1280×720³¹³, 1280×800³¹⁴, 1280×960³¹⁵, 1280×1024³¹⁶, 1400×1050³¹⁷, 1440×900³¹⁸, 1600×1200³¹⁹, 1680×1050³²⁰, 1680×1200³²¹, 1920×1080³²², 1920×1200³²³, 1920×1440³²⁴, 2560×1440³²⁵
• without calendar: 320×480³²⁶, 640×480³²⁷, 800×480³²⁸, 800×600³²⁹, 1024×768³³⁰, 1152×864³³¹, 1280×720³³², 1280×800³³³, 1280×960³³⁴, 1280×1024³³⁵, 1400×1050³³⁶, 1440×900³³⁷, 1600×1200³³⁸, 1680×1050³³⁹, 1680×1200³⁴⁰, 1920×1080³⁴¹, 1920×1200³⁴², 1920×1440³⁴³, 2560×1440³⁴⁴

Fire Rooster

“Inspired by the upcoming year of the Fire Rooster.” — Designed by Lia Pantazi³⁴⁵ from Greece.

³⁴⁶

• preview³⁴⁷
• with calendar: 640×480³⁴⁸, 800×600³⁴⁹, 1024×768³⁵⁰, 1152×864³⁵¹, 1280×720³⁵², 1280×800³⁵³, 1280×960³⁵⁴, 1400×1050³⁵⁵, 1440×900³⁵⁶, 1600×1200³⁵⁷, 1680×1050³⁵⁸, 1920×1080³⁵⁹, 1920×1200³⁶⁰, 1920×1440³⁶¹, 2560×1440³⁶², 1366×768³⁶³
• without calendar: 640×480³⁶⁴, 800×600³⁶⁵, 1024×768³⁶⁶, 1152×864³⁶⁷, 1280×720³⁶⁸, 1280×800³⁶⁹, 1280×960³⁷⁰, 1400×1050³⁷¹, 1440×900³⁷², 1600×1200³⁷³, 1680×1050³⁷⁴, 1920×1080³⁷⁵, 1920×1200³⁷⁶, 1920×1440³⁷⁷, 2560×1440³⁷⁸, 1366×768³⁷⁹

Reindeer

Designed by Ana Masnikosa³⁸⁰ from Belgrade, Serbia.

³⁸¹

• preview³⁸²
• with calendar: 320×480³⁸³, 640×480³⁸⁴, 800×480³⁸⁵, 800×600³⁸⁶, 1024×768³⁸⁷, 1024×1024³⁸⁸, 1152×864³⁸⁹, 1280×720³⁹⁰, 1280×800³⁹¹, 1280×960³⁹², 1400×1050³⁹³, 1440×900³⁹⁴, 1600×1200³⁹⁵, 1680×1050³⁹⁶, 1680×1200³⁹⁷, 1920×1080³⁹⁸, 1920×1200³⁹⁹, 1920×1440⁴⁰⁰, 2560×1440⁴⁰¹
• without calendar: 320×480⁴⁰², 640×480⁴⁰³, 800×480⁴⁰⁴, 800×600⁴⁰⁵, 1024×768⁴⁰⁶, 1024×1024⁴⁰⁷, 1152×864⁴⁰⁸, 1280×720⁴⁰⁹, 1280×800⁴¹⁰, 1280×960⁴¹¹, 1400×1050⁴¹², 1440×900⁴¹³, 1600×1200⁴¹⁴, 1680×1050⁴¹⁵, 1680×1200⁴¹⁶, 1920×1080⁴¹⁷, 1920×1200⁴¹⁸, 1920×1440⁴¹⁹, 2560×1440⁴²⁰

Travel And Explore

“For once you have tasted flight you will walk the earth with your eyes turned skywards, for there you have been and there you will long to return. (Leonardo da Vinci)” — Designed by Dipanjan Karmakar⁴²¹ from India.

⁴²²

• preview⁴²³
• with calendar: 1280×720⁴²⁴, 1280×800⁴²⁵, 1280×960⁴²⁶, 1280×1024⁴²⁷, 1400×1050⁴²⁸, 1440×900⁴²⁹, 1600×1200⁴³⁰, 1680×1050⁴³¹, 1680×1200⁴³², 1920×1080⁴³³, 1920×1440⁴³⁴, 2560×1440⁴³⁵, 1366×768⁴³⁶
• without calendar: 1280×720⁴³⁷, 1280×800⁴³⁸, 1280×960⁴³⁹, 1280×1024⁴⁴⁰, 1400×1050⁴⁴¹, 1440×900⁴⁴², 1600×1200⁴⁴³, 1680×1050⁴⁴⁴, 1680×1200⁴⁴⁵, 1920×1080⁴⁴⁶, 1920×1440⁴⁴⁷, 2560×1440⁴⁴⁸, 1366×768⁴⁴⁹

The Rooster Wishes You A Happy New Year

“2017 is the year of the rooster, so I made a wallpaper with a rooster on it. I myself have 8 chickens at home but no rooster, so maybe we could buy one this year to celebrate the year of the rooster. Happy New Year to everyone!” — Designed by Melissa Bogemans⁴⁵⁰ from Belgium.

⁴⁵¹

• preview⁴⁵²
• with calendar: 640×480⁴⁵³, 800×480⁴⁵⁴, 800×600⁴⁵⁵, 1024×768⁴⁵⁶, 1024×1024⁴⁵⁷, 1152×864⁴⁵⁸, 1280×720⁴⁵⁹, 1280×800⁴⁶⁰, 1280×960⁴⁶¹, 1280×1024⁴⁶², 1400×1050⁴⁶³, 1440×900⁴⁶⁴, 1600×1200⁴⁶⁵, 1680×1050⁴⁶⁶, 1680×1200⁴⁶⁷, 1920×1080⁴⁶⁸, 1920×1200⁴⁶⁹, 1920×1440⁴⁷⁰, 2560×1440⁴⁷¹
• without calendar: 640×480⁴⁷², 800×480⁴⁷³, 800×600⁴⁷⁴, 1024×768⁴⁷⁵, 1024×1024⁴⁷⁶, 1152×864⁴⁷⁷, 1280×720⁴⁷⁸, 1280×800⁴⁷⁹, 1280×960⁴⁸⁰, 1280×1024⁴⁸¹, 1400×1050⁴⁸², 1440×900⁴⁸³, 1600×1200⁴⁸⁴, 1680×1050⁴⁸⁵, 1680×1200⁴⁸⁶, 1920×1080⁴⁸⁷, 1920×1200⁴⁸⁸, 1920×1440⁴⁸⁹, 2560×1440⁴⁹⁰

Happy Birthday A. A. Milne

“I love Winnie the Pooh! January 18th marks A.A. Milne’s 135th birthday, the creator of Winnie the Pooh. I have included one of my favourite quotes to symbolize what an inspiration his stories have been to both kids and adults.” — Designed by Safia Begum⁴⁹¹ from United Kingdom.

⁴⁹²

• preview⁴⁹³
• with calendar: 320×480⁴⁹⁴, 640×480⁴⁹⁵, 800×480⁴⁹⁶, 800×600⁴⁹⁷, 1024×768⁴⁹⁸, 1024×1024⁴⁹⁹, 1280×720⁵⁰⁰, 1280×800⁵⁰¹, 1280×960⁵⁰², 1280×1024⁵⁰³, 1400×1050⁵⁰⁴, 1440×900⁵⁰⁵, 1600×1200⁵⁰⁶, 1680×1050⁵⁰⁷, 1680×1200⁵⁰⁸, 1920×1080⁵⁰⁹, 1920×1200⁵¹⁰, 1920×1440⁵¹¹, 2560×1440⁵¹², 1366×768⁵¹³
• without calendar: 320×480⁵¹⁴, 640×480⁵¹⁵, 800×480⁵¹⁶, 800×600⁵¹⁷, 1024×768⁵¹⁸, 1024×1024⁵¹⁹, 1280×720⁵²⁰, 1280×800⁵²¹, 1280×960⁵²², 1280×1024⁵²³, 1400×1050⁵²⁴, 1440×900⁵²⁵, 1600×1200⁵²⁶, 1680×1050⁵²⁷, 1680×1200⁵²⁸, 1920×1080⁵²⁹, 1920×1200⁵³⁰, 1920×1440⁵³¹, 2560×1440⁵³², 1366×768⁵³³

Ice Crime

Designed by Doud – Elise Vanoorbeek⁵³⁴ from Belgium.

⁵³⁵

• preview⁵³⁶
• with calendar: 1280×1024⁵³⁷, 1400×1050⁵³⁸, 1440×900⁵³⁹, 1600×1200⁵⁴⁰, 1680×1050⁵⁴¹, 1680×1200⁵⁴², 1920×1080⁵⁴³, 1920×1200⁵⁴⁴, 1920×1440⁵⁴⁵, 2560×1440⁵⁴⁶, 1366×768⁵⁴⁷
• without calendar: 1280×1024⁵⁴⁸, 1400×1050⁵⁴⁹, 1440×900⁵⁵⁰, 1600×1200⁵⁵¹, 1680×1050⁵⁵², 1680×1200⁵⁵³, 1920×1080⁵⁵⁴, 1920×1200⁵⁵⁵, 1920×1440⁵⁵⁶, 2560×1440⁵⁵⁷, 1366×768⁵⁵⁸

The Worried Weighing Scales

“Most of us have over-indulged a little over the holiday period – spare a thought for our bathroom scales, who will have much heavier people standing on them for the next few months!” — Designed by James Mitchell⁵⁵⁹ from United Kingdom.

⁵⁶⁰

• preview⁵⁶¹
• with calendar: 1280×720⁵⁶², 1280×800⁵⁶³, 1440×900⁵⁶⁴, 1680×1050⁵⁶⁵, 1920×1080⁵⁶⁶, 1920×1200⁵⁶⁷, 2560×1440⁵⁶⁸, 1366×768⁵⁶⁹, 2880×1800⁵⁷⁰
• without calendar: 1280×720⁵⁷¹, 1280×800⁵⁷², 1440×900⁵⁷³, 1680×1050⁵⁷⁴, 1920×1080⁵⁷⁵, 1920×1200⁵⁷⁶, 2560×1440⁵⁷⁷, 1366×768⁵⁷⁸, 2880×1800⁵⁷⁹

Wake Up, It Is Time To Study

“Sitting on a chair before my desk playing video games when a friend called me to ask something about the exams. Then I realized that I have one more week to study before the first exam begins. So wake up guys! It is time to study!” — Designed by Robert Vaida⁵⁸⁰ from Belgium.

⁵⁸¹

• preview⁵⁸²
• with calendar: 640×480⁵⁸³, 800×600⁵⁸⁴, 1024×768⁵⁸⁵, 1280×800⁵⁸⁶, 1440×900⁵⁸⁷, 1680×1050⁵⁸⁸, 1920×1200⁵⁸⁹, 2880×1800⁵⁹⁰
• without calendar: 640×480⁵⁹¹, 800×600⁵⁹², 1024×768⁵⁹³, 1280×800⁵⁹⁴, 1440×900⁵⁹⁵, 1680×1050⁵⁹⁶, 1920×1200⁵⁹⁷, 2880×1800⁵⁹⁸

Angels Of Heaven

“January is a month of cold winter days. Whenever I hear ‘January’, the first thing that comes to my mind are long sleepy winter nights, cause these days are the most comfortable for sleeping. It gives me the feeling of a baby from heaven sleeping comfortably.” — Designed by Swapnil Chavan⁵⁹⁹ from India.

⁶⁰⁰

• preview⁶⁰¹
• with calendar: 320×480⁶⁰², 800×600⁶⁰³, 1280×720⁶⁰⁴, 1280×1024⁶⁰⁵, 1920×1080⁶⁰⁶, 2560×1440⁶⁰⁷
• without calendar: 320×480⁶⁰⁸, 800×600⁶⁰⁹, 1280×720⁶¹⁰, 1280×1024⁶¹¹, 1920×1080⁶¹², 2560×1440⁶¹³

The Tree

“Before reaching the spring it is necessary to go through the intense cold of winter.” — Designed by Ana Travassos⁶¹⁴ from Portugal.

⁶¹⁵

• preview⁶¹⁶
• with calendar: 640×480⁶¹⁷, 800×600⁶¹⁸, 1024×1024⁶¹⁹, 1280×720⁶²⁰, 1280×960⁶²¹, 1366×768⁶²², 1440×900⁶²³, 1680×1050⁶²⁴, 1920×1200⁶²⁵, 2560×1440⁶²⁶
• without calendar: 640×480⁶²⁷, 800×600⁶²⁸, 1024×1024⁶²⁹, 1280×720⁶³⁰, 1280×960⁶³¹, 1366×768⁶³², 1440×900⁶³³, 1680×1050⁶³⁴, 1920×1200⁶³⁵, 2560×1440⁶³⁶

Let’s Do Great Things Together

“I choose a typographic wallpaper for the mont January to clearly emphasize my message to the world. We need to make this upcoming year a better year than 2016 and and we can only achieve that if we stand together and try making the best of it.” — Designed by Thomas Debelder⁶³⁷ from Belgium.

⁶³⁸

• preview⁶³⁹
• with calendar: 1024×768⁶⁴⁰, 1280×1024⁶⁴¹, 1440×900⁶⁴², 1680×1200⁶⁴³, 1920×1080⁶⁴⁴, 1920×1200⁶⁴⁵, 1920×1440⁶⁴⁶, 2560×1440⁶⁴⁷
• without calendar: 1024×768⁶⁴⁸, 1280×1024⁶⁴⁹, 1440×900⁶⁵⁰, 1680×1200⁶⁵¹, 1920×1080⁶⁵², 1920×1200⁶⁵³, 1920×1440⁶⁵⁴, 2560×1440⁶⁵⁵

Observing Cat

“I took a shot of this cat while she was observing the world on a chilly sunny day.” — Designed by Marija Zaric⁶⁵⁶ from Belgrade, Serbia.

⁶⁵⁷

• preview⁶⁵⁸
• with calendar: 800×450⁶⁵⁹, 1280×720⁶⁶⁰, 1366×768⁶⁶¹, 1440×810⁶⁶², 1600×900⁶⁶³, 1680×945⁶⁶⁴, 1920×1080⁶⁶⁵, 2560×1440⁶⁶⁶
• without calendar: 800×450⁶⁶⁷, 1280×720⁶⁶⁸, 1366×768⁶⁶⁹, 1440×810⁶⁷⁰, 1600×900⁶⁷¹, 1680×945⁶⁷², 1920×1080⁶⁷³, 2560×1440⁶⁷⁴

It Shines

“January represents a new beginning, a new chance to start over. This wallpaper is made to charge everyone with energy and to remember that smiling everyday does make the difference.” — Designed by Rodrigo Flores⁶⁷⁵ from Costa Rica.

⁶⁷⁶

• preview⁶⁷⁷
• with calendar: 1024×768⁶⁷⁸, 1280×720⁶⁷⁹, 1280×800⁶⁸⁰, 1366×768⁶⁸¹, 1440×900⁶⁸², 1680×1050⁶⁸³, 1920×1080⁶⁸⁴, 2560×1440⁶⁸⁵
• without calendar: 1024×768⁶⁸⁶, 1280×720⁶⁸⁷, 1280×800⁶⁸⁸, 1366×768⁶⁸⁹, 1440×900⁶⁹⁰, 1680×1050⁶⁹¹, 1920×1080⁶⁹², 2560×1440⁶⁹³

Join In Next Month! Link

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month⁶⁹⁴!

What’s Your Favorite? Link

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.

(cm, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/tag/wallpapers/
2. 2 https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/
3. 3 https://www.smashingmagazine.com/winter-wallpaper/
4. 4 https://www.behance.net/DesignStudioBrainer
5. 5 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/jan-17-angel-in-snow-full.jpg
6. 6 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/jan-17-angel-in-snow-preview.jpg
7. 7 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-800×600.jpg
8. 8 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1024×768.jpg
9. 9 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1152×864.jpg
10. 10 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1280×800.jpg
11. 11 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1280×960.jpg
12. 12 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1400×1050.jpg
13. 13 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1440×900.jpg
14. 14 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1600×1200.jpg
15. 15 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1680×1050.jpg
16. 16 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1680×1260.jpg
17. 17 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1920×1200.jpg
18. 18 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1920×1440.jpg
19. 19 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-800×600.jpg
20. 20 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1024×768.jpg
21. 21 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1152×864.jpg
22. 22 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1280×800.jpg
23. 23 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1280×960.jpg
24. 24 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1400×1050.jpg
25. 25 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1440×900.jpg
26. 26 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1600×1200.jpg
27. 27 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1680×1050.jpg
28. 28 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1680×1260.jpg
29. 29 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1920×1200.jpg
30. 30 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1920×1440.jpg
31. 31 http://www.mariakellerac.com
32. 32 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/jan-17-colorful-2017-full.png
33. 33 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/jan-17-colorful-2017-preview.png
34. 34 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-320×480.png
35. 35 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-640×480.png
36. 36 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-640×1136.png
37. 37 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-750×1334.png
38. 38 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-800×480.png
39. 39 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-800×600.png
40. 40 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1024×768.png
41. 41 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1024×1024.png
42. 42 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1152×864.png
43. 43 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1242×2208.png
44. 44 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1280×720.png
45. 45 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1280×800.png
46. 46 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1280×960.png
47. 47 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1280×1024.png
48. 48 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1366×768.png
49. 49 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1400×1050.png
50. 50 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1440×900.png
51. 51 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1600×1200.png
52. 52 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1680×1050.png
53. 53 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1680×1200.png
54. 54 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1920×1080.png
55. 55 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1920×1200.png
56. 56 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1920×1440.png
57. 57 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-2560×1440.png
58. 58 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-2880×1800.png
59. 59 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-320×480.png
60. 60 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-640×480.png
61. 61 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-640×1136.png
62. 62 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-750×1334.png
63. 63 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-800×480.png
64. 64 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-800×600.png
65. 65 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1024×768.png
66. 66 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1024×1024.png
67. 67 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1152×864.png
68. 68 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1242×2208.png
69. 69 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1280×720.png
70. 70 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1280×800.png
71. 71 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1280×960.png
72. 72 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1280×1024.png
73. 73 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1366×768.png
74. 74 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1400×1050.png
75. 75 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1440×900.png
76. 76 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1600×1200.png
77. 77 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1680×1050.png
78. 78 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1680×1200.png
79. 79 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1920×1080.png
80. 80 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1920×1200.png
81. 81 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1920×1440.png
82. 82 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-2560×1440.png
83. 83 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-2880×1800.png
84. 84 http://www.damnperfect.com
85. 85 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/jan-17-a-new-start-full.jpg
86. 86 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/jan-17-a-new-start-preview.jpg
87. 87 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-320×480.jpg
88. 88 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-640×480.jpg
89. 89 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-800×480.jpg
90. 90 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-800×600.jpg
91. 91 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1024×768.jpg
92. 92 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1024×1024.jpg
93. 93 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1152×864.jpg
94. 94 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1280×720.jpg
95. 95 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1280×800.jpg
96. 96 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1280×960.jpg
97. 97 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1280×1024.jpg
98. 98 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1366×768.jpg
99. 99 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1400×1050.jpg
100. 100 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1440×900.jpg
101. 101 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1600×1200.jpg
102. 102 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1680×1050.jpg
103. 103 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1680×1200.jpg
104. 104 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1920×1080.jpg
105. 105 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1920×1200.jpg
106. 106 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1920×1440.jpg
107. 107 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-2560×1440.jpg
108. 108 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-320×480.jpg
109. 109 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-640×480.jpg
110. 110 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-800×480.jpg
111. 111 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-800×600.jpg
112. 112 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1024×768.jpg
113. 113 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1024×1024.jpg
114. 114 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1152×864.jpg
115. 115 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1280×720.jpg
116. 116 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1280×800.jpg
117. 117 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1280×960.jpg
118. 118 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1280×1024.jpg
119. 119 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1366×768.jpg
120. 120 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1400×1050.jpg
121. 121 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1440×900.jpg
122. 122 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1600×1200.jpg
123. 123 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1680×1050.jpg
124. 124 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1680×1200.jpg
125. 125 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1920×1080.jpg
126. 126 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1920×1200.jpg
127. 127 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1920×1440.jpg
128. 128 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-2560×1440.jpg
129. 129 http://acodez.in/
130. 130 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/jan-17-happy-hot-tea-month-full.png
131. 131 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/jan-17-happy-hot-tea-month-preview.png
132. 132 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-320×480.png
133. 133 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-640×480.png
134. 134 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-800×480.png
135. 135 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-800×600.png
136. 136 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1024×768.png
137. 137 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1024×1024.png
138. 138 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1152×864.png
139. 139 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1280×720.png
140. 140 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1280×960.png
141. 141 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1280×1024.png
142. 142 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1366×768.png
143. 143 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1400×1050.png
144. 144 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1440×900.png
145. 145 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1600×1200.png
146. 146 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1680×1050.png
147. 147 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1680×1200.png
148. 148 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1920×1080.png
149. 149 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1920×1200.png
150. 150 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1920×1440.png
151. 151 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-2560×1440.png
152. 152 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-320×480.png
153. 153 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-640×480.png
154. 154 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-800×480.png
155. 155 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-800×600.png
156. 156 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1024×768.png
157. 157 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1024×1024.png
158. 158 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1152×864.png
159. 159 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1280×720.png
160. 160 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1280×960.png
161. 161 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1280×1024.png
162. 162 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1366×768.png
163. 163 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1400×1050.png
164. 164 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1440×900.png
165. 165 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1600×1200.png
166. 166 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1680×1050.png
167. 167 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1680×1200.png
168. 168 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1920×1080.png
169. 169 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1920×1200.png
170. 170 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1920×1440.png
171. 171 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-2560×1440.png
172. 172 https://www.facebook.com/Barberrydesign/
173. 173 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/jan-17-love-makes-you-warm-full.png
174. 174 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/jan-17-love-makes-you-warm-preview.png
175. 175 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-320×480.png
176. 176 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-640×480.png
177. 177 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-1024×768.png
178. 178 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-1280×720.png
179. 179 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-1280×800.png
180. 180 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-1680×1050.png
181. 181 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-1920×1200.png
182. 182 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-2560×1440.png
183. 183 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-320×480.png
184. 184 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-640×480.png
185. 185 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-1024×768.png
186. 186 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-1280×720.png
187. 187 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-1280×800.png
188. 188 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-1680×1050.png
189. 189 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-1920×1200.png
190. 190 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-2560×1440.png
191. 191 http://www.tazi.com.au
192. 192 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/jan-17-hello-summer-in-australia-full.png
193. 193 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/jan-17-hello-summer-in-australia-preview.png
194. 194 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-320×480.png
195. 195 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-640×480.png
196. 196 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-800×600.png
197. 197 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1024×768.png
198. 198 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1152×864.png
199. 199 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1280×720.png
200. 200 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1280×960.png
201. 201 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1600×1200.png
202. 202 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1920×1080.png
203. 203 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1920×1440.png
204. 204 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-2560×1440.png
205. 205 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-320×480.png
206. 206 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-640×480.png
207. 207 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-800×600.png
208. 208 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1024×768.png
209. 209 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1152×864.png
210. 210 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1280×720.png
211. 211 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1280×960.png
212. 212 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1600×1200.png
213. 213 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1920×1080.png
214. 214 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1920×1440.png
215. 215 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-2560×1440.png
216. 216 http://www.katherine-appleby.com
217. 217 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/jan-17-summer-celebration-full.png
218. 218 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/jan-17-summer-celebration-preview.png
219. 219 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-320×480.png
220. 220 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-640×480.png
221. 221 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-800×480.png
222. 222 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-800×600.png
223. 223 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1024×768.png
224. 224 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1024×1024.png
225. 225 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1152×864.png
226. 226 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1280×720.png
227. 227 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1280×800.png
228. 228 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1280×960.png
229. 229 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1280×1024.png
230. 230 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1400×1050.png
231. 231 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1440×900.png
232. 232 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1600×1200.png
233. 233 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1680×1050.png
234. 234 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1680×1200.png
235. 235 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1920×1080.png
236. 236 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1920×1200.png
237. 237 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1920×1440.png
238. 238 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-2560×1440.png
239. 239 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-320×480.png
240. 240 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-640×480.png
241. 241 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-800×480.png
242. 242 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-800×600.png
243. 243 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1024×768.png
244. 244 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1024×1024.png
245. 245 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1152×864.png
246. 246 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1280×720.png
247. 247 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1280×800.png
248. 248 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1280×960.png
249. 249 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1280×1024.png
250. 250 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1400×1050.png
251. 251 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1440×900.png
252. 252 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1600×1200.png
253. 253 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1680×1050.png
254. 254 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1680×1200.png
255. 255 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1920×1080.png
256. 256 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1920×1200.png
257. 257 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1920×1440.png
258. 258 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-2560×1440.png
259. 259 http://lucasdebelder.be/
260. 260 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/jan-17-2017-the-year-of-the-rooster-full.png
261. 261 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/jan-17-2017-the-year-of-the-rooster-preview.png
262. 262 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-320×480.png
263. 263 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-640×480.png
264. 264 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-800×480.png
265. 265 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-800×600.png
266. 266 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1024×768.png
267. 267 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1024×1024.png
268. 268 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1152×864.png
269. 269 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1280×720.png
270. 270 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1280×800.png
271. 271 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1280×960.png
272. 272 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1280×1024.png
273. 273 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1400×1050.png
274. 274 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1440×900.png
275. 275 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1600×1200.png
276. 276 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1680×1050.png
277. 277 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1680×1200.png
278. 278 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1920×1080.png
279. 279 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1920×1200.png
280. 280 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1920×1440.png
281. 281 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-2560×1440.png
282. 282 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-3840×2160.png
283. 283 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-320×480.png
284. 284 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-640×480.png
285. 285 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-800×480.png
286. 286 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-800×600.png
287. 287 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1024×768.png
288. 288 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1024×1024.png
289. 289 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1152×864.png
290. 290 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1280×720.png
291. 291 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1280×800.png
292. 292 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1280×960.png
293. 293 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1280×1024.png
294. 294 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1400×1050.png
295. 295 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1440×900.png
296. 296 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1600×1200.png
297. 297 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1680×1050.png
298. 298 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1680×1200.png
299. 299 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1920×1080.png
300. 300 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1920×1200.png
301. 301 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1920×1440.png
302. 302 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-2560×1440.png
303. 303 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-3840×2160.png
304. 304 http://www.popwebdesign.net/index_eng.html
305. 305 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/jan-17-new-beginnings-full.jpg
306. 306 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/jan-17-new-beginnings-preview.jpg
307. 307 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-320×480.jpg
308. 308 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-640×480.jpg
309. 309 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-800×480.jpg
310. 310 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-800×600.jpg
311. 311 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1024×768.jpg
312. 312 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1152×864.jpg
313. 313 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1280×720.jpg
314. 314 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1280×800.jpg
315. 315 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1280×960.jpg
316. 316 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1280×1024.jpg
317. 317 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1400×1050.jpg
318. 318 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1440×900.jpg
319. 319 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1600×1200.jpg
320. 320 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1680×1050.jpg
321. 321 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1680×1200.jpg
322. 322 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1920×1080.jpg
323. 323 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1920×1200.jpg
324. 324 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1920×1440.jpg
325. 325 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-2560×1440.jpg
326. 326 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-320×480.jpg
327. 327 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-640×480.jpg
328. 328 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-800×480.jpg
329. 329 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-800×600.jpg
330. 330 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1024×768.jpg
331. 331 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1152×864.jpg
332. 332 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1280×720.jpg
333. 333 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1280×800.jpg
334. 334 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1280×960.jpg
335. 335 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1280×1024.jpg
336. 336 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1400×1050.jpg
337. 337 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1440×900.jpg
338. 338 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1600×1200.jpg
339. 339 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1680×1050.jpg
340. 340 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1680×1200.jpg
341. 341 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1920×1080.jpg
342. 342 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1920×1200.jpg
343. 343 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1920×1440.jpg
344. 344 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-2560×1440.jpg
345. 345 http://liapantazi.com
346. 346 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/jan-17-year-of-the-rooster-full.jpg
347. 347 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/jan-17-year-of-the-rooster-preview.jpg
348. 348 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-640×480.jpg
349. 349 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-800×600.jpg
350. 350 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1024×768.jpg
351. 351 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1152×864.jpg
352. 352 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1280×720.jpg
353. 353 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1280×800.jpg
354. 354 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1280×960.jpg
355. 355 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1400×1050.jpg
356. 356 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1440×900.jpg
357. 357 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1600×1200.jpg
358. 358 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1680×1050.jpg
359. 359 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1920×1080.jpg
360. 360 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1920×1200.jpg
361. 361 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1920×1440.jpg
362. 362 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-2560×1440.jpg
363. 363 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1366×768.jpg
364. 364 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-640×480.jpg
365. 365 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-800×600.jpg
366. 366 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1024×768.jpg
367. 367 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1152×864.jpg
368. 368 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1280×720.jpg
369. 369 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1280×800.jpg
370. 370 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1280×960.jpg
371. 371 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1400×1050.jpg
372. 372 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1440×900.jpg
373. 373 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1600×1200.jpg
374. 374 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1680×1050.jpg
375. 375 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1920×1080.jpg
376. 376 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1920×1200.jpg
377. 377 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1920×1440.jpg
378. 378 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-2560×1440.jpg
379. 379 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1366×768.jpg
380. 380 https://www.creitive.com/
381. 381 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/jan-17-reindeer-full.png
382. 382 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/jan-17-reindeer-preview.png
383. 383 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-320×480.png
384. 384 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-640×480.png
385. 385 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-800×480.png
386. 386 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-800×600.png
387. 387 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1024×768.png
388. 388 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1024×1024.png
389. 389 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1152×864.png
390. 390 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1280×720.png
391. 391 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1280×800.png
392. 392 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1280×960.png
393. 393 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1400×1050.png
394. 394 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1440×900.png
395. 395 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1600×1200.png
396. 396 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1680×1050.png
397. 397 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1680×1200.png
398. 398 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1920×1080.png
399. 399 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1920×1200.png
400. 400 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1920×1440.png
401. 401 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-2560×1440.png
402. 402 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-320×480.png
403. 403 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-640×480.png
404. 404 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-800×480.png
405. 405 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-800×600.png
406. 406 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1024×768.png
407. 407 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1024×1024.png
408. 408 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1152×864.png
409. 409 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1280×720.png
410. 410 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1280×800.png
411. 411 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1280×960.png
412. 412 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1400×1050.png
413. 413 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1440×900.png
414. 414 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1600×1200.png
415. 415 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1680×1050.png
416. 416 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1680×1200.png
417. 417 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1920×1080.png
418. 418 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1920×1200.png
419. 419 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1920×1440.png
420. 420 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-2560×1440.png
421. 421 http://0effortthemes.com/
422. 422 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/jan-17-travel-explore-full.jpg
423. 423 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/jan-17-travel-explore-preview.jpg
424. 424 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1280×720.jpg
425. 425 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1280×800.jpg
426. 426 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1280×960.jpg
427. 427 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1280×1024.jpg
428. 428 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1400×1050.jpg
429. 429 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1440×900.jpg
430. 430 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1600×1200.jpg
431. 431 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1680×1050.jpg
432. 432 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1680×1200.jpg
433. 433 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1920×1080.jpg
434. 434 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1920×1440.jpg
435. 435 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-2560×1440.jpg
436. 436 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1366×768.jpg
437. 437 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1280×720.jpg
438. 438 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1280×800.jpg
439. 439 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1280×960.jpg
440. 440 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1280×1024.jpg
441. 441 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1400×1050.jpg
442. 442 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1440×900.jpg
443. 443 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1600×1200.jpg
444. 444 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1680×1050.jpg
445. 445 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1680×1200.jpg
446. 446 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1920×1080.jpg
447. 447 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1920×1440.jpg
448. 448 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-2560×1440.jpg
449. 449 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1366×768.jpg
450. 450 http://melissa.bogemans.com/
451. 451 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/jan-17-the-rooster-wishes-you-a-happy-new-year-full.png
452. 452 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/jan-17-the-rooster-wishes-you-a-happy-new-year-preview.png
453. 453 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-640×480.png
454. 454 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-800×480.png
455. 455 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-800×600.png
456. 456 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1024×768.png
457. 457 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1024×1024.png
458. 458 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1152×864.png
459. 459 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1280×720.png
460. 460 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1280×800.png
461. 461 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1280×960.png
462. 462 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1280×1024.png
463. 463 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1400×1050.png
464. 464 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1440×900.png
465. 465 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1600×1200.png
466. 466 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1680×1050.png
467. 467 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1680×1200.png
468. 468 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1920×1080.png
469. 469 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1920×1200.png
470. 470 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1920×1440.png
471. 471 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-2560×1440.png
472. 472 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-640×480.png
473. 473 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-800×480.png
474. 474 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-800×600.png
475. 475 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1024×768.png
476. 476 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1024×1024.png
477. 477 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1152×864.png
478. 478 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1280×720.png
479. 479 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1280×800.png
480. 480 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1280×960.png
481. 481 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1280×1024.png
482. 482 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1400×1050.png
483. 483 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1440×900.png
484. 484 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1600×1200.png
485. 485 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1680×1050.png
486. 486 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1680×1200.png
487. 487 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1920×1080.png
488. 488 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1920×1200.png
489. 489 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1920×1440.png
490. 490 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-2560×1440.png
491. 491 http://www.safiabegum.com
492. 492 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/jan-17-happy-birthday-a-a-milne-full.png
493. 493 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/jan-17-happy-birthday-a-a-milne-preview.png
494. 494 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-320×480.png
495. 495 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-640×480.png
496. 496 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-800×480.png
497. 497 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-800×600.png
498. 498 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1024×768.png
499. 499 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1024×1024.png
500. 500 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1280×720.png
501. 501 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1280×800.png
502. 502 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1280×960.png
503. 503 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1280×1024.png
504. 504 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1400×1050.png
505. 505 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1440×900.png
506. 506 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1600×1200.png
507. 507 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1680×1050.png
508. 508 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1680×1200.png
509. 509 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1920×1080.png
510. 510 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1920×1200.png
511. 511 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1920×1440.png
512. 512 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-2560×1440.png
513. 513 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1366×768.png
514. 514 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-320×480.png
515. 515 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-640×480.png
516. 516 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-800×480.png
517. 517 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-800×600.png
518. 518 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1024×768.png
519. 519 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1024×1024.png
520. 520 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1280×720.png
521. 521 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1280×800.png
522. 522 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1280×960.png
523. 523 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1280×1024.png
524. 524 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1400×1050.png
525. 525 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1440×900.png
526. 526 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1600×1200.png
527. 527 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1680×1050.png
528. 528 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1680×1200.png
529. 529 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1920×1080.png
530. 530 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1920×1200.png
531. 531 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1920×1440.png
532. 532 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-2560×1440.png
533. 533 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1366×768.png
534. 534 http://www.facebook.com/doud.design
535. 535 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/jan-17-ice-crime-full.jpg
536. 536 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/jan-17-ice-crime-preview.jpg
537. 537 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1280×1024.jpg
538. 538 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1400×1050.jpg
539. 539 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1440×900.jpg
540. 540 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1600×1200.jpg
541. 541 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1680×1050.jpg
542. 542 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1680×1200.jpg
543. 543 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1920×1080.jpg
544. 544 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1920×1200.jpg
545. 545 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1920×1440.jpg
546. 546 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-2560×1440.jpg
547. 547 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1366×768.jpg
548. 548 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1280×1024.jpg
549. 549 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1400×1050.jpg
550. 550 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1440×900.jpg
551. 551 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1600×1200.jpg
552. 552 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1680×1050.jpg
553. 553 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1680×1200.jpg
554. 554 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1920×1080.jpg
555. 555 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1920×1200.jpg
556. 556 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1920×1440.jpg
557. 557 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-2560×1440.jpg
558. 558 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1366×768.jpg
559. 559 https://www.behance.net/jamesmitchell23
560. 560 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/jan-17-the-worried-weighing-scales-full.jpg
561. 561 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/jan-17-the-worried-weighing-scales-preview.jpg
562. 562 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1280×720.jpg
563. 563 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1280×800.jpg
564. 564 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1440×900.jpg
565. 565 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1680×1050.jpg
566. 566 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1920×1080.jpg
567. 567 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1920×1200.jpg
568. 568 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-2560×1440.jpg
569. 569 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1366×768.jpg
570. 570 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-2880×1800.jpg
571. 571 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1280×720.jpg
572. 572 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1280×800.jpg
573. 573 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1440×900.jpg
574. 574 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1680×1050.jpg
575. 575 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1920×1080.jpg
576. 576 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1920×1200.jpg
577. 577 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-2560×1440.jpg
578. 578 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1366×768.jpg
579. 579 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-2880×1800.jpg
580. 580 http://www.code-master.be
581. 581 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/jan-17-wake-up-it-is-time-to-study-full.jpg
582. 582 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/jan-17-wake-up-it-is-time-to-study-preview.jpg
583. 583 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-640×480.jpg
584. 584 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-800×600.jpg
585. 585 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-1024×768.jpg
586. 586 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-1280×800.jpg
587. 587 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-1440×900.jpg
588. 588 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-1680×1050.jpg
589. 589 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-1920×1200.jpg
590. 590 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-2880×1800.jpg
591. 591 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-640×480.jpg
592. 592 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-800×600.jpg
593. 593 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-1024×768.jpg
594. 594 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-1280×800.jpg
595. 595 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-1440×900.jpg
596. 596 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-1680×1050.jpg
597. 597 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-1920×1200.jpg
598. 598 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-2880×1800.jpg
599. 599 https://www.behance.net/gallery/46394693/zzzz?unverified=1
600. 600 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/jan-17-angels-of-heaven-full.jpg
601. 601 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/jan-17-angels-of-heaven-preview.jpg
602. 602 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/cal/jan-17-angels-of-heaven-cal-320×480.jpg
603. 603 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/cal/jan-17-angels-of-heaven-cal-800×600.jpg
604. 604 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/cal/jan-17-angels-of-heaven-cal-1280×720.jpg
605. 605 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/cal/jan-17-angels-of-heaven-cal-1280×1024.jpg
606. 606 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/cal/jan-17-angels-of-heaven-cal-1920×1080.jpg
607. 607 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/cal/jan-17-angels-of-heaven-cal-2560×1440.jpg
608. 608 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/nocal/jan-17-angels-of-heaven-nocal-320×480.jpg
609. 609 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/nocal/jan-17-angels-of-heaven-nocal-800×600.jpg
610. 610 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/nocal/jan-17-angels-of-heaven-nocal-1280×720.jpg
611. 611 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/nocal/jan-17-angels-of-heaven-nocal-1280×1024.jpg
612. 612 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/nocal/jan-17-angels-of-heaven-nocal-1920×1080.jpg
613. 613 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/nocal/jan-17-angels-of-heaven-nocal-2560×1440.jpg
614. 614 https://www.behance.net/filipatravassos
615. 615 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/jan-17-the-tree-full.png
616. 616 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/jan-17-the-tree-preview.png
617. 617 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-640×480.png
618. 618 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-800×600.png
619. 619 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1024×1024.png
620. 620 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1280×720.png
621. 621 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1280×960.png
622. 622 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1366×768.png
623. 623 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1440×900.png
624. 624 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1680×1050.png
625. 625 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1920×1200.png
626. 626 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-2560×1440.png
627. 627 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-640×480.png
628. 628 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-800×600.png
629. 629 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1024×1024.png
630. 630 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1280×720.png
631. 631 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1280×960.png
632. 632 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1366×768.png
633. 633 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1440×900.png
634. 634 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1680×1050.png
635. 635 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1920×1200.png
636. 636 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-2560×1440.png
637. 637 http://thomasdebelder.be/
638. 638 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/jan-17-lets-do-great-things-together-full.jpg
639. 639 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/jan-17-lets-do-great-things-together-preview.jpg
640. 640 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1024×768.jpg
641. 641 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1280×1024.jpg
642. 642 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1440×900.jpg
643. 643 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1680×1200.jpg
644. 644 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1920×1080.jpg
645. 645 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1920×1200.jpg
646. 646 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1920×1440.jpg
647. 647 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-2560×1440.jpg
648. 648 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1024×768.jpg
649. 649 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1280×1024.jpg
650. 650 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1440×900.jpg
651. 651 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1680×1200.jpg
652. 652 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1920×1080.jpg
653. 653 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1920×1200.jpg
654. 654 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1920×1440.jpg
655. 655 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-2560×1440.jpg
656. 656 http://www.marijazaric.com/
657. 657 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/jan-17-observing-cat-full.jpg
658. 658 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/jan-17-observing-cat-preview.jpg
659. 659 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-800×450.jpg
660. 660 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-1280×720.jpg
661. 661 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-1366×768.jpg
662. 662 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-1440×810.jpg
663. 663 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-1600×900.jpg
664. 664 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-1680×945.jpg
665. 665 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-1920×1080.jpg
666. 666 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-2560×1440.jpg
667. 667 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-800×450.jpg
668. 668 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-1280×720.jpg
669. 669 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-1366×768.jpg
670. 670 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-1440×810.jpg
671. 671 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-1600×900.jpg
672. 672 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-1680×945.jpg
673. 673 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-1920×1080.jpg
674. 674 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-2560×1440.jpg
675. 675 https://www.behance.net/RodFlores
676. 676 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/jan-17-it-shines-full.jpg
677. 677 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/jan-17-it-shines-preview.jpg
678. 678 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1024×768.jpg
679. 679 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1280×720.jpg
680. 680 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1280×800.jpg
681. 681 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1366×768.jpg
682. 682 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1440×900.jpg
683. 683 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1680×1050.jpg
684. 684 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1920×1080.jpg
685. 685 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-2560×1440.jpg
686. 686 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1024×768.jpg
687. 687 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1280×720.jpg
688. 688 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1280×800.jpg
689. 689 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1366×768.jpg
690. 690 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1440×900.jpg
691. 691 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1680×1050.jpg
692. 692 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1920×1080.jpg
693. 693 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-2560×1440.jpg
694. 694 https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/

↑ Back to topTweet itShare on Facebook

We have all encountered names that are difficult to pronounce. Having a challenging name myself, I get different pronunciations of my first name, Atif, all the time. In order to solve my own naming problem, I built a Javascript plugin called Vocalizer. In this article, I will introduce what Vocalizer is and a few different ways to use it.

How It Started Link

Earlier this year, I redesigned my portfolio website. During this process, I decided to add a feature that educated visitors on how to say my name. One day, I opened the “Voice Memos” app on my iPhone, tapped “Record”, and asked my wife to say my first name. Then, I embedded a small button onto the landing page after my first name. Clicking on that button would play the audio file of my name.

¹

After launching the website, I received a few emails and tweets calling out the audio feature. I even attended a few conferences and meetups where people pronounced my name the right way. A few people expressed interest in implementing the pronunciation feature on their own websites.

Over the next few weeks, I spent time converting my singular implementation into a reusable plugin. Before publicly releasing it, I stumbled upon a company called NameShouts, which is an audio-based pronunciation tool with a repository of over 70,000 name pronunciations. I reached out to them for access to their API, implemented it into my plugin, and open-sourced it.

How To Use Vocalizer Link

Vocalizer is a simple, lightweight JavaScript plugin that facilitates the accessibility of difficult to pronounce names. If you’re someone who is unsure of how to say a certain name, Vocalizer shows you how. Or, if you’re someone with an unfamiliar name, Vocalizer shows others how to pronounce it.

³

The benefit of using NameShouts’ API is that it makes the implementation as quick as possible. In its simplest usage, there are only two steps required to add it to a website.

First, you must include the Javascript library before the closing </body> tag within the code of your website:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vocalizer/1.0.0/vocalizer.min.js">

Next, all you have to do is wrap your first name in a <span> tag with the specified attributes:

<span data-source="auto">NAME</span>

Note: The latest version of Vocalizer.js is available on CDNJS⁵, or you can choose to download⁶ and serve the files from your own server.

As you might have noticed, the data-source attribute is set to auto in the example above. This attribute determines the source of the audio file.

When data-source is set to auto, the library will use the NameShouts API. This option is completely hands-off. Vocalizer will automatically search NameShouts’ name listing and feed in the audio file from their servers.

The alternative option is to manually record and use your own audio file instead of the API. In this scenario, the data-source attribute should be set to the path to your audio file. For example:

<span data-source="assets/audio/daenerys.mp3">Daenerys</span>

There’s a chance that NameShouts’ library does not have the pronunciation for your name, and in that event, you should use your own audio recording or Vocalizer won’t be doing its job!

How It Works Link

The actual source code for Vocalizer.js is about eighty lines of code. Let me explain exactly what’s happening under the hood.

When the user wraps his or her name within the <span> tag with the class vocalizer, a Javascript function stores that name into a string:

var name = document.getElementsByClassName('vocalizer'); var names = []; for (var i = 0; i < name.length; i++) { var data_source = name[i].getAttribute("data-source"); names[i] = name[i].innerHTML.toLowerCase().replace(/W/g,'') var request = buildRequests(names[i]); fetchAudio(data_source, request, i); }

We perform this inside of a loop in case there are multiple usages of Vocalizer on the page.

Next, a conditional checks the data-source attribute to see if you’re opting to use the NameShouts API to source the pronunciation or if you’re using your own audio file:

var data_source = name[i].getAttribute("data-source"); if (data_source == 'auto') { /* code for using NameShouts API */ } else { /* code for using your own audio file */ }

The buildRequest() function that we call inside that loop returns the path for the endpoint based on the user’s name.

function buildRequests(n) { return request = 'https://www.nameshouts.com/api/names/'+n; } 

From there, we pass the request to the fetchAudio() function and make our xmlHttpRequest to the NameShouts API.

var xhr = new XMLHttpRequest(); xhr.open('GET', request, true); xhr.onload = function (e) { if (xhr.readyState === 4) { if (xhr.status === 200) { var audioPath = JSON.parse(xhr.responseText).message[names[i]][0]["path"]; var audio = new Audio(BASE_URL+audioPath+'.mp3'); audio.playbackRate = 0.75; name[i].addEventListener('click', function() { audio.play(); }, false); } else { console.error(xhr.statusText); } } } xhr.onerror = function (e) { console.error(xhr.statusText); }; xhr.send(null); 

NameShouts’ API returns a JSON object that contains the name of the audio file corresponding to your name. From there, we combine NameShouts’ base URL (where the audio files are stored) and the audio file’s path.

In the event the name you are targeting does not exist within the NameShouts API, the plugin will throw an error.

A solution to this situation would be to record and link your own audio file. Setting the data-source attribute to a file path designates your own audio file. In that case, we just create an Audio element based on the file path from data-source:

var audioPath = sourceType; var btn = document.getElementsByClassName('vocalizer'); var audio = new Audio(audioPath, function() { 'Error!'; }); 

On the front end, an audio button appears after the targeted name. The cosmetics are added with CSS styles on the pseudo-element :after on the <span> tag.

Finally, we add a click event to the audio button:

btn[i].addEventListener('click', function() { audio.play(); }, false); 

Other Use Cases Link

Example: Blogs and News Publications Link

Vocalizer’s use case can extend beyond just personal websites. I can see blogs and digital news publications begin to adopt the plugin, as well.

⁷

Imagine you are browsing news stories on Vox.com¹⁰ and you see the name of a political figure or a region of the world with a name in which you are unfamiliar. In that situation, Vocalizer could educate you on its pronunciation. In theory, this would better equip you to discuss these current events and issues. No one wants to sound uninformed.

Example: Social Media Platforms Link

Another hypothetical use case could be on social media websites. LinkedIn comes to mind for its role in facilitating professional connections.

¹¹

In an age when people often connect with each other via social media platforms, such as Facebook, Twitter, or LinkedIn, prior to meeting — a tool like Vocalizer could prove useful.

Unbeknownst to me, Facebook recently rolled out a similar feature that automatically generates audio to enunciate names.

¹⁴

It’s nice to see mainstream platforms focus on these types of accessibility features. Unfortunately, there is no guarantee that autogenerated playback will be correct. Facebook’s pronunciation tool mangles my last name.

Challenges Link

With every potential solution, there are problems. Vocalizer faces issues of its own. The main issue is that two people with the same name do not always pronounce their name in the same way.

Often, a person’s origin language dictates the pronunciation of their name. For example, the name José in Spanish is pronounced HOH-SEH. In French, the same name is pronounced JOO-ZE. Vocalizer’s current implementation does not cater to these circumstances unless you opt to use a custom recording.

Pushing Accessibility Further Link

In the last few years, web evangelists have emphasized the importance of web accessibility. Most accessibility functions cater to people with physical and cognitive disabilities. I believe there is a lack of attention in regards to inclusion and cross-cultural accessibility.

Though unintentional, in a way, Vocalizer seeks to enable cultural accessibility. Technology companies continually strive to diversify their workforces. We’re seeing heightened mobility in our professional lives. As a result, multiculturalism is becoming more and more prevalent.

For what it is — I hope Vocalizer helps familiarize people with names from other cultures or ethnicities.

The Future Of Vocalizer Link

There are a few features and improvements I would like to make on future versions of Vocalizer.js:

• Language support for names with alternate pronunciations
• More graceful handling of implementation errors
• Adding a fallback for the situations when a name is not in NameShouts’ API
• Ability to easily customize audio buttons styles

To further expand on the idea, I launched a free, web-based version of Vocalizer at Vocalizer.io.¹⁷

The web tool allows you to record your name in the browser. Then, it generates the code snippet required to add Vocalizer to your website.

Conclusion Link

A 2014 study¹⁸ found that people with easier-to-pronounce names are deemed “more trustworthy”. I built Vocalizer to solve a problem that has persisted all my life. Now, I hope this will prove useful to others, helping them solve the same problem.

Thanks so much for reading! Please don’t hesitate to tweet to me¹⁹ if you have any questions, comments or feedback.

(vf, aa, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/wp-content/uploads/2016/12/The-audio-pronunciation-button-large-opt.jpg
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/12/The-audio-pronunciation-button-large-opt.jpg
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/12/implementation-of-Vocalizer-large-opt.jpg
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/12/implementation-of-Vocalizer-large-opt.jpg
5. 5 https://cdnjs.com/
6. 6 https://github.com/atifazam/vocalizer
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/12/example-of-how-Vocalizer-could-be-used-large-opt.jpg
8. 8 http://www.vox.com/
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/12/example-of-how-Vocalizer-could-be-used-large-opt.jpg
10. 10 http://www.vox.com/
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Potential-usage-on-social-media-websites-large-opt.jpg
12. 12 http://www.linkedin.com/
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Potential-usage-on-social-media-websites-large-opt.jpg
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/12/fb-large-opt.png
15. 15 http://www.facebook.com/
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/12/fb-large-opt.png
17. 17 https://www.vocalizer.io
18. 18 http://news.uci.edu/press-releases/uc-irvine-led-study-finds-truthiness-in-peoples-names/
19. 19 https://www.twitter.com/atifazm

↑ Back to topTweet itShare on Facebook