Lean, agile, do more with less. Again, and again, design culture urges us to move quickly and trim research and design operations to the point where design becomes a mere thread in the larger corporate spool.
“When we’re asked to synthesize at the speed of light, user research becomes a way for teams to take a shortcut — to invent assumptions based on quickly made correlations, opinions, and quotes.”
The result is design based on assumptions or incomplete information about users and customers. For example, a Fortune 500 company (let’s call it Company Q) hired me to conduct a usability test for a complex user interface (usability testing involves a series of one-on-one sessions with real users who are asked to complete specific tasks while using a product or piece of software).
The test yielded what would likely become recognizable patterns, and I was halfway through the analysis when I was ordered to pause and send the client the findings immediately. My explanation about the need for more time to conduct a thorough and nuanced analysis fell on deaf ears:
“Just send a short video.”
I reluctantly sent a video snippet showing a participant struggling with the user interface (UI).
Biased design decision based on observation of a single usability test participant. (Large preview)
There was no time for background, context, or nuance. The product manager at Company Q recognized the participant in the video from a previous encounter and dismissed his struggles:
“He’s a crank, we can’t base decisions on him.”
The company moved forward without addressing this serious UI issue.
This product manager had become emotionally attached to his product (see endowment effect below). This emotional attachment hindered his ability to assess the product’s strengths and weaknesses objectively. It’s not surprising that professionals develop strong feelings about their products.
Understandable, but also problematic. As UX guru Jared Spool explains in an article about the ROI of UX, dismissing user needs carries a high cost:
For example, say you get many support calls because the design doesn’t do something the users expect. That’s a high cost due to a poor design decision.
In contrast, addressing design problems works. According to the McKinsey report, “The Business Value of Design”:
“One online gaming company discovered that a small increase in the usability of its home page was followed by a dramatic 25 percent increase in sales.”
Note: For this study, McKinsey tracked the design practices of 300 publicly listed companies over a five-year period in multiple countries and industries. Their senior business and design leaders were interviewed or surveyed. The McKinsey team collected more than two million pieces of financial data and recorded more than 100,000 design actions.
These numbers demonstrate the direct financial costs associated with rushing market research and shortchanging user and customer concerns. They also illustrate the financial benefit of addressing customer concerns.
In this article, I’ll shed light on the techniques for addressing these concerns:
Where you conduct research matters as much as the research method. Before booking a facility for your next user interview, consider the importance of location. You might not want to book a quiet meeting room if users work in a noisy environment with numerous distractions. In fact, the user’s environment will help you identify the best research method for gathering insights (interviews, diary studies, observation/contextual inquiry, usability tests, cognitive walkthroughs, etc.).
This is precisely what happened when our team conducted UX research for a manufacturer of large construction equipment. We could have brought machine operators to a quiet showroom to ask them questions about the equipment and what did and did not work well.
This would have been the easy but incorrect choice. Instead, we traveled to construction sites in the U.S., Mexico, and Colombia where we observed operators using the equipment outside where it was dusty, dirty, and loud.
Risks of vehicle collisions due to noise and low visibility when winds were high.
The difficulty shorter operators encountered when reaching for certain controls in the cab (operators in Latin America were, on average, smaller than their U.S. counterparts).
The rapid corrosion of metal equipment caused by salt on a construction site near the ocean.
Observing users in their real-world work environment:
Reduced the risk of solving the wrong problem because we did not rely on second-hand information from sales or product (this happens more often than you might think).
Allowed us (the researchers) to hear the noise, see the dust, and feel the bumps while riding on these enormous machines.
Provided actionable insights that could not have been gathered in an office.
The author interviewing a machine operator in Colombia. (Large preview)
Our research at sites in Mexico and Colombia demonstrated the truth of the old adage. Meeting users where they worked every day yielded rich, qualitative data that our client used to inform important design decisions.
2. Compromise
This was a good outcome. The fieldwork in Mexico and Colombia identified real-world problems, and stakeholders acted on this information.
This is not always the case. There is a temptation to make design decisions quickly based on incomplete information as happened to Walmart when management decided to change aisle and shelving design based on a customer survey. When customers were asked if stores were too cluttered, they said yes. Walmart spent millions re-designing stores only to lose more than $1 billion in revenue. When Walmart reverted to the cluttered aisles, sales increased. What happened?
Two reasons for this fiasco were likely a poorly worded survey and incomplete analysis. Walmart relied too heavily on what customers said rather than what they did. The importance of placing considerable weight on what users and customers do is a bedrock principle in customer and user experience.
“Rather than just ask shoppers what they think they would like, I can follow someone through their shopping trip in a grocery or mass merchandise store like Walmart and Sam’s Club and then interview them as they load their bags into the car. What is striking is the wide gap between what they say they did, and what I observed.”
Underhill, a legend in consumer and market research, is exactly right. Unfortunately, even when stakeholders agree to fund observation (ride-alongs, shop-alongs, contextual inquiry), there is considerable pressure to move forward the moment a UX or market study is done leaving little time for thorough analysis.
The goal in these situations is to strike a balance between speed and thoroughness. Product managers and other stakeholders have a great deal of responsibility and are often under pressure to move products to market quickly. Rushing the design process, however, can result in overlooking key user needs emerging from research.
Compromise during the transition from research analysis to design serves two purposes. First, it allows researchers sufficient time to review, reflect, and report accurate and actionable findings that will help the design team move forward. Second, as with any endeavor, a willingness to compromise establishes a degree of trust.
3. Better Design Decisions
Compromise and trust are a sound basis for establishing a constructive relationship between researchers, designers, and stakeholders. Such relationships contribute to an environment conducive to better design decisions. These points seem straightforward, even obvious.
Straightforward perhaps but not easily achieved. Why? Human nature. Humans are subject to what psychologists call the endowment effect, the tendency to overvalue objects you own simply because they belong to you. Selling a house is a classic example. As the homeowner, you are emotionally attached to your house because you’ve put effort into maintenance and improvements. The house holds fond memories. After all, you live there. None of this matters to the buyer. She only cares about the objective market value and getting the best house for the least amount of money.
Endowment Effect: Emotional attachment leads to an inflated sense of value. (Image by Pexels from Pixabay) (Large preview)
Once the endowment effect takes hold, it’s difficult for people to part with the object, a house in this example. In the context of design, changing a UI or physical product is roughly equivalent to parting with it.
For example, while evaluating a complex UI for a programmable logic controller, the product manager announced to me and a room full of stakeholders: “My name is Jim, and I love this product.” Points for honesty. As expected, when I delivered the report, Jim held firmly to his belief that the UI was fine and did not require modification. He was, understandably, attached to the machine and the UI. Unfortunately, the company’s customers did not share this attachment as illustrated by ongoing customer complaints.
The data supports this conclusion. According to the McKinsey report mentioned above: “Less than 5 percent of those we surveyed reported that their leaders could make objective design decisions.”
The endowment effect is one of many barriers to making sound design decisions. See A Designer’s Guide To Better Decisions to learn how to avoid other, common decision traps.
Awareness of the endowment effect and other decision traps contributes to better design because it allows us to make tough choices during the actual design process.
4. Design Reduction
One such choice is what to remove from an existing design or an early design iteration. For example, the image shown below left could easily be an early iteration of a mobile app.
Few will argue against the power of simple, elegant, and engaging design. Such successes are often the result of careful, thoughtful reduction. From the number and size of elements on the screen to the simplicity or complexity of the color palette, it all comes down to reducing the design to the point that it’s clean and easy to use without removing anything essential.
Even in the cleaner example (above right), a designer might ask if “This Month” and “165: Max Pulse” are necessary. If not, removing them would be yet another reduction.
The point is not to debate the UI details for this fake fitness app. Rather, designers must anticipate the “everything-but-the-kitchen-sink” effect and make the case for removing unnecessary design elements. Effective techniques include:
Gently reminding stakeholders and other team members about the risks of a heavy cognitive load.
Sharing cluttered designs (any app or site will do) with the team and asking them to quickly locate a specific feature. Their struggle to find the feature will make the point.
Sharing video clips of past research projects for your company showing how easily users become confused when interacting with a crowded UI.
Adhering to this reduction technique early in the design process benefits the business by decreasing the chance of user confusion, task or cart abandonment, and unhappy customers.
Design reduction is essential to creating engaging, user-centered design but only works when coupled with rigorous user research that contributes to informed design decisions.
Conclusion
Because research, decisions, and the design process go together, the focus of this article has been to identify the risks of rushing user research and design. Mitigating this risk does not require doubling the size of research and design teams. Instead, we’ve proposed four practical techniques that teams can implement immediately:
Context over convenience
Location matters. Whether at home, a café, or on a noisy construction site, conduct UX and market research where users will be when interacting with your product.
Compromise
When business stakeholders cannot simply wait for a thorough analysis, compromise. At the stakeholder’s direction, the design team can move forward with limited design changes while agreeing not to make major changes until the final research analysis is complete.
Better design decisions
Make better decisions by keeping an eye out for the all-too-human tendency to become attached to a design you have created.
Reduction
Remove unnecessary UI elements leaving only what is necessary for users and customers to complete the task at hand.
You have noticed that there is a new design trend that is floating around web design since 2019, the dark mode. Facebook, Apple, and Google both introduced the dark version of their software.
Why a dark theme
Most of you probably think this is just a trend that will disappear after some years, well, let me say that this is not like many other trends, dark UI provide different advantages and they are not something just related to the “designer mood”. Let’s see why a dark mode on your applications and websites are something useful.
Better for batteries
Pixels on a screen consume more energy to display light colors rather than dark ones. Consequently, devices’ batteries can save energy and improve their daily duration while using dark UI.
Better for dark environments
Most of us use their smartphone and laptops while at home. Such environments are typically not so bright. The dark mode can help the use of the application while indoor, without causing visual disturbances.
Better for people
Some people with — or without — visual diseases, like epilepsy, can have unfortunate events by being flashed by bright applications. Having a dark mode means being more accessible.
Preparing styles
A very simple theme switcher should offer at least 3 options:
Dark theme
Light theme
Automatic theme (should be on by default)
Wait, what’s the automatic theme? Well, modern operating systems allow users to change the global visual appearance by setting os-wide options that enable the dark or light mode. The automatic option make sure to respect the OS preference if the user has not specified any theme.
To make this even more simple, we’ll use PostCSS and a simple but useful plugin called postcss-dark-theme-class.
yarn add postcss-dark-theme-class
This plugin will do 70% of the work, once installed, add it to your PostCSS config and configure the selectors you want to use to activate the correct theme, which will be used by the plugin to generate the correct CSS:
Once the plugin is up and running, we can start defining our dark and light themes using a CSS specific media query prefers-color-scheme. This special media query will handle the automatic part of our themes by applying the correct theme based on the user’s OS preferences:
If the user is using a dark version of his OS, the set inside the media query will apply, overwriting others, otherwhise the set of properties outside the media query is used. Since it’s pure CSS, this behaviour is on by default.
Browsers will now adapt the color scheme automatically based on the users’ OS preferences. Nice done! ? Now it’s time to make the theme switcher allow users to specify what theme to use, overriding the OS preference.
Making the theme switcher
s we said, our switcher should have three options, we can use a simple select element, or build a set of buttons:
We’ll build the switcher using vanilla JS, but you can do it with any framework you want, the concept is the same: we have to add the selectors we defined inside the PostCSS plugin to the root element, based on the clicked button.
Each time we click on a theme button, the value set as data-set-theme is applied as value of the data-theme attribute on the document root element.
Check it live:
Where is the magic?
The magic is made by postcss-dark-theme-class — which will add our [data-theme] custom attribute to the :root selectors we wrote — during the CSS transpilation. Here what it generates from our code:
You may notice that the --accent-color custom property defined inside themes doesn’t change. If you have colors that will not change based on the theme, you can remove them from the prefers-color-scheme at-rule.
In this way, they will not be duplicated and the one defined outside the media query will always apply.
Creating a presentation is one of the best ways to convey information to a wide audience in an easy-to-follow manner. Such presentations are often made using attractive and unique designs to help draw-in viewers. One style that has remained popular among presentation designers throughout the years is “minimalist” presentations.
Minimalist presentations rely on the concept of “less is more” and are focused on conveying their content using simple yet tasteful slide designs. Previous generations were led to believe that designing elaborate and complex presentations was the best way to attract attention and engage viewers. However, the proliferation of such designs eventually led to viewers feeling fatigued by these dense and often crowded looking slides.
Minimalist presentations aim to avoid overstimulating viewers with their designs, so that the information contained in their content remains the primary focus. Here are 4 things to consider while designing minimalist presentations.
1. Limit colour schemes
Drawing on the concept of “less is more”, creators of minimalist presentations should opt to use as few colours as possible in their designs. This means using similar colours for each slide across the presentation. Monochromatic colour schemes are often used for this purpose.
Monochromatic colour schemes
Monochromatic colour schemes are especially effective at conveying tasteful and attractive designs while utilizing only a single hue. This primary hue is accompanied by other colours that are lighter tints or darker shades of the same hue.
When used effectively, these variations can highlight or add intensity to certain sections of a presentation slide without departing from the primary hue. This could be useful if the primary hue is based on the colour of the company’s logo, thereby giving viewers a subtle nod towards the company that made the presentation they are viewing.
Complementary colour schemes
Complementary colour schemes rely on using colours that are opposite to each other on the colour wheel. Common complementary colour combinations include orange and blue, or red and green. They are often used to create contrast and are great for highlighting certain sections.
Once the two complementary hues have been chosen, designers can add monochromatic shade and tint variations to bring more depth to slide sections. Designers should be careful not to go overboard with tints and shades, as too many variations could feel like a departure from minimalism.
Analogous colour schemes
Analogous colour schemes are also selected based on the position of colours on the colour wheel. In this scheme, colours are paired with other colours that are adjacent to them on the colour wheel. This creates colour pairings that contrast less with one another compared to complementary colour schemes.
Analogous colours usually resemble each other, or appear to be from the same “family” (e.g: orange and yellow), so they are easier to look at for extended periods of time compared to analogous colour schemes. Such colour schemes offer a nice middle ground between the low contrast of monochromatic colour schemes, and the high contrast of complementary colour schemes.
Whichever colour scheme you end up selecting, it’s important to remember to keep your audience in mind. The colours you select should be easy to look at, and enhance the look of your content, rather than distract from it.
2. Utilizing negative space
One key consideration when designing a good presentation is to use the empty space on slides in the most effective manner possible. Designers should make sure each slide possesses enough “negative” space to give other content on the slides such as images and text with space to breathe.
Slides that are densely packed with information and images often have a cramped appearance and can feel tedious to read. This is why it’s important to ensure each slide has some breathing room.
Designers can also use negative space in more artistic ways that bring out the contrast between slide contents and the empty space between them. This negative space doesn’t have to be limited to just black or white backgrounds either. A background that consists of a single, warm, easy-to-look-at colour can function as negative space to the elements that are overlain onto it.
3. Fewer elements
Using fewer elements is the core concept that drives minimalist designs. In this case, “elements” refer to the text, images, and infographics on your slides. Designers should look to condense all their information contained in the slide down and rework it into a suitable format that can be applied across the presentation.
For example, text-heavy sections that explain a particular concept or process can be reworked into a flow chart that takes up less space, while giving the information a more streamlined appearance that is easier to follow.
This results in a more efficient looking presentation design. London is home to more than one digital design agency that utilizes such design concepts when creating effective presentations for businesses. When in doubt, designers can look at the minimalist designs used by other digital design agencies to learn the best ways for presenting slide content.
4. Learn from other templates
Each of the aforementioned tips is useful for enhancing a particular aspect of slide design. However, the best results come from using the right combination of colours, elements, and negative space.
While many designers are capable of coming up with unique combinations themselves, it’s always helpful to look at other templates to see how others are using minimalist designs in their presentations. This could be especially helpful for designers who are having trouble making the different elements of their presentations work together.
By looking at templates made by other designers, it’s possible to develop a better understanding of the aspects of a certain design that do or don’t work together. This knowledge can then be implemented when designing your own unique minimalist templates.
Competition between presentation designers is at an all time high in the digital era. So presentation designers need to utilize all the resources at their disposal to come up with unique and captivating minimalistic designs that are easy on the eyes while still grabbing the attention of viewers.
What I meant is that serving resources like images, CSS, and JavaScript from a CDN is fairly straightforward. The industry at large has been doing that for many years. An asset with a URL can be moved to a CDN and served from it. Changes to that asset are usually handled by changing the URL (e.g. style.324535.css, style.css?v=345434 or the like) so that we can take full advantage of browser cache. But HTML is a little different. The URLs to our HTML are the URLs of our public-facing websites and those URLs don’t change.
Historically, we’ve said “oh well” to this. Our web servers will serve our HTML and we’ll just do the best we can with performance there. But the Jamstack approach is changing that by saying, actually, we’ll serve that HTML from a CDN as well.
Guillermo Rauch calls that “hoisting” and likens it to how JavaScript hoists declarations higher in code. Jamstack hoists static assets higher in the hosting stack.
What Jamstack as a software architecture has now made possible, however, is to hoisting the results of computation to the edge, right next to where your visitors are.
A core tenet of Jamstack has been to pre-render (pre-compute) as much as possible, which has given prominence to static site generation. The key idea is that computation that would have happened later on, in the request’s timeline, has now been shifted to the build phase, performed once and made available for all users to share.
Hoisting, notably, happens automatically. What can be hoisted will be hoisted. But things that need servers to run (e.g. cloud functions and API stuff) can still do that. Getting even more complex, in our talk with Brian Leroux, Dave and I got into how even the results of cloud function execution can be put on a CDN and cached.
WordPress 5.4 was released not so long ago and, along with other improvements and bug fixes, it introduced a feature called Block Variations. I had a chance to use it on one of my recent projects and am so pleasantly surprised with how smart this feature is. I actually think it hasn’t received the attention it deserves, which is why I decided to write this article.
What is a Block Variation?
Block Variations allow developers to define instances of existing blocks. An example that you’ll see below is a quote block. Perhaps your site has three variations of how to display a quote on your site. A Block Variation can be created for each one so that they are all styled differently. This sounds awfully familiar with how Block Styles, but the concept of variations goes a bit further than that, as we’ll see.
How are Block Variations different from Block Styles?
Fair question. Block variations appear in the inserter as separate blocks with unique names and (optionally) icons and can have pre-filled custom attributes, and inner blocks.
Block Styles are designed to alter the look of the block. In fact, a Block Style is a fancy way of adding a custom class to a block using the Block options in the post editor.
The difference is clear when you consider how each one is used in the post editor. Let’s say we register a new Block Style called “Fancy Quote.” We do that by extending the core “Quote” block like this example from the Block Editor Handbook:
This adds a .is-style-fancy-quote class to the Quote block settings in the post editor.
We now have a Fancy Quote option in the Block options under “Styles” and the class for it filled in for us.
Even though it sort of sounds like it would do the same thing (which it technically can), a Block Variation can be used to pre-fill custom attributes (including custom classes) and inner blocks. They’re actually registered as separate blocks.
Let’s take a closer look at the API and what block variations can do.
Creating a Block Variation
The API for registering Block Variations is very similar that of the Block Style we just looked at:
The registerBlockVariation function accepts the name of the block (in our case it is core/quote) and an object (or an array of objects) describing the variation(s).
The code above doesn’t do much by default, but it does add “Fancy Quote” to the list of available blocks.
We now have two different “quote” blocks available to drop into the post.
To take full advantage of the variation. we need to provide more details in the object describing it. The list is covered in the Make WordPress post, but I’ll share it here and provide additional comments.
name – The unique and machine-readable name of the variation. Following the examples on Github and Make post it’s safe to assume that the best practice is to use kebab-case for naming variations.
title – A human-readable variation title. This is what appears under the icon in the Inserter.
description – A detailed variation description. Appears in the Inserter as well. If empty, the default block description will be used. (Optional)
icon – An icon for the variation. Can be a Dashicons slug, an SVG or an object. Follows the same declaration pattern as in registerBlockType. (Optional)
isDefault – Indicates whether the current variation is the default one. Defaults to false. In case of our example, if we set it to true, the Fancy Quote block will be the only Quote block available in the inserter. (Optional)
attributes – Values that override block attributes. These are block-specific. You can set the level for the Heading block or height for Spacer, for example.
innerBlocks – Initial configuration of nested blocks. Only applies to blocks that allow inner blocks in the first place, like Columns, Cover, or Group. We’ll cover this in one of the examples. (Optional)
example – Example provides structured data for the block preview. You can set it to undefined to disable the preview shown for the block type. This is the same as the example field in registerBlockType. (Optional) There’s more information available on this parameter.
scope – The list of scopes where the variation is applicable. When not provided, it assumes all available scopes. Available options are block and inserter. We’ll cover this in detail in one of the examples.
Many of you may wonder why we need this extra layer of abstraction. Let me try to answer that with a few use cases (one form my recent project).
Use case: Buttons with different widths
Let’s say you have a design system with two types of buttons: Fill and Outline.
Fill and Outline button styles in the design system
Lucky you, because these are the default styles for buttons in WordPress. No need to register any new styles or hack the editor. All you have to do is write some CSS for each style and call it a day. Life is good and everybody’s happy.
But then you look in the design spec again and notice that there is a little twist. The buttons come in three widths: Regular, Wide, and Full.
Fill and Outline button styles with different width variations
Dammit! You are a little upset because you now have two options:
Write two extra classes for the new button sizes (say, .is-wide and .is-full), then teach the client to use the Advanced panel in the editor to add those classes and write a manual where you explain what each class does. Or…
Register four(!) new styles that go in the Block options: Fill Wide, Fill Full, Outline Wide, and Outline Full.
Neither of those options are exactly elegant. (BTW, what is Fill Full exactly? Quite an unfortunate mouthful!)
There are two more options that I didn’t include in the list:
Filter the button block and add a custom width control to it
Build a custom block from scratch.
These obviously feel like heavy lifts for such a simple task.
Enter Block Variations! By adding just two variations, Full and Wide, we can keep things clean and simple:
This is the same as adding a custom class to the Buttons block, but in a neat and elegant way that can be dropped directly into a post from the Block Inserter:
Button variations in the inserter
Life is good and everybody is happy again! So what did we learn from this example?
It shows that Block Variations are not designed to replace Block Styles. In fact, they can work pretty well together even if the variation just adds a class to a block.
It demos how to register multiple variations in a single declaration.
Use case: Repeating column layouts
Let’s say you are a designer and have a portfolio website with case studies. Each case study has an intro section with the name of the project, client information, and a description of your role on the project. It might look something like this:
The type of work (left), who it was for (center) and your role on it (right)
The problem is that it’s a bit tedious to build this part of the layout every time you create a new portfolio case study — especially because the Client and My Role headings never change. You are only editing the main title and two paragraphs.
With Block Variations, you can create a variation of a core Columns block called Project Intro that will have the columns, and inner blocks already defined. This example is a bit more involved, so we’ll build it out step-by-step.
We are taking this example a bit further than the first one, so why not add a custom portfolio icon from the Dashicons library that’s baked right into WordPress? We do that with the icon property.
But this only gives us three empty columns. Let’s add starter content and inner blocks to each of them. We can use the same pattern we use to declare a block template in the InnerBlockscomponent. We can add an object with block attributes as a second element in the array describing the block, and an array of inner blocks as the third element.
Cool, now we can insert the whole section with just one click. Okay, it’s a few clicks, but still faster than without using the variations.
So what did we learn from this example?
And demos how to use the inner blocks within the variation
It shows how to define a custom icon for a variation
Use case: Four-column layout
You already know that columns are a default block type, and that there are a handful of options for different types of columns. A four-column layout isn’t one of them, so we can build that. But this introduces a new concept as well: scoping in context of block variations.
Some core blocks, like Columns, already offer variations out of the box. You can choose one of them after you insert the block on the page:
Block-scoped variations
Let’s say you use a four-column layout on your website as often as you use two-column one. That’s unfortunate, because there is no shortcut button to create four-column layout. Creating one is a bit annoying because it takes extra clicks to get to the Columns control after the block is inserted:
So, what can you do to improve this workflow? Right, you can add a Block Variation that will create a four-column layout. The only difference this time, compared to previous examples, is that it makes much more sense to include this variation inside the block placeholder, next to all other column layouts.
That is exactly what the scope option is for. If you set it to [block], the variation will not appear in the Block Inserter but in the variations once the block has been inserted.
I’ve omitted the full SVG code for the icon, but it’s available if you need it.
To sum up scope: If it isn’t declared, the variation will appear in the Block Inserter and inside the block placeholder — specifically for blocks that support block-scoped variations.
If we were to remove the scope parameter from the example above, here’s how the variation would appear in the inserter:
Keep in mind that the icon sizes for variations within the block and and the block icons size are different. The custom icon for columns was intended for the block scope, that’s why it looks a bit out-of-place in this example.
So what did we learn from this example?
It explains the difference between the block and inserter scope for the variation.
We learned how to use SVG for variation icon.
That’s it!
As you can see, Block Variations are pretty powerful for building a lot of things, from different variations of buttons to complete page layouts.
I’d like to wrap this up with a quick recap of different APIs for block customizations and when to use them:
Use Block Styles if you need to alter the appearance of the block and adding a CSS class is enough for that.
Use Block Variations if you need to specify the default attributes for the block and/or add inner blocks to it.
If that’s not enough and you need to change the markup of the block, you are probably looking into filtering the block or creating a new one from scratch.
If you’ve had a chance to play with Block Variation, let me know what you think of them in the comments!
It’s fairly straightforward these days to get set up with the WP CLI ‘scaffold’ command. This command will set up a WordPress theme or plugin with a ‘blocks’ folder that contains the PHP and base CSS and JavaScript required to create a custom block. The only drawback that I noticed is that the JavaScript uses the old ES5 syntax rather than modern ESNext. Modern JavaScript allows us to write more concise code and use JSX in our custom block code.
You can also use the ‘create-guten-block’ tool by Ahmad Awais. It gives you a lot of the boilerplate stuff you need out of the box, like Webpack, ESNext support etc. Setting it up is fairly straightforward, and it’s similar to Create React App.
I’ve used create-guten-block for the handful of custom blocks I’ve made so far, and have found it a pretty nice experience.
But… I feel like I just sort of lucked into being comfortable with all this. I have one foot in WordPress development and just so happen to have one foot in React development. Building blocks with both technologies together feels decently natural to me. If blocks were Angular or something, I feel like I might not have even given it a shot.
I’ll echo this sentiment:
I also found it really annoying working on a block that’s actively changing in code. Every time you reload Gutenberg, you’ll get the “This block appears to have been modified externally…” message because the markup of the block has changed.
At the end, Peter mentions the approach of building blocks that Advanced Custom Fields has. It almost feels like a weird bizarro-reverso world. The ACF approach seems more like what WordPress would have done in a normal world (building blocks with just PHP and templating) and third-parties would be the ones adding all the fancy React stuff.
About six years ago, a colleague I’ll call Tom, because that’s his name, forwarded me a link to the ‘WASD CODE’; a keyboard focused on the needs of programmers, designed with the help of Stack Overflow’s Jeff Atwood.
I had no idea at the time that there were people actually dedicating themselves to creating keyboards beyond the stock fare shipping with computers. As I read and re-read the blurb, I was smitten.
The keyboard that started an obsession: The WASD CODE. (Large preview)
So it came to be that shortly after, I spent $220 on my first mechanical keyboard. I imagine that many of you reading this, who have never had a mechanical keyboard, will wonder if I was of sound mind. For those that have, they likely understand entirely.
For some, mechanical keyboards elicit the same nuanced fanaticism as typography. Let me qualify that analogy.
For those who get drawn into typography, it can become an obsession. The need to choose just the right font for a heading. The ability to spend hours pouring over the descenders of various ‘g’ glyphs. The endless marveling at the merits of Helvetica.
Others, meanwhile, would be happy to just use Lobster and move on.
Just as someone versed in typography can explain to you why a font makes you feel a certain way or has a particular effect on the reader, a mechanical keyboard proponent can extol the virtues of their keyboard, their choice of switches, their particular layout and materials chosen. Take a look at the breadth of variety on offer.
I can’t tell you what’s so bad about using Lobster, but I’m going to take a shot at explaining why you might want to try a mechanical keyboard and feel a greater physical connection to the primary tool of your trade.
Our Primary Input Mechanism
For decades, keyboards have been the primary mechanisms by which we interact with our computers.
If you spend 8 hours a day working, and maybe half of that typing, for a 5-day week and 48-week working year, that’s 960 hours of typing on your keyboard every year! Despite that sobering figure, most of us just use whatever keyboard is shipped with the computer.
Look down at the grubby, unloved implement beneath your fingers. When was the last time you actually sharpened that sword? How often do you use each of the keys you press? Are the most used keys within easy reach? What about the tactility? How do the keys themselves feel? Is the travel of the keys helpful? Do you wish the travel was greater? Do you wish it was less? What about the sound? Does it annoy you? Does it annoy those around you? Do you have helpful shortcuts to adjust your volume? Skip a music track? Perform an oft-used set of keystrokes? Or what about an easy way to toggle between typing on your computer and typing into your phone?
Mechanical keyboards exist to answer as many of these questions as possible.
What Is A Mechanical Keyboard?
Generally speaking, it’s possible to define a keyboard as mechanical if it uses mechanical switches for each key.
Firstly, let’s consider the everyday alternative to mechanical switches. Typical, inexpensive, everyday computer keyboards often employ rubber dome switches. As the name implies, these are constructed with a sheet of rubber domes above electrical switches. You press down on a key and the dome collapses causing the key to be switched. You lift up your finger a little and the rubber dome plops back into shape and the key is no longer pressed. Rubber dome switches are popular because they are so cheap compared to manufacture. However, they are certainly not the best way of solving the problem of registering a keypress.
Mechanical switches offer a range of tactility unavailable with rubber dome keyboards.
Mechanical keyboards are enjoying a renaissance, which although has been going on for a number of years, is really starting to gain more widespread adoption since being embraced by the gaming community.
Now, before we get much further into this, I feel it’s my duty to be quite candid. I often read people justifying mechanical keyboards due to the fact that they ‘last longer’. Whilst this is possibly true, I don’t ever remember wearing a keyboard out. And you could probably buy a lifetime of budget keyboards and still have change left compared to the costs of a mechanical keyboard.
Buying a mechanical keyboard is not an exercise in sound economics. It’s about finding the best possible version, for you, of a tool you use almost every day. A keyboard that has just the right layout, feel, and aesthetics. Once you have your keyboard, I like to think you will rise every morning chanting the mechanical keyboard owners Creed:
“This is my keyboard. There are many like it, but this one is mine.
My keyboard is my best friend. It is my life. I must master it as I must master my life.
Without me, my keyboard is useless. Without my keyboard, I am useless. I must type my keyboard true. I must type faster than my colleague who is trying to better me. I must program things before he does. I will…”
The sheer wealth of permutations when it comes to mechanical keyboards can be mind-boggling. In this article, we will concentrate on the broadest strokes. The considerations we feel are most important to understand if you entertain purchasing a mechanical keyboard.
Arguably the single most obvious distinguishing feature of a mechanical keyboard compared to a ‘normal’ keyboard is the switches.
There are a plethora of different mechanical switches for keyboards. They can be most easily categorized by the physical shape and stem mounting. The latter is the protruding mount that the keycaps attach to. The switch ‘type’ is the defining characteristic of the switch itself — typically categorized as ‘linear’, ‘clicky’ or ‘tactile’.
Physical Switch Differences
Far and away, the most common physical type of switch is ‘Cherry MX’ as well as the now numerous Cherry MX clones.
Historically, due to patents, the manufacturer, Cherry was the only brand able to make switches with their mount system. Now their patent has expired, there are a number of other manufacturers offering comparable and compatible switches for less.
Nowadays, it isn’t necessary to get hung up on getting a board with genuine Cherry brand switches. I’d argue that there are brands being far more progressive and innovative in switch development these days. Kailh is a Chinese brand that not just makes comparable switches for MX mounts with color designations (such as ‘Blue’, ‘Green’, ‘Red’, and so on) to approximate the equivalent Cherry switch (we’ll cover color designations for switches in a moment), but they also produce ‘box’ switches which are IP56 dust and water-resistant, as well as ‘speed’ switches aimed at gamers. These have shorter travel resulting in quicker switch actuation. Hence, the ‘Speed’ moniker.
Kailh produce comparable and often more interesting switches than the original Cherry models. (Large preview)
There are also many other fine key switch types that bear no relation to Cherry — Topre being a personal favorite. Topre switches are designed and built in Japan and give a marvelous tactile feel that some swear by. However, they are expensive and subsequently less common.
If you want a decent idea of the most popular options, take a look at the list available on the Keyswitch guide at the Mechanical Keyboards store.
Key switches — especially Cherry MX and variants — are typically labeled by color; for example, ‘Blue’ or ‘Brown’. Different colors are attributed to different switch types; most typically, a switch that is either linear, tactile, or clicky.
Whilst trying to describe the way a key switch feels in words might seem like an exercise in futility, I’m going to attempt just that regardless.
A linear switch is just like a linear animation, there are no curves, you press down and the resistance feels constant all the way down until the switch ‘bottoms out’.
A tactile switch is more like an easeInQuart animation curve; there is a sort of bump at the top you have to get over and then it moves down like a linear switch until bottoming out. This little bit of tactile resistance at the top of the keypress is what earns them the label of ‘tactile’.
A clicky switch is a bit more simple to communicate. It has a similar kind of bump at the top like a tactile switch but makes an audible click on actuation (or both directions in the case of Kailh Box Whites, for example).
For each switch type, there are differing key switch ‘weights’; that is, how much force is required to make the switch do its thing. Key switch actuation force is often measured in cN units (centinewton). Again, colors are arbitrarily assigned. So, for instance, a Kailh Box Red is a soft linear switch whilst a Kailh Box Black is also a linear but heavier. There’s no real sense to the color designations, simply that Cherry made them originally and now others follow suit.
Now, in a geeky topic, the subject of key switches can take on proportions of geekiness even I get uncomfortable with.
So, in the interests of trying to keep you with me, the TL;DR of keyboard switch types is this: If you are looking for a mechanical keyboard (perhaps your first one), opt for a board with Cherry MX, or Cherry MX compatible switches such as those made by Kailh. Choose a switch type which, at least on paper, sounds appealing. Buy it, and see how you get on.
To offer just a little more broad guidance:
Like the idea of linear switches? Go for Cherry MX or compatible red switches.
If a tactile switch seems like it would be your bag, opt for MX brown or compatible switches. If you can find a good offer on a Topre-based board a Happy Hacking or Realforce, that would be a solid choice, too.
Does a clicky switch appeal? MX Blue or compatible switches for you.
I’m making such broad recommendations because ultimately it’s all preference anyway. However, if you do go for switches with an MX mounting stem, then you give yourself the greatest number of options when it comes to keycaps.
Despite telling you it is all preference, we thought it might be useful to try and describe the differences in the mechanical keyboards switches from first-hand experience.
Subjective Switch Feel
We tried a number of different Kailh switches in a 87-Key TKL keyboard for comparison. We also tried a WASD CODE v2 with MX Blue switches, and a WASD CODE v3 board with Zealio switches. In addition, we also tried the Happy Hacking Professional Hybrid with Topre switches.
Kailh Box Whites have a little click as the key travels down and again on the way back up, a Cherry Blue MX switch just clicks on the way down. Both are pleasant and give satisfying feedback. It’s easy to get addicted to the thick-thock-thick-thock rhythm as you type with clicky switches! However, a loud clicky keyboard is perhaps not the best choice if you work in a shared office space. Unless, that is, you want to exact ‘death by a thousand clicks’ revenge on Bob in accounts for his ridiculous booming voice!
In terms of tactile switches, the Kailh Speed Copper feels like they have a little more resistance than a standard Kailh Brown. The Kailh Speed Coppers felt very similar to the Zealio switches in the WASD CODE board. It would take a real enthusiast to be able to discern any difference in a blind test. If you were to ask me today which switch to opt for as the best ‘all rounder’ I would suggest the Kaihl Brown or Speed Copper, or the Zealio switches. All felt great for typing/coding with the tactile feel providing a nice compromise between feel and volume.
The Kailh Speed Silver switches have similar weight/resistance to the Kailh browns but as they are linear, the resistance is felt all the way down the keypress. The sound is slightly higher-pitched in the Silver than the Browns, and the Copper Kaihls are a deeper sound still.
The Topre switches are different again. They provide a tactile feel that is simply impossible to replicate in a Cherry style keyboard. There is a consistency and solidity to the keys which every keyboard enthusiast should try at some point.
I must emphasize once again that these are very fine margins. Any of these switches are going to provide a level of feedback far exceeding that of a standard ‘off the shelf’ keyboard.
Keyboard Layouts And Sizes
With the touchy-feely issue of switches dealt with, let’s move on to the next wall of acronyms and abbreviations. These deal with the keyboard layout.
Keyboard Sizes
A keyboard layout is most typically defined first and foremost by its size. Going smallest to largest:
“40%” diminutive layout where many keys are doubled up, requiring an additional key to be pressed alongside the desired one. Unless you have a specific reason to have one, I couldn’t recommend this layout for practical purposes;
“60%” typically a normal key layout minus a dedicated arrow key cluster, home/end/page up and page down or function keys;
“65%” compact like a 60% but usually incorporating at least an arrow cluster;
“75%” usually brings in a distinct function row;
“TKL” the ‘Ten Key-Less’ is a more conventional layout, think of a ‘normal’ keyboard minus the number pad section;
Full size; the typical keyboard layout complete with function keys, number pad, and arrow cluster.
For a good feel of the many layout variations, take a look at this guide on Drop.
Note: There are popular layouts that are sub-distinctions of these sizes. For example, the Happy Hacking Keyboard layout, or ‘HHKB’ as it is often referred to, is a layout over 20 years old and originally designed for UNIX users. It remains incredibly popular because it was designed around the philosophy of keeping hands around the home row, something that perpetuates for Vim users today.
The legendary HHKB keyboard has it’s own, oft imitated, 60% layout. (Large preview)
Ergonomic Keyboards
Some people stumble into mechanical keyboards in the search for a more ergonomic keyboard. One area where mechanical keyboards can honestly claim some bragging rights is in the variety of ergonomic boards and layouts on offer.
For example, consider the Ergodox EZ. This keyboard is completely split (albeit apart from a wire connecting the two halves) and enjoys the increasingly popular feature of a ‘hotswap’ printed circuit board. This means that you can easily swap out one lot of mechanical switches for another depending upon your preference. That’s certainly a good thing.
It’s common to start with mechanical keyboards favoring one switch type and then as time goes on you grow to prefer another. This way, you don’t have to buy a whole new keyboard; just replace the switches. The Ergodox EZ is also entirely programmable meaning you can adjust any key to do whatever you like. The layout choices are genuinely almost infinite.
The ErgoDox EZ is an ergonomic split design keyboard with a fully programmable PCB and hotswap PCB. (Large preview)
The ErgoDox EZ’s initial layout is itself, certainly unconventional. There’s not just the split to get accustomed to, the Ergodox EZ also has ‘ortholinear’ key layout, casting aside the staggered key layout which we have become accustomed to (a throwback to typewriters where staggering the keys was a mechanical necessity). Thankfully, the Ergodox EZ also enjoys supporting software that teaches and tests your accuracy and ultimately improves your typing speed.
Regardless of how you feel about the aesthetics, if you’re someone who suffers from a condition such as RSI, such factors are likely to pale into insignificance. As long as you are prepared to invest some time re-learning your typing, it might be the best $350 you can invest in your personal hardware, and perhaps even personal well-being.
Hotswap and programmable keyboards are getting more and more common but they remain largely a feature of ‘build your own’ keyboards. Building your own keyboard is a whole other related topic beyond the remit of this article. But be sure to let us know if that is a topic you’d like us to cover.
ANSI Or ISO
There is also the consideration of regional peculiarities; for users in the Western world this boils down to ANSI (American National Standards Institute), with the straight enter key one row high, or ISO (International Organization for Standardization), typified with the angular enter key taking up two rows of height.
The biggest differentiator in the Western world is the ISO or ANSI layout. (Large preview)
Whilst these might be the most distinct visual differences, they are not the only ones.
However, for simplicity, unless you have a reason not to, it makes the most sense to stick with the ANSI/ISO layout you use currently. Although, it is worth pointing out there are considerably more choices for keycaps and board layouts when it comes to ANSI. More than you would ever want to know about ANSI and ISO layouts can be found on Wikipedia.
Analysing Your Key Presses
At first glance, some of the smaller layout sizes such as 60% and 65% might seem completely impractical. However, you might be surprised to know just how little you use certain keys.
Rather than guessing, you can answer that question with cold hard data by logging your keystrokes for a few weeks. There are a number of programs to do this. I used Loggerman.
Loggerman runs in the background and counts up all your key presses. It then lets you run a report to show a heatmap of where your keypresses actually are. Here’s my own heat map for a three-week period.
Use a key logger to find out which keys you really need. (Large preview)
Despite the image showing a Macbook, I wasn’t actually typing on one; I was typing on a WASD Code v3 TKL. Therefore, if you do this kind of analysis, it’s necessary to think about where the keys you press a lot are on your own keyboard. What interested me looking at that was that whilst a lot of general key presses were around the centre, there are big concentrations on the escape key at the top left, the delete key, nearly top right and the arrow cluster bottom right.
I’m usually writing in Vim these days, so if you’re wondering why the escape key is used so much, it’s to exit ‘insert’ mode. Any developer wouldn’t be surprised to see delete and the arrow keys featuring heavily in my usage though — although Vim purists would berate me for not using h,j,k and l more!
So, what to take from this? If I was in the market for another keyboard, and the honest truth is, I probably always will be, I might think about looking for a layout where the physical distance between my most used keys is less. For example, something like a 65% where the escape key is on the first row and the arrow cluster is nearer to my right hand. In addition, perhaps ideally, have the backspace key (confusingly often labelled as ‘delete’ on Mac hardware, despite the fact that delete should remove characters going forward) a row further down so it’s easier to reach. Or something like the ErgoDox EZ where I can put the keys anywhere I like!
A counter situation to this might be someone who deals with numbers a lot. In that situation, a dedicated number pad would likely make a lot of sense and steer the layout decision that way.
The take away is there are lots of variations on layouts. The likelihood is that there is a keyboard layout that probably better suits your needs than the layout you use currently.
Case Construction And Connectivity
The majority of mechanical keyboards are wired. Whether that is USB-C, or Mini-USB, there is a wire going from board to computer.
However, if you switch devices frequently, or travel a lot, messing around with cables is something you don’t have to put up with. Many of the well-known mechanical keyboard brands such as Filco, Matias, Corsair, Ducky, Atom and HHKB all have wireless variants.
When it comes to case construction, the two common materials are aluminium or plastic. Like most choices, there isn’t a right or wrong, just a preference. Although wireless boards tend to be plastic to save weight and improve signal from the Bluetooth controllers.
Things that are genuinely useful to consider though are boards that make some accommodation for cable location. For example, if your nearest USB port is on the left of your computer, it might be a pain if the keyboard’s port is on it’s right side. Some keyboards have multiple ports. Some, such as the WASD mentioned at the outset have channels built into the case so you can route the cable however you like. That’s a feature I don’t see often enough from other brands but I certainly miss it when it isn’t there.
Cable routing is nice addition, helping to prevent excess cable across your desktop. (Large preview)
Aesthetically, there is a wider choice of case colors in aluminium with even cerakoting and electrophoretical coating an option. But as you might imagine, with great beauty comes great expense.
Feast your eyes on the RAMA Koyu. It’s made from a single piece of solid brass, hand polished to a mirror finish! No eating crisps at your desk with this keyboard!
If they hadn’t already sold out, it could have been yours for $1000, although keycaps and switches are extra!
RAMA is to keyboards what Rolls Royce is to cars. How about a keyboard made from solid brass? (Large preview)
Keycaps
One of the biggest draws of a mechanical keyboard is that you can easily swap out the keycaps for a different set. As we discussed in the section on key switch types, the most popular switch type, when it comes to keycaps, is ‘Cherry MX’ compatible. Therefore, by far the most ubiquitous keycap mount is Cherry MX style.
However, within the realms of the MX mount connection type there are a great many options. There are choices in terms of materials used, key profiles, and legend marking method. Let’s look at each of those.
Here are some images of popular key profile types:
SA
These are quite high keys and enjoy a sculpted shape down the rows (if you were looking at the keys side on).
“Lime” is a double-shot keycap set in SA profile made by Signature Plastics in ABS plastic. (Large preview)
DSA
DSA are a lower key and although they have a slightly curved top to each key like the SA, they do not have a sculpted shape down the rows.
“Ferrous” is a keycap set by Signature Plastics made in PBT with a DSA profile. (Large preview)
If you are just starting with a mechanical keyboard, I’m not sure it’s useful to worry too much about the key profile. However, it might be interesting to consider the kind of options available.
You might also see row numbers mentioned; this has most relevance if you are looking at a sculpted set of keys.
Row refers to the location of the keys on the keyboard and is most important when ordering a sculptured keycap family. On a standard QWERTY board, the “number” row is row 1; the “Q” row is row 2; the “A” row is row 3; the “Z” row and the space bar row are row 4; the upper “function key” row can be either row 5 style or row 1 style.
A Realforce keyboard with different shape keycaps on different rows. (Large preview)
It is also important, if ordering an after-market set of keycaps, to consider how many of each size of key you are getting. Most keycaps are single unit, referred to as ‘1u’. Wider keys are designated in full and quarter increments. For example, the Alt, Cmd and Ctrl keys on the WASD keyboard I’m typing on as I write this are each 1.25u wide, the Tab key is 1.5u, and so on. Larger keys such as Shift and Space often have more than one mount underneath and these connect onto the board with a stabilizer (or ‘stab’, as they are referred to in mechanical keyboard circles).
Legend Marking
The three most common means of marking the legend onto each key (e.g. the E on the key for E) are double-shot, dye-sublimation and laser-etching.
Double-shot involves taking two different colors of plastic and putting one within the other; the contrasting colors creating the legend.
Dye-Sublimation, or ‘Dye-Sub’, as it is more commonly termed is a process where the markings are dyed into the plastic. Think of it like a tattoo for keycaps!
Purists will argue that double-shot creates slightly crisper legends but with high quality dye-sublimation, from a reputable brand like Signature Plastics, I think the difference is academic.
Laser etching is just as it sounds, a laser etches the legend into the keycap. However, compared to dye-sublimation or double-shot, laser etched tends to wear away far sooner and are therefore far less popular.
Keycap Materials
The overwhelming majority of keycaps are made of some sort of plastic. We won’t cover more exotic materials for keycaps here.
ABS is the plastic typically used with ‘double-shot’ key-caps. It’s a softer plastic, hence more pliable. You tend to get the widest variety of color options with double-shot but the downside is that the ABS plastic can go shiny over time. This manifests with keyboards with the most used keys visibly shiny compared to the others.
PBT plastic doesn’t tend to get shiny over time as ABS does but dye-sublimation doesn’t make as many color options possible. However, it does typically enjoy a slightly textured surface which some prefer.
As ever, it’s a preference thing.
I’ve been spending the last month switching between a keyboard with SA Lime which is a double-shot ABS plastic SA profile keycap set, and a keyboard with DSA Ferrous, a DSA profile PBT set. My personal preference is the PBT set as I enjoy the slight friction from the PBT but the ABS set is certainly no hardship!
Summary
Let me try and distill everything we’ve been through here.
Firstly, mechanical keyboards offer a level of tactility in keyboards that is simply not achievable elsewhere. Furthermore, with many boards offering programmability, it means your keyboard no longer needs to adhere to the standard layout you are used to. Each key can do whatever you want it to!
You can get a layout that suits the way you use your keyboard; compact 60%, all-rounder TKL or full size with number pad plus everything in-between.
If you are someone who suffers from RSI or, simply feel your comfort might improve with a more ergonomic keyboard, mechanical keyboards like the ErgoDox EZ should be top of your list of hardware to investigate.
There is a gamut of keyboard switches available. Audible clicky switches, smoother tactile switches and fast linears are all available. If you can’t find any to try first, consider buying a board with a hot-swappable PCB. This means you can try out other switch types at your convenience without needing to replace an entire keyboard. You don’t need to go with genuine Cherry switches, manufacturers like Kaihl offer great alternatives.
Needing a portable keyboard does not mean sacrificing on quality! Keyboards like the Happy Hacking Professional Hybrid offer a premium switch feel with Bluetooth connectivity.
You can get keycaps of every conceivable colorway and profile. Take a look at Signature Plastics website for an idea of the breadth of choice available.
If you want a ‘one-stop shop’ take a look at WASD Keyboards. Not only do they offer ANSI and ISO layouts, you can also pick the color of the case, every single key color and the type of legend on the keycaps!
Manufacturers And Suppliers
Here’s a reference and reminder of all the suppliers and manufacturers mentioned through this piece.
Happy Hacking Keyboards using the revered Topre switches and the oft-imitated HHKB 60% layout.
WASD
Makers of the CODE keyboard. Offer unsurpassed choice when it comes to ordering a bespoke mechanical keyboard.
ErgoDox EZ
Ergonomic mechanical keyboards with incredible choice of switches, colors. Also feature hot-swappable PCBs and programmable layout.
After this, there is no turning back. You take the blue pill—the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill—you stay in Wonderland, and I show you how deep the rabbit hole goes.
Pre-manufactured mechanical keyboards might not be the end of your journey. It’s possible they might just be the beginning.
For the truly obsessed you can opt to build your own mechanical keyboard. It’s not as wacky a proposition as it might sound. Think of it like a Lego kit for keyboards. Choose the exact material, switch type, case style, color and flash it with whatever set of instructions you like.
In the meantime, have a think about that device you interact with day in and day out. Perhaps every key press could be that much more enjoyable, easier and satisfying if you took the time to consider that there may be something better just waiting for your attention.
Email marketing is great for staying in touch with your existing customers and attracting new ones. Also, it’s a very effective method of selling your products. According to email marketing stats, 60% of consumers say they’ve made a purchase as the result of an email marketing message they received.
There are certain types of emails that marketers use in their strategies such as welcome emails, re-engagement emails, and abandoned cart emails, just to name a few. However, one type of email can be very effective when trying to acquire new customers.
A cold email is an email you use to contact a potential customer you’ve had no previous contact with. The reason for sending this email is to gain a benefit and convince the recipient to act on your CTA. This can be making a sale, getting them to sign up for your newsletter, or just starting a conversation.
A lot of people confuse cold emails with spam, which is one of the reasons why companies avoid sending them out. However, a cold email definitely is not spam. Spam emails are mass sent emails that don’t take the recipient into account and are often even trying to con the recipient.
Here are some features that cold emails have but spam emails don’t:
A specific message that’s tailored to the email recipient
The recipient’s full name
The sender’s full and real name and their contact information
Before you can start crafting the perfect cold email, you first need to have a list of recipients you want to send those emails to. You can make a list of contacts by looking through LinkedIn or other social media, find prospects that your competitors are also targeting, and also people who visit your website.
Once you have your list, you need to segment it. Segmentation is a process where you divide your contact list into different groups based on their age, gender, industry, geographical location, etc. Once you have your segmented list, it’s time to start writing.
If you want to create an effective cold email that will catch the recipient’s attention, you need to take your time composing it and even create a few drafts before sending it out.
Keep in mind that you can’t just write anything. You need to have a good structure and follow email marketing best practices.
Below are listed some useful tips on writing the perfect cold email:
Write an attention-grabbing subject line
Without a good subject line, you can’t hope for your cold email outreach campaign to be successful, as 35% of email recipients open an email based just on the subject line. As it influences whether or not your email will be read, you need to think carefully about the message you want your subject line to convey.
Generic, spammy, and misleading subject lines are something you need to avoid unless you want your message to end up in the recipient’s trash folder. Instead, write a subject line that is fresh, induces curiosity, and doesn’t have too many words. In addition, you need to personalize the subject line and if possible, make it informative.
Keep the email as short as possible
Getting the recipient to read the entire email is your goal. Unfortunately, the chances of them doing that significantly decrease if the email is too long. Don’t beat around the bush for too long. Instead, tell them why you’re contacting them, and make sure the recipient understands the point of your proposal.
Personalization is your best friend
Personalizing your cold email is much more important than you think, as people love to see that you put in the effort to learn their name and address the email accordingly. Personalization shows your recipient that you thought about who they are and what interests them.
With personalization, you can also show them why you chose to email them specifically and not someone else. Make the recipient feel like they’re talking to a friend or an acquaintance instead of sitting through a sales pitch.
Always include your personal information, but know where to put it
It’s just as important to put your personal information in the email as your recipient’s, but where you put it is just as important. A lot of cold emails start with “Hello, this is XY” and that is another thing that will remind your recipient of a sales pitch.
Instead, you should keep your signature at the end of your email. Include your full name, company, contact information, and a photo. The body of your email is just for your main message and the end of the email is to show your recipient that they’re chatting with a real person, not a bot.
A lot of cold emails require a follow-up email, it’s a normal practice. However, it’s important to know how and when to send these follow-ups so the recipients don’t get annoyed by them and actually want to continue communication.
Here are some good practices for follow-up emails:
Allow the recipient to opt-out. Sometimes, people aren’t interested in communicating with you and you need to know who those people are so you don’t waste their time or your own. Ask them if they don’t want to hear from you anymore in a polite way in your follow-up email.
Keep it casual. These emails are designed to act as a reminder to the recipient, they’re not a new opportunity to try and sell something or accuse them of ignoring you. Have a casual tone and just “check in” on them.
Don’t spam. Even though cold emails aren’t spam, you can make them seem that way if you send your follow-ups too often. Allow your recipients a reasonable amount of time to respond to your first email, and send follow-ups a week apart.
Send a “Thank you” email. After four or five follow-up emails, it becomes obvious that the recipient isn’t interested. Sign off by sending them an email where you thank them for their time and ask them to contact you in case they have a change of heart.
It can be hard to get cold emails just right, that’s why it’s important to test your strategies and look for ways you can improve them. Some small things can really influence how recipients see your emails, so even one seemingly insignificant change can improve your strategy and boost your email open rate.
Use A/B tests for each aspect of your email and make tests on multiple email accounts to see how recipients react to these differences. And don’t forget to always preview and proofread your content before you send it out, so you can be sure that what ends up in the recipient’s inbox is how you imagined it.
Final thoughts
If you apply everything you just read about in your cold email marketing campaign, you can make great cold emails that not only capture the recipient’s attention but also get them to act on your CTAs. Don’t discard cold emails as most companies do. Instead, use their full potential and create an effective cold emailing campaign.
Are you sure everyone on the web can easily access your website? ‘Cause if it is not accessible to everyone, you are losing some great business opportunities!
This article is going to put some shades on this “web accessibility” term. Also, you will get to know why it holds so much importance in today’s digital market.
So, What Does “Web Accessibility” Refer To?
In simpler words, “web accessibility” is an effective way to ensure “everyone on the web” can effortlessly access and use any forms of digital media. It can be a website, or it can be any software application as well.
Now, why did I focus on the part “everyone on the web”?
Well, you have to understand that people with any physical disability or cognitive limitations use the web too. A recently made research report highlights that in the United Kingdom; nearly 11 million people have some kind of disability. And it does not mean that every one of them cannot just use the web!
Of course, many disables use the internet. And they too are part of the audience that seeks favors through digital services. Hence, it is the responsibility of the trades to consider them and craft a hassle-free journey for them on the web.
This is why paying mind to the web reachability practice while building a website makes sure that everyone can get the most out of the website and interact with the site smoothly.
How The User Experience Gets Affected By Disability?
To guarantee properly done accessibility, reaching the root of what is causing the hindrance, what is stopping the flawless access is kind of essential. Only then figuring out the base of the issues and coming up with the right way out to resolve the barrier becomes easier.
So, here is a list of some accessibility challenges.
Users with visual impairment may face problems while reading a text. Maybe the size of the text needs to be increased. Or maybe they need screen readers!
Users, who suffer from color blindness, cannot distinguish between the colors. They face problems in distinguishing text blocks and its background.
Users with dyslexia suffer from not being able to read and spell properly.
There are users out there who feel troubled to click on any link or any small navigation icons.
You add video and audio content to your website to keep your visitors engaged. But people with hearing troubles cannot access it!
Any users who come under the aforementioned categories need assistive technologies so that they can browse the web easily.
A Sneak Peek to Some Assistive Technologies
Continuing from the above point, I would like to draw your attention to some advanced technologies that help disable users to get a smooth web browsing experience.
Braille Terminals or Braille Keyboards
Screen Reader Software
Speech Recognition Software
Sign Language or using subtitles for videos on a website
Screen Magnification Software
Keyboard Overlays
Now, Why Is Web Accessibility Necessary?
See, today, the Internet and Web are crucial parts of everyone’s lives, and it doesn’t need any special explanation. These are the valuable resources that we all need in our lives.
Be it for the government or business organizations, be it for employment or for students to learn better, be it for the healthcare industry to simply recreational activities – to do anything, we access these resources.
Now, do you think it should be accessible to only the people who do not have any kind of disabilities? Of course not!
You have to keep in mind two factors i.e. an equal opportunity for everyone along with giving everyone the same access. You need to understand that internet access is not considered as a privilege. Rather, it is a right for everyone. And by abiding by the principles of web design that supports accessibility, you can make sure of the fact that your digital presence is accessible to anyone irrespective of their abilities.
Other than this, there are some business benefits of web accessibility too.
A Competitive Advantage in the Market
Honestly, most of the websites built out there are not accessible to “everyone”! In such a scenario, if you make your website keeping the web accessibility factor in mind, it can reach a broader target audience.
Reshaping a shopping website for the disabled buyers out there will increase client numbers on the website, as well as the popularity of it. All because the website is usable for both enabled and disabled audiences.
This is definitely an added advantage for you over your competitors who are still not giving that much importance to the web accessibility.
Better Accessibility Ensures Better Usability
The accessibility of your website is high- means; more people can visit and navigate through your website. And when the website traffic is high, the chances of business conversion are high too. The math here is as simple as that!
These accessibility and usability, even though these two are different from each other, they kind of have the same objectives. And the objective is to devise engaging and impressive user experience. These two factors ensure that your website functions properly and delivers a seamless UX to the visitors.
Americans with Disabilities Act
In the US, this law protects the rights of disabled ones. So, ignoring them as a potential audience can have the same impact as violating the law. And this is absolutely wrong. To abide by this rule and to avert the legal consequences, trades should consider the disabled ones too.
Things to Consider While Making Your Website Accessible to Everyone
So far, you got to know what web accessibility is and how it holds a major significance in the website development and design industry. Now, find out how you can do it i.e. making the website accessible to everyone.
Title Tag
You already know how important the title tag is for SEO purposes. This is crucial for letting Google know and understand “about the web page”. Now, while integrating web accessibility too, this title tag plays a major role.
The ‘Screen Readers’ prefer having a title tag. It aids the disabled who use screen readers to access a site.
Using Default HTML Tags
Disables need such tech-help that aid them to go through a site. They prefer taking assistance from ‘Screen Readers’. Now, this device follows a specific method while going through every component on a page along with the texts. When it fails to decipher an element, the one using the device fails to comprehend it too resulting in a poor experience for the users.
Opting for HTML tags that are set by default is a way out to this problem.
Keyboard Navigation
A site that anyone can navigate seamlessly with just a keyboard is an example of how actually it should be devised.
However, there is an issue with such navigation buttons that are animated. Usually, screen readers cannot understand that. So, it is advisable not to use such buttons as the dropdowns to ensure better accessibility.
Do Not Forget to Use Subtitles
According to the recent practices, applying audio and video elements to entertain and interact with the visitors on the site is a popular practice. With this, the structure of a website will not fail.
Now, how about a user who has hearing problems? This is why you should always include subtitles.
With video transcription, the website enables Google to read the transcriptions. This allows for better rankings on the SERPs.
Are There Any Tools Available to Check Web Accessibility?
Yes, you can find some effective tools today that can help you to understand whether you are doing the web accessibility right or not.
Among many freely available tools, here are a few globally popular names.
A11Y Compliance Platform
Dynomapper
Automated Accessibility Testing Tool
Accessibility Checklist
Accessibility Checker and more.
Tools are available, fine! But buzz sessions with experts are also required to handle the tools in the proper way and analyze the outcomes. Their inputs and guidance are valuable too as they are dealing in the industry for years and have deeper insights to build a site that is accessible to everyone irrespective of their physical abilities.
There’s some new units I was totally unaware of from the Level 4 spec for CSS values! The lh unit is “equal to the computed value of line-height” and rlh is the same only of the root element (probably the element) rather than the current element.
