Let’s say you visit an e-commerce site because you want to buy the latest banana peeler model. Bananas are hard enough to peel, right? Only a tool will do!

What’s the first thing you’re going to do on the site? Chances are, it’s entering something into the (hopefully) prominent search field. You need a way to tell the store what you’re looking for in order to get recommendations and that’s the first step.

What’s next? Again, chances are you will need to get more specific with what you’re looking for. You may need the search results to be filtered to get a more precise and increase the chance that your banana peeler surfaces to the top. That might be filtering by a specific brand, color, size, availability, or whatever.

Developing an e-commerce site is already a difficult task and throwing in things like search and filters make it even tougher. That’s why WooCommerce is worth looking into. It’s a WordPress plugin that transforms any site into a full-fledged e-commerce machine, complete with product inventory, shipping methods, payment gateways and, yes, front-end functionality for things like search and filtering.

Take the latest WooCommerce release for example. It introduces a new “All Products” block for the Gutenburg block editor. You can literally drop this block on any WordPress page and it will render a fully customizable grid of products from your inventory. Pretty slick!

And what about filtering? There are specific blocks for that too. Drop any number of filtering options on the same page as the All Products block and the filters will automatically know to filter from the products in the block. And there’s a ton of ways to filter products, including price and attributes (e.g. color, size, etc.). Oh, and filters can be combined, of course, so they can be used together for even more fine-grained search results.

This is just one of the many, many ways WooCommerce is lowering the bar to entry for e-commerce while setting high standards for what to expect on an e-commerce site. It’s free and has been downloaded more than 40 million times… now it’s your turn to give it a spin.

If you’re thinking of pulling the trigger on WooCommerce and think you might need to buy some plugins, it’s about to the absolute perfect time of year to do that. Kicking off on Black Friday and running through Cyber Monday, literally everything WooCommerce is 40% off. And if you’d rather do eCommerce on a totally hosted platform, WordPress.com can do that and that’s all 20% off.

The post Product Search and Filters Are a Snap With WooCommerce appeared first on CSS-Tricks.

Writing is mostly regarded as one of the world’s most demanded jobs today. With writing jobs being shared as posted on job sites, it is no surprise that the number of content writers has escalated within the past years.

“As a content writer, there are other things you must take note of asides improving your knowledge of writing. Content writers need to be able to optimize the availability of special tools in their write-ups, as this helps provide better and more efficient ones to be delivered to clients”, says Edmond Kelly, a writer at PaperLeaf.

To do that, writers should adopt the use of online tools and apps. Are you a content writer and still find yourself completely reviewing your works by yourself, or are you a writer who has spent their whole writing career making and adding graphics manually? Well, with the help of certain tools, that story is about to change.

What Writers Need to Know

Just like there are apps to boost productivity, there are also apps that are available to boost writing.

As a content writer, you must know the several available tools out there in the world. These tools are ideal for helping you review articles and include infographics. Also, they help provide special insights, spot errors, and offer suggestions as regards your main ideas.

In this article, we will be looking into several tools that are the best and are designed for content writers.

Top Online Tools And Apps For Content Writers

When searching for a tool to use, picking one can be a little challenging. Below, we will be taking at some of the best online tools and apps that content writers can use in optimizing their write-ups. Here’s the deal:

1. Grammarly

When looking at a list of tools that offer a seamless and easy-to-use user interface, Grammarly is never left out. Grammarly comes in various forms and can be used on various devices across anywhere in the world.

The tool comes in the form of a web app as well as a browser extension. This way, writers can use it even when they are off the website.

Let’s take a closer look at some of Grammarly’s features.

• Misspelling

Sometimes, writers make mistakes when spelling certain words. Luckily, Grammarly is equipped with a special feature that helps to spot these misspelled words and fix them for you right away.

• Repetition

Typing efficiently is what everyone must learn. With Grammarly, you learn how to avoid certain mistakes and equally improve your writing styles.

Repetition is one of many mistakes writers sometimes make, and fortunately for them, Grammarly is here to correct such mistakes my omitting the repeated word.

• Correction of punctuation

Grammarly also corrects wrong punctuations in your write-ups. With this feature, writers can worry less about writing articles that have errors with the usage of commas, colons, and full stops.

• Missing words

As a content writer, you will understand the fact that words can sometimes be missed. Usually, you get to see this as you review the article. But with Grammarly, the missing word is well-predicted and corrected right away.

2. Infogram

No doubt, you must have come across infographics on the internet. If you are someone who is a writer and find yourself writing content for infographics but not creating them yourself, you might want to use Infogram. Also, if you have been creating infographics yourself, now is the time to let a digital network handle the job for you.

Infographics are important for keeping users engaged with the content. However, creating one takes a while to master. luckily, Infogram is one of the many tools that handle this kind of task.

Infogram comes as a web app that supports an easy-to-use and beautiful user interface. Through its amazing platform, people get the chance to work out unique visual content for their write-ups and projects.

To get a better understanding of what this tool provides, we will take a closer look at some of its features.

• Design

With its user interface, people can make out unique designs and use them anywhere on the web. Content writers are sure to find this handy and equally get the best out of it.

Through the tool’s design feature, people can begin designing not just infographics, but also reports, slides, dashboards, social media visuals, and unique maps.

Each design you create with Infogram comes in high quality. This kind of design quality is crucial for keeping your audience visually engaged as they absorb all of you the ideas you are trying to pass across.

• Collaboration

Another feature of the Infogram tool is the ability to collaborate on design projects. This way, more than one person can work on creating a design to be used. If you are a content writer trying to create special designs for your content and also have got a partner, you both can work on this design together.

• View Design Performance

With Infogram, you can track and keep up with the usage statistics of your designs. This gives you special insights into the engagement levels of those who are viewing your design.

By monitoring the performance statistics of your design, you stand a chance to become knowledgeable of the special designs that need improvements, as well as the ones which are thriving.

3. HubSpot’s Blog Topic Generator

As a content writer, you will find it easy to understand the fact that the topic of every write-up is as important as its content. To make things a lot easier, Hubspot has come up with a special tool that helps generate the topic for blog posts.

The HubSpot’s Blog Topic Generator comes as a handy tool for writers, which is sure to save them the trouble trying to figure out a topic for their post.

Hubspot also understands simplicity is a key factor that engages users. Due to this, the topic generator web app was built to offer writers a seamless and straightforward approach towards generating a topic for their blog post.

Using the web app is considered to be a very simple process. In the fields provided by the tool, users can input five keywords and then watch the tool generate many topics to be used as blog post topics.

4. Google Trends

Google Trends is another tool all writers need to be aware of. Just like its name, the service from Google is designed to provide people with the chance to stay up-to-date with the latest searches and trends.

Writers can personalize the kind of trends they receive, as this allows them to maintain the scope of their content easily. The tool offers writers a chance also to find out what things are trending in their region and also obtain stories based on categories.

With Google Trends, obtaining the latest updates on certain topics has been made easier. Another great thing about the tool is that it is free to use.

5. Feedly

Now, if you want to obtain content ideas without having to work too hard or engage in too much stress, Feedly is a web app that has got you covered. The tool is completely designed to fit content writers, as getting content ideas sometimes can become a challenge. If that ever happens to you, you could always have Feedly to back you up.

When looking at some of the best tools that are fit for content writers, Feedly is never left out of the picture. However, if you are finding it hard to obtain quality and accurate information as regards what kind of ideas you could use in your write-up, then Feedly could come into the picture.

What Freely Offers to Writers

The web app inspires unique ideas and news. If you are a writer, you can always find that browsing through many websites just to obtain a piece of information, as well as the latest news of events in the society, can be tougher than expected. Usually, this takes a whole lot of time to accomplish.

With Feedly, the matter is a little different and less time-consuming. Feedly obtains news from different websites for you. After gathering the news, it requires users to log in and use the news to create great content ideas.

But before being able to gather news from different platforms, users need to first select the sources and sort the news by topics. The amazing features of the web app have gotten it always to come in handy for writers to use.

Conclusion

Many content writers have admitted to the fact that writing is a tough job. When writing, you must consider ideas and factors that can make the task more efficient and easier to accomplish.

The above are 5 of the best tools and apps for content writers, which can greatly improve efficiency and simplicity. Today, using these tools can greatly enhance the way you work.

In conclusion, the above tools are considered the best not just because of their features, but also because of the high number of writers who use them. As a writer, you should take your time to try them out and watch your writing style receive a huge boost. Good luck.

Writing is mostly regarded as one of the world’s most demanded jobs today. With writing jobs being shared as posted on job sites, it is no surprise that the number of content writers has escalated within the past years.

“As a content writer, there are other things you must take note of asides improving your knowledge of writing. Content writers need to be able to optimize the availability of special tools in their write-ups, as this helps provide better and more efficient ones to be delivered to clients”, says Edmond Kelly, a writer at PaperLeaf.

To do that, writers should adopt the use of online tools and apps. Are you a content writer and still find yourself completely reviewing your works by yourself, or are you a writer who has spent their whole writing career making and adding graphics manually? Well, with the help of certain tools, that story is about to change.

What Writers Need to Know

Just like there are apps to boost productivity, there are also apps that are available to boost writing.

As a content writer, you must know the several available tools out there in the world. These tools are ideal for helping you review articles and include infographics. Also, they help provide special insights, spot errors, and offer suggestions as regards your main ideas.

In this article, we will be looking into several tools that are the best and are designed for content writers.

Top Online Tools And Apps For Content Writers

When searching for a tool to use, picking one can be a little challenging. Below, we will be taking at some of the best online tools and apps that content writers can use in optimizing their write-ups. Here’s the deal:

1. Grammarly

When looking at a list of tools that offer a seamless and easy-to-use user interface, Grammarly is never left out. Grammarly comes in various forms and can be used on various devices across anywhere in the world.

The tool comes in the form of a web app as well as a browser extension. This way, writers can use it even when they are off the website.

Let’s take a closer look at some of Grammarly’s features.

• Misspelling

Sometimes, writers make mistakes when spelling certain words. Luckily, Grammarly is equipped with a special feature that helps to spot these misspelled words and fix them for you right away.

• Repetition

Typing efficiently is what everyone must learn. With Grammarly, you learn how to avoid certain mistakes and equally improve your writing styles.

Repetition is one of many mistakes writers sometimes make, and fortunately for them, Grammarly is here to correct such mistakes my omitting the repeated word.

• Correction of punctuation

Grammarly also corrects wrong punctuations in your write-ups. With this feature, writers can worry less about writing articles that have errors with the usage of commas, colons, and full stops.

• Missing words

As a content writer, you will understand the fact that words can sometimes be missed. Usually, you get to see this as you review the article. But with Grammarly, the missing word is well-predicted and corrected right away.

2. Infogram

No doubt, you must have come across infographics on the internet. If you are someone who is a writer and find yourself writing content for infographics but not creating them yourself, you might want to use Infogram. Also, if you have been creating infographics yourself, now is the time to let a digital network handle the job for you.

Infographics are important for keeping users engaged with the content. However, creating one takes a while to master. luckily, Infogram is one of the many tools that handle this kind of task.

Infogram comes as a web app that supports an easy-to-use and beautiful user interface. Through its amazing platform, people get the chance to work out unique visual content for their write-ups and projects.

To get a better understanding of what this tool provides, we will take a closer look at some of its features.

• Design

With its user interface, people can make out unique designs and use them anywhere on the web. Content writers are sure to find this handy and equally get the best out of it.

Through the tool’s design feature, people can begin designing not just infographics, but also reports, slides, dashboards, social media visuals, and unique maps.

Each design you create with Infogram comes in high quality. This kind of design quality is crucial for keeping your audience visually engaged as they absorb all of you the ideas you are trying to pass across.

• Collaboration

Another feature of the Infogram tool is the ability to collaborate on design projects. This way, more than one person can work on creating a design to be used. If you are a content writer trying to create special designs for your content and also have got a partner, you both can work on this design together.

• View Design Performance

With Infogram, you can track and keep up with the usage statistics of your designs. This gives you special insights into the engagement levels of those who are viewing your design.

By monitoring the performance statistics of your design, you stand a chance to become knowledgeable of the special designs that need improvements, as well as the ones which are thriving.

3. HubSpot’s Blog Topic Generator

As a content writer, you will find it easy to understand the fact that the topic of every write-up is as important as its content. To make things a lot easier, Hubspot has come up with a special tool that helps generate the topic for blog posts.

The HubSpot’s Blog Topic Generator comes as a handy tool for writers, which is sure to save them the trouble trying to figure out a topic for their post.

Hubspot also understands simplicity is a key factor that engages users. Due to this, the topic generator web app was built to offer writers a seamless and straightforward approach towards generating a topic for their blog post.

Using the web app is considered to be a very simple process. In the fields provided by the tool, users can input five keywords and then watch the tool generate many topics to be used as blog post topics.

4. Google Trends

Google Trends is another tool all writers need to be aware of. Just like its name, the service from Google is designed to provide people with the chance to stay up-to-date with the latest searches and trends.

Writers can personalize the kind of trends they receive, as this allows them to maintain the scope of their content easily. The tool offers writers a chance also to find out what things are trending in their region and also obtain stories based on categories.

With Google Trends, obtaining the latest updates on certain topics has been made easier. Another great thing about the tool is that it is free to use.

5. Feedly

Now, if you want to obtain content ideas without having to work too hard or engage in too much stress, Feedly is a web app that has got you covered. The tool is completely designed to fit content writers, as getting content ideas sometimes can become a challenge. If that ever happens to you, you could always have Feedly to back you up.

When looking at some of the best tools that are fit for content writers, Feedly is never left out of the picture. However, if you are finding it hard to obtain quality and accurate information as regards what kind of ideas you could use in your write-up, then Feedly could come into the picture.

What Freely Offers to Writers

The web app inspires unique ideas and news. If you are a writer, you can always find that browsing through many websites just to obtain a piece of information, as well as the latest news of events in the society, can be tougher than expected. Usually, this takes a whole lot of time to accomplish.

With Feedly, the matter is a little different and less time-consuming. Feedly obtains news from different websites for you. After gathering the news, it requires users to log in and use the news to create great content ideas.

But before being able to gather news from different platforms, users need to first select the sources and sort the news by topics. The amazing features of the web app have gotten it always to come in handy for writers to use.

Conclusion

Many content writers have admitted to the fact that writing is a tough job. When writing, you must consider ideas and factors that can make the task more efficient and easier to accomplish.

The above are 5 of the best tools and apps for content writers, which can greatly improve efficiency and simplicity. Today, using these tools can greatly enhance the way you work.

In conclusion, the above tools are considered the best not just because of their features, but also because of the high number of writers who use them. As a writer, you should take your time to try them out and watch your writing style receive a huge boost. Good luck.

Check out this video! https://youtu.be/jw7bRnFbwAI

<link rel="alternate" type="application/json+oembed"
  href="http://www.youtube.com/oembed?url=https%3A%2F%2Fyoutu.be%2Fjw7bRnFbwAI&format=json"
  title="Inclusive Components with Heydon Pickering" />

{
        "author_name": "Smashing Magazine",
        "width": 480,
        "title": "Smashing TV: Inclusive Components with Heydon Pickering (Nov 7th 2019)",
        "provider_name": "YouTube",
        "height": 270,
        "html": "<iframe width="480" height="270" src="https://www.youtube.com/embed/jw7bRnFbwAI?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>",
        "provider_url": "https://www.youtube.com/",
        "thumbnail_url": "https://i.ytimg.com/vi/jw7bRnFbwAI/hqdefault.jpg",
        "type": "video",
        "thumbnail_height": 360,
        "author_url": "https://www.youtube.com/channel/UCSDtqcJ8ZXviPrEcj1vuLiQ",
        "version": "1.0",
        "thumbnail_width": 480
}

npm i oembed

const oembed = require('oembed');
const url = 'https://noti.st/drewm/ZOFFfI';

oembed.fetch(url, { maxwidth: 1920 }, function(error, result) {
    if (error)
        console.error(error);
    else
        console.log("oEmbed result", result);
});

{ 
        type: 'rich',
        version: '1.0',
        title: 'Understanding oEmbed',
          author_name: 'Drew McLellan',
        author_url: 'https://noti.st/drewm',
        provider_name: 'Notist',
        provider_url: 'https://noti.st',
        cache_age: 604800,
        thumbnail_url: 'https://on.notist.cloud/slides/deck4179/large-0.png',
        thumbnail_width: 1600,
        thumbnail_height: 900,
        html:
           '<p data-notist="drewm/ZOFFfI">View <a href="https://noti.st/drewm/ZOFFfI">Understanding oEmbed</a> on Notist.</p><script async src="https://on.notist.cloud/embed/002.js"></script>',
        width: 960,
        height: 540 
}

composer require embed/embed

use EmbedEmbed;

$info = Embed::create('https://noti.st/drewm/ZOFFfI');

$info->title; // "Understanding oEmbed"
$info->authorName; // "Drew McLellan
$info->code; // "<p data-notist="drewm/ZOFFfI"> ... </script>"

Frank Chimero is redesigning “in the open” and we should pay attention to it because (1) we should listen to anything Frank has to say because he’s a great designer and writer and (2) working in public is awesome.

But the gut punch for me in this opening article is the way Frank pulls zero punches on the state of design writing:

Design isn’t alone in its lack of quality content—the web, by and large, has become a dumping ground for garbage. Most design content has become poor quality, surface-level content marketing that does more damage than good, because it offers over-simplified, misinformed perspectives dressed up as guidance. One hardly gets the sensation of lived experience and professional acumen in the words. When the experienced don’t write, grifters step in, feign expertise, and sell it.

Heck, I’m gonna incorporate that into the guest posting page right now.

Direct Link to Article — Permalink

The post The Popeye Moment appeared first on CSS-Tricks.

CSS is the domain of styling, layout, and presentation. It is full of colors, sizes, and animations. But did you know that it could also control when a sound plays on a web page?

This article is about a little trick to pull that off. It’s actually a strict implementation of the HTML and CSS, so it’s not really a hack. But… let’s be honest, it’s still kind of a hack. I wouldn’t recommend necessarily using it in production, where audio should probably be controlled with native elements and/or JavaScript.

The trick

There are a few alternatives to playing sounds with CSS, but the underlying idea is the same: inserting the audio file as a hidden object/document within the web page, and displaying it whenever an action happens. Something like this:

<style>
  embed { display: none; }
  button:active + embed { display: block; }
</style>

<button>Play Sound</button>
<embed src="path-to-audio-file.mp3" />

View Demo

This code uses an tag, but we could also use with similar results:

<object data="path-to-audio-file.mp3"></object>

A quick note on the demo and this technique. I developed a small piano on CodePen just with HTML and CSS using this technique about a year ago. It worked great, but since then, some things have changed and the demo doesn’t work on CodePen anymore.

The biggest change was related to security. As it uses embed or object instead of audio, the imported file is subject to stricter security checks. Cross-origin access control policies (CORS) force the audio file to be on the same protocol and domain as the page it is imported into. Even putting the sound in base64 will not work anymore. Also, you (and users) may need to activate autoplay on their browser settings for this trick to work. It is often enabled behind a flag.

Another change is that browsers now only play the sounds once. I could have sworn that past browsers played the sound every time that it was shown. But that doesn’t appear to be the case anymore, which considerably limits the scope of the trick (and bares the piano demo almost useless).

The CORS issue can be worked around if you have control over the servers and files, but the disabled autoplay is a per-user thing that is out of our control.

View Demo

Why it works

The theory behind this behavior can be found buried in the definition of the embed tag:

Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element that is remaining potentially active and has its src attribute set, changed, or removed or its type attribute set, changed, or removed, the user agent must queue a task using the embed task source to run the embed element setup steps for that element.

Same goes for the definition of the object tag:

Whenever one of the following conditions occur:

[…]

• the element changes from being rendered to not being rendered, or vice versa,

[…] the user agent must queue a task to run the following steps to (re)determine what the object element represents. [and eventually process and run it]

While it is clearer for object (the file is processed and run on render), we have this concept of “potentially active” for embed that may seem a bit more complicated. And while there are some additional conditions, it will run on initial render similarly as how it does with object.

As you can see, technically this is not a trick at all, but how all browsers should behave… although they don’t.

Browser support

As with many of these hacks and tricks, the support of this feature is not great and varies considerably from browser to browser.

It works like a charm on Opera and Chrome, which means a big percentage of the browser market. However, the support is spotty for other Chromium-based browsers. For example, Edge on Mac will play the audio correctly, while the Brave browser won’t unless you have the latest version.

Safari was a non-starter, and the same can be said for Internet Explorer or Edge on Windows. Nothing close to working on any of these browsers.

Firefox will play all the sounds at once on page load, but then won’t play them after they are hidden and shown again. It will trigger a security warning in the console as the sounds attempt to be play “without user interaction,” blocking them unless the user approves the site first.

Overall, this is a fun trick with CSS but one of those “don’t do this at home” kind of things… which in software development, means this is the perfect thing to do at home. ?

The post Playing Sounds with CSS appeared first on CSS-Tricks.

If you own a website and you’re from the US (or even Europe), chances are you are exposed to a potential lawsuit if your website is not accessible.

The ADA or Americans with Disabilities act has brought forth web accessibility standards (WCAG 2.1 and section 508) that must be adhered.

Accessible websites are often ugly and expensive. The implementation is way too complicated, and in the end, the accessible website serves only a few. Imagine you can make your website accessible with just a few clicks. Wouldn’t you like to do that right away?

Those who rely on an AI-based solution like accessiBe will realize that an accessible website doesn’t have to be expensive, ugly, or complicated to implement. Let’s dig deeper into web accessibility and accessibe.

No design restrictions

Companies and organizations often face the problem that their corporate design cannot be implemented accessible. For example, because the design colors do not meet the minimum contrast requirements. The lack of perceptibility due to insufficient contrast, however, is a lack of accessibility that occurs most frequently. For example, people with visual impairment or color blindness cannot read the text. They are denied access to relevant information.

accessiBe allows the user to make individual settings regarding color, font, and presentation. Thereby accessiBe goes much further than what we often encounter with integrated font enlargement or color inversion.

Manageable costs

Accessibility can be expensive. For example, if you don’t consider accessibility at the beginning of a project. Subsequent corrections are costly. But court costs, lawsuits, and penalties are even more expensive if you exclude and discriminate against people due to a lack of accessibility.

But even if accessibility is an aspect that is considered in a website project right from the start, it can be expensive. Usually, manual tests by experts and persons with disabilities are required to identify and solve possible problems. It is, therefore, at least partly understandable that small companies or organizations, in particular, cannot afford to invest inaccessibility in the long term.

Anyone who has waived accessibility for cost reasons so far should take a closer look at accessiBe. The accessiBe solution starts at 490 dollars per year.

Simple implementation

Yes, accessibility requires specialists. And the problem often lies in the fact that the efforts for accessible websites and applications are not sustainable. Experience shows that accessibility decreases over time. Many accessibility deficiencies arise at the editorial level: new editors do not set alternative texts for images and graphics. Or they use incorrect formatting when creating new web content.

With accessiBe, you do not need to know how to code. accessiBe can be implemented with only a few clicks. The rest is done automatically in the background. More about that later.

Accessibility for everyone instead of just a few

The barriers that blind and visually impaired people encounter on the Internet are probably the most obvious. This often leads to the false assumption that accessibility serves only a tiny group of users. Wrong thought. Barriers on the web can affect anyone.

Because accessiBe allows individual settings with the user interface, accessiBe improves the usability and accessibility for everyone instead of only for a few.

How does accessiBe work?

accessiBe works in two ways. On the one hand, accessiBe adds a visible and navigable user interface to the website. Sighted users and mouse users click on the icon that website owners can add anywhere they want. Screen reader and keyboard users can access the interface by pressing the tab key.

Figure 2: Screenreader and keyboard users can access the accessiBe interface by pressing tab.

But accessiBe goes even further. As soon as the website operator has implemented the JS code (literally a single line of code), the AI behind accessiBe starts optimizing the website. This process usually takes up to 48 hours. accessiBe corrects any issues automatically. If a website cannot be operated with the keyboard, accessiBe corrects this error. If the required labels for Screenreader are missing in the form fields, accessiBe completes them. If there are images without alternative texts, accessiBe automatically adds a descriptive text. And to ensure accessibility, accessiBe repeats this process every 24 hours.

What’s the catch?

Does all this sound too good to be true? Of course, there are limitations. For example, accessiBe cannot automatically create subtitles for videos or accessible PDFs. Also, accessiBe cannot simplify incomprehensible texts automatically. So, it still needs the editors’ and website managers’ awareness and cooperation. By automating the essential processes, accessiBe creates free resources for accessible content.

Are you not convinced yet?

You indeed also belong to those people who don’t believe anything they haven’t seen with their own eyes. On the website allerlay.ch, accessiBe is implemented for test purposes. There you get an insight into the interface and can also try out other functions such as keyboard navigation. Do you want to test accessiBe on your website? Then you can register here for a free trial. The good thing: You don’t even need to submit your credit card information to get started

Unless you’ve been hiding under a tinfoil hat for the last few years, you probably know that UX and UI are not the same thing because “UX is more ergonomic”, or some such nonsense. But what about the unified part? Normally speaking, I’ve got very little patience for hipster acronyms and nit-picking, but actually it turns out there’s more to this than fake specs and chai latte.

Imagine you’re standing outside two different coffee shops. They both sell pretty much the same coffee at pretty much the same price. How do you choose? Well I’ll bet you a unicorn frappe it’s not one specific thing that sways you, more a general “feeling” that “it’s better”. And you know what? That’s UX.

It’s probably time to rethink everything. Experience has become much more important to users than product, and from a design perspective, this puts software in pretty much the same space as coffee shops.

For the service industry, each user-brand interaction is a touchpoint. It’s not important where or how that interaction happens: seeing the shop, opening the door, speaking to someone at the counter, whatever. The aim is to create a feeling of familiarity, ease and comfort for the target user.

Now imagine scaling that experience. Say you wanted to take your coffee shop into a mobile vending unit. How can you make sure that your users get the same feeling of comfort and familiarity that they had in the high street? That’s Unified UX.

The Broader Context

Unified UX is much more than a DLS or style guide. In fact, you’d be better off thinking about tools like Atlassian and Sketch as…well, tools, to help you achieve the broader aim of unity.

It’s more than responsive design and digital ecosystem too. If you’re still thinking in terms of “mobile”, “tablet” and “desktop” configurations, you’d do well to heed the words of design guru Cameron Moll who urges us to recognise that, for today’s users:

The best interface is the one within reach

Take the Galaxy Fold, for example: Phone, tablet, phablet or plain old monstrous? What about Echo, Dot and Alexa with no screen at all? Or Apple Watch? As Cameron points out in the same talk, the concept of “TV” has also become pretty loose. Do we mean the content, or the device it’s viewed on? Is “mobile” a noun, a verb or an adjective? How is a native app different from a mobile browser experience?

The point is, from a unified UX perspective, it doesn’t matter. The job of the UX team is to create that “brand feeling” across all platforms and in all facets of the design.

Take a look at Southwest Airlines’ “Virtual Booking Desk” from — wait for it — 1998; laugh all you want, but remember that back then, most people were completely new to the internet. Seeing a familiar scene gave users a sense of confidence, which is (still) integral to the Southwest brand.

What Goes in to Unified UX?

Everything!

It starts with deep awareness of the needs, expectations and current experience of the user. Watch people using your stuff. Talk to them afterwards about what it felt like. You’ll definitely learn something. If it’s a new project, do focus groups, then do some more. Co-create if you can.

From there, develop a design principles framework. The key concerns of your user group should shine through in every single aspect of their brand experience.

Broadly, there are two key concepts to unify:

• Form and Function – Yes, you need both!
• Data Symmetry – Data should follow users.

Here are some questions to consider:

Available Media

How do your users want to interact with the brand?

• Android/iOS app;
• Voice Interface;
• Live Chat;
• Bot;
• SMS integration (very popular in the US);
• Telephone/VOIP;
• Video;
• Print Media;
• Face to Face.

A website doesn’t work for everyone!

Look and Feel

Does your framework include:

• color;
• shape;
• imagery;
• story;
• art direction;
• icons?

Do your choices work everywhere? How do you balance unity of UX and compatibility? How do you merge native OS elements with brand-specific ones?

Layout

Guide users to the content they’re looking for. Will their needs change across:

• platform;
• device;
• time;
• user journey?

How do you balance usability and unity of UX on small screens?

Interaction

Are some features device specific?

• Camera;
• Location Services;
• Accelerometer;
• Compass.

If so, is this what users want? How will interactive behavior transfer?

Responsive Behaviour

Remember the device continuum – it’s usually best to think in terms of

• small;
• smallish;
• biggish;
• big.

(Not specific devices.)

Tone

Important for:

• Written copy;
• Voice Interface;
• Phone Help;
• Face to Face;
• Video;
• Text or Automated Chat.

Does the tone need to change in certain situations:

• errors;
• call to action;
• feedback/complaints;
• specific user groups?

Are you using dated words like “click” when “tap” would be a better choice?

Continuation

If the user starts an interaction on one device and transfers to another, does their data follow them? If shopping cart items, elapsed time, favourites etc are consistent across interfaces, you’re doing it right!

Single Sign-On is one of those features that’s bound to make your users smile. With this in mind, are your protocols up to scratch? If you’ve got a native app, you need LDAP or similar, for example. Don’t try and use cookies! Is the backend architecture able to handle the load?

Development Environment

As you probably see by now, unified UX isn’t something you can do by yourself. The better organised your resource repository, the easier it will be to onboard new team members and maintain consistency. Consider:

• Toolsets;
• Documentation;
• Coding and File Naming Conventions;
• Standard Elements Repo.

Upgrades and Integration

How will you update legacy material and add new elements as the design evolves?

Who’s Doing it Well?

Yes, unified UX can be a pretty large and expensive undertaking, and even the giants still get it wrong. That said, here are some nice little highlights from a few unexpected places:

Spotify

No surprises here in terms of the company’s size, and sure, their UX is (arguably) pretty slick no matter where you find it. But what really caught my eye today is their commitment to their backend and support for third party developers.

This gives Spotify users enormous scope to enjoy a highly integrated, reliable and ever-expanding ecosystem that always feels the same.

Mailchimp

Not only do they have great cross device, cross platform consistency, their famously chirpy tone and loveable mascot are instantly relatable. What’s even cooler is that, when something goes wrong, the tone subtly changes.

This isn’t surprising because they have a really extensive style guide for new writers.

Linguee

Primarily a web-based translation application, their iOS app is a real favourite of mine. It not only offers dictionary-style definitions, but use-in-context translations as well, which really helps to avoid the classic google translate failures. It’s understandable at a glance on both small and large screens… and it’s free!

Good evidence that simplicity and functionality often win out.

Conclusion – Why Bother?!

Well, in a nutshell, because it’s what your users want. Yes, to really nail a unified experience is a big undertaking, particularly if you’re coming into an old project and dealing with legacy code, but the fact is, it’s the future.

The range of available devices is growing rapidly, and users want whichever one is closest. At the same time, we’re becoming more and more sensitive to experience, and less tolerant of inconsistency or nuisance. Smaller companies must find ways to provide the kind of unified experience that customers expect, or face being swallowed by giants.

As independent developers, it’s in our interests, and within our ability, to find ways to make UX unified.

Featured image via DepositPhotos.

Source

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Diez is Now Open Source

Internet World Despairs as Non-profit .org Sold for $$$$ to Private Equity Firm

The Logos of Starbucks, Google, and More Get Redesigned by a Bot

It’s Time to Stop Designing ‘Minimum Viable Products’

Web Dev Metrics

20+ Color Tools for Web Designers

Apple Built a $1 Trillion Empire on Two Metaphors. One is Breaking

Enhancing Clickable Area Size

The Aesthetic-Accessibility Paradox

14 Inspiring UX Designer Portfolios

Designers: Ignore Best Practices

Why the Best Design is Sometimes Invisible

What Animation Taught Me About UX Design

Illlustrations – Large Set of Opensource Illustrations

Microsoft Went all in on Accessible Design. This is What Happened

Video Game Console Logos

Macro Trends in the Tech Industry

Framer is Going Web Based with Multi-user Editing

How We Scaled Our Design System to Unleash Skyscanner’s New Brand

The Quest for Simplicity

Passwords are a Design Problem

Design Tokens Beyond Colors, Typography, and Spacing

Complex Search-Results Pages Change Search Behavior: The Pinball Pattern

Explore Dribbble’s 2019 Global Design Survey

Evolving by Design

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source