Tag Archives: magazine

Thumbnail

Text Editing Tips And Tricks Roundup




Text Editing Tips And Tricks Roundup

Rachel Andrew



We asked the Smashing Community for their favorite text editing tricks, shortcuts, and features that save them time. Here’s a roundup of what we’ve found quite useful along with a couple of other suggestions you may find handy.

Favourite Keyboard Shortcuts

Many of you have favorite keyboard shortcuts. Some of these will be editor or operating system specific, although in many cases you’ll be able to find a similar shortcut with the tools you are using. I’ve rounded up a few from the community below.

Ste Grainer shared a tip about the movement and selection shortcuts:

The basic movement/selection shortcuts that many don’t know about:

Hold Cmd + Arrow Key to move to the beginning/end of a line or top/bottom of a document.

Hold Opt + Arrow Key to move word to word horizontally and block to block vertically.

Shift to select while doing those.

From Jo Frank:

Select all occurences of current selection (Ctrl + SHIFT + L in VSCode) and duplicate line/selection which I set up as Ctrl + D.

Loris Gillet shared a few favorite shortcuts for hopping around or deleting text:

+ forward/back arrows allows to jump to the next word instead of the next letter
+ up/down arrows allows to jump to the beginning/end of the paragraph
+ Backspace deletes the whole word instead of letters by letters.

Many of the suggested tips came from web developers — tips for the editors they used most frequently. We also received suggestions for Android Studio from Maher Nabeel:

In Android Studio:

  • Ctrl + D — Duplicate line
  • Ctrl + Y — Delete line
  • Ctrl + W — Select block
  • Ctrl + O — Override methods
  • Ctrl + ALT + L — Reformat code

Editor Shortcut Cheatsheets

As we can see from the tips already posted, learning the keyboard shortcuts for your editor saves a lot of time. It is always worth taking a look at what is available for your editor, as learning a few of these shortcuts can save a lot of typing over the course of a day writing code.

On Twitter, Tobin Saunders recommended the Atom Editor Cheat Sheet which is a detailed list of shortcuts for Atom. I also took a look at what was available for other frequently used editors.

Visual Studio Code

The VS Code website has a number of downloadable cheatsheets in PDF format, if you find it useful to keep a cheatsheet printed out on your desk.

Joel Reis noted that if you are switching to VS Code from Sublime Text, Atom, Vim or Visual Studio, then you can download the keymap extensions. This means that you can maintain the keyboard shortcuts from your previous editor. This tip was also noted on Smashing Magazine earlier this year when Burke Holland shared with us some of the things that you might be surprised to find that VS Code can do, in his article “Visual Studio Code Can Do That?

Sublime Text

A good selection of Sublime Text 3 shortcuts for Windows, Mac, and Linux can be found here.

We also have an article here on Smashing Magazine in which Jai Panda shares some of his favorite Sublime Text Tips and Tricks.

Customizing Your Environment

Our keyboards and default computer settings are designed more for typing text than typing code. Some commenters have made changes to their defaults in order to make it faster to type the things they most often need to type.

Alex Semenikhine made this suggestion:

I minimize the number of times I have to hold Shift and press a button. If I make brackets (( )) far more often than I use 9 and 0, I customize the keyboard to reflect that, my 9 is ( and Shift + 9 is 9, etc.

Paul van den Tool sets his ‘Key Repeat’ and ‘Delay Until Repeat’ to their highest setting in order that his cursor just “flies across the screen when using the arrows.”

Jarón Barends told us how he, “created Alt + ; as a shortcut to insert a semicolon at the end of a current line.”

Using Emmet

A number of people mentioned the text expansion system of Emmet. If you hand-code a lot of HTML and CSS then Emmet can save you a great deal of typing time. When writing HTML, Emmet abbreviations will be familiar to anyone who understands CSS. For example, if you want to create an unordered list inside a div element, you could use the following:

div>ul>li

Which would then turn into:

<div>
  <ul>
    <li></li>
  </ul>
</div>

The abbreviation is exactly the selector that would select the li in CSS. A div with a ul as a direct child, and a li as a direct child of the ul. Take a look at the Emmet Cheat Sheet for more examples.

Emmet is built into VS Code and is available as a plugin for many other editors.

Use A Clipboard Manager

Erik Verbeek suggests using a clipboard manager so that you can grab copied code from the history. He suggests using ClipMenu for OS X, which sadly seems to be discontinued.

Similar tools include:

Many editors also include a clipboard history for copy and paste actions within the editor. On Twitter, @codevoodoo noted that Webstorm had such a feature. There is a Clipboard History extension for VS Code and a package for Atom; Sublime Text has this built in, as this tutorial on the Sublime Text Clipboard History explains.

There were a few specific tools recommended in the comments, so here is a roundup of useful tools you may not have heard of.

Vim

People who like Vim, really really like Vim. It certainly comes with a learning curve, however, if you are very keen on optimizing your keyboard editing then the time invested is likely to be worth it. As Jess Telford points out, you can do things like type 13k to move the cursor 13 lines up.

Take a look at the Vim Cheat Sheet for a list of commands. You can use Vim emulation in many other editors. The key mapping mentioned earlier for VS Code include mappings for Vim, and there is a plugin available for Atom as well.

Prettier

Prettier is an open-source opinionated code formatting tool. Using Prettier ensures that all code is formatted to a consistent style. This is incredibly helpful when working in a team as it means that a consistent style is enforced, without anyone really needing to think about it.

There are downloads available for several editors, in order that you can use Prettier within whichever environment you chose.

AutoHotkey

I had not heard of the tool AutoHotkey until this suggestion from @Hobbesenero. AutoHotkey is an automation scripting language for Windows. Using the scripting language you can create shortcuts for common tasks, for example, to insert a template.

Converting Text Formats With Pandoc

One of my favorite tools is Pandoc. I use Pandoc when I need to convert one text format to another. One of the really useful things Pandoc can do is turn HTML or Markdown into EPUB format. I frequently do this in order to turn a set of notes into a file I can read using iBooks on my iPad. I do this in order to have an easily accessible set of notes for my workshops or to turn lengthy documentation into an easy to read offline format to read on an airplane.

Pandoc can convert from and to many different file formats. In addition to creating quick EPUB files, I also use it to convert copy from Word documents to Markdown or other useful formats. This can be very useful if you get some messy copy from a client that needs to be converted to enter into a CMS.

TextExpander And Typinator

TextExpander is available for MacOS and Windows and is a tool that helps you create snippets which can be inserted using keyboard shortcuts or common abbreviations. TextExpander was recommended by Anders Norén. If you prefer a solution that isn’t a subscription service then you might like to give Typinator a try.

These text expansion tools can be useful outside of writing code. If you often find yourself typing the same information in answer to emails or support requests, creating a shortcut to insert that text can quickly pay dividends in terms of time saved.

Textwasher

Recommended on Facebook by Dennis Germundal, Textwasher is a very simple tool for cleaning any formatting from text.

Add Your Suggestions In The Comments

There are a vast number of ways to enhance productivity in the tools we use every day, and it is also incredibly easy to completely overlook them. I hope that among these suggestions there will be something for you to try out. Or perhaps this will be a prompt for you to dig a little deeper into the documentation for your editors and other tools. I have certainly been inspired to do so.

If you missed the tweet and have some great tips to share, then add them to the comments. We’d love to hear them!

Smashing Editorial
(il)


Continue reading:

Text Editing Tips And Tricks Roundup

Thumbnail

Linkbuilding: The Citizen’s Field Guide




Linkbuilding: The Citizen’s Field Guide

Myriam Jessier & Stéphanie Walter



Before buying followers on Instagram was a common practice, before Russian trolls made fake news an Olympic sport, we had linkbuilding. Today, we still have linkbuilding, its just that you haven’t noticed it — or have you?

Welcome, to the Twilight Zone, dear folks. You are about to go through a linkbuilding crash course. This will help you preserve your website, detect potential problems in content or consider why you keep receiving strange emails from strangers wanting to get their links all over your content.

Rod Sterling in the Twilight Zone TV series.
Rod Sterling in the Twilight Zone TV series.

Note: If you are a website owner, a marketer, a blogger, a social media specialist or a regular user of the internet (and everything else in between)…you should take the time to read this!

What Is Linkbuilding?

Links are basically a popularity contest. Linkbuilding is the process of gaining links to your online content in order to boost your visibility in search engines.

Through links, search engines can analyze popularity but also other vital metrics such as authority, spam, trust. Google uses links to establish which websites are popular with users, are trusted by users or are seen as spam by users.

Key Signals That Influence The Value Of a Link

You have the stock exchange, and then you have the link exchange. All links are not created equal. Some of you may get flooded with spammy requests while others are reading this article wondering why they’ve never heard of linkbuilding. Some websites are more valuable and thus more targeted than others by linkbuilding attempts. Here are some key metrics that help establish the value of a link:

Global Popularity

The more popular a website is, the more a link from that site will have value. Wikipedia or Huffington Post have a lot of websites pointing to them which is a signal for search engines that these websites are probably important or at least very popular. Here is an example of linkbuilders trying to sell links on well-known publications that may not be aware their platform is used to peddle paid links.


Large preview

Topical Or Local Popularity

Links that are topic-specific and highly related to your subject matter are worth more than links from general or off-topic sites. A link from a dog training business pointing to an SEO training website (like the one I run) will have less value than if Smashing Magazine (a website recognized for its topical authority on the web) will. Which means that placing a link on “SEO training website” would have been an amazing opportunity for me.

Placement In The Page

If a link is “editorially placed”, meaning that it looks like something the author placed in the content naturally, then Google will give it more credibility. If the link is something someone with a shady profile shared in the comments, the impact won’t be the same. The position of a link within a page is important. Most linkbuilders will always negotiate for a link at the beginning or in the middle of your main content. Links in footers and sidebars do not have the same value.1

1The Skinny On Black Hat Link Building,” Link Building For SEO: The Definitive Guide (2018 Update), Backlinko

Types Of Links Matter

A text link tends to have more weight than an image link. Furthermore, most people forget to provide an ALT attribute for their images, which means that Google will have a hard time getting context regarding the link placed on the image. Links can also be placed in iframes.

Anchor Text

You know what would be an even better anchor than “SEO training website” for me? I would love to also push a local signal on top of a topical one with “SEO training in Montreal” Why is that better than placing a link on a random word like “platypus”? Well, because one of the strongest signals used by search engines is anchor text. What is anchor text? Anchor Text is the visible, clickable text in a hyperlink. For most of us, it’s the blue text that’s underlined, like the ones you see below. As you can see, Smashing Magazine has made it a mission to explain why links should never say “Click Here”.


Large preview

Trust Score

The internet is made up of a lot of spam. In order to stay relevant to users, search engines use systems that analyze link profiles and provide a trust score. Earning links from websites with a high Trust metric can boost your own scoring metric and impact your organic visibility. That’s why most SEO experts will favor non-profit organizations, universities or government websites. Those websites benefit from great Trust Score normally. I call the trust factor a trust score because each SEO tool has its own nomenclature (TrustRank, TrustFlow, etc.). This is the Trust Score of Smashing Magazine:


Large preview

So of course, you can imagine that this makes Smashing Magazine a very desirable website to have a link on. This leads to hilarious situations like this comical email by a link builder trying to buy a link from me:


Large preview

Link Neighborhood

The notion of a “link neighborhood” means that if a website is spammy and links to another website, Google will be suspicious that the other website is spammy as well. This is important because sometimes, websites are targeted by negative SEO attacks. One of the quickest ways to sabotage a competitor’s organic visibility is to have a lot of spammy websites pointing to its website. This is where the notion of link neighborhood becomes incredibly important.

Freshness And Pertinence

Link signals tend to decay over time. That’s why it’s important to keep earning new links over time. This helps establish the pertinence of a website. But you have to be careful: If you keep earning links from hype websites that aren’t necessarily trustworthy, your website could be seen as pertinent but not trustworthy. It’s a fine balance between authority and pertinence.

Social Sharing

Search engines treat socially shared links differently than any other type of link. The SEO community is still debating how strong of a signal social links are.

The Importance Of A Link

Getting a link from a website that is considered a reputable and expert source of information is a highly valuable asset. Let’s use this article to do some good and give a link to someone in Web that deserves it. Meet Nicolas Steenhout, a great accessibility consultant in Montreal doing great work. Bonjour Monsieur! I hope this link helps give your work more visibility!

Common Linkbuilding Tactics

Here is a quick recap of what happens to some of us on a daily basis:

  • We receive some type of communication trying to get us to put things on our websites for strange reasons we don’t understand.
  • Someone requests or demands, depending on how combative their writing style is, that we guest blog for free on platforms that we do not know, trust or like.
  • We get folks peddling SEO services. They use scare tactics to push you to pay them for their services.
  • Websites get hacked for links…or worse.

Here are some of common linkbuilding tactics you should be aware of:

  • Broken linkbuilding
    If you notice a broken link in a quality website, you can email the owner and say what page the link is on and what could be a solid resource to replace the current webpage that’s no longer available. Of course, the replacement you offer just so happens to be from your own website that you want to rank in search engines.
  • Comment spam linkbuilding
    There is a reason why strange spammy comments keep trying to peddle certain products or websites – it’s called linkbuilding.
  • Negative SEO
    If you can’t be first because you are the best, then buy a bunch of links to make your competitors go down in Google. That’s basically what negative SEO is. Here is a real life case of negative SEO if you want to see how this can happen to any type of website owner, not just big startups or famous people.
  • Sponsored content linkbuilding
    I have had many bloggers complain to me because they had been duped by agencies “buying” a sponsored article for a year on their blog. They discovered later on that what the company actually bought was a link that they could control.
  • Hacking websites
    Oftentimes, websites will get hacked for SEO purposes. Because if you can’t rank honestly, then parasite good websites to rank no matter what! That’s the philosophy of some ruthless search engine optimization specialists. If you gain access to a website, you can place any link where you want, for as long as you want. As a website owner, it’s important that you secure your website and make sure nothing strange is going on in your content. Want to see what a hacked website can look like? I recently had a case where a very legitimate website in the IT sector was hacked to host and promote a discount NBA jersey store. This is the what the website looks like:


    Large preview

    However, what they were not aware of was that the website had been hacked. Upon analyzing their incoming links, it was clear that this IT focused website was known for “cheap NBA jerseys” and “wholesale NBA jerseys” than anything else. I wondered why, and found a lot of pages were receiving links:


    Large preview

    The wonderful developer team cleaned up the damage and made sure to patch any security breach they found. However, this specific hacker thrives in websites that have been hacked and are full of malware such as this one:


    Large preview

  • Link outreach
    If you get bombarded with emails asking you to review a product or add a link in your blog article, chances are that you have been targeted during a link outreach campaign. You can always decline or simply not answer this unsolicited email. On the flipside of the coin, if you get offers to place your links in some highly regarded publications, know that this is an offer the person is making you to place your links on certain website.
  • Guest blogging
    If someone asks you to create an article on their platform, the often want free quality content with your notoriety to promote it in order to garner links. If on the other hand, someone offers you free content for your website, chances are that it is for linkbuilding purposes.
  • PBN
    A Private Blog Network is a network of websites with great SEO metrics used to build links to a main website in order to help it rank higher in search engines. It means that someone usually ranks multiple websites high in Google in order to use them to place links that will boost the visibility of a chosen site. Google does not appreciate PBN efforts or link exchange efforts and routinely penalizes networks of websites.
  • Creating awesome content
    There are many linkbuilding tactics that push for the creation of tools, content or other types of media that is so good, so useful and so relevant that they will naturally garner links from other website owners. We won’t detail them here but they usually work well because they provide something useful that deserves to be shared with others!

The Hidden Survival Guide To Linkbuilding

Read this part if you are a website owner, a UX, a customer, a visitor, a blogger, my friend Igor (hi Igor, please read this!) or anyone else using search engines regularly to find information. Let’s get started by giving you access to the official Google guidelines on the matter. Website guidelines vary from search engine to search engine. You can check each search engine’s guidelines but oftentimes, the broader concepts of what qualifies as a good website in terms of SEO are the same.

The Ugly Truth: Not All Linkbuilding Is Bad

Google clearly disagrees with paying for links or selling links. However, keep this in mind: not all linkbuilding efforts are bad. Earlier in this article, I gave a shout out to a friend of mine because I know that it will help give his website some visibility in search engines. Offering a link is a way to show your support for a product, an article, a tool, a website, a person. It is a vote of confidence in their favor. If you go out of your way to do it, technically, that counts as linkbuilding. Linkbuilding is also a way to make money. Some website owners may leverage linkbuilding to earn money despite legal regulations and Google’s guidelines.

If You See Something, Say Something!

You can signal bad links and anything strange going on that may be related to a hack, malware or even paid links to Google. You can report bad links very easily. If you want to review the entire list of what constitutes a bad practices in Google’s eyes, you can head on over to this official documentation.

Make It Clear If You Accept Or Refuse Linkbuilding Offers

If you are a blogger, make sure you are aware of your rights and responsibilities when it comes to linkbuilding efforts. Make sure to update your key pages to reflect your linkbuilding policy. This could be done in the about page, the services page if you offer services or the contact page.

Take the time to specify if you accept of refuse commercial or affiliate links in the content of a guest blog post for example. This will also help avoid nasty linkbuilding surprises in the future.

Nofollow: You Can Have Sponsored Content And Still Respect The Guidelines!

So what do you do if you realize that someone is using your website to place a link? Well, if this is something that was done legally, you can fix the situation by placing an attribute on your link that will signal to search engine bots not to follow the link. A nofollow link is a way to make sure that links from sponsored posts are not going against Google’s guidelines. This type of link cancels the linkbuilding benefits as Google gives them no love because the nofollow tag in the code signals “do not take this link into account.” Website owners and administrators should know how to make a link into a nofollow link as it can be done quickly and easily.

This is what a nofollow link looks like in the code:




Large preview

So, what do you do if you are asked for a link in exchange for a review?

This is the most common way most bloggers are approached in order to get links placed on their websites. Here are some guidelines for bloggers that receive free products in exchange for reviews.

If you think your website is hacked for links, you must first secure your website and do a security audit. The second step would entail cleaning up the links and the third step includes submitting a disavow file to Google that signals any shady domains that may be pointing to you because of hacker activity.

Red Flag #1 : You Start Seeing Your Organic Traffic Go Down

If you haven’t changed anything and you see your organic traffic go down, make sure it’s not a link issue. You could have suffered an attack. We recommend you use the Google Search Console tool available to all website owners and administrators. You must validate that you own the website and then, you will be able to receive an alert if Google detects something is very wrong with your website. Careful, if something is wrong with your website, it could mean a penalty and cause a substantial organic traffic drop. To know more about the types of penalties and alerts Google Search Console provides, you can read an article on this topic or check the official documentation.

Red Flag #2: Downloading A Premium Theme Or Plugin For Free

This is a very underhanded technique to obtain links. Some individuals will pay for a premium theme or plugin or software and offer it for free on torrent websites or forums where free or hacked versions of premium products are made available. When someone downloads the theme and uses it on a website, the doctored version of theme is used to place links in the website. Oftentimes, the owners never notice that their website is hosting parasite links.

Red Flag #3: You Start Getting Strange Feedback About Your Website Or See Strange Content Appear

If your readers, customers, visitors or even Google Search Console start telling you about strange content or links showing up on your website, this means that it’s time for an SEO audit and a security audit to assess the damage done to your website. Something tells me that Schneiters Gold did not plan on ever offering the BEST Online Viagra OFFERS…




Large preview

Red Flag #4: You Get A Google Search Console Warning

If you get an email from the Google Search Console team telling you about some spam issues or other problems that cause you to break their guidelines, you should investigate immediately the source of the problem and fix the issue fast or you could risk a penalty.

Red Flag #5: The Link Looks Like It Could Be A Hidden Affiliate Link Or A Redirect

Always check the links before placing them. Click the links and see where they lead. You could be provided a link that looks like a high-quality content but instead, it points to a spammy page.

Make sure to ask if a link is an affiliate link. Affiliate links are links that contain information that helps track a sale back to the person who promoted the product. These affiliate partners get a cut each sale that is attributed to them. Companies like Amazon and Forever21 among others have affiliate programs. You do not want someone promoting a product purely for money and you do not want to lose the trust of search engines and human visitors.

Advice For Linkbuilders, Growth Hackers And Anyone Looking to Gain More Visibility In Search Engines

Vet a website before getting in touch

Go ahead, click on the link and check out the website before you do anything else. Otherwise, you will end up contacting your competitors, unrelated blogs, spammy websites, etc.

Read the advertising page

Most websites have a page, it can be the contact, advertise or about page, that lists the specs and guidelines to collaborate with the websites. Respect what’s written on there! Do not bother folks that clearly said they do not want to be contacted for links. No, you are not the one that will make them change their minds. Yes, we’re sure.

Avoid metric blindness

My very good friend Igor, proud owner of Igor.io, gets contacted all the time by linkbuilding companies. Why? Because their website was once upon a time (before they removed their incredible archive of technical articles) had incredible metrics. For reference, Igor has a fully responsive, accessible website and it looks like this:


igor.io


Large preview

But Igor’s weblog’s metrics look like this (and they looked even more enticing to SEOs the last time I checked):




Large preview

This meant that a lot of companies wanted to contact the owner of a website that had more than 1000 high-quality websites referring to it. But if they had bothered to check out Igor’s website, they would have seen that nothing was on there. Back in the days, this website just read: igor’s weblog and the archive was hidden in the code. You had to know where to look for it… or you would find it very easily if you happened to be a bot. That’s why the metrics were the so high: only a bot and those in the know would discover and share Igor’s content.

Know who you are talking to

I get emails telling me to ask my boss if the company can place a link on my website. Now, quick reminder, if you go on myriamjessier.com and contact me, the person with an email that contains the words myriam + jessier, chances are that you are talking to the owner herself, right? Which leads me to another point: write my name correctly please and do not address me as sir, or dear, or dear sir. This is a common issue that Stéphanie Walter has as half of the Internet doesn’t seem to know how to spell her name.




Large preview

Not knowing or ignoring legal guidelines and Google’s guidelines

If you do not disclose why you are asking for a link and that there could be a risk to a website selling you a link, then you are not being transparent.

Bonus Tip

Don’t reach out to experts who do what you do for a living. I receive linkbuilding offers (buying and selling) from other search engine optimization “specialists” all the time. If you found me on the web and are offering to sell me links because my website isn’t visible enough, then maybe, just maybe, my SEO efforts are working no?

Conclusion

We hope that you learned a few things about linkbuilding. Here is a quick recap:

  • There’s money in the banana stand and in linkbuilding.
  • Not all links are equal, key metrics are : authority, freshness, placement, relevancy.
  • People will go to extremes to get links so if a “great deal” is offered to you, look for the hidden link in there!
  • Secure your website to avoid SEO problems. If you make it hard work for hackers, they will often give up and move on to an easier prey.
  • If you want to help someone out, make sure you give them a link with a good anchor! It really helps!
Smashing Editorial
(ra, yk, il)


Read original article:

Linkbuilding: The Citizen’s Field Guide

New Front-End Adventures in Responsive Design

Full-day workshop — June 28th With HTTP/2, Service Workers, Responsive Images, Flexbox, CSS Grid, SVG, WAI-ARIA roles and Font Loading API now available in browsers, we all are still trying to figure out just the right strategy for designing and buildings responsive websites efficiently. We want to use all of these technologies and smart processes like atomic design, but how can we use them efficiently, and how do we achieve it within a reasonable amount of time?

Read More:

New Front-End Adventures in Responsive Design

Thumbnail

Smashing Book 6 Excerpt: Bringing Personality Back To The Web




Smashing Book 6 Excerpt: Bringing Personality Back To The Web

Vitaly Friedman



Generic web layouts have become somewhat of a misnomer in conversations circling around web design these days. We’re bored and slightly annoyed by how predictable and uninspired most web experiences have become. Not without reason, though. Every single landing page seems to be a twin of pretty much every other web page.

In the header, a compelling hero image with a short main heading is followed by a lengthier subheading. Beneath them, uniform blocks of media objects are alternated — an image and a few paragraphs of text. First, text on the left, image on the right; then image on the left, text on the right. Rinse and repeat. Rounded profile photos and a square grid of thumbnails complete the picture, with perfect shapes perfectly aligned along the 12-column grid. The only variations come from sporadic parallax transitions and notorious carousels, positioned at the top or bottom of the page — or perhaps both.

It’s not that somebody imposed these rules or limitations on our creative output; usually they originate from good motives and the best intentions. After all, one of the main tenets of web design has always been creating a subtle, almost invisible and functional interface — an interface that doesn’t make users think, where less is more, and form follows function, where simplicity prevails — an interface where everything feels just right.

Yet when everything is structured in a predictable way, nothing really stands out. Given how remarkably similar names, logos, icons, typography, layouts, and even shades of gradients on call-to-action buttons often are, it’s not surprising our users find it difficult to distinguish between brands, products, and services these days.

Very few people miss the golden times of the infamous Flash, with its strikingly experimental layouts and obscure mystery-meat navigation. Admittedly, in many cases the focus has shifted from creating an experience to merely providing content in a structured form. Yet unlike in those good ol’ days when we talked about how wonderful or horrible websites were, today most experiences are almost invisible, making it exceptionally difficult to connect emotionally with them.

If I asked you to think of a recently visited website that left a lasting, memorable impression on you, or what websites you truly love and admire for their unique design, or what website had a truly remarkable personality, would you be able to answer these questions immediately? Would you be able to provide more than one or two examples? Chances are that you won’t.

Not every website has to be unforgettable. It’s not that memorable websites automatically perform better, or hit better key performance indicators. However, if you want your product or service to stand out in a highly competitive and challenging environment, you need to be different in some way. Many of us would consider this to be the task of the marketing team. After all, they are supposed to place the product in the right light, at the right spot, for the right audience, at the right price. Yet in a world where many digital products are fairly usable and feature-rich, this would be a daunting undertaking that would often require months of extensive research and testing without the guarantee of a successful outcome. And even then, unless you are extremely good at predicting and shaping the next shiny big thing, it might not be good enough.

Customers are used to and expect decent experiences. They aren’t always fast or straightforward, but simply because of the sheer number of offerings, there are always decent tools and services out there that would be good enough.

We tend to believe we rationalize our decisions to extremes, choosing the best candidates, but it’s not necessarily true. According to well-known Herbert A. Simon’s satisficing theory, we tend to prefer the first option that meets an acceptability threshold, just because we don’t know if we can find a better option or how much effort it would take. We rarely study the entire spectrum of options in detail (and sometimes it’s nearly impossible), and as a result, we satisfice with a candidate that meets our needs or seems to address most needs.

To draw an audience’s attention, we need to be better than “good enough.” Nothing can beat word of mouth, but to get there we need to come up with something that’s worth looking at. What if I told you that there was a shortcut to getting there?

It’s not just about price. It’s not just about features. It’s not just about choosing the right placement of buttons, or the right shades of colors in endless A/B tests. And it’s not about choosing a cute mascot illustration that shows up in email campaigns. In the end, it’s about creating an experience that people can fall in love with, or connect deeply with — an experience that, of course, drives the purpose of the site, but also shows the human side of it, like the personality of the people building it, their values and principles, their choices and priorities.

That means designing voice and tone, interface copy, and embracing storytelling, authenticity, inclusivity, and respect; and all of that while establishing a unique visual language supported by original layout compositions and interaction patterns. Together with clear and honest messaging, these create a unique signature, which, used consistently, makes the product stand out from the rest. This task might sound as daunting as months of marketing research, but it doesn’t necessarily require an enormous amount of effort or resources.

In this chapter, we’ll look into a few practical techniques and strategies that might help you find, form, and surface your personality efficiently. By doing so, we’ll explore how doing so consistently could fit into existing design workflows, along with plenty of examples to give you a good start. But before we get there, we need to figure out how omnipresent design patterns and best practices fit into the equation.

Breaking Out By Breaking In

The creative process isn’t linear. Every single design decision — from colors and type to layout and interactivity — requires us to consider options and evaluate combinations. While the creative process is often seen as a straightforward, iterative process, in reality it’s very rare that we smoothly move from one mock-up to another through a series of enhancements and adjustments. More often than not, we tend to float and diverge, heading from one dead end to another, resolving conflicts and rerouting our creative direction along the way.

Those dead ends happen when we realize we aren’t really getting anywhere with the result exposed on our digital canvas. We’ve been there so many times, we know how to explore uncharted territories and how to maneuver the flanks, and so as we keep sculpting our ideas, we keep making progress, slowly but steadily moving towards a tangible result. Two steps forward, one step back, revisiting what we’ve done so far and refining those precious pixels — based on… frankly, based on intuition and random experiments. Eventually the back-and-forth brings us to a calm, peaceful, and beautiful place — just where we think we’ve found a solution — the solution.

We know, of course, that it’s unlikely it’s going to be the one, though, don’t we?

This journey from nothing to something isn’t just full of conflicting micro-decisions; it’s crammed with unknowns, traps, friction, and difficult constraints, be they of a technical nature or time-sensitive. And at every moment of the process, the beautiful, harmless creatures of our imagination can be mercilessly smashed against the harsh reality of user interviews and client revisions. So we swizzle around from one direction to another in a fertile yet remarkably hostile place. As a result, usually we can’t afford the luxury of losing time, as we know that the path to that deadline, harmlessly floating in the remote future, will be full of surprises and unexpected turnarounds.

To avoid losing time, we rely on things that worked well in our previous projects — the off-canvas navigation, the accordion pattern, rounded profile images, and the holy 12-column grid layout. It’s not for lack of knowledge, skill, or enthusiasm that we fall back to all those established practices — it’s just infinitely more difficult and time-consuming to come up with something different every single time. And because we lack time, we use all those wonderful, tried-and-tested design patterns — all of them tangible, viable solutions for a particular kind of problem. Obviously, this process might be slightly different for different people, but broken down into its essence, that’s what’s happening behind the scenes as we make progress in our designs.

When we started working on the redesign of Smashing Magazine a few years ago, one of the first steps we took was listing and exploring components and micro-interactions. We built the article layout and a style guide, responsive tables and forms, and used many of the established best practices to keep them accessible, fast, and responsive. Yet when putting all these perfect components together, we realized that while they were working well as standalone solutions, they just didn’t work together as a whole. The building blocks of the system weren’t sufficient to maintain and support the system. We had to redesign what we’d built so far, and we had to introduce overarching connections between those components that would be defined through the personality and voice and tone of the new identity.

When we apply design patterns to our interfaces, we essentially bring together a group of loose modules or interactions that lack any connection to everything else. Rather than asking how a particular pattern helps drive the purpose of the experience, we often explore a micro-problem in isolation, putting micro-solutions together. With design patterns, we run the risk of adding a component just because it’s trendy these days — like a parallax-effect, slow and impactful transitions, and fade-ins. By doing so, sometimes we might lose the big picture of what role that component would play at a bigger scale, and how it could be connected to everything else. As a result, we produce soulless, dull, bloated designs with generic compositions and generic visual treatments. That’s how we create something that looks like everything else.

It’s not that design patterns and best practices are necessarily evil, though. They are merely a double-edged sword helping and troubling the visual output.,When applying them, we need to do so carefully and thoughtfully. Whenever you consider resolving a problem with a design pattern, it’s a good idea to ask yourself a few questions:

  1. What problem exactly are we solving?
  2. Is the pattern really the best solution for the problem?
  3. How do people experience this interaction, and what pain points do they encounter while doing so?
  4. How does this component help us reach the overarching goal of the system?
  5. How do we connect that component to the rest of the system — in terms of both aesthetics and interaction design?
  6. Is the solution really universally understood, or do we need to provide more clarity to the design (labels, better copy, affordance, replacing icons with words)?
  7. Is it a good idea to keep the pattern as is at all times? Or is it better to load or adjust it conditionally, perhaps based on the viewport, or how many times a customer has visited the page?

Essentially, we try to break down a design pattern by exploring when and how it’s useful or damaging, and how it helps in achieving our goals. We break out of predictable patterns by breaking in to their nature and understanding why we actually use them. First, we examine the component in its bare, abstract form, without the context of where it’s typically used and how it’s usually designed; for example, rather than thinking of an off-canvas navigation sliding from the left to right, or right to left, we look into the interaction pattern on its own — essentially, progressive disclosure in which content is hidden by default and displayed on click/tap. Then, for every pattern, we explore its usability issues and problems, resolve them, and then style and design the module in a way that feels connected to everything else. That last step could be something as simple as a consistently used transition, or a geometric pattern, or a non-conventional position in the layout. Finally, once everything is in place, we repackage the design pattern and add it to the library, ready to be served for the rest of the system.

Of course, best practices and design patterns are fantastic shortcuts for getting on the right track faster. They let us tap into predictable interactions and sequential knowledge that most of our users will have. In fact, they are as relevant today as they’ve always been. The key is in finding a way to apply them meaningfully within the context of the visual language used throughout the site, and knowing when to break them deliberately to trigger an emotional connection.

Humans Connect To Humans

Do you remember the good ol’ days when we used an omnipresent “we” to make our little web shops appear bigger than they actually were? You might have been the only person freelancing from home in slippers and a bathrobe, or one of the very few people in a small design agency, but that profound “we” made the company sound more serious, and hence more trustworthy, didn’t it? We’ve pretended to be somebody else to get projects we wouldn’t be entrusted with otherwise — and I’ll be the first to admit that I am as guilty of it as everybody else.

These days, when so many things around us are exaggerated and deceptive, authenticity remains one of the few qualities people genuinely connect to. Too often, however, it’s not exhibited through a website at all, regrettably creating a vague image of yet another obscure entity covered with corporate stock photos and meaningless jargon. When every brand promises to disrupt or be different, nothing truly feels disruptive or any different, and this causes alienation and skepticism.

Humans can genuinely connect to brands they trust, but brands need to earn that trust first. Obviously, it comes from reliable recommendations and positive experiences. But as designers communicating on behalf of companies, how do we efficiently elicit trust in people who aren’t yet aware of the brand? As it turns out, trust can also come from the appearance of the brand, which can be influenced by its values, beliefs, principles, and activities. It isn’t easy to fall in love with a company or organization without knowing somebody who admires it almost contagiously. It’s much easier to connect with people whose values you support, and with people who stand behind their beliefs and principles.

If humans connect best to humans, perhaps if our interfaces reflected the values of the people creating them, we might be one step closer to triggering that desired emotional connection. We’ve been there before, of course, and so that’s why we show the people working in the company on a “Team” page or in the footer of the front page, right? Well, let’s look into it from a slightly different perspective.

What if you were asked to describe the personality of your brand? What adjectives would you use? Think about it for a minute, and write them down.

Ready? Chances are high that you’ve come up with common and predictable answers. Perhaps words such as “simple,” “clean,” “strong,” “dynamic,” “flexible,” or “well-structured” have come to mind. Or maybe “attentive to details,” “focused,” “user-centric,” and “quality-driven.”

Can you see a problem with these answers? These words describe our intention rather than our personality. While the former is usually very specific and stable, the latter is usually very fuzzy and ever-changing. The qualities outlined above don’t provide a good answer to the question, as they describe how we want to be perceived, but not necessarily how we actually are. In fact, usually we don’t really know who we are or how we are perceived outside of the comfortable company bubble we find ourselves in.

Instead, what if you asked your colleagues and customers a slightly different question: what they care about most in their work, and what they value the most about the company or the product. Maybe they care about the diversity of talented, motivated co-workers who are knowledgeable and experienced, yet also approachable and humble? Maybe it’s the fact that the company is actively contributing to pro bono projects for non-profit organizations that make a real difference in the world. Maybe because it supports schools and newcomers to the industry by providing an annual scholarship. Or because it ties in the profits with a fair salary bonus for all employees. Or just because it allows you to play with the latest fancy technologies and crazy experiments, and contribute to open-source in five percent of your working time. The company doesn’t need huge ambitions, idealist goals, or a fancy working environment to stand out.

Sidenote: Designing humane experiences means being kind and humble, and emphasizing qualities that matter to the company and to users. That means highlighting privacy, respect, ethics, and transparency, but also reflecting the personality of people working on the product.

Here’s an example. Your company could care deeply about diversity, data privacy, accessibility, and transparent pricing. That would mean your interface is accessible and honest, you publicly take a stand against giving away customer data to third parties, and you include features that support pricing comparison without pushing your agenda over the edge. You could highlight those values prominently along with the competitive pricing tiers, and measure the outcome.

Now, can you spot a similar thread among all of the statements above? Because they come from personal experiences, they seem much more human and relatable than more general and abstract terms you might come up with initially.

That’s why companies like Slack or MailChimp feel so much more tangible than brands like Uber or General Electric. They employ quirky and informal microcopy and illustrations that reflect their human side. They don’t shine through a mission statement or press releases, but through the quirks in the interface and how they communicate publicly, via email, or in social channels. That’s the underlying foundation of a character deeply integrated into the user experience.


MailChimp’s interaction design just before and just after an email campaign is sent out.


MailChimp’s interaction design just before and just after an email campaign is sent out.


MailChimp’s interaction design just before and just after an email campaign is sent out. (Large preview


Slack


Large preview


Slack


Large preview


Slack’s loading messages reflect the personality of the brand and the people working there. That’s the power of copywriting at play.


Slack’s loading messages reflect the personality of the brand and the people working there. That’s the power of copywriting at play. (Large preview

To avoid a generic appearance, you need to define your personality first. That means asking the right questions and finding accurate answers. When conducting user interviews with our readers, we quickly realized they had a quite different perspective on the Smashing brand than we did. Frankly, we confidently described the brand by listing all the usual suspects, the qualities you probably came up with initially. The truth was baffling, though: we couldn’t have been further away from how the brand was actually perceived.

We always wanted the magazine to be a professional, respectable publication with a strong voice in the industry, highlighting important work done by members of the community. User interviews brought up qualities that didn’t really describe that goal in the way we always strived for. Instead, we heard words such as “informal,” “quirky,” “friendly,” “approachable,” “supportive,” “community,” and — most importantly — “cats.”

Now, we never wanted our legacy to be cats, but it wasn’t really up to us at this point. Back in 2012, our dear illustrator Ricardo Gimenes chose to bring a Smashing cat to life as a mascot for our very first Smashing Conference. There was no conscious decision for or against it. We didn’t even properly discuss it, as we didn’t know if we’d host more conferences in the future anyway. This small decision put something in motion that we couldn’t dismiss years later. Because conferences turned out to become one of our central products, we’ve been promoting them heavily in our mailings, announcements, release posts, and social media messages.

Over time, every conference had to put up with a cat illustration of its own, and all these cats were facing our customers over and over again for years. Cat illustrations heavily influenced the perception of the brand without us actively fostering or guiding it. So we had to make a decision: either let the cats slowly fade away into oblivion, or integrate them heavily into the new design. You probably have discovered by now what we’ve settled with. As of this point, we have over 70 quirky and friendly cats freely wandering all over the new Smashing Magazine website.




Large preview




Large preview

However, as much as a mascot can help make the brand more approachable, it’s rarely enough to convey the full story. Interviews also helped us realize how important the community aspect of Smashing Magazine actually was. The words “community” and “people” appeared in user interviews a lot, and not without reason — the magazine wouldn’t exist without humble and generous open-source contributions from people behind the scenes. Our design didn’t really reflect it, though. So we chose to shift the focus slightly towards highlighting the people behind the scenes — authors, editors, and members of the community. Showing people prominently has become another attribute defining our design signature — and that explains why author thumbnails take up such a prominent position in the design, and why we highlight authors publishing on their own blogs or other platforms on our front page.

What does it all mean for you? Ask questions to surface humane qualities that lie in the very heart of the company first. This will give you a foundation to build a visual language on — a language that would translate your qualities to the interface design. Every company has a unique signature in some way, and often it’s reflected through the people working there. Ultimately, it’s just about finding the time and courage to explore it — and to embrace the fact that our flaws and quirks are a part of it as much as our big ambitions and good intentions are.

Personality Is Never Perfect

As designers, we often take pride in being perfectionists. Every pixel has to be polished, every angle has to be just right, and all components should be aligned to the grid. Remember that never-ending discussion about the perfect border-radius on call-to-action buttons? After an eloquent and long-winded debate, the design team eventually settles on 11px, just to switch over to 13px a few months later, just to move back to 12px by the end of the year. In many companies, these changes are prompted through numerous ongoing A/B tests, in which nothing is left to chance, and everything — from assumptions to design decisions — has to be tested and proved first.

We restlessly strive to reach the most effective, the best performing solution — a solution that’s just right. However, aren’t we riding our horses to death trying to improve the same tiny component over and over again, just to find a slightly better variant of it, with all those minimal, microscopic changes?

Espen Brunborg, a creative lead for a graphic design agency in Norway, suggests to never conduct A/B tests alone.1 According to Espen, A/B tests help us reach a local maximum of the user experience, but often they aren’t far-reaching enough to encompass the big picture in its entirety, effectively stopping us from reaching a global maximum.2

1 Jakob Nielsen wrote an article called “Putting A/B Testing in Its Place” back in 2005. The article highlights some of the limitations and downsides of A/B testing; most notably, that it should never be the only method used on a project — observation of user behavior often generates deeper insights.

2 Bill Buxton was probably the first to discuss this problem in his book Sketching User Experiences back in 2007. According to Bill Buxton, designers often end up with a local hill-climbing problem when the design gets plateaued on a local maximum.

That’s why in addition to A/B tests (in which microcopy and colors and positions in the layout are tested), they run so-called A/Z tests, testing an existing “baseline” design against completely different designs. Their differences lie not only in the shade of a button or copy, but in absolutely different layouts and visual treatments. The branding and the core principles remain the same, but pretty much everything else keeps evolving. This allows Espen and his team to reach new absolute maxima in terms of conversion and KPIs every few months.

In one of our conversations years back, Elliot Jay Stocks, who was involved in the 2012 redesign of Smashing Magazine, briefly mentioned one fine detail of his design process that stayed with me for quite some time. He said that a good design possesses one of two qualities: it’s either absolutely perfect in every way, with perfect alignment, sizing, and hierarchy (which is usually quite hard to achieve), or it’s deliberately imperfect in a few consistent ways (which is much easier to achieve). According to Elliot, in a good design there shouldn’t be anything in between. In other words, buttons should either be perfectly aligned to the grid, or not aligned at all — offset by 20–30 pixels and more. Being off just by a few pixels would feel wrong, while being off by 20–30px looks deliberate, and hence less broken.

So what if, instead of chasing the perfect solution for every single component, we ran and tested various expressions of our personalities? In interface design, it would mean entirely different creative directions. Perhaps a multicolumn layout with bold typography, against a geometric layout with a single accent color? What if, rather than seeking the perfect roundness of a button, you deliberately introduced slight inconsistencies? A custom animation on one of the call-to-action buttons, or a dynamic placement of an image outside of the box in which it’s usually supposed to be placed? Or perhaps rotating a subheading by 90 degrees? The personality can be expressed in many entirely different ways, so the task is to discover variations that are promising enough for testing.

A personality is never perfect, and so perhaps our websites shouldn’t be perfect either. What if you set up a publicly visible art board in your company, with magnets representing the qualities on one side, and magnets representing components or visual treatments on the other side, and then randomly clashed one against the other to produce a visual direction for the next A/Z test? Apply perfectionism to the level of detail required to produce deliberately imperfect designs.

This approach won’t always win, but complemented with A/B tests, it might bring you to new heights you wouldn’t be able to achieve otherwise. Ultimately, we want customers to fall in love with their experience and consequently the brand, to form a lasting bond. A deliberately imperfect yet humane interface can help us get there. It requires you to find just one distinguishable quality that nobody else has, and boost it up.

Choose One Thing And Boost It Up

In our interfaces, personality can be expressed through a design signature — a recurring visual treatment, the voice and tone of the copy, or an interaction pattern used consistently from one page to another. It might be tempting to explore a diverse mix of sophisticated, non-conventional treatments that would be seen in the interface miles away from the mouse cursor. However, that’s a recipe for a disastrous experience that prioritizes a designer’s expression over users’ intentions. However bold the personality is, its design signature should remain subtle.

When working with Dan Mall on the Smashing redesign, one interesting detail Dan brought up at the very start of the project was the role of the signature in the final outcome. According to Dan, choosing a few distinct, competing expressions of the personality is often too much: it’s enough to choose just one little detail and boost it up all the way. In more practical terms, that means picking one pattern and using it consistently, everywhere: on every page, and in every user interaction. How do you find that sacred detail? You go back to the roots of the company.

In the very early days of Smashing Magazine, we didn’t have any branding at all. We chose a pretty random WordPress theme, placed the name in Arial, and that was it. Eventually, in early 2007 Ryan Denzel from South Africa designed Smashing Magazine’s logo, which included a letter S tilted by 11.6 degrees. Despite minor alterations in the shade and colors of the logo, we stayed true to the design for over a decade, and with the recent redesign, we weren’t considering changing it. However, when seeking a design signature that would be deeply connected with the brand, we actually took the tilting of the logo very close to our heart — from the very start.

Early design explorations with Andy Clarke used the tilting consistently for every single visual element on the site. This signature carried over to the final design as well. Today, all icons, author images, conference flags, job board logos, illustrations on product panels, and book covers on product pages are all consistently tilted. That tiny detail doesn’t break the experience, yet it lends a unique visual treatment to the design that’s clearly distinguishable from everything else as a result.




Large preview




Large preview

Admittedly, we did redesign the tilting through the process, moving away from 11.6 degrees to 11 degrees, and adding 11px roundness to all components. It was months later that the bold colors and typography and layout came into play, supporting the quirkiness and informal style of the tilted elements — all slowly crawling up into the design mock-ups eventually.

At this point you might be slightly worried that you don’t really have any distinctive element that could be promoted to become your signature. You might not have the tilting or a particular color palette that stands out. As it turns out, anything can become a design signature. In the next sections, we’ll explore some examples and ideas you could use for you own particular situation.

Why Custom Illustrations Work Better Than Stock Photos

Once the qualities of the personality have been identified, the next step is to translate these qualities into a distinct visual language. Initially it happens via color and typography, so when defining the visual style, look out for these qualities in color combinations and type families.

Probably the easiest way to come up with your own design signature is by using custom illustrations designed specifically for the brand. Every artist has their own unique style, and unlike stock images or stock photos that often almost enforce generic appearance into layouts, custom illustrations give a brand a unique voice and tone. You don’t need to go overboard and create dozens of illustrations; just a few would probably do. Think about replacing all the stock photos you’ve purchased with custom illustrations — this should give you a good enough baseline to start with.




Large preview

Atlassian is a wonderful example of an illustrative style applied thoroughly and beautifully at every touchpoint of the experience. The illustrations are more approachable than stock photos. Notice, however, that they rarely appear on a plain background — they are supported by the color palette and typographic choices that complement the illustration style.

Why are custom illustrations not enough to stand out? Because just like many other attributes on the web, illustrative style also follows trends. Compare Atlassian’s style to Slack’s visual language. Yes, the fine details are different, but the pastel color combinations are similar. The illustrations from these different projects could happily coexist within one single website, and many customers wouldn’t notice a difference.




Large preview

A distinct visual style requires further attention to other elements on the page, primarily backgrounds, typography, shapes, and layout. Notice how all of these elements play together on Bond. Illustrations aren’t just added to a blank white canvas — they interplay with the background, text colors, and the layout.




Large preview




Large preview




Large preview




Large preview

Medium uses a collage-like style for all its illustrations on landing pages and help pages. The key is that illustrations are used consistently across pages. They might not make sense to every visitor, but they contribute to the unique visual appearance of the brand.




Large preview




Large preview




Large preview




Large preview

Health insurance is a very competitive and not particularly friendly nor transparent environment for citizens and business. With custom illustrations, subtle animated GIFs, and straightforward copywriting, Oscar, a newcomer to the industry, appears more approachable and relatable.




Large preview




Large preview




Large preview




Large preview

WebConf.Asia is a conference website with vivid color combinations and background, and boxy components designed as if they were three-dimensional. This is enough to set the design apart. The visual treatment produces depth, which is used for speakers, talks, and main navigation.




Large preview




Large preview

Bandenjager uses slanted shapes and compositions consistently on call-to-action buttons, in the navigation, and even in the quantity selector on the product page. That’s their design signature. Notice how even micro-components such as product labels use the same pattern.




Large preview




Large preview

Maru Mori Project uses a tree shape… everywhere, accompanying custom illustrations that highlight the ongoing activities of the foundation.




Large preview

Storytrail lets its visitors explore cities with an interactive guide, complemented with videos and photos. Every single city has its own signature which is a wavy horizontal line, outlining that city’s most important landmark. The cities differ in the curves of the lines, and the design uses lines as a signature for animations, transitions, and arrangement of items in the layout.




Large preview




Large preview

Haufe uses overlapping backgrounds to add more dynamics to the design. The main structure of the grid is derived from the letter H, which is the main character of the company’s identity. All components are laid out on the grid to support that personality trait. A nice play of photos, original compositions, and a variety of geometric backgrounds at once. Haufe’s design system beautifully describes the underlying principle of Haufe’s dynamic grid.




Large preview




Large preview




Large preview




Large preview




Large preview




Large preview

Another way of drawing attention is by adding randomness to your compositions. Rich Cahill’s portfolio contains illustrations split into three vertical parts, randomly offset horizontally and colored with a set of predefined colors. It’s really not that difficult to add a little bit of personality to stand out. It’s a nice example of introducing some chaos in the design language by combining predictable parts of the system in seemingly random, unpredictable ways.




Large preview

Lynn Fisher also adds some randomness to her portfolio. The layout changes completely between different breakpoints, creating a totally different experience on mobile and desktop devices. Even the favicon changes dynamically as well.




Large preview




Large preview

When considering the visual direction of a site, it’s a good idea to consider custom illustration style, backgrounds, typography, and shapes. Establish strong connections between all of these attributes by reusing design decisions, such as the choice of colors and spacing. While doing so, of course, it wouldn’t hurt avoiding predictable options used widely everywhere else. One of the effective ways to achieve this is by keeping tabs on ongoing design trends, then pick the most prevalent one and… smash it to pieces.

Pick A Trend And Smash It To Pieces

When talking about great design, Yves Saint-Laurent, a well-known French fashion designer, once noted that “Fashions fade; style is eternal.” According to Saint-Laurent, to create timeless designs it’s important to take note of trends, yet serve an interpretation of trends through the lens of your own personal style. That’s not what we usually see on the web.

It’s almost ironic that it has become trendy to dislike trends these days, and for good reason: usually their primary purpose is visual embellishment, rather than driving a designer’s intent, and often they don’t add much to the experience beyond friction, confusion, and fancy whistles and bells. No wonder then that designers have started to fight back with “brutalist designs” — websites that aim to exhibit the essence of a website in its unstructured form, exposing the website’s functions to extremes.3

3 It’s worth noting that brutalism in architecture is characterized by unconcerned aesthetics, not intentionally broken aesthetics. When applied to web design, this style often goes along with deliberately broken design conventions and guiding principles.

While doing so, designers often deliberately break design patterns, usability practices, and design trends. At first glance they might appear as designs created with the sole purpose of being different, but because they have a striking personality, they draw attention to themselves. Admittedly, sometimes they seem to be too far-fetched in how they deliberately turn their back on well-established design principles. Not everybody can afford it, and not everybody would feel comfortable connecting such non-conventional aesthetics to their brand.




Large preview




Brutalist designs. A 2018 feature on Elon Musk, published by Bloomberg. Large preview

A slightly more pragmatic strategy, of course, lives somewhere between generic designs and brutalist designs. To get there, you could pick a trend, find a unique perspective and apply your personality to it. For example, if you see many websites using smooth and silky animations, think about how they would fit into your story, and find the twist that would enrich it, and make it more personal. Break down the trend into pieces to understand its mechanics and what’s happening behind the scenes, then twist some parts of it, repackage, and integrate into your design.




Large preview




Large preview




Dropbox rebranding wasn’t received too well. The design is very bold, and very noticeable. As such, Dropbox achieved its goal of being talked about in their 2017 redesign. (Large preview

Instead of using bouncy animations, you could introduce an artificial delay, effectively slowing down the appearance of items on the page. If most profile images you see have a perfect circular shape, try to come up with another shape that would work well for you to display avatars. If most photos are rectangular, think of another shape that might do the job well.




Large preview




Lo-Flo Records uses an artificial delay with geometric placeholders. The website uses many smooth, well-orchestrated transitions that bring shapes to life when content is being populated. (Large preview

Instead of using off-canvas transitions, think about a particular kind of transition or animation that would best reflect your brand. For more corporate entities, a fast-paced transition might work best; for creative projects, a slightly more playful and slow transition might be a better fit. Waaark is a wonderful example of the latter. If all transitions were removed, the portfolio website would look pretty much like every other portfolio out there.




Large preview




Large preview




Large preview

Implement Consulting Group uses a short and subtle geometric animation to highlight the featured article on the site. Foreground and background images are a bit offset and animated, with a geometric shape in the background and a story preview in the foreground. That’s enough to give the experience some personality.




Large preview




Large preview




Large preview




Large preview

Imagine for a second that you have to redesign your ongoing project, but can’t use any basic shapes such as circles, rectangles, or triangles. What would you choose? We all know there is an infinite amount of options, but why is it then that so often we are constrained by highly predictable and heavily used choices? What is neither a circle nor a rectangle nor a triangle? Well, slanted or tilted elements aren’t. Neither are letters and large typography. Nor are custom responsive illustrations or iconography. Nor whitespace, audio, and video. Nor transitions and animations. Nor pretty much any other shape created via a polygon, with content embedded via SVG masks.




Large preview




Large preview




TPS, a Russian real estate agency, uses the shape of its properties for thumbnails, rather than generic squares or circles. Every single property has its own shape. The idea is used consistently for every single property. (Large preview

District0x is a network of decentralized markets and communities. The site uses custom shapes, smooth transitions, and animations to provide a distinct experience. No rectangles or circles. And notice how well the colors, background images, and typography work together on the site.




Large preview




Large preview

It’s not that all basic shapes should be ignored and dismissed from now on, of course. Avoiding basic shapes deliberately is one of the very first exercises we do when we try to come up with a slightly more original art direction. Once you’ve come up with a decent idea without basic shapes, you can start bringing them back sparingly when necessary. Chances are high, however, that you might be able to get away without them altogether.

Do Make People Think

Why is it that when we are puzzling our way around a foreign city and a souvenir shop owner is desperately trying to catch our attention on the street and push a sale, we pass by in haste; yet we slowly walk into a beautifully designed souvenir store that is silent and humble just around the corner? Perhaps it’s because we seek authentic, honest, and respectful experiences, and tend to ignore everything that doesn’t fit the bill. In his fantastic book Blink, Malcolm Gladwell outlined an interesting phenomenon related to how humans value their experiences.

According to Gladwell, we tend to be more satisfied with our experiences when we feel valued, listened to, and understood. Doctors who take a disproportionate amount of time listening, asking questions, and taking notes with their patients tend to get significantly better reviews and higher ratings despite the fact that other doctors might be as proficient and knowledgeable. They might jump to correct conclusions faster, yet their efficiency doesn’t elicit trust and connection in their patients. Of course, primarily we want the problem to be solved, but we also love falling in love with a charming personality, wisdom, expertise, and human kindness.

We know by now that we can enable human connections by embedding compassion into our interfaces. However, these connections don’t just happen overnight — they take time. But where does it leave us in the age of instant gratification and invisible interfaces, when it has become the essence of our job to avoid interruptions and distractions, and create a clear path for customers to follow seamlessly? If we aren’t supposed to make people think, how do we even get a chance to establish an emotional connection in the first place?

We do so by slowing down. Deliberately. By making people think. Not much. Just a little bit. Just enough to make them feel valued, or smile, or get curious. We do so by adding friction. A few bumps here and there, enough to offer a chance of being directly confronted with the personality infused in our interfaces. It might even mean confusing the customer every now and again just to enable a speedy recovery from that confusion with a dash of positive emotion in their eyes. That’s how memorable experiences emerge.

Everything is a little bit off on BAO London — the spacing, the color combinations, the form layout, the hierarchy, the buttons, the cursor, the lightboxes, the illustrations. This consistent breaking of predictable patterns makes the website appear interesting and appealing. Breaking things slowly and deliberately, one component at a time. That’s not a regular restaurant website.




Large preview




Large preview




Large preview

Everything is way off on the Hans Brinker Budget Hostel website, and it’s done deliberately as well. The hostel was struggling to sell rooms as the competition was quite tough in Amsterdam. Rather than improving the design, they made it worse to fit well within their story. If you can’t make it better, make it worse. Even if you don’t have a wonderful product to sell, it’s always possible to wrap a story around it and make it more interesting. Pretty much every element on the page actively makes people confused — from color combination to typography to interactions. It worked though — they are expanding to Lisbon now.




Large preview




Large preview




Large preview




Large preview

Now, of course, not everybody will like it, and some people will find it annoying, confusing, misleading, childish, or just over the top. Very much like we find it difficult to connect to some people, we might experience the same issue with an interface that attempts to show its human side. But isn’t it worth it? Perhaps in times when everything is remarkably similar and doesn’t really stand for anything, it’s worth striving for our product to be genuinely loved by many people for the price of being genuinely disliked by some people, rather than eliciting no feelings at all.

In his “How I Built This” interview on NPR, Mike Krieger, the co-founder and creative mind behind Instagram, mentioned that rather than spending a significant amount of time trying to understand why people abandoned the service, one of the fundamental principles that drives growth is focusing on customers who deeply love your product and stay around for years. By prioritizing existing customers and what they truly love about your product, you might not only attach them to your product, but also boost the word-of-mouth marketing that’s infinitely more effective than traditional landing pages.

It doesn’t mean, though, that we shouldn’t take good care of experiences customers have when abandoning the product, or — even worse — that we should make it harder for them to leave. The humane qualities of the interface should shine consistently through all the touchpoints of the experience — and it holds true for onboarding as much as offboarding. In fact, the latter is often neglected as it isn’t deemed as being that important — after all, at the point when the customer will face it, they have almost abandoned the product.

Offboarding Matters

Just like human relationships sometimes end abruptly and badly, leaving a lasting negative aftermath, so can our relationships with digital products. It’s highly unlikely that a person abandoning a product with a mysteriously long-winded journey through cancellation redirects would praise the product to friends and colleagues. People leave for very different reasons, and sometimes it has literally nothing to do with the service or the experience. They might have moved on, or just want to save money for something more important, or perhaps they just found an alternative that better fits their needs.




Large preview




Large preview

What if at the moment of departure we make them feel deeply valued and understood? Admittedly, with Smashing Magazine’s redesign, we didn’t spend too much time designing the offboarding UX, but it was important for us that the experience fitted well within the overall personality of the interface. When our customers cancel their membership subscription, we greet them with a respectful and even encouraging notice, providing a little gift for sticking around with us for so long, and explaining what happens to their personal data.

The result was surprising: we discovered that customers who cancel the subscription and go through the offboarding UX, sometimes tend to be even more eager to recommend us to their friends and total strangers than some loyal members who stick around for a long time. They just admire how respectfully and thoughtfully we deal with their decision, and that we don’t pull all the shady tricks from the trenches to make it difficult for them to leave.

Make Boring Interesting

It’s difficult to introduce playful elements into an experience which is otherwise very much corporate and formal. However, whenever you are designing a particular interaction, be it as simple as hovering a button, or moving from one section to another, or filling in a form, there is always some room to make the experience slightly more interesting.




Large preview

For example, out of all the wonderful form elements on a given page, what could be less exciting than a “Title” input? Sometimes appearing alongside radio button counterparts or a dropdown, rigorously asking customers for very personal information about their marital status, without any obvious reason whatsoever. And that’s exactly the moment when we can make it shine beautifully. A great way of creating memorable experiences is adding a bit of surprise at the point where it’s most unexpected. Pick the most boring, unnoticeable part of the experience and try to make it interesting. Now, is there a way to make this interaction more interesting?

When creating a new account on Boden, customers are dazzled with a quite unusual selection of options, ranging from Admiral to Squadron Leader and Baroness. Who hasn’t wanted to be a Squadron Leader at some point in their life? This little design decision elicits smiles, and prompts customers to share this gem with their friends and colleagues. By the way, the list of options is quite lengthy.




Large preview

Austin Beerworks is just one of many local breweries in the US. When customers enter the site, as always they are prompted with an age check that’s supposed to ensure they are over a certain age limit. Most people — honestly or dishonestly — would click on “Yes” and move on, but if the customer chooses to click on “No,” they embark on a “choose-your-own-adventure” trip to be guided to a video that best describes their personality.




Large preview




Large preview




Large preview




Large preview




Large preview




Large preview

Who doesn’t love disliking a pop-up? However, pop-ups can be made interesting too. Volkshotel uses the most annoyingly delightful pop-up out there, beautifully illustrated as a person holding a sign in front of the website. As the visitors hover over it to close it, the pop-up sneakily moves away a little bit, making it just a tad more difficult to close it. Personally, I wish every single website had a pop-up like that.




Large preview

Tympanus 3D Room Exhibition doesn’t look particularly exceptional until the visitor chooses to interact with it. When moving from one exhibition detail page to another, rather than just loading another page, the user is moved from one room to another within a 3D space. Unexpected and memorable.




Large preview




Large preview




Large preview

What’s a slightly more common interaction on the web? Forms, in all their different flavors and appearances. In fact, chances are high that you have some sort of a login and password input on your site, and, of course, that’s a pretty boring interaction. Adding a character responding to a user’s input might spice things up a little. As a result, people might spend more time interacting with the form before signing in. That’s better engagement at hand. Darin Senneff’s Yeti character does just that.

Darin Senneff’s Yeti character

The strategy is simple: choose one predictable, boring pattern, study user expectations and… break them mercilessly by adding something unexpected and uplifting to it. Please note that it doesn’t mean breaking usability just for the sake of breaking it; rather, it’s about making a handful of boring elements more interesting by adding some unconventional treatments to their design.

Find A Pain Point And Solve It Well

Can you hear restless voices of skepticism whispering from the corner of the room? Not every corporate setting will sustain a funky custom illustration, a quirky animation, or an unconventional interaction. A striking visual identity might not really fit into your digital presence, custom illustrations might not be within the budget, and you might not want to break customer’s expectations anyway. In these cases, you might want to explore a slightly different route. If you can’t convey your personality through unconventional aesthetics or interaction, an alternative is to convey it through superior problem solving. It means you need to uncover painful moments of interaction — when customers are annoyed or disappointed or confused — on similar sites, and sweep through experimental and seemingly far-fetched solutions to try to trump the experience that your competitors provide. Take on a problem, and tackle it meticulously, head on.

Surprisingly, most of the time these pain points aren’t particular features; it’s the perceived complexity of the interaction and the lack of transparency. Too many form fields; too much time investment; too slow an interaction; too many repeated questions; too many unnecessary requirements. The angle is to find a way to make seemingly complex interactions deceptively easy, hence surpassing expectations.

Sidenote: It goes without saying that solving a particular pain point won’t help much if basics aren’t covered properly. Accessibility, performance, proper visual hierarchy, and responsive behavior are the founding pillars of every experience, and have to be considered first.

SBB Mobile is a Swiss trip planner app that allows customers to check the schedule of trains and purchase train tickets. On its own, it’s a trip planner like every single similar app out there, except for one thing. The app provides a “touch timetable”; customers can define their common destinations and arrange them on a grid. To purchase a ticket from Zurich to Lausanne, for example, it’s enough to draw a line on the grid connecting Zurich and Lausanne and then confirm the selection. Booking tickets has never been that fast and easy. That’s a great example of making a conventionally complex interaction straightforward, especially for people who commute frequently. Also, it’s a unique design signature that nobody else has (yet).




Large preview




Large preview

What would it take to provide a remarkable video-playing experience? It might sound as simple as designing a track and a thumb with a few ticks on the track for quick jumps. However, if you study common problems users experience frequently, you’ll find one particular issue that stands out. People tend to pause videos and then continue watching later, yet restoring the state of where things were left off is unnecessarily complex in many video player UIs. In fact, you might encounter people writing down the exact time stamp when they paused the video, just to return to it later on another device — but then again, in most UIs it’s impossible to jump precisely to a particular second, and most of the time you have to guess and tap the position of a thumb on the track correctly. In the same way, jumping back and forward by 30 seconds or even by a few minutes can be remarkably challenging, especially on mobile, as most interfaces aren’t designed around that particular case.

Not only does YouTube provide fully accessible controls for navigation, it also contains a keyframes preview with thumbnails appearing on hover, and navigation via keyboard — and it stores the current state of the video, allowing customers to save a particular time stamp with a unique URL to continue watching later. YouTube also contains many lengthy videos, like documentaries or tutorials, so users can slide up the thumb vertically to adjust the scale of the track and hence jump to the point of interest more precisely. Unfortunately, only a few users know of the feature, and the interaction isn’t particularly self-explanatory, but those who do know of it, use it frequently. One pain point, solved well.




Large preview




Large preview

Most academic publications contain dozens of endnotes, footnotes, and references, listed in the order of appearance. If a reader is interested in a particular footnote, they have to jump to the end of the article to read it, and then jump back to continue reading the article. This experience might be a bit too tedious for frequent use, yet it’s the default experience we all are accustomed to.

The Harvard Law Review solves this problem in a different way. References are always located right next to the point where they are mentioned. Every side note and footnote either appears on the sides on larger screens, or displayed inline via an accordion. Once a user has tapped on the footnote, it expands in its entirety, while the footnote turns into a “close” button. A simple problem solved well.




Large preview




Large preview




Large preview

Imagine you want to book a wonderful vacation with your family, but you haven’t picked your dates yet. You have an idea of when you’d like to go, and you have some flexibility regarding the dates for your next vacation. DoHop allows its users to choose a flexible date for traveling; for example, particular months of the year, or a particular season, (winter or fall, perhaps). It then suggests dates and a time span with the best price. And if you have a public holiday weekend coming up in a few weeks, and you’d love to make a plan, RoutePerfect suggests a route based on your preferences. That’s a real problem case solved well. Most traveling websites ask for specific dates for inbound and outbound flights.




Large preview




Large preview

Good solutions require time and focus. They require us to really understand what pain points users experience first. Users might not be very good at articulating those paint points, so we developed a simple technique that helps us get to the root of the problem.

We ask testers to complete a particular task on a competitor’s website, and record their session on video, along with a webcam, using the device that they are used to. It could be as easy as finding an item in a catalog, or checking out on a retail store, or finding a particular section in the navigation. Of course, we observe their behavior and ask questions if something appears to be unusual, but too often many things that happen during the sessions go unnoticed — they are just too difficult to spot right away. That’s why we rewatch recorded user sessions in slow motion, often slowing down the playback five or six times.

We look for repeated movements and imprecise hits, as well as negative facial expressions and gestures. More specifically, we search for little moments of despair — fleeting moments of confusion when movements or gestures don’t make any sense: circling around a button or a link over and over again; focusing on a particular interactive element for far too long; selecting the same text a few times in a row and then continuing to navigate without acting on it. The playback sessions usually happen right after the test, so we still have an opportunity to ask questions and validate our assumptions with the tester. Even a few recordings usually provide actionable insights — and it doesn’t require many resources or much investment. It’s also a good idea to examine customer support logs, and ask the support team about common complaints.

Once we’ve identified some issues, we explore solutions that would provide more clarity and ease the interaction, sometimes by designing without any particular visual language in mind. The point is to find an interaction pattern that would be way more superior to the experience customers had on the competitor’s sites. We then produce a digital mock-up and invite the same customers to try to solve the same tasks, along with a new group of testers who haven’t seen both interfaces yet. We measure the time needed to complete an interaction and ask them to choose which interaction they find more straightforward and useful, and why. Surprisingly, faster interactions aren’t necessarily perceived as being faster, and slower interactions aren’t necessarily perceived as being slower. Based on that, we iterate and evolve those prototypes. In many ways, those pain points become the heart of our experience that we tackle first and radiate the entire experience out from. That’s why sometimes, instead of running a test on a competitor’s website, we test our own solutions in the same way.

Good solutions trigger an emotional attachment with or without non-conventional aesthetics or interaction. The more pain points you can address well within your interface, the more likely the difference in experience is to be noticed. Only a few websites make it to customers’ browser toolbars, so think about that one pain point and the one solution that would make them do just that.

Exceeding Expectations By Default

Here’s another question for you: of all the hotel experiences you ever had, which ones are the most memorable? Think about it for a moment. Think about what made them so special and why they are so memorable. It might have been an extraordinary natural backdrop, or remarkably attentive personnel, or a lavish breakfast buffet. Or something entirely different. In fact, for many of us it could have been a pretty average dormitory as much as an exquisite 5-star chalet in the Swiss alps. The environment matters, but it’s not the environment alone that matters.

The reason why these experiences are memorable is because they aren’t average.4 In fact, they are the very opposite of average in *some* way, as *something* was exceptional about them. It’s not necessarily the hotel itself — it’s the timing and the people we happen to spend these experiences with. A good hotel provides a setting that enables wonderful experiences, and so does a good website interface. A *memorable* hotel adds a fine detail to the experience that exceeds our expectations, and it does so without telling us up front. And so do memorable websites.

4 According to Daniel Kahneman’s peak-end rule, we tend to judge experiences largely based on how we felt at its peak (that is, its most intense point) and at its end, rather than on the total sum or average of every moment of the experience. The effect occurs whether the experience is pleasant or unpleasant. Other information aside from the peak and end of the experience is not lost, but it is not used. That means we can tap into very negative and very positive parts of the experience, and tweak them to create an emotional connection.

As Brené Brown, a research professor at the University of Houston, so beautifully expressed in her books on empathy, “good design is a function of empathy, while non-empathic design is self-indulgent and self-centered.” The key, then, is to empathize with customers both in their negative and positive experiences, rather than pushing your own agenda. To our customers, that extra fine attention to a few little details can make all the difference in the world. So we could sprinkle a little bit of human kindness here and there, adding extra value silently, without even mentioning it. That fine detail could be as simple as a custom-designed profile illustration, based on the photo the customer has uploaded. It could be a handwritten thank-you note, signed by the entire team and sent via good ol’ snail mail. It could also be an unexpectedly straightforward resolution of a problem after a mistake has been made.

In an eCommerce setting, it could mean the ability to modify or cancel a finished order within five mins after the successful checkout. On the one side, it could help a customer avoid a time-consuming interaction with the support team; and on the other side, just imagine the look on the customer’s face when they realize that the date of the booking was wrong, yet it’s possible to cancel the booking with a click of a button — without any charges applied.


Smashing Magazine’s checkout


A mock-up we’re currently exploring in Smashing Magazine’s checkout to allow inline editing of data on the review step and editing of the order within 5 minutes after the purchase.

In the same way, an interface could suggest to a signed-in customer to use a saved coupon code, or inform them about a similar — and hence potentially duplicate — booking made a while back. The personality of the brand shines best in those little moments when it helps customers prevent mistakes. By acting on behalf of the experience rather than business every now and again, the interface makes the customer feel genuinely valued, respected, and helped, and that works much better than any ingenious interface copy ever would.




Large preview

One way of preventing mistakes is by writing adaptive and helpful error messages. That’s one of the most obvious points of frustration for customers, and it’s remarkable how little effort is put into recovery experience, often falling back to generic and abstract messages. Perhaps they don’t cost a sale but they can damage the long-term perception of the brand. People who experience unrecoverable issues during one of the key interactions on a site tend to not use it in the future at all as they expect the issue to creep out in other interactions too.

Overall, error messages deserve slightly more credit than they are usually given. By nature, they appear at the point where the customer’s progress is blocked. That’s also the point where the customers have to slow down and pay full attention to resolve the problem. That’s quite unusual for the entire spectrum of experiences on a site, and we can use the situation to our advantage to infuse a bit of personality into the experience. Every single time our interfaces fail to meet expectations, we should see it as an opportunity to create a memorable impact in the process of speedy recovery. If we manage to turn an annoyance into the feeling of being valued or understood along the way, we might be heading off on the right track.

One of the very first things I started working on when we embarked on the redesign was filling elaborate spreadsheets with alternate wordings for our checkout error messages. It wasn’t done with the intention to A/B test the “best performing” error message, though; it was done primarily to discover better expressions of the personality through the interface. On their own, error messages don’t really make sense, but they fit well within the story being told throughout the site. Obviously, we try to make it as difficult as possible to make mistakes in the first place, but once an error has occurred, we try to use both adaptive and playful copywriting to address the issue while also raise the occasional smile.


Voice &amp; Tone by MailChimp


Voice and tone are the main pillars of a personality. MailChimp has built a dedicated voice and tone style guide to align designers, customer support, and everybody else in the way they communicate to customers.

Seek critical pain points that customers often experience on the site by looking into customer support logs and user interviews, and design these experiences with extra care and attention. It goes without saying that a quirky personality won’t help much if the customer isn’t able to solve a problem, so take care of the basics first. Ultimately, it doesn’t take that much effort to turn negative experiences into positive ones — it’s just a matter of having it on your to-do list when designing an interface.

The Two Sides Of Personality

As much as we love sharing our experiences and showing our better side to people around us, we can’t stand that one person spending the entire evening talking about themselves. In our interfaces, every time we add yet another parallax transition or a slow bouncy animation to people who have seen it a dozen times already, we are essentially letting the interface highlight its fanciness without helping the user along the way. Eventually, after a few visits, all those whistles and bells that achieve a strong first impact become annoying as they add too much friction.

Nobody loves self-centered characters, and so a website shouldn’t be self-centered either. The design signature should never take the leading role in the user experience as it’s never the main reason why people access the website. It should be humble and remain in the shadows, noticeable but not obstructing the smooth flow frequent visitors have got used to.

In her brilliant talk on designing animations, Val Head, a designer from Pittsburgh, US, suggested using prominent animations very sparingly, as they should be reserved for very special occasions, while subtle micro-animations could accompany the user all along the way. Val suggests using animation only for key compositions of your story, like sending a marketing campaign, or favoriting an item, or seeing a successful purchasing page, while everything else should remain calm and as normal. With this idea in mind we could think of designing our interfaces with two kinds of interactions: the prominent “showroom” ones, used rarely; and subtle “workhorse” ones, used frequently.

Reserve special visual treatments and interactions for special occasions, but also embed subtle treatments used consistently across the entire site. Twitter, for example, uses an elaborate animation when a user “hearts” a tweet. Facebook displays a confetti animation when you congratulate a friend on their birthday or a wedding. In Smashing’s case, we use vibrant colors and cat illustrations as our showroom signature, while tilting, hover-animations, and shadows beneath them make up our workhorse signature.

We are used to the idea of our designs adjusting to the viewport or network conditions, but it might be worth looking into adjusting the design based on the frequency of usage too. The technique is often called progressive reduction, essentially a dynamic simplification of an interface as users become familiar with it. The idea is simple: identify the major features in your interface, and assign levels to these features. Then, track your user’s usage by monitoring the frequency of use within a certain time period and create proficiency profiles for the user. Based on the current level, you could then adjust components of the interface to reduce hand-holding.

As Allan Grinshtein noticed, it’s worth noting at this point that a user’s proficiency in a given product decays over time without usage (also known as experience decay), so if a user’s frequency of use and usage volume have gone down, then their interface should regress a level or two, depending on how far down their numbers have dropped. This automatic regression is necessary to balance progression; without it, you lose the ability to fully respond to dynamic changes in user behavior, adds Dan Birman in his article.


Adjusting a button based on the frequency of use


Adjusting a button based on the frequency of use. The technique was first published by Allan Grinshtein from LayerVault.

The more often customers visit the site, the less likely they want to be confronted with anything that would slow them down. Therefore, it might be a good idea to slowly fade out showroom signatures with growing frequency of use, perhaps removing parallax-effects or speeding up transitions for returning users. In the end, it’s all about the choreography: don’t be that person at a dinner party filling the room with an extensive story of their life.

The Signature at the Heart of the Design
The design process is a mythical creature. Everybody somehow manages to come up with their own workflow, tooling, and processes, yet it’s very rare that anybody is really satisfied with it. When it comes to infusing personality into the design, when and where would be the right point to include it in the design process?

In one of her talks from 2014, Patty Toland, a senior UX designer from Filament Group in Boston mentioned the hierarchy of priorities the team uses when designing and building responsive experiences. The main goal of the process is to create the “leanest, fastest-loading, most optimized page.” The main foundation is and has always been a fully accessible experience, in which text, images, data, charts, audio, video, forms and so on are all broadly accessible and function fully in their default form. Applied to the context of the design process, it means meaningful markup and properly defined relationships between components.


the hierarchy of priorities the team uses when designing and building responsive experiences


Patty Toland, Filament Group, “Design Consistency for the Responsive Web”.

With accessible components ready to be served, the next step is taking care of the scale of the design. That’s where the decisions about grid, content size, order, and arrangement, as well as breakpoints, come into play. Often the proportions will be defined using content wireframes: low-fidelity mock-ups with gray boxes; the height of each box in proportion to others defines its weight in the layout. Sometimes we add notes about the personality across the content blocks, and then reflect them when it comes to visual design.




Large preview




Large preview




Large preview




Content wireframes in action. At the top the wireframe of Techcrunch redesign and below the wireframe of the Original Orange redesign by Adjacent. You can follow the progress of the latter in the screenshots on the next pages, too. Large preview

With low-fidelity prototypes in place, the next step for the design is to gain style, with logo, brand colors, custom fonts, transitions, and animations added to the mix. Sometimes this hierarchy will be perfectly mapped in the order we write React components and CSS properties with Sass. Even seemingly unrelated tasks, like BEM naming for classes, will happen in that order as well. The prototypes will gain abstract utility classes first, and more elaborate relationships will be reflected through more specific class names throughout the process. The process establishes a clear separation of responsibilities for modules.

This process seems plausible at first, but it raises a very critical question: what pages to design and prototype first? When we start designing, we design the heart of the experience first: the most critical and impactful part of the experience. More specifically, we try to capture the very essence of the experience by exploring key interactions, then break it down into reusable components, and then radiate outwards from that essence. For an online magazine, it would be reading experience and typography first. For a landing page, it would be the pricing plans and a feature comparison first.

For an ecommerce site it means looking into the components that would make up an extraordinary relevant and useful product page first. That means large image thumbnails, concise copywriting, transparent pricing, exposed ratings and testimonials, psychological anchors, and call-to-action buttons. The visual design decisions made there are then translated to other parts of the interface, specifically forms and labels and error messages in the checkout. Only then, eventually, we reach the category pages and the FAQ pages living on the far outer edges of the experience spectrum. Somewhere in between we explore the front page, but usually we design it late rather than early in the process — at the point when we’ve established a strong identity already, so we use the front page to amplify and explore it prominently, potentially with a bold design that would exhibit the main qualities of the personality.

Remember overarching connections mentioned earlier in the chapter? A critical part of the design process is to connect modules, so they don’t appear as standalone solutions when put together in the interface. When we have enough modules to build the first prototype, we jump into the browser and build mobile-first. It’s in this process that we finally decide on the grid and the layout and the structure, and implement the connections between modules. In fact, for us, the signature is that magical bond that ties things together.

That’s why we start thinking about the signature of the design when we start designing the heart of the experience, and sometimes even before that. Spreadsheets exploring error messages, visual experiments around shapes and colors and type, as well as user interviews help us get there. Eventually, decisions made for the first prototype can be reused for other pages, yet sometimes we need to run the process from the start again — as some pages clearly will be one-offs, such as the landing page or a front page. They will still exhibit relationships to everything else because they are designed and built using the personality traits that have been solidified by this point.

It’s these relationships that would then lay the main foundation of a design system, along with components and examples of the interface in use. Too often style guides show a component in isolation, along with Sass class names and a code snippet, without including how that component should appear and behave in relation to other modules on the page. Examples matter both for designers and developers, and they give a good reason to both visit and keep the design system up to date in the long-term.




(Image courtesy: Andrew Clarke) (Large preview)




(Image courtesy: Andrew Clarke) (Large preview)




(Image courtesy: Andrew Clarke) (Large preview)




(Image courtesy: Andrew Clarke) (Large preview)


A storyboard with components


A storyboard with components. Each component also has a speed and level of dynamics attached to them. (Image courtesy: Andrew Clarke) (Large preview)

We often create user journey maps to understand the flow users go through to accomplish their tasks, and with personality traits in mind, we could even complement them with storyboards, adding some personality highlights at different points of user experience. Besides, in the context of design systems, we could explore not only components in isolation, but also how the design language can use components to slow down or speed up the experience, or provide greater or lesser impact, as well as dynamic and static layout compositions — very much like we do with showroom and workhorse interactions.

You could even print them out and put them as magnets on a storyboard, so designers can freely move them around and thus explore ways of combining predictable components in unpredictable ways. That’s what Andrew Clarke does when embedding art direction and storytelling in his designs — very much like comic strip designers arrange the frames according to narrative dynamics and impact when laying out a comic story.

The design signature lies at the very heart of the design. It’s an strand that connects the components in the interface, and it’s what helps designers stay on track when maintaining or evolving a design language. Deciding on the personality traits first helps drive the direction of the design, and can be just a good enough constraint to dissolve initial intentions and goals into tangible, distinguishable attributes that could eventually become the heart of the experience.

Wrapping Up

As much as we could get seduced by the charm of a website, in the end, the main purpose of it shouldn’t be self-indulgence. Expressions of the personality of the site enable emotional connections with customers and visitors, and because they are human by their nature, they outline a path to authentic, honest, and respectful interfaces. It’s up to us to figure out how to shape that path and the outcome ahead of us.

Now, it might not be for everybody, and perhaps not every site needs a personality in the first place, or perhaps it should be subtle and express itself in little nuances here and there. I hope that in either of these cases, once flipping over the last page of this book, you’ll have a good enough tool belt of ideas and techniques to create unique and humane experiences — experiences people could fall in love with.


I’d like to express sincere gratitude to Jen Simmons, Rachel Andrew, Andrew Clarke, Dan Mall, Espen Brunborg, and Elliot Jay Stocks for inspiring work, contributions, and help in discussing the idea of art direction on the web, and making the web more diverse and experimental. I’d also like to thank Marko Dugonjić, Alberta Soranzo, Sashka Maximova, Lilia Zinchenko, Stefan Bucher, Benoit Henry, Nils Mielke, Thord D. Hedengren, and Bertrand Lirette for reviewing the chapter, as well as our fantastic community, which has shared techniques and lessons learned from its work for everybody to use. You are truly smashing!


The brand new Smashing Book 6 is now available for pre-order. It contains everything you need to know on how to tackle the new adventures web design and development are bringing along. No theory — just things that worked in practice.

Smashing Editorial
(ra, og, yk, il)


Original article:

Smashing Book 6 Excerpt: Bringing Personality Back To The Web

3 Direct Mail CTA Best Practices that Work for Digital Marketing

Marketing has changed a lot over the past few years. That’s especially true when it comes to the options available to digital marketers. It seems like every week there’s a new feature available in the platforms most of us are already using, and every month there’s a new platform altogether that blogs and other industry publications are calling the next big thing. But some aspects of marketing haven’t changed much over the years. One of those is the way we write calls to action or CTAs. If you’ve spent much time looking for ways to boost your conversion rates, you’ve probably…

The post 3 Direct Mail CTA Best Practices that Work for Digital Marketing appeared first on The Daily Egg.

Read article here:

3 Direct Mail CTA Best Practices that Work for Digital Marketing

How To Make A WordPress Plugin Extensible

Have you ever used a plugin and wished it did something a bit differently? Perhaps you needed something unique that was beyond the scope of the settings page of the plugin.

I have personally encountered this, and I’m betting you have, too. If you’re a WordPress plugin developer, most likely some of your users have also encountered this while using your plugin.

Here’s a typical scenario: You’ve finally found that plugin that does everything you need — except for one tiny important thing. There is no setting or option to enable that tiny thing, so you browse the documentation and find that you can’t do anything about it. You request the feature in the WordPress plugin’s support forum — but no dice. In the end, you uninstall it and continue your search.

Imagine if you were the developer of this plugin. What would you do if a user asked for some particular functionality?

The ideal thing would be to implement it. But if the feature was for a very special use case, then adding it would be impractical. It wouldn’t be good to have a plugin setting that only 0.1% of your users would have a use for.

You’d only want to implement features that affect the majority of your users. In reality, 80% of users use 20% of the features (the 80/20 rule). So, make sure that any new feature is highly requested, and that 80% of your users would benefit from it, before implementing it. If you created a setting for every feature that is requested, then your plugin would become complicated and bloated — and nobody wants that.

Your best bet is to make the plugin extensible, code-wise, so that other people can enhance or modify it for their own needs.

In this article, you’ll learn about why making your plugin extensible is a good idea. I’ll also share a few tips of how I’ve learned to do this.

What Makes A Plugin Extensible?

In a nutshell, an extensible plugin means that it adheres to the “O” part of the SOLID principles of object-oriented programming — namely, the open/closed principle.

If you’re unfamiliar with the open/closed principle, it basically means that other people shouldn’t have to edit your code in order to modify something.

Applying this principle to a WordPress plugin, it would mean that a plugin is extensible if it has provisions in it that enable other people to modify its behavior. It’s just like how WordPress allows people to “hook” into different areas of WordPress, but at the level of the plugin.

A Typical Example Of A Plugin

Let’s see how we can create an extensible plugin, starting with a sample plugin that isn’t.

Suppose we have a plugin that generates a sidebar widget that displays the titles of the three latest posts. At the heart of the plugin is a function that simply wraps the titles of those three posts in list tags:


function get_some_post_titles() 
  $args = array(
      'posts_per_page' => 3,
  );

  $posts = get_posts( $args );

  $output = '
    '; foreach ( $posts as $post ) $output .= '
  • ' . $post->post_title . '
  • '; $output .= '
'; return $output; }

While this code works and gets the job done, it isn’t quite extensible.

Why? Because the function is set in its own ways, there’s no way to change its behavior without modifying the code directly.

What if a user wanted to display more than three posts, or perhaps include links with the posts’ titles? There’s no way to do that with the code above. The user is stuck with how the plugin works and can nothing to change it.

Including A Hundred Settings Isn’t The Answer

There are a number of ways to enhance the plugin above to allow users to customize it.

One such way would be to add a lot of options in the settings, but even that might not satisfy all of the possibilities users would want from the plugin.

What if the user wanted to do any of the following (scenarios we’ll revisit later):

  • display WooCommerce products or posts from a particular category;
  • display the items in a carousel provided by another plugin, instead of as a simple list;
  • perform a custom database query, and then use those query’s posts in the list.

If we added a hundred settings to our widget, then we would be able to cover the use cases above. But what if one of these scenarios changes, and now the user wants to display only WooCommerce products that are currently in stock? The widget would need even more settings to accommodate this. Pretty soon, we’d have a gazillion settings.

Also, a plugin with a huge list of settings isn’t exactly user-friendly. Steer away from this route if possible.

So, how would we go about solving this problem? We’d make the plugin extensible.

Adding Our Own Hooks To Make It Extensible

By studying the plugin’s code above, we see a few operations that the main function performs:

  • It gets posts using get_posts.
  • It generates a list of post titles.
  • It returns the generated list.

If other people were to modify this plugin’s behavior, their work would mostly likely involve these three operations. To make our plugin extensible, we would have to add hooks around these to open them up for other developers.

In general, these are good areas to add hooks to a plugin:

  • around and within the major processes,
  • when building output HTML,
  • for altering post or database queries,
  • before returning values from a function.

A Typical Example Of An Extensible Plugin

Taking these rules of thumb, we can add the following filters to make our plugin extensible:

  • add myplugin_get_posts_args for modifying the arguments of get_posts,
  • add myplugin_get_posts for overriding the results of get_posts,
  • add myplugin_list_item for customizing the generation of a list entry,
  • add myplugin_get_some_post_titles for overriding the returned generated list.

Here’s the code again with all of the hooks added in:


function get_some_post_titles() 
  $args = array(
      'posts_per_page' => 3,
  );

  // Let other people modify the arguments.
  $posts = get_posts( apply_filters( 'myplugin_get_posts_args', $args ) );

  // Let other people modify the post array, which will be used for display.
  $posts = apply_filters( 'myplugin_get_posts', $posts, $args );

  $output = '
    '; foreach ( $posts as $post ) // Let other people modify the list entry. $output .= '
  • ' . apply_filters( 'myplugin_list_item', $post->post_title, $post ) . '
  • '; $output .= '
'; // Let other people modify our output list. return apply_filters( 'myplugin_get_some_post_titles', $output, $args ); }

You can also get the code above in the GitHub archive.

I’m adding a lot of hooks here, which might seem impractical because the sample code is quite simple and small, but it illustrates my point: By adding just four hooks, other developers can now customize the plugin’s behavior in all sorts of ways.

Namespacing And Context For Hooks

Before proceeding, note two important things about the hooks we’ve implemented:

  • We’re namespacing the hooks with myplugin_.
    This ensures that the hook’s name doesn’t conflict with some other plugin’s hook. This is just good practice, because if another hook with the same name is called, it could lead to unwanted effects.
  • We’re also passing a reference to $args in all of the hooks for context.
    I do this so that if others use this filter to change something in the flow of the code, they can use that $args parameter as a reference to get an idea of why the hook was called, so that they can perform their adjustments accordingly.

The Effects Of Our Hooks

Remember the unique scenarios I talked about earlier? Let’s revisit those and see how our hooks have made them possible:

  • If the user wants to display WooCommerce products or posts from a particular category, then either they can use the filter myplugin_get_posts_args to add their own arguments for when the plugin queries posts, or they can use myplugin_get_posts to completely override the posts with their own list.
  • If the user wants to display the items in a carousel provided by another plugin, instead of as a simple list, then they can override the entire output of the function with myplugin_get_some_post_titles, and instead output a carousel from there.
  • If the user wants to perform a custom database query and then use that query’s posts in the list, then, similar to the first scenario, they can use myplugin_get_posts to use their own database query and change the post array.

Much better!

A Quick Example Of How To Use Our Filters

Developers can use add_filter to hook into our filters above (or use add_action for actions).

Taking our first scenario above, a developer can just do the following to display WooCommerce products using the myplugin_get_posts_args filter that we created:

add_filter( 'myplugin_get_posts_args', 'show_only_woocommerce_products' );
function show_only_woocommerce_products( $args ) 
   $args['post_type'] = 'product';
   return $args;

We Can Also Use Action Hooks

Aside from using apply_filters, we can also use do_action to make our code extensible. The difference between the two is that the first allows others to change a variable, while the latter allows others to execute additional functionality in various parts of our code.

When using actions, we’re essentially exposing the plugin’s flow to other developers and letting them perform other things in tandem.

It might not be useful in our example (because we are only displaying a shortcode), but it would be helpful in others. For example, given an extensible backup plugin, we could create a plugin that also uploads the backup file to a third-party service such as Dropbox.

“Great! But Why Should I Care About Making My Plugin Extensible?”

Well, if you’re still not sold on the idea, here are a few thoughts on why allowing other people to modify your plugin’s behavior is a good idea.

It Opens Up the Plugin to More Customization Possibilities

Everyone has different needs. And there’s a big chance your plugin won’t satisfy all of them, nor can you anticipate them. Opening up your plugin to allow for modifications to key areas of your plugin’s behavior can do wonders.

It Allows People to Introduce Modifications Without Touching the Plugin’s Code

Other developers won’t be forced to change your plugin’s files directly. This is a huge benefit because directly modifying a plugin’s file is generally bad practice. If the plugin gets updated, then all of your modifications will be wiped.

If we add our own hooks for other people to use, then the plugin’s modifications can be put in an external location — say, in another plugin. Done this way, the original plugin won’t be touched at all, and it can be freely updated without breaking anything, and all of the modifications in the other plugin would remain intact.

Conclusion

Extensible plugins are really awesome and give us room for a lot of customization possibilities. If you make your plugin extensible, your users and other developers will love you for it.

Take a look at plugins such as WooCommerce, Easy Digital Downloads and ACF. These plugins are extensible, and you can easily tell because numerous other plugins in WordPress’ plugins directory add functionality to them. They also provide a wide array of action and filter hooks that modify various aspects of the plugins. The rules of thumb I’ve enumerated above have come up in my study of them.

Here are a few takeaways to make your plugin extensible:

  • Follow the open/closed principle. Other people shouldn’t have to edit your code in order to modify something.
  • To make your plugin extensible, add hooks in these places:
    • around and within major processes,
    • when building the output HTML,
    • for altering post or database queries,
    • before returning values from a function.
  • Namespace your hooks’ names with the name of your plugin to prevent naming conflicts.
  • Try passing other variables that are related to the hook, so that other people get some context of what’s happening in the hook.
  • Don’t forget to document your plugin’s hooks, so that other people can learn of them.

Further Reading

Here are some resources if you want to learn more about extending plugins:

Smashing Editorial
(mc, ra, al, yk, il)

Original post:  

How To Make A WordPress Plugin Extensible

Building A Static Site With Components Using Nunjucks

It’s quite popular these days, and dare I say a damn fine idea, to build sites with components. Rather than building out entire pages one by one, we build a system of components (think: a search form, an article card, a menu, a footer) and then piece together the site with those components.

JavaScript frameworks like React and Vue emphasize this idea heavily. But even if you don’t use any client-side JavaScript at all to build a site, it doesn’t mean you have to give up on the idea of building with components! By using an HTML preprocessor, we can build a static site and still get all the benefits of abstracting our site and its content into re-usable components.

Static sites are all the rage these days, and rightfully so, as they are fast, secure, and inexpensive to host. Even Smashing Magazine is a static site, believe it or not!

Let’s take a walk through a site I built recently using this technique. I used CodePen Projects to build it, which offers Nunjucks as a preprocessor, which was perfectly up for the job.

This is a microsite. It doesn’t need a full-blown CMS to handle hundreds of pages. It doesn’t need JavaScript to handle interactivity. But it does need a handful of pages that all share the same layout.


Consistent header and footer


Consistent header and footer across all pages

HTML alone doesn’t have a good solution for this. What we need are imports. Languages like PHP make this simple with things like <?php include "header.php"; ?>, but static file hosts don’t run PHP (on purpose) and HTML alone is no help. Fortunately, we can preprocess includes with Nunjucks.


Importing components into pages


Importing components is possible in languages like PHP

It makes perfect sense here to create a layout, including chunks of HTML representing the header, navigation, and footer. Nunjucks templating has the concept of blocks, which allow us to slot in content into that spot when we use the layout.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Power of Serverless</title>
  <link rel="stylesheet" href="/styles/style.processed.css">
</head>
  
<body>
  
  % include "./template-parts/_header.njk" %
  
  % include "./template-parts/_nav.njk" %
  
  % block content %
  % endblock %
  
  % include "./template-parts/_footer.njk" %
  
</body>

Notice the files that are included are named like _file.njk. That’s not entirely necessary. It could be header.html or icons.svg, but they are named like this because 1) files that start with underscores are a bit of-of a standard way of saying they are a partial. In CodePen Projects, it means they won’t try to be compiled alone. 2) By naming it .njk, we could use more Nunjucks stuff in there if we want to.

None of these bits have anything special in them at all. They are just little bits of HTML intended to be used on each of our four pages.

<footer>
  <p>Just a no-surprises footer, people. Nothing to see here.<p>
</footer>

Done this way, we can make one change and have the change reflected on all four pages.

Using The Layout For The Four Pages

Now each of our four pages can be a file. Let’s just start with index.njk though, which in CodePen Projects, will automatically be processed and create an index.html file every time you save.


The index.njk file


Starting off with an index.njk file

Here’s what we could put in index.njk to use the layout and drop some content in that block:

% extends "_layout.njk" %

% block content %
<h1>Hello, World!</h1>
% endblock % 

That will buy us a fully functional home page! Nice! Each of the four pages can do the same exact thing, but putting different content in the block, and we have ourselves a little four-page site that is easy to manage.


Compiled index.html


The index.njk file gets compiled into index.html

For the record, I’m not sure I’d call these little chunks we re-using components. We’re just being efficient and breaking up a layout into chunks. I think of a component more like a re-usable chunk that accepts data and outputs a unique version of itself with that data. We’ll get to that.

Making Active Navigation

Now that we’ve repeated an identical chunk of HTML on four pages, is it possible to apply unique CSS to individual navigation items to identify the current page? We could with JavaScript and looking at window.location and such, but we can do this without JavaScript. The trick is putting a class on the <body> unique to each page and using that in the CSS.

In our _layout.njk we have the body output a class name as a variable:

<body class=" body_class }">

Then before we call that layout on an indivdiual page, we set that variable:

% set body_class = "home" %
% extends "_layout.njk" %

Let’s say our navigation was structured like

<nav class="site-nav">
  <ul>
    <li class="nav-home">
      <a href="/">
        Home
      </a>
      ...

Now we can target that link and apply special styling as needed by doing:

body.home .nav-home a,
body.services .nav-services a  /* continue matching classes for all pages... */
  /* unique active state styling */

Active state styling on navigation
Styling navigation links with an active class.

Oh and those icons? Those are just individual .svg files I put in a folder and included like

% include "../icons/cloud.svg" %

And that allows me to style them like:

svg 
  fill: white;

Assuming the SVG elements inside have no fill attributes already on them.

Authoring Content In Markdown

The homepage of my microsite has a big chunk of content on it. I could certainly write and maintain that in HTML itself, but sometimes it’s nice to leave that type of thing to Markdown. Markdown feels cleaner to write and perhaps a bit easier to look at when it’s lots of copy.

This is very easy in CodePen Projects. I made a file that ends in .md, which will automatically be processed into HTML, then included that in the index.njk file.

Markdown compiled into HTML on CodePen Projects
Files in markdown get compiled into HTML on CodePen Projects.
% block content %
<main class="centered-text-column"> 
% include "content/about.html" % 
</main>
% endblock %

Building Actual Components

Let’s consider components to be repeatable modules that as passed in data to create themselves. In frameworks like Vue, you’d be working with single file components that are isolated bits of templated HTML, scoped CSS, and component-specific JavaScript. That’s super cool, but our microsite doesn’t need anything that fancy.

We need to create some “cards” based on a simple template, so we can build things like this:


Card style components


Creating repeatable components with templates

Building a repeatable component like that in Nunjucks involves using what they call Macros. Macros are deliciously simple. They are like as if HTML had functions!

% macro card(title, content) %
<div class="card">
  <h2> title }</h2>
  <p> content }</p>
</div>
% endmacro %

Then you call it as needed:

 card('My Module', 'Lorem ipsum whatever.') }

The whole idea here is to separate data and markup. This gives us some pretty clear, and tangible benefits:

  1. If we need to make a change to the HTML, we can change it in the macro and it gets changed everywhere that uses that macro.
  2. The data isn’t tangled up in markup
  3. The data could come from anywhere! We code the data right into calls to the macros as we’ve done above. Or we could reference some JSON data and loop over it. I’m sure you could even imagine a setup in which that JSON data comes from a sort of headless CMS, build process, serverless function, cron job, or whatever.

Now we have these repeatable cards that combine data and markup, just what we need:


Data and markup for the component is kept separate


HTML is controlled in the macro, while data can come from anywhere

Make As Many Components As You Like

You can take this idea and run with it. For example, imagine how Bootstrap is essentially a bunch of CSS that you follow HTML patterns in which to use. You could make each of those patterns a macro and call them as needed, essentially componentizing the framework.

You can nest components if you like, embracing a sort of atomic design philosophy. Nunjucks offers logic as well, meaning you can create conditional components and variations just by passing in different data.

In the simple site I made, I made a different macro for the ideas section of the site because it involved slightly different data and a slightly different card design.


Card components in Ideas section


It’s possible to create as many components as you want

A Quick Case Against Static Sites

I might argue that most sites benefit from a component-based architecture, but only some sites are appropriate for being static. I work on plenty of sites in which having back-end languages is appropriate and useful.

One of my sites, CSS-Tricks, has things like a user login with a somewhat complex permissions system: forums, comments, eCommerce. While none of those things totally halt the idea of working staticly, I’m often glad I have a database and back-end languages to work with. It helps me build what I need and keeps things under one roof.

Go Forth And Embrace The Static Life!

Remember that one of the benefits of building in the way we did in this article is that the end result is just a bunch of static files. Easy to host, fast, and secure. Yet, we didn’t have to give up working in a developer-friendly way. This site will be easy to update and add to in the future.

  • The final project is a microsite called The Power of Serverless for Front-End Developers (https://thepowerofserverless.info/).
  • Static file hosting, if you ask me, is a part of the serverless movement.
  • You can see all the code (and even fork a copy for yourself) right on CodePen. It is built, maintained, and hosted entirely on CodePen using CodePen Projects.
  • CodePen Projects handles all the Nunjucks stuff we talked about here, and also things like Sass processing and image hosting, which I took advantage of for the site. You could replicate the same with, say, a Gulp or Grunt-based build process locally. Here’s a boilerplate project like that you could spin up.
Smashing Editorial
(ms, ra, hj, il)

Jump to original: 

Building A Static Site With Components Using Nunjucks

Thumbnail

Designing A Perfect Responsive Configurator

Here’s a little challenge for you. How would you design a responsive interface for a custom car configurator? The customer should be able to adjust colors, wheels, exterior details, interior details and perhaps accessories — on small and large screens. Doesn’t sound that difficult, does it? In fact, we have all seen such interfaces before. Essentially, they are just a combination of some navigation, iconography, buttons, accordions and a real-time 3D preview.

View this article:

Designing A Perfect Responsive Configurator

Free Adobe XD Icon Sets Made By Legendary Designers

(This is a sponsored article.) Our friends at Adobe unveiled a very special goodie at the Awwwards Conference in Berlin today. A goodie which is too good to miss: They asked three renowned designers to create exclusive free icon sets to use in Adobe XD. And, well, we are very happy to feature them here on Smashing Magazine, too.
The icon kits were created by design legend Lance Wyman, award-winning design studio Anton & Irene, and the Swiss design group Büro Destruct.

See original article: 

Free Adobe XD Icon Sets Made By Legendary Designers