Archive for the ‘Others’ Category

Shadow Roots and Inheritance

September 16th, 2021 No comments

There is a helluva gotcha with styling a

element, as documented here by Kitty Guiraudel. It’s obscure enough that you might never run into it, but if you do, I could see it being very confusing (it would confuse me, at least).

Perhaps you’re aware of the shadow DOM? It’s talked about a lot in terms of web components and comes up when thinking in terms of and . But

has a shadow DOM too:

  #shadow-root (user-agent)
  <slot name="user-agent-custom-assign-slot" id="details-summary">
    <!-- <summary> reveal -->
  <slot name="user-agent-default-slot" id="details-content">
    <!-- <p> reveal -->

  <summary>System Requirements</summary>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.

As Amelia explains, the 

 is inserted in the first shadow root slot, while the rest of the content (called “light DOM”, or the 

 tag in our case) is inserted in the second slot.

The thing is, none of these slots or the shadow root are matched by the universal selector *, which only matches elements from the light DOM. 

So the is kind of “in the way” there. That

is actually a child of the , in the end. It’s extra weird, because a selector like details > p will still select it just fine. Presumably, that selector gets resolved in the light DOM and then continues to work after it gets slotted in.

But if you tell a property to inherit, things break down. If you did something like…

div {
  border-radius: 8px;
div p {
  border-radius: inherit;


is going to have an 8px border radius.

But if you do…

  <p>Lorem ipsum...</p>
details {
  border-radius: 8px;
details p {
  border-radius: inherit;


is going to be square as a square doorknob. I guess that’s either because you can’t force inheritance through the shadow DOM, or the inherit only happens from the parent which is a ? Whatever the case, it doesn’t work.

CodePen Embed Fallback

Direct Link to ArticlePermalink

The post Shadow Roots and Inheritance appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

How to Use Quizzes More Effectively in Interactive Content

September 16th, 2021 No comments

Content is the king of the digital world. This is an undisputed fact among marketers and business owners alike.

However, not all content is created equal. Interactive content is a more immersive form of marketing specifically intended for the digital age. Great for companies that need to develop deeper relationships with their audience. 

There are various kinds of interactive content for brands to explore these days. For example, you can create a poll where your customers vote for certain answers to questions. In addition, some companies hire developers to build immersive gaming experiences with prizes and rewards. 

Even standard content like blogs and articles can become more interactive with things like animations, buttons, and elements that ask visitors to do something. 

One of the most valuable forms of interactive content is the quiz. So, how can companies use quizzes to engage their audience effectively? Let’s find out…

The Benefits of Quizzes in Interactive Content

According to studies, 93% of marketers believe interactive content is extremely effective for educating and entertaining customers. Interactive content is meaningful because it’s engaging, and many marketers state that creating engaging content is one of their toughest challenges. 

In an environment where the average attention span is constantly dwindling, interactive content reduces the risk that your customer will end up being distracted by something else before they have a chance to convert on your website. 

Quizzes are an excellent form of interactive content, but many marketers don’t take full advantage of them yet. Quizzes, like some other forms of interactive content, can come in different styles. For example, you could have a personality quiz that tells your customer what kind of vegetable they would be. That might sound odd, but it helps to give your customer a sense of belonging, gives them a feeling of being understood, and offers entertainment. 

Some quizzes can answer questions for your customer. 

For instance, a quiz on “what to buy your dad for father’s day” is an excellent way to solve a customer’s problem while guiding them towards potential products that you sell. 

Z Gallerie, a retail company, launched a quiz called “What is your Z Gallerie Style personality?” The quiz offers a personalized recommendation experience on what to purchase for every current and potential customer. 

The personality quiz became a great way of bringing product recommendations to leads without being pushy. Z Gallerie could, therefore, consistently provide a unique experience to each customer based on their results. 

So, how do you make a quiz that’s really effective for your content marketing plan?

Step 1: Creating the Quiz

Quizzes are a kind of interactive content that can almost feel like a conversation with a brand. They’re an opportunity for you to show your audience how well you understand them. 

According to TryInteract, people take quizzes because they want to know themselves better or want to confirm what they think they already know about themselves. These content solutions solve problems, even if they’re handling a person’s curiosity about what kind of celebrity they’re most like. 

Before you start making your quiz, you need to know your goal and what you’re trying to do for your audience. If your goal is to get more people to feel more attuned to your company, you might need to create something that demonstrates how well you know your visitors.

The goal for the company is to demonstrate a deep knowledge of the industry and target market. If the quiz is helpful and informative, it adds to the brand’s credibility and makes it more likely that customers will want to continue purchasing.

Before you build your quiz, ask yourself:

  • What do you want to get out of your audience taking this quiz? (More conversions, better brand loyalty, improved engagement?)
  • Why would your audience want to take the quiz? (Is it relevant to their interests, will it give them some vital information?)

Knowing exactly what you and your audience should accomplish with the quiz will give you a good platform to begin building on. 

Step 2: Choose the Title and Quiz Type

Titles are important in any content marketing. 80% of readers decide whether to check out an article based on its title. The same process is common for people who want to decide whether they should take a quiz or not. 

There are a lot of great ways to pique your visitor’s attention with a quiz title. For instance, you could challenge your audience to prove their knowledge with the word “actually.” For instance, “How much do you actually know about Kale?” That kind of title immediately appeals to the competitive nature of the human being. 

Another great example of a challenging title is to tell your audience that they can’t do something. Buzzfeed did that with its millennial quiz. The great thing about this quiz title is that it speaks to the competitive nature of the reader but also gives that reader a chance to show that they belong to a specific community. 

Another option could be to ask a question and hope that curiosity will do the rest of the work for you. For instance, “Which celebrity chef are you most like?” The key to success here is understanding your audience and knowing exactly what they most want to know. 

Once you’ve figured out the title, choosing the kind of quiz you want to create is the next step. For instance, you can try:

  • Personality quizzes: People like hearing good things about themselves because of a psychological phenomenon called self-serving bias. A personality quiz that recognizes the features your customers like about themselves will make them feel happier and more connected to your brand.
  • The knowledge test: Commonly found on social media, these quizzes challenge a person’s knowledge on a specific subject. The benefit here is that your audience can learn something and share their knowledge with their friends for social points. This quiz from Unicef is an excellent example of the “knowledge” style quiz.

Step 3: Crafting Quiz Questions

Once you have a good idea of the kind of quiz you want to create and the title you’re going to put alongside it, you’ll need to begin bringing your interactive content to life. That means designing the right questions. 

Writing questions for a quiz is just like creating any excellent content. First, you need to keep your target audience in mind. Next, think about the kind of personality you’re trying to appeal to. Breathing some life into your quiz by injecting your unique sense of personality into it will be an excellent way to strengthen your bond with your customers. 

Other tips for making the most of your quiz questions include:

  • Use visuals in your questions: Having text-only questions is fine in some cases, but it’s worth looking into images too. Using pictures helps to keep things relevant and interesting and makes your quiz feel a lot more immersive. 
  • Don’t make questions too long: In-depth and complicated questions will only scare your audience away. Remember that they’re looking for something fun and lighthearted to do. This means that your questions should be as short as possible. 
  • Make it interesting: Don’t just ask basic questions like “what’s your favorite color” try to go beyond what your customers usually see on quizzes and make it relevant to the quiz topic. Again, this is your chance to show your audience how much you know.

Step 4: Creating Results That People Want to Share

If you want to design a quiz that really blows your audience away, then the results are one of the most important things to focus on. The results you offer your customers dictate whether they enjoy your quiz so much that they want to share it with other people. Creating share-worthy results is how you boost your chances of finding new customers and even going viral. 

So, how do you design results that people want to share? Start by helping your customers to feel positive about themselves. The results should make them feel like a better person or confirm the good things they already believe about themselves. Research tells us that positive emotions are more likely to promote sharing

For instance, this quiz from the PBS company makes people feel good by demonstrating that they know their books. This confirms a customer’s idea that they are well-read.

Using share-worthy images is another way to improve your chances of designing results that people want to share. You’ll need to use interesting pictures here that speak to your audience. Bright and entertaining pictures will make results more eye-catching on a social media feed. 

Don’t forget to include a call-to-action on your results page too. It’s always helpful to give your audience a nudge in the direction you want them to move in. Providing a call-to-action that asks your customers to share their results increases your chances of positive sharing behavior. 

Step 5: Know How to Distribute Your Quiz

Once you’ve put all of the essential components of your quiz together, the next step is ensuring you can distribute that quiz and share it with as many people as possible. For instance, you can promote your quiz on social media to reach more possible customers. Twitter and Facebook are always great places to get started but don’t be afraid to experiment elsewhere. 

Sharing snippets of the quiz experience in an Instagram Story could be a great way to generate engagement or posting a picture on your Instagram feed. 

When promoting your interactive content on social media, use an attractive image to highlight the experience and ensure you make that captivating headline stand out. Share both the caption and image with a shortened link to measure results. Shorter links are more likely to attract audience attention and encourage sharing later. If your links are too long, they can end up looking spammy or unprofessional. That’s not the image you want to build with your quiz content. 

If you need an extra boost for your quiz, promoting through Facebook advertising could be the ideal solution. Paid ads are a great way to get extra attention, but you need to choose your target audience carefully. Select your audience according to demographics, behaviors, connections, and locations. 

Remember that Facebook gives you plenty of opportunities to track down the kind of customers you want to speak to. Creating a custom audience could be a handy step too. This is always useful if you have a lot of information from an email list or a collection of contacts you’ve generated over time.

Step 6: Following Up on Your Quiz

Once you’ve successfully attracted people to your quiz experience, the next step is to follow up on the leads you’ve hopefully collected. When designing a quiz, it’s always a good idea to ask your customer for their email addresses before you give their results. This ensures that you can collect plenty of leads in the long term for nurturing purposes. 

Marketing company, The Foundation, designed a quiz that asked customers whether they had an entrepreneurial mindset. The quiz was based on an existing eBook offered by the company. The quiz, combined with a Facebook ad campaign, helped the business collect new leads to advertise their ebook. The Foundation managed to reduce its cost per lead from $6 to $3.80 using this method. 

When following up on your quiz experience, make sure that you get the tone right. The first thing you need to do is thank your audience for taking the quiz in the first place. After someone opts in and offers their email address, send a quick email that shares their results and says “thanks.” 

After a couple of days, you can follow up on your thank you email by asking your audience to retake the quiz or take a new one. Encourage these repeat customers to share their testimonials and gradually introduce more interesting content you have that’s connected to your quiz. For instance, if you create a quiz to determine whether someone has an entrepreneurial mind, you could advertise articles that cover similar topics. 

Finally, after regular engagement from your audience, you can begin to implement strategies that might convince your audience to purchase your products. This could mean showing off your entrepreneurial eBook, asking someone to sign up for a webinar, or something else entirely.

Don’t forget to track the performance of every quiz too. Examining metrics like click-through rates for your quiz advertisements and conversion rates will help you see which quizzes generate the most attention and action from your intended audience. 

Time to Add Quizzes to Your Interactive Content Strategy?

A content marketing strategy is one of the best ways to engage with your audience and strengthen your position in any industry. The right content demonstrates your knowledge, develops trust, and helps you to attract new customers. With interactive content, you can take the relationship you build with your audience to the next level. It’s your chance to engage with your customers and create an emotional relationship. 

Quizzes are one of the most effective forms of interactive content, and they’re also one of the easiest to implement into your existing strategy. It doesn’t take a lot of time or money to create a good quiz, and you can usually find tools online to help you with things like structure and formatting. You could even hire a professional to design a quiz for you. 

Once you’ve got the kind of quiz that’s really going to interest your target audience, the next step is distributing it in a way that generates as much attention as possible. Remember, you can advertise on social media and various other channels. However, it’s also helpful to pay attention to your options for helping do your promotion for you. For example, many customers will be more than happy to share quiz results that confirm the identity they’re trying to build online.


Featured image via Unsplash.


The post How to Use Quizzes More Effectively in Interactive Content first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Static Site Generators vs. CMS-powered Websites: How to Keep Marketers and Devs Happy

September 16th, 2021 No comments

(This is a sponsored post.)

Many developers love working with static site generators like Gatsby and Hugo. These powerful yet flexible systems help create beautiful websites using familiar tools like Markdown and React. Nearly every popular modern programming language has at least one actively developed, fully-featured static site generator.

Static site generators boast a number of advantages, including fast page loads. Quickly rendering web pages isn’t just a technical feat, it improves audience attraction, retention, and conversion. But as much as developers love these tools, marketers and other less technical end users may struggle with unfamiliar workflows and unclear processes.

The templates, easy automatic deploys, and convenient asset management provided by static site generators all free up developers to focus on creating more for their audiences to enjoy. However, while developers take the time to build and maintain static sites, it is the marketing teams that use them daily, creating and updating content. Unfortunately, many of the features that make static site generators awesome for developers make them frustrating to marketers.

Let’s explore some of the disadvantages of using a static site generator. Then, see how switching to a dynamic content management system (CMS) — especially one powered by a CRM (customer relationship management) platform — can make everyone happy, from developers to marketers to customers.

Static Site Generator Disadvantages

Developers and marketers typically thrive using different workflows. Marketers don’t usually want to learn Markdown just to write a blog post or update site copy — and they shouldn’t need to. 

Frankly, it isn’t reasonable to expect marketers to learn complex systems for everyday tasks like embedding graphs or adjusting image sizes just to complete simple tasks. Marketers should have tools that make it easier to create and circulate content, not more complicated.

Developers tend to dedicate most of their first week on a project to setting up a development environment and getting their local and staging tooling up and running. When a development team decides that a static site generator is the right tool, they also commit to either configuring and maintaining local development environments for each member of the marketing team or providing a build server to preview changes.

Both approaches have major downsides. When marketers change the site, they want to see their updates instantly. They don’t want to commit their changes to a Git repository then wait for a CI/CD pipeline to rebuild and redeploy the site every time. Local tooling enabling instant updates tends to be CLI-based and therefore inaccessible for less technical users.

This does not have to devolve into a prototypical development-versus-marketing power struggle. A dynamic website created with a next-generation tool like HubSpot’s CMS Hub can make everyone happy.

A New Generation of Content Management Systems

One reason developers hold static site generators in such high regard is the deficiency of the systems they replaced. Content management systems of the past were notorious for slow performance, security flaws, and poor user experiences for both developers and content creators. However, some of today’s CMS platforms have learned from these mistakes and deficiencies and incorporated the best static site generator features while developing their own key advantages.

A modern, CMS-based website gives developers the control they need to build the features their users demand while saving implementation time. Meanwhile, marketing teams can create content with familiar, web-based, what-you-see-is-what-you-get tools that integrate directly with existing data and software.

For further advantages, consider a CRM-powered solution, like HubSpot’s CMS Hub. Directly tied to your customer data, a CRM-powered site builder allows you to create unique and highly personalized user experiences, while also giving you greater visibility into the customer journey.

Content Management Systems Can Solve for Developers

Modern content management systems like CMS Hub allow developers to build sites locally with the tools and frameworks they prefer, then easily deploy to them their online accounts. Once deployed, marketers can create and edit content using drag-and-drop and visual design tools within the guardrails set by the developers. This gives both teams the flexibility they need and streamlines workflows. 

Solutions like CMS Hub also replace the need for unreliable plugins with powerful serverless functions. Serverless functions, which are written in JavaScript and use the NodeJS runtime, allow for more complex user interactions and dynamic experiences. Using these tools, developers can build out light web applications without ever configuring or managing a server. This elevates websites from static flyers to a modern, personalized customer experience without piling on excess developer work. 

While every content management system will have its advantages, CMS Hub also includes a built-in relational database, multi-language support, and the ability to build dynamic content and login pages based on CRM data. All features designed to make life easier for developers.

Modern CMS-Based Websites Make Marketers Happy, Too

Marketing teams can immediately take advantage of CMS features, especially when using a CRM-powered solution. They can add pages, edit copy, and even alter styling using a drag-and-drop editor, without needing help from a busy developer. This empowers the marketing team and reduces friction when making updates. It also reduces the volume of support requests that developers have to manage.

Marketers can also benefit from built-in tools for search engine optimization (SEO), A/B testing, and specialized analytics. In addition to standard information like page views, a CRM-powered website offers contact attribution reporting. This end-to-end measurement reveals which initiatives generate actual leads via the website. These leads then flow seamlessly into the CRM for the sales team to close deals.

CRM-powered websites also support highly customized experiences for site users. The CRM behind the website already holds the customer data. This data automatically synchronizes because it lives within one system as a single source of truth for both marketing pages and sales workflows. This default integration saves development teams time that they would otherwise spend building data pipelines.

Next Steps

Every situation is unique, and in some cases, a static site generator is the right decision. But if you are building a site for an organization and solving for the needs of developers and marketers, a modern CMS may be the way to go. 

Options like CMS Hub offer all the benefits of a content management system while coming close to matching static site generators’ marquee features: page load speed, simple deployment, and stout reliability. But don’t take my word for it. Create a free CMS Hub developer test account and take it for a test drive.

The post Static Site Generators vs. CMS-powered Websites: How to Keep Marketers and Devs Happy appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

2021 Scroll Survey Report

September 15th, 2021 No comments

Here’s a common thought and question: how do browsers prioritize what they work on? We get little glimpses of it sometimes. We’re told to “star issues” in bug trackers to signal interest. We’re told to get involved in GitHub threads for spec issues. We’re told they do read the blog posts. And, sometimes, we get to see the results of surveys. Chrome ran a survey about scrolling on the web back in April and has published the results with an accompanying a blog post.

“Scrolling” is a big landscape:

From our research, these difficulties come from the multitude of use cases for scroll. When we talk about scrolling, that might include:

According to the results, dang near half of developers are dissatisfied with scrolling on the web, so this is a metric Google devs want to change and they will prioritize it.

To add to the list above, I think even smooth scrolling is a little frustrating in how you can’t control the speed or other behaviors of it. For example, you can’t say “smooth scroll an on-page jump-down link, but don’t smooth scroll a find-on-page jump.”

And that’s not to mention scroll snapping, which is another whole thing with the occasional bug. Speaking of which, Dave had an idea on the show the other day that was pretty interesting. Now that scroll snapping is largely supported, even on desktop, and feels pretty smooth for the most part, should we start using it more liberally, like on whole page sections? Maybe even like…

/* Reset stylesheet */
main, section, article, footer {
  scroll-snap-align: start;

I’ve certainly seen scroll snapping in more places. Like this example from Scott Jehl where he was playing with scroll snapping on fixed table headers and columns. It’s a very nice touch:

CodePen Embed Fallback

Direct Link to ArticlePermalink

The post 2021 Scroll Survey Report appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:


September 15th, 2021 No comments

It’s not every day that a new pattern emerges across the web, but I think cmd + k is here to stay. It’s a keyboard shortcut that usually pops open a search UI and it lets you toggle settings on or off, such as dark mode. And lots of apps support it now—Slack, Notion, Linear, and Sentry (my current gig) are the ones that I’ve noticed lately, but I’m sure tons of others have started picking up on this pattern.

Speaking of which, this looks like a great project:

kbar is a fully extensible command+k interface for your site

My only hope is that more websites and applications start to support it in the future—with kbar being a great tool to help spread the good word about this shortcut.

Direct Link to ArticlePermalink

The post kbar appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

On the `dl`

September 14th, 2021 No comments

Blogging about HTML elements¹? *chefs kiss*

Here’s Ben Myers on the (aptly described) “underrated” Definition List (

) element in HTML:

You might have also seen lists of name–value pairs to describe lodging amenities, or to list out individual charges in your monthly rent, or in glossaries of technical terms. Each of these is a candidate to be represented with the 


Definition List
Coolness factor

Ben says he’s satisfied with HTML semantics, even when the benefits of using them are theoretical. But in the case of

, there are at least some tangible screen reader benefits, like the fact that the number of items in the list is announced, as expected (for the most part), like ordered and unordered lists. Although that makes you curious what number it announces, doesn’t it? Is it the number of children, regardless of type? Just the


Speaking of children, this might look weird:

    <dd>Designing with Web Standards</dd>
    <dd>Jeffrey Zeldman</dd>
    <dd>Ethan Marcotte</dd>
    <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>

But those intermediary

s that group things together are cool now. They’re awfully handy when you want to style the groupings as “rows” or do something like add a border below each group. No

s for ordered or unordered list though, just definition lists. Lucky sacks. What’s next? Is

gonna make a comeback?

  1. I remember Jen Kramer did 30 days of HTML not long ago, and that was fun.

The post On the `dl` appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

Design Faster & Smarter with BeTheme’s 3 Builders & 600+ Pre-Built Sites

September 14th, 2021 No comments

The WordPress themes and plugins you choose for your clients’ sites don’t just impact how the interface looks or how well it works. They also impact your ability to build them.

The point in using WordPress themes and plugins is to make your life easier, not to create more work for yourself or limit what you’re able to do. If you’ve struggled to find WordPress tools you can rely on from job to job, BeTheme might just be the total package you’ve been looking for.

BeTheme has it all:

  • A backend builder
  • A frontend builder
  • A WooCommerce builder
  • 600+ pre-built websites

There’s nothing extra to pay with BeTheme. One fee gets you all the tools you need to easily build professional-grade websites for your clients.

Get to Know BeTheme’s All-In-One WordPress Solution

Want to see how the BeTheme powerhouse works? Check it out:

1. Build and Manage the Backend With Muffin Builder 3

Let’s be honest, WordPress page builder plugins leave something to be desired. While they all have their strengths, it’s hard to find one that offers different tools for how you want to work.

Many of them offer a visual drag-and-drop builder, leaving designers with little flexibility in how they build websites. With BeTheme, you don’t have to compromise.

Muffin Builder 3 is the intuitive backend editor that gives you full control. And if you want to code it all by hand? You can. If you’d prefer to tap into BeTheme’s wide array of templates, pre-built sections, and predefined settings? You can do that as well.

What’s more, the backend builder makes it easy to add sliders to your website, optimize your pages for search, and more.

2. Design and Perfect Your Site on the Frontend with Muffin Live Builder

One of the reasons why drag-and-drop website builders have become so popular in recent years is because they empower everyone — from the DIY business owner to the professional web designer — to build websites visually. There’s just one problem:

While it’s great that developers both inside and outside of the WordPress ecosystem are creating these intuitive builders, they sometimes come at a cost.

One thing that tends to get sacrificed is speed. Because they take the editing out of the WordPress dashboard and onto the frontend of the website, many of them can take a while to load. (Some of them are known for stalling out on occasion, too.)

Another thing that gets sacrificed is how much you’re allowed to customize. You either have to design your website with the features and settings available from your page builder plugin or you have to do all the work inside of WordPress.

Muffin Live Builder doesn’t suffer from these issues.

For starters, the visual builder is lightweight, so it won’t keep you waiting around for pages to load or changes to reflect on the frontend.

Also, you don’t have to choose which builder you want to use. If you want to primarily build sites with the backend editor and then perfect the designs on the frontend, you can. With BeTheme, you don’t have to pick-and-choose which editor you want to use.

3. Create Great Looking Monetized Sites with the Muffin Woo Builder

Many page builders are built for one purpose: To help WordPress users visually design websites so they can see their work reflected on the site in real-time.

That said, many page builder plugins haven’t accounted for the ecommerce piece.

Users can design and customize the regular pages on their websites with the visual builder, like the Home, About, and Contact pages. However, their ecommerce pages — Shop, Products, Cart, Checkout, and more — have to be managed through WooCommerce’s interface.

WooCommerce is a great ecommerce plugin. However, it’s not ideal having to design different parts of your site with different tools.

Be now has a solution for this: Muffin Woo Builder.

The Muffin Woo Builder allows designers to build their own single product and shop templates instead of just customizing the default ones provided by WooCommerce or the theme.

It also gives you design editing capabilities that no other page builder plugin can. For example:

  • Create design rules for your ecommerce pages
  • Choose from 11 product gallery styles
  • Switch between Shop and Catalogue mode
  • Set custom variation swatches
  • Show or hide the cart button
  • Add a sidebar
  • Configure settings for how product images render
  • Enable a Wishlist
  • Pick and choose which icons appear in the header

If you want this level of control over the layout and look of your ecommerce pages, you have to install other plugins or custom-code those changes into the backend. So, this is definitely a unique feature amongst page builders.

4. Instantly Design an Attractive Website With One of 600+ Pre-Built Sites

BeTheme isn’t just the fastest WordPress builder because it’s lightweight or because there are various builder options that allow you to work the way that’s best for you.

BeTheme also comes jam-packed with 600+ pre-built websites, with new ones released every week.

When you install a pre-built site, BeTheme is going to do a number of things for you:

  • Install all the specific plugins you need for the site
  • Load a fully designed and fully functioning website into your WordPress installation
  • Add placeholder content and imagery throughout so you can easily swap in your own

That’s going to save you a lot of time. Think about the cost savings, too. You get access to more than 600 pre-built websites without having to pay anything extra for them.

Is BeTheme the total design package? You bet it is!

It can’t be overstated what a game-changer BeTheme is for WordPress designers. Two page builders, one WooCommerce builder, and 600+ pre-built sites all rolled into one?

Everything you need to design high-quality websites is baked in.

That’s something you rarely see in any product or service, let alone in WordPress.

If you’re ready to say “Goodbye!” to page builder plugins and transform the way you work, get the BeTheme powerhouse now.


The post Design Faster & Smarter with BeTheme’s 3 Builders & 600+ Pre-Built Sites first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Visual Design 101: How to Improve Your Website’s Performance

September 14th, 2021 No comments

Getting your web design right is crucial. Even more so when you are running an eCommerce or online business!

Since it is the place you meet your customers for the first time, your website needs to be in top shape and present all the information they need to see. Making a good impression on your potential customers is a priority. According to a study, it only takes up to 50 milliseconds to decide whether they want to stay or leave your website. 

Many companies have realized its importance and as the 2018 Digital Trends report shows, over 70 percent of US businesses use website design to differentiate themselves from their competitors.

But what goes into the actual designing process of your website? And, how can you improve its performance?

This article presents some visual design tips to help you improve the performance of your website and boost your sales at large.

Let’s dive in!

1. Define your branding

What is the first thing that comes to mind, when people think about your brand? To make it easily recognizable and memorable you have to build a website that reflects the personality of your business. This defines your brand. 

Having clear branding starts with your logo and then moves on to more detailed information like the colors you choose to present your copy and blog content, the typography, and the layout of your website.

Before you change anything on your site, first consider color psychology and handpick your fonts so that they match your style and those emotions you want people to associate with your business. 

Image Source: HelpScout

If it helps, you can work with a graphic designer to find the one(s) that best represent your brand, and appeal to your target audience. 

2. Give it some white space

Any high-converting website needs the right amount of white space, text, and visuals. Filling up your website with too much information, different patterns, and shapes, creates clutter that is not only confusing but also unpleasant to the eye.

White space – which refers to the area between the elements – images, text, and other visuals of your page, helps to create a clean and minimalistic feel to your website.

Adding more white space means that you will:

  • Improve interaction
  • Create more balance
  • Separate sections
  • Increase legibility
  • Highlight your CTAs

Adding more space will create some structure inside the website and the different pages and sections. This will allow people to move in a logical order while navigating your website and naturally follow the visual cues to your conversion point aka your call-to-action (CTA) button. 

White space between paragraphs and in the left and right margins can also increase comprehension. So make sure you make the best out of it.

Here are some good examples of the use of white space from OwlLabs and Quip.

Screenshot of OwlLab’s website
Screenshot of Quip’s website 

Both examples show how less is more, without saying too much but also making use of all the white space they can get from the background.

3. Choose high-quality images

A huge part of getting people to stay on your website for longer is choosing the right images. The ‘right’ image is an image that is most suitable to your brand and relates to the message you want to convey.

The ‘right’ image also helps to build trust and rapport with your target audience. Along with a story-telling bio about how you got your business up and running, adding a professional image that shows the human element is always a winning practice. 

Check out free stock photography sites like Unsplash and Pexels to find some high-quality images.

4. Focus on your above-the-fold

Your above-the-fold section needs to welcome your site visitors to your website. It’s the first thing they get to see, so it is the one element that ‘sets the scene’. 

The best way to make it stand out is to include it in your branding message. Clearly present your value proposition and give a reason to visitors to keep scrolling through your site. This is huge, since as user experience – UX evidence shows, people like to scroll

Select a powerful hero image and prefer to use high-contrasting colors that will bring out those elements you want to emphasize.

5. Optimize your images

One of the most important things to look into when you want to boost website performance is responsiveness. 

Site responsiveness dictates your page speed, which is an important parameter for people to stay on your website. According to Google and Microsoft Bing research, each 2 seconds delay in page load time reduces ad revenues by 4.3 percent. That’s a lot.

Optimizing your images will not only make your website load quicker but will also make it appear higher in search results. You can do that by choosing the appropriate file types for your visuals – JPEG, GIF, PNG, and HTML, compressing or resizing your images.

To compress images check out Tiny PNG – a web-based compression tool that deals with PNG and JPEG files.

Best Website Building Tools to Choose From

Having the right tools can help you achieve the best design results for your website.

Many website-building tools allow you to customize your pages with their unique features. If you haven’t found what you are looking for just yet, you can try:


WordPress is the most popular choice for building a website from scratch. It has some powerful features and some pre-made themes you can choose for your website’s design. What’s great about WordPress is that it comes with drag-and-drop page builders which allow you to easily design your own page layouts.

Wix is another popular option for building a business website. With this tool, you get to choose from a large variety of templates that can be customized to fit the unique needs of your business using design as your biggest asset. Wix is perfect for creative individuals, and with its rich artificial design intelligence capabilities – Wix ADI, you can design a beautiful website in minutes.

HubSpot Website Builder

If you are a marketer or small business owner, HubSpot’s CMS is all you need. HubSpot comes with an all-in-one website builder, which allows you to choose from conversion-optimized website templates that can boost your website’s performance. With it, you can run adaptive tests that present 5 different page variations to help you chose the one that brings the best results.

LearnWorlds Website Builder 

If you are looking for a website builder that can host your eLearning business or online school, your best solution is LearnWorlds. LearnWorlds comes with a website builder that allows you to choose from ready-made templates that match your industry. Reinforce your brand’s power through elements like typography, color palettes, different shapes, widgets, CTA buttons, beautiful layouts, and many more.


If you are running an eCommerce business and want to build your online store, then you should try out Shopify. The platform has an intuitive drag-and-drop builder that makes it easy to build an eCommerce website in minutes. Shopify integrates with WordPress and comes with many shipping, marketing, and management tools.

Ready to Boost Your Sales With Better Design?

A lot of factors come into play that creates the first impression including structure and layout, colors, spacing, symmetry, the amount of text it presents, and fonts amongst many others. 

This means that tackling down and paying attention to each one can help you improve the way people interact and engage with your site. The longer people stay on your site, the higher the possibility of reaching out to you either to buy your product, request support help, or simply ask for additional information. 

Once you change these key factors and invest in the right tools, you will see a boost in your website’s traffic in no time, which will bring valuable leads and ultimately more sales!

Categories: Others Tags:

Sell Your Business to Accelerate Your Wealth-Building Journey: A Business Valuation Guide

September 14th, 2021 No comments

Why would you sell your business after all the time and effort you put into building it from the ground up and getting it to a point where it’s funding your lifestyle? And it’s not just a business but a brand that you love: your baby.

What you might not have considered is that when you sell your business, it can actually be a new chapter in your entrepreneurial journey. A way to open doors of opportunity for you to explore new ventures in your business and personal life.

Opening doors not just for you, but for your business, too.

You may not have the capacity to help your brand reach its full potential. So, why not cash out of your business for a capital reward that is probably larger than you’ve ever received in your life? At the same time, you’ll be putting your business on an escalator of growth by handing it over to a buyer who has the capital and resources to take it to its peak.

There are many benefits to selling your online business. The most important thing is that you sell your business for the right price.

How Online Business Valuations Work

The first thing to understand is that every business is unique in how it’s built and how it fits into the market.

That’s why it’s not only how much a business makes that determines its value, although that’s the most important factor. However, many other factors also affect a business’ value; for example, two businesses earning the same amount in monthly profits could be valued at different prices.

A business’ earnings are one part of the equation, the other key part is the business’ multiple.

The net profit of a business is usually taken from its 12-month average, though the time span can be smaller if the business is new or if recent major changes in profits mean that a 12-month average wouldn’t accurately reflect the current state of the business.

The multiple is calculated by the valuer of your business using a wide range of metrics.

The formula above is the most basic valuation formula, and it is the foundation of all the valuations we calculate as a brokerage because it is so fundamental to the state of a business.

The metrics that go into calculating the multiple can be broken down into three key disciplines.

The Business Blueprints

Business blueprints are the surface factors a potential buyer will assess first. The buyer will have key criteria that they need to tick off before they dive deeper into your business.

The first thing a buyer will look at is your business model to see if it fits their portfolio criteria or their expertise.

The second factor they might look at is the age of your business. This is important because older businesses are better established in their niches than newer businesses, whereas with newer businesses, there are opportunities to catch rapidly growing trends.

Another key factor is how much time it takes to operate your business. Most investors aren’t looking for time-intensive projects, so it’s important to them that your business requires minimal time to run.

Next, a buyer will ask to see your profit history, preferably in the form of a profit-and-loss (P&L) statement. Your business’ financial data tells the buyer about your business’ history and gives them a good idea of its financial health. The same goes for your site or store’s traffic history.

Once they’ve ticked off these surface factors, they’ll dig deeper into your business.

The Business Foundations

One of the strengths of a business is its structure. Building your business with strong foundations secures its earnings and makes it a more desirable asset for investors.

The key structural areas that make for solid business foundations are traffic and revenue streams, product deliverability systems, and defensibility.

A business that is reliant on just one source for each of these areas—for example, a blog that drives 90% or more of its traffic from Google, earns from just one or two affiliate networks, and has a brand that’s easy to replicate—doesn’t have the strongest foundations.

Though a business could be earning a lot of money with this setup, it’s susceptible to single points of failure. A blog that has multiple traffic sources earns from a range of affiliate programs or other related revenue streams (such as paid advertising) and has a unique brand and a large audience is likely to be valued higher than the blog in the previous example.

Speaking of audiences, as you’ve grown your business, you will have built a number of valuable assets that will also be considered in your business’ valuation.

The Business Building Blocks

Once a potential buyer has a thorough understanding of your business’ history and structure, they will look to see if it has any assets that both make the business a strong brand and offer opportunities for growth.

The main asset a business has is its audience.

The size of a business’ audience is a sign of its brand strength. A large audience offers many opportunities for profits and can help a brand scale new heights. The two main forms audiences come in are email lists and social media followers, so if you have either or both of these assets, they will count towards your business’ final valuation.

Beyond a business’ audience are other assets, such as eCommerce platform accounts, products, trademarks, domains and websites, employee and supplier contracts, affiliate contracts, and marketing assets such as advertising accounts.

All of these assets represent the building blocks of the business, and high-quality assets can add a lot of value to a business.

Now that you understand what factors go into valuing your business, you might wonder what the next step would be if you were to sell. It starts with getting your business ready for sale.

How to Prepare Your Business for a Maximum Profit Exit

To successfully exit your business, it needs to be ready for a new owner to take over.

As an added benefit of preparing your business for sale, you will actually improve your business and likely make it more profitable and scalable. So, it is worthwhile to follow these steps whether you’re going to sell now, in the future, or never.

The first place to start is with your business’ numbers.

Organizing Your Finances and Analytics

Your business’ number one goal is to generate profit. That’s why your business’ numbers are what hold it together.

Some entrepreneurs are more on top of this side of their business than others, but all entrepreneurs need to have clear finance and analytics tracking in place to run their businesses effectively. Those who know their numbers well have P&Ls for their finances and an analytics dashboard set up for their traffic figures.

You can have an accountant create a P&L for you if you’re less strong in that area or if you don’t have the time to produce one. This statement should cover the lifetime of your business to give that potential buyer a clear picture of your business’ history. It will also help your broker classify your business’ earnings and expenses. Remember, you know your business best.

Before selling through a broker like us, you need to have at least three months of traffic analytics data. You can track your site’s traffic using tools such as Google Analytics. You also need this data to present to a potential buyer because it also tells the history of the business.

While you’re tidying up your business’ data, you might as well keep going and tidy up your operations, too.

Arranging Your Operations

How your business operates is crucial to its success.

Imagine a visit to a hectic restaurant where orders are being missed and the staff are making mistakes. At its core, the quality of the service comes down to the quality of the operational structure in place.

If you find yourself scrambling just to keep your business running, then it’s time to get your operations in order. The best way to do this is to create standard operating procedures (SOPs).

SOPs are documented procedures. By writing out your operational instructions step by step, you may even identify bottlenecks and inefficiencies that are slowing down your business. 

Having SOPs in place with repeatable operations helps you mitigate the risk of operational failures and makes your business less time- and energy-intensive to run. Another key benefit of organizing your operations is that you can start to outsource and automate repetitive tasks that take up your time or specialized operations that require expertise.

Outsourcing and Automating

The less time your business needs from you as the owner, the more desirable an asset it is. This is not only because a hands-off business doesn’t distract an investor from their other assets, but also because the business is scalable.

Having employees or freelancers running certain operations in your business and software tools taking care of others frees up your time to focus on big-picture growth.

One simple way to outsource operations is to hire a virtual assistant (VA). They are able to carry out those repetitive tasks that don’t require any expertise, and they’re cost-effective hires.

For more specialized tasks, such as web design, product design, or SEO content writing, you can look to freelancer platforms to acquire talent.

However, some operations are better run by a computer than by a human. This is where software tools are really helpful. Classic examples of where entrepreneurs find software tools useful are inventory management, social media posting, affiliate network tracking, and accounting.

Outsourcing is a great way to free yourself from the stress of your business. You also make your business easier to run, scalable, and profitable; ultimately, it is a more desirable investment asset.

By following all the above steps, you give yourself the option to free yourself from your business entirely through a profitable exit. When the time to leave comes, you have two main options.

Where Can You Sell Your Business?

There are two routes you can take to sell your business: the private route and the online business broker route.

You might have already had business acquirers reaching out to you with offers to buy your business. If so, what do you do next?

Selling your pride and joy is a long process with many steps, and you want to make sure you are making the smart steps along the way to get you the maximum possible sale.

When you sell privately, it’s all up to you, from preparing your business for sale, finding the right buyer, and negotiating the best price, to migrating your business over to the buyer and collecting the funds.

As you can probably imagine, there is a lot that goes into each of those stages, and there is a lot you need to know. When you sell through an online business broker, it’s a lot easier.

If you sell through an online business broker, you get the broker’s expertise to help you arrive at an accurate valuation, find buyers for you, and assist you in negotiating the best deal to get your business sold.

At Empire Flippers, we offer a little bit extra. We help you prepare your P&L for the most accurate valuation, we migrate your business over to the buyer for you, and we collect your funds to make sure you get paid. What’s more, we offer a free service whereby we create an exit plan for you to prepare your business for sale.

Hopefully, this article has helped you realize that you don’t just have a business; you have a valuable asset that you could one day cash out of for a capital windfall larger than you’ve ever received. By knowing how to accurately value your business, you set yourself up for a successful exit.

Categories: Others Tags:

8 Freelance Project Management Apps for 2021+

September 13th, 2021 No comments

In my experience, the biggest challenge that freelancers face — more than winning clients or setting prices — is project management; take on too much work, and you’ll start missing deadlines, take on too little, and you’ll start missing your rent.

Some people are naturally organized; they rock up at their desk at 08:59, fully confident in what they will spend the next 8–12 hours working on. Let’s be kind and say that I am not one of them, and leave it at that. The only way I have managed to survive the industry is by self-consciously micro-managing my schedule on a daily basis.

When I worked in an agency, I knew what I would be working on days in advance. Now, I know 90% of what I’ll be working on, weeks in advance.

That level of organization requires very, very, very careful planning. I hold team meetings at the end of the day, yes, “team” meetings of one person. To do that I use a number of tools that suit me.

How to Choose a Project Management App

The most important aspect of any project is the end. That’s when the client will assess your work, and that’s when you get paid. So when you choose a project management solution, make sure it gives you a clear path to the project conclusion.

I know one freelancer who sets himself a hard stop at 7 pm every day. At 7 pm, he downs tools switches off, and walks away. I once heard him end a client call at 7 pm because he’d reached his cut-off point. It made me wince — I would have stayed on until the call concluded — but it hasn’t affected his business.

I know another successful freelancer who works on a budget. When she has earned the money she needs for that day, she stops. She bills by the hour to make this work, so when she sits down in the morning, she knows exactly what time she’ll finish.

Personally, I prefer a task-based approach. I know what I have to get done; if I can get ahead, then great, but my main focus is ensuring I don’t fall behind. I believe that if you hit your deadlines, everything else will take care of itself. Admittedly, there have been a few late-nights (and all-nights) over the years, but thankfully they’re less common these days.

No one style of project management suits everyone. And it doesn’t matter what approach you take, provided you take an approach.

8 Best Project Management Apps for Freelancers

As a freelancer, the most important thing characteristic you can have is reliability. Cultivate a reputation for delivering on your promises, and you’ll become invaluable to your clients. The best project management app is the one that helps you keep your promises.

There are some excellent tools on the market that facilitate project management, but most are aimed at SMEs, or project managers running a team of freelancers.

The tools here are listed from least, to most useful for the average freelancer. I’ve avoided too many time-tracking apps because I find these tend to encourage billing by the hour, which is potentially damaging to your business long term. If you do need pure time-tracking, check out Harvest. I’ve also avoided solutions that are too large-scale to benefit freelancers. If you’re looking for a project management tool for teams, then Basecamp, Jira,, and Redbooth are all worth considering.

Sadly none of these apps are perfect, and there’s a good chance you’ll need to use two or three to manage your projects.

8. Todoist

Todoist is hands down the best to-do app on the market. The downside is that its feature set is minimal.

Todoist really excels at lists. You can break down tasks into sub-tasks, and sub-sub-tasks. The downside is there’s no real scheduling or comparison of multiple projects in a single view.

The mobile apps are great, and Todoist recently introduced boards, a form of kanban board that gives you a good overview of everything. If it introduces a gantt chart, I can see myself relying on it more.

Todoist has a free forever plan that is fine for most freelancers, and the paid plans start at just $3 per month.

7. Bonsai

Bonsai is an excellent service for freelancers that grew from a simple invoicing app to include proposals, contracts, time-tracking, and more.

I used Bonsai for invoicing for a couple of years, and it does everything it claims to do. However, there are a couple of significant areas where it falls down. Firstly, its invoicing is super-aggressive and cannot be customized — make sure you’re on friendly terms with any client you send a Bonsai invoice to. Secondly, while it does a good job of tracking what you have done, it doesn’t help you plan what needs to be done beyond a formal proposal.

If you’re running a few simple projects, then it’s possible Bonsai is right for you. Pricing starts at $19 per month.

6. Monday

Monday is one of the biggest players in the project management market. It offers a dizzying array of options, and if this list were aimed at project management for agencies, Monday would be further along our countdown. Monday may suit freelancers, particularly those who have migrated from agency work, but for most, it’s more than we need.

There is a free-forever plan that covers almost everything you could want. However, if you need to view your projects as a gantt chart — and I strongly suggest you do — then you’ll need to update to the standard plan, which starts at $8 per user per month, with a minimum of three seats, meaning at least $24 per month when billed annually.


AND.CO stands out as a slick, easy-to-use option for managing a freelance business. Like Bonsai, it allows you to manage proposals, invoicing, time-tracking, expenses, and more.

AND.CO also has extremely well-liked customer support. An underestimated consideration when you don’t have your own accounts team to resolve problems.

As with other solutions of this type, the task-management is lacking. It does include a simple to-do list, but in my opinion, it’s not sufficient, and you’ll need to supplement it with something that supports gantt charts.

There’s a free forever plan, but it’s barely more than a free trial. Pricing for full-featured access starts at $18 per month when billed annually.

4. ClickUp

ClickUp is a SaaS that aims to replace just about everything else you could need. Unlike some options on this list, it includes a CRM, which is a bonus because there’s nothing worse than relying on the search function in your email to track down someone’s contact details.

ClickUp also offers a genuinely free-forever account with enough features to make it usable. If you choose to upgrade to a paid plan, it’s just $5 per user per month, which is excellent value.

If anything, there’s just too much in here. If you’re someone who considers themselves a power-user who enjoys digging into every nuance of a UI, then ClickUp could be for you. But, if, like me, you favor a simple tool that does what it’s told and gets out of the way, then there are better options.

3. Asana

Asana is probably the best-known project management tool on the market. It offers a tremendous number of options and is flexible enough for any style of project management.

There’s a free forever plan that is ideal for getting started and offers you most — you may be sensing a theme here — of the features you’ll need. But Asana’s best feature is its excellent timeline implementation of the gantt chart, for which you’ll need to upgrade to a premium plan costing $10.99 per user per month, with a minimum number of 2 seats that translates to a rather expensive $21.98 per month.

2. Trello

Trello is famous for its kanban boards, and many people prefer them to gantt charts, which has helped the app grow rapidly in the last few years.

If you’re prepared to pay $10 per user per month, Trello actually offers gantt charts as well, in the form of its timeline feature.

Trello is mainly designed for teams, not freelancers. However, if you do have the budget for a premium plan, Trello gives you an enviable ability to switch project management styles on a whim.

1. Toggl

Toggl is perhaps the perfect balance of time-tracking and gantt chart that is ideal for freelance projects.

As with most tools, Toggl is designed for teams, with billing starting at $8 per user per month. However, it offers a solo plan, designed for freelancers, that is free forever.

The main thing you miss out on with Toggl’s Solo plan is team timelines, which you won’t need unless you’re outsourcing work. One other obvious omission is unlimited planning boards, which you may find yourself paying for sooner or later.

But for a mixture of simplicity and powerful features available for $0, Toggl is hard to beat.


Featured image via Pexels


The post 8 Freelance Project Management Apps for 2021+ first appeared on Webdesigner Depot.

Categories: Designing, Others Tags: