Posted on

Conducting Accessibility Research In An Inaccessible Ecosystem

Ensuring technology is accessible and inclusive relies heavily on receiving feedback directly from disabled users. You cannot rely solely on checklists, guidelines, and good-faith guesses to get things right. This is often hindered, however, by a lack of accessible prototypes available to use during testing.

Rather than wait for the digital landscape to change, researchers should leverage all the available tools they can use to create and replicate the testing environments they need to get this important research completed. Without it, we will continue to have a primarily inaccessible and not inclusive technology landscape that will never be disrupted.

Note: I use “identity first” disability language (as in “disabled people”) rather than “people first” language (as in “people with disabilities”). Identity first language aligns with disability advocates who see disability as a human trait description or even community and not a subject to be avoided or shamed. For more, review “Writing Respectfully: Person-First and Identity-First Language”.

Accessibility-focused Research In All Phases

When people advocate that UX Research should include disabled participants, it’s often with the mindset that this will happen on the final product once development is complete. One primary reason is because that’s when researchers have access to the most accessible artifact with which to run the study. However,

The real ability to ensure an accessible and inclusive system is not by evaluating a final product at the end of a project; it’s by assessing user needs at the start and then evaluating the iterative prototypes along the way.

Prototype Research Should Include Disabled Participants

In general, the iterative prototype phase of a project is when teams explore various design options and make decisions that will influence the final project outcome. Gathering feedback from representative users during this phase can help teams make informed decisions, including key pivots before significant development and testing resources are used.

During the prototype phase of user testing, the representative users should include disabled participants. By collecting feedback and perspectives of people with a variety of disabilities in early design testing phases, teams can more thoughtfully incorporate key considerations and supplement accessibility guidelines with real-world feedback. This early-and-often approach is the best way to include accessibility and inclusivity into a process and ensure a more accessible final product.

If you instead wait to include disabled participants in research until a product is near final, this inevitably leads to patchwork fixes of any critical feedback. Then, for feedback not deemed critical, it will likely get “backlogged” where the item priorities compete with new feature updates. With this approach, you’ll constantly be playing catch-up rather than getting it right up front and in an elegant and integrated way.

Accessibility Research Can’t Wait Until The End

Not only does research with disabled participants often occur too late in a project, but it is also far too often viewed as separate from other research studies (sometimes referred to as the “main research”). It cannot be understated that this reinforces the notion of separate-and-not-equal as compared to non-disabled participants and other stakeholder feedback. This has a severe negative impact on how a team will view the priority of inclusive design and, more broadly, the value of disabled people. That is, this reinforces “ableism”, a devaluing of disabled people in society.

UX Research with diverse participants that include a wide variety of disabilities can go a long way in dismantling ableist views and creating vitally needed inclusive technology.

The problem is that even when a team is on board with the idea, it’s not always easy to do inclusive research, particularly when involving prototypes. While discovery research can be conducted with minimal tooling and summative research can leverage fully built and accessible systems, prototype research quickly reveals severe accessibility barriers that feel like they can’t be overcome.

Inaccessible Technology Impedes Accessibility Research

Most technology we use has accessibility barriers for users with disabilities. As an example, the WebAIM Million report consistently finds that 96% of web homepages have accessibility errors that are fixable and preventable.

Just like websites, web, and mobile applications are similarly inaccessible, including those that produce early-stage prototypes. Thus, the artifacts researchers might want to use for prototype testing to help create accessible products are themselves inaccessible, creating a barrier for disabled research participants. It quickly becomes a vicious cycle that seems hard to break.

The Limitations Of Figma

Currently, the most popular industry tool for initial prototyping is Figma. These files become the artifacts researchers use to conduct a research study. However, these files often fall short of being accessible enough for many participants with disabilities.

To be clear, I absolutely applaud the Figma employees who have worked very hard on including screen reader support and keyboard functionality in Figma prototypes. This represents significant progress towards removing accessibility barriers in our core products and should not be overlooked. Nevertheless, there are still limitations and even blockers to research.

For one, the Figma files must be created in a way that will mimic the website layout and code. For example, for screen reader navigation to be successful, the elements need to be in their correct reading order in the Layers panel (not solely look correct visually), include labeled elements such as buttons (not solely items styled to look like buttons), and include alternative text for images. Often, however, designers do not build iterative prototypes with these considerations in mind, which prevents the keyboard from navigating correctly and the screen reader from providing the necessary details to comprehend the page.

In addition, Figma’s prototypes do not have selectable, configurable text. This prevents key visual adjustments such as browser zoom to increase text size, dark mode, which is easier for some to view, and selecting text to have it read aloud. If a participant needs these kinds of adjustments (or others I list in the table below), a Figma prototype will not be accessible to them.

Table: Figma prototype limitations per assistive technology

Assistive Technology Disability Category Limitation
Keyboard-only navigation Mobility Must use proper element type (such as button or input) in expected page order to ensure operability
Screen reader Vision Must include structure to ensure readability:
  • Including elements in logical order to ensure correct reading order
  • Alternative text added to images
  • Descriptive names added for buttons
Dark mode/High contrast mode Low Vision
Neurodiversity		 Not available
Browser zoom Low Vision
Neurodiversity
Mobility		 Not available
Screen reader used with mouse hover
Read aloud software with text selection		 Vision
Neurodiversity		 Cannot be used
Voice control
Switch control device		 Mobility Cannot be used

Inclusive Research Is Needed Regardless

Having accessibility challenges with a prototype doesn’t mean we give up on the research. Instead, it means we need to get creative in our approach. This research is too important to keep waiting for the ideal set-up, particularly when our findings are often precisely what’s needed to create accessible technology.

Part of crafting a research study is determining what artifact to use during the study. Thus, when considering prototype research, it is a matter of creating the artifact best suited for your study. If this isn’t going to be, say, a Figma file you receive from designers, then consider what else can be used to get the job done.

Working Around the Current State

Being able to include diverse perspectives from disabled research participants throughout a project’s creation is possible and necessary. Keeping in mind your research questions and the capabilities of your participants, there are research methods and strategies that can be made accessible to gather authentic feedback during the critical prototype design phase.

With that in mind, I propose five ways you can accomplish prototype research while working around inaccessible prototypes:

  1. Use a survey.
  2. Conduct a co-design session.
  3. Test with a similar system.
  4. Build your own rapid prototype.
  5. Use the Wizard of Oz method.

Use a Survey Instead

Not all research questions at this phase need a full working prototype to be answered, particularly if they are about the general product features or product wording and not the visual design. Oftentimes, a survey tool or similar type of evaluation can be just as effective.

For example, you can confirm a site’s navigation options are intuitive by describing a scenario with a list of navigation choices while also testing if key content is understandable by confirming the user’s next steps based on a passage of text.

Image description
+

Acme Company Website Survey

Complete this questionnaire to help us determine if our site will be understandable.

  1. Scenario: You want to find out this organization's mission statement. Which menu option do you choose?
    [List of radio buttons]
    • Home
    • About
    • Resources
    • Find an Office
    • Search
  2. The following describes directions for applying to our grant. After reading, answer the following question:

    The Council’s Grant serves to advance Acme's goals by sponsoring community events. In determining whether to fund an event, the Council also considers factors including, but not limited to:
    • Target audiences
    • Alignment with the Council’s goals and objectives
    • Evaluations measuring participant satisfaction
To apply, download the form below.

Based on this wording, what would you include in your grant application?
[Input Field]

Just be sure you build a WCAG-compliant survey that includes accessible form layouts and question types. This will ensure participants can navigate using their assistive technologies. For example, Qualtrics has a specific form layout that is built to be accessible, or check out these accessibility tips for Google Forms. If sharing a document, note features that will enhance accessibility, such as using the ribbon for styling in Microsoft Word.

Tip: To find accessibility documentation for the software you’re using, search in your favorite search engine for the product name plus the word “accessibility” to find a product’s accessibility documentation.

Conduct Co-design Sessions

The prototyping phase might be a good time to utilize co-design and participatory design methods. With these methods, you can co-create designs with participants using any variety of artifacts that match the capabilities of your participants along with your research goals. The feedback can range from high-level workflows to specific visual designs, and you can guide the conversation with mock-ups, equivalent systems, or more creative artifacts such as storyboards that illustrate a scenario for user reaction.

For the prototype artifacts, these can range from low- to high-fidelity. For instance, participants without mobility or vision impairments can use paper-and-pencil sketching or whiteboarding. People with somewhat limited mobility may prefer a tablet-based drawing tool, such as using an Apple pencil with an iPad. Participants with visual impairments may prefer more 3-dimensional tools such as craft supplies, modeling clay, and/or cardboard. Or you may find that simply working on a collaborative online document offers the best accessibility as users can engage with their personalized assistive technology to jot down ideas.

Notably, the types of artifacts you use will be beneficial across differing user groups. In fact, rather than limiting the artifacts, try to offer a variety of ways to provide feedback by default. By doing this, participants can feel more empowered and engaged by the activity while also reassuring them you have created an inclusive environment. If you’re not sure what options to include, feel free to confirm what methods will work best as you recruit participants. That is, as you describe the primary activity when they are signing up, you can ask if the materials you have will be operable for the participant or allow them to tell you what they prefer to use.

The discussion you have and any supplemental artifacts you use then depend on communication styles. For example, deaf participants may need sign language interpreters to communicate their views but will be able to see sample systems, while blind participants will need descriptions of key visual information to give feedback. The actual study facilitation comes down to who you are recruiting and what level of feedback you are seeking; from there, you can work through the accommodations that will work best.

I conducted two co-design sessions at two different project phases while exploring how to create a wearable blind pedestrian navigation device. Early in the project, when we were generally talking about the feature set, we brought in several low-fidelity supplies, including a Braille label maker, cardboard, clay, Velcro, clipboards, tape, paper, and pipe cleaners. Based on user feedback, I fashioned a clipboard hanging from pipe cleaners as one prototype.

Later in the project when we were discussing the size and weight, we taped together Arduino hardware pieces representing the features identified by the participants. Both outcomes are pictured below and featured in a paper entitled, “What Not to Wearable: Using Participatory Workshops to Explore Wearable Device Form Factors for Blind Users.”

Ultimately, the benefit of this type of study is the participant-led feedback. In this way, participants are giving unfiltered feedback that is less influenced by designers, which may lead to more thoughtful design in the end.

Test With an Equivalent System

Very few projects are completely new creations, and often, teams use an existing site or application for project inspiration. Consider using similar existing systems and equivalent scenarios for your testing instead of creating a prototype.

By using an existing live system, participants can then use their assistive technology and adaptive techniques, which can make the study more accessible and authentic. Also, the study findings can range from the desirability of the available product features to the accessibility and usability of individual page elements. These lessons can then inform what design and code decisions to make in your system.

One caveat is to be aware of any accessibility barriers in that existing system. Particularly for website and web applications, you can look for accessibility documentation to determine if the company has reported any WCAG-conformance accessibility efforts, use tools like WAVE to test the system yourself, and/or mimic how your participants will use the system with their assistive technology. If there are workarounds for what you find, you may be able to avoid certain parts of the application or help users navigate past the inaccessible parts. However, if the site is going to be completely unusable for your participants, this won’t be a viable option for you.

If the system is usable enough for your testing, however, you can take the testing a step further by making updates on the fly if you or someone you collaborate with has engineering experience. For example, you can manipulate a website’s code with developer tools to add, subtract, or change the elements and styling on a page in real-time. (See “About browser developer tools”.) This can further enhance the feedback you give to your teams as it may more closely match your team’s intended design.

Build a Rapid Website Prototype

Notably, when conducting research focused on physical devices and hardware, you will not face the same obstacles to inaccessibility as with websites and web applications. You can use a variety of materials to create your prototypes, from cardboard to fabric to 3D printed material. I’ve sewn haptic vibration modules to a makeshift leather bracelet when working with wearables, for instance.

However, for web testing, it may be necessary to build a rapid prototype, especially to work around inaccessible artifacts such as a Figma file. This will include using a site builder that allows you to quickly create a replica of your team’s website. To create an accessible website, you’ll need a site builder with accessibility features and capabilities; I recommend WordPress, SquareSpace, Webflow, and Google Sites.

I recently used Google Sites to create a replica of a client’s draft pages in a matter of hours. I was adamant we should include disabled participants in feedback loops early and often, and this included after a round of significant visual design and content decisions. The web agency building the client’s site used Figma but not with the required formatting to use the built-in screen reader functionality. Rather than leave out blind user feedback at such a crucial time in the project, I started with a similar Google Sites template, took a best guess at how to structure the elements such as headings, recreated the anticipated column and card layouts as best I could, and used placeholder images with projected alt text instead of their custom graphics.

The screen reader testing turned into an impromptu co-design session because I could make changes in-the-moment to the live site for the participant to immediately test out. For example, we determined that some places where I used headings were not necessary, and we talked about image alt text in detail. I was able to add specific design and code feedback to my report, as well as share the live site (and corresponding code) with the team for comparison.

The downside to my prototype was that I couldn’t create the exact 1-to-1 visual design to use when testing with the other disabled participants who were sighted. I wanted to gather feedback on colors, fonts, and wording, so I also recruited low vision and neurodiverse participants for the study. However, my data was skewed because those participants couldn’t make the visual adjustments they needed to fully take in the content, such as recoloring, resizing, and having text read aloud. This was unfortunate, but we at least used the prototype to spark discussions of what does make a page accessible for them.

You may find you are limited in how closely you can replicate the design based on the tools you use or lack of access to developer assistance. When facing these limitations, consider what is most important to evaluate and determine if a paired-down version of the site will still give you valuable feedback over no site at all.

Use Wizard of Oz

The Wizard of Oz (WoZ) research method involves the facilitators mimicking system interactions in place of a fully working system. With WoZ, you can create your system’s approximate functionality using equivalent accessible tools and processes.

As an example, I’ll refer you to the talk by an Ally Financial research team that used this method for participants who used screen readers. They pre-programmed screen reader prompts into a clickable spreadsheet and had participants describe aloud what keyboard actions they would take to then trigger the corresponding prompt. While not the ideal set-up for the participants or researchers, it at least brought screen reader user feedback (and recognition of the users themselves) to the early design phases of their work. For more, review their detailed talk “Removing bias with wizard of oz screen reader usability testing”.

This isn’t just limited to screen reader testing, however. In fact, I’ve also often used Wizard of Oz for Voice User Interface (VUI) design. For instance, when I helped create an Alexa “skill” (their name for an app on Amazon speech-enabled devices), our prototype wouldn’t be ready in time for user testing. So, I drafted an idea to use a Bluetooth speaker to announce prompts from a clickable spreadsheet instead. When participants spoke a command to the speaker (thinking it was an Alexa device), the facilitator would select the appropriate pre-recorded prompt or a generic “I don’t understand” message.

Any system can be mimicked when you break down its parts and pieces and think about the ultimate interaction for the user. Creating WoZ set-ups can take creativity and even significant time to put together, but the outcomes can be worth it, particularly for longer-term projects. Once the main pieces are created, the prototype set-up can be edited and reused indefinitely, including during the study or between participants. Also, the investment in an easily edited prototype pays off exponentially if it uncovers something prior to finishing the entire product. In fact, that’s the main goal of this phase of testing: to help teams know what to look out for before they go through the hard work of finishing the product.

Inclusive Research Can No Longer Wait

Much has been documented about inclusive design to help teams craft technology for the widest possible audience. From the Web Content Accessibility Guidelines that help define what it means to be accessible to the Microsoft Inclusive Design Toolkits that tell the human stories behind the guidelines, there is much to learn even before a product begins.

However, the best approach is with direct user feedback. With this, we must recognize the conundrum many researchers are facing: We want to include disabled participants in UX research prior to a product being complete, but often, prototypes we have available for testing are inaccessible. This means testing with something that is essentially broken and will negatively impact our findings.

While it may feel like researchers will always be at a disadvantage if we don’t have the tools we need for testing, I think, instead, it’s time for us to push back. I propose we do this on two fronts:

  1. We make the research work as best we can in the current state.
  2. We advocate for the tools we need to make this more streamlined.

The key is to get disabled perspectives on the record and in the dataset of team members making the decisions. By doing this, hopefully, we shift the culture to wanting and valuing this feedback and bringing awareness to what it takes to make it happen.

Ideally, the awareness raised from our bootstrap efforts will lead to more people helping reduce the current prototype barriers. For some of us, this means urging companies to prioritize accessibility features in their roadmaps. For those working within influential prototype companies, it can mean getting much-needed backing to innovate better in this area.

The current state of our inaccessible digital ecosystem can sometimes feel like an entanglement too big to unravel. However, we must remain steadfast and insist that this does not remain the status quo; disabled users are users, and their diverse and invaluable perspectives must be a part of our research outcomes at all phases.

Posted on

How To Monitor And Optimize Google Core Web Vitals

This article is a sponsored by DebugBear

Google’s Core Web Vitals initiative has increased the attention website owners need to pay to user experience. You can now more easily see when users have poor experiences on your website, and poor UX also has a bigger impact on SEO.

That means you need to test your website to identify optimizations. Beyond that, monitoring ensures that you can stay ahead of your Core Web Vitals scores for the long term.

Let’s find out how to work with different types of Core Web Vitals data and how monitoring can help you gain a deeper insight into user experiences and help you optimize them.

What Are Core Web Vitals?

There are three web vitals metrics Google uses to measure different aspects of website performance:

  • Largest Contentful Paint (LCP),
  • Cumulative Layout Shift (CLS),
  • Interaction to Next Paint (INP).

Largest Contentful Paint (LCP)

The Largest Contentful Paint metric is the closest thing to a traditional load time measurement. However, LCP doesn’t track a purely technical page load milestone like the JavaScript Load Event. Instead, it focuses on what the user can see by measuring how soon after opening a page, the largest content element on the page appears.

The faster the LCP happens, the better, and Google rates a passing LCP score below 2.5 seconds.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift is a bit of an odd metric, as it doesn’t measure how fast something happens. Instead, it looks at how stable the page layout is once the page starts loading. Layout shifts mean that content moves around, disorienting the user and potentially causing accidental clicks on the wrong UI element.

The CLS score is calculated by looking at how far an element moved and how big the element is. Aim for a score below 0.1 to get a good rating from Google.

Interaction to Next Paint (INP)

Even websites that load quickly often frustrate users when interactions with the page feel sluggish. That’s why Interaction to Next Paint measures how long the page remains frozen after user interaction with no visual updates.

Page interactions should feel practically instant, so Google recommends an INP score below 200 milliseconds.

What Are The Different Types Of Core Web Vitals Data?

You’ll often see different page speed metrics reported by different tools and data sources, so it’s important to understand the differences. We’ve published a whole article just about that, but here’s the high-level breakdown along with the pros and cons of each one:

  • Synthetic Tests
    These tests are run on-demand in a controlled lab environment in a fixed location with a fixed network and device speed. They can produce very detailed reports and recommendations.
  • Real User Monitoring (RUM)
    This data tells you how fast your website is for your actual visitors. That means you need to install an analytics script to collect it, and the reporting that’s available is less detailed than for lab tests.
  • CrUX Data
    Google collects from Chrome users as part of the Chrome User Experience Report (CrUX) and uses it as a ranking signal. It’s available for every website with enough traffic, but since it covers a 28-day rolling window, it takes a while for changes on your website to be reflected here. It also doesn’t include any debug data to help you optimize your metrics.
Start By Running A One-Off Page Speed Test

Before signing up for a monitoring service, it’s best to run a one-off lab test with a free tool like Google’s PageSpeed Insights or the DebugBear Website Speed Test. Both of these tools report with Google CrUX data that reflects whether real users are facing issues on your website.

Note: The lab data you get from some Lighthouse-based tools — like PageSpeed Insights — can be unreliable.

INP is best measured for real users, where you can see the elements that users interact with most often and where the problems lie. But a free tool like the INP Debugger can be a good starting point if you don’t have RUM set up yet.

How To Monitor Core Web Vitals Continuously With Scheduled Lab-Based Testing

Running tests continuously has a few advantages over ad-hoc tests. Most importantly, continuous testing triggers alerts whenever a new issue appears on your website, allowing you to start fixing them right away. You’ll also have access to historical data, allowing you to see exactly when a regression occurred and letting you compare test results before and after to see what changed.

Scheduled lab tests are easy to set up using a website monitoring tool like DebugBear. Enter a list of website URLs and pick a device type, test location, and test frequency to get things running:

As this process runs, it feeds data into the detailed dashboard with historical Core Web Vitals data. You can monitor a number of pages on your website or track the speed of your competition to make sure you stay ahead.

When regression occurs, you can dive deep into the results using DebuBears’s Compare mode. This mode lets you see before-and-after test results side-by-side, giving you context for identifying causes. You see exactly what changed. For example, in the following case, we can see that HTTP compression stopped working for a file, leading to an increase in page weight and longer download times.

How To Monitor Real User Core Web Vitals

Synthetic tests are great for super-detailed reporting of your page load time. However, other aspects of user experience, like layout shifts and slow interactions, heavily depend on how real users use your website. So, it’s worth setting up real user monitoring with a tool like DebugBear.

To monitor real user web vitals, you’ll need to install an analytics snippet that collects this data on your website. Once that’s done, you’ll be able to see data for all three Core Web Vitals metrics across your entire website.

To optimize your scores, you can go into the dashboard for each individual metric, select a specific page you’re interested in, and then dive deeper into the data.

For example, you can see whether a slow LCP score is caused by a slow server response, render blocking resources, or by the LCP content element itself.

You’ll also find that the LCP element varies between visitors. Lab test results are always the same, as they rely on a single fixed screen size. However, in the real world, visitors use a wide range of devices and will see different content when they open your website.

INP is tricky to debug without real user data. Yet an analytics tool like DebugBear can tell you exactly what page elements users are interacting with most often and which of these interactions are slow to respond.

Thanks to the new Long Animation Frames API, we can also see specific scripts that contribute to slow interactions. We can then decide to optimize these scripts, remove them from the page, or run them in a way that does not block interactions for as long.

Conclusion

Continuously monitoring Core Web Vitals lets you see how website changes impact user experience and ensures you get alerted when something goes wrong. While it’s possible to measure Core Web Vitals using a wide range of tools, those tools are limited by the type of data they use to evaluate performance, not to mention they only provide a single snapshot of performance at a specific point in time.

A tool like DebugBear gives you access to several different types of data that you can use to troubleshoot performance and optimize your website, complete with RUM capabilities that offer a historial record of performance for identifying issues where and when they occur. Sign up for a free DebugBear trial here.

Posted on

9 Best Canva Alternatives for Website Graphics (Expert Pick)

Are you looking for the best Canva alternatives?

Canva is an online tool that lets beginners create stunning images for their websites. It’s affordable and easier to use than Photoshop, but it may not be the best choice for everyone.

In this article, we will share some of the best Canva alternatives for creating breathtaking images for your WordPress website.

Best Canva Alternatives for Website Graphics

What Is Canva?

When you create a WordPress website, adding high-quality images is one of the best ways to improve the way users engage with your content.

You may want to make a logo for your website, create a website banner to grab the attention of your visitors and add images to your blog posts to create interest and break up the text.

However, most users are not designers and may lack the skills needed to use complex graphic design software like Adobe Photoshop.

That’s what makes Canva so popular.

Canva is a beginner-friendly alternative to Photoshop that runs on the web and doesn’t need to be installed on your computer. It comes with a huge number of helpful templates that let you create all types of stunning images for your website or online store using drag-and-drop.

It’s a complete all-in-one graphic design tool that lets you enhance photos, design featured images and infographics, create product images, and much more. Pro members can use the app to develop a complete brand kit for their sites, including fonts, color palettes, and logos.

Best of all, Canva has affordable freemium pricing. You can use the app for free, and subscribing to the Pro plan gives you access to premium templates, photos, and icons.

Why Look For Canva Alternatives?

If Canva is so good, then why consider an alternative? Well, it comes down to personal preferences and the features you require to create your images.

Canva is an online tool, but some users may prefer to use graphic design software that is installed on their computer. Luckily, there are some excellent Canva alternatives for both Mac and Windows.

Other users may not need all of the features that Canva offers or prefer a tool that offers more specialized features. For example, on WPBeginner, many of our images are screenshots, and there are better apps designed with this use case in mind.

Some users have a limited budget and prefer to avoid ongoing subscriptions. And while Canva uses artificial intelligence for some features, some users may be looking for a graphics tool with stronger artificial intelligence (AI) capabilities.

With that being said, let’s take a look at some of the best Canva alternatives for website graphics.

1. Adobe Express (Online Graphic Design)

Adobe Express

Adobe Express is Adobe’s answer for people who are looking for a Photoshop alternative with a lower learning curve that’s based in the cloud.

It offers image templates like Canva that help you get started on your images. Then, you can use its graphics editor to crop the image and add visual elements.

If you enjoy using artificial intelligence, then you will appreciate the app’s generative AI features, such as text-to-image tools and text effects. You can even come up with unique images and text styles by simply writing a prompt.

Adobe Express

Adobe Express is free to use. There are also Premium and Team plans, and if you are already an Adobe subscriber, then you can use it with their other tools like Adobe Stock and Fonts to further enhance your blog post images.

Pros:

  • Online tool
  • More features than Canva
  • Affordable freemium pricing model
  • Works well with other Adobe services

Cons:

  • Requires an internet connection
  • Some features and resources are not included in the free plan

Why we chose Adobe Express: Adobe Express is an easier-to-use graphics tool by the people who create the industry standard, Photoshop. Like Canva, it is a web-based app that is designed to be easy to use.

2. Visme (Online Graphic Design)

Visme

Visme has a lot in common with Canva. It’s a freemium web platform designed to let you create beautiful, engaging, and on-brand graphical content for your website.

Like Canva, it offers a vast library of templates, graphics, and customizable elements. This tool lets you easily create website banners, infographics, charts, and more to graphically enhance your site.

However, Vimse offers more features than Canva, making it a good choice for people who feel limited when using Canva.

For example, it is stronger at creating interactive content such as charts, maps, and data widgets. However, beginners will find it has a slightly steeper learning curve.

Visme

Pros:

  • More features than Canva
  • Online tool
  • Affordable freemium pricing model

Cons:

  • Requires an internet connection
  • Slightly steeper learning curve than Canva
  • Some features and resources are not included in the free plan

Why we chose Visme: Visme is a popular graphic design tool used by over 23 million people in 133 countries. It is affordable, web-based, and a close competitor of Canva.

3. Affinity Photo 2 (Photo Editor for Windows, Mac & iPad)

Affinity Photo

Affinity Photo 2 is full-featured photo editing software that runs on Windows, Mac, and iPad. It offers advanced tools and features similar to Adobe Photoshop.

While Canva is designed to cover a wide range of graphics tasks, Affinity Photo is focused on photo editing for people who need advanced features. However, the company also offers a whole suite of software to meet the needs of illustrators, designers, publishers, and more.

We use Affinity Photo, along with its sister program, Affinity Designer, to create many of the images on WPBeginner. With its advanced tools, beginners will find it has a steeper learning curve than Canva.

Affinity Photo can be purchased with a one-off payment for each platform, with no ongoing subscription required.

Affinity Photo

Pros:

  • Advanced photo editing features
  • Other Affinity apps are available for illustrators, designers, and publishers
  • Available for Windows and Mac
  • One-off payment with no ongoing subscription costs

Cons:

  • A little expensive, especially if you purchase multiple apps
  • Steeper learning curve than Canva

Why we chose Affinity Photo: Affinity Photo is an advanced photo editing tool that we use for images on WPBeginner.

Alternative: Pixelmator

4. Snagit (Screen Capture for Windows & Mac)

Snagit

Snagit is not a direct competitor of Canva but is a better choice if you need to create a lot of screenshots for your website. You can use its screen capture feature to create and annotate screenshots and webcasts of the software you write about.

You can download the Snagit software for Mac and Windows with a single purchase. However, if you wish to access Snagit assets such as stamps, templates, themes, and photos, then an ongoing subscription is required.

Snagit lets you accurately specify which part of the screen you wish to capture and whether to preview it in the editor. The built-in Snagit editor gives you access to templates and flexible markup tools that let you customize your screenshots.

Snagit

The application features text recognition that allows you to easily edit and customize the text in your screenshot. Besides that, it recognizes elements on the screen, such as buttons, and allows you to move or remove them.

Pros:

  • Excellent tool for creating and marking up screenshots
  • Available for Windows and Mac
  • One-off payment with no ongoing subscription costs

Cons:

  • Not an all-in-one graphic design tool
  • An ongoing subscription is required for Snagit assets

Why we chose Snagit: Snagit is a highly rated screen capture application for Windows and Mac. If you create a lot of screenshots for your website, then it is a better tool than Canva.

Alternative: GreenShot (free and open-source software for Windows)

5. Piktochart (Online Infographic Maker)

Piktochart

Piktochart is an easy-to-use online infographic maker. It provides over 600 professional templates that let you quickly create infographics, presentations, posters, and reports.

Once you’ve chosen a template, you can easily customize it using the drag-and-drop editor. There are plenty of free images, icons, and illustrations, and you can add your own charts and graphs, maps, icons, photos, and videos.

Piktochart can use AI to make creating images more efficient. For example, the Smart Templates feature automatically generates new templates tailored to your preferences, and Smart Suggestions recommends suitable fonts, colors, and icons to improve visual appeal.

Like Canva, it uses a freemium pricing model that lets you start to use the app free of charge, but with basic features and limited storage. Affordable paid plans remove these restrictions.

Piktochart

Pros:

  • Online tool
  • Focused on infographics
  • AI tools to streamline image creation
  • Freemium model with affordable plans

Cons:

  • Requires an internet connection
  • Free plan does not include all features

Why we chose Piktochart: Piktochart is an excellent alternative to Canva for users who create infographics and similar artwork for their blogs.

6. Pixlr (Online Photo Editor)

Pixlr

Pixlr is a freemium online photo editing tool that is created for beginners and non-designers. It offers similar features to Photoshop but in a beginner-friendly way. This makes it more powerful than Canva for photo retouching, detailed adjustments, and advanced editing.

Like Canva, Pixlr offers plenty of pre-made templates to help you get started, and you can customize your images to fit your content needs. It has affordable pricing, and the free version will suit many users’ needs.

Pixlr also lets you create new images using AI. Simply write a descriptive prompt that describes the type of image you need, and Pixlr will make it for you automatically.

Pixlr AI prompt

Pros:

  • Advanced photo editing tools
  • AI tools for creating new images from a prompt
  • Online tool
  • Affordable freemium pricing

Cons:

  • Requires an internet connection
  • The free version is ad-supported, has limited features and storage, and does not include AI tools

Why we chose Pixlr: Pixlr is similar to Canva in many ways but is much better than it is when it comes to advanced editing and artificial intelligence features.

7. Picmaker (Online Graphics Tool for Social Media)

Picmaker

Picmaker is an easy-to-use online graphic design tool like Canva, but its features are focused on creating images for YouTube and social media. Both apps have easy-to-use interfaces and a library of templates that lets beginners get started on new designs quickly.

If you are a digital content maker focused on YouTube, then you will appreciate Picmaker’s tools and templates optimized for YouTube channel visuals. For example, it offers easy-to-use tools for creating YouTube thumbnails, channel art, and other visuals.

Picmaker uses AI to streamline the design process in a few ways. For example, it can use AI to analyze your preferences and recommend suitable templates and design elements like Canva does, and it also uses AI to help maintain brand consistency.

Picmaker offers both free and paid plans. However, you are likely to outgrow the free plan very quickly.

Picmaker

Pros:

  • Online tool
  • Affordable plans
  • Features for creating YouTube and social media images

Cons:

  • Requires an internet connection
  • The free version lacks many features

Why we chose Picmaker: Picmaker is highly rated by its users. It is a good alternative to Canva for YouTubers and social media marketers.

8. Fotor (Online Photo Editor)

Fotor

Fotor is a freemium online photo editing tool. It offers tools for photo editing, collage-making, and design and is suitable for users with varying levels of design experience.

While Canva offers a more versatile approach, Fotor is focused on photo editing and design. It provides tools for users who require detailed image enhancement and creative design options.

Fotor also includes several AI tools, including an AI background remover, AI photo object removal, and an AI image generator that allows you to create images by typing in text prompts.

The free version doesn’t include these AI tools, but otherwise will work well for many users. Paid plans are very affordable.

Fotor

Pros:

  • Online tool
  • Includes AI features, including image creation
  • Freemium pricing model with affordable plans

Cons:

  • Requires an internet connection

Why we chose Fotor: Fotor is an affordable online photo editor with smart AI features.

9. PicMonkey (Online Graphics Tool for Social Media)

PicMonkey

PicMonkey is an easy-to-use online image editor created by Shutterstock. Like Picmaker, it is focused on creating appealing images for YouTube and social media and includes templates for logos, banners, thumbnails, and more.

While Canva’s approach is more versatile, PicMonkey offers better photo editing tools and creative design capabilities, such as image retouching, filters, overlays, textures, and effects. It is more suitable for users looking for detailed image enhancement and design options.

The free version has ample features for creating stunning graphic designs. They also offer more powerful paid plans.

PicMonkey

Pros:

  • Online tool
  • Features for creating YouTube and social media images
  • The free plan will meet many users’ needs

Cons:

  • Requires an internet connection

Why we chose PicMonkey: PicMonkey is an easy-to-use online tool suitable for YouTube and social media images.

BONUS: GIMP (Graphic Design for Windows, Mac & Linux)

GIMP

GIMP is a powerful open-source alternative to Photoshop. While Canva and our other alternatives aim to make graphic design easier, GIMP provides a full-featured app for experienced graphic designers free of charge.

GIMP is suitable for users who require more advanced features and are not looking for a beginner-friendly interface. It offers a wide array of tools for photo retouching, image editing, and graphic design and is similar to Adobe Photoshop in many ways.

Pros:

  • Open-source and completely free
  • More powerful than Canva

Cons:

  • Does not offer a wide range of templates as an easy starting point
  • Has a high learning curve and is not beginner-friendly

Why we chose GIMP: GIMP is a popular open-source graphic design application. It’s suitable for experienced users who prioritize power over ease of use.

What Is the Best Canva Alternative?

Canva remains an excellent option for creating web graphics. It’s affordable, easy to use, quite powerful, and able to do a wide range of graphics tasks. And because it’s an online tool, it’s instantly available on any computer you use.

Visme is the best direct competitor. It’s a similar online tool that covers a lot of graphics tasks with an easy-to-use interface. However, it has a different user interface that may suit your workflow better.

However, if you prefer not to rely on an internet connection when doing graphic design work, then Adobe Express and Affinity Photo 2 are excellent choices. They can be installed permanently on Windows and Mac.

All of these apps cover a lot of ground and allow you to create all sorts of images quickly and easily. However, if you tend to create more specialized images, then there may be a better tool with the specific features that you need:

  • For creating marked-up screenshots, Snagit has intelligent features that make it easy to take and customize screenshots on Windows or Mac.
  • If you create images for social media or a YouTube channel, then Picmaker and PicMonkey are the best Canva alternatives.
  • For creating infographics online, there’s no better choice than Piktochart.
  • For detailed photo editing, Pixlr and Fotor are the best beginner-friendly online tools.

FAQs About Website Graphics

Our users regularly ask us questions about the best ways to use images on their websites. Here are some of the answers to the most frequently asked questions about website graphics.

What are website graphics, and why are they important?

Adding graphic elements to your website can make your content more identifiable, convey information, add interest, break up long blocks of text, and improve user engagement.

Typical website graphics include a website logo and banner for branding purposes and blog post images that may include a featured image, infographics, screenshots, and more.

What graphics file formats should I use for my site?

There are several types of image formats typically used on websites, and the format you should choose depends on the image itself.

PNG will give the best quality for images with a low number of colors, such as screenshots. However, they become very large when images have a lot of colors, such as photos. In this case, JPEG is a better choice. For animated images, GIF is the best format.

WebP is a new format that maintains better quality when compressed to smaller file sizes. However, because it is so new, it is still usually better to use one of the other formats.

For more information, see our guide on the best image format for WordPress.

What are the best practices for using graphics on a website?

It is important to optimize your images for small file sizes. Otherwise, your web pages may load too slowly. You should also aim for consistency in design that fits with your branding.

What are some copyright and licensing considerations for website graphics?

Make sure that you have the proper rights to use any website graphics that you didn’t create yourself, such as stock images.

This may involve purchasing a license or using royalty-free images.

Best WordPress Guides for Website Graphics

Now that you know the best Canva alternatives, you may wish to see some other guides related to website graphics:

We hope this tutorial helped you find the best Canva alternative for website graphics. You may also want to see our guide on how to fix common image issues in WordPress or our expert pick for the best Instagram WordPress plugins.

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 9 Best Canva Alternatives for Website Graphics (Expert Pick) first appeared on WPBeginner.

Posted on

Compliance With Data Protection Regulations Such as GDPR in Sports Betting Platforms in North Carolina

In North Carolina, integrating sports betting platforms with data protection regulations, such as the General Data Protection Regulation (GDPR), illustrates a critical juncture between technological advancement and regulatory compliance. As these platforms gain traction, the...

The post Compliance With Data Protection Regulations Such as GDPR in Sports Betting Platforms in North Carolina appeared first on 85ideas.com.

Posted on

Sketchnotes And Key Takeaways From SmashingConf Antwerp 2023

I have been reading and following Smashing Magazine for years — I’ve read many of the articles and even some of the books published. I’ve also been able to attend several Smashing workshops, and perhaps one of the peak experiences of my isolation times was the online SmashingConf in August 2020. Every detail of that event was so well-designed that I felt genuinely welcomed. The mood was exceptional, and even though it was a remote event, I experienced similar vibes to an in-person conference. I felt the energy of belonging to a tribe of other great design professionals.

I was really excited to find out that the talks at SmashingConf Antwerp 2023 were going to be focused on design and UX! This time, I attended remotely again, just like back in 2020: I could watch and live-sketch note seven talks (and I’m already looking forward to watching the remaining talks I couldn’t attend live).

Even though I participated remotely, I got really inspired. I had a lot of fun, and I felt truly involved. There was an online platform where the talks were live-streamed, as well as a dedicated Slack channel for the conference attendees. Additionally, I shared my key takeaways and sketchnotes right after each talk on social media. That way, I could have little discussions around the topics &mdash, even though I wasn’t there in person.

In this article, I would like to offer a brief summary of each talk, highlighting my takeaways (and my screenshots). Then, I will share my sketchnotes of those seven talks (+ two more I watched after the conference).

Day 1 Talks

Introduction

At the very beginning of the conference, Vitaly said hello to everyone watching online, so even though I participated remotely, I felt welcomed. :-) He also shared that there is an overarching mystery theme of the conference, and the first one who could guess it would get a free ticket for the next Smashing conference — I really liked this gamified approach.

Vitaly also reminded us that we should share our success stories as well as our failure stories (how we’ve grown, learned, and improved over time).

We were introduced to the Pac-man rule: if we are having a conversation, and someone is speaking from the back and wants to join, open the door for them — just like Pac-man does (well, Pac-man opens his mouth because he wants to eat, you want to encourage conversations).

In between talks, Vitaly told us a lot of design jokes; for instance, this one related to design systems was a great fit for the first talk:

Where did Gray 500 and Button Primary go on their first date?

To a naming convention.

After this little warm-up, Molly Hellmuth delivered the first talk of the event. Molly has been a great inspiration for me not only as a design system consultant but also as a content creator and community builder. I’m also enthusiastic about learning the more advanced aspects of Figma, so I was really glad that Molly chose this topic for her talk.

“Design System Traps And Pitfalls” by Molly Hellmuth

Molly is a design system expert specializing in Figma design systems, and she teaches a course called Design System Bootcamp. Every time she runs this course, she sees students make similar mistakes. In this talk, she shared the most common mistakes and how to avoid them.

Molly shared the most common mistakes she experienced during her courses:

  • Adopting new features too quickly,
  • Adding too many color variables,
  • Using groups instead of frames,
  • Creating jumbo component sets,
  • Not prepping icons for our design system.

She also shared some rapid design tips:

  • Set the nudge amount to 8
  • We can hide components in a library by adding a period or an underscore
  • We can go to a specific layer by double-clicking on the layer icon
  • Scope variables, e.g., colors meant for text is, only available for text
  • Use auto layout stacking order (it is not only for avatars, e.g., it is great for dropdown menus, too).

“How AI Ate My Website” by Luke Wroblewski

I have been following Luke Wroblewski since the early days of my design career. I read his book “Web Form Design: Filling in the Blanks” back in 2011, so I was really excited to attend his talk. Also, the topic of AI and design has been a hot one lately, so I was very curious about the conversational interface he created.

Luke has been creating content for 27 years; for example, there are 2,012 articles on his website. There are also videos, books, and PDFs. He created an experience that lets us ask questions from AI that have been fed with this data (all of his articles, videos, books, and so on).

In his talk, he explained how he created the interaction pattern for this conversational interface. It is more like a FAQ pattern and not a chatbot pattern. Here are some details:

  • He also tackled the “what I should ask” problem by providing suggested questions below the most recent answer; that way, he can provide a smoother, uninterrupted user flow.

  • He linked all the relevant sources so that users can dig deeper (he calls it the “object experience”). Users can click on a citation link, and then they are taken to, e.g., a specific point of a video.

He also showed us how AI eats all this stuff (e.g., processing, data cleaning) and talked about how it assembles the answers (e.g., how to pick the best answers).

So, to compare Luke’s experience to e.g., Chat GPT, here are some points:

  • It is more opinionated and specific (Chat GPT gives a “general world knowledge” answer);
  • We can dig deeper by using the relevant resources.

You can try it out on the ask.lukew.com website.

“A Journey in Enterprise UX” by Stéphanie Walter

Stéphanie Walter is also a huge inspiration and a designer friend of mine. I really appreciate her long-form articles, guides, and newsletters. Additionally, I have been working in banking and fintech for the last couple of years, so working for an enterprise (in my case, a bank) is a situation I’m familiar with, and I couldn’t wait to hear about a fellow designer’s perspective and insights about the challenges in enterprise UX.

Stéphanie’s talk resonated with me on so many levels, and below is a short summary of her insightful presentation.

On complexity, she discussed the following points:

  1. Looking at quantitative data: What? How much?
    Doing some content analysis (e.g., any duplicates?)
  2. After the “what” and discovering the “as-is”: Why? How?
    • By getting access to internal users;
    • Conducting task-focused user interviews;
    • Documenting everything throughout the process;
    • “Show me how you do this today” to tackle the “jumping into solutions” mindset.

Stéphanie shared with us that there are two types of processes:

  • Fast track
    Small features, tweaks on the UI — in these cases, there is no time or no need to do intensive research; it involves mostly UI design.
  • Specific research for high-impact parts
    When there is a lot of doubt (“we need more data”). It involves gathering the results of the previous research activities; scheduling follow-up sessions; iterating on design solutions and usability testing with prototypes (usually using Axure).
    • Observational testing
      “Please do the things you did with the old tool but with the new tool” (instead of using detailed usability test scripts).
    • User diary + longer studies to help understand the behavior over a period of time.

She also shared what she wishes she had known sooner about designing for enterprise experiences, e.g., it can be a trap to oversimplify the UI or the importance of customization and providing all the data pieces needed.

It was also very refreshing that she corrected the age-old saying about user interfaces: you know, the one that starts with, “The user interface is like a joke...”. The thing is, sometimes, we need some prior knowledge to understand a joke. This fact doesn’t make a joke bad. It is the same with user interfaces. Sometimes, we just need some prior knowledge to understand it.

Finally, she talked about some of the main challenges in such environments, like change management, design politics and complexity.

Her design process in enterprise UX looks like this:

  • Complexity
    How am I supposed to design that?
  • Analysis
    Making sense of this complexity.
  • Research
    Finding and understanding the puzzle pieces.
  • Solution design
    Eventually, everything clicks into place.

The next talk was about creating a product with a Point of View, meaning that a product’s tone of voice can be “unique,” “unexpected,” or “interesting.”

“Designing A Product With A Point Of View” by Nick DiLallo

Unlike in the case of the other eight speakers whose talks I sketched, I wasn’t familiar with Nick’s work before the conference. However, I’m really passionate about UX writing (and content design), so I was excited to hear Nick’s points. After his talk, I have become a fan of his work; check out his great articles on Medium).

In his talk, Nick DiLallo shared many examples of good and not-so-good UX copies.

His first tip was to start with defining our target audience since the first step towards writing anything is not writing. Rather, it is figuring out who is going to be reading it. If we manage to define who will be reading as a starting point, we will be able to make good design decisions for our product.

For instance, instead of designing for “anyone who cooks a lot”, it is a lot better to design for “expert home chefs”. We don’t need to tell them to “salt the water when they are making pasta”.

After defining our audience, the next step is saying something interesting. Nick’s recommendation is that we should start with one good sentence that can unlock the UI and the features, too.

The next step is about choosing good words; for example, instead of “join” or “subscribe,” we can say “become a member.” However, sometimes we shouldn’t get too creative, e.g., we should never say “add to submarine” instead of “add to cart” or “add to basket”.

We should design our writing. This means that what we include signals what we care about, and the bigger something is visual, the more it will stand out (it is about establishing a meaningful visual hierarchy).

We should also find moments to add voice, e.g., the footer can contain more than a legal text. On the other hand, there are moments and places that are not for adding more words; for instance, a calendar or a calculator shouldn’t contain brand voice.

Nick also highlighted that the entire interface speaks about who we are and what our worldview is. For example, what options do we include when we ask the user’s gender?

He also added that what we do is more important than what we write. For example, we can say that it is a free trial, but if the next thing the UI asks is to enter our bank card details, well, it’s like saying that we are vegetarian, and then we eat a cheeseburger in front of me.

Nick closed his talk by saying that companies should hire writers or content designers since words are part of the user experience.

“When writing and design work together, the results are remarkable.”

“The Invisible Power of UI Typography” by Oliver Schöndorfer

This year, Oliver has quickly become one of my favorite design content creators. I attended some of his webinars, I’m a subscriber of his Font Friday newsletter, and I really enjoy his “edutainment style”. He is like a stand-up comedian. His talks and online events are full of great jokes and fun, but at the same time, Oliver always manages to share his extensive knowledge about typography and UI design. So I knew that the following talk was going to be great. :)

During his talk, Oliver redesigned a banking app screen live, gradually adding the enhancements he talked about. His talk started with this statement:

“The UI is the product, and a big part of it is the text.”

After that, he asked an important question:

“How can we make the type work for us?”

Some considerations we should keep in mind:

  • Font Choice
    System fonts are boring. We should think about what the voice of our product is! So, pick fonts that:
    • are in the right category (mostly sans, sometimes slabs),
    • have even strokes with a little contrast (it must work in small sizes),
    • have open-letter shapes,
    • have letterforms that are easy to distinguish (the “Il1” test).

  • Hierarchy
    i.e. “What is the most important thing in this view?”

Start with the body text, then emphasize and deemphasize everything else — and watch out for the accessibility aspects (e.g. minimum contrast ratios).

Accessibility is important, too!

  • Spacing
    Relations should be clear (law of proximity) and be able to define a base unit.

Then we can add some final polish (and if it is appropriate, some delight).

As Oliver said, “Go out there and pimp that type!”

Day 2 Talks

“Design Beyond Breakpoints” by Christine Vallaure

I’m passionate about the designer-developer collaboration topic (I have a course and some articles about it), so I was very excited to hear Christine’s talk! Additionally, I really appreciate all the Figma content she shares, so I was sure that I’d learn some new exciting things about our favorite UI design software.

Christine’s talk was about pushing the current limits of Figma: how to do responsive design in Figma, e.g., by using the so-called container queries. These queries are like media queries, but we are not looking at the viewport size. Instead, we are looking at the container. So a component behaves differently if, e.g., it is inside a sidebar, and we can also nest container queries, e.g., tell an icon button inside a card that upon resizing, the icon should disappear).

Recommended Reading: A Primer On CSS Container Queries by Stephanie Eckles

She also shared that there is a German fairy tale about a race between a hedgehog and a rabbit. The hedgehog wins the race even though he is slower. Since he is smarter, he sends his wife (who looks exactly like him) to the finish line in advance. Christine told us that she had mixed feelings about this story because she didn’t like the idea of pretending to be fast when someone has other great skills. In her analogy, the rabbits are the developers, and the hedgehogs are the designers. Her lesson was that we should embrace each others’ tools and skills instead of trying to mimic each others’ work.

The lesson of the talk was not really about pushing the limits. Rather, the talk was about reminding us of why we are doing all this:

  • To communicate our design decisions better to the developers,
  • To try out how our design behaves in different cases (e.g., where it should break and how), and
  • It is also great for documentation purposes; she recommended the EightShapes Specs plugin by Nathan Curtis.

Her advice is:

  • We should create a playground inside Figma and try out how our components and designs work (and let developers try out our demo, too);
  • Have many discussions with developers, and don’t start these discussions from zero, e.g., read a bit about frontend development and have a fundamental knowledge of development aspects.

“It’s A Marathon, And A Sprint” by Fabricio Teixeira

If you are a design professional, you have surely encountered at least a couple of articles published by the UX Collective, a very impactful design publication. Fabricio is one of the founders of that awesome corner of the Internet, so I knew that his talk would be full of insights and little details. He shared four case studies and included a lot of great advice.

During his talk, Fabricio used the analogy of running. When we prepare for a long-distance running competition, 80% of the time, we should do easy runs, and 20% of the time should be devoted to intensive because short interval runs get the best results. He also highlighted that just like during a marathon running, things will get hard during our product design projects, but we must remember how much we trained. When someone from the audience asked how not to get overly confident, he said that we should build an environment of trust so that other people on our team can make us realize if we’ve become too confident.

He then mentioned four case studies; all of these projects required a different, unique approach and design process:

  • Product requirements are not required.
    Vistaprint and designing face masks — the world needed them to design really fast; it was a 15-day sprint, and they did not have time to design all the color and sizing selectors (and only after the launch did it turn into a marathon).

  • Timelines aren’t straight lines.
    The case study of Equinox treadmill UI: they created a fake treadmill to prototype the experience; they didn’t wait for the hardware to get completed (the hardware got delayed due to manufacturing issues), so there was no delay in the project even in the face of uncertainty and ambiguity. For example, they took into account the hand reach zones, increased the spacing between UI elements so that these remained usable even while the user was running, and so on.

Exciting challenge: Average treadmill interface, a complicated dashboard, everything is fighting for our attention.

  • Research is a mindset, not a step.
    He mentioned the Gofundme project, where they applied a fluid approach to research meaning that design and research ran in parallel, the design informed research and vice versa. Also, insights can come from anyone from the team, not just from researchers. I really liked that they started a book club, everyone read a book about social impact, and they created a Figma file that served as a knowledge hub.

  • Be ready for some math
    During the New York City Transit project, they created a real-time map of the subway system, which required them to create a lot of vectors and do some math. One of the main design challenges was, “How to clean up complexity?”

Fabricio shared that we should be “flexibly rigorous”: just as during running, we should listen to our body, we should listen to the special context of a given project. There is no magic formula out there. Rigor and discipline is important, but we must listen to our body so that we don’t lose touch of reality.

The key takeaway is that because, we as a design community focus a lot on processes, and of course there is no one way to do design, we should combine sprints and marathons, adjust our approach to the needs of the given project, and most of all, focus more on principles, e.g. how we, as a team, want to work together?

A last note is when Fabricio mentioned in the post-talk discussion with Vitaly Friedman that having a 1–3-hour long kick-off meeting with our team is too short, we will work on something for e.g. 6 months, so Fabricio’s team introduced kick-off weeks.

Kat delivered one of the most important talks (or maybe the most important talk) of the conference. The ethics of design is a topic that has been around for many years now. Delivering a talk like this is challenging because it requires a perspective that easily gets lost in our everyday design work. I was really curious about how Kat would make us think and have us question our way of working.

“Design Ethically: From Imperative To Action” by Kat Zhou

Kat’s talk walked us through our current reality such as how algorithms have built in biases, manipulate users, hide content that shouldn’t be hidden, and don’t block things that shouldn’t be allowed. The main question, however, is:

Why is that happening? Why do designers create such experiences?

Kat’s answer is that companies must ruthlessly design for growth. And we, as designers, have the power to exercise control over others.

She showed us some examples of what she considers oppressive design, like the Panopticon by Jeremy Bentham. She also provided an example of hostile architecture (whose goal is to prevent humans from resting in public places). There are also dark patterns within digital experiences similar to the New York Times subscription cancellation flow (users had to make a call to cancel).

And the end goal of oppressive design is always to get more user data, more users’ time, and more of the users’ money. What amplifies this effect is that from an employee’s (designer’s) perspective, the performance is tied to achieving OKRs.

Our challenge is how we might redesign the design process so that it doesn’t perpetuate the existing systems of power. Kat’s suggestion is that we should add some new parts to the design process:

  • There are two phases:
    Intent: “Is this problem a worthy problem to solve?”
    Results: “What consequences do our solutions have? Who is it helping? Who is it harming?”
  • Add “Evaluate”:
    “Is the problem statement we defined even ethically worthy of being addressed?”
  • Add “Forecast”:
    “Can any ethical violations occur if we implement this idea?”
  • Add “Monitor”:
    “Are there any new ethical issues occurring? How can we design around them?”

Kat shared a toolkit and framework that help us understand the consequences of the things we are building.

Kat talked about forecasting in more detail. As she said,

“Forecasted consequences often are design problems.”

Our responsibility is to design around those forecasted consequences. We can pull a product apart by thinking about the layers of effect:

  • The primary layer of effect is intended and known, e.g.: Google Search is intended and known as a search engine.
  • The secondary effect is also known, and intended by the team, e.g. Google Search is an ad revenue generator.
  • The tertiary effect: typically unintended, possibly known, e.g. Algorithms of Oppression, Safiya Umoja Noble talks about the biases built in Google Search.

So designers should define and design ethical primary and secondary effects, and forecast tertiary effects, and ensure that they don’t pose any significant harm.

I first encountered atomic design in 2015, and I remember that I was so fascinated by the clear logical structure behind this mental model. Brad is one of my design heroes because I really admire all the work he has done for the design community. I knew that behind the “clickbait title” (Brad said it himself), there’ll be some great points. And I was right: he mentioned some ideas I have been thinking about since his talk.

“Is Atomic Design Dead?” by Brad Frost

In the first part of the talk, Brad gave us a little WWW history starting from the first website all the way to web components. Then he summarized that design systems inform and influence products and vice versa.

I really liked that he listed three problematic cases:

  • When the design system team is very separated, sitting in their ivory tower.
  • When the design system police put everyone in the design system jail for detaching an instance.
  • When the product roadmaps eat the design system efforts.

He then summarized the foundations of atomic design (atoms, molecules, organisms, templates and pages) and gave a nice example using Instagram.

He answered the question asked in the title of the talk: atomic design is not dead, since it is still a useful mental model for thinking about user interfaces, and it helps teams find a balance, and equilibrium between design systems and products.

And then here came the most interesting and thought-provoking part: where do we go from here?

  1. What if we don’t waste any more human potential on designing yet another date picker, but instead, we create a global design system together, collaboratively? It’d be an unstyled component that we can style for ourselves.

  2. The other topic he brought up is the use of AI, and he mentioned Luke Wroblewski’s talk, too. He also talked about the project he is working on with Kevin Coyle: it is about converting a codebase (and its documentation) to a format that GPT 4 can understand. Brad showed us a demo of creating an alert component using ChatGPT (and this limited corpus).

His main point was that since the “genie” is out of the bottle, it is on us to use AI more responsibly. Brad closed his talk by highlighting the importance of using human potential and time for better causes than designing one more date picker.

Mystery Theme/Other Highlights

When Vitaly first got on stage, one of the things he asked the audience to keep an eye out for was an overarching mystery theme that connects all the talks. At the end of the conference, he finally revealed the answer: the theme was connected to the city of Antwerp!

Where does the name "Antwerp" come from? “Hand werpen” or “to throw a hand”. Once upon a time, there was a giant that collected money from everyone passing the river. One time, a soldier came and just cut off the hand of this giant and threw it to the other side, liberating the city. So, the story and the theme were “legends.” For instance, Molly Hellmuth included Bigfoot (Sasquatch), Stéphanie mentioned Prometheus, Nick added the word "myth" to one of his slides, Oliver applied a typeface usually used in fairy tales, Christine mentioned Sisyphus and Kat talked about Pandora’s box.

My Very Own Avatar

One more awesome thing that happened thanks to attending this conference is that I got a great surprise from the Smashing team! I won the hidden challenge 'Best Sketch Notes', and I have been gifted a personalized avatar created by Smashing Magazine’s illustrator, Ricardo.

Full Agenda

There were other great talks — I’ll be sure to watch the recordings! For anyone asking, here is the full agenda of the conference.

A huge thanks again to all of the organizers! You can check out all the current and upcoming Smashing conferences planned on the SmashingConf website anytime.

Saving The Best For Last: Photos And Recordings

The one-and-only Marc Thiele captured in-person vibes at the event — you can see the stunning, historic Bourla venue it took place in and how memorable it all must have been for the attendees! 🧡

For those who couldn’t make it in person and are curious to watch the talks, well, I have good news for you! The recordings have been recently published — you can watch them over here:


Thank you for reading! I hope you enjoyed reading this as much as I did writing it! See you at the next design & UX SmashingConf in Antwerp, maybe?

Posted on

6 Best Cheap WordPress Hosting (Compared)

Are you looking for a cheap hosting plan for your WordPress website?

When creating a new WordPress website, you will need to choose a hosting provider and a domain name. If you are starting out with a limited budget, then you need an affordable option.

In this article, we will share some of the best cheap WordPress hosting plans.

Best Cheap WordPress Hosting

Why Choose Cheap WordPress Hosting?

When you create a WordPress website, you will need to pay for two things: a web hosting plan and a domain name. Web hosting is where your website files and content are stored, and a domain name is the address your users will use to visit your site.

Because all websites need these, WordPress hosting prices are very competitive and often cover the cost of your domain name for the first year.

If you are just starting out or have a tight budget, then you may be looking for the best cheap hosting you can find. Or you might prefer not to spend much on hosting if you are creating a test website or a site for students to practice on.

We recommend that you avoid free website hosting. These companies may try to save money by limiting your website traffic, and will often try to make money by displaying ads or upselling their other services, leading to a poor experience for you and your visitors.

You will have a better experience by choosing an inexpensive plan from one of the best web hosting companies.

How to Get the Best Cheap WordPress Hosting

Reputable web hosting companies usually offer multiple pricing options so that you can find something that fits your needs and budget. Here are a few ways you can save money.

Save Money on Hosting by Choosing the Cheapest Plan

If you are just starting out or have simple needs, then you can save money by choosing the cheapest plan the hosting company offers.

But be aware that you get what you pay for. A company’s cheapest hosting plan is designed to save beginners money and is cheap because it is limited.

Hosting Plan With Cheapest Price

For example, the cheapest plans can usually only host one website and offer less storage space than more expensive plans. They also may lack features offered by other plans.

So make sure that the cheapest plan meets your needs before you choose it.

Save Money on Hosting Using an Introductory Offer or Coupon Code

Most hosting companies offer heavy discounts to new customers. That means when you first sign up for hosting, you will be paying a fraction of what the hosting normally costs.

To save even more money, you can use one of our coupon codes. We have negotiated the best web hosting deals for WPBeginner readers, so make sure you don’t miss out.

Save Money on Hosting by Paying in Advance

To get the special initial price, most hosting companies will need you to pay at least a year in advance. That’s a good thing and will save you money because you will be charged the normal amount when it is time to renew your hosting.

You can save even more money by paying for multiple years in advance. Some hosting companies allow you to pay for 3-4 years upfront.

Pay in Advance to Save Money on Hosting

Save Money on Hosting by Considering the Renewal Price

If you are looking to save money in the long term, then make sure you consider the renewal cost. The introductory discount lasts for just one payment, and the renewal price is what you will be paying for years to come.

Check Your Hosting Plan's Renewal Price

By default, most web companies will automatically renew your hosting for the same period as when you first signed up. You can save money by renewing 12 months or more in advance.

Lower Individual Payments by Paying Month-to-Month

To get the best deal on web hosting, you need to pay for a year or more in advance. While you will be saving money in the long term, your individual payments will cost more.

If you have limited money on hand, then you may prefer to pay for your web hosting month-to-month. While you will end up paying more in the long term, your monthly payments will be more manageable.

Paying for Hosting Month-to-Month

However, since the cheapest web hosting plans cost just over $30 for the first year, we recommend that you choose the month-to-month option only when absolutely necessary.

All that being said, let’s take a look at the best cheap WordPress hosting companies.

1. Bluehost

Bluehost is a good option for beginners, and their budget-friendly plans are suitable for all kinds of websites. They are one of the biggest web hosting companies and an official WordPress-recommended hosting provider.

Learn more in our complete Bluehost review.

Their Basic plan is the cheapest, and this lets you create one website with 10GB of storage and chat support. It also includes a free domain name and SSL certificate for the first year.

If you upgrade to their Choice Plus plan, then you can create 3 websites with 40GB of storage. You will also be able to contact customer support via phone.

Choose a Bluehost hosting plan

Bluehost Pros and Cons

Bluehost is reliable, fast, and affordable. Here are some pros and cons.

Pros:

  • Cheapest hosting prices for new customers
  • Free domain name
  • Free CDN + SSL certificate
  • 1-click WordPress install
  • Excellent customer support
  • Officially recommended by WordPress

Cons:

  • Hosting renewal prices are not as affordable as the cheapest companies
  • Higher renewal price for domains
  • They don’t offer month-to-month hosting

Why We Chose Bluehost

Bluehost offers affordable starter plans that fit any budget requirement, and they are often ranked the #1 web hosting provider. Their hosting plans offer tons of features and excellent support.

Bluehost Pricing

Bluehost offers many payment options. Here are some options for their Basic plan:

  • Month-to-month pricing: Not available
  • Cheapest rate: $1.99 for the first 12 months using our Bluehost coupon
  • First year in advance: $23.88 using our Bluehost coupon
  • Renewal price: $143.88 for 12 months

2. HostGator

HostGator is one of the most popular hosting companies in the world. We consider them one of the best web hosting options for businesses.

You can learn more in our complete HostGator review.

The company’s cheapest plan is the Hatchling Plan, which lets you create a single website with unlimited bandwidth and 10GB of storage. This plan also includes free domain name registration for your first year, but support will be by chat only.

Some users may prefer to upgrade to the Baby plan. This lets you create 2 websites with 20GB of storage and allows you to contact customer support via phone or chat.

HostGator Pricing Plans

HostGator Pros and Cons

HostGator offers reliable web hosting and quality customer service. Here are some of the company’s pros and cons.

Pros:

  • Affordable introductory hosting prices
  • Free domain and SSL certificate
  • Free business email address
  • 1-click WordPress install
  • Reliable web hosting

Cons:

  • The cheapest plan includes chat support only
  • Renewal prices cost more than the cheapest companies
  • Higher monthly pricing
  • HostGator uses a lot of aggressive upselling tactics

Why We Chose HostGator

HostGator offers a variety of fast hosting plans that fit all budgets and requirements. They are trusted by over 2 million customers.

HostGator Pricing

HostGator offers many payment options. Here are some of the pricing options for their Hatchling plan:

  • Month-to-month: $4.78
  • Cheapest rate: $2.52 for the first 36 months using our HostGator coupon
  • First year in advance: $30.84 using our HostGator coupon
  • Renewal price: $143.88 for 12 months

3. DreamHost

DreamHost is one of WordPress.org’s officially recommended hosts. They offer affordable introductory pricing, better-than-average ongoing renewal pricing, a free domain name and SSL certificate, automatic daily backups, and WordPress privacy features.

Learn more in our complete DreamHost review.

DreamHost’s cheapest plan is Shared Starter. This allows you to host one website with unlimited traffic. It includes a free domain name and SSL certificate.

When you upgrade to the Shared Unlimited plan, you can host unlimited websites.

Cheap DreamHost Web Hosting Plans

DreamHost Pros and Cons

DreamHost is known for making web hosting easy and affordable. You might like to see some pros and cons for the company.

Pros:

  • Officially recommended by WordPress
  • Award-winning hosting
  • Affordable introductory deals for new customers
  • The second best ongoing renewal pricing when paying a year or more in advance
  • Best price on month-to-month hosting
  • Free domain name, SSL certificate, and privacy
  • 1-click WordPress install
  • Excellent customer support
  • Automatic daily WordPress backups

Cons:

  • No free business email address

Why We Chose DreamHost

DreamHost offers fast and affordable hosting that is suitable for bloggers, online store owners, developers, and web designers. They are recommended by WordPress, have won many awards, and get excellent reviews from their customers.

DreamHost Pricing

DreamHost offers many payment options. Here are some of the pricing options for their Shared Starter plan:

  • Month-to-month: $4.95 for 3 months, then $7.99
  • Cheapest rate: $2.59 for the first 36 months using our DreamHost coupon
  • First year in advance: $35.40 using our DreamHost coupon
  • Renewal price: $83.88 for 12 months

4. Hostinger

Hostinger is a popular web hosting provider that offers affordable shared hosting plans with great customer support, a free domain name, a free SSL certificate, and more.

You can learn more in our complete Hostinger review.

Their cheapest plan is the Premium plan, which lets you create up to 100 websites with standard performance. It includes a free SSL certificate, unlimited bandwidth, and a free domain name. Customer support is by live chat.

Hostinger Pricing Plans

Hostinger Pros and Cons

Hostinger is a robust platform to host your website. You might like to see some of their other pros and cons.

Pros:

  • Affordable introductory hosting prices
  • Renewal pricing is also the most affordable when paying a year or more in advance
  • 3 months free when you sign up
  • Free SSL certificate
  • 1-click WordPress install
  • Performance-optimized hosting
  • Excellent customer support
  • Many data centers across the world

Cons:

  • Month-to-month pricing is a bit higher and requires an initial setup fee

Why We Chose Hostinger

Hostinger is the best choice for beginners who want to start a website without spending too much money. They offer great introductory deals to new customers, as well as the cheapest ongoing renewal pricing.

Hostinger Pricing

Hostinger offers many payment options, such as these options for their Single plan:

  • Month-to-month: $10.79 plus $4.99 setup fee
  • Cheapest rate: $2.69 per month for the first 48 months using our Hostinger coupon
  • First year in advance: $34.45 using our Hostinger coupon
  • Renewal price: $143.88 for 12 months

5. GreenGeeks

GreenGeeks

GreenGeeks is an environmentally friendly web hosting provider whose goal is to be as effective as possible. Their hosting plans are not the cheapest but offer great performance while saving the planet.

You can learn more in our complete GreenGeeks review.

The cheapest GreenGeeks plan is Lite, which is suitable for small websites that are just getting started. You will be able to host a single website with 50GB of storage space.

The plan includes unlimited bandwidth, a free domain name, a free SSL certificate, a free CDN, and one tree planted.

If you need more, then the Pro plan lets you host unlimited websites with unlimited storage.

Cheap GreenGeeks Web Hosting Plans

GreenGeeks Pros and Cons

GreenGeeks offers affordable plans with plenty of useful features. You might like to see some of their pros and cons.

Pros:

  • Introductory pricing for new customers is competitive
  • A free domain name
  • Free SSL certificate, CDN, and website backups
  • Environmentally-friendly hosting
  • Built-in performance tools, including LiteSpeed caching
  • Great customer support
  • 1-click WordPress install

Cons:

  • Renewal prices are more expensive than the cheapest companies
  • Their phone support isn’t available 24/7

Why We Chose GreenGeeks

GreenGeeks offers web hosting that is environmentally friendly and suitable for anyone who is just starting out.

GreenGeeks Pricing

GreenGeeks offers many payment options, such as these choices for their Lite plan:

  • Month-to-month: $11.95, plus a $15 setup fee
  • Cheapest rate: $2.95 for the first 12 months using our GreenGeeks coupon
  • First year in advance: $35.40 using our GreenGeeks coupon
  • Renewal price: $143.40 for 12 months

6. SiteGround

SiteGround is one of the most recommended WordPress hosting companies. While the introductory deal for new customers is very competitive, renewal prices for their hosting plans are more expensive.

However, SiteGround hosting is very reliable, and they provide a 99.9% uptime guarantee, so many users find the extra cost worthwhile. In fact, we use SiteGround hosting on WPBeginner.

Learn more in our complete SiteGround review.

SiteGround’s most affordable plan is StartUp. It is suitable for one website and includes 10GB of storage space. It also includes a free SSL and CDN, but not a free domain name.

Some users will want to upgrade to the GrowBig plan. It lets you host an unlimited number of websites using 20GB of storage space. However, you will still need to pay separately for a domain name.

Cheap SiteGround Web Hosting Plans

SiteGround Pros and Cons

We find SiteGround hosting to be fast and reliable. Here are some of their pros and cons.

Pros:

  • While SiteGround doesn’t focus on budget hosting, their introductory prices for new customers are comparable to other hosting companies
  • Free domain name, SSL certificate, CDN, and website backups
  • Free website migration
  • 1-click WordPress install
  • Speedy servers powered by Google Cloud
  • Excellent customer support

Cons:

  • Renewal prices are more expensive than other hosting companies

Why We Chose SiteGround

SiteGround focuses on fast and reliable web hosting with great customer support. While they are not the overall cheapest option, they have hosting plans for every budget.

SiteGround Pricing

SiteGround offers many payment options. Here are some of the pricing options for their StartUp plan:

  • Month-to-month: $19.99
  • Cheapest rate: $2.99 for the first 12 months using our SiteGround coupon
  • First year in advance: $35.88 using our SiteGround coupon
  • Renewal price: $215.88 for 12 months

What Is the Best Cheap WordPress Hosting?

Now that we’ve looked at the best cheap WordPress hosting providers, let’s put all of their pricing options into a table so we can compare them more easily.

 Cheapest MonthlyFirst YearAnnual RenewalMonth-to-Month
Bluehost$1.99$23.88$143.88n/a
HostGator$2.52$30.84$143.88$4.78
DreamHost$2.59$35.40$83.88$7.99
Hostinger$2.69$34.45$143.88$10.79
GreenGeeks$2.95$35.40$143.40$11.95
SiteGround$2.99$35.88$215.88$19.99

As you can see, Bluehost has the cheapest introductory pricing for the first year overall. This makes it easy to get started with your first website. However, you will pay more each year from your second year onwards.

HostGator is another good option. Their cheapest introductory rate can be used for the first three years of hosting. This will make the initial payment more expensive but is better value in the long run. Besides that, their renewal price for subsequent years is quite affordable.

Alternatively, DreamHost is a great choice if you are looking for the best cheap hosting. The introductory deal for new customers is very competitive, and the renewal price is the most affordable when paying for 12 months or more in advance.

DreamHost is also the best choice when paying for hosting month-to-month.

However, price is not the only consideration when choosing a hosting plan for your new website. You may like to see our guide on how to choose the best WordPress hosting. It includes a helpful quiz that will help you work through the issues and choose the best option.

FAQs About WordPress Hosting

Over the years, we have helped over 2 million users start their websites, so we hear a lot of questions about WordPress hosting. Here are some of the answers to the most frequently asked questions about WordPress hosting.

What are the costs of creating a new website?

When creating a new website, you will need to pay for web hosting and a domain name. These are ongoing costs that you will need to continue paying as long as your website is live.

Some users may pay additional costs, such as purchasing premium plugins and themes or hiring professional developers and designers.

The cost of building a WordPress website depends on what you need and can range from $100 to as high as $30,000. We have created a detailed guide explaining how much it really costs to build a WordPress website.

Do I need WordPress hosting to start a new website?

Yes, you need to choose a WordPress hosting plan before you can build a WordPress website. This is where your website files are stored.

How do I install WordPress on my WordPress hosting account?

Installing WordPress is easy. Our recommended WordPress hosting providers let you install WordPress easily with a single click.

You can see how this works in our guide on how to install WordPress on your host.

Can I change to a different WordPress hosting provider in the future?

Yes, you can absolutely switch if you are unhappy with your WordPress hosting company or your needs or budget change.

Most WordPress hosting companies offer free migration services, which makes the process fairly smooth. However, if you want to do the migration yourself, then you can follow our step-by-step guide on how to move WordPress to a new host with no downtime.

Should I use free WordPress hosting?

No, we highly recommend that you stay away from free website hosting companies.

That’s because free hosting providers usually put advertisements on your website and in some cases may even distribute malware to your users. They may also shut down your website at any time without any notification.

You can learn more in our guide on why having a ‘free website’ is a bad idea.

Expert Guides for WordPress Hosting

Now that you have learned about the best cheap hosting providers, you may like to see some other guides on WordPress hosting:

We hope this tutorial helped you find the best cheap WordPress hosting. You may also want to see our guide on important reasons why you should use WordPress for your website or our expert pick of the best analytics solutions for WordPress users.

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 6 Best Cheap WordPress Hosting (Compared) first appeared on WPBeginner.

Posted on

The End Of My Gatsby Journey

A fun fact about me is that my birthday is on Valentine’s Day. This year, I wanted to celebrate by launching a simple website that lets people receive anonymous letters through a personal link. The idea came up to me at the beginning of February, so I wanted to finish the project as soon as possible since time was of the essence.

Having that in mind, I decided not to do SSR/SSG with Gatsby for the project but rather go with a single-page application (SPA) using Vite and React — a rather hard decision considering my extensive experience with Gatsby. Years ago, when I started using React and learning more and more about today’s intricate web landscape, I picked up Gatsby.js as my render framework of choice because SSR/SSG was necessary for every website, right?

I used it for everything, from the most basic website to the most over-engineered project. I absolutely loved it and thought it was the best tool, and I was incredibly confident in my decision since I was getting perfect Lighthouse scores in the process.

The years passed, and I found myself constantly fighting with Gatsby plugins, resorting to hacky solutions for them and even spending more time waiting for the server to start. It felt like I was fixing more than making. I even started a series for this magazine all about the “Gatsby headaches” I experienced most and how to overcome them.

It was like Gatsby got tougher to use with time because of lots of unaddressed issues: outdated dependencies, cold starts, slow builds, and stale plugins, to name a few. Starting a Gatsby project became tedious for me, and perfect Lighthouse scores couldn’t make up for that.

So, I’ve decided to stop using Gatsby as my go-to framework.

To my surprise, the Vite + React combination I mentioned earlier turned out to be a lot more efficient than I expected while maintaining almost the same great performance measures as Gatsby. It’s a hard conclusion to stomach after years of Gatsby’s loyalty.

I mean, I still think Gatsby is extremely useful for plenty of projects, and I plan on talking about those in a bit. But Gatsby has undergone a series of recent unfortunate events after Netlify acquired it, the impacts of which can be seen in down-trending results from the most recent State of JavaScript survey. The likelihood of a developer picking up Gatsby again after using it for other projects plummeted from 89% to a meager 38% between 2019 and 2022 alone.

Although Gatsby was still the second most-used rendering framework as recently as 2022 — we are still expecting results from the 2023 survey — my prediction is that the decline will continue and dip well below 38%.

Seeing as this is my personal farewell to Gatsby, I wanted to write about where, in my opinion, it went wrong, where it is still useful, and how I am handling my future projects.

Gatsby: A Retrospective

Kyle Mathews started working on what would eventually become Gatsby in late 2015. Thanks to its unique data layer and SSG approach, it was hyped for success and achieved a $3.8 million funding seed round in 2018. Despite initial doubts, Gatsby remained steadfast in its commitment and became a frontrunner in the Jamstack community by consistently enhancing its open-source framework and bringing new and better changes with each version.

So... where did it all go wrong?

I’d say it was the introduction of Gatsby Cloud in 2019, as Gatsby aimed at generating continuous revenue and solidifying its business model. Many (myself included) pinpoint Gatsby’s downfall to Gatsby Cloud, as it would end up cutting resources from the main framework and even making it harder to host in other cloud providers.

The core framework had been optimized in a way that using Gatsby and Gatsby Cloud together required no additional hosting configurations, which, as a consequence, made deployments in other platforms much more difficult, both by neglecting to provide documentation for third-party deployments and by releasing exclusive features, like incremental builds, that were only available to Gatsby users who had committed to using Gatsby Cloud. In short, hosting projects on anything but Gatsby Cloud felt like a penalty.

As a framework, Gatsby lost users to Next.js, as shown in both surveys and npm trends, while Gatsby Cloud struggled to compete with the likes of Vercel and Netlify; the former acquiring Gatsby in February of 2023.

“It [was] clear after a while that [Gatsby] weren’t winning the framework battle against Vercel, as a general purpose framework [...] And they were probably a bit boxed in by us in terms of building a cloud platform.”

— Matt Biilmann, Netlify CEO

The Netlify acquisition was the last straw in an already tumbling framework haystack. The migration from Gatsby Cloud to Netlify wasn’t pretty for customers either; some teams were charged 120% more — or had incurred extraneous fees — after converting from Gatsby Cloud to Netlify, even with the same Gatsby Cloud plan they had! Many key Gatsby Cloud features, specifically incremental builds that reduced build times of small changes from minutes to seconds, were simply no longer available in Netlify, despite Kyle Mathews saying they would be ported over to Netlify:

“Many performance innovations specifically for large, content-heavy websites, preview, and collaboration workflows, will be incorporated into the Netlify platform and, where relevant, made available across frameworks.”

— Kyle Mathews

However, in a Netlify forum thread dated August 2023, a mere six months after the acquisition, a Netlify support engineer contradicted Mathews’s statement, saying there were no plans to add incremental features in Netlify.

That left no significant reason to remain with Gatsby. And I think this comment on the same thread perfectly sums up the community’s collective sentiment:

“Yikes. Huge blow to Gatsby Cloud customers. The incremental build speed was exactly why we switched from Netlify to Gatsby Cloud in the first place. It’s really unfortunate to be forced to migrate while simultaneously introducing a huge regression in performance and experience.”

Netlify’s acquisition also brought about a company restructuring that substantially reduced the headcount of Gatsby’s engineering team, followed by a complete stop in commit activities. A report in an ominous tweet by Astro co-founder Fred Scott further exacerbated concerns about Gatsby’s future.

Lennart Jörgens, former full-stack developer at Gatsby and Netlify, replied, insinuating there was only one person left after the layoffs:

You can see all these factors contributing to Gatsby’s usage downfall in the 2023 Stack Overflow survey.

Biilmann addressed the community’s concerns about Gatsby’s viability in an open issue from the Gatsby repository:

“While we don’t plan for Gatsby to be where the main innovation in the framework ecosystem takes place, it will be a safe, robust and reliable choice to build production quality websites and e-commerce stores, and will gain new powers by ways of great complementary tools.”

— Matt Biilmann

He also shed light on Gatsby’s future focus:

  • “First, ensure stability, predictability, and good performance.
  • Second, give it new powers by strong integration with all new tooling that we add to our Composable Web Platform (for more on what’s all that, you can check out our homepage).
  • Third, make Gatsby more open by decoupling some parts of it that were closely tied to proprietary cloud infrastructure. The already-released Adapters feature is part of that effort.”

— Matt Biilmann

So, Gatsby gave up competing against Next.js on innovation, and instead, it will focus on keeping the existing framework clean and steady in its current state. Frankly, this seems like the most reasonable course of action considering today’s state of affairs.

Why Did People Stop Using Gatsby?

Yes, Gatsby Cloud ended abruptly, but as a framework independent of its cloud provider, other aspects encouraged developers to look for alternatives to Gatsby.

As far as I am concerned, Gatsby’s developer experience (DX) became more of a burden than a help, and there are two main culprits where I lay the blame: dependency hell and slow bundling times.

Dependency Hell

Go ahead and start a new Gatsby project:

gatsby new

After waiting a couple of minutes you will get your brand new Gatsby site. You’d rightly expect to have a clean slate with zero vulnerabilities and outdated dependencies with this out-of-the-box setup, but here’s what you will find in the terminal once you run npm audit:

18 vulnerabilities (11 moderate, 6 high, 1 critical)

That looks concerning — and it is — not so much from a security perspective but as an indication of decaying DX. As a static site generator (SSG), Gatsby will, unsurprisingly, deliver a static and safe site that (normally) doesn’t have access to a database or server, making it immune to most cyber attacks. Besides, lots of those vulnerabilities are in the developer tools and never reach the end user. Alas, relying on npm audit to assess your site security is a naive choice at best.

However, those vulnerabilities reveal an underlying issue: the whopping number of dependencies Gatsby uses is 168(!) at the time I’m writing this. For the sake of comparison, Next.js uses 16 dependencies. A lot of Gatsby’s dependencies are outdated, hence the warnings, but trying to update them to their latest versions will likely unleash a dependency hell full of additional npm warnings and errors.

In a related subreddit from 2022, a user asked, “Is it possible to have a Gatsby site without vulnerabilities?”

The real answer is disappointing, but as of March 2024, it remains true.

A Gatsby site should work completely fine, even with that many dependencies, and extending your project shouldn’t be a problem, whether through its plugin ecosystem or other packages. However, when trying to upgrade any existing dependency you will find that you can’t! Or at least you can’t do it without introducing breaking changes to one of the 168 dependencies, many of which rely on outdated versions of other libraries that also cannot be updated.

It’s that inception-like roundabout of dependencies that I call dependency hell.

Slow Build And Development Times

To me, one of the most important aspects of choosing a development tool is how comfortable it feels to use it and how fast it is to get a project up and running. As I’ve said before, users don’t care or know what a “tech stack” is or what framework is in use; they want a good-looking website that helps them achieve the task they came for. Many developers don’t even question what tech stack is used on each site they visit; at least, I hope not.

With that in mind, choosing a framework boils down to how efficiently you can use it. If your development server constantly experiences cold starts and crashes and is unable to quickly reflect changes, that’s a poor DX and a signal that there may be a better option.

That’s the main reason I won’t automatically reach for Gatsby from here on out. Installation is no longer a trivial task; the dependencies are firing off warnings, and it takes the development server upwards of 30 seconds to boot. I’ve even found that the longer the server runs, the slower it gets; this happens constantly to me, though I admittedly have not heard similar gripes from other developers. Regardless, I get infuriated having to constantly restart my development server every time I make a change to gatsby-config.js, gatsby-node.js files, or any other data source.

This new reality is particularly painful, knowing that a Vite.js + React setup can start a server within 500ms thanks to the use of esbuild.

Running gatsby build gets worse. Build times for larger projects normally take some number of minutes, which is understandable when we consider all of the pages, data sources, and optimizations Gatsby does behind the scenes. However, even a small content edit to a page triggers a full build and deployment process, and the endless waiting is not only exhausting but downright distracting for getting things done. That’s what incremental builds were designed to solve and the reason many people switched from Netlify to Gatsby Cloud when using Gatsby. It’s a shame we no longer have that as an available option.

The moment Gatsby Cloud was discontinued along with incremental builds, the incentives for continuing to use Gatsby became pretty much non-existent. The slow build times are simply too costly to the development workflow.

What Gatsby Did Awesomely Well

I still believe that Gatsby has awesome things that other rendering frameworks don’t, and that’s why I will keep using it, albeit for specific cases, such as my personal website. It just isn’t my go-to framework for everything, mainly because Gatsby (and the Jamstack) wasn’t meant for every project, even if Gatsby was marketed as a general-purpose framework.

Here’s where I see Gatsby still leading the competition:

  • The GraphQL data layer.
    In Gatsby, all the configured data is available in the same place, a data layer that’s easy to access using GraphQL queries in any part of your project. This is by far the best Gatsby feature, and it trivializes the process of building static pages from data, e.g., a blog from a content management system API or documentation from Markdown files.
  • Client performance.
    While Gatsby’s developer experience is questionable, I believe it delivers one of the best user experiences for navigating a website. Static pages and assets deliver the fastest possible load times, and using React Router with pre-rendering of proximate links offers one of the smoothest experiences navigating between pages. We also have to note Gatsby’s amazing image API, which optimizes images to all extents.
  • The plugin ecosystem (kinda).
    There is typically a Gatsby plugin for everything. This is awesome when using a CMS as a data source since you could just install its specific plugin and have all the necessary data in your data layer. However, a lot of plugins went unmaintained and grew outdated, introducing unsolvable dependency issues that come with dependency hell.

I briefly glossed over the good parts of Gatsby in contrast to the bad parts. Does that mean that Gatsby has more bad parts? Absolutely not; you just won’t find the bad parts in any documentation. The bad parts also aren’t deal breakers in isolation, but they snowball into a tedious and lengthy developer experience that pushes away its advocates to other solutions or rendering frameworks.

Do We Need SSR/SSG For Everything?

I’ll go on record saying that I am not replacing Gatsby with another rendering framework, like Next.js or Remix, but just avoiding them altogether. I’ve found they aren’t actually needed in a lot of cases.

Think, why do we use any type of rendering framework in the first place? I’d say it’s for two main reasons: crawling bots and initial loading time.

SEO And Crawling Bots

Most React apps start with a hollow body, only having an empty <div> alongside <script> tags. The JavaScript code then runs in the browser, where React creates the Virtual DOM and injects the rendered user interface into the browser.

Over slow networks, users may notice a white screen before the page is actually rendered, which is just mildly annoying at best (but devastating at worst).

However, search engines like Google and Bing deploy bots that only see an empty page and decide not to crawl the content. Or, if you are linking up a post on social media, you may not get OpenGraph benefits like a link preview.

<body>
  <div id="root"></div>

  <script type="module" src="/src/main.tsx"></script>
</body>

This was the case years ago, making SSR/SSG necessary for getting noticed by Google bots. Nowadays, Google can run JavaScript and render the content to crawl your website. While using SSR or SSG does make this process faster, not all bots can run JavaScript. It’s a tradeoff you can make for a lot of projects and one you can minimize on your cloud provider by pre-rendering your content.

Initial Loading Time

Pre-rendered pages load faster since they deliver static content that relieves the browser from having to run expensive JavaScript.

It’s especially useful when loading pages that are behind authentication; in a client-side rendered (CSR) page, we would need to display a loading state while we check if the user is logged in, while an SSR page can perform the check on the server and send back the correct static content. I have found, however, that this trade-off is an uncompelling argument for using a rendering framework over a CSR React app.

In any case, my SPA built on React + Vite.js gave me a perfect Lighthouse score for the landing page. Pages that fetch data behind authentication resulted in near-perfect Core Web Vitals scores.

What Projects Gatsby Is Still Good For

Gatsby and rendering frameworks are excellent for programmatically creating pages from data and, specifically, for blogs, e-commerce, and documentation.

Don’t be disappointed, though, if it isn’t the right tool for every use case, as that is akin to blaming a screwdriver for not being a good hammer. It still has good uses, though fewer than it could due to all the reasons we discussed before.

But Gatsby is still a useful tool. If you are a Gatsby developer the main reason you’d reach for it is because you know Gatsby. Not using it might be considered an opportunity cost in economic terms:

“Opportunity cost is the value of the next-best alternative when a decision is made; it’s what is given up.”

Imagine a student who spends an hour and $30 attending a yoga class the evening before a deadline. The opportunity cost encompasses the time that could have been dedicated to completing the project and the $30 that could have been used for future expenses.

As a Gatsby developer, I could start a new project using another rendering framework like Next.js. Even if Next.js has faster server starts, I would need to factor in my learning curve to use it as efficiently as I do Gatsby. That’s why, for my latest project, I decided to avoid rendering frameworks altogether and use Vite.js + React — I wanted to avoid the opportunity cost that comes with spending time learning how to use an “unfamiliar” framework.

Conclusion

So, is Gatsby dead? Not at all, or at least I don’t think Netlify will let it go away any time soon. The acquisition and subsequent changes to Gatsby Cloud may have taken a massive toll on the core framework, but Gatsby is very much still breathing, even if the current slow commits pushed to the repo look like it’s barely alive or hibernating.

I will most likely stick to Vite.js + React for my future endeavors and only use rendering frameworks when I actually need them. What are the tradeoffs? Sacrificing negligible page performance in favor of a faster and more pleasant DX that maintains my sanity? I’ll take that deal every day.

And, of course, this is my experience as a long-time Gatsby loyalist. Your experience is likely to differ, so the mileage of everything I’m saying may vary depending on your background using Gatsby on your own projects.

That’s why I’d love for you to comment below: if you see it differently, please tell me! Is your current experience using Gatsby different, better, or worse than it was a year ago? What’s different to you, if anything? It would be awesome to get other perspectives in here, perhaps from someone who has been involved in maintaining the framework.

Further Reading On SmashingMag

Posted on

7 Alternatives to Google Business Profile Websites (Compared)

Are you looking for alternatives to a Google Business Profile website?

Google has announced that it will start turning off all the free websites made for Google Business Profile users in March 2024. Unless you migrate to an alternative website, then visitors will see an error message when visiting your site.

In this article, we will share some of the best alternatives to Google Business Profile websites.

Alternatives to Google Business Profile Websites

Why Do You Need a Google Business Profile Website Alternative?

Creating a Google Business Profile is an easy way to make sure your business appears in local search results. It provides potential customers with your contact information, directions to your locations, and a link to your website.

Previously, Google offered to create free small business websites for Google Business Profile users that included all the information in your profile. 21.7 million business owners took them up on the offer.

However, Google announced that it is shutting down all Business Profile sites from March 2024 onward.

While your actual business profile will remain intact, the associated Google website will stop working. Until June 10, 2024, Google will redirect your website visitors to your profile, but after that, anyone trying to visit your site will see an error message.

To avoid this, you need to find a different solution for your website.

With that being said, let’s take a look at some of the best Google Business Profile website alternatives for small business websites.

1. WordPress

WordPress

WordPress is the world’s most popular website-building platform and powers over 43% of all websites on the internet. It’s easy to customize and gives you complete control over your site.

Note: Keep in mind that there are two types of WordPress. Here, we are talking about the self-hosted WordPress.org. For more details, you can see our article on the difference between WordPress.org and WordPress.com.

While the WordPress software is free, there are costs involved in building a WordPress website such as a domain name and web hosting. This can be as little as a few dollars a month.

If you want your new website to be simple and minimalistic like your Business Profile site, then there are plenty of one-page WordPress themes to choose from, like the one in this screenshot.

One-Page WordPress Theme

However, you might prefer to take the opportunity to add additional important pages such as a contact page, disclaimer page, privacy policy page, terms of service, and more.

You can also add additional features to your site by installing some must-have WordPress plugins for business websites. These let you add business features to your site like contact forms, landing pages, popups, newsletters, automations, and much more.

WPForms Simple Contact Form

If you want to rank on local search results pages, then you should also install All in One SEO (AIOSEO), which is the best search engine optimization plugin on the market.

It will let you quickly add business hours, multiple location schema, and a store locator to your WordPress website. These features improve your site’s local SEO and help nearby customers find your business in the search results.

AIOSEO local business information preview

If you want help migrating your site to WordPress, then check this out: How to migrate Google Business Profile Site to WordPress.

Pros:

  • Complete control over your website
  • Add the features you need using plugins
  • Choose a theme with the look and feel you want
  • Plugins let you rank for local SEO

Cons:

  • Slight learning curve
  • You need to manage your own website

Why we chose WordPress: WordPress is used on 43% of the world’s websites and gives you access to SEO plugins that can help your business get found online. You can use WordPress to create a new website that grows with your business.

2. Wix

Wix

Wix is a popular, cloud-based website builder. It lets you easily build your website using drag-and-drop and is used by over 3.6% of all websites.

It’s a good solution if you only need a simple website like the one you already have on Google, but you may outgrow its features as your business grows.

When we created a test site on Wix, we discovered that after you choose an initial design, there is no easy way to change templates to give your site a fresh look.

Wix Drag-and-Drop Builder

While Wix doesn’t offer the same range of plugins as WordPress, it does have an online market that offers over 300 apps for adding features like booking forms, marketing, and online payments.

It also offers tools that help you optimize your website for search to attract more organic traffic.

There is a free version of Wix, but we found it quite limited in features, and it displays ads. You can also upgrade to a Pro plan to get more features, but this can become quite expensive.

Read our detailed comparison of Wix vs. WordPress for more information.

Pros:

  • Its drag-and-drop editor makes it easy to build a website quickly
  • Web hosting is included

Cons:

  • You can’t choose a different hosting provider
  • The free version is quite limited and displays ads on your website
  • Pro plans can become expensive

Why we chose Wix: Wix is a popular website builder that is a good option for people who prefer a simple business website similar to their Google Business Profiles site.

3. Web.com

Web.com

Web.com is another popular website builder for small businesses. Its affordable pricing plans make it an attractive alternative to Wix.

Like Wix, it has an easy-to-use drag-and-drop website builder and plenty of templates to choose from. That makes customizing your website design very easy.

Web.com templates

Wix’s plans include web hosting, a free domain name, a business email address, website security and backups, SEO and analytics, and other powerful website tools. They also offer affordable custom web design services separately.

Pros:

  • Easy to use drag-and-drop website builder
  • Affordable pricing
  • Pre-made website templates
  • Web hosting is included

Cons:

  • You can’t choose a different hosting provider
  • No free plan

Why we chose Web.com: Web.com is both affordable and easy to use. It’s a great Google Business Profile website alternative for business owners who are looking for a relatively simple website.

4. Squarespace

Squarespace

Squarespace is an easy-to-use premium website builder known for its great designs. Around 2.1% of all websites on the internet are built with Squarespace.

It uses a block editor for content creation similar to the Gutenberg editor in WordPress. When we tested it, we found it easy to add images, videos, and audio files. However, the editor doesn’t save your work automatically, so you will need to remember to do that yourself.

Squarespace editor

It offers customizable templates that let you get started building your site quickly. You can also add new features to your website using Squarespace extensions, though these are more limited than what is available for WordPress.

You can read our detailed comparison of Squarespace vs. WordPress.

Pros:

  • Easy to set up and use
  • Web hosting is included

Cons:

  • You can’t change to a different hosting provider
  • Costs more than shared hosting plans
  • No free plan

Why we chose Squarespace: Squarespace offers a secure hosting platform with an easy-to-use interface that lets you build a website with great design.

5. Weebly

Weebly

Weebly is a beginner-friendly website builder with loads of great designs. It’s a page builder that lets you create a website without coding skills.

You’ll find built-in support for contact forms, photo galleries, sliders, and more. Weebly also offers different free and paid applications to add additional features to your site, but the selection is more limited than with WordPress.

You can choose from dozens of website designs as a starting point for your website, and edit your content using a live page editor. You can also build and manage your website using a mobile app.

Weebly Website Builder Interface

Weebly is particularly suitable for creating beautiful but small websites. It makes it easy to get started with a website, but you may find that over time, your needs outgrow what it offers.

There is a free plan, but it is quite limited and displays ads. Most business users will find their paid plans more suitable.

Read our detailed comparison of WordPress vs. Weebly for more details.

Pros:

  • Easy to use
  • Dozens of website designs
  • Free and paid applications add new features
  • Web hosting is included

Cons:

  • You can’t change to a different hosting provider
  • The free plan is limited and displays ads

Why we chose Weebly: Weebly is a beautiful website builder known for its simplicity. It’s most suitable for small websites such as those you typically find as Google Business Profile websites.

6. Carrd

Carrd

Carrd provides an easy way to create simple, single-page websites. It’s a great choice if you just want to recreate your Google Business website away from the Google platform.

You choose a template as a starting point, and dozens of business profile templates are included.

Carrd Template

You can then customize the template using simple tools and a drag-and-drop interface.

The free plan is all you need to create a business profile website as long as you are happy to display a little Carrd branding. There are also paid plans that remove the branding and allow you to use a custom domain.

Pros:

  • Very easy to use
  • Perfect for creating a simple single-page profile website
  • The free plan is suitable for most users

Cons:

  • Not suitable for more complex websites

Why we chose Carrd: Carrd is a simple and free way to create a single-page profile website.

7. Google Sites

Google Sites

Google Sites is the best choice if you simply want to recreate your Google Business Profile website and remain in the Google ecosystem.

You can use its block-based editor to add text, images, contact information, business hours, and more. The Google Sites template gallery also offers a handful of small business templates that will help you get started.

Google Sites Content Editor

However, after testing Google Sites, we only recommend it for the most basic websites. If you wish to customize your new website’s appearance or add new features, then you will be much better off with an alternative like WordPress.

For more details, please read our detailed comparison of WordPress vs. Google Sites.

Pros:

  • Allows you to remain in the Google ecosystem
  • Suitable for basic websites

Cons:

  • Not suitable for more complex websites

Why we chose Google Sites: Google Sites lets you create a basic website while remaining in the Google ecosystem.

What Is the Best Google Business Profile Website Alternative?

For most businesses, the best alternative to a Google Business Profile website is WordPress. This is especially true if you want to build a website that can grow with your business rather than remain a simple profile site.

You can choose from thousands of WordPress themes to create a unique look and feel for your website, including single-page themes, business themes, and corporate themes.

There are also plenty of business plugins that will add the features you need.

Besides that, you can choose a WordPress hosting plan that suits your budget. This can be as little as $1.99 per month.

However, if you want to create a simple website and avoid some of the maintenance involved in hosting your own site, then hosted website builders like Wix, Web.com, and Squarespace are also good choices. These are initially easier to set up, but they won’t grow with your business in the same way that WordPress will.

Finally, if you are looking for a free option to set up a simple business profile site, then Carrd and Google Sites will achieve that, but go no further.

FAQs About Business Profile Websites

Here are answers to the questions we’re asked most often about business profile websites.

When is Google discontinuing its Google Business Profile websites?

Google will turn off all the free websites it created for Business Profile users from March 2024.

Once Google shuts down your website, it will redirect your website visitors to your Google Business Profile until June 10, 2024.

After that date, unless you have migrated to a new website, anyone trying to visit your website will see a ‘404 not found‘ error message.

For more details on what you need to do, please see our guide on how to migrate a Google Business Profile website to WordPress.

What is a business profile website?

A business profile website is an online space where you can showcase your company’s identity, values, and offerings to potential customers and clients.

It is an online hub where you can make a good first impression and provide essential information about your business.

What should a business profile website contain?

A business profile website should clearly state your company name and describe what you do. It should also include contact information so potential clients can get in touch.

You may want to add an About Us page to share your story and mission, and a services section or landing page where you can provide more information about what you offer.

It’s also a good idea to have a clear call to action (CTA) that encourages visitors to take the next step, such as subscribing to your newsletter, asking for a quote, or browsing your portfolio.

How can you further enhance a business profile website?

You can showcase your expertise on your website by adding testimonials from happy customers or building a portfolio of your previous work.

You can also create a blog or news section to share valuable information and establish yourself as an industry expert.

Finally, you can demonstrate credibility by featuring client logos and any industry awards you have received.

Best Guides for Growing a Small Business Website

Now that you have seen the best alternatives for Google Business Profile websites, you may wish to see some other articles related to growing a small business:

We hope this tutorial helped you find the best alternatives for Google Business Profile websites. You may also want to see our guide on how to migrate from a Google Business Profile website to WordPress or our expert pick of the best social media plugins for 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 7 Alternatives to Google Business Profile Websites (Compared) first appeared on WPBeginner.

Posted on

Here’s When Website Breadcrumbs Actually Help Your Visitors

Similar to directory levels in an operating system, breadcrumbs are secondary navigational tools that help visiting users identify their current positions on websites, mobile applications, and even some offline systems. In a nutshell, breadcrumbs can help both search engines and human users find their way around your site, but it’s […]

The post Here’s When Website Breadcrumbs Actually Help Your Visitors appeared first on .