Phone Numbers For Web Designers

September 28th, 2022 No comments

It is exciting how websites are being optimized. Localization, A/B testing, and cross-domain campaign tracking contribute to your bottom line. But why stop there? The customer experience is not determined by your website alone. Take the next step and start to include your telephony in the optimization span. And it is a relatively easy step to take as you are already familiar with the mechanisms. Simply follow these seven considerations.

First Things First: The Basics

Before determining which number type to use and when and how to present them on your website, it helps to know which number types are available, to begin with:

Each of these numbers can be valid to use, depending on your strategy. It is important to line up the localization, appearance (tone of voice), and other factors of your website and the phone number type you choose. And — like your website — keep testing and optimizing your choice.

Let’s dive into the details of the seven considerations to make.

Localization

A lot has been written about localization. Why it is important and how to achieve it with your website. All this attention is leading to great results. However, a website and the product are not the only points of contact with the customer and do not fully cover the customer experience domain. So, there is much to be gained here.

The localization of your website and phone number choice needs to be in sync. If your website is tailored per country, the phone number should also be country-specific. It would be weird to have a site for a specific country but not a phone number. And the beauty is that you have already determined the level of localization required for your website. You can simply match the localization needed to the available phone number types.

If your website localization is country-based, then get one of these numbers:

  • National number,
  • Freephone number,
  • Premium Rate number.

All of these are suitable for country-wide operating businesses. We’ll get back to how to choose which one fits your case best later in this article.

If your website targets specific areas smaller than a country:

Get local numbers in the same areas you are targeting with your website. It strengthens your website localization strategy, and you continue to earn trust with the local phone numbers. If you have optimized (an instance of) your website specifically for London, it only makes sense to extend that strategy and present a Local London Phone number.

There are two number types that require additional attention:

  1. A mobile phone number is technically a number that is valid country-wide. However, it has its value for a very specific type of business: mostly local operating, independent service providers.
  2. An international freephone number (officially a UIFN number) is a single number that can be activated in multiple countries. If your website strategy is explicitly to express one voice for all, this number type fits that strategy; one single international phone number that can be activated in multiple countries. And it can have its advantages in other areas as well. We’ll dive into those a bit later in this article.

Appearance

Every type of number expresses an identity. This should match the identity your target market expects from you. Again, consistency is key. Make sure to align the tone of voice and the image you are projecting with your website with the appearance of the phone number(s) you choose.

If you are trying to generate a familiar feel on your website, a local number is your best option. You are calling someone close by, your neighbor. It gives the feeling you know them and that they are trustworthy.

If you want to provide a more corporate or formal impression, a national number is your choice. Bigger companies need a lot of phone numbers, and in many cases, they have offices in different cities. National Numbers have been created to overcome the issue of local numbers being snagged away from consumers. And as stated earlier, they can be used in multiple cities, which enables a company to be reachable in multiple cities via the same phone number. Not for nothing, National phone numbers are also called corporate numbers.

Only use a mobile number if you have to exhume mobility while it is ok that you are an independent service provider. Like an independent courier.

Freephone numbers are by far the most effective phone number types for sales lines and support lines for high-end services and products. If you want to welcome your callers with open arms, this is the number type to opt for, without a doubt.

If the phone call is the medium via which you provide your services, premium rate numbers can provide financial compensation for the services provided. In some cases, these numbers are also used as support lines with the goal of building a threshold for the customer to call and some compensation for the cost of the time spent. Note that this will negatively impact your customer experience. In most countries, it is not even allowed to offer a premium rate number for the support line on services under contract or products under warranty.

An international freephone number is counterproductive in localization but has other advantages. This number type has been defined by the ITU as an international alternative for the regular in-country freephone number and has the calling code +800. Having the same number available in multiple countries has its advantages: You only have to print one number on documentation to be used in multiple countries. And if you have international traveling callers, they only have to memorize one number.

Caller And Operational Cost

Each number type has its own caller and operational cost profile.

The most cost-effective numbers for both callers and you are local, national, and mobile numbers. These number types are mostly called from the caller bundle and have the lowest operational cost.

The purpose of a freephone number is to shift the caller cost from caller to operational. Therefore, the operational cost is relatively high.

A premium rate number is a payment method; therefore, caller cost is high and provides an operational source of income.

The cost model for an international freephone number is similar to the model of a normal freephone number. The cost is shifted to the operation.

Note: Since this is a globally defined phone number type, it is not regulated by the various in-country regulators to whom the caller operators have to answer.

Most fixed line operators do respect the 0-caller tariff. However, some mobile operators use this loophole to charge their customers for calls to these numbers.

Reachability

Not all number types can be called from everywhere. Obviously, you need to make sure your phone number is reachable by your target audience.

Local, national, mobile and international freephone numbers are usually internationally reachable.

Normal freephone and premium rate numbers are not. As discussed before, these numbers do have their added value for many organizations. If you use these types of numbers, it is important to make sure you get a number in every target market or at least an alternative number for your local customer who just happened to travel outside of your country.

A/B And Campaign Testing

With these guidelines, you can make educated choices and proceed with confidence. But do you stop tweaking your website at this point? No, you don’t! This is where you start with optimization via methods like A/B Testing.

So why not include the phone number options in the scope of testing? All tools are available. All you have to do is include the phone numbers as an A/B parameter. And by adding the call statistics to the test evaluation, you can get to a more educated and accurate conclusion. Now, instead of the website, you are optimizing the website-phone number combination.

That also brings us to the next optimization. When evaluating an ad campaign or mailing, the evaluation usually stops with the clicks. But using different phone numbers (the same type of phone numbers to keep the evaluation clean) on both legs makes it very easy to add the call and call result statistics to the evaluation, enabling you to make even more educated decisions.

Conclusion

A/B testing can be used to evaluate and tweak your phone number choices. And by using different phone numbers (of the same type), you can make your Campaign evaluations more accurate.

Website And Phone Number Integration

Online communication and telephony are often regarded as two distinct domains, but they shouldn’t be. They are both customer contact points, and each can benefit greatly from the other.

Traditionally, just the phone number of the central office was presented. Once the realization set is that localization was also relevant for phone numbers, at least a block with multiple phone numbers was shown.

At the moment (hopefully even more after this article), the phone number shown is an integral part of the localization.

Best practice, however, is taking it a step further. Whatever you do, the goal should be to reach the goal as fast and efficiently as possible for your customer and you. This is valid for your website, your phone support, and both combined. The best results can be obtained when information gathered on the website is not wasted but put to the benefit of the following phone call. By simply presenting a phone number based on the information gathered, you skip the necessity of an (extensive) phone menu and have call screening in place. The image shows a chat setup, but obviously, the same result can be achieved with other setups as well.

And in many cases, that information can be used to present relevant self-service alternatives to the visitor. That could mean even higher efficiency for both your customers and you. Do note that it is essential to offer the options to the visitor — do not hide the possibility of calling. That will lead to frustration, negatively impact customer satisfaction, and cost you leads and customers.

Phone Number Presentation

The last consideration is the presentation of the phone number on your website. Obviously, the presentation depends highly on your website design, but here are a couple of pointers from the phone number perspective:

Link

Always link your phone numbers! Anything you do should contribute to making the life of your audience easier. Most devices are smart and connected, so link your phone number and enable your audience to place the call via a click.

Linking a phone number is easy with the ‘tel’ HTML tag, but what is important is always to use the international format. If you link the local format, visitors from another country will not be able to call the number. In the link, do not place spaces or dashes, just the phone number, for example, tel:+31201234567.

Flags

It does help to present the flag or ISO code of the country of the number presented. It confirms the localization to the caller. The caller recognizes the flag and feels confident to call the number. If it is someone from another country, at least they are aware they will call internationally. This way, you’ll prevent possible surprises for the caller afterward.

Furthermore, it gives you the opportunity to offer alternatives. If you have alternative phone numbers, it is possible to present the flag (combined with the number) in a dropdown. This way, in case the localization of the website is off, any visitor can find their relevant phone number. Note: When having alternatives, do not show all options, but show one (the one that should be relevant according to your site’s localization) and show there are alternatives. That way, you keep it simple.

Caller Tariffs

Important: When presenting a premium rate phone number, always present the caller’s cost as well.

Besides that, it is the right thing to do, and it is also obligatory in most countries. In most countries, it is even obligatory to present the cost with the same font type, size, and color as the phone number, to avoid any room misinterpretation.

On the other hand, when presenting a freephone number, it is good to make it explicit as well as you want to avoid any chance your visitor does not recognize the number is free to call. What is important in this case is to make sure to use the right language which is understood by your audience. Other names for a “freephone number” are, for instance, a “green number” or “toll-free number”; it has many different names in many other languages. Check with your target audience before naming your number.

The other number types usually fall within everybody’s calling bundle, and there is not really a reason to state the number type. The only thing important for your audience is the country of the phone number. Those numbers are internationally callable, which could impact the caller’s cost.

Takeaway

It could help to see phone numbers like URLs. They have — on an abstract level — the same dynamics and statistics.

Visits vs Calls
Session duration vs Call duration
Conversion result vs Conversion result

The customer journey is not limited to a website alone. Simply by combining the world of website design and telephony, far better results can be obtained for your organization. And thanks to the similarities and mutual benefits, it is an easy step to take.

Categories: Others Tags:

Five Data-Loading Patterns To Improve Frontend Performance

September 27th, 2022 No comments

When it comes to performance, you shouldn’t be stingy. There are millions of sites, and you are in close competition with every one of those Google search query results. Research shows that users will abandon sites that take longer than three seconds to load. Three seconds is a very short amount of time. While many sites nowadays load in less than one second, there is no one size fits all solution, and the first request can either be the do or die of your application.

Modern frontend applications are getting bigger and bigger. It is no wonder that the industry is getting more concerned with optimizations. Frameworks create unreasonable build sizes for applications that can either make or break your application. Every unnecessary bit of JavaScript code you bundle and serve will be more code the client has to load and process. The rule of thumb is the less, the better.

Data loading patterns are an essential part of your application as they will determine which parts of your application are directly usable by visitors. Don’t be the site that slows their entire site because they chose to load a 5MB image on the application’s homepage and understand the issue better. You need to know about the resource loading waterfall.

Loading Spinner Hell And The Resource Loading Waterfall

The resource loading waterfall is a cascade of files downloaded from the network server to the client to load your website from start to finish. It essentially describes the lifetime of each file you download to load your page from the network.

You can see this by opening your browser and looking in the Networking tab.

What do you see there? There are two essential components that you should see:

  1. The chart shows the timeline for each file requested and loaded. You can see which files go first and follow each consecutive request until a particular file takes a long time to load. You can inspect it and see whether or not you can optimize it.
  2. At the bottom of the page, you can check how many kB of resources your client consumes. It is important to note how much data the client needs to download. On your first try, you can use it as a benchmark for optimizations later.

No one likes a white blank screen, especially your users. Lagging resource loading waterfalls need a basic placeholder before you can start building the layout on the client side. Usually, you would use either a spinner or a skeleton loader. As the data loads one by one, the page will show a loader until all the components are ready.

While adding loaders as placeholders is an improvement, having it on too long can cause a “spinner hell.” Essentially, your app is stuck on loading, and while it is better than a blank HTML page, it could get annoying, and visitors would choose to exit your site.

But isn’t waiting for the data the point?

Well, yes, but you can load it faster.

Assuming you want to load a social media layout, you might add a loading spinner or a skeleton loader to ensure that you don’t load an incomplete site. The skeleton loader will usually wait for:

  • The data from the backend API;
  • The build layout according to the data.

You make an asynchronous call to an API, after which you get the URL for the asset on the CDN. Only then can you start building the layout on the client side. That’s a lot of work to show your face, name, status, and Instagram posts on the first try.

The Five Data-Loading Patterns You Need to Know

Developing software is becoming easier as frameworks like React, Vue, or Angular become the go-to solution for creating even the simplest applications. But using these bulky frameworks filled with a ton of magical functions you don’t even use isn’t what you should be going for.

You’re here to optimize. Remember, the less, the better.

But what if you can’t do less? How will you serve blazingly fast code, then? Well, it’s good that you’re about to learn five data-loading patterns that you can use to get your site to load quickly or, as you would say, blazingly fast.

Client Side Rendering, Server Side Rendering And Jamstack

Modern JavaScript frameworks often use client-side rendering (CSR) to render webpages. The browser receives a JavaScript bundle and static HTML in a payload, then it will render the DOM and add the listeners and events triggers for reactiveness. When a CSR app is rendered inside the DOM, the page will be blocked until all components are rendered successfully. Rendering makes the app reactive. To run it, you have to make another API call to the server and retrieve any data you want to load.

Server-side rendering (SSR) is when an application serves plain HTML to the client. SSR can be divided into two types: SSR with hydration and SSR without hydration. SSR is an old technique used by older frameworks such as WordPress, Ruby on Rails, and ASP.NET. The main goal of SSR is to give the user a static HTML with the prerequisite data. Unlike CSR, SSR doesn’t need to make another API call to the backend because the server generates an HTML template and loads any data within it.

Newer solutions like Next.js uses hydration, where the static HTML will be hydrated on the client side using JavaScript. Think of it like instant coffee, the coffee powder is the HTML, and the water is the JavaScript. What happens when you mix instant coffee powder with water? You get — wait for it — coffee.

But what is a Jamstack? Jamstack is similar to SSR because the client retrieves plain HTML. But during SSR, the client retrieves the HTML from the server. However, Jamstack apps serve pre-generated HTML directly from the CDN. Because of this, Jamstack apps usually load faster, but it’s harder for developers to make dynamic content. Jamstack apps are good with pre-generating HTML for the client, but when you use heavy amounts of JavaScript on the client side, it becomes increasingly harder to justify using Jamstack compared to Client Side Rendering (CSR).

Both SSR and Jamstack have their own differences. What they do have in common is they don’t burden the client with rendering the entire page from scratch using JavaScript.

When you optimize your site’s SEO, using SSR and Jamstack are recommended because, compared to CSR, both return HTML files that search bots can easily traverse. But search bots can still traverse and compile JavaScript files for CSR. However, rendering every JavaScript file in a CSR app can be time-consuming and make your site’s SEO less effective.

SSR and Jamstack are very popular, and more projects are moving to SSR frameworks like Next.js and Nuxt.js compared to their vanilla CSR counterparts, React and Vue, mainly because SSR frameworks provide better flexibility when it comes to SEO. Next.js has a whole section talking about SEO optimizations on their framework.

An SSR application will generally have templating engines that inject the variables into an HTML when given to the client. For example, in Next.js, you can load a student list writing:

export default function Home({ studentList }) {
  return (
    <Layout home>
        <ul>
          {studentList.map(({ id, name, age }) => (
            <li key={id}>
              {name}
              <br />
              {age}
            </li>
          ))}
        </ul>
    </Layout>
  );
}

Jamstack is popular with documentation sites that usually compile code to HTML files and host them on the CDN. Jamstack files usually use Markdown before being compiled to HTML, for example:

---
author: Agustinus Theodorus
title: ‘Title’
description: Description
---
Hello World

Active Memory Caching

When you want to get data that you already had quickly, you need to do caching — caching stores data that a user recently retrieved. You can implement caching in two ways: using a super-fast key-value store like Redis to save data keys and values for you and using a simple browser cache to store your data locally.

Caching partially stores your data and is not used as permanent storage. Using the cache as permanent storage is an anti-pattern. Caching is highly recommended for production applications; new applications will start using caches as they gradually mature.

But when should you choose between a Redis cache (server cache) and a browser cache (local cache)? Both can be used simultaneously but will ultimately serve a different purpose.

Server caches help lower the latency between a Frontend and Backend; since key-value databases are faster than traditional relational SQL databases, it will significantly increase an API’s response time. However, a local cache helps improve app state management, enabling the app to persist state after a page refresh, and helps future visits.

In summary, if you want to increase the performance of your application, you can use server caches to speed up your APIs, but if you want to persist your app state, you should use the local storage cache. While local caches might not seem helpful at all, it does help reduce the number of API calls to the backend by persisting state that doesn’t frequently change. However, local caches will be better when combined with live data.

Data Event Sourcing

You can make a real-time live connection between the Front-end and Backend via WebSockets. WebSockets are a two-way communication mechanism that relies on events.

In a common WebSocket architecture, the Front-end application will connect to a WebSocket API, an event bus, or a database. Most WebSocket architectures utilize it as a substitute to REST, especially in use cases like chat applications; polling your Backend service every few seconds becomes a very inefficient solution. WebSockets allow you to receive updates from the other end without needing to create a new request via the two-way connection.

WebSockets make a tiny, keep-alive connection compared to normal HTTP requests. Combining WebSockets with local browser cache creates a real-time application. You can update the app’s state based on the events received from the WebSocket. However, some caveats regarding performance, scalability, and potential data conflicts exist.

A pure WebSocket implementation still has a lot of faults. Using WebSockets instead of regular HTTP calls changes how your entire application behaves. Just a slight connection issue can affect your overall UX. For example, a WebSocket cannot have real-time performance when it needs to query the database every time there is a get request. There are bottlenecks in the backend that needs to be optimized for better real-time results to make WebSockets feasible and a more reasonable answer.

There needs to be an underlying architectural pattern that can support it. Event sourcing is a popular data pattern you can use to create reliable real-time applications. While it doesn’t guarantee overall app performance, it will give your customers better UX by having a real-time UI.

Modern JavaScript has WebSocket providers that you can use. The WebSocket class opens a connection to a remote server and enables you to listen when the WebSocket opens a connection, closes a connection, returns an error, or returns an event:

const ws = new WebSocket('ws://localhost');
ws.addEventListener('message', (event) => {
    console.log('Message from server ', event.data);
});

Do you want to react to server events? Add an addEventListener function and insert a callback that it will use:

ws.send('Hello World');

Want to send a message? WebSockets got you. Use the send function to get a message out to the server. It’s as easy as printing “Hello World.” The examples are from the MDN Docs.

Prefetching And Lazy Loading

Prefetching and lazy loading has become common knowledge among frontend developers. Efficient use of a client’s resources and bandwidth can greatly improve your application’s performance.

Prefetching

Prefetching gives developers more granular control over the client’s idle bandwidth, loading resources, and pages that the client might need next. When a website has a prefetch link, the browser will silently download the content and store it within its cache. Prefetched links can have significantly faster loading times when the user clicks them.

<link rel="prefetch" href="https://example.com/example.html">

You specify prefetch URLs within the link HTML element, more specifically, the rel attribute. Prefetching has a few pros and cons:

  • Pros: Prefetching waits until the browser’s network is idle and is no longer in use and will stop when you trigger usage by clicking a link or triggering a lazy loading function.
  • Pros: Prefetching caches data within the browser, making page transitions faster when redirecting to a link.
  • Cons: It can be used to download trackers, compromising user privacy.

Lazy Loading

Lazy loading is a common data-loading pattern that makes the client load à la carte results, not loading everything until the client needs it. Lazy loading will make the client fetch the latter parts of a website after they’ve scrolled into view.

Lazy loading makes your site load faster by allowing the browser to concentrate on more important, on-screen resources. You won’t need to load all the images/text on a given site when you can’t see it. But lazy loading can only help you delay downloading resources and doesn’t make your resources smaller and more cost-efficient.

However, if you are looking to make a more cost-efficient solution that is similar to lazy loading, try looking for Resumability.

Resumability

Many developers have never heard of the Resumability concept before. Resumability renders JavaScript partially in the server, the final state of the render will be serialized and sent to the client with the corresponding HTML payload. Then the client will finish the rendering, saving time and resources on the client side. Essentially, Resumability uses the server to do the heavy lifting and then gives the client a minimal amount of JavaScript to execute via serialization.

The main idea of Resumability is to serialize the application state from the server to the client. Instead of loading everything (HTML, JS) and hydrating them on the Front-end, Resumability serializes the JavaScript parsing in stages and sends them to the client in HTML.

Page startups will be instantaneous because the client doesn’t have to reload anything and can deserialize the state injected into the HTML. Resumability is a very foreign concept and is not common in many projects. It was coined by the founder of Qwik, Misko Hevery.

Qwik is a JavaScript framework that relies on Resumability under the hood. Unlike other frameworks, Qwik is built from the ground up with Resumability in mind. Frameworks like React and Vue can never utilize Resumability without sacrificing backward compatibility. It is because the lazy loading component of Qwik uses asynchronous lazy loading compared to the synchronous nature of most JavaScript frameworks.

The goal of Qwik is to load as minimal JavaScript as possible. Lazy loading JavaScript is hard and, in some instances, impossible. The less you need it, the better. Resumability allows developers to have fine-grained lazy loading and decreased memory usage for mobile applications optimizing your site for the mobile web.

Using Qwik is similar in some ways to React, specifically, its syntax. Here is a code snippet example of how Qwik works in code. The root of the application will be in the form of HTML:

import { App } from './app';
export const Root = () => {
  return (
    <html>
      <head>
        <title>Hello Qwik</title>
      </head>
      <body>
        <App />
      </body>
    </html>
  );
};

The root has a dependency on App. It will be the lazy loaded Qwik component:

import { component$ } from '@builder.io/qwik';
export const App = component$(() => {
  return <p>Hello Qwik</p>;
});

Qwik and React have similarities at the component level. But it differentiates when you get into the server side of things.

import { renderToString, RenderOptions } from '@builder.io/qwik/server';
import { Root } from './root';
export default function (opts: RenderOptions) {
  return renderToString(<Root />, opts);
}

The code snippet above shows you how the server-side of Qwik serializes the root component using the renderToString method. The client will then only need to parse pure HTML and deserialize the JavaScript state without needing to reload them.

Summary

Application performance is essential for the client. The more resources you have to load on startup, the more time your app will need to bootstrap. Loading times expectations are getting lower and lower. The less time you need to load a site, the better.

But if you are working on large enterprise applications, how you can optimize your apps are not obvious. Data-loading patterns are one way you can optimize your applications’ speed. In this article, you reviewed five data-loading patterns that may be of use:

  1. Server Side Rendering (SSR) and Jamstack;
  2. Active Memory Caching;
  3. Data Event Sourcing;
  4. Prefetching and Lazy Loading;
  5. Resumability.

All five of which are useful in their own circumstances.

SSR and Jamstack are generally good choices for applications that require less client-side state management. With the advent of modern JavaScript frameworks like React, more people have tried Client Side Rendering (CSR), and it seems that the community has come full circle back to SSR. SSR is the technique used by old MVC web frameworks to use template engines to generate HTML based on the data on the backend. Jamstack is an even older depiction of the original web, where everything was using just HTML.

Active memory caching helps users load data from APIs faster. Active memory caching solves the important issues around data loading by either caching the results on a remote cache server (Redis) or your local browser cache. Another data-loading pattern even uses it, prefetching.

Next, event sourcing is an architectural pattern that supplements the real-time event-based WebSocket APIs. Plain old WebSockets are not enough to become completely efficient because even though the WebSocket itself is real-time, the recurring API call to the database can cause a bottleneck. Event sourcing removes this problem by creating a separate database for retrieving data.

Prefetching and lazy loading are the easiest solutions to implement. The goal of prefetching is to load data silently during network idle times. Clients will save the prefetched link inside their browser caches, making it instantaneous on contact.

Lazy loading reduces the number of resources you need to load on the first click. You only need the resources that you see directly after the page loads. However, Resumability takes lazy loading to the extreme. Resumability is a method of lazy loading JavaScript components by rendering them in the server and then serializing the state to continue the render on the client via HTML.

Where To Go From Here?

Learning to optimize your Frontend applications is an ongoing process; you need to be proactive about what you implement daily. Data-loading patterns are only one of a few ways you can use to improve your application performance.

But it is best to consider the common pitfalls before making any drastic changes to how your application is structured and consumes and loads data.

If you’re interested in exploring the references, you can check out:

I hope you found this article helpful. Please join the forum discussion below if you have any questions or comments.

Categories: Others Tags:

Named Element IDs Can Be Referenced as JavaScript Globals

September 27th, 2022 No comments

Did you know that DOM elements with IDs are accessible in JavaScript as global variables? It’s one of those things that’s been around, like, forever but I’m really digging into it for the first time.

If this is the first time you’re hearing about it, brace yourself! We can see it in action simply by adding an ID to an element in HTML:

<div id="cool"></div>

Normally, we’d define a new variable using querySelector("#cool") or getElementById("cool") to select that element:

var el = querySelector("#cool");

But we actually already have access to #cool without that rigamorale:

CodePen Embed Fallback

So, any id — or name attribute, for that matter — in the HTML can be accessed in JavaScript using window[ELEMENT_ID]. Again, this isn’t exactly “new” but it’s really uncommon to see.

As you may guess, accessing the global scope with named references isn’t the greatest idea. Some folks have come to call this the “global scope polluter.” We’ll get into why that is, but first…

Some context

This approach is outlined in the HTML specification, where it’s described as “named access on the Window object.”

Internet Explorer was the first to implement the feature. All other browsers added it as well. Gecko was the only browser at the time to not support it directly in standards mode, opting instead to make it an experimental feature. There was hesitation to implement it at all, but it moved ahead in the name of browser compatibility (Gecko even tried to convince WebKit to move it out of standards mode) and eventually made it to standards mode in Firefox 14.

One thing that might not be well known is that browsers had to put in place a few precautionary measures — with varying degrees of success — to ensure generated globals don’t break the webpage. One such measure is…

Variable shadowing

Probably the most interesting part of this feature is that named element references don’t shadow existing global variables. So, if a DOM element has an id that is already defined as a global, it won’t override the existing one. For example:

<head>
  <script>
    window.foo = "bar";
  </script>
</head>
<body>
  <div id="foo">I won't override window.foo</div>
  <script>
    console.log(window.foo); // Prints "bar"
  </script>
</body>

And the opposite is true as well:

<div id="foo">I will be overridden :(</div>
<script>
  window.foo = "bar";
  console.log(window.foo); // Prints "bar"
</script>

This behavior is essential because it nullifies dangerous overrides such as

, which would otherwise create a conflict by invalidating the alert API. This safeguarding technique may very well be the why you — if you’re like me — are learning about this for the first time.

The case against named globals

Earlier, I said that using global named elements as references might not be the greatest idea. There are lots of reasons for that, which TJ VanToll has covered nicely over at his blog and I will summarize here:

Additional considerations

Let’s say we chuck the criticisms against using named globals and use them anyway. It’s all good. But there are some things you might want to consider as you do.

Polyfills

As edge-case-y as it may sound, these types of global checks are a typical setup requirement for polyfills. Check out the following example where we set a cookie using the new CookieStore API, polyfilling it on browsers that don’t support it yet:

<body>
  <img id="cookieStore"></img>
  <script>
    // Polyfill the CookieStore API if not yet implemented.
    // https://developer.mozilla.org/en-US/docs/Web/API/CookieStore
    if (!window.cookieStore) {
      window.cookieStore = myCookieStorePolyfill;
    }
    cookieStore.set("foo", "bar");
  </script>
</body>

This code works perfectly fine in Chrome, but throws the following error in Safari.:

TypeError: cookieStore.set is not a function

Safari lacks support for the CookieStore API as of this writing. As a result, the polyfill is not applied because the img element ID creates a global variable that clashes with the cookieStore global.

JavaScript API updates

We can flip the situation and find yet another issue where updates to the browser’s JavaScript engine can break a named element’s global references.

For example:

<body>
  <input id="BarcodeDetector"></input>
  <script>
    window.BarcodeDetector.focus();
  </script>
</body>

That script grabs a reference to the input element and invokes focus() on it. It works correctly. Still, we don’t know how long it will continue to work.

You see, the global variable we’re using to reference the input element will stop working as soon as browsers start supporting the BarcodeDetector API. At that point, the window.BarcodeDetector global will no longer be a reference to the input element and .focus() will throw a “window.BarcodeDetector.focus is not a function” error.

Bonus: Not all named elements generate global references

Want to hear something funny? To add insult to the injury, named elements are accessible as global variables only if the names contain nothing but letter. Browsers won’t create a global reference for an element with a ID that contains special characters and numbers, like hello-world and item1.

Conclusion

Let’s sum up how we got here:

  • All major browsers automatically create global references to each DOM element with an id (or, in some cases, a name attribute).
  • Accessing these elements through their global references is unreliable and potentially dangerous. Use querySelector or getElementById instead.
  • Since global references are generated automatically, they may have some side effects on your code. That’s a good reason to avoid using the id attribute unless you really need it.

At the end of the day, it’s probably a good idea to avoid using named globals in JavaScript. I quoted the spec earlier about how it leads to “brittle” code, but here’s the full text to drive the point home:

As a general rule, relying on this will lead to brittle code. Which IDs end up mapping to this API can vary over time, as new features are added to the web platform, for example. Instead of this, use document.getElementById() or document.querySelector().

I think the fact that the HTML spec itself recommends to staying away from this feature speaks for itself.


Named Element IDs Can Be Referenced as JavaScript Globals originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

20 Best New Websites, October 2022

September 26th, 2022 No comments

The design world fluctuates back and forth, swerving between love and hate for different design trends. Sometimes we see a wide range of approaches, and sometimes designers all hop on the same idea.

This month, the web is dominated by animation. Designers are cramming in motion in unexpected ways. And it’s fun to explore. Here are 20 of the best new sites on the web this month. Enjoy!

Bannach

Bannach is a German furniture brand. Its products are colorful and geometric, so it makes sense that when you scroll down to the collection, the thumbnails begin as pixel blocks and animate into product photography.

Fornasetti Profumi

Fornasetti Profumi takes a different approach to motion. It uses video to emphasize stillness to promote the calming qualities of its candle products.

The Other Side of Truth

The Other Side of Truth is a superb exercise in utilizing the web for a cause. It presents facts on the Russia-Ukraine war, but the standout feature is the toggle switch that, instead of light mode-dark mode, toggles facts and Russian state propaganda.

Glasfurd & Walker

Glasfurd & Walker is a portfolio site for a design agency. So far, so standard. However, it sets itself apart because it’s slightly bigger than the browser and swerves left and right with your mouse movement.

Sirup 5th Anniversary

Sirup is a Japanese singer-songwriter, and to celebrate the fifth anniversary of his first hit single, his record company has put together this awesome maximalist micro-site that uses type, motion, and art direction to capture his style.

Fitzjohn’s

Fitzjohn’s is a slick site for a new apartment complex in the Hampstead area of London. It uses a refreshing modern color palette and calming animation to take the edge off the frankly ludicrous price tag.

Persepolis Reimagined

Persepolis Reimagined is an awe-inspiring WebGL tour through one of the most important cities in ancient Iran. Make sure you tour it on a large screen. It’s hard not to be wide-eyed with wonder.

JaM Cellars

JaM Cellars is a Californian wine brand that’s pitching to bachelorette parties. With names like Butter, and Sugar, it’s not the most sophisticated tipple, but yellow, we love a yellow site.

Danielle Levitt

This portfolio site for film director and photographer Danielle Levitt features samples of her best work scrolling past the viewport. There’s a clever switch of thumbnail and background color when you scroll down to the contact details.

Propel

From total color energy to Apple-levels of minimalism: Propel is a slick, animate-on-scroll site for a marine motor brand selling an outboard and inboard motor. The animated masks on the images are a nice subtle touch.

Standards

Standards is a site for a SaaS that helps organizations create, maintain, and share brand guidelines. It uses subtle animation, video of its UI, and compelling copy to sell its approach.

Chris Carruthers

The portfolio site for Chris Carruthers is deliberately self-indulgent with scrolling text, clipped images, and scroll-jacking, but it’s also delightful to peruse.

Theodore Ellison Designs

We don’t often see colored glass in real life, but the play of light on stained glass is beautiful. This site for Theodore Ellison Designs uses video to bring the effect to the web.

Owomaniya!

The Owomaniya report for 2022 uncovers the state of gender diversity in the Indian entertainment industry. Presented in the style of infographics, the information is brought to life by animation.

Meetings

Meetings is a French events company. Its site uses an animated collage approach to showcase its services, and animated text to pull you into its content.

Blakeney

Blakeney invests in African companies on behalf of institutional investors. Its site is typical of the financial industry, but it uses animation to lift it to a higher level of interest.

Becklyn

Becklyn is a digital design agency. Its portfolio site uses animated text, expanding image masks, and video to guide us through its site and app design approach.

Cabi

Cabi is a brand of Japanese condiments with a typically Japanese feeling site. Bright colors, a slowly scrolling slideshow of dishes, and editorial to pack shot hover effects are a great introduction to the brand.

Slantis

Slantis provides building information modeling to architecture and infrastructure providers. Its site uses animation to showcase the types of content it produces for clients.

July Fund

July Fund is a venture capital project. It takes an entirely different approach than its competitors by adopting a chaotic but enjoyable card-based design.

Source

The post 20 Best New Websites, October 2022 first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

5 Unexpected SEO Factors You Should Be Tapping Into

September 26th, 2022 No comments

What is an SEO ranking factor?

SEO ranking factors affect your website’s search engine ranking. For example, Google’s algorithm will decide whether your outstanding article on cat eye colors will make it to page one. How to maximize your content’s chances depends on the SEO ranking of the content.

Google and Bing employ SEO to show search results. These search engines demand the right results. “Right” signifies a page that matches the user’s search: it may not be the best material, but it’s what the user wants. 

A landing page must match the user’s search intent. You shouldn’t show a product page to someone seeking information — not yet, because they’re still lost. On the other hand, if a buyer lands on one of your longer blog posts, you risk losing them. You should send them to your store’s product page.

Product pages must include commercial keywords. Optimize a category page for [buy dog food] if you sell dog food. Do you write about dog food? This content may be tailored for [how to feed my dog] and aimed toward informational consumers.

SEO ranking is content placement on Search Engine Results Pages (SERPs). Ranking number one means that your website is the top result for a given phrase.

Click-through rates rise as you approach number one in search results. The top 10 first-page results are also significant, but 95% of readers don’t finish the first page.

Top 5 Unexpected SEO Factors You Should Be Tapping Into

Google was founded in 1998, although it wasn’t until 2003 that it began developing intelligent algorithms to provide the best search engine user experience possible. Google invented FLORIDA due to the keyword-stuffing techniques many web admins used to score highly. 

FLORIDA fought against black hat SEO techniques and paved the way for Google’s incredibly complex array of algorithms, influencing how we search today. 

As a result, modern search optimizations need modern SEO factors. Here are the top 5 unexpected SEO factors that can give your content an advantage.

  1. ‘People Also Ask’ section.

You’ve probably Googled something and seen drop-down menus with responses. Similar to:

People Also Ask is a relatively recent service offered by Google to give users on-demand, real-time information. Users can see critical details relevant to their questions by using drop-down boxes.

To land a featured snippet, answer the question in your post. You must optimize your content for high-volume keywords with relevant inquiries.

This strategy is used to find the most helpful questions to develop content, as People Also Ask queries often have low search volume.

How can you get these questions? Here are some of the steps that you can follow:

  1. Discover pages that rank for numerous keywords.
  2. Use Ahrefs or SEMrush to analyze and scrape their keyword rankings
  3. Gather all of their People Also Ask for information
  4. Pick the most frequent or popular queries
  5. Ensure you do not already rank for the keyword
  6. Determine if you can genuinely rank and if the keyword difficulty is not too high
  7. Optimize your page for this long-tail/question keyword just like you will do with any other term

2. Google E.A.T. – Long Form Content

Google E.A.T. stands for EXPERTISE, AUTHORITY, and TRUST.

This abbreviation represents the official Google guideline for observing and crawling web pages to evaluate content quality. It’s what its bots use to distinguish between high-quality and low-quality content. 

This policy has been in effect for more than seven years, but it wasn’t until 2015 that Google officially published them, due to an internet leak of company standards.

In 2022, E.A.T. will continue to play a significant role in SEO strategy. Actually, it’s perhaps more important than ever, with brands and marketers favoring high-quality content over other SEO strategy elements.

The benefits of SEO and marketing are limitless, ranging from more natural backlinks to increased page dwell time. In addition, developing longer-form content never ceases to provide additional brand benefits when time and effort are invested. 

On top of that, it has been proven that longer content results in higher rankings. Remember this when developing SEO content to create user-centric, high-quality material that addresses problems.

3. Localization of SEO strategies

Google My Business merits its subsection here. Localization of SEO in 2022 will necessitate you prioritizing these adjustments on your website.

In a time of broad uncertainty and ongoing political events, it is vital to know whether businesses are open and how they work. And this is precisely where Google My Business comes in — supplying users with the necessary contact and business information for local providers/retailers.

These listings additionally include:

  • Real-time business hours
  • Visitor patterns and times of day
  • Phone numbers, websites, and email
  • Reviews & Ratings
  • Detailed directions

You can also post updates regarding your operations or special deals to keep your clients up-to-date on any significant business developments.

4. Schema markup 

It hasn’t commonly been understood yet, but the schema markup is a significant SEO trend in 2022. Adding more structured data and rich snippets (and formatting) to your sites and content boosts the likelihood of obtaining valuable real estate on SERPs, such as People Also Ask.

Since Google’s engines tend to prioritize user-centric experiences, tailoring your content to appeal to these portions of SERPs can be just as advantageous as placing in the top 10 search results on the first page. This is why these appearances are referred to as “Position 0.”

Fortunately, there is often a simple method you can apply to generate structured data for any internet page:

  1. Utilize Google’s Structured Data Markup Assistant to construct your schema
  2. Choose the ‘Type of Data’ best relevant for your needs
  3. Enter the URL to be marked-up
  4. Select which elements to highlight
  5. Keep adding more markup elements
  6. Produce the HTML
  7. Include the markup on the page.

5. Video SEO gets an upgrade.

Consider this SEO fact: there are 800 million videos online and 37 million active channels. With this in mind, it is not surprising that video SEO is gaining popularity.

Given the development of Google’s M.U.M. algorithm, which favors video clips in Search Engine Results Pages, optimizing your video content for SEO will be vital beyond 2022. Ensuring that your content appears on the first page is no longer sufficient. You must also do your best to promote your video material.

How? Use these steps:

  1. Pick a keyword.
  2. Optimize the title and description 
  3. Tag correctly
  4. Write a fun script and create longer videos
  5. ‘Subscribes’ and ‘likes’ promotes engagement.
  6. Create Playlists. Keep viewers interested and Use a compelling thumbnail.
  7. Caption videos and use social media to promote your videos.

Don’t neglect the traditional SEO

Although all of these new and exciting SEO trends for 2022 are enticing and worth investing time and money in, it is crucial not to lose track of traditional SEO and its efforts. That means you need not entirely recreate the wheel. You should invest in these methods to increase your search visibility, website traffic, and sales via exposure on search engines such as Google.

The post 5 Unexpected SEO Factors You Should Be Tapping Into appeared first on noupe.

Categories: Others Tags:

How To Create An E-Commerce Content Strategy To Improve Sales

September 26th, 2022 No comments

You are aware of the significance of e-commerce content strategy for improving sales in e-commerce businesses unless you are completely off the grid. The issue is that some marketers believe that if they provide enough content, people will find it. Unfortunately, this is not how it operates.

Without a plan, content is merely words, pictures, and videos that are broadcast into cyberspace. This type of material adds nothing to the target market’s business other than to the happiness and wealth of certain content creators.

Content strategies have a clear aim and a set of actions for how to get there, such as boosting your bottom line, increasing conversions in your sales funnel, and increasing engagement with target audiences. Among marketers’ top content marketing challenges: producing material that provides good quality content with leads.

Online companies are driven by content, which generates likes, shares, and sales. However, an e-commerce content strategy is necessary for material that influences consumer behavior.

Why Does My Ecommerce Website Need a Content Marketing Strategy?

Creating unique, high-quality material with a specific audience in mind while appealing to their interests and addressing their problems is known as content marketing. By giving useful information that cultivates goodwill and involvement, it often gently sells a brand, service, or product as opposed to making a hard pitch.

The ultimate objective of this customer engagement is to turn consumers into paying clients by guiding them through the sales funnel process of meeting their needs, establishing your credibility as an authoritative source of information, positioning yourself as the authority best suited to assist them, and then turning interest into a paid business and a valuable ongoing relationship.

A successful e-commerce content strategy will bring about the following advantages:

  • It brings in fresh visitors to your business website. 
  • It promotes confidence in your brand.
  • It can assist with crucial conversions.
  • It could generate a different source of income.
  • Its evergreen substance may offer a lasting benefit.

Without a solid e-commerce content strategy, you run the risk of confusing and alienating potential consumers with content that lacks focus and purpose. Additionally, you run the risk of falling behind rivals that have a strong content strategy in place.

Ideas To Improve Sales In E-Commerce Content Strategy

1. Recognize your audience

If you sell products online, you should have an e-commerce content strategy and be aware of the buying habits of your target market. If you sell goods on external marketplaces like Amazon, you should be aware of the type of material they require and match it to what you already provide for your own website.

Additionally, you ought to comprehend how customers locate your goods. Perhaps they use a search engine if they are older. Your products might appear in the social media feeds of your target market, which is likely to be younger. Understanding current trends will help you follow and reach your audience where they are because social media platform audiences vary.

Knowing your audience allows you to map out their purchasing patterns. While most of your material may be used on various social media platforms, some of them might profit from more distinctive media.

2. Identify material specific to each channel

You can choose the kinds of material you should produce after you are aware of the channels your audience consumes. You can produce entertaining and educational videos if you use TikTok. You can design a great graphic if your target demographic uses Facebook. An aesthetically pleasing GIF would also work well on Twitter.

Numerous pieces of material can be successful on multiple platforms, regardless of the channel. For instance, you can post videos, descriptions, captions, and hashtags on your own website as well as on several social media sites.

You should weigh the expected results against the specific e-commerce content strategy investment needed for each channel. Avoid investing excessively in specialist content at the expense of your essential content needs. If clients can’t locate the information they require to make a decision, even a strong social media hook won’t be of much use.

3. Create an information model

You can make a content model after mapping out the content. This approach establishes precise standards for content creators to follow when structuring their work to complement your plan.

First, list all the entities you intend to map, such as your offerings’ goods, product categories, campaigns, and channels, as well as any editors, product managers, or other relevant entities.

After mapping the entities and their connections, you must decide what information you need to record for each item. Start with the product’s name, description, price, and photo.

There will probably be a new channel in two years. Make sure your approach is adaptable enough to deal with new knowledge base platforms, fads, and the associated content without needing to start from scratch.

Once you have your model, you must decide how to best add content to it. Even if your production crew is imaginative, they can forget to record the right information. Implement the content model in a structured CMS to manage the material for your company to assist them.

4. Support the CMS without a head

Businesses that want to manage their materials more effectively need an e-commerce content strategy. It simplifies the creation, management, and publication of e-commerce content, including the simultaneous publication of the same material across different channels. Enter headless CMS, which has been popular among providers to store content in a single knowledge base repository and deliver data using separate platforms.

With a headless CMS, you can store material in a more organized way than with conventional systems. The headless CMS keeps information in a central location regardless of whether you push it to your website, a partner’s website, a social media site, or a print queue. It collects, structures, and disperses content via APIs, maps out links between connected content, and manages crucial metadata.

Front-end developers can concentrate on the content once a headless CMS is in place. The structure that emerges can make it easier for users to update and add new products to your website, produce more useful designs, and please customers.

5. Request client feedback

Paying attention to what your consumers have to say can help you make improvements to the material you offer and increase sales. Understanding what your customers think of your sales process is essential for future improvement, regardless of how you go about it. You could send a follow-up email, have live chat support scripts, interview customers, examine recorded sales calls, check social media channels, or use other methods.

6. E-commerce customer experience

Your whole customer experience or how customers feel about all of their contacts with your company includes your e-commerce services. So, businesses must promptly provide customers with the information that satisfies their demands when they use self-service portals with a problem, sometimes one that is urgent.

When the e-commerce customer experience rate grows, it will improve the customer retention rate thus resulting in more sales over time.

What Kinds of E-commerce Content Strategy Are Effective?

You can use a range of content kinds when creating an e-commerce content strategy. These consist of:

1. Blogging

 These articles are the backbone of the majority of content marketing plans because they foster client relationships, generate leads, and lend themselves to SEO tactics.

2. Original photography

This compensates for the fact that customers cannot touch the goods you are selling before they make a purchase.

3. Video content

 It has been demonstrated that watching videos increases both the volume and value of sales.

4. Product guides

As customers seek out additional details about the products they are interested in, they may increase traffic to your e-commerce site.

5. Customer testimonials 

These come in the form of endorsements, critiques, and case studies.

6. Email marketing

 You have numerous opportunities to interact with customers and develop relationships by simply confirming purchases, informing them of shipping and product delivery, and conducting follow-ups.

Conclusion

Top brands, big and small, spend money on e-commerce content strategy because it’s essential for retaining customers and bringing in new ones. Whether you want to increase traffic through organic and paid searches or develop original content that serves marketing and sales objectives, we can offer a comprehensive, all-in-one solution to help you improve your online selling presence.

You can easily establish and update your current content plan, detect content gaps, or research, write, and audit content with our content marketing toolkit, which will save you time and money. You may write your own success narrative if you have the right resources to study your market, conduct competitive audits, produce excellent content, and analyze the outcomes to improve future performance.

The post How To Create An E-Commerce Content Strategy To Improve Sales appeared first on noupe.

Categories: Others Tags:

Top Features to Consider in a Barcode Scanner SDK

September 26th, 2022 No comments

In the modern world that we live in, barcodes are ubiquitous. You can spot a barcode on almost every item you purchase from a grocery store to a book you read. Barcodes help efficient information transmission, save time, and keep errors at bay. Since they encode information in machine-readable formats, they also reduce the need for manual data entry, reducing manual efforts. While traditional laser-based barcode scanners have long been used for commercial purposes, they are now being replaced by 2D Imagers. 

2D Imagers help convert mobile devices, such as smartphones, tablets, etc., into barcode scanners. Hence, no additional hardware is required to perform barcode scanning. But, the question is, how do you create a barcode scanning application for these mobile devices? There are two ways to do this: build an application from scratch or opt for a barcode scanner SDK to trim down the development time. 

Before we discuss more on barcode scanner SDKs, let’s first go through the benefits of 2D Imagers over Laser-Based Barcode Scanners. 

Benefits of 2D Imagers over Laser-Based Barcode Scanners

There are various reasons why 2D Imagers are becoming more popular than laser-based barcode scanners. Most businesses are now opting for 2D Images because of their outstanding features. 

  • Scanning On the Go: Most laser-based barcode scanners are wired and do not let users perform barcode reading on the go. 2D Imagers, on the other hand, make use of mobile devices’ cameras and image processing techniques to allow users to scan barcodes anywhere, anytime. 
  • Support for Various Barcode Symbologies: Traditional laser-based barcode scanners can scan one-dimensional barcodes. Some updated ones can support 2-D barcode types, such as PDF417 codes. When it comes to 2D Imagers, they support all common barcode symbologies, from linear barcodes to 2D barcode types such as DotCodes, DataMatrix codes, Aztec codes, etc. This is another reason why 2D Imagers are gaining popularity over the years. 
  • Ability to Read Multiple Barcodes at Once: Laser-based handheld barcode scanners fail to read multiple barcodes simultaneously. Modern 2D Imagers are based on the latest technologies and can quickly scan a dozen barcodes in one pass. Hence, they are more suitable for inventory operations that involve scanning multiple barcodes in a single scan. 
  • Read Damaged Barcodes: Laser-based barcode scanners reflect laser light off of a barcode to decode the information it contains. These barcode scanners do not perform well in low light and cannot read damaged barcodes such as crumpled, torn, or incomplete. 2D Imagers employ image processing techniques to read all such challenging barcodes. As wrinkled barcodes are common in retail environments, 2D Imagers are set to replace the traditional ones. 
  • Decode Barcodes Off a Screen: When it comes to reading barcodes off a screen, laser-based barcode scanners do not perform well. 2D Imagers have the edge over their laser-based counterparts as they are effective in scanning barcodes on screens. 

2D Imagers are also ideal for personal usage, such as making payments via QR codes or quickly accessing information. One can’t carry a handheld barcode scanner all the time for such purposes. Your smartphone or tablet is enough! 

The Need for a Barcode Scanner SDK 

If you do not have much time or a team to build a barcode scanner app from scratch, a barcode scanner SDK is all you need! Using a few lines of code, you can embed barcode reading functionality into a web, mobile, or desktop application. No need to spend days building the program for effective barcode reading! 

The market is filled with multiple vendors that offer all sorts of barcode scanning SDKs. Hence, the selection process can get tricky and overwhelming for some. But, there are a few parameters that you can consider to choose the one ideal for your business. 

What Features to Consider in a Barcode Scanner SDK? 

Go through the following features to choose the best barcode scanner SDK for your business. 

  • Simplified Integration Process: Integrating a barcode scanner SDK into a mobile or web app should be easy. It shouldn’t include complex codes and multiple steps to add barcode reading capability into a new or existing mobile app. Hence, choose the one that offers a simplified integration process. 
  • Exceptional Speed: Speed is critical for most operations such as inventory management, retail, logistics, etc. Hence, you cannot compromise by choosing a slow barcode reader SDK. Leading vendors offer solutions that can effortlessly scan over 500 barcodes in a minute. To leverage the benefits of barcode technology, you must choose a fast barcode scanner SDK. 
  • Platform Support: The platform support depends on what type of app you want to develop. Do you want to build a mobile app, a web app, or a desktop app? Once decided, check for the versions supported by the SDK and then make a decision. 
  • Supported Barcode Symbologies: Choose a barcode scanner SDK that supports multiple barcode symbologies, from 1-dimensional barcodes to 2-dimensional symbologies, such as PDF417 codes, MaxiCode, Aztec codes, DataMatrix codes, etc. 
  • Impressive Accuracy: Leading barcode reader SDK that uses commercial-grade barcode detection algorithms, camera-enhancing functionalities, and OCR functionalities. Choose a barcode scanner SDK that offers near 100% accuracy. 
  • Ability to Read Tough Barcodes in Challenging Environments: An ordinary barcode scanner may not support reading tough barcodes such as angled, skewed, distorted, incomplete, or blurred. Look for a robust barcode reader SDK that supports such barcodes in challenging environments. 
  • Customization Capabilities: Choose a barcode reader SDK that offers customization capabilities to suit your specific business requirements. 
  • Robust Technical Support: Opt for a vendor that offers powerful technical support to cater to all your queries. You may never know what issue you encounter while using the SDK or integrating. Hence, choose a vendor that’s known for good technical support services. 

Conclusion

After going through these features, try before you buy to make an informed decision. You can compare multiple options and see which suits your business requirements best. Once you have done an in-depth analysis, finalize the most ideal option out of all. 

The post Top Features to Consider in a Barcode Scanner SDK appeared first on noupe.

Categories: Others Tags:

How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images

September 23rd, 2022 No comments

If we browse the WordPress theme directory, a majority of themes showcase cover images. It is a feature in popular demand. The cover page trend is true even in the block theme directory screenshots as well.

Let’s consider the following example from Twenty Twenty (a classic theme) which includes a cover template that can be used to display both in single post and page, where the post’s featured image displays at the top that stretches across the browser screen, with post title and other desired meta data below. Cover templates allow creating content that stands out from the traditional constraints of displaying content.

Screenshot showing a single post with Twenty Twenty cover template.

Creating cover templates currently requires writing PHP code as captured here in the Twenty Twenty default theme’s cover template. If we look at the template-parts/content-cover.php file, it contains the code for displaying content when the cover-template is used.

Thus, it is not possible to create a customized cover page if you do not possess a deep knowledge of PHP. For many ordinary WordPress users, the only option is to use plugin like Custom Post Type UI as described in this short video.

Cover sections in block themes

Since WordPress 5.8, theme authors could create custom templates (like single post, author, category, and others) with a top hero section using block editor cover block and bundled into their themes with minimal or no code.

Before diving into how top large cover sections are created in block themes templates, let’s briefly look at the two block themes Twenty Twenty-Two and Wabi by Rich Tabor (full review here).

Screenshot showing cover page thumbnails of Twenty Twenty-Two (left) and Wabi (right) themes.

Behind-the-scenes, Twenty Twenty-Two implements a large header by adding a hidden image stored as a pattern in the header-dark-large parts. Whereas, in the Wabi theme, the large header background color in a single post is implemented with accent background colors and a 50px height spacer block (lines: 5-9). The accent colors are managed by the assets/js/accent-colors.js file.

Many others chose to create a top cover section by using cover block, which allowed users to change the background color and add a static image from Media Library or upload from media devices – without writing any code. With this approach, images from the post featured image block had to be added manually to each single post if you wanted to have the post featured image as the background image in single posts.

Cover Blocks with dynamic post featured image

WordPress 6.0 made available another cool featured image cover blocks feature, which allows use of the featured image of any post or page as the background image in the cover block.

In the following short video, Automattic engineers discuss adding featured images to cover blocks with an example from Archeo theme:

The image block including post featured image block can be further customized using duotone color in theme.json as discussed in this short Connecting The Dots YouTube video (Automattic’s Anne McCarthy).

Use case examples (Wei, Bright Mode)

If we browse the thumbnail images in the block theme directory, we see a majority of them include large cover header sections. If we dig into their template files, they make use of cover blocks with static image background.

Some recently developed themes are using cover blocks with the dynamic post featured image background (e.g., Archeo, Wei, Frost, Bright Mode, etc.). A brief overview of the new feature is available in this short GitHub video.

Screenshot showing cover page thumbnails of Wei (left) and Bright-mode (right) themes.

Combining dynamic accent colors features of Wabi theme with cover and post featured image blocks, Rich Tabor further expands his creativity in his new Wei theme (full review available here) to display dynamic cover images from a single post.

In his Wei announcement post, Rich Tabor writes: “Behind-the-scenes, the single.html template is using a Cover block that leverages the post’s featured image. Then the duotone is applied by the color scheme assigned to the post. This way, just about any image will look fine”.

If you would like to dig deeper into the Wei theme’s header cover block and learn how to create your own, here is a short video from Fränk Klein (WP Development Courses) who explains step-by-step how it was created.

Similar to the Wei theme, Brian Gardner also makes use of cover block with post featured image block in his recent Bright Mode theme to display standout contents with vibrant colors.

Brian told WPTavern: “he loves most about the theme is the way the Cover Block is used on single pages. It pulls the featured image into the Cover block and also offers custom block styles for shadows and full-height options. […] I feel as though this really presents what’s possible with modern WordPress.”

For more detail, here is its demo site and full review of Brian’s Bright Mode theme.

Designing complex layouts with block editor

Recently, WordPress launched a new block editor designed landing homepage and a download page. The announcement attracted mixed reactions from its readers, including from Matt Mullenweg (Automattic) who commented on the 33-days taken to design and launch such a “simple page”. You can find additional behind the scene discussions here.

In response, Jamie Marsland of Pootlepress created this YouTube video where he reproduces a nearly identical homepage in nearly 20 minutes.

Commenting on Marsland video, Sarah Gooding of WP Travern writes: “He is what one might describe as a power user with the block editor. He can quickly shuffle rows, columns, and groups around, adjusting padding and margins as necessary, and assign each section the corresponding color for the design. At this point, this is not something most average WordPress users could do.”

Though the block editor has come a long way, there are still growing pain points to most theme developers and ordinary users to create and design complex layouts with it.

Adding enhancement to TT2 Gopher blocks

In this section, I will walk you through how I added enhancements to the TT2 Gopher Blocks theme that I referenced in my previous article. Inspired by cover blocks from themes that I described earlier, I wanted to add three cover templates (author, category, and single-cover) to the theme.

While browsing websites, we notice two types of cover headers. The mostly observed header is cover section blended with the site header (site title and top navigation) into the cover block (e.g., Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, etc.). We also find header cover section which is not blended with site header and positioned just underneath, such as this BBC Future website. For TT2 Gopher blocks theme, I opted for the latter.

Creating cover header patterns

First, let’s create cover header patterns for author, single, and others (categories, tags) templates using cover blocks. Then we will convert them into patterns (as described here previously) and call the respective header cover patterns into the templates.

If you are familiar to working with the block editor, design your header section using cover blocks in the site editor and then convert the cover header code into patterns. However, if you are not familiar with FSE editor, then the easiest way is to copy patterns from the patterns directory in a post, make necessary modification and convert it into a pattern.

In my previous CSS-Tricks article, I discussed in detail on creating and using block patterns. Here is a brief overview of the workflow that I am using to create the single post cover header pattern:

Single post cover header pattern

Step 1: Using FSE interface, let’s create a new blank file and start building block structure as shown on the left panel.

Screenshot of the WordPress UI with the Full Site Editor. A block is being assembled with post date, categories, and post title.

Alternatively, this could be done in a post or page first, and then copy and paste the markup into a pattern file, later.

Step 2: Next, to covert the above markup into a pattern, first we should copy its code markup and paste into a new /patterns/header-single-cover.php in our code editor. We should also add required pattern file header markup (e.g., title, slug, categories, inserter, etc.).

Here is the entire code of the /patterns/header-single-cover.php file:

<?php
    /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
    <!-- wp:cover {"url":"https://pd.w.org/2022/08/15062ed5f5707b5c5.85694718-2048x1536.jpg","id":100,"dimRatio":0,"overlayColor":"foreground","focalPoint":{"x":"0.40","y":"0.37"},"minHeight":50,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]},"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->
    <div class="wp-block-cover alignfull is-light" style="margin-top:0px;margin-bottom:0px;min-height:50vh"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-100" alt="" src="https://pd.w.org/2022/08/15062ed5f5707b5c5.85694718-2048x1536.jpg" style="object-position:40% 37%" data-object-fit="cover" data-object-position="40% 37%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"spacing":{"blockGap":"10px"}},"textColor":"base","layout":{"wideSize":"800px"}} -->
    <div class="wp-block-group has-base-color has-text-color has-link-color"><!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"textColor":"primary","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"},"fontSize":"small"} -->
    <div class="wp-block-group has-primary-color has-text-color has-small-font-size"><!-- wp:post-date {"textColor":"foreground"} /-->
    
    <!-- wp:paragraph -->
    <p>|</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:post-terms {"term":"category","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}}}} /--></div>
    <!-- /wp:group -->
    
    <!-- wp:post-title {"textAlign":"center","level":1,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"foreground","fontSize":"max-60"} /--></div>
    <!-- /wp:group --></div></div>
    <!-- /wp:cover -->

Step 3: For this demo, I have used this image from photos directory as a filler background image, and applied the Midnight duotone color. To use post featured image dynamically, we should add "useFeaturedImage":true in the cover block by replacing the above filler image link just before the "dimRatio":50 such that the line 10 should look like the following:

<!-- wp:cover {"useFeaturedImage":true,"dimRatio":0,"overlayColor":"foreground","focalPoint":{"x":"0.40","y":"0.37"},"minHeight":50,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]},"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->

Alternatively, the filler image could also be changed by clicking Replace and selecting Use featured image option:

Screenshot of the WordPress UI with ‘Replace’ and ‘Use featured image’ selected.

Now, the header cover patterns should be visible in the patterns inserter panel for use anywhere in the templates, posts, and pages.

Archive cover headers

Inspired by this WP Tavern post and a step-by-step walkthrough to create an author template header, I wanted to create a similar cover header and add to TT2 Gopher theme, too.

First, let’s create the archive cover header pattern for author.html the template as well, following the above workflow. In this case, I am creating this in a new blank page, by adding blocks (as shown below in list view):

Screenshot of the WordPress UI for an Author page using a single post header cover.

In the background for the cover, I used the same image used in the single post header cover.

Because we would like to display a short author biography on the author block, a biographical statement should also be added to the user profile page, or else a blank space will be displayed in the front-end.

The following is the markup code of the header-author-cover, that we will use pattern, in the next step:

    <!-- wp:cover {"url":"https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg","id":226,"dimRatio":10,"focalPoint":{"x":"0.50","y":"0.75"},"minHeight":200,"minHeightUnit":"px","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]}}} -->
    <div class="wp-block-cover alignfull is-light" style="min-height:200px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-226" alt="" src="https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg" style="object-position:50% 75%" data-object-fit="cover" data-object-position="50% 75%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
    <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","right":"2rem","bottom":"1rem","left":"2rem"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
    <div class="wp-block-group" style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem"><!-- wp:avatar {"size":70,"isLink":true,"align":"right","style":{"border":{"radius":"9999px"}}} /-->
    
    <!-- wp:group -->
    <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"flex"},"fontSize":"large"} -->
    <div class="wp-block-group has-large-font-size"><!-- wp:paragraph {"textColor":"foreground","fontSize":"large"} -->
    <p class="has-foreground-color has-text-color has-large-font-size">Published by:</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"large","fontWeight":"600"},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"textColor":"foreground"} /--></div>
    <!-- /wp:group -->
    
    <!-- wp:post-author-biography {"textColor":"foreground","fontSize":"small"} /-->
    
    <!-- wp:separator {"backgroundColor":"foreground"} -->
    <hr class="wp-block-separator has-text-color has-foreground-color has-alpha-channel-opacity has-foreground-background-color has-background"/>
    <!-- /wp:separator --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group --></div></div>
    <!-- /wp:cover -->

To covert the markup into a header-author-cover pattern, we should add the required pattern file header markup as described earlier. By editing the header-author-cover.php pattern, we can create similar header covers for tags, taxonomy, and other custom templates.

The header-category-cover.php pattern for my category.html template is available on GitHub.

Creating Templates with header cover blocks

WordPress 6.0 and the recent Gutenberg 13.7 extended template creating features into the block editor, thus making it possible for many WordPress users, without deep knowledge of coding, to create their customized templates.

For more detailed information and use cases, here is a thorough customization note by Justin Tadlock.

Block editor allows creating various types of templates, including cover templates. Let’s briefly overview how combining cover block and post featured image block with new template UI makes easy to create various types of cover custom templates even with no or low coding skills.

Screenshot of the WordPress UI displaying available templates provided by TT2 Gopher Blocks – Single, Page, Index, Home, 404, Blank, and Archive.

Creating templates has been made much easier with Gutenberg 13.7. How to create block templates with codes and in site editor is described in the Theme handbook and in my previous article.

Author template with cover block

Top (header section) markup of the author.html template is shown below (line 6):

    <!-- wp:template-part {"slug":"header-small-dark","theme":"TT2-GOPHER-V2","tagName":"header"} /-->
    
    <!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"0","bottom":"0px"},"padding":{"bottom":"80px"},"blockGap":"0px"}},"className":"site-content"} -->
    <main class="wp-block-group site-content" style="margin-top:0;margin-bottom:0px;padding-bottom:80px">
    
        <!-- wp:pattern {"slug":"tt2gopher/header-author-cover"} /-->
    
    ...
    ...
    ...
    <!-- /wp:group -->
    ...

Here are screenshots of cover headers for the author.html and category.html templates:

Screenshot of Author Page header (left) with author name, avatar, and biography. And screenshot of Category Page header (right).

The entire code for both templates is available on GitHub.

Single post with cover block

To display cover block in our single post, we have to call the header-cover-single pattern below the header section (line 3):

    <!-- wp:template-part {"slug":"header-small-dark","tagName":"header"} /-->
    
     <!-- wp:pattern {"slug":"tt2gopher/header-cover-single"} /-->
    
    <!-- wp:spacer {"height":32} -->
    <div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->
    ....
    ....
    ....

Here is a screen capture showing the front-end view of the single post with the header cover section:

Screenshot of TT2 Gopher Blocks Single Post with Header Cover Section Pattern.

The entire single-cover.html template is available on GitHub.

You can find additional step-by-step walkthrough tutorials on creating a hero header post section and using post featured image background cover blocks on WP Tavern and Full Site Editing website.

There you have it!

Helpful Resources

Featured image cover block

Blog posts


Even though the block themes, in general, are getting lots of pushback from WordPress community members, in my opinion, they are the future of WordPress, too. With block themes, amateur theme authors, without the deep coding skills and mastery of PHP and JavaScript languages, can now create themes with complex layouts with a hero cover section as described in this article combined with patterns and style variations.

As an early Gutenberg user, I couldn’t be more excited with the new theming tools like create block theme plugin and others which allow theme authors to achieve the following directly from block editor UI without writing any code:

  • (i) create
  • (ii) overwrite theme files and export
  • (iii) generate blank or a child theme, and
  • (iv) modify and save style variation of the current theme

Additionally, the recent iterations of the Gutenberg plugin allow enabling fluid typography and layout alignments and other stylistic controls using only theme.json file without JavaScript and a line of CSS rules.

Thank you for reading and share your comments and thoughts below!


How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

4 Ways to Recruit for Your Team’s Most Niche Roles

September 23rd, 2022 No comments

Every business is unique. And because of this, every team is unique too. Within your own company, you may very well have various team structures, staffing protocols, and managing principles. This makes sense, as different roles and responsibilities have different needs from an organizational point of view. 

Like it or not, there is no cookie cutter method for recruiting and staffing the best team. It takes work and can be a constantly evolving process. Recruiting in itself is a challenging task, particularly now during the era of The Great Resignation. More and more employees are rightfully asking for very specific accommodations. They want to work for companies that value them first as human beings and second as dedicated employees. 

With all this in mind, recruiting specific talent for your team isn’t easy. Certain roles like content creators and marketing managers may be more readily recruitable. On the other hand, roles like front end developers and designers can be more tricky to find. If you’re in this sticky position of hiring individuals for more niche titles, keep reading. Below are four ways to recruit specific talent for your team’s most niche roles. 

1. Ask for Assistance

First and foremost, don’t be afraid to ask for assistance. It’s also important to ask far and wide. First, ask the hiring manager what they think is the best way to find the potential new employee. They may have experience in finding these types of recruits from previous roles. The hiring manager may also have a network to tap into that could be useful for your hiring team. 

Second, lean on resources for your specific needs. Engineering staffing agencies, for instance, can assist in finding top engineering talent based on their diverse pool of individuals looking for jobs. These types of agencies can help HR teams and hiring managers find the perfect match. This can be beneficial for startups, who may not have the namesake yet, to be found by interested employees. Well known companies also stand to benefit as staffing agencies are also a great resource for HR teams who need to hire multiple individuals within the same field. 

2. Tap into Social Media

One of the first places someone turns to when they are seeking a new job opportunity is social media. They want to see what types of positions are available and what kinds of benefits are being offered. Your recruiters should be on social media, particularly sites like LinkedIn, posting about new offerings weekly. Creating this kind of buzz online ensures that your company is putting the word out that you are hiring. 

In addition to sites like LinkedIn, it’s also important to post job offerings on other platforms such as Twitter, Facebook, and even Instagram. Word of mouth is another key aspect of hiring, and someone who sees a niche role may share it with one of their friends or family members. Again, it’s all about creating awareness. If you don’t share publicly that you are hiring for these niche roles, nobody will know that you are in need of a full stack developer, for example. 

3. Offer an Employee Referral Incentive 

Your current employees likely know the top talent. Many have had prior experiences before coming to work at your company. And with these experiences, they have likely met some incredible people that may be great matches for your company. In order to get these referrals, it can be beneficial to offer an employee referral incentive. These types of incentives can be a reason for employees to share about open positions on their own social channels too. 

The key to creating this incentive is to make it as easy as possible for referrals to happen. Luckily, there are several software platforms and tools that can help streamline this process. Let you employees know what the incentive is, whether it is an added bonus to their paycheck or extra vacation days. Also, overly communicate with your employees when a niche position is available. You may even think about upping the incentive for filling more challenging roles — an extra incentive is always going to be welcome!  

4. Look Internally

Yes, certain niche roles like those in the designer field or engineering world require a specific set of skills. But perhaps you have a new role for a “never-been-done-before” position. In these cases, it’s not a bad idea to look internally. Your current employees know the most about the company, including how to navigate current processes and set up new ones. They understand what’s expected from the team and the company’s overarching goals and values. 

If you decide to look internally, be sure to still follow a proper interview process. You likely will also want to have external candidates to interview along with internal ones. This can help the hiring team compare and contrast the necessary skills. There are always benefits to hiring internally, mainly that it can lead to a quicker transition process and more dedicated staff. Your employees as a whole may be more dedicated to work for a company where internal shifts are not only possible but valued. 

Takeaways

Hiring is not an easy process. Again, it takes time to find true talent. For niche roles, it can take a lot longer to find someone that can do the job well and wants to work for your company. Don’t give up just because it takes longer than usual. The right individual is out there; it’s just a matter of finding them! 

By utilizing these tips, recruiters will have a better chance of finding the best possible employee as quickly as possible. Having a plan and leaning on different resources, including current employees, are helpful tactics to utilize. Also, know that other companies are in the same boat. Speak with other company and industry leaders to get a sense of how they are recruiting. Because at the end of the day, the more people that know you are hiring the better chances you have of finding your dream candidate.

The post 4 Ways to Recruit for Your Team’s Most Niche Roles appeared first on noupe.

Categories: Others Tags:

Lessons Learned As A Designer-Founder

September 23rd, 2022 No comments

In the quarter-century I’ve been a product designer, design has matured. We’ve developed tools and practices that allow us to work faster, better, and more in concert with engineers and product managers. Things are a lot less chaotic than they used to be.

But with that change comes the process. I’ve written elsewhere about the dangers of too much process; in the years I spent building the design practice at Heap, I tested and evolved my ideas around Pragmatic Design and its potential to reduce process. I encouraged lower-fidelity artifacts; design briefs instead of endless mockups; product-quality reviews instead of design reviews; and I pushed for early, ongoing collaboration between Design, Product, and Engineering. The results were encouraging: we got more done with a smaller, scrappier team.

In 2020 I left Heap to found Miter, a startup whose mission is deceptively simple: make meetings better. And if Heap was a testing ground for pragmatic design, Miter’s been a crucible for extreme pragmatism: nothing is scrappier than being the only designer, the only PM, and the only engineer. What process is worth keeping? What can be optimized and what can’t? And what needs to change again as we build a team?

That’s useful context if you’re a designer-founder yourself. Still, even if you’re not, it’s valuable to think about why each part of the design process exists and how (and whether) we can optimize it in various ways to be more efficient and better collaborators. So whether you’re designing on a team of ten or ten thousand, this post is for you.

Multiple Hats

Founder or not, designers are often multidisciplinary. Many of us do some PM’ing or make a little prototype if we’re technical. If you’re like me, you enjoy that breadth and chafe a bit when forced to wear just one hat.

What makes being multidisciplinary an advantage? To begin with, it represents a broader design toolkit. With a little engineering knowledge, you can build working prototypes or even design directly in the codebase if that’s the most efficient way to experiment. And small, straightforward projects can sometimes go straight from brain to product:

As a team grows, understanding diverse perspectives can improve collaboration and results. We can’t predict all the twists and turns our designs will take as they’re built, no matter how diligent we are at thinking through edge cases. I’ve always advocated for design and engineering to proceed in lockstep throughout the process; being a lone designer-engineer has reminded me just how powerful that is. My designs can change radically long after they’re “done.” That’s easy to deal with when it’s just me but feasible to manage as a team, too.

To put it simply, you can substitute a little conversation for a lot of process. And that’s easier when your designers speak a little Engineer, your engineers speak a little Designer, and everybody speaks a little Product. In a quick conversation, you can make trade-offs, generate creative solutions, and reprioritize the backlog as your understanding of ROI evolves.

For example, Miter was built to work whether you’re signed in or not: if you have the URL for a meeting, you can join and participate without an account. That’s a strength for us, and when we set out to build our new Dynamics facilitation feature, we figured that would remain true. But during one sprint planning, Nico — our first engineer — raised some questions about how we’d distinguish among anonymous users given we’re unable to identify them; doing so is central to Dynamics in a way it’s not elsewhere.

It was doable, but none of the options was easy, so I made the call (Product hat) to make the feature signed-in-only. Nico disabled the button for signed-out users; I recognized we needed to give users a bit more feedback (Design hat), decided that was worth doing before launch (Product hat), and spent a couple of hours implementing it (Engineering hat).

Wear Your Hats Carefully

Designing in code can be efficient, but be careful: it can hurt the design, too. You know all those arguments designers have with engineers? There’s a reason for them. When wearing your engineer hat, you’re looking to simplify: reducing code paths, avoiding async situations that could yield race conditions, and so on. But sometimes, those are the very things that make a design great. As I implement, I find myself pushing back on my designer self, and (because the engineer self is doing the work) the designer self tends to lose. I have to step back periodically, put the design hat on, and consider.

That separation is easy to maintain if you do all your design in design tools, but I don’t recommend going that far. Sometimes things are straightforward enough (as in the Add Task example above) that it’s just not worth the time to design separately. The key is to recognize when you need to be thinking in design mode vs. engineer mode.

Broadcast Your Hats

It’s valuable not only to understand which hat you’re wearing but also to communicate it to others.

One afternoon my co-founder wanted help with a marketing email. I started with the usual designer questions: what’s the goal of this project? What does success look like? All good questions, but he didn’t realize which hat I was wearing. Instead of the curious designer understanding project requirements, he heard the skeptical CEO challenging them. After a few tense moments, we figured it out, and I’ve been more careful to clarify my hat up front.

This matters most when you’re in a leadership role since power dynamics are at play. The CEO of a startup I advised once took this a step further with actual hats: on his desk, he had two baseball caps, one labeled “CEO” and one labeled “Product.”

Know Your Environment

A multidisciplinary approach isn’t always a path to success. Some teams value specialization and want people to stay in their lanes, especially at larger companies. I once received feedback that I needed to “act more like a designer.” It was hard to hear at the moment, but ultimately I concluded it was more about my fit with that team than anything I was doing wrong.

Takeaway

On any team, it’s valuable for everyone to understand each other’s specialties. Actually wearing all those hats may be less valuable at larger companies, but the fastest way to understand is doing. I’d encourage any designer to learn to code and to think holistically about roadmaps and launches as a PM would. How you deploy that knowledge will depend on your team’s dynamic.

The Bare Minimum Design Process

As designers, so much of what we do is communicating and convincing. We run user tests to justify our decisions. We create multiple options because it’s expected. We write up specs, make flow diagrams, or mock every state, so engineers get the details right. We present in critique to get feedback, but also because our peers want a venue to question our decisions.

But for much of Miter’s existence, none of that has been necessary — the only person I really need to communicate with or convince has been myself. So what’s left? What pieces of the process are still valuable?

Rapid Sketching

In general, the design goes from broad and low-fidelity to detailed and high-fidelity: bullet points to sketches to wireframes to mockups to prototypes to implementation. Though, of course, we rarely do all of that.

In the early stages, I’m a big fan of paper sketches. It’s been years since I accepted their messiness and realized how much faster and more powerful they can be than wireframes (which I rarely use anymore). I even advocate for their use in executive reviews.

In some ways, sketches are more powerful when you are your only audience because they don’t even have to be legible. What’s that weird blob in the corner? Doesn’t matter, as long as you know. You can tear through permutations quickly, which means I sketch regularly but briefly before moving on to higher-fidelity methods.

Design Briefs

I conceived of the Design Brief when I was at Heap as a substitute both for longer design docs and unnecessarily-exhaustive mockups. We used it (along with sketches) as a fast, early artifact to ground cross-functional discussions — from scoping to prioritization to leadership reviews — before spending significant time on the details.

I still use design briefs on larger projects. They don’t take long, and the act of writing them helps me think — taking high-level, hand-wavy ideas to a more practical level. They serve as a record of what I was thinking and why to help clarify for my future self. And we do sometimes conduct design reviews.

I also write product briefs and encourage engineers to write engineering briefs. Both have worked well. The key is not to go overboard, as they’re called “briefs” for a reason. And while it’s useful to have templates for them, I treat those as guidelines rather than requirements.

Hero Mockups

I find mockups to be an indispensable part of the design process. For significant changes and new functionality, it’s much faster to mock it up than to build even a semi-functional prototype. But I only do “hero” mockups — key states of whatever I’m designing rather than a comprehensive set.

As our team grows, those will probably expand, but — just as we did at Heap — I’ll continue to rely on the design brief, real-time conversations, and design-minded engineers rather than go crazy with mocks.

Design System

Miter does have a design system of sorts. I’ve built an extensive set of reusable Figma components, as well as global colors and text styles that I try to use consistently across mocks.

Why bother, with nobody else on the team? Because change is easier, safer, and — most importantly — faster when it’s centralized. If I want to make all our buttons square tomorrow, I can do it once and have it propagate everywhere.

Not everything deserves a component. Sometimes it’s just too early, too prone to change. So when’s the right time to turn one-off work into components? I try to do it when I recognize that a component I built for Project N is needed in Project N+1. (This would be much easier if Figma behaved as advertised, and one could cut-and-paste components from individual files to your library. Hint hint.)

This sort of centralization is even more important in code, and when our mocks and codebase disagree, it’s often the code that wins. To be clear: I don’t see that as a problem. Our canonical style guide is the Global.less file with all our CSS variables. We have one and only one button component, and we use it everywhere. When I write and review code, I’m ruthless about centralization because it’s what will ensure things remain consistent and easy to change.

Five years from now, I don’t want to be a company where simple design improvements get killed because they’d have to be implemented five times over.

Critiques & Reviews

I thrive on feedback; I can’t do my job without it. We don’t have designers on the team, but we do have design-minded engineers and a COO who can critique our UX from both a product and a go-to-market perspective. I do a lot of “What do you think about this?” on Slack, and occasionally, I schedule design reviews.

That said, I miss having other designers around when we brainstorm or critique. I look forward to the point when I can justify hiring a designer to fill out that conversation. In the meantime, there’s no silver bullet. I love the idea of gathering a group of solo designers to review each other’s work across companies, but it’s not something I’ve actually found the time to do. What I do do is take the time to explain my rationale — and design principles in general — to the rest of the team, so over time, they’ll be critiquing from a more and more informed perspective.

Research: Focus On The 20%

Working elsewhere, I’ve been frustrated by the state of user research. It’s underfunded. It’s used to settle cross-functional debates rather than to answer real questions about users. Foundational work takes a back seat to tactical studies. Usability tests are misinterpreted as feedback, so we end up doing what users tell us rather than determining what they need. And too often, research findings are dropped on the floor due to timelines.

At Miter, we’re still too small to hire a dedicated researcher, so I’m responsible for whatever research we do. And because my time is so split, that research really, really needs to count. In making those trade-offs, I rely on a simple truth: designers know how to design. That may seem self-evident, but I think we all forget it sometimes and assume anything that hasn’t been tested has an equal probability of being a disaster.

80% of what a good designer does should be usable. Just as importantly, a good designer has a sense of what lies in that other 20%. I like to think in terms of “UX Risk”: what are the bits of my design that need testing? What’s bold, unique, unknown, ambiguous?

Of course I make mistakes in the other 80%, and it’s essential to watch for unexpected usability issues in the data. For instance, a couple of months ago, we noticed several users had interacted with Miter’s pre-meeting screen but never hit the Start button to start the meeting. We came up with a hypothesis: people thought our topic list was a note-taking UI. Digging into user sessions and looking at average topic length confirmed it. Thankfully, it was an easy fix: make the topics more topic-like and less note-like.

I suspect we’ve done more user research than a typical early-stage startup, and other founders might question that. Still, as we head into our next round of fundraising, I can tell you it’s given me the ability to speak about our target audience and their needs with far more confidence.

Takeaway

What strikes me about my “bare minimum” design process is, in fact, how many of the traditional artifacts I still use. There’s very little that I would do as part of a larger team that I don’t do on my own. The tools I use to explore and iterate are the same ones I’d use to communicate and convince. The biggest difference is in comprehensiveness. So, what can that tell us?

  1. We have a broad array of tools at our disposal. Use them!
    But, use the right tool for the job. Not every project needs every type of artifact. (This is true whether your team uses Agile, “waterfall,” or some other approach.)
  2. Low fidelity can be better than no fidelity.
    I’ve always advocated for low fidelity. It’s faster, easier, and in cross-functional situations, can help focus stakeholders on the forest rather than the trees. But skipping over this phase altogether, while tempting when you’re on your own, can be dangerous. A few minutes spent sketching or writing bullet points can clarify and solidify your design at a stage where that’s extremely low cost.
  3. Know your reasons.
    Are you mocking this up because you need it or because your stakeholders do? Neither is necessarily bad, but you might want to approach the work differently depending. Or put another way: a mockup whose target audience is you has very different requirements than one whose target is a slide in an All-Hands meeting.

Pitfalls Of The Designer-Founder

The designer’s curse is we see pixels: if the alignment is off, if the border is fuzzy, if the context is lost without an animated transition, and so on. We see it when nobody else does, and it bothers us.

The curse of the early-stage founder, meanwhile, is a lack of resources. My team has greater agility than it will ever have again, but we can’t do more than one or two things at a time.

Those curses come into conflict. On the one hand, nobody can stop you from polishing your product into oblivion. And our industry is littered with the corpses of “design-led” companies that built beautiful things nobody wanted.

On the other hand, a design-led company’s superpower is great design. Unlike your competitors, you can present a polished, elegant, usable face to the world, and that’s worth doing.

So it’s a balance. Wear the design hat, revel in it, and sweat the details. And then swap it for the product hat and keep that detail work under control. I’ve hired engineers who are design-centric enough that I’ve had to stop them from polishing things further, and honestly, that’s probably a good dynamic.

As the leader, if you nitpick the details, then the details will get fixed. And that’s marvelous, but it also carries a cost.

What’s your experience been optimizing the design process? Have you found success, or challenges, as a multidisciplinary designer? I’d love to hear about it! And of course, if you wish your meeting could be better, check out Miter and let me know what you think!

Categories: Others Tags: