Posted on

How To Quickly Set Up, Use & Resell Webmail: A Guide For Agencies And Resellers

Webmail is a robust IMAP-based email service and the latest exciting addition to WPMU DEV’s all-in-one WordPress management platform product suite.

In this comprehensive guide, we show you how to get started with Webmail, how to use its features, and how to resell professional business email to clients. We also provide information on the benefits of offering IMAP-based email services for WPMU DEV platform users and resellers.

Read the full article to learn all about Webmail or click on one of the links below to jump to any section:

Overview of Webmail

In addition to our current email hosting offerings, Webmail is a standalone service for Agency plan members that allows for greater flexibility in email account creation.

WPMU DEV’s Webmail:

  • Is affordably priced
  • Offers a superior email service with high standards of quality and reliability.
  • Does not require a third-party app to work.
  • Lets you set up email accounts on any domain you own or manage, whether it’s a root domain like mydomain.com or a subdomain such as store.mydomain.com.
  • Lets you provide clients with professional business email no matter where their domain is hosted (or whether the domain is associated with a site in your Hub or not)
  • Can be accessed from any device, even directly from your web browser.
  • Can be white labeled and resold under your own brand with Reseller.

Read more about the benefits of using Webmail.

Let’s show you now how to set your clients up with email accounts and a fully-functional mailbox in just a few clicks, using any domain, and no matter where their domain is hosted.

Getting Started With Webmail

Webmail is very quick and easy to set up.

If you’re an Agency member, just head on over to The Hub.

Now, all you need to do is get acquainted with the latest powerful tool in your complete WordPress site management toolbox…

Webmail Manager

The Hub lets you create, manage, and access IMAP email accounts for any domain you own from one central location, even domains that are not directly associated with a site in your Hub.

Click on Webmail on the main menu at the top of the screen…

The Hub - Webmail
Click Webmail to set up and manage your emails.

This will bring you to the Webmail Overview screen.

If you haven’t set up an email account yet, you’ll see the screen below. Click on the “Create New Email” button to get started.

Webmail screen with no email accounts set up yet!
Click the button to create a new email account in Webmail.

As mentioned earlier, Webmail gives you the choice of creating an email account from a domain you manage in The Hub, or a domain managed elsewhere.

For this tutorial, we’ll select a domain being managed in The Hub.

Select the domain you want to associate your email account with from the dropdown menu and click the arrow to continue.

Create New Email screen - Step 1 of 2
Select a domain managed in The Hub or elsewhere.

Next, create your email address, choose a strong password, and click on the blue arrow button to continue.

Create New Email screen - Step 2 of 2
Add your username and password to create your email address.

You will see a payment screen displaying the cost of your new email address and billing start date. Click the button to make the payment and create your new email account.

Email account payment screen.
Make the payment to complete setting up your email account.

Your new email account will be automatically created after payment has been successfully processed.

New user email has been created successfully.
Our new email has been created successfully…we’re in business!

The last step to make your email work correctly is to add the correct DNS records.

Fortunately, if your site or domain are hosted with WPMU DEV, Webmail Manager can easily and automatically do this for you too!

Note: If your domain is managed elsewhere, you will need to copy and manually add the DNS records at your registrar or DNS manager (e.g. Cloudflare).

Click on the View DNS Records button to continue.

This will bring up the DNS Records screen.

As our example site is hosted with WPMU DEV, all you need to do is click on the ADD DNS Records button and your records will be automatically created and added to your email account.

DNS Records screen - Add DNS Records button selected.
If your domain is hosted with WPMU DEV click the button to automatically add the correct DNS records to make your email work.

After completing this step, wait for the DNS records to propagate successfully before verifying the DNS.

You can use an online tool like https://dnschecker.org to check the DNS propagation status.

Note: DNS changes can take 24-48 hours to propagate across the internet, so allow some time for DNS propagation to occur, especially if the domain is hosted elsewhere.

Click the Verify DNS button to check if the DNS records have propagated.

DNS Records screen with Verify DNS button selected.
Click the Verify DNS button to check if your DNS records have propagated.

If your DNS records have propagated successfully, you will see green ticks for all records under the DNS Status column.

DNS Records screen showing green ticks in DNS Status for all records.
Your emails won’t be seen until all those ticks are green.

Your email account is now fully set up and ready to use.

Repeat the above process to create and add more emails.

Webmail overview screen showing an active domain.
Click on the + Create New Email button to add more emails.

Now that you know how to create a new email account, let’s look at how to manage your emails effectively.

Managing Your Emails

If you have set up one or more email accounts, navigate to the Webmail Manager screen any time to view a list of all connected domains, their status, number of email accounts associated with each domain, and additional options.

Webmail screen with added domain email accounts.
Manage all of your email accounts in the Webmail overview screen.

To manage your email accounts, click on a domain name or select Manage Domain Email from the Options dropdown menu (the vertical ellipsis icon).

Webmail screen - Manage Domain Email option selected.
Click on the vertical ellipsis and select Manage Domain Email to manage your email accounts.

This opens up the email management section for the selected domain.

The Email Accounts tab lists all the existing email accounts for that domain, status and creation date information, plus additional email management options that we’ll explore in a moment.

Webmail - Email Accounts tab
Email Accounts lists all the email accounts you have created for your domain.

Email accounts can have the following statuses: active, suspended, or disabled.

Active accounts can send and receive emails, provided DNS records have been set up and propagated correctly.

Suspended accounts occur if email activity is in violation of our webmail provider’s email sending policy.

A disabled account (see further below) only disables the sending and receiving of emails and webmail access for that email account. It does not affect billing.

Note: Unless you delete the account, you will still be charged for a disabled email account.

Email accounts tab listing email accounts with different statuses.
Email accounts can display an active, suspended, or disabled status.

Before we discuss managing individual email accounts, let’s look at other main features of Webmail Manager.

Email Forwarding

Email forwarding automatically redirects emails sent to one email address to another designated email address. It allows users to receive emails sent to a specific address without having to check multiple accounts. For example, emails sent to info@yourcompany.tld can be automatically forwarded to john@yourcompany.tld.

Every email account includes 10 email forwarders. This allows you to automatically forward emails to multiple addresses simultaneously (e.g. john@yourcompany.tld, accounts@yourcompany.tld, etc.).

To activate email forwarding hover over the arrow icon and turn its status to On and then click on Manage Email Forwarding to set up email forwarders.

Webmail - Email Accounts - Email Forwarding with status turned on and Manage Email Forwarding selected.
Turn Email Forwarding on and click on Manage Email Forwarding to set up forwarders for an email account.

This will bring up the Email Forwarding tab. Here, you can easily add, delete, and edit email forwarders.

If no email forwarders exist for your email account, click the Create Email Forwarder button to create the first one.

Email Forwarding screen with no forwarders set up yet.
Let’s create an email forwarder for this email account.

In the Add Email Forwarder screen, enter the forwarding email address where you would like incoming email messages to redirect to and click Save.

Webmail - Add Email Forwarder
You can create up to 10 email forwarders per email account.

As stated, you can add multiple forwarding email addresses to each email account (up to 10).

Webmail email forwarders.
Webmail’s Email Forwarding lets you easily add, delete, and edit email forwarders.

Webmail Login

With Webmail, all emails are stored on our servers, so in addition to being able to access and view emails on any device, every webmail account includes a mailbox that can be accessed online directly via Webmail’s web browser interface.

There are several ways to log in and view emails.

Access Webmail From The Hub

To log into webmail directly via The Hub, you can go to the Email Account Management > Email Accounts screen of your domain, click the envelope icon next to the email account, and click on the Webmail Login link…

Webmail - Email Accounts - Webmail Login
Click on the envelope icon in Email Accounts to access Webmail login.

Or, if you are working inside an individual email account, just click on the Webmail Login link displayed in all of the account’s management screens…

Webmail - Email Accounts - Email Information - Webmail Login
Click on the Webmail Login link of any email account management screen to access emails for that account.

This will log you directly into the webmail interface for that email account.

Webmail interface
Webmail’s intuitive and easy-to-use interface.

The Webmail interface should look familiar and feel intuitive to most users. If help using any of Webmail’s features is required, click the Help icon on the menu sidebar to access detailed help documentation.

Let’s look at other ways to access Webmail.

Access Webmail From The Hub Client

If you have set up your own branded client portal using The Hub Client plugin, your team members and clients can access and manage emails via Webmail with team user roles configured to give them access permissions and SSO (Single Sign-On) options enabled.

This allows users to seamlessly log into an email account from your client portal without having to enter login credentials.

Webmail menu link on a branded client portal.
Team members and clients can access Webmail directly from your own branded client portal.

Direct Access URL

Another way to log into Webmail is via Direct Access URL.

To access webmail directly from your web browser for any email account, enter the following URL into your browser exactly as shown here: https://webmail.yourwpsite.email/, then enter the email address and password, and click “Login.”

Webmail direct login
Log into webmail directly from your web browser.

Note: The above example uses our white labeled URL address webmail.yourwpsite.email to log into Webmail via a web browser. However, you can also brand your webmail accounts with your own domain so users can access their email from a URL like webmail.your-own-domain.tld.

For more details on how to set up your own branded domain URL, see our Webmail documentation.

Email Aliases

An email alias is a virtual email address that redirects emails to a primary email account. It serves as an alternative name for a single mailbox, enabling users to create multiple email addresses that all direct messages to the same inbox.

For instance, the following could all be aliases for the primary email address john@mysite.tld:

  • sales@mysite.tld
  • support@mysite.tld
  • info@mysite.tld

Webmail lets you create up to 10 email aliases per email account.

To create an alias for an email account, click on the vertical ellipsis icon and select Add Alias.

Webmail - Add Alias
Let’s add an alias to our email account.

Enter the alias username(s) you would like to create in the Add Alias modal and click Save.

Webmail - Add Alias screen with three aliases set up.
You can create up to 10 aliases for each email account.

Emails sent to any of these aliases will be delivered to your current email account.

Additional Email Management Features

In addition to the features and options found in the Email Accounts tab that we have just discussed, Webmail lets you manage various options and settings for each individual email account.

Let’s take a brief look at some of these options and settings.

Email Information

To manage an individual email account:

  1. Click on The Hub > Webmail to access the Email Accounts tab
  2. Click on the domain you have set up to use Webmail
  3. Click on the specific email account (i.e. the email address) you wish to manage.

Click on the Webmail management screens to access and manage individual email accounts.

The Email Information tab lets you edit your current email account and password and displays important information, such as status, creation date (this is the date your billing starts for this email account), storage used, and current email send limit.

Webmail - Email Accounts - Email Information tab.
Edit and view information about an individual email account in the Email Information tab.

In addition to the Email Information tab, you can click on the Email Forwarding tab to manage your email forwarders and the Email Aliases tab to manage your email aliases for your email account.

Note: Newly created accounts have send limits set up to prevent potential spamming and account suspension. These limits gradually increase over a two-week period, allowing email accounts to send up to 500 emails every 24 hours.

Email Information - Email limit increase.
Each email account’s send limits increase over two weeks and can send up to 500 emails per 24 hours.

Coming soon, you will also be able to add more storage to your email accounts if additional space is required.

Upgrade Storage modal
Upgrade your email account storage space (coming soon!)

Now that we have drilled down and looked at all the management tabs for an individual email account, let’s explore some additional features of the Webmail Manager.

Go back to The Hub > Webmail and click on one of the email accounts you have set up.

DNS Records

Click on the DNS Records tab to view the DNS Records of your email domain.

DNS Records Tab
Set up and verify your email DNS records in the DNS Records tab.

Note: The DNS Records tab is available to team members and client custom roles, so team members and clients can access these if you give them permission.

Configurations

Click on the Configurations tab to view and download configuration settings that allow you to set up email accounts in applications other than Webmail.

Webmail - Domain Email - Configurations
Download and use the configurations shown in this section to set up email accounts in other applications.

The Configurations tab is also available for both team member and client custom roles.

Client Association

If you want to allow clients to manage their own email accounts, you will need to set up your client account first, assign permissions to allow the client to view Webmail, then link the client account with the email domain in the Client Association tab.

After setting up your client in The Hub, navigate to the Client Association tab (The Hub > Webmail > Email Domain) and click on Add Client.

Webmail - Domain Email - Client Association
You can let clients manage their own email accounts by linking the email domain with their client account.

Select the client from the dropdown menu and click Add.

Webmail - Associate email with a client modal.
Linking the email domain with a client allows them to manage their email accounts.

Notes:

  • When you associate a client with an email domain, SSO for the email domain is disabled in The Hub. However, your client will be able to access Webmail login via The Hub Client plugin.
  • The Client Association tab is only made available for team member custom roles.

Reseller Integration

We’re currently working on bringing full auto-provisioning of emails to our Reseller platform. Until this feature is released, you can manually resell emails to clients and bill them using the Clients & Billing tool.

Once Webmail has been fully integrated with our Reseller platform, you will be able to rebrand Webmail as your own and resell everything under one roof: hosting, domains, templates, plugins, expert support…and now business emails!

Reseller price table example.
Resell professional business emails under your own brand!

If you need help with Reseller, check out our Reseller documentation.

Congratulations! Now you know how to set up, manage, and resell Webmail in your business as part of your digital services.

Email Protocols – Quick Primer

WPMU DEV offers the convenience of using both IMAP and POP3 email.

Not sure what IMAP is, how it works, or how IMAP differs from POP3? Then read below for a quick primer on these email protocols.

What is IMAP?

IMAP (Internet Message Access Protocol) is a standard protocol used to retrieve emails from a mail server. It allows users to access their emails from multiple devices like a phone, laptop, or tablet, because it stores emails on the server, rather than downloading them to a single device.

Since emails are managed and stored on the server, this reduces the need for extensive local storage and allows for easy backup and recovery.

Additional points about IMAP:

  • Users can organize emails into folders, flag them for priority, and save drafts on the server.
  • It supports multiple email clients syncing with the server, ensuring consistent message status across devices.
  • IMAP operates as an intermediary between the email server and client, enabling remote access from any device.
  • When users read emails via IMAP, they’re viewing them directly from the server without downloading them locally.
  • IMAP downloads messages only upon user request, enhancing efficiency compared to other protocols like POP3.
  • Messages persist on the server unless deleted by the user.
  • IMAP uses port 143, while IMAP over SSL/TLS uses port 993 for secure communication.

The advantages of using IMAP include the following:

  • Multi-Device Access: IMAP supports multiple logins, allowing users to connect to the email server from various devices simultaneously.
  • Flexibility: Unlike POP3, IMAP enables users to access their emails from different devices, making it ideal for users who travel frequently or need access from multiple locations.
  • Shared Mailbox: A single IMAP mailbox can be shared by multiple users, facilitating collaboration and communication within teams.
  • Organizational Tools: Users can organize emails on the server by creating folders and subfolders, enhancing their efficiency in managing email correspondence.
  • Email Functions Support: IMAP supports advanced email functions such as search and sort, improving user experience and productivity.
  • Offline Access: IMAP can be used offline, allowing users to access previously downloaded emails even without an internet connection.

There are some challenges to setting up and running your own IMAP service, which is why using a solution like WPMU DEV’s Webmail is highly recommended:

  • Hosting an IMAP service can be resource-intensive, requiring more server storage and bandwidth to manage multiple connections and the storage of emails.
  • IMAP requires implementing SSL encryption to ensure secure email communication.
  • Smaller businesses might find it challenging to allocate the necessary IT resources for managing an IMAP server efficiently.

IMAP vs POP3: What’s The Difference?

IMAP and POP3 are both client-server email retrieval protocols, but they are two different methods for accessing email messages from a server.

IMAP is designed for modern email users. It allows users to access your email from multiple devices because it keeps their emails on the server. When users read, delete, or organize their emails, these changes are synchronized across all devices.

For example, if you read an email on your phone, it will show as being read on your laptop as well.

POP3, on the other hand, is simpler and downloads emails from the server to a single device, then usually deletes them from the server. This means if users access their emails from a different device, they won’t see the emails that were downloaded to the first device.

For instance, if you download an email via POP3 on your computer, that email may not be accessible on your phone later.

Here are some of the key differences between IMAP and POP3:

Storage Approach

  • IMAP: Users can store emails on the server and access them from any device. It functions more like a remote file server.
  • POP3: Emails are saved in a single mailbox on the server and downloaded to the user’s device when accessed.

Access Flexibility

  • IMAP: Allows access from multiple devices, enabling users to view and manage emails consistently across various platforms.
  • POP3: Emails are typically downloaded to one device and removed from the server.

Handling of Emails

  • IMAP: Maintains emails on the server, allowing users to organize, flag, and manage them remotely.
  • POP3: Operates as a “store-and-forward” service, where emails are retrieved and then removed from the server.

In practice, IMAP is more suited for users who want to manage their emails from multiple devices or locations, offering greater flexibility and synchronization. POP could be considered for situations where email access is primarily from a single device, or there is a need to keep local copies of emails while removing them from the server to save space.

Essentially, IMAP prioritizes remote access and centralized email management on the server, while POP3 focuses on downloading and storing emails locally.

Professional Business Email For Your Clients

Integrating email hosting, particularly IMAP, with web hosting to create a seamless platform for managing client websites and emails under one roof is challenging, costly, and complex.

With WPMU DEV’s Webmail, you can enhance your email management capabilities and provide clients with affordable and professional business email no matter where their domain is hosted that is easy-to-use and does not require a third-party app.

Note: If you don’t require the full features of IMAP email for a site hosted with WPMU DEV, we also offer the option to create POP3 email accounts with our hosted email. These accounts can be linked to any email client of your choice, ensuring flexibility and convenience.

If you’re yet to set up a WPMU DEV account, we encourage you to become an Agency member. It’s 100% risk-free and includes everything you need to manage your clients and resell services like hosting, domains, emails, and more, all under your own brand.

If you’re already an Agency member, then head over to your Hub and click on Webmail to get started. If you need any help, our support team is available 24×7 (or ask our AI assistant) and you can also check out our extensive webmail documentation.

Posted on

How to effectively promote blogger challenge games on the internet?

Friends,

I have an exciting project that offers interesting opportunities for bloggers, SEO publishers and their subscribers - it's a challenge game that is designed to be an interesting content for bloggers' subscribers.

As part of this project, bloggers will be able to upload their own photos or images to the gallery of this game, as well as add images, photos or avatars for greeting screens and splash screens. In doing so, the resulting clone of the game - the refub - bloggers will be able to promote to their subscribers.

This project involves an opportunity for bloggers' subscribers to feel part of the game process.

Each participant of the process, including both bloggers and SEO publishers, will be able to earn in the amount of their specified markups from each sold copy of the game.

SEO specialists act as publishers and also earn from sales in the amount of their specified markup on each copy of the game sold.

Special attention is paid to personal motivation and congratulations: subscribers who upload their photos or images will receive a personalized greeting from a blogger inside the game, which will help them keep their spirits up and motivated.

I would like to hear your opinions and ideas on how to promote this project online.

What strategies and methods of promotion would be the most effective?

I would be grateful for any ideas, advice and for your recommendations!

Posted on

WordPress Playground: From 5-Minute Install To Instant Spin-Up

Many things have changed in WordPress over the years, but installation has largely remained the same: download WordPress, drop it on a server, create a database, sprinkle in some configuration, and presto, we have a WordPress site. This process was once lovingly referred to as the “famous five-minute install,” although that moniker seems to have faded with time, particularly as many hosting providers offer a more streamlined experience.

But what if WordPress didn’t require any setup at all? As in, you tap a link, and WordPress spins up a site for you right there, on demand? That’s probably difficult to imagine, considering WordPress runs on top of PHP, MySQL databases, and Apache. It’s not the most portable system.

That’s the aim of WordPress Playground, which got its first public boost when Matt Mullenweg introduced it during State of Word 2022.

Notice how the URL is a subdomain of a TasteWP-related top-level domain: hangingpurpose.s1-tastewp.com. It generates an instance on the multi-site network and establishes a URL for it based on a randomized naming system.

There’s a giant countdown timer on the screen that indicates when the site is scheduled to expire. That makes sense, right? Allowing anyone and everyone to create a site on the spot without so much as a login could become taxing on the server, so allowing sites to self-destruct on a schedule is likely as much to do with self-preservation as it does economics.

Speaking of economics, the countdown timer is immediately followed by a call to action to upgrade, which buys you permanence, extra server space, and customer support.

Without upgrading, though, you are only allowed two free instant sites. But if you create an account and log into TasteWP, then you can create up to six test sites on a free pricing tier.

That’s a look at the “quick” onboarding, but TasteWP does indeed have a more robust way to spin up a WordPress testing site with a set of advanced configurations, including which WordPress version to use with which version of PHP, settings you might normally define in wp-config.php, and options for adding specific themes and plugins.

So, how does that compare to WordPress Playground? Perhaps the greatest difference is that a TasteWP site is connected to the internet. It’s not a WordPress simulation, but an actual instance with a URL you can link up and share with others… as long as the site hasn’t expired. That could very well be enough of a differentiation to warrant more players in this space, even with WordPress Playground hanging around.

I wanted to give you a sense of what’s already offered before actually unboxing WordPress Playground. Now that we know what else is out there let’s turn our attention back to Playground and explore it.

Starting Up WordPress Playground

One of the first interesting things about WordPress Playground is that it is available in not just one but several places. I wouldn’t liken it completely to a service like TasteWP, where you create an account to create and manage WordPress instances. It’s more like a developer tool, one that you can reach for when testing your work in a WordPress environment.

You can simply hit the playground.wordpress.net URL in your browser to launch a new site on the spot. Or, you can launch an instance from the command line. Perhaps you prefer to use the official Chrome extension instead. Whatever the case, let’s look at those options.

1. Using The WordPress Playground URL

This is the most straightforward way to get a WordPress Playground instance up and running. That’s because all you do is visit the playground.wordpress.net address in the browser, and a WordPress site is created immediately.

This is exactly how the WordPress Playground demo works, prompting you to click a button to open a new WordPress site. In fact, try clicking the following button to create one now.

Create A WordPress Site

If you want to use a specific version of WordPress and PHP in your Playground, all it takes is adding a couple of parameters to the URL. For example, we can instruct Playground to run WordPress 6.2 on PHP 8.2 with the following URL:

https://playground.wordpress.net/?php=8.2&wp=6.2

You can even try out the developmental versions of WordPress using Playground by using the following parameter:

https://playground.wordpress.net/?wp=beta

2. Using The GitHub Repository

True to the WordPress ethos, WordPress Playground is very much an open-source project. The repo is available over at GitHub, and we can pull it into a local environment and use WordPress Playground right from a terminal.

First, let’s clone the repository from the command line:

git clone https://github.com/WordPress/wordpress-playground.git

There is a slightly faster alternative that fetches just the latest revision:

git clone -b trunk --single-branch --depth 1 git@github.com:WordPress/wordpress-playground.git

Now that we have the WordPress Playground package in our local environment, we can formally install it:

cd wordpress-playground
npm install
npm run dev

Once the local server is running, we should get a URL from the terminal that we can use to access the new Playground instance, likely pointed to http://localhost:5400/website-server/.

We are also able to set which versions of WordPress and PHP to use in the virtual environment by adding a couple of instructions to the command. For example, this command triggers a new WordPress 5.9 instance running on PHP 7.4:

wp-now start --wp=5.9 --php=7.4

3. Using wp-now In The Command Line

An even quicker way to get Playground running from the command line is to globally install the wp-now CLI tool:

npm install -g @wp-now/wp-now

This way, we can create a new Playground instance anytime you want with a single command:

wp-now start

Be sure that you’re using Node 18 or higher. Otherwise, you’re likely to bump into some errors. Once the command executes, however, the browser will automatically open a new tab pointing to the new instance. You’re already signed into WordPress and everything!

We can configure the environment just as we could with the npm package:

wp-now start --wp=5.9 --php=7.4

A neat thing about this method is that there are several different “modes” you can run this in, and which one you use depends on the directory you’re in when running the command. For example, if you run the command from a directory that already contains WordPress, then Playground will automatically recognize that and run the directory as a full WordPress installation. Or, it’s possible to execute the command from a directory that contains nothing but an index.php file, and Playground will start the server and run requests through that file.

There are other options, including modes for theme, plugin, wp-content, and wordpress-develop, that are worth checking out in the documentation.

4. Using The Visual Studio Code Extension

WordPress Playground is also available as a Visual Studio Code extension. It provides a nice one-click process to launch a local WordPress site.

Installing the extension adds a WordPress icon to the sidebar menu that, when clicked, opens a panel for launching a new WordPress Playground site.

Open a project folder, click the “Start WordPress Server,” and the Playground extension boots up a new site on the spot. The extension also provides server details, including the local URL, the mode it’s in, and settings to change which versions of WordPress and PHP are in use.

One thing I noticed while poking at the instance is that it automatically installs and activates the SQLite Database Integration plugin. Obviously, that’s a required component for things to work, but I thought it was worth pointing out that the installation does indeed include at least one pre-installed plugin right out of the gate.

5. Using A Chrome Extension To Preview Themes & Plugins

Have you ever found yourself perusing the WordPress Theme Directory and wanting to take a particular theme out for a test drive? There’s already a “Preview” button baked right into the directory to do exactly that.

That’s nice, as it opens up the theme in a frame that looks a lot like the classic WordPress Customizer.

But how cool would it be to really open up the theme and see what it is like to do actual tasks with it in the WordPress admin, such as creating a post, editing a page, or exploring its block patterns?

That is what the “Open in WordPress Playground” extension for Chrome can do. It literally adds a button to “Preview” a theme in a fresh WordPress Playground instance that, when clicked, allows you to interact with the theme in a real WordPress environment.

I tried out the extension, and it worked as described, and not only that, but it works with the WordPress Plugin Directory as well. In other words, it’s now possible to try a new plugin on the spot without having to install, activate, and test it yourself in some sandbox or, worse, your live or staging WordPress environments.

This is a potential game-changer as far as lowering the barrier to entry for using WordPress and for theme and plugin developers offering a convenient way to provide users with a demo experience. I can easily imagine a future where paid commercial plugins adopt a similar user experience to help reduce refunds from customers merely wanting to try a plugin before formally committing to it.

The extension is available free of charge in the Chrome Web Store, but you can check out the source code in its GitHub repository as well. While we’re on it, it’s worth noting that this is a third-party extension rather than an official WordPress or Automattic release.

The Default Playground Site

No matter which Playground method you use, the instances that spin up are nearly identical. For example, all of the methods we covered have the WordPress Twenty Twenty-Three theme installed and activated by default. That makes a lot of sense: a standard WordPress installation does the same.

Similarly, all of the instances we covered make use of the SQLite Database Integration plugin developed by the WordPress Performance Team. This also makes sense: we need the plugin to establish a database. It also sounds like from the plugin description that the intent is to eventually integrate the plugin into WordPress Core, so perhaps we’ll eventually see zero plugins in a default Playground instance at some point.

There are a few differences between instances. They’re not massive, but worth calling out so you know what you are activating or have available when using a particular method to create a WordPress instance. The following table breaks down the current components included in each method at the time of this writing:

Method WordPress Version PHP Version Themes Plugins
WordPress Playground website 6.3.2 8.0
  • Twenty Twenty-Three (active)
  • SQLite Database Integration (active)
GitHub repo 6.3.2 8.0
  • Twenty Twenty-Three (active)
  • SQLite Database Integration (active)
wp-now package 6.3.2 8.0.10-dev
  • Twenty Twenty-Three (active)
  • Twenty Twenty-Two
  • Twenty Twenty-One
  • Akismet
  • Hello Dolly
  • SQLite Database Integration (active)
VS Code extension 6.3.2 7.4
  • Twenty Twenty-Three (active)
  • Twenty Twenty-Two
  • Twenty Twenty-One
  • Akismet
  • Hello Dolly
  • SQLite Database Integration (active)
Chrome extension 6.3.2 8.0
  • Twenty Twenty-Three (active)
  • SQLite Database Integration (active)

And, of course, any other differences would come from how you configure an instance. For example, if you run the wp-now package on the command line when you’re in a directory with WordPress and several themes and plugins installed, then those themes and plugins will be available to activate and use. Similarly, using the Chrome Extension on any WordPress Theme Directory page or Plugin Directory page will install that particular theme or plugin.

Installing Themes, Plugins, and Block Patterns

In a standard WordPress installation, you might log into the WordPress admin, navigate to Appearance → Themes, and install a new theme straight from the WordPress Theme Directory. That’s because your site has a web connection and is able to pull things in from WordPress.org. Since a WordPress Playground instance from the WordPress Playground website (which is essentially the same as the Chrome extension) is not technically connected to the internet, there is no way to install plugins and themes to it.

If you want the same sort of point-and-click experience in your Playground site that you would get in a standard WordPress installation, then go with the GitHub repo, the wp-now package, or the VS Code extension. Each of these is indeed connected to the internet and is able to install themes and plugins directly from the WordPress admin.

You may notice a note about using the Query API to install a theme or plugin to a WordPress Playground instance that is disconnected from the web:

“Playground does not yet support connecting to the themes directory yet. You can still upload a theme or install it using the Query API (e.g. ?theme=pendant).”

That’s right! We’re still able to load in whatever theme we want by passing the theme’s slug into the Playground URL used to generate the site. For example,

https://playground.wordpress.net/?theme=ollie

The same goes for plugins:

https://playground.wordpress.net/?plugin=jetpack

And if we want to bundle multiple plugins, we can pass in each plugin as a separate parameter chain with an ampersand (&) in the URL:

It does not appear that we can do the same thing with themes. If you’re testing several themes in a single instance, then it’s probably best to use the wp-now package or the VS Code extension when pointing at a directory that already includes those themes.

What about block patterns, you ask? We only get two pre-defined patterns in a default WordPress Playground instance created on Playground’s site: Posts and Call to Action.

That’s because block patterns, too, are served to the WordPress admin from an internet connection. We get a much wider selection of options when creating an instance using any of the methods that establish a local host connection.

There appears to be no way, unfortunately, to import patterns with the Query API like we can for themes and plugins. The best way to bring in a new pattern, it seems, is to either bundle them in the theme you are using (or pointing to) or manually navigate to the Block Pattern Directory and use the “Copy” option to paste a pattern into the page or post you are testing in Playground.

Importing & Exporting Playgrounds

The transience of a WordPress Playground instance is its appeal. The site practically evaporates into thin air with the trigger of a page refresh. But what if you actually want to preserve an instance? Perhaps you need to come back to your work later. Or maybe you’re working on a visual tweak and want to demo it for your team. Playground instances can indeed be exported and even imported into other instances.

Open up a new WordPress site over at the playground.wordpress.net and locate the Upload and Download icons at the top-right corner of the frame.

No worries, this is not a step-by-step tutorial on how to click buttons. The only thing you really need to know is that these buttons are only available in instances created at the WordPress Playground site or when using the Chrome Extension to preview themes and plugins at WordPress.org.

What’s more interesting is what we get when exporting an instance. We get a ZIP file — wordpress-playground.zip to be exact — as you might expect. Extract that, and what we have is the entire website, including the full WordPress installation. It resembles any other standard WordPress project with a wp-content directory that contains the source files for the installed themes and plugins, as well as media library uploads.

The only difference I could spot between this WordPress Playground package and a standard project is that Playground provides the SQLite database in the export, also conveniently located in the wp-content directory.

This is a complete WordPress project. Now that we have it and have confirmed it has everything we would expect a WordPress site to have, we can use Playground’s importing feature to replicate the exported site in a brand-new WordPress Playground instance. Click the Upload icon in the frame of the new instance, then follow the prompts to upload the ZIP file we downloaded from the original instance.

You can probably guess what comes next. If we can export a complete WordPress site with Playground, we can not only import that site into a new Playground instance but import it to a hosting provider as well.

In other words, it’s possible to use Playground as a testing ground for development and then ship it to a production or staging environment when ready. Similarly, the exported files can be committed to a GitHub repo where your production files are, and that triggers a fresh build in production. However you choose to roll!

Sharing Playgrounds

There are clear benefits to being able to import and export Playground sites. WordPress has never been the more portable system. You know that if you’ve migrated WordPress sites and data. But when WordPress is able to move around as freely as it does with Playground, it opens up new possibilities for how we share work.

Sharing With The Query API

We’ve been using the Query API in many examples. It’s extremely convenient in that you append parameters on the WordPress Playground site, hit the URL, and a site spins up with everything specified.

The WordPress Playground site is hosted, so sharing a specific configuration of a Playground site only requires you to share a URL with the site’s configurations appended as parameters. For example. this link shares the Blue Note theme configured with the Gutenberg plugin:

We can do a little more than that, like link directly to the post editor:

Even better, let’s link someone to the theme’s templates in the Site Editor:

Again, there are plenty more parameters than what we have explored in this article that are worth checking out in the WordPress Playground documentation.

Sharing With An Embedded iFrame

We already know this is possible because the best example of it is the WordPress Playground developer page. There’s a Playground instance running and embedded directly on the page. Even when you spin up a new Playground instance, you’re effectively running an iframe within an iframe.

Let’s say we want to embed a WordPress site configured with the Pendant theme and the Gutenberg plugin:

<iframe width="800" height="650" src="https://playground.wordpress.net/?plugin=gutenberg&theme=pendant&mode=seamless" allowfullscreen></iframe>

So, really, what we’re doing is using the source URL in a different context. We can share the URL with someone, and they get to access the configured site in a browser. In this case, however, we are dropping the URL into an iframe element in HTML, and the Playground instance renders on the page.

Not to get too meta, but it’s pretty neat that we can log into a WordPress production site, create a new page, and embed a Playground instance on the page with the Custom HTML Block:

What I like about sharing Playground sites this way is that the instance is effectively preserved and always accessible. Sure, the data will not persist on a page refresh, but create the URL once, and you always have a copy of it previewed on another page that you host.

Speaking of which, WordPress Playground can be self-hosted. You have to imagine that the current Playground API hosted at playground.wordpress.net will get overburdened with time, assuming that Playground catches on with the community. If their server is overworked, I expect that the hosted API will either go away (breaking existing instances) or at least be locked for creating new instances.

That’s why self-hosting WordPress Playground might be a good idea in the long run. I can see WordPress developers and agencies reaching for this to provide customers and clients with demo work. There’s so much potential and nuance to self-hosting Playground that it might even be worth its own article.

The documentation provides a list of parameters that can used in the Playground URL.

Sharing With JSON Blueprints

This “modern” era of WordPress is all about block-based layouts that lean more heavily into JaveScript, where PHP has typically been the top boss. And with this transition, we gained the ability to create entire WordPress themes without ever opening a template file, thanks to the introduction of theme.json.

Playground can also be configured with structured data. In fact, you can see the Playground website’s JSON configurations via this link. It’s pretty incredible that we can both configure a Playground site without writing code and share the file with others to sync environments.

Here is an example pulled directly from the Playground docs:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/",
  "preferredVersions": {
    "php": "8.0",
    "wp": "latest"
   },
  "steps": [{
    "step": "login",
    "username": "admin",
    "password": "password"
  }]
}

We totally can send this file to someone to clone a site we’re working on. Or, we can use the file in a self-hosted context, and others can pull it into their own blueprint.

Interestingly, we can even ditch the blueprint file altogether and write the structured data as URL fragments instead:

That might get untenable really fast, but it is nice that the WordPress Playground team is thinking about all of the possible ways we might want to port WordPress.

Advanced Playground Configurations

Up to now, we’ve looked at a variety of ways to configure WordPress Playground using APIs that are provided by or based on playground.wordpress.net. It’s fast, convenient, and pretty darn flexible for something so new and experimental.

But let’s say you need full control to configure a Playground instance. I mean everything, from which themes and plugins are preinstalled to prepublished pages and posts, defining php.ini memory limits, you name it. The JavaScript API is what you’ll need because it is capable of executing PHP code, make requests, manage files and directories, and configuring parts of WordPress that none of the other approaches offer.

The JavaScript API is integrated into an iframe and uses the @wp-playground/client npm package. The Playground docs provide the following example in its “Quick Start” guide.

<iframe id="wp" style="width: 100%; height: 300px; border: 1px solid #000;"></iframe>

<script type="module">
  // Use unpkg for convenience
  import { startPlaygroundWeb } from 'https://unpkg.com/@wp-playground/client/index.js';

  const client = await startPlaygroundWeb({
    iframe: document.getElementById('wp'),
    remoteUrl: https://playground.wordpress.net/remote.html,
  });
  // Let's wait until Playground is fully loaded
  await client.isReady();
</script>

This is an overly simplistic example that demonstrates how the JavaScript API is embedded in a page in an iframe. The Playground docs provide a better example of how PHP is used within JavaScript to do things, like execute a file pointed at a specific path:

php.writeFile(
  "/www/index.php",
  `<?php echo "Hello world!";"`
);
const result = await php.run({
  scriptPath: "/www/index.php"
});
// result.text === "Hello world!"

Adam Zieliński and Thomas Nattestad offer a nicely commented example with multiple tasks in the article they published over at web.dev:

import {
  connectPlayground,
  login,
  connectPlayground,
} from '@wp-playground/client';

const client = await connectPlayground(
  document.getElementById('wp'), // An iframe
  { loadRemote: 'https://playground.wordpress.net/remote.html' },
);
await client.isReady();

// Login the user as admin and go to the post editor:
await login(client, 'admin', 'password');
await client.goTo('/wp-admin/post-new.php');

// Run arbitrary PHP code:
await client.run({ code: '<?php echo "Hi!"; ?>' });

// Install a plugin:
const plugin = await fetchZipFile();
await installPlugin(client, plugin);

Once again, the scope and breadth of using the JavaScript API for advanced configurations is yet another topic that might warrant its own article.

Wrapping Up

WordPress Playground is an excellent new platform that’s an ideal testing environment for WordPress themes, plugins… or even WordPress itself. Despite the fact that it is still in its early days, Playground is already capable of some pretty incredible stuff that makes WordPress more portable than ever.

We looked at lots of ways that Playground accomplishes this. Just want to check out a new theme? Use the playground.wordpress.net URL configured with parameters supported by the Query API, or grab the Chrome extension. Need to do a quick test of your theme in a different PHP environment? Use the wp-now package to spin up a test site locally. Want to let others demo a plugin you made? Embed Playground in an iframe on your site.

WordPress Playground is an evolving space, so keep your eye on it. You can participate in the discussion and request a feature through a pull request or report an issue that you encounter in your testing. In the meantime, you may want to be aware of what the WordPress Playground team has identified as known limitations of the service:

  • No access to plugins and theme directories in the browser.
    The theme and plugin directories are not accessible due to the fact that Playgrounds are not connected to the internet, but are virtual environments.
  • Instances are destroyed on a browser refresh.
    Because WordPress Playground uses a browser-based temporary database, all changes and uploads are lost after a browser refresh. If you want to preserve your changes, though, use the export feature to download a zipped archive of the instance. Meanwhile, this is something the team is working on.
  • iFrame issues with anchor links.
    Clicking a link in a Playground instance that is embedded on a page in an iframe may trigger the main page to refresh, causing the instance to reset.
  • iFrame rendering issues.
    There are reports where setting the iframe’s src attribute to a blobbed URL instead of an HTTP URL breaks links to assets, including CSS and images.

How will you use WordPress Playground? WordPress Playground creator Adam Zieliński recently shipped a service that uses Playground to preview pull requests in GitHub. We all know that WordPress has never put a strong emphasis on developer experience (DX) the same way other technical stacks do, like static site generators and headless configurations. But this is exactly the sort of way that I imagine Playground improving DX to make developing for WordPress easier and, yes, fun.

References & Resources

Posted on

Introducing New Ultra Smush: 5x Image Compression Boost With Minimal Quality Loss

WPMU DEV’s award-winning image optimization plugin’s new Ultra Smush unlocks unprecedented image compression levels up to 5x greater than Super Smush, while retaining impressive image quality!

Is your WordPress site filled with images? Do you want those images to load on your pages faster than a lamborghini speeding on the Autobahn and compress them tighter than a full stack developer’s schedule? And do all this with almost no discernible loss of image quality?

Then it’s time to activate Ultra Smush.

In this article:

Let’s get straight into what really matters…

5x More Savings? Here Are The Results

Before we get into how to activate and use the new Ultra Smush image compression level and why it can deliver even more impressive results than our already impressive Super Smush feature, let’s share some of the results of using Ultra Smush.

First, here are the results of performing a bulk smush on a test site with 1,000+ large-ish images with only Super Smush activated (CDN, Local WebP, and Lazy Load are inactive)…

Image compression savings using Super Smush.
Before Ultra Smush: Image compression savings using Super Smush only.

After activating Ultra Smush, we then ran the test again to see if we could squeeze anything more out of an already image-optimized site.

And it did! Ultra Smush squeezed out more than 5x times savings…

Bulk Smush test results using Smush's Ultra mode
After Ultra Smush: More than 5x times savings on an already optimized site!

Early testers reported getting similar results.

Super Smush vs Ultra Smush
Results: Super Smush (Before) vs Ultra Smush (After)

And here are just some of the comments we received from early testers about Ultra Smush’s impact on image quality:

  • “Ultra is awesome. It was hard to find the difference between qualities. Quality loss is negligible. I am impressed!”
  • “It looks pretty good, only if I look really close I can see that some of the colors are not as vibrant, and that some edges are not as sharp as on the original.”
  • “On a medium size image with lots of details, you gotta look very close to see slight color saturation differences. On a big image with a solid but gradient background, transitions between gradients are more visible and the main object seems lees sharp. You really need to look very close and expect it. Though it’s not for a photo site that requires superb quality. All in all: pretty impressive.”

Our plugin development team also did extensive testing, comparing Ultra Smush’s results with Ewww image optimizer and TinyPNG by running DSSIM tests (a quality comparison metric that shows variation from the original image – the lower the score, the better).

Ultra Smush outperformed the competition in most tests and came out the overall winner for both compression savings…

Ultra Smush tests - Average File Size Reduction
File Size Reduction testing shows that Ultra Smush is the clear winner!

…and image quality (lower DSSIM values = better image quality).

Ultra Smush tests - Average DSSIM Value
DSSIM testing shows Ultra Smush delivers superior image savings and better quality over the competition.

To be clear, using Ultra Smush will result in Lossy compression, so while you should not expect the original quality, the results will still be ultra-impressive.

How To Enable Smush’s Ultra Mode

Ultra Smush is not just a new feature, it’s an entirely  new compression level for Bulk Smushing images.

Ultra mode is a feature of Smush Pro that replaces the Super Smush toggle on the free version of the plugin with additional “Smush Mode” options.

Switching to Ultra mode is ultra easy. If you have Smush Pro installed on your site, simply navigate to the Bulk Smush Settings screen and select Ultra (Higher Compression)by clicking on the button, then save your settings.

Choose the level of compression for bulk smushing images that best suits your needs.

Smush Mode offers three compression levels for Bulk Smush settings:

  • Basic – Choose this option for minimal file size reduction (low savings),  pixel-perfect lossless compression of original image quality, and negligible impact on speed.
  • Super – For faster page loads, select this setting for substantial file size reduction with excellent image clarity. Super Smush provides up to 2x compression savings for your images (lossy compression).
  • Ultra – Select this compression option for professional-grade performance compression. Ultra Smush provides compression levels up to 5x greater than Super, while preserving impressive image quality.

After enabling Ultra Smush in your plugin settings, you can monitor results from The Hub’s Performance tab.

The Hub: Performance Tab - Ultra Smush
View Ultra Smush optimization results inside The Hub.

Notes:

  • If you would rather continue optimizing images using the Basic (lossless) or Super Smush settings, just select those Compression Level options instead.
  • If you enable Ultra Smush on a site where Smush is already running, remember to re-check all images and perform a new Bulk Smush to benefit from further optimization savings.
Bulk Smush - Recheck Images
After enabling Ultra Smush, rerun Bulk Smush to optimize your site even further.

How Does Ultra Smush Compare To Super Smush?

While Super Smush provides up to 2x faster image optimization with virtually no visible loss in quality, Ultra Smush’s new compression engine offers up to 5 times file size reduction to achieve exceptional compression results.

Note: Currently, Ultra Smush improves JPEG images only. Features to improve PNG images will be added in future versions of the plugin.

To learn more about Ultra Smush, refer to the Smush plugin documentation.

Why Image Compression Is A Big Deal

If you are just getting started with WordPress optimization, then it’s important to know that using image compression on websites offers several significant benefits that enhance overall user experience and site performance, such as:

Faster Loading Speeds

Compressed images are smaller in size, which means they take less time to load when someone visits your WordPress website. Faster loading speeds improve user satisfaction and reduce bounce rates. Additionally, page loading speed is a crucial factor for SEO, as search engines tend to prioritize faster-loading websites in their search results.

Improved User Experience

When images load quickly, users are more likely to stay engaged with your content. High-quality, compressed images ensure that visitors can access the visual elements of your website without waiting for prolonged load times. This positive experience can lead to increased user retention and higher conversion rates.

Bandwidth Savings

Compressed images consume less bandwidth, making your website more efficient, especially for users with limited data plans or slower internet connections. This can be particularly important for mobile users, as they often have restricted data allowances.

Reduced Server Load

Smaller image sizes translate to reduced server load, as the server needs to process and transmit less data for each image request. This can help prevent performance issues during peak traffic times and reduce hosting costs.

Higher SEO Rankings

Google and other search engines consider page loading speed as one of the ranking factors. Faster loading times, achieved through image compression, can positively impact your website’s SEO and potentially lead to higher search engine rankings.

Ease of Backup and Restoration

Smaller image files are quicker to backup and restore, making it easier to manage your website’s backups efficiently.

Accessibility Considerations

Faster loading times benefit all users, including those with disabilities who may rely on screen readers or have limited bandwidth access.

The easiest way to implement image compression on WordPress websites is to use a plugin like Smush, which can be easily installed and configured to handle image compression and optimization automatically as you upload media to your WordPress site (both internally to the Media Library and external media directories) without compromising visual quality.

Choose Ultra Smush For Superior Image Optimization

As mentioned earlier, Ultra Smush is a Smush Pro feature. If you’re currently using the free Smush plugin, consider becoming a WPMU DEV member and start enjoying the benefit of extra savings and performance improvements, plus access to the most robust “all-in-one” WordPress management platform available anywhere.

So, if your aim is to significantly reduce image file sizes and automate the entire process, the solution is ultra simple…enable Ultra Smush on all your WordPress sites and experience an optimization boost of up to 5x in image compression savings and impressive image quality.

Posted on

How To Boost Your Design Workflow With Setapp

This article is a sponsored by MacPaw Inc.

As someone who wears multiple hats, it is challenging to balance a full-time job, freelance projects, and all sorts of creative endeavors.

This is how I started off: By day, I’m a full-time product designer. By night, I juggle all sorts of freelance work and creative projects.

I am currently self-employed. However, there are challenges that come with being my own boss: Working with clients, sales and negotiation, invoicing, building a personal brand, crafting a content strategy, time tracking, project management… The list goes on.

Trying to keep up with everything used to be tough. No matter how hard I tried, my to-do list always seemed never-ending. I was constantly feeling overwhelmed.

I thought to myself, “There’s got to be a better way.”

After analyzing my workflow, I realized that many tasks could be simplified or automated so that I could save time, focus on high-value tasks, and work fewer hours.

After years of trial and error, I discovered a range of tools and strategies that helped me save time and stay organized to focus on what really matters.

The apps mentioned in this guide are available on Setapp. Whether you’re a Mac user or not, these hacks will help you get more done in less time and improve your quality of life. I hope you find value in this guide.

Streamline Your Workflow With the Best Apps

You can use Setapp to access 240+ apps on your Mac and iPhone under a single monthly subscription.

Personally, I use Setapp to do three things:

  1. Try out apps that could help save time. Some of these apps cost more than Setapp’s subscription, so it’s a relief that I do not need to pay for each one individually.
  2. For apps that I only need to use occasionally, I can quickly install and uninstall them as needed, with no extra cost. This saves me precious space on my Mac and ensures that I’m not cluttering up my system with unnecessary apps.
  3. Since Setapp’s library is updated regularly, I always get to try out new apps to further enhance my workflow.
Track Time & Eliminate Distractions

As a freelance designer, I need to track how much time I spend on each project to calculate my billable hours. I used to manually create events on my calendar and calculate the hours spent on each project. It’s a waste of time, and sadly, it is inaccurate.

To solve this problem, you can use Timemator to track your time accurately and minimize distractions.

With Timemator, you can set up auto time-tracking rules for specific apps, files, or websites. For example, you can set rules so that the timer starts tracking when you work on a specific project on Figma or Adobe Photoshop.

The timer runs quietly in the background so that you can stay focused without any interruptions. You no longer need to manually start or pause the timer.

Pro tip: Use it to reduce distractions! Set up auto-tracking to track how much time you spend on meetings, talking to teammates or clients on Slack, or watching Netflix.

To help you identify where you’ve spent your time, Timemator gives detailed reports and analytics so you can reduce or eliminate time-wasting activities and get more done in less time.

The Only Font Manager You Need

As designers, we all know that font selection can make or break a creative project.

I was frustrated with Font Book (the default font manager on MacOS). It wasn’t user-friendly. Searching and comparing fonts was a chore.

I found Typeface to be useful — especially when you need to quickly browse through your font collection, customize the preview text and size in real-time, and compare to see how different fonts look side-by-side.

Over the years, I have saved up a huge font library. Typeface is able to load all my fonts quickly and remove duplicate fonts that bloat up my computer. It supports variable fonts and OpenType font features and has robust features for the busy designer.

For fonts you don’t use often, you can choose to activate them only when necessary. This way, your computer stays clean and fast.

As a bonus, you can also easily organize fonts into custom collections or tags.

Fastest Way To Create Device Mockups

When designing, we often need to create high-quality, professional-looking phone, tablet, and computer mockups to showcase our designs.

I used to spend hours searching for device mockup templates and launch Adobe Photoshop in order to use those templates. The whole process was time-consuming, so I switched to a tool called Mockuuups Studio.

All you need to do is drag and drop a screenshot of your website or app into it, pick a scene, and it will generate thousands of mockups. It’s pretty neat.

You can filter through scenes, models, and devices to find the perfect mockup for your digital product. Then, add hands, overlays, realistic shadows, or backgrounds to your device mockups. In the example above, I have filtered ‘iPhone’ mockups only.

Since it’s cloud-based, you can access it anywhere and collaborate with your teammates in real time too.

To further speed up your workflow, you can use their Figma, Sketch, or Adobe XD plugin. This is their Figma plugin:

Create Screenshots & Screen Recordings, Fast

When presenting designs (especially when working remotely), I take screenshots and screen recordings for my clients every day.

But instead of using the default Mac screenshot tool, CleanShot X is a better solution. This is an essential tool for every Mac user.

To quickly take a screenshot, use this shortcut key on your Mac: Command + Shift + 4.

This tool gives you the convenience to record MP4 or GIF with your desktop icons hidden, capture scrollable content, and annotate, highlight, or blur screenshots to hide sensitive personal information.

An example of how I annotate my screenshots:

I’ve used this tool for years with zero complaints. This tool will make your life easier when sharing screenshots with clients or on social media.

A cool feature you’ll also love: You can capture and copy any text, so you’ll never have to manually retype it again!

Your workflow will become much more streamlined and efficient since you no longer get bogged down in the technical details.

Never Waste Time Searching For Meeting Links Again

It’s challenging to keep track of various meetings, their details, and attendees, especially when switching between Google Meet, Zoom, your email inbox, and calendars.

To solve this problem, you can use Meeter to schedule or join meetings with one click right from the menu bar on your Mac.

It supports Google Meet, Zoom, and Microsoft Teams. When you want to join a meeting, you no longer have to waste time searching for meeting links, then copy and paste the link into the browser. Instead, you can now focus on being present in every meeting.

The tool allows you to directly call your FaceTime contacts and phone numbers and jump into recurring calls from the menu bar too. Pretty simple!

Save Time With Spotlight On Mac

When working with multiple files and apps on your Mac, you need to be able to quickly find and access them instead of navigating through different folders.

With Spotlight, you can do these things quickly. While this is not an app, it’s one of the most powerful features on Mac that can save you plenty of time.

To open Spotlight, simply hit Command + Spacebar on your keyboard and start typing.

Then, try these on Spotlight:

  • Perform quick calculations.
    No need to open a calculator app. Simply type in your calculation in Spotlight and hit enter. It’s that easy.
  • Search for apps.
    Quickly find any app on your Mac.
  • Search the internet.
    Type your search term, and it will launch your default browser with the search results. You’ve just saved a few clicks.
  • Find files or folders.
    Type in the name of the file or folder, and you have it.

  • Check the weather.
    Type “weather” followed by your location, and it will give you up-to-date information on the current weather conditions and forecast.

Cool, right? Learning how to use Spotlight effectively is a game-changer. Give it a try, and see how much time you can save.

Design Accessible Interfaces

As a product designer who also builds websites for clients, it’s a challenge to find and create the perfect color palettes while working on multiple projects at once. In the past, I've had to rely on a combination of tools like swatch libraries and notes to keep track of my palettes.

If you’re a designer or a developer, you’ll love Sip — a powerful color picker that can help you design beautiful and accessible interfaces easily.

With Sip, you can quickly grab colors right from the Mac menu bar and drop them into any design or development tool, including Adobe Photoshop, Figma, and Sketch. This makes it easy to create custom color palettes that match the client’s brand.

You can create and save custom color palettes, and the quick access menu that floats on the side of your desktop gives you quick access to your color palettes.

Currently, it supports 24 of the most popular color formats in the industry, like Android XML, CSS hex, RGB, and CMYK.

Now, my favorite feature is Sip’s Contrast Checker. In the example below, you can use the color picker to check the contrast between the gray text and white background, ensuring that it meets accessibility standards and is legible for all users.

Tip: Always make sure the contrast between the text and background is greater than or equal to 4.5:1 for small text and 3:1 for large text. If the color contrast fails, click on the ‘FIX’ button to improve it!

Declutter Your Mac’s Menu Bar

If you have a bunch of apps running on your Mac, your menu bar may be cluttered with all sorts of icons and notifications.

Just like physical clutter, digital clutter takes up mental space and affects your focus, too! To solve this problem, you can use Bartender.

Bartender allows you to organize your menu bar icons into neat and tidy groups or hide them completely — as simple as that. You can collapse your menu bar icons into a customizable dropdown menu so it remains clutter-free.

In the above example, most of my menu icons are hidden, except Figma and the battery level indicator.

After using it for over a month, I am able to focus better. It’s one of those subtle quality-of-life improvements that can have a big impact on your productivity and mindset.

Wrapping Up

I wish I had discovered these tools sooner!

The apps I’ve shared above are available on Setapp. With a single monthly subscription, you get access to 240+ Mac and iPhone apps. They offer a free 7-day trial, so you can try it out and decide if it’s right for you.

These tools have completely transformed my workflow and helped me become more productive and less stressed. I hope that these tools will do the same for you so you can make the most of your time. After all, time is a limited resource, and it's up to us to use it wisely.

Thank you for reading. Have a productive day!

Further Reading On SmashingMag

Posted on

Ecommerce Blogging Starter Guide: Learn the Basics

If you want to get into ecommerce blogging, WordPress with Hostinger offers the best combination of blog builder and web hosting for the job. Best of all, you can host your WordPress blog with Hostinger for only $2.99.

Ecommerce sites should provide the necessary tools that make transactions quick and easy for customers and store owners alike. But most ecommerce sellers forget about the one part of their website that works for them 24/7: their blog.

Blogging for ecommerce can deliver plentiful benefits, from marketing your products to new clientele to building a devoted fan base of lifelong customers. Let’s dive into how to get started blogging for ecommerce and what you can gain by doing so.

The Best Platforms for Ecommerce Blogging

Ecommerce blogging should come as a part of your overall web store platform. Many ecommerce site builders also sport some degree of blogging functionality, but these three are the best providers that deliver well on both blogging and ecommerce features:

If you want to get a feel for blogging platforms in general, check out our full reviews of the three brands above, plus others. 

Brand logos for ecommerce blogging guide.

What is Ecommerce Blogging?

Have you ever read an article about a new product and just had to buy it? What about tips and tricks for using a product or service? That’s what ecommerce blogging is all about—generating organic interest in your brand and its products or services through written content.

It’s a way of marketing your online store through content that educates, entertains, and informs customers about what you do. You can use it to grow your customer base by targeting new markets and building relationships with potential customers, plus keep engaging loyal buyers with new content that keeps them aware of, engaged with, and purchasing from you.

When blogging for ecommerce, you want to strike a balance between educating people about your  products and services so that customers know what to expect when they buy from you and getting them interested in what they can do, achieve, or enjoy by purchasing your products.

On a technical level, there are specific steps you must take to get started with ecommerce blogging, including customer research, topic development, and content creation. We’ll get into those details in a moment.

Why is Ecommerce Blogging Important?

As an ecommerce seller, you’re probably spending a lot on paid ads already. And while paid ads are great for encouraging short-term gains in sales, ecommerce blogging helps you build a more steady audience of long-term customers.

It’s also a way to build trust with potential customers by showing them that you’re an expert in your field and that you understand their needs, pains, feelings, and passions. You can use your blog to educate customers about your products and services, as well as answer their questions before they even ask them.

Most importantly, though, ecommerce blogging leads to more traffic to your online store, which translates to more conversions and sales. Companies with blogs see 55% more traffic than those without, and there are several reasons for this.

  • Ecommerce blogging gives retailers the opportunity to cover topics their customers are already searching for.
  • When potential customers read a company blog, they might associate its products with a solution to their problem.
  • Companies with blogs do more than just engage online shoppers—they keep readers on their sites for prolonged periods of time.
  • When a retailer becomes a source of information, its content is shared across the internet, which leads to more traffic from farther-flung sources.
  • Users are more likely to look for a product if they already understand where it fits into their lives and how it solves their problems.

As a search engine, it’s Google’s job to provide its users with the information they’re looking for. Many people aren’t looking for products specifically. They often type a question or a phrase into Google related to what they’re experiencing at the moment, whether it’s a need for something or a problem they want solved. When companies write about topics related to their products, it gives them a better chance of appearing in searches and ranking higher in results.

A blog can really speed up the ecommerce conversion process by quickly dispensing with an introduction to the business and its products and by drilling deeper into topics that are directly or indirectly related to the web store’s product line.

How Ecommerce Blogging Works

Ecommerce blogging is similar to most types of blogging, but it also has some key differences. 

Since an ecommerce storefront is selling products or services, blog content needs to be focused on the products and services being sold to a specific degree. You don’t want it to be too salesy or pushy, but you also can’t just write about anything without tying it back to your business or offerings.

Here are the main steps that go into starting the ecommerce blogging process:

  1. Customer research: To know what topics to include in your blog, you need to understand who your customers are and what they’re looking for. Everything from purchase data to customer inquiries and search intent can be used to guide your content strategy.
  2. Keyword research: Although topics should speak to your target customers and their main concerns, keyword research is still important for honing the SEO of your blog posts. This research is used to identify search terms that are related to your products, as well as low-competition terms that you can use in your blog titles and content to rank high in results.
  3. Topic development: After developing an idea of the types of topics that will be interesting to your audience, it’s time to start brainstorming ideas. Tie topics to types of posts you want to write, like examples of ways to use your product, instructional guides (like this one!) to help your clientele achieve something, or even opinionated articles offering your brand’s insights and thoughts about modern trends, just to name a few examples.
  4. Content creation: This is when you get to work in earnest. Putting together your blog post  includes writing (or finding someone to write) the post, formatting it correctly, and adding engaging visuals such as images and videos or other elements like call-to-action buttons or even embedded product listings.
  5. Promotion: Once you have a blog post ready to go, you need to make sure that it’s seen by those who are interested in what you have to say. Promotion includes things like email marketing, social media posting and sharing, search engine optimization (SEO), and paid promotion.

Beyond these basic steps, ecommerce blogging also requires some ongoing maintenance, such as monitoring analytics and updating older posts as they become stale or outdated in their information.

Benefits of Ecommerce Blogging

Creating an ecommerce blog comes with many benefits, some of which we touched on earlier. Let’s take a look at these advantages in-depth.

Blogging gives your brand a personality

The fastest and most effective way to show buyers who you are and what you offer is to tell your story. An ecommerce blog allows you to do this in an engaging way, while also providing helpful information and perspectives related to your products or services.

By consistently producing remarkable blog content, your brand becomes recognizable and trustworthy. It’s a way to share with customers who you are as well as what values your business holds dear. When readers recognize themselves in your brand thoughts and values, they’re more likely to become a customer and ardent supporter of your business. Blogging is a non-intrusive method that helps build an unforgettable personality for your company while reinforcing its online reputation.

You can pay less for more

Paid search, Facebook Ads, and other types of pay-per-click (PPC) advertising can be expensive. And you only get results as long as you’re paying for the campaign. By investing in ecommerce blogging instead, you can save money while reaching more people.

Blog posts work around the clock, whether you’re spending money on additional marketing or not. Since they sit in search engine results pages (SERPs), high-ranking blogs can garner traffic without requiring any further financial input than the initial outlay to create posts.

Your SEO rankings will improve

Google loves unique, informative content. And when your blog is regularly updated with relevant and keyword-rich posts, your chances of ranking higher in search results increase significantly. Not just your individual blog posts’ pages either, but also your root domain where your online storefront lives. That’s because you’ll be showing search engine algorithms that you’re keeping up with the latest trends and providing value to your customers.

Higher rankings mean better sales numbers

For most online shoppers, the buyer’s journey starts with a search engine. 68% of buyers search for a product on Google before making a decision on what to buy. When you rank higher in the SERPs with informative, keyword-rich blog content, you make it easier for customers to find your business and its offerings. This means more visits to your store and a better chance of turning visitors into buyers.

Readers see your products beyond a photo or landing page

It’s tough to communicate the value of your products when you’re limited to product photos and descriptions. But blog posts give readers the chance to see beyond a simple image or landing page, allowing them to understand the value of the items within your store, including unique ways to use them and benefits they might not have thought about themselves.

With blog posts, you can communicate information in a way that cannot be captured by photos or product pages alone. You can discuss problems, answer questions and offer solutions—effectively highlighting why shoppers should choose your products without the need for salesy language or intrusive marketing messaging.

Strategies for Crafting a Successful Ecommerce Blog

Ecommerce companies big and small can use their blogs to drive more sales and build brand awareness. But, for your blog to succeed, it must be well-executed. Here are some strategies to help you get started on the right foot with ecommerce blogging.

Create a detailed content calendar

One of the most important aspects when crafting an ecommerce blog is consistency. If you post regularly for a few weeks then don’t post anything for another week or two (or month), you’re going to lose some of your audience and some of your search ranking gains. 

You need a regimented schedule for posting that you stick to. A content calendar typically includes:

  • The topics you will cover
  • When the posts should go live
  • Who is responsible for producing content

By creating a content calendar, you can ensure that your blog remains up-to-date and relevant at all times. This increases the chances of attracting customers through search engine results pages and other channels.

Don’t worry about trying to post all the time as much as being consistent. It’s better if you always publish something new on Tuesdays and Thursdays for weeks on end than to post something on five in one week then only once in the next. Be mindful of the workload your writers and content managers will be taking on and set up a calendar that allows them to produce excellent content on schedule, week in and week out.

Turn common content types into templates

Some posts will require original content with unique ways of presenting information or thoughts. But, for a lot of your content, you can turn their formats into templates that make writing similar types of posts easier and faster. 

For example, blog posts like “X Best (Keyword) for (Activity)” and “X Tips for (Topic)” can have formats with subheadings that you can use as a replicable outline for each post that uses that technique. This way, you can quickly write posts that meet your formatting and quality standards without having to start from scratch with each one.

Embrace a flexible business model

While it may seem like larger corporations always have the advantage, they are also burdened with certain weaknesses. Within their corporate bureaucracies, agility and change aren’t exactly common.

As a result, shifting focus for these companies can be an expensive endeavor riddled with red tape and paperwork. This process is far simpler for smaller businesses who don’t need to contend with all those barriers.

When it comes to blogging as a smaller ecommerce seller, you can quickly change direction and update your content strategy to match the latest trends or preferences of your customer base. This gives you a significant opportunity to dominate search results, capitalize on current events and trends, and grow your online presence to compete with the big players in your space.

Leverage user-generated content (UGC)

With the rise of Instagram and TikTok, plus the growth of influencer marketing, customers are more excited and enticed by transparent and authentic communication from a brand and its customers than ever. 70% of consumers factor in user-generated content in their buying decision because they trust their peers and the social accounts they follow and interact with daily.

User-generated content is a great way to showcase your products or services in real-world scenarios, proving the worth of what you offer and boosting sales from an authentic source. You can highlight or report user-generated content on your blog by creating roundups, testimonials, reviews, and feature stories—all ways of demonstrating the successful use of your products or services or the positive feelings surrounding your brand.

Let engagement data dictate your content strategy

It isn’t 2010 anymore. Keyword research alone should not be the basis of your content marketing strategy. Instead, focus on what your customers and audience are already engaged with based on their current conversations, activities, interests, and needs.

Customer data like this comes from several different places:

The questions your prospective buyers have, the comments your customers leave, the reviews they’ve written, and the conversations they’re participating in on social media are all indicators of what they are interested in. And that should be the focus of your ecommerce blog strategy.

How to Find the Right Tools for Ecommerce Blogging

Depending on your budget, your tech stack could be expansive or it could consist of a few basic tools. Before you start building your blogging strategy, you need the right set of tools to back up your efforts.

Researching and selecting the right types of software can be overwhelming—especially if you’re not familiar with all the options available in the market today. Still, there are a few essential tools you need to get started:

  • Web traffic analytics: You probably already use Google Analytics, but if you’re starting to build your blog, you’ll use it even more to learn more about your audience, where they come from, and what they do on your pages.
  • Keyword research tools: You may already have a keyword research tool like Moz, SEMrush, or Ahrefs. These tools allow you to track keywords and identify the right topics for your blog.
  • Content Management System (CMS): You need a CMS to create, manage, and publish content on your blog. WordPress is a popular option that has flexible features and designs.
  • Technical SEO Tool: Tools like Screaming Frog (which is free) can help you identify technical issues on your website that may prevent Google from finding and indexing your blog posts.
  • Email Marketing Platform: You need an email platform to capture leads and nurture them with your blog content. Options include MailChimp, ConvertKit, and AWeber.

As you grow your blog, you’ll probably want to add other tools to your tech stack. These include heat mapping tools, usability testing tools, social media management software, and social listening software. Don’t be afraid to experiment with different tools until you find the ones that work best for your business needs.

Final Thoughts About Ecommerce Blogging

Blogging is an essential tool for any ecommerce business. It can give you a competitive edge, help you connect with your customers, and increase sales. You may even be able to make money from your blog in addition to your ecommerce sales.

The key to success is to create a blogging strategy that aligns with your business goals, uses the right tools, and focuses on creating content that resonates with your customers. Then, using that data to find out what makes or breaks an ecommerce purchase, you can develop content your audience will actually want to read (and convert from).

Posted on

Could UX Be The Key To Unlocking Web3 Mass Adoption?

Let’s pretend you are interested in trying out Web3 (aka Blockchain or Crypto). You might have experience with various software tools from Web 2.0 and think Web3 is going to be as equally user-friendly, right?

You get a blockchain wallet, and that’s your passport to everything in the space. Once you’ve got your wallet set up, you’re free to take advantage of blockchain apps. Well, that’s how it works in theory. The reality is far more complex and is enough to confuse even pretty technical people.

So let’s say you start by getting a wallet. Which wallet? Well, there are hundreds to choose from, so just pick one you like the look of. Not that one, though; it doesn’t work with the blockchain you need it to.

And when you set it up, make sure you keep a digital and physical copy of your 24-word seed phrase safe. Lose that, and someone could syphon all of the assets in the wallet.

Set it up? Awesome. Now just head to the project you want to use and... Oh, wait. Before you can sync your wallet and log in, you need to add and switch to a different network. Done that? Perfect.

Ok, now we’re ready to jump into the decentralized web! How long will a transaction take? I don’t know. It could be a few seconds, could be a few hours. It really depends on network congestion and what it is you’re looking to transfer.

Once that transaction has gone through, make sure you get a different wallet — ideally a hardware wallet — to keep everything safe. Yeah, I know there are fees involved, but that’s the price of having full control of your own assets and data.

Well done, you’ve actioned a single transaction in Web3! Give yourself a pat on the back because it’s anything but simple.

This is, sadly, not an exaggeration. This is what we expect new users to Web3 to do to get set up with a new project or platform. Is it any wonder that most people find the space confusing and frustrating?

I’ll soon come onto the issues in Web3 adoption and how we might be able to solve them. But first, let’s address the elephant in the room and speak briefly about what Web3 actually is.

What Exactly Is Web3 (And Why Should We Care)?

If we’re being blunt, Web3 is little more than a marketing term. Something brands in the space have conjured up to put a little distance between themselves and the negative public view of crypto.

However, there is a difference between Web 2.0 and Web3. At a high level, Web3 brands are built on blockchain technology, which allows a more decentralized approach to their operation. These brands also tend to focus on transparency, security, and accessibility.

In effect, the key benefits include:

  • Better security (fewer single points of failure);
  • Better interconnectivity and fewer controlling intermediaries.

But what does that actually mean?

Well, really, it’s about returning more control to the user and removing multiple intermediaries. In Web3, brands want users to control their owned assets and their data. They want to remove or limit the control of large, centralized entities.

Users are at the mercy of these large centralized entities. If these entities decide to implement a rule change, fare increase, or even experience negative outcomes themselves, the end users have no say in the matter and are often the ones who suffer.

Brands in the Web3 space are looking at how they can limit the amount of control centralized entities exert.

I’ll use financial systems as a starting point to highlight this.

If you want to set up a bank account, you often need to fill in an application and provide several forms of ID and information. Once you’re approved, you get an account.

That account comes with certain rules and regulations which you must abide by. If the bank decides you’re not abiding by the rules, they’ll close your account. If the bank decides that you shouldn’t have the ability to send funds internationally, you can’t. If the bank decides to hike its interest rates and fees, you have to pay them.

You are at their mercy because they own the infrastructure you need. It might not sound like an issue, and it’s not for the vast majority of people in Western nations. But access to a stable financial system can be a difficult thing for those in developing nations.

Let’s also think about how something like an international transfer is processed. If you want to send money to another country (or even someone who uses a different bank), there’s a multi-step chain of approvals and communications that needs to happen.

Now, each of these steps comes with a fee and a delay. Meaning it can take more than a few days for your payment to process.

With the decentralized nature of blockchain, though, you could send funds directly to the recipient without any intermediaries. That means fewer delays and zero chance a centralized entity within the system will decline the payment.

Now, let’s also talk briefly about the security of it all.

In the image above, you can see that there is one centralized ledger in the traditional banking system. If that one centralized entity is compromised, either through a hack or some form of error, everything suffers.

With blockchain tech, there’s a distributed ledger. If one of the “nodes” is attacked or fails, there are still multiple other copies that can be used to form backups and keep the system running.

As blockchain works on consensus between all nodes, you’d need to simultaneously attack 51% of the nodes to assume control. Currently, on Ethereum, there are 10,637 nodes across the globe.

An attacker would have to assume control of 5425 nodes at the same time. And even then, there are precautions and methods to prevent ongoing damage. As such, it’s generally considered to be far more secure than centralized systems.

All of the above might be focused on the financial. However, it’s true for any blockchain-based use case. From finance to data to the simple transference of ownership paperwork. It is more secure, more direct, and more easily controlled by the end user.

Now, there are issues with things like energy consumption that are being addressed. However, when we’re just looking at onboarding new users, there’s one big problem with blockchain-based apps and Web3. The UX is generally terrible.

Why UX Is Key To Unlocking Web3’s Potential

Let’s be blunt about this. Most people don’t care about the tech behind a service, nor do they want a convoluted, complex system to activate the most simple of actions.

People want convenience.

They want to quickly understand what a product does and how to achieve the benefit it offers. Great products attract users because they help people achieve their goals faster, easier, or cheaper than the existing method.

And yet, it feels like most Web3 projects are created by engineers, for engineers. The complexity extends beyond the actual service and includes how these projects explain themselves. The self-help documentation is often full of technical jargon most will never understand.

I mean, check out this paragraph from LooksRare (one of the most popular NFT marketplaces). It’s a simple statement about what they do.

“LooksRare’s smart contracts are custom-built within a modular system that enables new features to be rolled out over time — without compromising security — thanks to standardized signatures that clearly define the execution scope.”

I spend all day analyzing Web3 projects, and it takes me more than a second to decipher what they mean. Imagine trying to convince someone not in the space that they should take a chance on Web3 with the above. Right now, the only people truly involved in Web3 are those who have persisted through jargon-filled explanations and complex user journeys.

If QWeb3 and blockchain technology ever have a hope of going mainstream, everything needs to be simplified. The friction to onboarding new users needs to be reduced so that we can welcome those who aren’t technical. We need to make it so simple the generations that didn’t grow up with cell phones and video games can action a transaction. And that includes everything from the language used to the systems to onboard new users.

Here are a few of the overarching elements that should be addressed.

Core Elements Of Better Web3 UX

I’ll get into detail on these a little later on. First, I want to outline what I believe to be the major, big-picture difficulties that need to be overcome in the space.

Clear Communication

Too many projects fall back on jargon-filled explanations. They sound fancy, but they also limit who understands what the project does. It’s common when new developments are made, as most of the documentation is made by highly technical people. The issue is it’s extremely limiting.

Most people don’t care about how an L2 scaling solution helps improve the speed and efficiency of an underlying layer-1 blockchain without compromising cryptographic security. What they want is to quickly and safely send funds.

One of the best pieces of advice I received when first starting as a copywriter was to imagine you’re explaining concepts to a group of young children. If you can do that, even the most tech-unsavvy people out there will quickly understand why they need your offer.

Clear answers to key questions is critical to enabling your users to help themselves.

There’s a prime example of this below. You might not need to go that simple, but it definitely shouldn’t be as complex as most people make it.

Most Web3 apps have a fraction of that.

So the question is, what do these exchanges do differently? Well, they take the complexity out of cryptocurrency. Let’s look at Coinbase’s onboarding.

To sign up, they’ve used a common Web 2.0 sign-up process. It’s just your name, email address, and password. People are familiar with this, and anyone who’s been on the internet for more than a day will likely have auto-fill add in these details in a few clicks.

Once you’ve confirmed your email, you’re in the main dashboard. You’ll need to provide some details for the financial know-your-customer (KYC) checks, but then you’re ready to go. The whole thing takes maybe 2 minutes before you’re “interacting with the blockchain” and able to buy some cryptocurrency.

And even that’s made easier. On the main dashboard, there’s a huge "buy" button that brings up a modal where you simply add how much of the cryptocurrency you want to buy.

A few clicks later, you own some cryptocurrency. If you remove the approval of your KYC info, the whole process could be done in around 5 minutes. Likely the same time it would take you to process a bank transfer of some kind.

And notice how there was no mention of or need to set up:

  • Blockchain,
  • Crypto wallets,
  • Seed phrases.

The onboarding and usage mirror that of a familiar Web 2.0 system. The wallets and blockchain elements are all hidden from the user. This is how most tech-heavy businesses operate.

No one needs to see or know how the sausage is made. You don’t see YouTube going to great efforts to talk about how videos are stored and secured on their servers and then streamed to millions of devices. People simply click “upload” and then are given a link to share so others can watch it.

It’s so simple a child can do it. And it’s that level of simplicity blockchain-based brands should be aiming for. Crypto exchanges do this so well, and yet few other Web3 brands are mimicking their successful approach.

So, if you’re a UX professional and want to get involved in Web3, what are the primary opportunities you could explore as a new revenue stream?

UX Opportunities For Entrepreneurs And Designers In Web3

If I had to sum it up, the biggest opportunities in Web3 are in making everything more accessible for non-technical people. Think of how difficult it would have been to set up a website before popular website-building platforms and companies.

No one wants to code their own CMS and figure out how to host it on a domain. It’s way too complex for most people. As soon as companies like Cloudflare and WordPress came along, the potential for people to set up their own digital businesses exploded.

We need the same level of simplicity UX in Web3.

The person or team who solves any of the below issues will be on to a winner. They’ll have something the industry desperately needs for its growth, and I wouldn’t be surprised if great brands line up at the door of those offering these solutions. Here are a few of the biggest opportunities as I see them.

Now, I’ll preface this by saying there is a lot to be improved in Web3. Too much to cover in detail in this piece. So for the sake of brevity, I’ve segmented into two primary segments. First up is the issue with engineering.

Engineering Issues In Web3

I’d argue that engineering issues are more important for Web3 adoption. You can improve the marketing and general UI as much as you like, but if the products don’t work as intended or have huge flaws that prevent people from getting the best from them, it’s all in vain.

One of the major issues with the functionality of Web3 engagement is with wallets, more specifically, wallet recovery.

Wallet Recovery Without Compromising Security

This is a big one, in my opinion. As mentioned above, blockchain wallets are key to engagement with Web3 brands. They’re incredibly secure. So secure that if you lose that 12 or 24-word recovery seed phrase, you lose access to your wallet and its contents, probably forever.

It’s a huge risk. Some people take to writing their seed phrase on a piece of paper which obviously compromises security in more ways than one.

So what’s the solution? How can we keep that wallet’s security without making it so unforgiving that people are locked out of their own identity and assets?

One of the proposed solutions is to use what Vitalik Buterin calls a social recovery wallet.

In short, you add a couple of trusted guardians to your wallet. If you lose access, you ask them to authorise its transfer to a new address. It’s not perfect, but it’s, unfortunately, the best option we have right now.

This removes that single point of failure and turns the whole “I lost my seed phrase” from a complete loss into a slight hassle of asking friends or family to help you transfer to a new address.

If anyone out there can figure out how to create a better solution, they’ll be welcomed with open arms in Web3.

Potential fixes:

  • Social recovery systems as mentioned above.
  • Backup seed phrase to the cloud. (There are security risks here.) Potentially using a decentralized storage service to segment the seed phrase and store those segments separately.
  • Using multi-party computation to secure wallets. In this method, the private key could be split between a cloud server and a device like your phone. Both parties have to be available to access the wallet. Kind of like 2FA authentication.

Interoperability Between Different Blockchains

Blockchains are, unfortunately, siloed. Ethereum is different from Solana, and they don’t exactly work well together yet. If you want to work across chains, you need to work through multiple front-ends — blockchain bridges — and submit a lot of different bridge transactions. All of which are costly and cumbersome.

This is what the ecosystem looks like.

It’s a real pain to navigate. Most people will try to move assets and information across chains through centralized exchanges or individual cross-chain bridges, which is, at best, highly inefficient.

What’s needed is a method for assets and chains to interact with one another more seamlessly — for the end user to have a single dashboard that could pull details or assets from Chain 1 and use them on Chain 2 without the user having to do any manual moving of currencies or assets through a third-party service.

It’s a big problem, but the unlocking of this not only hugely improves UX but should foster greater innovation and growth in the sector as a whole.

Potential fixes:

  • There is sadly no real fix for this. There will continue to be new chains popping up. The best solution is for people to work on interoperability protocols that allow users to interact with two chains seamlessly.

Financial Off-ramps

One of the most talked about uses of blockchain technology is cryptocurrency. The big usability issue with crypto is that few places outside of Web3-specific services accept it as payment, and it’s peculiarly difficult to change back into fiat currency.

Imagine you have $1000 of Ethereum in your wallet and need $800 USD to pay a bill. If you wanted to turn that Ethereum into USD, you’d have to do something like the below:

  1. Log into a crypto exchange;
  2. Sync your wallet;
  3. Add your funds from your wallet to the Exchange’s wallet;
  4. Exchange your ETH for USD for a transfer fee;
  5. Withdraw the USD to your bank for yet another fee.

You’ll spend a good deal on fees, and the process takes longer than it should. There are some cool tools out there that are working to make the financial off-ramps simpler, but we’re still in the early days.

The faster and easier this process can be made, the more likely it is that crypto payments will be more popular. And for the person who solves this they have a great revenue-generating business on their hands.

I mean, think of how amazing Stripe has been for digital payments. Now add digital assets into the mix, and you can see the potential.

Potential fixes:

  • Creation of a crypto exchange-like service within an app that converts your crypto to select fiat currencies for you. You could even white-label some of the crypto exchange’s institutional services and do this for the user for a small fee.
  • Integration with various existing payment solutions. Apple Pay lets users use their Coinbase debit card for payments. You can also leverage a brand like MoonPay to enable easier on and off-ramps in the app. There’s a lot of disruption potential here. There are a handful of companies doing this, proving it is viable, but not enough yet to be competitive.

Communication And Education Issues In Web3

In addition to the basic functionality and ease of use issues with Web3 projects, we also have the marketing side of things.

Even if Web3 brands simplify the processes, they still talk about them in highly technical terms and make little to no effort to make it understandable to those not in the space. Below are a few of these issues and potential fixes in detail.

Marketing And Communications

Right now, Web3 is by engineers and for engineers. People are working on use cases that can really help non-technical people with their day-to-day lives, but they’re not succinctly communicating how it can help them.

And so, these great tools are being overlooked by the people they’re built to help.

One of the biggest opportunities I see is in better marketing and communications.

We, of course, need copy that explains what a product does. But more so, we need good UX copywriters and content producers to create information and education on how to simply set up the service and get the most from it. Without this, you might be able to attract new users, but they won’t get the most from your tool or stick around for a long time.

Make it simple, remove the jargon, and ensure even complete non-technical newbies understand how to achieve the key benefit with minimal effort. Manage to do this, and the project should succeed.

Potential fixes:

  • Hire technical writers from customer-facing, but highlight technical, Web 2.0 brands to help simplify messaging.
  • Make use of existing communication channels. A lot of Web3 brands don’t offer a bridge between something like email and Discord, meaning only those already in the space get the detail they need to onboard effectively.

Simplifying Transactions

There are two major problems with blockchain transactions right now:

  1. Addresses,
  2. The way transactions are processed.

Let’s first look at addresses.

My public Ethereum address is 0xde590D7ba25Ae2eCEAbbde7546D4Cbe94cc66961.

That’s not a typo. If I want someone to send me something, I need to give them that address. And they need to type it into the recipient field when sending funds without a mistake.

If either one of us messes it up, the transaction doesn’t fail, but the assets being sent are lost. Yeah, that’s right. You don’t get a nice warning message. The funds are sent to an address that doesn’t exist, and you’ve no way of easily getting them back.

These long hashes for addresses are also terrible when it comes to figuring out who sent what and when. Here’s a look at the Etherscan run down for my address:

Finding a particular transaction in that mess is insanely difficult. We need a way to simplify the way people refer and identify accounts and how the transactions are listed. The long-form cryptographic hashes are so user-unfriendly it’s unreal. It’s honestly amazing they’ve managed to get this far.

One of the tools aiming to help with this is ENS Domains. Much like buying a website domain, you buy an ENS domain, and that shows up instead of the long hash.

In the above, I had that insanely long hash as my address. With an ENSDomain, someone doesn’t need that as they can find my account by searching for PJBoyle.eth. That makes it much easier to find and send me assets or see how I’m engaging on the chain. But it’s only for Ethereum, which is why we also need that interoperability I mentioned earlier.

The second issue is in the way transactions are processed.

A lot of dApps need you to sign the agreement at each and every stage. Basically, to action one thing on the chain, you might have to stop the process in order to click “agree” multiple times. It’s a longer, more inefficient way of doing things and requires too much action from the user.

A solution that rolls all of these actions into one for a single-user authentication could improve the UX. Here’s an example diagram:

above is how a typical Defi app works today

below is how I think it should work

first, complete all actions (on simulated data if necessary), then batch-sign everything. more than one signature per interaction should be an anti-pattern pic.twitter.com/wQ8aSv0kNQ

— Hasu⚡️🤖 (@hasufl) June 20, 2022

Both of these improvements would make transacting so much easier and simpler, which should enable more people to get into Web3.

Potential fixes:

  • Roll out more services like ENS Domains, where abstract addresses are transformed into easily memorable phrases.
  • Reduce the load on the user. Don’t make them triple-check everything. Reduce the number of steps they have to take by rolling all confirmations into one approval.
Today’s Problems Are Tomorrow’s Opportunities

All of these problems are really because of the early nature of the tech.

None of the above will be the end of Web3, but for the people or teams who are able to solve them and make the entire ecosystem more user-friendly, these problems could be the catalyst that grows tomorrow’s most impactful businesses.

Posted on

How to Embed a YouTube Live Stream in WordPress

Do you want to embed a YouTube live stream on your WordPress website?

Embedding YouTube live streams on your WordPress site can increase engagement by allowing visitors to interact with you and your content in real time.

In this article, we will show you how to easily embed a YouTube live stream in WordPress.

How to embed a YouTube live stream in WordPress

Why Embed YouTube Live Streams in WordPress

Live streaming allows you to broadcast live video or audio content over the internet, enabling users to watch the video in real-time.

YouTube live stream

Embedding a YouTube live stream on your WordPress website is an excellent way to connect with your audience and reach more users.

It can also increase user engagement by allowing you to interact with site visitors.

A YouTube live stream can also help boost website SEO and attract more traffic. Research has shown that blog posts with at least one video get around 83% more visitors than content without any.

That being said, let’s see how you can easily embed a YouTube live stream in WordPress.

How to Embed a YouTube Live Stream in WordPress

The easiest way to embed a YouTube live stream is by using Smash Balloon’s YouTube Feed Pro plugin.

It is the best WordPress YouTube feed plugin that allows you to embed YouTube videos and live streams on your website.

First, you need to install and activate the YouTube Feed Pro plugin. For more instructions, please see our beginner’s guide on how to install a WordPress plugin.

Note: YouTube Feed also has a free version. However, it does not support the Live Stream feature.

Once the plugin has been activated, you need to visit the Youtube Feed » Settings page from the admin sidebar. Here, you need to enter the license key and click on the ‘Activate’ button.

You can get the license key from your Accounts page on the Smash Balloon website.

Activate your smash balloon license key

Next, you need to visit the YouTube Feeds » All Feeds page from the WordPress admin sidebar.

From here, simply click on the ‘Add New’ button at the top.

Click the Add New button to add the YouTube feed

This will open up the ‘Select Feed Type’ prompt.

Now, you need to choose the ‘Live Streams’ option and then click on the ‘Next’ button to continue.

Choose live stream as feed type

On the next step, you need to connect YouTube Feed Pro with your Youtube account. You will be asked to provide your YouTube API key.

If you already have an API key, simply copy and paste it into the ‘Enter API Key’ box and click on the ‘Add’ button.

Add YouTube API key

Create a YouTube API Key

If you don’t have an API key yet, then you need to go to the Google Cloud Console and sign in using your Google account.

Once you are logged in, click on the ‘Select a project’ button at the top.

Click Select Project button

This will open a popup window that will display all the projects that you have created.

Next, simply click on the ‘New Project’ button at the top.

Click the New Project button

This will take you to the ‘New Project’ page, where you can start by typing in a name for your project. This can be anything that will help you easily identify it.

Next, you must also select an ‘Organization’ and its location from the dropdown menu. You can select ‘No Organization’ and click the ‘Create’ button to continue.

Choose a project name and its organization

Once the project has been created, you will be taken to the project dashboard.

From here, you need to click on the ‘+ Enable APIs And Services’ button in the top menu.

Click on the + ENABLE APIS AND SERVICES button

This will take you to the API Library page. It shows the different Google services that you can create APIs for and use in your projects.

Now go ahead and search for ‘YouTube Data API v3’ in the search box.

Search for the YouTube data API v3 option

Once the ‘YouTube Data API v3’ result shows up, just click on it.

This will take you to a new page where you need to click on the ‘Enable’ button to activate the YouTube API key.

Enable the YouTube API

You’ll now be taken to the ‘API/Service Details’ page.

From here, simply click on the ‘Create Credentials’ button at the top.

Click the Create Credentials button

Next, you’ll be directed to a new page where you must check the box next to the ‘Public Data’ option.

After that, click on the ‘Next’ button to create your API.

Check the Public data box and click on the Next button

Your API Key will now be created and displayed on the page.

Simply copy the API key and click on the ‘Done’ button.

Copy the YouTube API key

Next, it is time to head back to the WordPress dashboard.

Go ahead and paste the API key into the API Key Required box. Then, click on the ‘Add’ button to continue.

Add YouTube API key

Add the YouTube Live Stream to Your WordPress Website

Once you’ve added your YouTube API key, you will be redirected to the ‘Select Feed Type’ page.

From here, you need to click on the ‘Live Stream’ option again, followed by the ‘Next’ button.

This will open the ‘Add Channel ID For Live Stream’ page.

Visit the Add channel ID for live stream page

Now, you need to visit the YouTube channel that contains your live-stream videos.

From here, go ahead and copy the text that comes after ‘/channel/’ or ‘/user/’ in the URL at the top.

Copy the code after channel or user in the URL

Next, switch back to the WordPress dashboard and paste the code into the ‘Add Channel ID for Livestream’ box.

After that, click on the ‘Connect’ button to connect your YouTube channel with WordPress.

Once the channel is connected, you need to click on the ‘Next’ button to continue.

Add code and click the connect button

Customize Your YouTube Feed

Now that your YouTube live stream feed has been created, you can customize it. Smash Balloon’s YouTube Feed Pro offers many different display options.

First, you will need to choose a template on the ‘Start with a template’ page. You can choose from Default, Carousel, Cards, List, Gallery, and Grid layouts.

Once you have made your choice, simply click on the ‘Next’ button.

Choose a template for your Live YouTube feed

After you have chosen a template, an editing screen will open up that displays a preview of your YouTube feed to the right and customization settings in the left menu column.

Here, you can start by expanding the ‘Feed Layout’ panel.

YouTube Feed editor

On this screen, you can switch between the layouts.

You may also be able to configure additional settings depending on your chosen layout.

Customize the YouTube feed layout

Next, you need to click on the ‘Color Scheme’ panel.

By default, YouTube Feed Pro uses the same color scheme as your WordPress theme. However, you can also use a ‘Light’ or ‘Dark’ color scheme for the video feed.

You can also design your own color scheme by clicking on the ‘Custom’ option and then using controls to change the background, text, and link colors.

Customize feed color scheme

To add a header to your YouTube feed, you need to visit the ‘Header’ panel. From here, simply toggle the ‘Enable’ switch to activate the header.

You can also use the controls to switch between standard and text header styles. Choosing the ‘Text’ option will allow you to change the text size and color.

Customize YouTube feed header

You can also customize the appearance of the video player by going to the ‘Videos’ panel.

Here, you will see a list of options.

Videos panel option

To customize the video layout and individual properties, you need to visit the ‘Video Style’ settings panel.

Here, you can select the video layout, background color, and border.

Customize video style

After that, open the ‘Edit Individual Elements’ panel. Here, simply check the boxes next to the elements you want to display along with the YouTube live stream videos.

You can show or hide the Play icon, video title, live stream countdown, descriptions, and more.

Edit the individual elements you want to display along with the video

Next, you need to head over to the ‘Hover State’ setting. Here, you can choose the individual elements that will display when the user hovers their mouse over the YouTube video.

You can pick many elements, including video title, description, date, views, and more.

Customize hover state

After that, you need to visit the ‘Video Player Experience’ panel.

From here, you can change the video player’s aspect ratio. You can also choose whether the video will start playing automatically or wait until the visitor clicks the play button.

Customize video player experience

After customizing the individual video elements, switch to the ‘Load More Button’ panel.

Here, under the ‘Load More Button’ setting, you can switch the toggle to ‘Enable.’ This will display more video suggestions after the live stream.

You can also choose the background color, hover state, and text from the settings in the left panel.

Customize the Load More button

After that, switch to the ‘Subscribe Button’ panel and toggle the switch to ‘Enable’ if you want to activate the YouTube subscribe button.

You can also change the button’s color, text, and hover state in the settings.

Customize Subscribe button

Once you have customized the YouTube live feed, you can preview how it will look on desktop computers, tablets, and smartphones. Simply click on the different buttons in the upper-right corner to preview the feed on different devices.

Finally, don’t forget to click the ‘Save’ button at the top to save your changes.

Preview and save feed

Embed the YouTube Live Stream on a WordPress Page

The next step is to embed your YouTube live feed on a WordPress page. To do this, you must first click on the ‘Embed’ button at the top.

This will open up the ‘Embed Feed’ prompt. Here, click on the ‘Add to a Page’ button to continue.

Click Add to a page button to embed YouTube feed

The popup will now show a list of all the WordPress pages on your website.

Simply choose the page where you want to embed the YouTube live stream and click the ‘Add’ button.

Choose a page where you want to embed the feed and click on the Add button

The page you selected will now open up in the block editor.

From here, you need to click the ‘Add Block’ (+) button in the top left corner and search for the ‘Feeds for YouTube’ block.

Once you have found it, add the block to your page by clicking on it.

Embed YouTube Feed on a page

Don’t forget to click on the ‘Update’ or ‘Publish’ button to save your changes or make them live.

This is how the YouTube live feed looks on our demo website.

YouTube Feed Page preview

Add a YouTube Live Feed as a Widget

You can also add a YouTube live feed to the WordPress sidebar as a widget.

First, you will need to visit the Appearance » Widgets page from the admin sidebar.

From here, click on the ‘Add Block’ (+) button in the top left corner of the screen and locate the ‘Feeds for YouTube’ block.

Next, click on the block to add it to the widget area.

Add YouTube Feed as a widget

Don’t forget to click on the ‘Update’ button to save your changes.

This is how the YouTube live feed looks in the sidebar on our demo website.

Widget Preview of YouTube feed

Add a YouTube Live Stream in the Full Site Editor

If you are using a block-based theme, then this method is for you.

First, go to the Appearance » Editor page from the admin sidebar to launch the site editor.

From here, click on the ‘Add Block (+)’ button at the top and look for the ‘Feeds for YouTube’ block.

Next, you can drag and drop the block to wherever you want to display the YouTube feed on your page.

Add the YouTube feed in FSE

Once you are done, don’t forget to click on the ‘Save’ button to apply the changes.

Here is a preview of the live streams on our demo website.

FSE preview of YouTube live feed

We hope this article helped you learn how to embed YouTube live streams in WordPress. You may also want to read our ultimate WordPress SEO guide or check out our top picks for the best social media plugins to grow your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Embed a YouTube Live Stream in WordPress first appeared on WPBeginner.

Posted on

6 Ways To Speed Up Your WordPress Web Development With Mind Mapping

Mind maps can help you visually organize your ideas and information, streamline your development process, and facilitate collaboration. Here are six ways to speed up your WordPress web development process with mind mapping…

Professional web developers need to work smarter and faster to get things done and delivered on time and on budget. There are plenty of tools to help speed up your WordPress web development when building a website.

But what about tools to help you get your thinking organized before you actually start working on a project? How do you sort, filter and organize everything when there are so many different ideas and paths you can take in the initial stages of a project?

This is where mind mapping can help.

In this post, we look at different ways to use mind maps to get your web development projects done faster and with less costly distractions.

We’ll cover:

What Is Mind Mapping?

Mind mapping is a cognitive tool that helps you visually organize your thoughts and ideas, as well as make connections between them.

It is a graphical representation of information, typically starting with a central idea or concept and branching out into related topics or sub-topics.

The structure of a mind map is hierarchical, with the central idea serving as the main node from which other ideas radiate. These nodes are connected by lines, which represent relationships or associations between the ideas.

Mind map - basic structure.
Basic mind map structure where topics and subtopics flow from a central idea.

Mind maps can be used to brainstorm ideas, plan projects, outline information, or solve problems.

In addition, mind maps can include images, symbols, or colors to help emphasize or illustrate certain concepts.

All of these makes mind mapping a valuable tool to help organize your thinking during the initial stages of the web development process.

Benefits of Using Mind Maps in Website Development

The benefits of using mind maps in your web development approach include:

  1. Enhanced creativity: Mind maps encourage the generation of new ideas, making it easier to develop creative solutions.
  2. Improved organization: Mind maps help organize information in a visual and easy-to-understand format, making it simpler to see the big picture and identify potential issues.
  3. Improved efficiency: By outlining your website’s structure and content in a mind map, you can streamline your web development process and save time.
  4. Efficient problem-solving: Mind maps can help developers break down complex problems into smaller, more manageable parts, leading to quicker and more effective solutions.
  5. Enhanced collaboration: Mind maps can be shared and updated in real-time, facilitating collaboration between developers, team members, clients, and stakeholders.
  6. Improved project management: Mind maps can serve as a roadmap for the entire web development project, ensuring that all stakeholders are on the same page and that deadlines are met.
  7. Enhanced communication: Mind maps can be used to explain complex concepts and processes to clients, stakeholders, and team members in a way that is easy to understand.
  8. Increased productivity: Mind maps can help developers stay focused and organized, reducing distractions and increasing productivity.

Now that we understand some of the benefits, lets look at the practical application of using mind maps in your web development business.

6 Ways To Use A Mind Map To Speed Up Your Website Development

Here are several ways to incorporate mind mapping into your website development approach:

1. Organize Website Structure

Mind mapping can help you create a clear and organized structure for a website. By mapping out the website’s content and information architecture, you can easily see the relationships between pages and make sure the user flow is logical and intuitive.

For example, you can use mind maps to visualize the hierarchy of pages on your website, such as the homepage, service pages, blog page, etc.

A mind map for a website development project.
A mind map for a website development project. Source: ContentManagementCourse.com

In the above example, the central topic would be the website name, with each of the major sections (e.g. company, products and services, blog, FAQs, etc) branching out to subsections and individual pages of the website.

By mapping out the relationships between these pages, you can ensure that the user flow is easy to follow and that the website is organized in a way that makes sense to users.

2. Brainstorm Content Ideas

Mind mapping can be a great tool for generating content ideas to match user intent. By brainstorming and organizing content ideas in a mind map, you can ensure that your website content is useful, accessible, and easy to interpret.

For example, you can use mind maps to generate content ideas for your website’s blog. By brainstorming topics that are relevant to your target audience and organizing them in a mind map, you can ensure that your content is aligned with user intent and will be useful to your website visitors.

Mind map - content ideas
Use mind maps to brainstorm content ideas.

3. Collaborate with Clients and Team Members

Mind mapping can be a great tool for collaborating with clients and team members. By sharing a mind map, you can get feedback and input from others to ensure that everyone is on the same page and that the website development process is moving in the right direction.

For example, you can use mind maps to collaborate with clients and team members on website design and development. By sharing a mind map of the website’s content and information architecture, you can get valuable feedback on the user flow, content organization, and other aspects of the website development process.

Miro mind mapping software
Miro lets you create mind maps collaboratively with your team.

4. Manage Project Tasks

You can use mind mapping to manage project tasks during the web development process. Creating a mind map of project tasks lets you quickly identify the key tasks that need to be completed and assign them to team members.

For example, you can use a mind map to assign tasks to team members, such as “Develop Home Page,” “Create About Us Page,” and “Design Contact Us Form.”

XMind - Project Management mind map
A project management mind map created with Xmind.

5. Save Time and Increase Efficiency

Mind mapping can help you save time and increase efficiency in the website development process. By visualizing the website structure and user flow in a mind map, you can identify areas for improvement and make changes before the website goes live, saving time and reducing the need for post-launch revisions.

For example, you can use mind maps to identify areas of the website that may be causing user frustration or confusion. By making changes to the website structure and user flow in the mind map, you can save time and ensure that the website is optimized for user experience before it goes live.

6. Improve an Existing Website’s UX

Using mind mapping is a versatile and effective technique to improve user experience on a website redesign, map out the ideal user flow for your website visitors, and make the website more user-friendly.

The mind map would include the key pages on the website, the various links and CTAs on each page, and the relationships between different pages. This helps your team understand how data is structured on the website.

By identifying the paths users typically take when navigating through a website and potential issues and areas where they may get stuck, you can make UX decisions to remove roadblocks and improve the user experience, and create a mind map of the target version of the website that is more user-friendly than the existing site. It also ensures that all stakeholders are on the same page throughout the project.

Practical Applications for Mind Mapping in Web Development

Let’s explore now some of the practical ways mind mapping can improve your web development processes.

As mentioned earlier, mind mapping can be used when creating new projects or improving existing websites.

Let’s start with improving an existing website.

A) Using Mind Mapping to Improve User Experience

To use mind mapping to improve user experience, follow these five simple steps:

First, create a mind-map template to understand the current information architecture on the website. List out how data is currently being structured and how you plan to structure it for the future user-friendly version.

Second, map out the ideal user flow by thinking about how you would like your website visitors to engage with your content and what actions you would like them to perform.

Third, compare the ideal user flow to the current behavior flow available on your Google Analytics. This will show you how users are currently engaging with the website’s content and what paths they usually take when navigating through the current information architecture.

Fourth, identify the roadblocks to providing the best user experience, such as poorly structured content, irrelevant features, or too many tools that don’t respond to users’ needs.

Finally, make the appropriate UX decisions to influence user behavior by turning chaos into a logical content hierarchy, trimming irrelevant page elements, and adapting web pages’ content structure to the needs of specific audience segments.

Creating a mind map is just the first step, but turning it into powerful UX decisions should be your main objective. You can turn your mind map into an effective sitemap or customer journey map.

To illustrate this, imagine you’re targeting three different customer personas on your website. You would need to plan three different user flows, grouping web pages into categories corresponding to each audience segment.

Then, do some user behavior mapping to determine how each customer persona should navigate to the corresponding web page and click the CTA placed there.

Make critical UX decisions, such as setting up relations between various pages on your website, designing the best CTA for each type of page, and including key information on a page, depending on the customer persona accessing it.

Now that we have looked at how to improve an existing website using mind mapping, let’s turn to using mind maps when creating new web development projects.

B) Using Mind Mapping for Website Development

WPMU DEV member Lucas from Ondata Marketing shared with us how he uses mind mapping in his web development business to summarize the most important information gleaned from his client briefings.

Here’s what Lucas does, in his own words…

“First, the way to use the mind map is to insert a text or image in the middle, which can be the customer’s name, logo, niche or any other image that makes sense for use at that time.

After this first insertion, you start to draw lines from this highlighted center to another part of the sheet, then inserting another word or summary information, which can also have derivations (and maybe in this part you realize that you should have made the first derivative word less near the end of the sheet).

And after entering all the information, you would have leads, thought paths or subject groupings divided by the sheet, but all visible on the same page. And if all goes well, you will have a sheet where you can more clearly see the subject that the mind map was made and all your information and ideas derived from it.”

Lucas uses mindmaps to create websites in two ways:

Method #1 – Use A Mind Map For Web Development Research

The first way Lucas uses mind maps is for research:

“I put the topic in the middle, I go searching on the internet about the client’s company, about the niche it operates, about competitors or even listening to videos while I do other work tasks that are more automatic.

This is a mind map with less discretion, where I’m actually inserting anything and then, usually after a day or two, I’ll go over it and evaluate what still seems to make sense. And what happens is that generally about half of these things don’t make sense anymore to continue in the project as useful information.”

Method #2 – Use A Mind Map To Organize Website Elements

The other way Lucas uses mind maps is to summarize and organize the information gathered throughout the client briefing.

In his own words…

“After the client brief is done, I organize the information on paper and in my head. For that, I use a method that is to group some specific subjects in imaginary squares.

To explain it better: I imaginatively divide the mind map sheet into 9 squares, where the middle one is the text or image highlighted on the map, and the others are for other subjects. Using yet another analogy, it’s like using a hashtag #, where the middle is already filled with the theme.

And in the remaining 8 squares, I usually divide the insights and issues like this:

1 – Graphic references, font names, colors, branding rules. Simple things like drawing a square or a circle (which is one of the briefing questions I ask: “Think about shapes and images…”.

2 – Tone of voice, personality, brand word, feelings you want to arouse.

3 – Products and services. Except, of course, when there are many, then I just insert a general description of all or categories.

In tables 4 to 8, it’s always something different for each client, but in general terms, I put phrases that the client said in the briefing, the actions that the client expects his end client to do when entering the site, the things that end customer has to know that makes the company different.

The point is that people do not always have the answers to every question, and the answers they may have are not always good for every question, but there will always be some precious jewels among them that your own customer will have said and that will surely also serve to delight your customer’s customer.”

Lucas also provide some essential rules for making a good mind map:

“First rule: there are no rules. Always try to adapt to what makes the most sense for you.

The second rule: don’t fully respect imaginary squares. For each customer, the amount of content will be different in each subject. There is no problem if a large part of the mind map is filled with some kind of content if that content is relevant.

The third rule: be concerned about making sense, but summarize as much as possible. Remember that the mind map is something to organize your thinking, so you should always make it easier to visualize it by writing highlighted words, short sentences, or even simple drawings.

And one last tip: personally I really prefer to use paper. There is something magical about putting ideas and notes down on paper with all the imperfections, misalignments and scrawls that your own fine motor skills can produce. But you can also use other online tools and methods, to do it directly or to clean it up, especially when you need to present it later, or where mind maps become too large to fit on one sheet.”

Speaking of tools, lets look now at some of the most popular mind map tools available.

Mind Mapping Tools

Mind maps can be drawn by hand on paper or created using free or paid digital and online tools.

You can create mind maps using design and image editing tools like PowerPoint, Google Slides, Canva, VistaCreate, and others.

Mind map created using PowerPoint
Website tree structure mind map created with PowerPoint.

However, you can also use the dedicated free and paid mind-mapping tools below, which offer additional benefits over general drawing tools, such as specialized functions, collaborative features, integration with other tools, better organization, more customization, and better visualization options:

Mind Map Pro

Mind Map Pro
Mind Map Pro integrates mind mapping and a dynamic visual sitemap tool into WordPress.

Mind Map Pro is a powerful tool for mind mapping that offers various perspectives, such as map view, tree view, and 3D view.

Its user interface is user-friendly, and it has a simple process to get started. The color and shade of ideas can be changed using the color picker, and the size of idea boxes can be adjusted automatically or manually. Keyboard shortcuts are available to make mind mapping easier, and background images can be moved around the canvas by dragging and dropping. Zoom in and out using icons or a mouse scroll is also available.

Moving ideas and changing their relationships can be done by dragging and dropping, and additional associative links between ideas can be created. Contextual labels can also be added. The doodles can be exported to an Office document or an image, and the mind map can be kept private or public.

Mind Map Pro has a plugin to build a visual sitemap for your website, allowing you to drag-and-drop pages to edit your site’s structure and rearrange the architecture of your site. It can also connect with WordPress, allowing you to stay on track with tasks from your dashboard. You can add tasks from your dashboard or directly from a post or page.

Overall, Mind Map Pro is a versatile tool that can help you explore your ideas in different ways.

MindMup

MindMup - Mindmap
MindMup – A frictionless online mind map creation tool.

MindMup is an easy-to-use online mind-mapping tool. You can create mind maps for free without registering and export your mind maps as images or an outline document.

The free version offers a number of customizable features but limited capacity. The paid version options includes many additional features and increased capabilities.

MindMeister

MindMeister
MindMeister

MindMeister is a web-based collaborative mind mapping tool with a range of powerful features and versatile tools to help you organize, plan and execute your projects.

MindMeister lets you easily create to-do lists, website planning sheets, and arrange team assignments. The app also allows you to share the workspace online or via mobile devices like Android and iOS, and create email reminders for tasks.

Collaboration is made easy with MindMeister’s cloud-based platform. The “Opinions” feature, lets you get feedback from your team in real-time. Collaborators can vote “yay” or “nay” to individual nodes in your shared mind map and you can divvy up the work via drag-and-drop if you use MeisterTask to manage your projects.

MindMeister offers several different plans and a range of premade templates to help guide you in getting started with your own mind map. The free basic plan supports up to three mind maps at no cost. If you need more and additional features like including multiple users, custom themes, branding, multiple admins, custom domains, or group sharing, then you’ll need to upgraid to one of its paid plans.

MindNode

MindNode
MindNode

MindNode is a popular and easy-to-use and versatile mind-mapping software available for Mac and Apple iOS devices. It offers a simple and intuitive user interface, which makes it a great option for both beginners and experienced users. With quick entry features, you can start creating your mind map within seconds, allowing you to capture your ideas and thoughts on the go.

One of the best things about MindNode is that it allows you to create simple or elaborate mind maps, making it perfect for brainstorming sessions or organizing your daily tasks. You can even use it to set priorities, make to-do lists, or create annual goals. And with its syncing capability with Apple Watch, iPad, or iPhone, you can access your mind maps on the go, no matter where you are.

MindNode also offers import/export features, which make it an ideal tool to integrate with your workflow. With the ability to attach images, links, and files to your mind map, you can easily visualize and organize your ideas in one central location. And with the ability to fold nodes and use focus mode, you can easily manage complex mind maps without getting lost in the details.

Xmind

Xmind mind map
A mind map from Xmind’s mind map gallery.

Xmind is a powerful mind-mapping software that offers a range of features to create clear, concise, and customizable mind maps for brainstorming ideas, managing a project, or simply organizing your thoughts. It’s available for Mac, Windows, and iOS.

One of the key features of XMind is the Zen mode, which allows you to focus on a single mind map without any distractions. This feature is especially useful for when you need to concentrate on your thoughts and ideas without any external interference. In addition, XMind also has an equation feature that lets you add mathematical and chemical equations to your mind maps.

With XMind, you have access to a wide range of mind map templates that are designed to suit various needs. The multi-branch colors also help you to identify different nodes, making it easy to navigate your mind maps.

XMind allows you to protect your mind map files with passwords, ensuring that your data is safe and secure. It offers a smooth workflow, responsive graphics engine, distraction-free mode, and all the basic features you need to create and format mind maps. You can also export your mind maps as PNG, PDF, or markdown files, which makes sharing and collaborating with others easy. The mobile app for iOS and Android devices is also available, allowing you to work on your mind maps while on the go.

XMind lets you create mind maps easily using just the keyboard, and there are plenty of formatting options available. The themes and templates are attractive and allow you to jump-start your mind map. XMind also provides a range of useful project management and reference features, including task-based icons, adding notes and file attachments, and hyperlinks to web pages and mind map nodes. The Pro version adds even more features.

XMind is a subscription-based app for personal use, which may not suit everyone. Additionally, there is no cloud sync between devices.

Miro

Miro
Miro

Miro is a collaborative online whiteboarding platform that includes a mind mapping feature. The mind mapping software allows you to visually organize and connect ideas in a non-linear format, making it easy to brainstorm, plan projects, and solve problems.

With Miro, you can create and customize mind maps with text, images, and icons, and collaborate in real-time with other team members. The platform also includes features such as comments, voting, and tagging, which make it easy to gather feedback and keep track of important ideas.

Miro is designed for use by teams of all sizes, and can be integrated with a variety of other tools and platforms to streamline workflow and boost productivity.

Coggle

Coggle
Coggle

Coggle is a web-based mind mapping tool that lets you map out complex processes, connect related ideas, and visualize information with intuitive controls and features for creating, sharing, and collaboration.

Coggle’s drag-and-drop interface lets you add images and text anywhere on the canvas to annotate and organize your map. The software’s advanced features give you complete control over connection paths and styles, enabling you to create loops, join branches, and add multiple central items as starting points to map related topics together in one workspace.

With real-time collaboration and a built-in chat tool, Coggle is a great tool for teams to communicate and co-create diagrams simultaneously, without the need to log in. Plus, Coggle’s change history feature automatically saves all changes, so you can revert to a previous version from any point.

Coggle works seamlessly with Google services, making it easy to share files and collaborate with colleagues using Google accounts. Its template gallery also provides access to pre-built, customizable templates for setting SMART targets, root cause analysis, meeting notes, and more.

While Coggle’s web app interface does not offer all the full-featured native apps’ capabilities, such as themes, images, presentation, and brainstorming mode, its simple and intuitive design, floating text and images, and lively color scheme make it a cool and fun tool to work with. You can even use your smartphone to create or edit mind maps on the go.

Map Out Some Mind-Blowing Web Development

Mind-mapping is a flexible and adaptable tool that can help your web development business in many ways… from note-taking and brainstorming new ideas for websites and content creation to project planning, problem-solving, and decision-making.

There are various tools available to help you create mind maps that will speed up your web development, make your work more efficient, and help you communicate your ideas to clients more easily.

We hope this article has inspired you to expand your mind and map out new approaches to building a better web development business.

***

ON|Data Marketing

A special thank you to Lucas from ON|Data Marketing for his contribution to this post. ON|Data helps companies to position themselves professionally and creatively on the internet through WordPress websites.

Posted on

Rakuten Super Logistics Review

Rakuten Super Logistics (RSL) was acquired by ShipNetwork in 2022 and now operates under the brand name ShipNetwork. But while the owner has changed, ShipNetwork continues to be an ecommerce fulfillment service you can trust. Admittedly, it’s still too new to vet its current formation. However, the integrations with key partners like Shopify, Amazon, and ShipStation and fast fulfillment promises are a solid first start. 

Before the acquisition, ShipNetwork had seven strategically located warehouses across the US and an international network of shoppers. Post-acquisition, ShipNetwork continues to build on its existing resources, partnering with its sister company, FirstMile, to provide users with a full suite of logistics parcel technologies and solutions.

ShipNetwork brand logo.

ShipNetwork Compared

ShipNetwork hasn’t made it on my list of the best ecommerce fulfillment services, primarily because of its high minimum order clause and the tremendous goodwill of its competitors. Instead, I chose ShipBob as my top pick, with its 99.95% fulfillment accuracy rate and two-day shipping. Request a quote to get started.

Check out our best ecommerce fulfillment services.

About ShipNetwork

ShipNetwork is a leading ecommerce order fulfillment company that offers scalable, flexible, and cost-effective distribution solutions to your fulfillment problems. It aims to provide online retailers and consumers with fast, accurate, and efficient distribution for truly borderless ecommerce.

With over 250 employees across the country and 20 years of experience in logistics, ShipNetwork is one company you know you can rely on to deliver a positive shipping experience for your customers and uphold your ecommerce store’s reputation.

Aside from order fulfillment, ShipNetwork offers other 3PL services like returns management, subscription boxes, freight, and kitting.

ShipNetwork Health and Stability

ShipNetwork is a privately-owned company with annual revenue between $25 million-$100 million. It has been in the industry for 22 years and offers national fulfillment services and a network of fulfillment centers across the United States, including Atlanta (GA), Chicago (IL), Houston (TX), Las Vegas (NV), and Salt Lake City (UT).

Besides ecommerce, ShipNetwork offers specialized solutions in the transportation, trucking, railroad, and internet software niches.

Upon the recent acquisition of RSL, ShipNetwork and FirstMile owner Devin Johnson mentioned he plans to provide clients with a full suite of domestic and international transportation solutions and technology. All these are positive indications that ShipNetwork isn’t going anywhere soon.

ShipNetwork Pricing

ShipNetwork’s main focus is to provide users with customized and transparent pricing. You’ll have to get in touch with its sales team to learn how much you need to pay to use the ecommerce fulfillment service.

ShipNetwork Pricing Structure

ShipNetwork understands no two businesses are the same. To accommodate each business’s unique needs, it provides potential customers custom quotes based on factors like order volume, SKU mix, average product weight and size, inventory storage, and product handling and packaging, among other factors.

ShipNetwork Pricing Comparison

One can’t really compare the pricing of ecommerce fulfillment services, as most of them don’t have fixed pricing. You’ll have to request a custom quote from each service provider.

ShipNetwork Trials and Guarantees

ShipNetwork doesn’t offer free trials or money-back guarantees.

ShipNetwork Ecommerce Fulfillment Service Review

ShipNetwork specializes in expedited domestic shipping and fulfillment, a promise it can deliver on, thanks to the company having more than 10 fulfillment centers across the United States. Other notable features include next-day shipping, return management, subscription box fulfillment, and tons of integrations.

ShipNetwork boasts an excellent 100% order accuracy guarantee, but it’s important to note the company has only recently been acquired, so nothing is set in stone. However, there are a few caveats, such as the high minimum orders and vague pricing, which after taking into account, I haven’t featured ShipNetwork on my best ecommerce fulfillment services list.

What Makes ShipNetwork Ecommerce Fulfillment Service Great

A screenshot of the ShipNetwork home page.
After getting acquired, Rakuten Super Logistics (RSL) now operates under the brand name ShipNetwork.

Enhanced national reach: The acquisition of RSL resulted in increased volume and density, which is likely to benefit both ShipNetwork and FirstMile clients. The expanded network means ShipNetwork can reach deeper into postal and regional carrier networks, thereby reducing costs and improving service performance. With the company planning to expand its facilities in both the eastern and western regions of the United States, you can expect larger facilities to support larger-scale retail distribution.

Fast and simple order fulfillment: ShipNetwork‘s order fulfillment process is super fast and simple. Once a customer makes an order on your ecommerce store, it’s automatically synced with the nearest ShipNetwork warehouse (currently, there are over ten in the US). The fulfillment center then processes and ships the orders to the customer via ShipNetwork shipping partners. If any items need to be returned, ShipNetwork‘s fulfillment center will follow your prescribed process. 

Wide range of 3PL services: In addition to order fulfillment, ShipNetwork offers additional 3PL services to further streamline third-party logistics. For instance, its kitting is great for product bundling, while the cloud-based fulfillment and inventory system gives you complete control over your orders and inventory at all times. Other services include lot tracking, climate control, and project-based solutions to ensure your products are handled accurately and carefully.

Efficient returns management: Customers wanting to return an item because it wasn’t quite what they were hoping for is inevitable in ecommerce. Understanding this, they offer hands-on retail management services, which include restocking returned items to your inventory and discarded and damaged items. While you can work with the ShipNetwork team to plan your ecommerce return management, the company will collect the returns on your behalf and send them to the specific locations on schedule to minimize transit costs.

Tons of integrations: ShipNetwork’s ecommerce integrations include popular ecommerce platforms like Shopify, WooCommerce, eBay, BigCommerce, Magento, and Amazon. It also integrates with other shipping platforms and carriers like FirstMile, DHL, USPS, and ShipStation to streamline the overall shipping process while making it more cost-effective. However, be sure to check whether these carriers deliver in the regions you actively sell to.

Subscription box fulfillment: Another advantage of ShipNetwork is its subscription box fulfillment service, which is great for securing ongoing sales. Generally speaking, ShipNetwork ships the boxes out once a month or at another predefined interval and takes full responsibility for assembling and packing all the required items, ensuring they’re shipped at the right time.

Where ShipNetwork Ecommerce Fulfillment Service Falls Short

A screenshot of ShipNetwork's customized pricing with details.
ShipNetwork hasn’t published pricing information on its website. You’ll have to schedule a discovery call so that the sales team can give you a custom quote.

Vague pricing: ShipNetwork hasn’t published any pricing information on its website. You have to request a quote from the sales team, which unnecessarily prolongs the process. Case in point—you have to schedule a discovery call with the ShipNetwork team, who will then do a deep dive into your product, shipping, and handling requirements. Then they’ll put together a proposal for fulfillment services based on the information you gave.

High minimum orders: ShipNetwork mainly caters to clients that have about 4,500 orders per month. While it may consider working with smaller firms and startups with potential, the orders should not be below 250 a month. This may not be a feasible minimum for small businesses.

ShipNetwork Ecommerce Fulfillment Service Compared

While it’ll be exciting to see how ShipNetwork’s fulfillment services turn out in the future, ShipBob is currently my top pick for the best ecommerce fulfillment platform.

Final Verdict

ShipNetwork is a promising ecommerce fulfillment service that provides fast and cost-effective order fulfillment services, complete with a 100% order accuracy guarantee. A bunch of other 3PL services like returns management, subscription boxes, and freight ensures reliable 3PL services whenever you make a sale.

Posted on

Building Custom Solutions vs. Buy-and-Build Software

The Challenges of Building a FIX Protocol

The first day I was introduced to FIX was when I worked at an investment bank in London as a developer, I was told to write a feed handler to retrieve market data. Bear in mind that at this time, I knew nothing about FIX, apart from googling it for about 10 mins on the internet. With a touch of overconfidence and slight arrogance, I set to work coding a direct socket connection to the remote FIX endpoint, thinking, “How hard could it be?”

So, What Is FIX? 

Financial Information eXchange (FIX) is both a market data format and a protocol: it is used by investment banks to place orders and receive market data and has become a global language in financial trading. The format of a FIX message controls how it is encoded. All FIX messages start with 8=FIX, which denotes the start of a FIX message. They then go on to list key and value pairs. The keys are represented as numbers (known as TagNumbers) followed by a = delimiter to delimit the values. Each key=value combination is then delimited by the \u0001 character, which is sometimes visually represented as either ^ or |. The value is often written in a semi-human-readable format. I say semi-human readable because most of the time it is human-readable, but all too often, FIX will use a single character to denote a state or type of message. These characters are not always that obvious. I agree that the character B for "Buy" and S for "Sell" makes sense, but other characters are used that make no sense. For example, D denotes a "New Order Single" message, which is a message that is often used when you wish to place an order with your counterparty. 

Posted on

Virtual Meetings Starter Guide: Learn the Basics

Host productive and engaging virtual meetings with GoTo Meeting, a video conferencing software that seamlessly integrates with your existing infrastructure while offering crystal-clear audio, superior uptime, and enterprise-grade security. Try GoTo Meeting risk-free with a 14-day free trial with no credit card required. 

Most myths about remote work have been dispelled after over two years of work-from-home arrangements. Companies have found that keeping teams connected, maintaining productivity, and working without specialized equipment is easier and more workable than many first assumed. But one aspect of the office hasn’t changed despite going remote: meetings. The only difference is now those meetings are virtual, requiring video conferencing services to run.

The 8 Best Video Conferencing Services for Hosting Virtual Meetings 

Our trusty team of experts and reviewers did a terrific job researching, testing, and comparing the Best Video Conferencing Services. So whether you’re new to virtual meetings or looking for an alternative to your current software stack, below are the best tools for hosting successful virtual meetings. 

  • GoTo Meeting – Best video conferencing service for small businesses 
  • RingCentral – Best video conferencing service with VoIP business phone plans
  • ClickMeeting – Best video conferencing software for webinars 
  • Zoho Meeting – Affordable video conferencing software with basic features 
  • MicrosoftTeams – Best video conferencing software for internal communication 
  • Zoom – Best video conferencing service for stability 
  • Join.me – Annual contract video conferencing plans for small meetings 
  • Webex – Best video conferencing software for cloud collaboration 

What Are Virtual Meetings and How Do They Work? 

Virtual meetings, also called remote, online, or video meetings, are real-time sessions that happen over the internet, complete with audio and video. The concept is similar to an in-person meeting, except the meeting takes place on computer screens or similar hardware. In addition, video conferencing software or services help facilitate these online meetings.  

Thanks to the internet and supporting software and hardware, participants don’t have to be in the same room to conduct meetings. The interactions are location-independent; participants can attend the online meeting virtually anywhere with an internet connection. Some of the things you need to host and conduct a virtual meeting include: 

Microphone – Meetings are primarily based on verbal communication. So you need a microphone to express your ideas. Most modern computers come with built-in microphones. However, it’s good practice to purchase a high-quality microphone. 

Built-in microphones typically don’t meet the standard for clarity. Usually, the after-market microphone is attached to a headset, so you don’t have to use your external speakers. A good quality microphone guarantees clarity and eliminates echoing and reverberation. 

Webcam – Virtual meetings are modeled after in-person sessions. Though not compulsory, virtual meetings often include a video feed. So a webcam lets you transmit the video. 

The webcams found on most modern computers are more forgiving than built-in microphones. Therefore, you may not need to purchase an additional webcam if you’re happy with the one your computer provides. 

Up-to-date operating system – Many people forget to update their computer’s operating systems. Virtual meetings are resource-heavy, so you need the most recent system updates. Sometimes this may mean upgrading your computer if the OS is outdated. 

Video conferencing software typically publishes system requirements for using the software. So you can check these details against your hardware to ensure the software works as intended during meetings. 

Professional background – While remote meetings are location-independent, much in-person meeting etiquette applies. So you need a well-lit, organized, and minimalist space to host or attend meetings. However, draping a piece of fabric behind you or sitting in front of a blank wall may suffice. 

Most video conferencing software also provides a virtual background feature. For example, you can set up a virtual bookshelf or other backdrops to replace a less-than-ideal background. 

Software – Finally, you may think of video conferencing software as the backbone of hosting online meetings. Typically, this is a software you install on your computer or access via a URL link. Regardless, you’ll need the software to host or attend meetings. 

The software works similarly to traditional conference calls. However, the software transmits video and audio communication over internet protocols without getting too technical. This way, people on either end of the connection can communicate face-to-face and in real-time. 

Video conferencing software has many other applications besides video meetings. Other potential use cases include hosting virtual webinars, product demos, one-on-one training and support, and job interviews. Therefore, the software is a worthwhile investment with multiple potential applications. 

Different Types of Virtual Meetings 

Virtual meetings are often synonymous with video calls. However, there are various distinct types of virtual meetings. So it’s helpful to explore these options and their advantages and disadvantages. 

Teleconferencing

Teleconferencing is the most basic type of virtual meeting and is a modern adoption of the traditional conference call. The session is audio only and can facilitate small and large groups of geographically-dispersed participants.

Participants are assigned a dedicated phone number or passcode and use it to dial into a virtual meeting. The technology uses a conference bridge to connect multiple calls simultaneously. Many video conferencing software provide this feature, so you may not need a separate teleconferencing service. 

The main advantage of teleconferencing is the low technology requirements. You don’t need video equipment, screen sharing, and other high-tech features to conduct meetings. The technology is also easy to master, even for non-tech users. 

Teleconferencing systems are also cheap to purchase and operate. Typically, these require a one-off payment. Additionally, teleconferencing technology is generally cheaper than video conferencing. 

However, using teleconferencing eliminates video aids like screen sharing, PowerPoint presentations, and virtual whiteboards. These video aids help explain complex ideas. Lastly, the technology doesn’t capture nuances such as body language and other non-verbal cues, which are helpful in interpersonal communication. 

Video Conferencing  

Video conferencing is the most popular type of virtual meeting. As the name suggests, these meetings capture audio and video and are the next best thing to in-person meetings. Video conferencing is also flexible, allowing participants to join the discussion from any device, including a laptop, PC, smartphone, or tablet. 

The main advantage of video conferencing is the visual elements. Members can use diagrams, flip charts, and whiteboards to aid their presentations. There is also free video conferencing software, so you may not have to pay for a subscription, especially for a small team. 

Video conferencing is also terrific for observing visual cues like body language and facial expression. It is an excellent solution for hosting productive meetings without incurring travel costs. It’s also possible to turn off the camera if participants don’t need to see each other during the session. 

The main disadvantage of video conferencing is the technology requirements. For example, you’ll need high-quality hardware like a webcam and microphone for the best result. Additionally, the video quality relies heavily on bandwidth, so people with a poor internet connection may have difficulty attending virtual meetings. 

Video conferencing software also has a learning curve. For example, some users may need help downloading the software. They may also need to learn how to operate the software features, such as turning the microphone or camera on or off. The technology is also more prone to technical interruptions compared to teleconferencing systems. 

Web Conferencing 

Web conferencing and video conferencing are often used interchangeably. Although both technologies serve the same fundamental purpose, they work differently. While video conferencing requires installing software, web conferencing is entirely web-based. 

Therefore, you only need to visit the website with a unique link to the meeting to join a web conference. Like video conferencing, web conferencing allows you to share media assets such as presentations and documents. 

You can use web conferencing for meetings. However, the technology typically supports one speaker at a time. Therefore, it is better suited for conducting webinars, training sessions, and monthly update meetings. 

On the downside, web conferencing requires a stable internet connection, and you can only attend a meeting with internet access. 

Webinars 

A webinar is a virtual seminar usually hosted by one person or group. A webinar can also have a large number of attendees. Most video conferencing software provides webinar capabilities. 

Webinars are helpful for launch events, quarterly roundups, and partnership meetings. Typically, only the presenter shares their video feed. However, the technology also supports media sharing, including presentations or documents. 

How to Choose Video Conferencing Software 

Virtual meetings are only as productive and engaging as the supporting software. So there are important considerations when choosing video conferencing software. While there are many options on the market, not all software is created equal. 

It’s helpful to decide beforehand what you’d like the software to do besides transmitting audio and video.  Video conferencing software features vary widely from one provider to the next. So speak to your team about the features they need for productive meetings. 

Some of the must-have features for most organizations include: 

Recording – This allows you to record the meeting for future reference. It is a handy feature for long sessions where it is difficult to retain all the information. The recording feature is also helpful in case some people miss a meeting. 

GoTo Meeting call recording features
With GoTo Meeting’s call recording features, you can revisit important meetings without ever having to take notes.

Screen Sharing – It is much easier to show than to explain. Screen sharing allows the presenter to share the contents of their screen with the participants. It is a fundamental feature in most video conferencing software. 

Chat – A chat feature lets participants ask questions or comment on the meeting without interrupting the main speaker. It is a valuable feature for maintaining order and decorum during meetings. 

Background – A background feature is handy for people working from home. Not everyone has access to a dedicated home office or library. A virtual background can transform any space into a professional meeting room. 

Breakout Rooms – Breakout rooms break off from the central meeting. It’s a convenient feature for assigning small groups for discussions. They also offer a private environment for side conversations and discussions. 

File Sharing – Media such as spreadsheets, presentations, images, and documents can help support the main discussion. So consider video conferencing software with file sharing and document management capabilities. 

Cost is also a critical factor. It’s tempting to choose software with all the bells and whistles. However, extra features add to the cost of the software. Fortunately, most software providers offer steep discounts for longer subscriptions to help you save money. 

Group size is another important consideration. Think about the number of people that will regularly attend the meetings. Most software easily supports hundreds of users. Still, it is worth investigating how many users can participate in a meeting before you purchase the software. 

Finally, choose video conferencing software with excellent support. Technology is a fickle ally and prone to interruptions. Competent customer support ensures you can solve problems quickly and reduces downtime caused by technological issues. 

How to Hold Effective Virtual Meetings

Most principles of in-person meetings carry over to virtual meetings. However, virtual meetings also bring unique nuances and challenges worthy of special consideration. Here’s how to conduct effective online meetings. 

1. Develop a Clear Agenda 

The agenda helps set the pace and structure the meeting to achieve its objectives. Some of the considerations when creating a meeting agenda include: 

  • The main goals and objectives of the meeting
  • The people and teams involved in the meeting 
  • The key talking points and the time spent on each item
  • The overall duration of the meeting with provisions for beaks and Q&A sessions 
  • Each participant’s role in the meeting 
  • Relevant material, including documents, diagrams, or slides

Ensure that you distribute the agenda at least 24 hours before the event. Engaging a timekeeper or moderator to steer the meeting and ensure things stay on track is also helpful. Still, build some flexibility in the agenda to allow more organic discussions. 

Similarly, send supporting documents with an explanation in the email before the meeting. It allows the participants to review the information beforehand and prepares them for the discussion. You’ll also save time on unnecessary explanations or lengthy Q&A sessions.

2. Pay Attention to Scheduling  

It’s also important to time the meeting appropriately to ensure the participants are engaged. You can use a time-zone scheduling tool to find a perfect meeting time that works for everyone. Google Calendar is a terrific tool for this purpose.  

Conflicting time zones isn’t the only scheduling consideration. The best time for a meeting is one that fits the team’s natural work rhythm. For example, Friday afternoons signal the end of the work week and are not ideal for hosting productive meetings. 

Meetings on Monday through Thursday are the sweet spot in most cases. Also, try to hold the virtual meeting before midday.  It leaves sufficient time for follow-up actions that attendees might otherwise postpone to the next working day. You’ll also avoid the post-lunch period when people are more likely to be lethargic. 

3. Send Meeting Invitations  

Be careful about who you invite to the meeting. Running a productive meeting is challenging if some participants don’t think it is relevant. Think carefully about what each person brings to the meeting. 

For example, some team members only need an update on the critical talking points. In this case, an email summary of the meeting will suffice. It will free up the employee to focus on more important work. 

Moreover, send personalized invitations where possible. For example, the attendee’s name in the subject line or email body will likely elicit a positive response about the meeting. Also, craft a clear and concise subject line that captures the essence of the meeting. 

The invitation email should also include crucial information about the meeting. For example, include details such as the meeting date and time, the meeting’s purpose, duration, and a link to the meeting.  

Finally, ask participants to RSVP. It is an excellent way to get an approximate headcount for the meeting. Consider also including a deadline to confirm attendance so you can prepare adequately. 

4. Test Your Technology in Advance 

Next, test your technology in advance. Consider the features you’ll use during the meeting and ensure you can use them effectively. For example, check that you’re familiar with the live chat, screen sharing, breakout rooms, session recording, and whiteboards. 

GoTo Meeting bullet list for what to do before a video meeting
Among other features, GoTo Meeting allows you to test your webcam before entering a virtual meeting.

Similarly, ensure that the presenters and moderators are familiar with the platform. Also, encourage all the participants to test their technology beforehand. For example, ensure they know how to mute the microphone or set up the webcam correctly. 

5. Define Virtual Meeting Etiquette 

It’s important to set ground rules for the meeting. These rules help avoid common mistakes that can potentially interrupt or derail the discussion. Some examples of virtual meeting etiquette and ground rules include: 

  • Log in five minutes before the meeting 
  • Mute audio when not speaking 
  • Use the raise hand feature to ask for attention 
  • Dress appropriately
  • Turn off mobile notifications 
  • Read the agenda thoroughly before the meeting

You can also include these guidelines in your email invitation. You can also include details of the technology you’ll use, including instructions and troubleshooting tips. Most software already provides this information, so you don’t have to create it from scratch. 

6. Play The Perfect Host 

The meeting’s facilitator plays an essential role in the success of the meeting. So it is necessary to know what goes into running a productive meeting. Here are a few things to keep in mind when running the meeting: 

  • Schedule time for introductions, small talk, and icebreakers before the meeting starts
  • Ask for thoughts or ideas if the meeting requires participation 
  • Stick to the meeting’s agenda
  • Schedule breaks for longer meetings 
  • Dedicate time for Q&A to avoid interruptions during the central meeting
  • Make eye contact while speaking by looking directly at the camera 
  • Use non-verbal cues such as a silent nod to acknowledge the speaker’s contributions 
  • Speak clearly and directly into the microphone 
  • Smile 
  • Dress appropriately for the meeting
  • Use visual assets like whiteboards, slideshows, and screen sharing 

7. Close the Meeting with Purpose 

Virtual meetings can end abruptly with the click of a button. While convenient, ending the session immediately after completing the agenda items can be anticlimactic. So be sure to close the meeting on a high note. 

You can ask participants for questions or thoughts about the meeting. It’s also helpful to summarize the critical points of the meeting before closing. Then, finally, outline any key next steps so employees know what to do after the meeting. 

GoTo Meeting bullet list for what to do after your virtual meeting
With GoTo Meeting, you can view stats, share meeting transcriptions, and watch cloud recordings after your meeting is over.

Lastly, send the participants a post-meeting email. The email may include meeting minutes, key next steps, responsible parties, and action points. Ask the participants to look out for the post-meeting email so they don’t miss it. 

Final Thoughts About Virtual Meetings

Virtual meetings are all but mandatory in the context of dispersed teams, flexible work schedules, and hybrid teams. But, with the right video conferencing software, virtual meetings can be just as engaging and productive as in-person meetings. Plus, most software is affordable or even free for smaller teams. 

Still, virtual meetings present unique challenges worth noting. For example, online meeting etiquette and the learning curve involved with new technology can take away from the advantages of virtual meetings. Therefore, learning how to use the software and implement best practices to help you host and run effective virtual meetings is essential. 

Posted on

PBX vs. VoIP: 7 Key Differences

We recommend Nextiva as the best VoIP phone system for most businesses due to its call quality, flexibility, and reliability. Save up to 28% when you sign up today.

Every business needs a phone solution. Historically, most companies just used a traditional landline because there weren’t any alternatives. But today, organizations have more options to choose from, and most are torn between two choices—PBX and VoIP. This in-depth guide will break down the key differences between PBX and VoIP phones so you can determine which one is right for your business.

The 12 Best Phone Systems For PBX vs. VoIP

As you compare the differences between PBX and VoIP, you also need to find a business phone service that aligns with your needs. These are our top recommendations for different business types and use cases:

  • Nextiva — Best Overall VoIP Provider
  • RingCentral — Best for Hybrid and Remote Work Environments
  • Ooma — Best for Small Businesses That Want Simple Setups
  • 8×8 — Best VoIP Provider for International Calling
  • Dialpad — Best AI Functionality for VoIP Phone Systems
  • GoTo Connect — Best Feature-Packed Entry-Level VoIP Plan
  • Phone.com — Best For Businesses on a Tight Budget
  • Google Voice — Best Simple and Lightweight VoIP Phone Service
  • Aircall — Best Built-In Call Management Tools
  • CallHippo — Best VoIP Phone System for Industry-Specific Compliance
  • 11Sight — Best One-Click Audio and Video Calling for Sales and Marketing Teams
  • Zoom — Best Call Monitoring Features For Business Users

1. Call Quality and Reliability

One of the most significant differences between PBX and VoIP is how each service is delivered. This delivery method directly impacts the quality of the calls and the reliability of the phone service.

PBX (private branch exchange) systems rely on traditional PSTNs (publicly switched telephone networks) to facilitate calls. PBX phone systems are similar to traditional landlines in the sense that they use copper wiring and circuit switching. While traditional landlines are typically used to connect two parties, PBX phones allow businesses to operate a private phone network.

As a result, PBX systems are often highly reliable and provide high-quality calling. 

VoIP (voice over internet protocol) phones rely on stable internet connections to work. When there’s a strong and fast connection, the quality and reliability of the calls are excellent—especially if you’re using a top VoIP phone provider. In most cases, nobody on the call will even be able to tell that VoIP technology is being used.

With that said, if the internet goes down, VoIP phones can have problems. This won’t be an issue for most businesses. But if you’re in a rural or remote location with spotty internet, then PBX might be more reliable.

One quick way to check your connection is by running a VoIP speed test.

Nextiva speed test webpage
Use Nextiva’s speed test to check your internet connection.

This can help you determine if your current internet connection can support the VoIP calling capabilities that you’ll need on a daily basis. 

2. Costs

VoIP phone systems are significantly less expensive than PBX systems. 

While your total costs will depend on your business size, required lines, employees, and other factors, you can almost always expect to pay more for a PBX system than a VoIP service.

A business with around 20 users can expect to pay anywhere from $5,000 to $10,000 on hardware and equipment alone. Software licensing fees are an additional $2,000 to $3,000, and you’ll typically pay around $1,500 for installation. Ongoing maintenance for your PBX phone can cost around $3,000 annually. 

Business VoIP services typically start around $20 per user per month. 

Nextiva VoIP pricing for Essential, Professional, and Enterprise plans
Nextiva VoIP is an affordable alternative to PBX phone systems.

Your dollar also goes much further when you use a VoIP phone. That’s because many of the best VoIP phone providers include features that go beyond basic telephone calling. 

Depending on your provider and plan, you can access features like internet faxing, SMS messaging, video calling, and more, all included with your flat monthly rate.

For smaller businesses on a limited budget, VoIP systems are a no-brainer. They also work well for larger organizations, as you typically get better per-user rates based on volume and contract length. 

3. Installation and Setup

Cost aside, setting up a PBX network for your business can be complex. This is not something that most businesses will handle on their own, and it typically requires IT assistance and installation from your PBX provider. 

The process involves lengthy steps for KSU wall attachments, circuit cards, and connecting your private branch to a telephone network. PBX vendors provide the cables and cords that are required for the private branch, and these act as the main line for your PBX system. All of the individual phones need to be connected to the system as well. 

Deploying a PBX system for your business may include drilling some holes in your walls and running new wires through the ceilings. It’s definitely not a DIY job.

Conversely, VoIP phones are ultra-easy to set up and deploy. There’s virtually no installation process, and you likely already have many of the prerequisites handled. 

Nextiva VoIP webpage with headline that says "Set up your business phone system in minutes" and an example call flow diagram
VoIP phone systems can be deployed in minutes.

In some cases, setting up your VoIP phone system can be done on the same day. This is especially true if you don’t need any additional hardware and your calls are being made from existing laptops, smartphones, and VoIP phones. 

The only thing that may need to be installed is a piece of software for each device. Beyond that, all you need to do is get your users onboarded to the system, which is not something that requires any IT assistance. 

So for those of you who don’t have dedicated in-house IT support, a VoIP phone system will make your life much easier. 

4. Scalability and Flexibility

Since PBX systems rely on on-premises hardware and connectivity, scaling them is not easy. For example, if your company is opening a second office in a different location, you need to build a PBX infrastructure there as well.

Even if you’re adding new devices and users at an existing location, you may need to replace certain modules with something that can handle the increased capacity. 

Scaling your VoIP system is much easier. Whether you’re adding new employees to one location, opening completely new locations, or wanting to onboard remote staff, scalability is achieved with just one or two clicks. 

Nextiva user management webpage with headline that says "Add or manage users in seconds - on one screen"
You can add new users to your Nextiva plan in seconds.

You can manage all of your users, phones, lines, extensions, and features from a simple admin portal. You won’t have to send a technician out to an employee’s home if you want to add a new remote user. Everything is handled from the cloud. 

You can only go so far with a PBX. The ability to add more features is much more limited compared to a VoIP system. 

VoIP phone providers typically don’t lock you into strict contracts either. So if you want to upgrade your plan to support new features or new users, you can do so without having to jump through hoops. The only thing that might change is your monthly subscription rate.

PBX systems typically tie users to specific desk phones. An employee couldn’t take calls on the road or answer calls from home. The calls must be made from the phone associated with their extension. 

VoIP systems are highly flexible—allowing users to make and receive calls from virtually anywhere. Someone could start a call on their computer at work, then transfer it to the mobile app while they’re leaving the office, and transfer it again to a laptop when they get home. 

5. Hardware Requirements

VoIP phone systems have minimal hardware requirements. 

You really only need to have internet access and a router. Beyond that, calls can be made using existing smartphones and computers. You don’t have to purchase any actual phones to use a VoIP system.

However, you do have the option to use traditional-style phones with a VoIP subscription. You just need to make sure the phones are VoIP-enabled, so it’s best to get them directly from your VoIP provider.

Nextiva VoIP desk phone options
Nextiva has a wide range of VoIP phones to choose from.

You can also get VoIP cordless phones, conference calling phones, headsets, and more. There are even VoIP adapters that transform traditional analog phones into VoIP phones. This will help keep your costs low if you don’t want to purchase more hardware.

PBX hardware is more involved.

You need to get desk phones, cables, splitters, modems, circuits, and wall jacks. These systems also require on-site PBX servers; most businesses need backup power sources.

6. Advanced Features

PBX phones don’t really come with any advanced features. A PBX is a phone system that comes with everything you’d expect in a high-quality business phone system, but it ends there. 

VoIP systems take basic business calling to the next level. Depending on the provider and plan you select, your VoIP phone system is included with an entire business communication suite. 

Nextiva webpage highlighting its all-in-one solution for talk, text, chat, and video
Nextiva is an all-in-one solution for voice, video, and live chat.

Some examples of advanced VoIP features beyond call capabilities include:

  • Unified communications
  • Video calling and conference calling
  • Team chat
  • Helpdesk software
  • Sales CRMs
  • Screen sharing
  • File sharing
  • Call analytics and live data
  • Automated workflows
  • Customer journey management
  • Third-party software integrations

You won’t find these in a PBX solution.

7. International Calling

PBX phones typically charge high rates for international calls. But with a VoIP phone system, you can make international calls for just a few cents per minute.

These rates vary by location, but they’re often extremely flexible. This means that you won’t necessarily have to get an international calling plan that’s separate from your monthly subscription. Any international calls will just be added to your bill. 

Nextiva international calling webpage
Nextiva offers built-in international calling capabilities.

For businesses with global branches, VoIP phone systems make it possible to communicate with users on the same network at no additional cost. For example, your New York office can communicate with your London team if the calls are made directly through the same VoIP platform. 

The Similarities Between PBX and VoIP

While PBX and VoIP phone systems have several differences, the two also share some common ground. 

First and foremost, these are the two top options to consider for business phones. Both VoIP and PBX systems have options for basic local calls and domestic calling. You’ll have the ability to keep your existing phone number, add new phone numbers, and set up custom extensions and new lines for your staff. 

Both systems come with basic business phone features. This includes voicemail, call holding, call transfers, overhead paging, conference calling, and more.

It’s also worth noting that both PBX and VoIP phones are both highly secure. There’s sometimes a misconception that VoIP systems can have security problems because it uses the internet for calling. But this is a non-issue if you’re using a reputable VoIP phone service.

Nextiva security and reliability webpage
Nextiva handles security on your behalf, so you won’t have to worry about it.

For example, Nextiva offers 24/7 monitoring, call encryption, and biometric checkpoints to access their servers. The network also has HIPAA-compliant and PCI-compliant solutions, meaning businesses in every industry can rely on Nextiva for security. 

Final Thoughts About PBX vs. VoIP

PBX and VoIP phone systems are very different. PBX solutions are better for businesses in rural locations that can’t rely on internet connectivity for calls. They also work well for organizations with on-site IT teams and offices that won’t be scaling beyond a single location.

VoIP phone systems are much more cost-effective than PBX phones. They’re easy to use, highly flexible, mobile, and can be deployed anywhere. A VoIP system will be much easier for you to scale and maintain if your business has multiple offices or remote workers. 

Another standout of using a VoIP phone system is that you can often get an entire suite of communication tools with your subscription. This includes video calling capabilities, team chat, collaboration features, SMS messaging, and so much more. 

Posted on

Virtual Meetings Best Practices Starter Guide: Learn the Basics

For better or worse, it’s safe to say that virtual meetings have a special place in all of our hearts.

Think about it: Where would we all end up if we never had to ask, “can you hear me okay?” again?

Virtual meetings increase employees’ productivity, boost efficiency, and bring new meaning to collaboration. And virtual call software tools like Zoom and Microsoft Teams have empowered companies to do business on a global scale.

But virtual meetings can quickly get messy and disorganized without the proper guidelines, processes, and etiquette. That’s why it’s essential to know the best practices when having or attending virtual meetings.

How Virtual Meetings Work

Virtual meetings allow people worldwide to connect and collaborate, even when they’re miles apart.

A virtual meeting uses video conferencing technology, which connects two or more participants through a secure connection over the internet. This allows everyone in the meeting to talk to each other via audio and see each other via video.

In a virtual meeting, participants use their own computers or phones to join the call. The video conference software will require you to download an application, connect your device’s microphone and camera, and enter a specific room or URL address.

A few other features of video conferencing software include:

  • Screen Sharing: Allows everyone in the meeting to see what’s on one person’s screen. It is best for presentations, slide decks, tutorials, and employee onboarding.
  • Whiteboard: Enables users to sketch, draw, and collaborate on an online whiteboard. This feature is great for brainstorming ideas, problem-solving, and other creative tasks.
  • Chatroom: This lets you chat with one or more people in a virtual meeting through an internal messaging system. This is handy if someone needs to ask a question or discuss something privately.
  • Breakout Rooms: For private collaboration, this feature allows you to divide participants into separate rooms for private conversations.
  • Recording Capabilities: Many virtual meeting software applications let you save and share recordings of the entire meeting or specific sections. This can help you review important discussions and decisions.

Since so many different functionalities are involved, it’s essential to be aware of the best practices when having or attending virtual meetings.

1. Establish the purpose and agenda prior to the meeting

As with any meeting, virtual meetings should have a clear purpose and agenda before they start. Knowing the expected goals and content of the meeting can help participants stay focused, on-task, and organized during their call.

Before each meeting, make sure to develop a timeline that outlines the points you plan to cover. You could even send a message to the attendees beforehand in order to ensure everyone is aware of the meeting’s objective and any tasks they need to complete prior to the call.

2. Test your technology before the meeting

Regardless of what you use for video conferencing and collaboration, it’s always a good idea to give your technology an hour or two before the meeting to make sure that everything is working properly. Even if you spend most of your day in and out of meetings, a few minutes of downtime before the call can ensure a smooth and successful meeting.

A few common problems that can interrupt or compromise your meeting include:

  • Failed (or slowed) internet connection
  • Audio feedback loops
  • Incorrect settings on your microphone or camera
  • Lack of video quality
  • Unexpected software updates

Checking all the necessary components before your meeting can help you avoid any technical issues.

3. Avoid scheduling issues

Almost 47% of global workers are freelance, and many domestic companies leverage global contractors as a way of saving money. In many cases, web design, SEO, content marketing, advertising, and other areas of expertise can be outsourced.

But for American businesses, the majority of countries are located on the other side of the world. And if a company is based on the west coast (e.g., Los Angeles), international meetings can start in the evening or even in the middle of the night.

To avoid scheduling issues, it’s important to be mindful of different time zones and work with your team to set up a meeting at a mutually beneficial time for everyone.

Fortunately, multiple software solutions make this process simpler. For instance, if your team uses Google Workspace, the Calendar app allows you to quickly set up an international meeting and automatically notify everyone of any changes.

Doodle is another popular scheduling platform that can help you find a time and date for everyone involved.

4. Prioritize the privacy of your attendees

Although “Zoombombing” isn’t as big of a deal as it used to be, it’s still important to maintain the privacy of your attendees. It’s best to password-protect each meeting and disable downloads for any shared files to protect everyone’s data and prevent potential intrusions.

And if you’re hosting a virtual event, make sure all participants have agreed to be recorded or livestreamed because not everyone may be comfortable with it.

Don’t share your meeting link publicly. And if you’re using a platform like Zoom, enable the Waiting Room feature to ensure that only invited attendees can join the call.

Screenshot of a Zoom call customization screen with a red arrow pointing to the personal meeting room feature.
Customizing a personal meeting room for an upcoming Zoom conference call.

To enable these features using Zoom, simply navigate to the Personal Meeting Room option in the toolbar and click on the features you want to customize.

Screenshot of Zoom's video meeting security feature options.
Enabling the “Waiting Room” feature from inside a Zoom meeting.

You can also do this from within your meeting under the Security tab.

5. Turn off your microphone (and others’) accordingly

I think I speak for everyone when I say that background noise and distractions can be a major nuisance during virtual meetings. While this is not typically an issue for one-on-one calls, it’s important to remember that anything you say and do can be heard by everyone.

Even if you don’t think there is any noise in your room, office, or home, there may be some feedback that your computer’s microphone picks up. So make sure you are muted when you’re not actively speaking. 

If you are the meeting host, you should also proactively mute others who aren’t adding to the conversation or who may be creating unwanted background noise.

6. Look to your attendees when deciding whether to show your face or not

Some people will tell you that keeping your video camera off during calls is unprofessional, rude, or lazy. And they have a point—if you got on a call with us at Quick Sprout and only saw a square that reads “QS” in the corner, you might not think we knew too much about digital marketing.

But if you have ever sat on a video chat as the only one with your face showing, you know just how weird it can be.

There are a lot of valid reasons to keep your camera off during meetings. Not everyone has a great internet connection, for example. And some people may be too nervous to turn their cameras on.

In these cases, it’s best to mimic the behavior of your attendees and keep your camera off if they do the same. If they prefer not to show their faces, follow suit. Respect is key, and setting a precedent of respect helps to foster a more productive environment.

On larger calls, there will probably be at least one person whose camera is switched off. And if you’re running a sales presentation, you should consider leaving it on.

A good rule of thumb is to always be prepared to turn your camera on, but don’t be afraid to turn it off if the situation calls for it. You can also ask about this at the beginning of the meeting if you’re unsure what your meeting attendees would feel more comfortable with.

7. Consider your background while on camera

It is often best practice to blur or remove your background, as it can be distracting and sometimes inappropriate. Most video call platforms have a built-in feature that allows you to choose from a variety of backgrounds or upload your own background images.

You don’t have to do either of these things. But if you choose not to, you’ll want to make sure that your background is free of anything that could be distracting, unprofessional, or embarrassing.

Here are a few best practices to keep in mind when it comes to your video call background:

  • Consider the lighting in your home office or workspace. If too much light is entering the room, try closing some curtains or turning off lights for an optimal video experience.  If there is not enough light, turn on some additional lights or add a desk lamp for meetings.
  • Clean up the area behind you so that nothing is out of place. If things are lying everywhere, you will appear messy and unorganized.
  • Consider adding a virtual background to your video call if you want something more exciting than a blank wall. Zoom has plenty of fun backgrounds to choose from, and you can also upload your own images. However, don’t be deliberately distracting with your background—keep it light and professional.
  • Avoid having anything moving in the background (e.g., pets, people moving back and forth across the screen). You’ll want to keep your attendees focused on you. Plus, it comes off as unprofessional.

8. Respect others’ time

83% of people spend up to one-third of their workweek in meetings—a sizable chunk of time that could be spent on more productive tasks.

Whether you are the one hosting the meeting or attending it, respect others’ time and get right to the point. Don’t waste everyone’s time by taking too long to finish your thought or going off-topic.

Our earlier point about setting an agenda before the call is important here. Share that agenda with your attendees ahead of time, so they know what to expect and can be prepared for the meeting.

As a manager or meeting host, it’s also a good idea to consider whether your virtual meeting needs to be a meeting.

Could it be an email? What about a quick call? Asking yourself this before scheduling a meeting helps to ensure that everyone’s time is used efficiently.

9. Encourage two-way communication

As a virtual meeting host, it’s easy to think that you need to do all the talking. But keeping your meeting attendees engaged is the best way to ensure their retention of the material.

Encourage questions, comments, and suggestions throughout the meeting. Ask your attendees to share their thoughts on a specific topic or ask them for feedback on a project you’re working on.

This helps create an open dialogue and encourages everyone to participate actively in the conversation. Plus, it allows everyone to feel heard and respected—which is important in any type of meeting.

10. Follow up with everyone after the call

After your virtual meeting is over, it’s important to follow up with everyone who attended. Send out notes and reminders of what was discussed as well as any tasks that need to be completed.

This helps ensure that everyone is on the same page and that all tasks and objectives are completed in a timely manner.

It also gives you an opportunity to check in with your attendees and make sure that everyone retained the information presented.

When following up, there are a few things you should always include:

  • Meeting recap
  • Action items
  • Timeframe for completion
  • A “thank you” for attending

Depending on the context of the meeting, you may also include sales updates, progress reports, or any other relevant information.

Final Thoughts About Virtual Meeting Best Practices

Virtual meetings aren’t just a COVID-19 trend that will go away. They are here to stay, and etiquette is essential when attending or hosting one.

Depending on your company, its culture, and how its members like to do business, incorporating these tips will look different in practice. The best way to ensure your employees hit the ground running is with an employee onboarding program that covers virtual meeting etiquette. Our employee onboarding checklist can help you get started.

With the right preparation and etiquette, you can host or attend a productive virtual meeting that engages everyone involved—no matter where they are located.

Posted on

25 Best Sales Page WordPress Themes for Marketers

Are you looking for the best sales page WordPress themes for your marketing campaign?

Sales page or landing page WordPress themes help marketers convert visitors into paying customers. Choosing the right theme means you can highlight specific brands or products to avoid distractions and increase sales.

In this article, we will share some of the best sales page WordPress themes for marketers.

Best Sales Page WordPress Themes for Marketers

Creating a Sales Page Website with WordPress

A good sales page prominently displays call-to-action buttons, along with a breakdown of your product or service’s features and unique selling points.

To create a sales page website with WordPress, you will need a domain name and a web hosting account.

A domain name is your website’s address on the internet, like google.com or wpbeginner.com. Web hosting is the storage space for your website files. Your web host makes your site available all across the world, 24/7.

We recommend using Bluehost. It’s one of the largest hosting companies in the world and an official WordPress hosting partner.

Bluehost WordPress Hosting offer for WPBeginner Users

For WPBeginner users, Bluehost offers a free domain name, a free SSL certificate, and a BIG discount on web hosting.

→ Click Here to Claim This Exclusive Bluehost Offer ←

After signing up for the hosting, just check out our complete guide on how to make a WordPress website. It will take you step by step through the process of creating your site.

Let’s take a look at some of the best sales page WordPress themes for marketers.

1. Astra

Astra WordPress sales theme

Astra is one of the most popular WordPress themes on the market. It lets you create custom landing page designs with over 180+ starter templates.

With fast-loading templates, Astra can be the perfect choice for designing sales pages. It also integrates with WooCommerce to create a full eCommerce website. This lets you collect online payments using Payhip, Stripe, or other payment gateways.

Astra also works seamlessly with tools like OptinMonster if you also plan to use your website for lead generation. This lets you create opt-in popups and forms for your email list and can dramatically boost your conversion rates.

2. SeedProd

SeedProd website builder

SeedProd is the best WordPress theme and website builder. It’s also the most popular landing page builder on the market, with ready-made sales page templates for marketers and agencies.

With SeedProd, you can create a fully custom website and then add a sales landing page. And you can do everything with a beginner-friendly drag-and-drop builder.

SeedProd seamlessly integrates with WooCommerce and its extensions. This helps set up the best sales page with online payment options and other features without writing code or hiring a professional developer.

3. Divi

Divi WordPress sales theme

Divi is a classic WordPress all-purpose theme and an ultimate page builder plugin. It comes with hundreds of layout templates. If you want to create a sales page from scratch, then it provides a visual editor to add elements, text, and images.

Divi is highly customizable and lets you change colors, fonts, and backgrounds without knowing any CSS code. You have the full range of Google fonts to choose from, plus elements like dividers and call-to-action buttons to help you build the perfect sales page on your website.

Divi is also designed for good WordPress SEO, helping you get search engine traffic to your sales page.

4. OceanWP

OceanWP WordPress sales theme

OceanWP is a free WordPress theme designed beautifully to create marketing and sales pages. It offers free and premium ready-made demo templates to set up websites in just a few clicks.

With powerful extensions, you can quickly add fullscreen backgrounds, social media icons, a registration form, sticky navigation, and more. OceanWP supports RTL languages, so you can also create a multilingual website.

5. Hestia Pro

Hestia Pro

Hestia Pro is a fantastic WordPress multipurpose theme for any type of website. It has one-page and multi-page templates for small businesses to provide a great user experience.

It has an attractive layout design that supports video embeds in the background and other widgetized areas. You can use the WordPress live customizer to make changes on the pages easily.

6. Ultra

Ultra WordPress sales theme

Ultra is a powerful and flexible WordPress theme with a built-in visual drag-and-drop page builder. It also includes several ready-made templates for different niches like agencies, spas, apps, businesses, and so on.

With its easy and powerful page builder, the Ultra theme is ideal for creating beautiful sales pages in just a few minutes. It also comes with portfolios, sliders, image galleries, custom widgets, and more.

7. Sydney Pro

Sydney

Sydney Pro is a stunning sales page WordPress theme that you can easily use on multi-page sites. It’s designed for small businesses, app landing pages, products, or photography websites.

It features a large fullscreen background image on the homepage with a navigation menu and a custom logo at the top. It also comes with homepage layouts, creative header styles, and portfolio templates.

8. Breakthrough Pro

Breakthrough Pro

Breakthrough Pro is built on top of the Genesis theme framework and designed to be a single or multiple-page theme. It has a beautiful parallax scrolling effect and a large fullscreen header image with a call-to-action button.

The homepage layout is fully widgetized, so you can drag and drop content blocks to set up your sales page. Other features include full WooCommerce support, custom widgets, page templates, and crisp typography.

StudioPress is now part of WP Engine, the most popular managed WordPress hosting company. You can get this theme and all 35+ other StudioPress themes when you sign up for WP Engine hosting to build your website.

Bonus: WPBeginner users also get an additional 20% OFF. Get started with WP Engine today!

9. Indigo

Indigo

Indigo is an elegant WordPress theme that lets you create beautiful sales page layouts. It comes with drag-and-drop modules that let you design unique pages to match your needs.

To make it even easier, Indigo includes demo content and ready-made websites that you can use as a starting point for your projects. It also offers multiple templates, photo galleries, header styles, and unlimited sidebars.

10. OneEngine

OneEngine

OneEngine is a single-page WordPress theme with a bold and creative design. It has a bright fullscreen header on the top, followed by a navigation menu and then content widgets.

It includes services, team members, a portfolio, and an about section. With the OneEngine theme, it’s easy to create a custom sales page for any product or service.

11. Angle

Angle

Angle is an excellent WordPress multipurpose theme with flexible options to create your sales page using drag and drop.

It includes parallax scrolling, image sliders, and a built-in portfolio section. It is easy to set up and customize with multiple homepage layouts and landing page templates.

12. Struct

Struct

Struct is designed as a sales page theme for software, apps, and products. It features a clean and modern layout with large header background and prominent call-to-action buttons.

Struct has a fully widgetized homepage layout with several custom widgets to add content and social media features. It also includes services, projects, FAQs, testimonials, and slideshows out of the box.

13. Digital Download

Digital Download

Digital Download is a premium-like free sales page WordPress theme. As you would expect from its name, you can use this theme to sell digital downloads like PDF documents, tutorials, ebooks, etc.

It integrates with the Easy Digital Downloads plugin to set up an online marketplace in just a few clicks. The theme is fully customizable for colors, font, and layout design.

14. Balance

Balance

Balance is a creative WordPress eCommerce sales page theme for online businesses. It includes several user engagement features like a call-to-action button, a subscription form, a contact form, and more.

The theme attractively displays your products on the homepage and other landing pages. It also supports popular page builder plugins that lets you create custom sales page layouts.

15. Landing

Landing is a WordPress sales page theme that comes with a pre-designed layout. It has a drag and drop page builder to edit existing landing pages and create new ones from scratch.

You get multiple header types, so you can design countless sales pages with different styles and layouts. Plus, it includes a portfolio, testimonials, events, and social media integration.

16. Silk

Silk

Silk is a WordPress sales page theme for beauty bloggers, cosmetic businesses, fashion agencies, and more. It has a beautifully designed homepage with a layered layout.

With Silk, you get a built-in section to add your Instagram shoppable feed to engage users and boost sales. Plus, it fully supports WooCommerce, so you can easily start an online store on your site.

17. Convert

Convert Pro Sales theme

Convert is a professional WordPress sales page theme. It has an eye-catching layout with over 30 customizer options for the header section and gives you complete control of the website.

It has multiple global sections that work smoothly with your favorite page builders like Elementor or Visual Composer to build fully custom layouts. You also get built-in templates for one-column and multi-column pages.

18. The Launcher

The Launcher

The Launcher is a free landing page theme for your upcoming product launch. It’s ideal for a product landing page and can also be used as a regular sales page for your products or services.

The Launcher comes with easy customization options, call-to-action buttons, a sticky navigation menu, a clients section, and a pricing table. Plus, it’s fully responsive so that your website will look great on mobile devices.

19. Altitude Pro

Altitude Pro

Altitude Pro is a WordPress business theme built for sales pages. It comes with a beautiful fullscreen header image and a call-to-action button. If you’re an author, it could make a good book landing page theme for selling ebooks.

Inside, you will find a spacious layout that offers a great user experience. Atmosphere Pro has large featured images and crisp typography. Plus, the theme is optimized for speed and performance.

20. Beauty Studio

Beauty Studio

Beauty Studio is a free WordPress sales page theme for salons, spas, and beauty products. It has a full-width header with dark colors that create a powerful first impression on your users.

Other features include call-to-action buttons, custom sidebar areas, social media integration, an image slider, and more. You also get a featured section to display your top products.

21. Float

Float

Float is a beautiful WordPress theme optimized for sales and conversion. It ships with a built-in page builder that lets you create or modify page layouts. It includes eye-catching animations to make your sales page more attractive.

It offers parallax scrolling, social media integration, custom backgrounds, unlimited colors, custom widgets, and more.

22. Screenr

Screenr

Screenr is a free one-page WordPress business theme. The homepage has a fullscreen header image, followed by widgetized sections to add your content.

It includes custom widgets, custom page templates, and parallax background effects. It’s easy to change different options about your site using the live WordPress customizer.

23. Monochrome Pro

Monochrome Pro

Monochrome Pro is a modern WordPress black-and-white theme for apps, digital media, SAAS, and product websites. It features multiple widgetized areas, a large header image, and custom widgets to build your sales page in a few clicks.

It comes with a theme options panel for easy customization. You also get several layout choices, color schemes, and a fully customizable header area.

Monochrome Pro uses a responsive design, so it looks great on all devices and screen sizes. It’s a StudioPress theme, so you can get a great deal on it by signing up for WP Engine’s hosting.

24. Modules

Modules

Modules is a well-crafted WordPress theme perfect for creating any kind of sales page. It comes with several ready-to-use elements that you can drag and drop to build custom layouts.

It offers demo websites to set up your sales page quickly. Plus, you get several custom widgets, unlimited sidebars, header styles, video background support, and Google Fonts support.

The Modules theme is also coded with WordPress best practices in mind. This means it’s fully compatible with all popular WordPress plugins to help you build the best landing page.

25. Solopreneur

Solopreneur

Solopreneur is a premium WordPress theme to create landing pages that convert and help maximize your revenue. It has a minimalist layout design with a logo, navigation menu, and social icons.

It comes with a widgetized sidebar to add recent posts, a search bar, a comments section, and a newsletter signup form for email marketing. The theme is fully responsive and looks great on all screen sizes and devices.

We hope this article helped you find the best sales page WordPress themes for your projects. You may also want to check out our guides to the best business phone services and how to make a high converting sales funnel in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 25 Best Sales Page WordPress Themes for Marketers first appeared on WPBeginner.

Posted on

VoIP Starter Guide: Learn the Basics

After several weeks of in-depth research, we found Nextiva to be the best VoIP provider because of its high performance and quality standards. Get a free trial to experience the platform today.

If you’ve ever used a service like Zoom or Google Voice, you’ve already experienced the convenience and cost-saving benefits of Voice over Internet Protocol (VoIP). In this article, we’ll explore what VoIP is and how it works and discuss key VoIP features that make it an extraordinary telephone service.

If you‘re a business owner looking to cut costs or simply looking for an alternative to traditional phone service, read on to get a comprehensive understanding of VoIP and its potential advantages for your business.

The Best 12 VoIP Phone Services for VoIP Calling

To experience the benefits of VoIP, you have to choose a reliable phone service provider. The good news is we‘ve already reviewed over 25 brands to shortlist the best VoIP phone services that are worthy of your time and money.

  • Nextiva — Best Overall VoIP Provider
  • RingCentral — Best for Hybrid and Remote Work Environments
  • Ooma — Best for Small Businesses That Want Simple Setups
  • 8×8 — Best VoIP Provider for International Calling
  • Dialpad — Best AI Functionality for VoIP Phone Systems
  • GoTo Connect — Best Feature-Packed Entry-Level VoIP Plan
  • Phone.com — Best For Businesses on a Tight Budget
  • Google Voice — Best Simple and Lightweight VoIP Phone Service
  • Aircall — Best Built-In Call Management Tools
  • CallHippo — Best VoIP Phone System for Industry-Specific Compliance
  • 11Sight — Best One-Click Audio and Video Calling for Sales and Marketing Teams
  • Zoom — Best Call Monitoring Features For Business Users

What is VoIP?

Voice over Internet Protocol, or VoIP, lets you make phone calls using a broadband internet connection instead of a regular phone line. It’s an advanced technology that converts your voice into a digital signal and then transmits it over the internet instead of traditional phone lines. It can be on-premise or hosted in the cloud by a VoIP provider.

One of the (many) reasons VoIP has become increasingly popular in recent years is it offers several advantages over traditional phone service. 

For example, it’s cheaper (at times, even free!), especially for making long-distance or international calls. It also offers a range of features, such as the ability to forward calls to multiple devices and conduct conference calls with multiple participants, which isn’t available with traditional phone service. 

It’s also incredibly flexible, where you can use a VoIP app on your computer or smartphone or a VoIP adapter to connect your regular phone to the internet.

How Does VoIP Work?

Here’s a quick rundown of how a VoIP call works:

  1. Your call is passed from your device to a router.
  2. The router passes your call over the internet, reaching a VoIP phone service server.
  3. Your call is then transmitted via local internet to the other end of the receiver’s router.
  4. Your call connects to the receiver’s IP device. 

As long as you have a high-speed internet connection (a router and modem), you’re ready to use VoIP.

Nextiva infographic explaining how VoIP works
Nextiva offers an easy-to-use VoIP system that can be managed from a single portal.

Generally speaking, a VoIP configuration involves a desk phone and a session initiation protocol (SIP) server, which is also your VoIP service provider. 

As VoIP runs over the internet, your data is stored in the cloud. You can manage the VoIP system through an online dashboard. You can adjust contacts, forward calls, and add new phone numbers directly on the dashboard.

Overall, VoIP is a convenient and simple way to make phone calls using the internet. You can communicate with anyone, anywhere in the world—provided both parties have a stable internet connection and a VoIP service-compatible device.

What are the Advantages of VoIP? 

The following are a few reasons why you should choose a VoIP service over traditional phone lines: 

Value for Money

Most VoIP phone providers offer unlimited missed calls for free. While international calls are chargeable, it’s still quite cheap. 

Moreover, most VoIP services are cloud-based, which means they don’t require hardware. This saves you money on repairs and maintenance, which you likely pay to your landline phone provider.

Greater Flexibility

VoIP eliminates the need to be at a specific place to make or receive phone calls. 

Instead of being in an office, on-premise, or sitting by your desk, you can take calls from anywhere using the app on your device. This is a big advantage for remote or hybrid teams or f you travel frequently.

List of benefits of using Nextiva's VoIP phone system
Companies like Nextiva offer advanced features with their VoIP phone systems.

Improved Scalability

With VoIP, you can grow easily and cost-effectively, whether you’re opening a new office in a new city or hiring more staff.

Unlike a traditional phone service that typically involves spending more money on expensive hardware to get a dedicated line, you can add team members with just a few clicks inside your VoIP service‘s account dashboard. 

The fact that VoIP works on all smartphones means you don’t have to spend more on additional equipment costs while freeing up disk space.

Improved Privacy 

VoIP allows you to add a second line to your cell phone, helping you avoid sharing your personal number with strangers.

Small business owners wanting to protect their privacy can set up a VoIP line for their customers in minutes. This is a great security feature keeping in mind the recent rise of phone hacking.

What are the Disadvantages of VoIP?

Next, let’s review the disadvantages of VoIP:

Lack of Offline Functionality

This is the obvious disadvantage of VoIP.

If you don’t have reliable internet, your clients and team members cannot reach you through your business number. But the good news is VoIP systems will directly send the caller to voicemail if service is unavailable.  

In addition to a good internet connection, you also need a continuous power supply. Otherwise, you’ll have to wait until power is restored or invest in a backup power supply.

If you receive VoIP calls through Wi-Fi, you may also have to step out of the office, depending on the provider, and switch to your data plan to talk. 

Potential Connection Issues

As mentioned, VoIP sends small packets of data across the internet and reassembles those packets at the recipient’s IP address. 

This creates three potential issues:

  • Packet loss: occurs when data packets fail to reach their destination, resulting in dropped calls. 
  • Jitter: when packets reach the destination but arrive in the wrong order, resulting in unintelligible calls. 
  • Latency: the lag in time between when you speak and when the person on the other line hears what you say.

No Built-in Emergency Services

The good thing about non-fixed VoIP phones is they aren’t tied to a physical location. But this also means there’s no way for emergency services like 911 to trace your location. 

Suppose you have a physical address linked to your VoIP account. When you’re on the go, emergency workers may be dispatched to the wrong location.

The 11 Key VoIP Features that Help Boost Productivity 

VoIP’s advanced feature set is one of the main reasons it’s currently the most popular phone system in use. Here are some of its best features in detail to help you understand how your business can benefit from this technology:

  1. Interactive Voice Response (IVR): This feature uses pre-recorded voice prompts and speech recognition to allow customers to interact via a dial pad and direct their calls to the proper departments or individual agents. In other words, it automates business processes that either eliminate the need for your callers to speak to a live agent or drastically cut down call times.
  2. Call forwarding: This feature lets you easily forward calls to another number or device when you’re unable to answer a call or are away from your desk.
  3. Virtual receptionist: Certain VoIP services offer a virtual receptionist feature for small businesses that don’t have a dedicated receptionist. This means you can set up an automated greeting and menu system for incoming calls. 
  4. Call blocking: This feature allows you to block unwanted calls from specific numbers.
  5. Conference calls: Thanks to this feature, you can conduct conference calls with multiple participants at once. This facilitates collaboration with remote coworkers or clients.
  6. Integration with other tools: VoIP services are also incredibly flexible, meaning you can integrate the tech with other business tools, such as customer relationship management (CRM) software and project management software, to streamline communication and improve overall productivity.
  7. Voicemail: Voicemail allows you to receive and listen to messages when you cannot answer a call.
  8. Call waiting: This feature will notify you of all incoming calls if you or your team members are already on the phone, ensuring you don’t miss out on important calls.
  9. Call transfer: With VoIP, you can transfer calls to other extensions or numbers to ensure your caller is talking to a suitable person or department for their query.
  10. Call holding: The call hold feature allows you to temporarily put a call on hold and return to it later. 
  11. Auto-dialers: This feature simplifies reaching out to potential customers from a list of leads and extends the duration of calls. It eliminates the need for agents to manually dial phone numbers, allowing them to connect to calls only when a prospect is available to speak. 

What to Look for in a VoIP Provider?

Now that you know the key advantages of VoIP for your business, let’s quickly review how we at Quick Sprout identified the best VoIP providers.

The following are our core criteria for a good VoIP phone service:

  • User-friendly
  • Stress-free administration
  • Service quality and reliability
  • Mobile access
  • Simple call management features
  • Number porting options
  • International call capabilities
  • Reasonable pricing
  • Excellent customer service

While your individual use case may differ, ensure your shortlisted phone service provider has the above functionalities.

Final Thoughts About VoIP

Switching to VoIP is a no-brainer if you want a cost-effective and user-friendly option to make phone calls without being confined to a specific area. While there are a few drawbacks, VoIP is still a reliable technology that’s revolutionizing how we communicate compared to the traditional landline.

Once you optimize your VoIP network, you can stay connected and streamline customer interactions to enhance your workflows and improve productivity.

Posted on

Optimizing The Image Element LCP

Largest Contentful Paint (or LCP) is one of three metrics of the Core Web Vitals. These metrics are used by Google to evaluate the quality of user experience. LCP measures the time it takes for the browser to load the main content in the viewport.

Since recently becoming a ranking factor, this major web performance KPI is still a new concept for many web developers. It becomes especially tricky to optimize when the LCP element is an image.

To address this problem, I’ll provide an overview of the best practices for the integration and optimization of an LCP image. I’ll cover the following:

  • How to improve the LCP Resource load time subpart with the help of the <img> tag and a focus on proper LCP image sizing.
  • Some explanations on the browsers’ behavior for this <img> tag and its attributes, so you can really understand and integrate your LCP image correctly.
  • How to improve LCP Resource load delay subpart.

All the explanations will be illustrated by an example that we will iterate on. The images used in the article’s Codepen demonstrations will be integrated with TwicPics to save time in their creation and speed up the optimization of the LCP metric.

Note: The other LCP subparts are “Time to first Byte” and “Element render delay,” which will not be covered here. Read this “Optimize Largest Contentful Paint” article by Philip Walton and Barry Pollard to learn more about the four LCP subparts and their relation to each other.
If you want to find out how to identify the LCP element on your web pages, check out this guide by Laurent Cazanove.

Improve LCP Resource Load Time With The Help Of The <img> Tag

The goal here is to decrease the loading time of your LCP image as much as possible without compromising its visual quality. To succeed in this operation, one of the key points is to let the browser choose the best-suited version of the image.

Instead of declaring a single image file via the src attribute — whose dimensions would be identical for all users across any devices — we need to let the browser choose the image file best suited to each context. This approach allows images with smaller dimensions to be downloaded for users on smaller devices. This way, the image loads faster, and your website will get a better LCP score.

To do this, we need to give the browser the information it needs using the <img> tag and its srcset and sizes attributes:

  • The srcset attribute points the browser to a list of image files, with a description of their intrinsic width.
  • The sizes attribute tells the browser the intended display width of the image. It can be combined with CSS media queries to select the appropriate image for the width of the screen.

Note: The <picture> tag could be used instead of <img> to allow the browser to load different images depending on device characteristics, such as the width of the viewport or image format compatibility. For simplicity, we will only use the <img> tag in our examples.

The srcset Attribute Of The <img> Tag

The srcset attribute of the <img> tag indicates a list of image files and their intrinsic width. The browser uses this list to choose the image that it thinks is best suited to the users’ context.

This makes the srcset attribute the first step towards optimizing your LCP image.

<img srcset="" src="" alt="" />

To declare this list of images, it is recommended to follow a mobile-first approach. That means first declaring the smallest image as the default option with the src attribute and then declaring it again within the srcset attribute, followed by the larger dimension variants.

The intrinsic width of each image, expressed in pixels, should also be indicated using the unit w (w for "width"):

<img
  src="image-300.png"
  srcset="
    image-300.png 300w,
    image-900.png 900w,
    image-1800.png 1800w" 
  alt="Image description"
/>

Our example above defines three images (image-300.png, image-900.png, and image-1800.png) separated by a comma, with respective intrinsic widths of 300, 900, and 1800 pixels. To respect the mobile-first approach, image-300.png is the default image here, defined in the src and srcset attributes.

Note: When using the srcset attribute, it is important to keep the src attribute, so the browser knows which is the default image and to ensure that it is displayed on browsers that do not support the srcset attribute.

Note: It is also possible to use the srcset attribute by declaring the Device Pixel Ratio (DPR) of images rather than their intrinsic width; however, this approach will not be discussed here.

Knowing the user’s context, the browser can now choose the image to load from the list declared in the srcset attribute.

However, in order to avoid unexpected results, we need to understand how the browser selects the best-suited image:

  • Within the srcset attribute, the browser always chooses the image according to the viewport size; it ignores the image display dimensions. Consequently, your CSS styles and media queries have no impact on its choice. You will also have to keep in mind the landscape orientation of mobiles and tablets when defining the list of images.
  • By default (without the size attribute being specified), the browser chooses the image, assuming it is intended to occupy 100% of the viewport width.
  • As the browser knows the resolution of the devices, it also adjusts for the Device Pixel Ratio (DPR) in its calculations. Therefore, to optimize the LCP image, it will also be necessary to define a variant for each DPR.

Based on these behaviors, the default formula applied by the browser to choose the image according to the viewport width is:

viewportWidth x 100% x DPR

Note: When no image in the list matches the calculation, the browser will choose the closest match. In case of a tie, the browser selects the larger image.

Let’s illustrate the browser’s behavior with an example using our previous code: 

<img
  src="image-300.png" 
  srcset="
    image-300.png 300w,
    image-900.png 900w,
    image-1800.png 1800w"
  alt="Image description"
/>

👉 See live: Codepen demo 1.

Note: In your browser development tools, open the Network > Img tabs to see the image chosen by the browser according to each viewport and DPR.

The image in this demo is displayed at a fixed width of 280px on all devices. But on a 900px wide screen with DPR 1, the browser will search the srcset attribute image list for an image that is:

900px (viewport width) x 100% (viewport width occupied by the image by default) x 1 (DPR)

In this case, the browser is looking for an image 900px wide.

In our example, while the display width of the image is 280px, the image with the intrinsic width of 900px will be loaded anyway.

We can see from this example that the images declared within our srcset attribute are not adapted to the display width of 280px on all devices.

While the browser applies the formula viewportWidth x 100% x DPR to pick the image to load, we can use a simpler formula to generate the different images declared in the srcset attribute:

imageRenderedSize x DPR

Taking into account DPRs 1, 2, and 3 on our first demo, we would need to create and define the following three images:

  • DPR 1: 280 x 1 => an image 280 pixels wide;
  • DPR 2: 280 x 2 => an image 560 pixels wide;
  • DPR 3: 280 x 3 => an image 840 pixels wide.

And finally, update our code : 

<img
  src="image-280.png" 
srcset="
    image-280.png 280w,
    image-560.png 560w,
    image-840.png 840w"
  alt="Image description"
/>

👉 See live: Codepen demo 2.

Still, the updated code is not fully optimized for all devices yet.

In fact, for a laptop device with a viewport of 1024px and DPR 2, the optimal image should be an intrinsic width of 560px (imageRenderedSize x DPR= 280 x 2= 560). But with this code, the browser will want to load an image of 1024 x 100% x 2, i.e., an image of 2048px, which does not exist in the srcset attribute.

Let’s see how the sizes attribute can help us solve this issue.

The sizes Attribute Of The <img> Tag

The sizes attribute gives developers additional control over the browser’s behavior, preventing the browser from assuming images occupy 100% of the viewport. This helps to ensure the optimal image will be loaded and, consequently, optimize your LCP metric.

<img srcset="" sizes="" src="" alt="" />

Note: The sizes attribute is therefore not necessary when the image actually occupies 100% of the viewport.

To assign the value of the sizes attribute, we can use and combine the following approaches:

  • Define the image width as a percentage of the viewport width, e.g., sizes="50vw", when the image is responsive (for example, when the CSS width property is defined as a percentage).
  • Define the width of the image in pixels, e.g., sizes="500px", when it has a fixed display width regardless of the users’ devices.
  • Use one or more media queries to allow the browser to make the best choice of an image according to different viewports, e.g., sizes="(min-width: 1024px) 800px, (min-width: 768px) 80vw, 100vw" (with 100vw being the default when no media query is applied).

Let’s update our code example:

<img
  src="image-280.png" 
  srcset="
    image-280.png 280w,
    image-480.png 480w,
    image-560.png 560w,
    image-840.png 840w,
    image-960.png 960w,
    image-1440.png 1440w"
  sizes="(min-width: 768px) 480px, 87.5vw" 
  alt="Image description"
/>

Note: To know the width of the viewport occupied by the image in percentage, apply the calculation formula (imageRenderedSize / viewportWidth) x 100, e.g., (280 / 320) x 100 = 87.5% of the viewport width (87.5vw).

👉 See live: Codepen demo 3.

Now with the source code of our third demo, and regardless of the DPR, the browser can load the perfect image:

  1. For a display width of 280px for a viewport of 320px (87.5% of the viewport).
  2. And for a display width of 480px on all devices with a viewport of at least 768px.

At this stage, if the integration of the LCP image has been correctly carried out thanks to the <img> tag and its srcset and sizes attributes, the optimization of LCP Resource load time should be optimal.

Note: We’ve mainly focused here on properly sizing the LCP image according to the users’ device. For the LCP score and its “Resource load time” subpart to be really optimal, you may also consider compressing your images using modern image formats, setting far-future cache expiry headers, or even using a CDN to reduce network distance.

Note: Even if your LCP image is well-optimized and well-integrated within the <img> tag, keep in mind that this would not be sufficient if your page contains render-blocking resources such as JavaScript files. Refer to this talk by Philip Walton to see how you can eliminate unnecessary element render delay.

Now let’s see how it is possible to further optimize the LCP score by reducing its loading time.

Improve LCP Resource Load Delay Subpart

In this section, we are going to complete the code example used earlier to see how to load the LCP image as soon as possible.

Don’t Lazy-load The LCP Image Element

When users browse the internet to visit a website, the LCP image’s loading is often delayed by the lazy loading technique, whether applied by native lazy loading or a JavaScript library. But it’s important to note that this loading delay is included in the calculation of the LCP time.

For instance, with a lazy-loading JavaScript library, the script must first be loaded in order to load the final image. This additional step contributes to a significant delay in loading the LCP resource.

In other words, lazy loading an LCP image penalizes the LCP score of the web page.

Similarly, progressive loading or Low-Quality Image Placeholder (or LQIP) is not considered for LCP by Google at the time of this writing. However, discussions are ongoing regarding LQIP, so the situation may change in the future.

Use Priority Hints

We have just seen that the LCP image must not be lazy-loaded. But how can we prioritize its loading?

To manage the resources of a page, the browser natively applies a loading order according to a priority defined, among other parameters, by the type of the resource.

Images have a lower priority than render-blocking resources. In addition to meaning the resource is fetched with a lower priority, it also means the fetch is actually delayed, as browsers deliberately delay “low” resources initially so that they can concentrate on more critical, often render-blocking, resources.

This means you need to change the browser’s default load order and its behavior towards hero images so that the LCP image is not delayed and can be loaded as soon as the HTML document is received.

It is the fetchpriority="high" attribute that allows us to modify this loading priority. 

<img fetchpriority="high" src="" alt="">

Let’s update our code example. Simply add the attribute to the <img> tag, and the browser will automatically determine the right version of the image for prioritizing based on the sources declared in the srcset attribute:

<img fetchpriority="high"
  src="image-280.png"
  srcset="
    image-280.png 280w,
    image-480.png 480w,
    image-560.png 560w,
    image-840.png 840w,
    image-960.png 960w,
    image-1440.png 1440w"
  sizes="(min-width: 768px) 480px, 87.5vw"
  alt="Image description"
/>

👉 See the final demo.

Note: The fetchpriority attribute also works on the <img> tag of the <picture> element. For now, it’s mainly compatible with Chromium but should be supported by Firefox in early 2023. However, note that you can still use the fetchpriority attribute without any downsides: the attribute will be simply ignored by browsers that do not support it.

As shown in our demo, the <img> tag and its src and srcset attributes are present in the initial HTML source code. This means there is no need to preload the LCP resource here, as the browser’s preload scanner can discover it.

Note: The preloading of responsive images is not supported by all browsers, as is the case for Safari: make sure not to use the href attribute on the <link> element so that non-supporting browsers don’t request a useless image. Read this article to learn more about this topic and see when you might need to preload your LCP resource.

In this last demo, not only can the browser now know the optimal image required for devices with a viewport of 320px and for devices with a viewport of at least 768px, but it can also prioritize its loading compared to other resources. As developers, all the points illustrated in this article should therefore help you improve the LCP score of your website.

Conclusion

In conclusion, here is a summary of the steps required to optimize the LCP image:

  1. Once the page template for your website has been defined, create and store all the images needed for each device and each DPR based on the imageRenderedSize x DPR formula. To simplify this step, you can use the TwicPics API to generate multiple versions at different dimensions from the high-quality original image.
  2. Use the srcset attribute of the <img> tag to include the list of images defined in step 1, following a mobile-first approach (remembering to put the default image within the src attribute).
  3. Using the sizes attribute of the <img> tag, combined with the media queries as needed, tell the browser the display width the image would occupy according to the different device contexts:
    • If the image is responsive, define its width as a percentage of the viewport width using the formula (imageRenderedSize / viewportWidth) x 100.
    • If the image is fixed for a range of viewport widths, simply define its width in pixels.
  4. To further improve your LCP score, use priority hints with the attribute fetchpriority="high" to prioritize the loading of the LCP image. And remember not to lazy load your LCP image resource!

Further Reading on SmashingMag